From 77f683a1b399718785f8ba27e6521db1dc513c92 Mon Sep 17 00:00:00 2001
From: Timothy Koech <timosville@gmail.com>
Date: Tue, 11 Aug 2026 10:23:19 +0300
Subject: [PATCH 01/13] feat: add story block editor with content, title, and
 scripture blocks

---
 .../stories/components/block-empty-state.vue  |   8 +
 .../components/block-rich-text-editor.vue     |  96 ++++
 .../components/block-scripture-field.vue      |  71 +++
 .../stories/components/block-utils.ts         |  64 +++
 .../stories/components/block-video-field.vue  |  66 +++
 .../stories/components/content-block-card.vue | 422 ++++++++++++++++++
 .../components/scripture-block-card.vue       | 246 ++++++++++
 .../components/story-edit-blocks.story.vue    | 123 +++++
 .../stories/components/story-edit-blocks.vue  | 185 ++++++++
 .../stories/components/title-block-card.vue   | 241 ++++++++++
 src/frontend/stories/story-create.vue         |  18 +-
 src/frontend/stories/story-edit-tab-errors.ts |  14 +-
 src/frontend/stories/story-edit.story.vue     |  25 +-
 src/frontend/stories/story-edit.vue           |  18 +-
 src/types.ts                                  |  43 ++
 tests/unit/story-edit-tab-errors.spec.ts      |  12 +
 16 files changed, 1646 insertions(+), 6 deletions(-)
 create mode 100644 src/frontend/stories/components/block-empty-state.vue
 create mode 100644 src/frontend/stories/components/block-rich-text-editor.vue
 create mode 100644 src/frontend/stories/components/block-scripture-field.vue
 create mode 100644 src/frontend/stories/components/block-utils.ts
 create mode 100644 src/frontend/stories/components/block-video-field.vue
 create mode 100644 src/frontend/stories/components/content-block-card.vue
 create mode 100644 src/frontend/stories/components/scripture-block-card.vue
 create mode 100644 src/frontend/stories/components/story-edit-blocks.story.vue
 create mode 100644 src/frontend/stories/components/story-edit-blocks.vue
 create mode 100644 src/frontend/stories/components/title-block-card.vue

diff --git a/src/frontend/stories/components/block-empty-state.vue b/src/frontend/stories/components/block-empty-state.vue
new file mode 100644
index 00000000..a4415dc6
--- /dev/null
+++ b/src/frontend/stories/components/block-empty-state.vue
@@ -0,0 +1,8 @@
+<template>
+  <div class="py-11">
+    <p class="text-center font-dmsans text-base font-normal leading-7 text-studio-forest">
+      There are no blocks yet. <br />
+      Add a content, title, or scripture block below to get started.
+    </p>
+  </div>
+</template>
diff --git a/src/frontend/stories/components/block-rich-text-editor.vue b/src/frontend/stories/components/block-rich-text-editor.vue
new file mode 100644
index 00000000..d5aa794b
--- /dev/null
+++ b/src/frontend/stories/components/block-rich-text-editor.vue
@@ -0,0 +1,96 @@
+<template>
+  <div>
+    <label v-if="label" class="input-label mb-2 block">{{ label }}</label>
+    <div class="mt-1">
+      <div class="cm-s-easymde rounded-xl border border-gray-200">
+        <textarea ref="textArea" data-testid="block-rich-text-editor" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import type { Editor, EditorChange } from 'codemirror';
+import type EasyMDE from '../../fields/markdown/types';
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: string;
+    label?: string;
+    placeholder?: string;
+  }>(),
+  {
+    label: '',
+    placeholder: 'Enter your content...',
+  },
+);
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string];
+}>();
+
+const textArea = ref<HTMLTextAreaElement>();
+let mde: EasyMDE | null = null;
+let isSettingValue = false;
+
+const toolbar = [
+  'bold',
+  'italic',
+  'strikethrough',
+  'unordered-list',
+  'ordered-list',
+  '|',
+  'link',
+];
+
+const update = (_editor: Editor, change: EditorChange) => {
+  if (change.origin === 'setValue' || isSettingValue) return;
+  emit('update:modelValue', mde?.value() ?? '');
+};
+
+const syncValue = (value: string) => {
+  if (!mde || mde.value() === value) return;
+  isSettingValue = true;
+  mde.codemirror.setValue(value);
+  isSettingValue = false;
+};
+
+watch(
+  () => props.modelValue,
+  (value) => {
+    syncValue(value);
+  },
+);
+
+onMounted(async () => {
+  const easymdeModule = await import('easymde');
+  const EasyMDEConstructor = easymdeModule.default;
+  mde = new EasyMDEConstructor({
+    minHeight: '200px',
+    element: textArea.value,
+    spellChecker: false,
+    nativeSpellcheck: false,
+    status: false,
+    placeholder: props.placeholder,
+    // @ts-expect-error toolbar is not typed
+    toolbar,
+  });
+  mde.codemirror.on('change', update);
+  syncValue(props.modelValue);
+});
+
+onBeforeUnmount(() => {
+  mde?.toTextArea();
+  mde?.codemirror.off('change', update);
+  mde = null;
+});
+</script>
+
+<style>
+@import 'easymde/dist/easymde.min.css';
+
+.editor-toolbar {
+  background-color: white !important;
+}
+</style>
diff --git a/src/frontend/stories/components/block-scripture-field.vue b/src/frontend/stories/components/block-scripture-field.vue
new file mode 100644
index 00000000..c61ebcf8
--- /dev/null
+++ b/src/frontend/stories/components/block-scripture-field.vue
@@ -0,0 +1,71 @@
+<template>
+  <ScriptureField :field="fieldSpec" :root-path="rootPath" :is-nested="true" />
+</template>
+
+<script setup lang="ts">
+import { computed, onBeforeUnmount, watch } from 'vue';
+
+import type { FieldSpec, Scripture } from '../../../types';
+import ScriptureField from '../../fields/scripture-field.vue';
+import { useModelStore } from '../../store';
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: Scripture;
+    blockId: string;
+    label?: string;
+  }>(),
+  {
+    label: 'Scripture',
+  },
+);
+
+const emit = defineEmits<{
+  'update:modelValue': [value: Scripture];
+}>();
+
+const model = useModelStore();
+const rootPath = computed(() => `_contentBlocks.${props.blockId}`);
+const scripturePath = computed(() => `${rootPath.value}.scripture`);
+
+const fieldSpec = computed(
+  (): FieldSpec => ({
+    label: props.label,
+    name: 'scripture',
+    widget: 'scripture',
+  }),
+);
+
+const readScripture = (): Scripture =>
+  model.getField(scripturePath.value, { reference: '', verse: '' }) as Scripture;
+
+watch(
+  () => props.modelValue,
+  (value) => {
+    const current = readScripture();
+    if (
+      current.reference === value.reference &&
+      current.verse === value.verse
+    ) {
+      return;
+    }
+    model.setField(scripturePath.value, value);
+  },
+  { immediate: true, deep: true },
+);
+
+const unsubscribe = model.$subscribe(() => {
+  const fresh = readScripture();
+  if (
+    fresh.reference === props.modelValue.reference &&
+    fresh.verse === props.modelValue.verse
+  ) {
+    return;
+  }
+  emit('update:modelValue', { ...fresh });
+});
+
+onBeforeUnmount(() => {
+  unsubscribe();
+});
+</script>
diff --git a/src/frontend/stories/components/block-utils.ts b/src/frontend/stories/components/block-utils.ts
new file mode 100644
index 00000000..841fc2e1
--- /dev/null
+++ b/src/frontend/stories/components/block-utils.ts
@@ -0,0 +1,64 @@
+import type {
+  StoryBlock,
+  StoryContentBlock,
+  StoryScriptureBlock,
+  StoryTitleBlock,
+} from '../../../types';
+
+export const DEFAULT_BLOCK_ROLE = 'summary';
+export const DEFAULT_BLOCK_STYLE = 'default';
+
+const defaultVisibility = {
+  presenter: true,
+  personal: true,
+  hidden: false,
+};
+
+export function createBlockId(): string {
+  return crypto.randomUUID();
+}
+
+export function createEmptyBlock(): StoryContentBlock {
+  return {
+    id: createBlockId(),
+    kind: 'content',
+    blockName: '',
+    displayName: '',
+    blockRole: DEFAULT_BLOCK_ROLE,
+    style: DEFAULT_BLOCK_STYLE,
+    blockType: 'text',
+    content: '',
+    url: '',
+    video: { url: null },
+    visibility: { ...defaultVisibility },
+    leadersNotes: '',
+    showLeadersNotes: true,
+  };
+}
+
+export function createEmptyTitleBlock(): StoryTitleBlock {
+  return {
+    id: createBlockId(),
+    kind: 'title',
+    blockName: '',
+    title: '',
+    style: DEFAULT_BLOCK_STYLE,
+    visibility: { ...defaultVisibility },
+  };
+}
+
+export function createEmptyScriptureBlock(): StoryScriptureBlock {
+  return {
+    id: createBlockId(),
+    kind: 'scripture',
+    blockName: '',
+    scripture: { reference: '', verse: '' },
+    visibility: { ...defaultVisibility },
+    leadersNotes: '',
+    showLeadersNotes: true,
+  };
+}
+
+export function blockKind(block: StoryBlock): StoryBlock['kind'] {
+  return block.kind ?? 'content';
+}
diff --git a/src/frontend/stories/components/block-video-field.vue b/src/frontend/stories/components/block-video-field.vue
new file mode 100644
index 00000000..59fd78f9
--- /dev/null
+++ b/src/frontend/stories/components/block-video-field.vue
@@ -0,0 +1,66 @@
+<template>
+  <VideoField :field="fieldSpec" :root-path="rootPath" :is-nested="true" />
+</template>
+
+<script setup lang="ts">
+import { computed, onBeforeUnmount, watch } from 'vue';
+
+import type { FieldSpec } from '../../../types';
+import VideoField from '../../fields/video-field.vue';
+import { useModelStore } from '../../store';
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: { url: string | null };
+    collectionId: string;
+    blockId: string;
+    label?: string;
+  }>(),
+  {
+    label: 'Video',
+  },
+);
+
+const emit = defineEmits<{
+  'update:modelValue': [value: { url: string | null }];
+}>();
+
+const model = useModelStore();
+const rootPath = computed(() => `_contentBlocks.${props.blockId}`);
+const videoPath = computed(() => `${rootPath.value}.video`);
+
+const fieldSpec = computed(
+  (): FieldSpec => ({
+    label: props.label,
+    name: 'video',
+    widget: 'video',
+    description: 'MP4 and MOV files up to 500MB',
+    extensions: ['.mp4', '.mov'],
+    collectionId: props.collectionId,
+    maxSize: 500662310,
+  }),
+);
+
+const readVideo = (): { url: string | null } =>
+  model.getField(videoPath.value, { url: null }) as { url: string | null };
+
+watch(
+  () => props.modelValue,
+  (value) => {
+    const current = readVideo();
+    if (current.url === value.url) return;
+    model.setField(videoPath.value, value);
+  },
+  { immediate: true, deep: true },
+);
+
+const unsubscribe = model.$subscribe(() => {
+  const fresh = readVideo();
+  if (fresh.url === props.modelValue.url) return;
+  emit('update:modelValue', { ...fresh });
+});
+
+onBeforeUnmount(() => {
+  unsubscribe();
+});
+</script>
diff --git a/src/frontend/stories/components/content-block-card.vue b/src/frontend/stories/components/content-block-card.vue
new file mode 100644
index 00000000..121bdcdd
--- /dev/null
+++ b/src/frontend/stories/components/content-block-card.vue
@@ -0,0 +1,422 @@
+<template>
+  <div
+    class="relative my-2 list-none rounded-xl border border-gray-200 p-0"
+    draggable="true"
+    @dragstart="emit('dragstart')"
+    @dragover.prevent
+    @drop="emit('drop')"
+    @dragend="emit('dragend')"
+  >
+    <div class="rounded-xl bg-white">
+      <div
+        :class="[
+          'flex items-center justify-between gap-3 overflow-hidden px-4 py-3',
+          { 'border-b border-gray-100': expanded },
+        ]"
+      >
+        <div class="flex min-w-0 items-center gap-3">
+          <button
+            type="button"
+            class="cursor-move text-gray-400"
+            aria-label="Reorder content block"
+          >
+            <GripVertical class="size-4" aria-hidden="true" />
+          </button>
+          <button
+            type="button"
+            class="inline-flex min-w-0 items-center gap-2 text-left text-sm font-semibold text-gray-800"
+            @click="emit('toggle')"
+          >
+            <span class="truncate">{{ blockTitle }}</span>
+            <div
+              v-if="block.visibility.presenter"
+              class="flex shrink-0 items-center rounded bg-studio-yellow p-[5px]"
+            >
+              <Monitor class="size-[14px] text-studio-forest" aria-hidden="true" />
+            </div>
+            <div
+              v-if="block.visibility.personal"
+              class="flex shrink-0 items-center rounded bg-studio-lime p-[5px]"
+            >
+              <User class="size-[14px] text-studio-forest" aria-hidden="true" />
+            </div>
+          </button>
+        </div>
+        <div class="flex items-center justify-center gap-1">
+          <button
+            type="button"
+            class="rounded-xl p-1.5 text-gray-400 transition-colors hover:bg-red-50 hover:text-red-600"
+            aria-label="Delete content block"
+            @click="emit('delete')"
+          >
+            <Trash2 class="size-4" aria-hidden="true" />
+          </button>
+          <button
+            type="button"
+            class="rounded-xl p-1.5 text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600"
+            :aria-label="expanded ? 'Collapse content block' : 'Expand content block'"
+            @click="emit('toggle')"
+          >
+            <ChevronDown
+              class="size-4 origin-center transition-transform duration-200 ease-out"
+              :class="{ 'rotate-180': expanded }"
+              aria-hidden="true"
+            />
+          </button>
+        </div>
+      </div>
+
+      <div v-if="expanded" class="space-y-6 p-6">
+        <div>
+          <label :for="`${block.id}-block-name`" class="input-label">Block Name</label>
+          <input
+            :id="`${block.id}-block-name`"
+            type="text"
+            :value="block.blockName"
+            placeholder="e.g., Summary, Introduction, Overview"
+            class="input-field mt-[2px]"
+            @input="updateField('blockName', ($event.target as HTMLInputElement).value)"
+          />
+          <p class="mt-1 text-sm italic text-gray-500">
+            This becomes the collapsible section name
+          </p>
+        </div>
+
+        <div>
+          <label :for="`${block.id}-display-name`" class="input-label"
+            >Display Name</label
+          >
+          <input
+            :id="`${block.id}-display-name`"
+            type="text"
+            :value="block.displayName"
+            placeholder="e.g., Session Summary"
+            class="input-field mt-[2px]"
+            @input="updateField('displayName', ($event.target as HTMLInputElement).value)"
+          />
+        </div>
+
+        <RichListbox
+          :model-value="block.blockRole"
+          label="Block Role"
+          :options="blockRoleOptions"
+          @update:model-value="updateField('blockRole', $event)"
+        />
+
+        <RichListbox
+          :model-value="block.style"
+          label="Style"
+          :options="styleOptions"
+          @update:model-value="updateField('style', $event)"
+        />
+
+        <RichListbox
+          :model-value="block.blockType"
+          label="Block Type"
+          :options="blockTypeOptions"
+          @update:model-value="setBlockType"
+        />
+
+        <BlockRichTextEditor
+          v-if="block.blockType === 'text'"
+          v-model="contentModel"
+          label="Text Content"
+          placeholder="Enter your content..."
+        />
+
+        <div v-if="block.blockType === 'url'">
+          <label :for="`${block.id}-url`" class="input-label">URL</label>
+          <input
+            :id="`${block.id}-url`"
+            type="url"
+            :value="block.url ?? ''"
+            placeholder="https://..."
+            class="input-field mt-[2px]"
+            @input="updateField('url', ($event.target as HTMLInputElement).value)"
+          />
+        </div>
+
+        <BlockVideoField
+          v-if="block.blockType === 'video'"
+          :model-value="block.video ?? { url: null }"
+          :collection-id="videoCollectionId ?? ''"
+          :block-id="block.id"
+          label="Video"
+          @update:model-value="updateField('video', $event)"
+        />
+
+        <section class="border-gray-[#E5E7EB] rounded-xl border bg-gray-50 p-4">
+          <legend class="input-label mb-3">Visibility</legend>
+          <div class="flex items-center gap-6">
+            <label
+              v-for="option in visibilityOptions"
+              :key="option.key"
+              class="flex cursor-pointer items-center gap-3"
+            >
+              <input
+                type="checkbox"
+                class="size-[22px] rounded border-gray-300 text-studio-forest focus:ring-blue-500"
+                :checked="block.visibility[option.key]"
+                @change="
+                  updateVisibility(
+                    option.key,
+                    ($event.target as HTMLInputElement).checked,
+                  )
+                "
+              />
+              <div
+                class="flex items-center gap-2 rounded"
+                :class="option.iconBackgroundClass"
+              >
+                <component
+                  :is="option.icon"
+                  class="size-[14px] text-studio-forest"
+                  aria-hidden="true"
+                />
+              </div>
+              <span class="text-sm font-medium text-gray-900">{{ option.label }}</span>
+            </label>
+          </div>
+        </section>
+
+        <div
+          v-if="block.showLeadersNotes"
+          class="rounded-xl border border-studio-yellow/60 bg-studio-yellow/30 p-4"
+        >
+          <div class="mb-3 flex items-center justify-between gap-3">
+            <div class="flex items-center gap-2">
+              <Crown class="size-[18px] text-studio-forest" aria-hidden="true" />
+              <span class="text-sm font-semibold text-studio-forest">Leaders Notes</span>
+              <span
+                class="rounded-full bg-studio-yellow px-2 py-0.5 text-xs font-medium text-studio-forest"
+              >
+                Leaders Only
+              </span>
+            </div>
+            <button
+              type="button"
+              class="rounded-xl p-1.5 text-gray-400 transition-colors hover:bg-red-50 hover:text-red-600"
+              aria-label="Remove leaders notes"
+              @click="updateField('showLeadersNotes', false)"
+            >
+              <Trash2 class="size-4" aria-hidden="true" />
+            </button>
+          </div>
+          <textarea
+            :value="block.leadersNotes"
+            rows="3"
+            placeholder="Add guidance and notes for leaders..."
+            class="input-field min-h-[80px] resize-y"
+            @input="
+              updateField('leadersNotes', ($event.target as HTMLTextAreaElement).value)
+            "
+          />
+        </div>
+
+        <button
+          v-else
+          type="button"
+          class="text-sm font-medium text-studio-forest underline-offset-2 hover:underline"
+          @click="updateField('showLeadersNotes', true)"
+        >
+          Add Leaders Notes
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { Component } from 'vue';
+import {
+  BookOpen,
+  ChevronDown,
+  Crown,
+  ExternalLink,
+  EyeOff,
+  FileText,
+  GripVertical,
+  Monitor,
+  Star,
+  Trash2,
+  User,
+  Video,
+} from '@lucide/vue';
+
+import type { BlockVisibility, ResourceType, StoryContentBlock } from '../../../types';
+import RichListbox from '../../shared/rich-listbox.vue';
+import BlockRichTextEditor from './block-rich-text-editor.vue';
+import BlockVideoField from './block-video-field.vue';
+
+const props = defineProps<{
+  block: StoryContentBlock;
+  expanded: boolean;
+  videoCollectionId?: string;
+}>();
+
+const emit = defineEmits<{
+  'update:block': [block: StoryContentBlock];
+  delete: [];
+  toggle: [];
+  dragstart: [];
+  drop: [];
+  dragend: [];
+}>();
+
+const blockTitle = computed(() =>
+  props.block.blockName.trim() ? props.block.blockName.trim() : 'New Content Block',
+);
+
+const contentModel = computed({
+  get: () => props.block.content,
+  set: (value: string) => updateField('content', value),
+});
+
+const updateField = <K extends keyof StoryContentBlock>(
+  key: K,
+  value: StoryContentBlock[K],
+) => {
+  emit('update:block', { ...props.block, [key]: value });
+};
+
+const updateVisibility = (key: keyof BlockVisibility, checked: boolean) => {
+  emit('update:block', {
+    ...props.block,
+    visibility: { ...props.block.visibility, [key]: checked },
+  });
+};
+
+const setBlockType = (type: string) => {
+  const blockType = type as ResourceType;
+  const next: StoryContentBlock = { ...props.block, blockType };
+
+  if (blockType !== 'url') {
+    next.url = '';
+  } else if (next.url === undefined) {
+    next.url = '';
+  }
+
+  if (blockType !== 'video') {
+    next.video = { url: null };
+  } else if (!next.video) {
+    next.video = { url: null };
+  }
+
+  if (blockType !== 'text') {
+    next.content = '';
+  } else if (next.content === undefined) {
+    next.content = '';
+  }
+
+  emit('update:block', next);
+};
+
+const blockRoleOptions: {
+  value: string;
+  label: string;
+  description: string;
+  icon: Component;
+}[] = [
+  {
+    value: 'summary',
+    label: 'Summary',
+    description: 'Recap or overview of the session',
+    icon: BookOpen,
+  },
+  {
+    value: 'introduction',
+    label: 'Introduction',
+    description: 'Opening context for the content',
+    icon: BookOpen,
+  },
+  {
+    value: 'reflection',
+    label: 'Reflection',
+    description: 'Prompt for personal reflection',
+    icon: BookOpen,
+  },
+];
+
+const styleOptions: {
+  value: string;
+  label: string;
+  description: string;
+  icon: Component;
+}[] = [
+  {
+    value: 'default',
+    label: 'Default',
+    description: 'Standard visual weight',
+    icon: Star,
+  },
+  {
+    value: 'emphasis',
+    label: 'Emphasis',
+    description: 'Draws more attention',
+    icon: Star,
+  },
+  {
+    value: 'subtle',
+    label: 'Subtle',
+    description: 'Lighter visual treatment',
+    icon: Star,
+  },
+];
+
+const blockTypeOptions: {
+  value: ResourceType;
+  label: string;
+  description: string;
+  icon: Component;
+}[] = [
+  {
+    value: 'text',
+    label: 'Text',
+    description: 'Rich formatted text content',
+    icon: FileText,
+  },
+  {
+    value: 'url',
+    label: 'URL',
+    description: 'Link to an external website or resource',
+    icon: ExternalLink,
+  },
+  {
+    value: 'video',
+    label: 'Video',
+    description: 'Upload a video file',
+    icon: Video,
+  },
+];
+
+const visibilityOptions: {
+  key: keyof BlockVisibility;
+  label: string;
+  icon: Component;
+
+  iconBackgroundClass: string;
+}[] = [
+  {
+    key: 'presenter',
+    label: 'Presenter',
+    icon: Monitor,
+
+    iconBackgroundClass: 'bg-studio-yellow p-[5px]',
+  },
+  {
+    key: 'personal',
+    label: 'Personal',
+    icon: User,
+
+    iconBackgroundClass: 'bg-studio-lime p-[5px]',
+  },
+  {
+    key: 'hidden',
+    label: 'Hidden',
+    icon: EyeOff,
+
+    iconBackgroundClass: 'bg-red-200 p-[5px]',
+  },
+];
+</script>
diff --git a/src/frontend/stories/components/scripture-block-card.vue b/src/frontend/stories/components/scripture-block-card.vue
new file mode 100644
index 00000000..e3cfd965
--- /dev/null
+++ b/src/frontend/stories/components/scripture-block-card.vue
@@ -0,0 +1,246 @@
+<template>
+  <div
+    class="relative my-2 list-none rounded-xl border border-gray-200 p-0"
+    draggable="true"
+    @dragstart="emit('dragstart')"
+    @dragover.prevent
+    @drop="emit('drop')"
+    @dragend="emit('dragend')"
+  >
+    <div class="rounded-xl bg-white">
+      <div
+        :class="[
+          'flex items-center justify-between gap-3 overflow-hidden px-4 py-3',
+          { 'border-b border-gray-100': expanded },
+        ]"
+      >
+        <div class="flex min-w-0 items-center gap-3">
+          <button
+            type="button"
+            class="cursor-move text-gray-400"
+            aria-label="Reorder scripture block"
+          >
+            <GripVertical class="size-4" aria-hidden="true" />
+          </button>
+          <button
+            type="button"
+            class="inline-flex min-w-0 items-center gap-2 text-left text-sm font-semibold text-gray-800"
+            @click="emit('toggle')"
+          >
+            <span class="truncate">{{ blockTitle }}</span>
+            <div
+              v-if="block.visibility.presenter"
+              class="flex shrink-0 items-center rounded bg-studio-yellow p-[5px]"
+            >
+              <Monitor class="size-[14px] text-studio-forest" aria-hidden="true" />
+            </div>
+            <div
+              v-if="block.visibility.personal"
+              class="flex shrink-0 items-center rounded bg-studio-lime p-[5px]"
+            >
+              <User class="size-[14px] text-studio-forest" aria-hidden="true" />
+            </div>
+          </button>
+        </div>
+        <div class="flex items-center justify-center gap-1">
+          <button
+            type="button"
+            class="rounded-xl p-1.5 text-gray-400 transition-colors hover:bg-red-50 hover:text-red-600"
+            aria-label="Delete scripture block"
+            @click="emit('delete')"
+          >
+            <Trash2 class="size-4" aria-hidden="true" />
+          </button>
+          <button
+            type="button"
+            class="rounded-xl p-1.5 text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600"
+            :aria-label="expanded ? 'Collapse scripture block' : 'Expand scripture block'"
+            @click="emit('toggle')"
+          >
+            <ChevronDown
+              class="size-4 origin-center transition-transform duration-200 ease-out"
+              :class="{ 'rotate-180': expanded }"
+              aria-hidden="true"
+            />
+          </button>
+        </div>
+      </div>
+
+      <div v-if="expanded" class="space-y-6 p-6">
+        <div>
+          <label :for="`${block.id}-block-name`" class="input-label">Block Name</label>
+          <input
+            :id="`${block.id}-block-name`"
+            type="text"
+            :value="block.blockName"
+            placeholder="e.g., Opening Passage, Key Verse"
+            class="input-field mt-[2px]"
+            @input="updateField('blockName', ($event.target as HTMLInputElement).value)"
+          />
+          <p class="mt-1 text-sm italic text-gray-500">
+            This becomes the collapsible section name
+          </p>
+        </div>
+
+        <BlockScriptureField
+          :model-value="block.scripture"
+          :block-id="block.id"
+          label="Scripture"
+          @update:model-value="updateField('scripture', $event)"
+        />
+
+        <section class="border-gray-[#E5E7EB] rounded-xl border bg-gray-50 p-4">
+          <legend class="input-label mb-3">Visibility</legend>
+          <div class="flex items-center gap-6">
+            <label
+              v-for="option in visibilityOptions"
+              :key="option.key"
+              class="flex cursor-pointer items-center gap-3"
+            >
+              <input
+                type="checkbox"
+                class="size-[22px] rounded border-gray-300 text-studio-forest focus:ring-blue-500"
+                :checked="block.visibility[option.key]"
+                @change="
+                  updateVisibility(
+                    option.key,
+                    ($event.target as HTMLInputElement).checked,
+                  )
+                "
+              />
+              <div
+                class="flex items-center gap-2 rounded"
+                :class="option.iconBackgroundClass"
+              >
+                <component
+                  :is="option.icon"
+                  class="size-[14px] text-studio-forest"
+                  aria-hidden="true"
+                />
+              </div>
+              <span class="text-sm font-medium text-gray-900">{{ option.label }}</span>
+            </label>
+          </div>
+        </section>
+
+        <div
+          v-if="block.showLeadersNotes"
+          class="rounded-xl border border-studio-yellow/60 bg-studio-yellow/30 p-4"
+        >
+          <div class="mb-3 flex items-center justify-between gap-3">
+            <div class="flex items-center gap-2">
+              <Crown class="size-[18px] text-studio-forest" aria-hidden="true" />
+              <span class="text-sm font-semibold text-studio-forest">Leaders Notes</span>
+              <span
+                class="rounded-full bg-studio-yellow px-2 py-0.5 text-xs font-medium text-studio-forest"
+              >
+                Leaders Only
+              </span>
+            </div>
+            <button
+              type="button"
+              class="rounded-xl p-1.5 text-gray-400 transition-colors hover:bg-red-50 hover:text-red-600"
+              aria-label="Remove leaders notes"
+              @click="updateField('showLeadersNotes', false)"
+            >
+              <Trash2 class="size-4" aria-hidden="true" />
+            </button>
+          </div>
+          <textarea
+            :value="block.leadersNotes"
+            rows="3"
+            placeholder="Add guidance and notes for leaders..."
+            class="input-field min-h-[80px] resize-y"
+            @input="
+              updateField('leadersNotes', ($event.target as HTMLTextAreaElement).value)
+            "
+          />
+        </div>
+
+        <button
+          v-else
+          type="button"
+          class="text-sm font-medium text-studio-forest underline-offset-2 hover:underline"
+          @click="updateField('showLeadersNotes', true)"
+        >
+          Add Leaders Notes
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { Component } from 'vue';
+import {
+  ChevronDown,
+  Crown,
+  EyeOff,
+  GripVertical,
+  Monitor,
+  Trash2,
+  User,
+} from '@lucide/vue';
+
+import type { BlockVisibility, StoryScriptureBlock } from '../../../types';
+import BlockScriptureField from './block-scripture-field.vue';
+
+const props = defineProps<{
+  block: StoryScriptureBlock;
+  expanded: boolean;
+}>();
+
+const emit = defineEmits<{
+  'update:block': [block: StoryScriptureBlock];
+  delete: [];
+  toggle: [];
+  dragstart: [];
+  drop: [];
+  dragend: [];
+}>();
+
+const blockTitle = computed(() =>
+  props.block.blockName.trim() ? props.block.blockName.trim() : 'New Scripture Block',
+);
+
+const updateField = <K extends keyof StoryScriptureBlock>(
+  key: K,
+  value: StoryScriptureBlock[K],
+) => {
+  emit('update:block', { ...props.block, [key]: value });
+};
+
+const updateVisibility = (key: keyof BlockVisibility, checked: boolean) => {
+  emit('update:block', {
+    ...props.block,
+    visibility: { ...props.block.visibility, [key]: checked },
+  });
+};
+
+const visibilityOptions: {
+  key: keyof BlockVisibility;
+  label: string;
+  icon: Component;
+  iconBackgroundClass: string;
+}[] = [
+  {
+    key: 'presenter',
+    label: 'Presenter',
+    icon: Monitor,
+    iconBackgroundClass: 'bg-studio-yellow p-[5px]',
+  },
+  {
+    key: 'personal',
+    label: 'Personal',
+    icon: User,
+    iconBackgroundClass: 'bg-studio-lime p-[5px]',
+  },
+  {
+    key: 'hidden',
+    label: 'Hidden',
+    icon: EyeOff,
+    iconBackgroundClass: 'bg-red-200 p-[5px]',
+  },
+];
+</script>
diff --git a/src/frontend/stories/components/story-edit-blocks.story.vue b/src/frontend/stories/components/story-edit-blocks.story.vue
new file mode 100644
index 00000000..d5431716
--- /dev/null
+++ b/src/frontend/stories/components/story-edit-blocks.story.vue
@@ -0,0 +1,123 @@
+<template>
+  <Story title="Story Edit Blocks" group="stories" :setup-app="setupProviders">
+    <Variant title="Default">
+      <StoryEditBlocks
+        v-model:blocks="defaultBlocks"
+        :video-collection-id="sharedProps.config.videoCollectionId"
+      />
+    </Variant>
+
+    <Variant title="Empty">
+      <StoryEditBlocks
+        v-model:blocks="emptyBlocks"
+        :video-collection-id="sharedProps.config.videoCollectionId"
+      />
+    </Variant>
+
+    <Variant title="Multiple blocks">
+      <StoryEditBlocks
+        v-model:blocks="multipleBlocks"
+        :video-collection-id="sharedProps.config.videoCollectionId"
+      />
+    </Variant>
+
+    <Variant title="Mixed block kinds">
+      <StoryEditBlocks
+        v-model:blocks="mixedBlocks"
+        :video-collection-id="sharedProps.config.videoCollectionId"
+      />
+    </Variant>
+  </Story>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+import type { StoryBlock } from '../../../types';
+import { mockResourceProviders, sharedProps } from '../../test/mocks';
+import { useWidgetsStore } from '../../store';
+import type { StoryHandler } from '../../shared/helpers';
+import StoryEditBlocks from './story-edit-blocks.vue';
+import {
+  createEmptyBlock,
+  createEmptyScriptureBlock,
+  createEmptyTitleBlock,
+} from './block-utils';
+
+const setupProviders: StoryHandler = (): void => {
+  useWidgetsStore().setProviders(mockResourceProviders);
+};
+
+const defaultBlocks = ref<StoryBlock[]>([createEmptyBlock()]);
+
+const emptyBlocks = ref<StoryBlock[]>([]);
+
+const multipleBlocks = ref<StoryBlock[]>([
+  {
+    ...createEmptyBlock(),
+    blockName: 'Introduction',
+    displayName: 'Session Introduction',
+    blockRole: 'introduction',
+    style: 'default',
+    blockType: 'text',
+    content: 'Welcome to this session.',
+  },
+  {
+    ...createEmptyBlock(),
+    blockName: 'External Link',
+    displayName: 'Further Reading',
+    blockRole: 'summary',
+    style: 'default',
+    blockType: 'url',
+    url: 'https://example.com/article',
+  },
+  {
+    ...createEmptyBlock(),
+    blockName: 'Summary',
+    displayName: 'Session Summary',
+    blockRole: 'summary',
+    style: 'emphasis',
+    blockType: 'text',
+    content: 'Key takeaways from today.',
+    visibility: { presenter: true, personal: false, hidden: false },
+  },
+  {
+    ...createEmptyBlock(),
+    blockName: 'Session Video',
+    displayName: 'Watch Session',
+    blockRole: 'introduction',
+    style: 'default',
+    blockType: 'video',
+  },
+  createEmptyBlock(),
+]);
+
+const mixedBlocks = ref<StoryBlock[]>([
+  {
+    ...createEmptyTitleBlock(),
+    blockName: 'Session Title',
+    title: 'The Gospel of John',
+    style: 'emphasis',
+  },
+  {
+    ...createEmptyBlock(),
+    blockName: 'Introduction',
+    displayName: 'Welcome',
+    content: 'Welcome to this session.',
+  },
+  {
+    ...createEmptyScriptureBlock(),
+    blockName: 'Opening Passage',
+    scripture: {
+      reference: 'John 1:1',
+      verse: 'In the beginning was the Word, and the Word was with God.',
+    },
+  },
+]);
+</script>
+
+<docs lang="md">
+# Story Edit Blocks
+
+Content block editor for the Blocks tab on story create/edit pages. Supports content, title, and scripture blocks with add, remove, reorder, collapse, visibility toggles, and leaders notes.
+</docs>
diff --git a/src/frontend/stories/components/story-edit-blocks.vue b/src/frontend/stories/components/story-edit-blocks.vue
new file mode 100644
index 00000000..caa67143
--- /dev/null
+++ b/src/frontend/stories/components/story-edit-blocks.vue
@@ -0,0 +1,185 @@
+<template>
+  <div class="min-w-0 space-y-6 overflow-x-clip">
+    <BlockEmptyState v-if="blocks.length === 0" />
+
+    <template v-for="(block, index) in blocks" :key="block.id">
+      <ContentBlockCard
+        v-if="isContentBlock(block)"
+        :block="block"
+        :expanded="isExpanded(index)"
+        :video-collection-id="videoCollectionId"
+        @update:block="updateBlock(index, $event)"
+        @delete="deleteBlock(index)"
+        @toggle="toggle(index)"
+        @dragstart="onDragStart(index)"
+        @drop="onDrop(index)"
+        @dragend="onDragEnd"
+      />
+      <TitleBlockCard
+        v-else-if="block.kind === 'title'"
+        :block="block"
+        :expanded="isExpanded(index)"
+        @update:block="updateBlock(index, $event)"
+        @delete="deleteBlock(index)"
+        @toggle="toggle(index)"
+        @dragstart="onDragStart(index)"
+        @drop="onDrop(index)"
+        @dragend="onDragEnd"
+      />
+      <ScriptureBlockCard
+        v-else-if="block.kind === 'scripture'"
+        :block="block"
+        :expanded="isExpanded(index)"
+        @update:block="updateBlock(index, $event)"
+        @delete="deleteBlock(index)"
+        @toggle="toggle(index)"
+        @dragstart="onDragStart(index)"
+        @drop="onDrop(index)"
+        @dragend="onDragEnd"
+      />
+    </template>
+
+    <div class="grid grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-3">
+      <button
+        type="button"
+        class="inline-flex w-full items-center justify-center rounded-xl border border-dashed border-studio-forest px-3 py-[18px] text-sm font-medium leading-4 text-studio-forest shadow-sm hover:bg-studio-lime"
+        @click.prevent="addTitleBlock"
+      >
+        <div class="inline-flex items-center justify-center gap-2">
+          <Plus class="size-5" aria-hidden="true" />
+          <span>Add Title Block</span>
+        </div>
+      </button>
+      <button
+        type="button"
+        class="inline-flex w-full items-center justify-center rounded-xl border border-dashed border-studio-forest px-3 py-[18px] text-sm font-medium leading-4 text-studio-forest shadow-sm hover:bg-studio-lime"
+        @click.prevent="addScriptureBlock"
+      >
+        <div class="inline-flex items-center justify-center gap-2">
+          <Plus class="size-5" aria-hidden="true" />
+          <span>Add Scripture Block</span>
+        </div>
+      </button>
+      <button
+        type="button"
+        class="inline-flex w-full items-center justify-center rounded-xl border border-dashed border-studio-forest px-3 py-[18px] text-sm font-medium leading-4 text-studio-forest shadow-sm hover:bg-studio-lime"
+        @click.prevent="addContentBlock"
+      >
+        <div class="inline-flex items-center justify-center gap-2">
+          <Plus class="size-5" aria-hidden="true" />
+          <span>Add Content Block</span>
+        </div>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+import { Plus } from '@lucide/vue';
+
+import type { StoryBlock, StoryContentBlock } from '../../../types';
+import BlockEmptyState from './block-empty-state.vue';
+import ContentBlockCard from './content-block-card.vue';
+import ScriptureBlockCard from './scripture-block-card.vue';
+import TitleBlockCard from './title-block-card.vue';
+import {
+  blockKind,
+  createEmptyBlock,
+  createEmptyScriptureBlock,
+  createEmptyTitleBlock,
+} from './block-utils';
+
+const props = defineProps<{
+  blocks: StoryBlock[];
+  videoCollectionId?: string;
+}>();
+
+const emit = defineEmits<{
+  'update:blocks': [blocks: StoryBlock[]];
+}>();
+
+const blocks = computed({
+  get: () => props.blocks,
+  set: (value: StoryBlock[]) => emit('update:blocks', value),
+});
+
+const expanded = ref<boolean[]>([]);
+
+const syncExpanded = () => {
+  const count = blocks.value.length;
+  if (expanded.value.length === count) return;
+  const fresh = [...expanded.value];
+  while (fresh.length < count) fresh.push(true);
+  fresh.length = count;
+  expanded.value = fresh;
+};
+
+watch(blocks, syncExpanded, { deep: true, immediate: true });
+
+const isContentBlock = (block: StoryBlock): block is StoryContentBlock =>
+  blockKind(block) === 'content';
+
+const isExpanded = (index: number): boolean => expanded.value[index] ?? true;
+
+const toggle = (index: number) => {
+  const fresh = [...expanded.value];
+  fresh[index] = !isExpanded(index);
+  expanded.value = fresh;
+};
+
+const updateBlock = (index: number, block: StoryBlock) => {
+  const next = [...blocks.value];
+  next[index] = block;
+  blocks.value = next;
+};
+
+const addContentBlock = () => {
+  blocks.value = [...blocks.value, createEmptyBlock()];
+};
+
+const addTitleBlock = () => {
+  blocks.value = [...blocks.value, createEmptyTitleBlock()];
+};
+
+const addScriptureBlock = () => {
+  blocks.value = [...blocks.value, createEmptyScriptureBlock()];
+};
+
+const deleteBlock = (index: number) => {
+  const next = [...blocks.value];
+  next.splice(index, 1);
+  blocks.value = next;
+
+  const toggles = [...expanded.value];
+  toggles.splice(index, 1);
+  expanded.value = toggles;
+};
+
+const dragFromIndex = ref<number | null>(null);
+
+const onDragStart = (index: number) => {
+  dragFromIndex.value = index;
+};
+
+const onDragEnd = () => {
+  dragFromIndex.value = null;
+};
+
+const onDrop = (toIndex: number) => {
+  if (dragFromIndex.value === null) return;
+  if (dragFromIndex.value === toIndex) return;
+
+  const items = [...blocks.value];
+  const [moved] = items.splice(dragFromIndex.value, 1);
+  if (!moved) return;
+  items.splice(toIndex, 0, moved);
+  blocks.value = items;
+
+  const toggles = [...expanded.value];
+  const [movedToggle] = toggles.splice(dragFromIndex.value, 1);
+  toggles.splice(toIndex, 0, movedToggle ?? true);
+  expanded.value = toggles;
+  dragFromIndex.value = null;
+};
+</script>
diff --git a/src/frontend/stories/components/title-block-card.vue b/src/frontend/stories/components/title-block-card.vue
new file mode 100644
index 00000000..0232e3c2
--- /dev/null
+++ b/src/frontend/stories/components/title-block-card.vue
@@ -0,0 +1,241 @@
+<template>
+  <div
+    class="relative my-2 list-none rounded-xl border border-gray-200 p-0"
+    draggable="true"
+    @dragstart="emit('dragstart')"
+    @dragover.prevent
+    @drop="emit('drop')"
+    @dragend="emit('dragend')"
+  >
+    <div class="rounded-xl bg-white">
+      <div
+        :class="[
+          'flex items-center justify-between gap-3 overflow-hidden px-4 py-3',
+          { 'border-b border-gray-100': expanded },
+        ]"
+      >
+        <div class="flex min-w-0 items-center gap-3">
+          <button
+            type="button"
+            class="cursor-move text-gray-400"
+            aria-label="Reorder title block"
+          >
+            <GripVertical class="size-4" aria-hidden="true" />
+          </button>
+          <button
+            type="button"
+            class="inline-flex min-w-0 items-center gap-2 text-left text-sm font-semibold text-gray-800"
+            @click="emit('toggle')"
+          >
+            <span class="truncate">{{ blockTitle }}</span>
+            <div
+              v-if="block.visibility.presenter"
+              class="flex shrink-0 items-center rounded bg-studio-yellow p-[5px]"
+            >
+              <Monitor class="size-[14px] text-studio-forest" aria-hidden="true" />
+            </div>
+            <div
+              v-if="block.visibility.personal"
+              class="flex shrink-0 items-center rounded bg-studio-lime p-[5px]"
+            >
+              <User class="size-[14px] text-studio-forest" aria-hidden="true" />
+            </div>
+          </button>
+        </div>
+        <div class="flex items-center justify-center gap-1">
+          <button
+            type="button"
+            class="rounded-xl p-1.5 text-gray-400 transition-colors hover:bg-red-50 hover:text-red-600"
+            aria-label="Delete title block"
+            @click="emit('delete')"
+          >
+            <Trash2 class="size-4" aria-hidden="true" />
+          </button>
+          <button
+            type="button"
+            class="rounded-xl p-1.5 text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600"
+            :aria-label="expanded ? 'Collapse title block' : 'Expand title block'"
+            @click="emit('toggle')"
+          >
+            <ChevronDown
+              class="size-4 origin-center transition-transform duration-200 ease-out"
+              :class="{ 'rotate-180': expanded }"
+              aria-hidden="true"
+            />
+          </button>
+        </div>
+      </div>
+
+      <div v-if="expanded" class="space-y-6 p-6">
+        <div>
+          <label :for="`${block.id}-block-name`" class="input-label">Block Name</label>
+          <input
+            :id="`${block.id}-block-name`"
+            type="text"
+            :value="block.blockName"
+            placeholder="e.g., Session Title, Chapter Heading"
+            class="input-field mt-[2px]"
+            @input="updateField('blockName', ($event.target as HTMLInputElement).value)"
+          />
+          <p class="mt-1 text-sm italic text-gray-500">
+            This becomes the collapsible section name
+          </p>
+        </div>
+
+        <div>
+          <label :for="`${block.id}-title`" class="input-label">Title</label>
+          <input
+            :id="`${block.id}-title`"
+            type="text"
+            :value="block.title"
+            placeholder="e.g., The Gospel of John"
+            class="input-field mt-[2px]"
+            @input="updateField('title', ($event.target as HTMLInputElement).value)"
+          />
+        </div>
+
+        <RichListbox
+          :model-value="block.style"
+          label="Style"
+          :options="styleOptions"
+          @update:model-value="updateField('style', $event)"
+        />
+
+        <section class="border-gray-[#E5E7EB] rounded-xl border bg-gray-50 p-4">
+          <legend class="input-label mb-3">Visibility</legend>
+          <div class="flex items-center gap-6">
+            <label
+              v-for="option in visibilityOptions"
+              :key="option.key"
+              class="flex cursor-pointer items-center gap-3"
+            >
+              <input
+                type="checkbox"
+                class="size-[22px] rounded border-gray-300 text-studio-forest focus:ring-blue-500"
+                :checked="block.visibility[option.key]"
+                @change="
+                  updateVisibility(
+                    option.key,
+                    ($event.target as HTMLInputElement).checked,
+                  )
+                "
+              />
+              <div
+                class="flex items-center gap-2 rounded"
+                :class="option.iconBackgroundClass"
+              >
+                <component
+                  :is="option.icon"
+                  class="size-[14px] text-studio-forest"
+                  aria-hidden="true"
+                />
+              </div>
+              <span class="text-sm font-medium text-gray-900">{{ option.label }}</span>
+            </label>
+          </div>
+        </section>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { Component } from 'vue';
+import {
+  ChevronDown,
+  EyeOff,
+  GripVertical,
+  Monitor,
+  Star,
+  Trash2,
+  User,
+} from '@lucide/vue';
+
+import type { BlockVisibility, StoryTitleBlock } from '../../../types';
+import RichListbox from '../../shared/rich-listbox.vue';
+
+const props = defineProps<{
+  block: StoryTitleBlock;
+  expanded: boolean;
+}>();
+
+const emit = defineEmits<{
+  'update:block': [block: StoryTitleBlock];
+  delete: [];
+  toggle: [];
+  dragstart: [];
+  drop: [];
+  dragend: [];
+}>();
+
+const blockTitle = computed(() =>
+  props.block.blockName.trim() ? props.block.blockName.trim() : 'New Title Block',
+);
+
+const updateField = <K extends keyof StoryTitleBlock>(
+  key: K,
+  value: StoryTitleBlock[K],
+) => {
+  emit('update:block', { ...props.block, [key]: value });
+};
+
+const updateVisibility = (key: keyof BlockVisibility, checked: boolean) => {
+  emit('update:block', {
+    ...props.block,
+    visibility: { ...props.block.visibility, [key]: checked },
+  });
+};
+
+const styleOptions: {
+  value: string;
+  label: string;
+  description: string;
+  icon: Component;
+}[] = [
+  {
+    value: 'default',
+    label: 'Default',
+    description: 'Standard visual weight',
+    icon: Star,
+  },
+  {
+    value: 'emphasis',
+    label: 'Emphasis',
+    description: 'Draws more attention',
+    icon: Star,
+  },
+  {
+    value: 'subtle',
+    label: 'Subtle',
+    description: 'Lighter visual treatment',
+    icon: Star,
+  },
+];
+
+const visibilityOptions: {
+  key: keyof BlockVisibility;
+  label: string;
+  icon: Component;
+  iconBackgroundClass: string;
+}[] = [
+  {
+    key: 'presenter',
+    label: 'Presenter',
+    icon: Monitor,
+    iconBackgroundClass: 'bg-studio-yellow p-[5px]',
+  },
+  {
+    key: 'personal',
+    label: 'Personal',
+    icon: User,
+    iconBackgroundClass: 'bg-studio-lime p-[5px]',
+  },
+  {
+    key: 'hidden',
+    label: 'Hidden',
+    icon: EyeOff,
+    iconBackgroundClass: 'bg-red-200 p-[5px]',
+  },
+];
+</script>
diff --git a/src/frontend/stories/story-create.vue b/src/frontend/stories/story-create.vue
index e9e1e279..59bb50df 100644
--- a/src/frontend/stories/story-create.vue
+++ b/src/frontend/stories/story-create.vue
@@ -34,6 +34,12 @@
             :tab-icon="currentStoryTabIcon"
           />
           -->
+          <div v-if="currentStoryTab === 'Blocks'" dir="ltr">
+            <StoryEditBlocks
+              v-model:blocks="blocks"
+              :video-collection-id="props.config.videoCollectionId"
+            />
+          </div>
           <div v-if="currentStoryTab === 'Resources'" dir="ltr">
             <StoryEditResources
               v-model:resources="attachedResources"
@@ -51,12 +57,13 @@
 import { computed, onMounted, ref } from 'vue';
 import { storeToRefs } from 'pinia';
 import { router } from '@inertiajs/vue3';
-import { BookOpen, FolderClosed } from '@lucide/vue';
+import { BookOpen, FolderClosed, LayoutGrid } from '@lucide/vue';
 
 import type {
   NavigationPaneTab,
   ResourceItem,
   SharedPageProps,
+  StoryBlock,
   StoryCreateProps,
 } from '../../types';
 import { ResponseStatus } from '../../types';
@@ -68,6 +75,8 @@ import StoryEditDetails from './components/story-edit-details.vue';
 // TODO(sections): re-enable when spec is ready
 // import StoryEditSections from './components/story-edit-sections.vue';
 import StoryEditResources from './components/story-edit-resources.vue';
+import StoryEditBlocks from './components/story-edit-blocks.vue';
+import { createEmptyBlock } from './components/block-utils';
 import { resourceIds } from './components/resource-utils';
 import {
   firstStoryEditTabWithError,
@@ -94,6 +103,7 @@ const model = useModelStore();
 model.setModel(props.model);
 
 const attachedResources = ref<ResourceItem[]>([]);
+const blocks = ref<StoryBlock[]>([createEmptyBlock()]);
 const availableResources = props.availableResources ?? [];
 const isSaving = ref(false);
 
@@ -119,6 +129,10 @@ const storyEditTabs = computed((): NavigationPaneTab[] => [
   //   label: sectionTabLabel.value,
   //   hasError: storyEditTabHasError('sections', errors.value),
   // },
+  {
+    label: 'Blocks',
+    hasError: storyEditTabHasError('blocks', errors.value),
+  },
   {
     label: 'Resources',
     hasError: storyEditTabHasError('resources', errors.value),
@@ -129,6 +143,7 @@ const storyEditTabIcons = computed(() => ({
   Details: BookOpen,
   // TODO(sections): re-enable when spec is ready
   // [sectionTabLabel.value]: LayoutList,
+  Blocks: LayoutGrid,
   Resources: FolderClosed,
 }));
 
@@ -136,6 +151,7 @@ const initialTabs: NavigationPaneTab[] = [
   { label: 'Details' },
   // TODO(sections): re-enable when spec is ready
   // { label: `${props.model.sectionType || 'Section'}s` },
+  { label: 'Blocks' },
   { label: 'Resources' },
 ];
 
diff --git a/src/frontend/stories/story-edit-tab-errors.ts b/src/frontend/stories/story-edit-tab-errors.ts
index 282ce3b0..58e9a6c1 100644
--- a/src/frontend/stories/story-edit-tab-errors.ts
+++ b/src/frontend/stories/story-edit-tab-errors.ts
@@ -1,10 +1,14 @@
-export type StoryEditTab = 'details' | 'sections' | 'resources';
+export type StoryEditTab = 'details' | 'sections' | 'blocks' | 'resources';
 
-const STORY_EDIT_TAB_ORDER: StoryEditTab[] = ['details', 'sections', 'resources'];
+const STORY_EDIT_TAB_ORDER: StoryEditTab[] = ['details', 'sections', 'blocks', 'resources'];
 
-const STORY_EDIT_TAB_LABELS: Record<StoryEditTab, string | ((sectionTabLabel: string) => string)> = {
+const STORY_EDIT_TAB_LABELS: Record<
+  StoryEditTab,
+  string | ((sectionTabLabel: string) => string)
+> = {
   details: 'Details',
   sections: (sectionTabLabel) => sectionTabLabel,
+  blocks: 'Blocks',
   resources: 'Resources',
 };
 
@@ -12,12 +16,16 @@ function errorKeyBelongsToTab(key: string, tab: StoryEditTab): boolean {
   if (tab === 'sections') {
     return key.startsWith('bundle.sections');
   }
+  if (tab === 'blocks') {
+    return key.startsWith('bundle.blocks');
+  }
   if (tab === 'resources') {
     return key.startsWith('bundle.resources');
   }
   return (
     key.startsWith('bundle.') &&
     !key.startsWith('bundle.sections') &&
+    !key.startsWith('bundle.blocks') &&
     !key.startsWith('bundle.resources')
   );
 }
diff --git a/src/frontend/stories/story-edit.story.vue b/src/frontend/stories/story-edit.story.vue
index 8d7dcb6f..2d1513c5 100644
--- a/src/frontend/stories/story-edit.story.vue
+++ b/src/frontend/stories/story-edit.story.vue
@@ -120,6 +120,21 @@
       />
     </Variant>
 
+    <Variant title="Blocks tab" :setup-app="loadBlocksTab">
+      <StoryEdit
+        :config="sharedProps.config"
+        :user="sharedProps.user"
+        :language="sharedProps.language"
+        :errors="{}"
+        :bookmarks="sharedProps.bookmarks"
+        :model="storyModel"
+        :available-resources="availableResources"
+        :has-no-content="false"
+        :providers="mockResourceProviders"
+        :templates="storyTemplates"
+      />
+    </Variant>
+
     <Variant title="Validation errors on tabs" :setup-app="loadNormalData">
       <StoryEdit
         :config="sharedProps.config"
@@ -189,6 +204,7 @@
 import StoryEdit from './story-edit.vue';
 import {
   availableResources,
+  mockResourceProviders,
   sampleAttachedResources,
   sharedProps,
   miniSidebar,
@@ -402,6 +418,13 @@ const loadResourcesTab: StoryHandler = (context): void => {
   loadNormalData(context);
 };
 
+const loadBlocksTab: StoryHandler = (context): void => {
+  const url = new URL(window.location.href);
+  url.searchParams.set('tab', 'Blocks');
+  window.history.replaceState({}, '', url.toString());
+  loadNormalData(context);
+};
+
 const loadSectionsTab: StoryHandler = (context): void => {
   const url = new URL(window.location.href);
   url.searchParams.set('tab', 'Sections');
@@ -420,7 +443,7 @@ const loadTranslationLocale: StoryHandler = (context): void => {
 <docs lang="md">
 # Story Edit
 
-Full-page story editor with tabbed navigation for Details and Resources. The Sections tab is temporarily commented out until the spec is ready.
+Full-page story editor with tabbed navigation for Details, Blocks, and Resources. The Sections tab is temporarily commented out until the spec is ready.
 Saving posts attached resource IDs to the story localisation.
 
 ## Variants
diff --git a/src/frontend/stories/story-edit.vue b/src/frontend/stories/story-edit.vue
index 2cf09a6e..cdf13d96 100644
--- a/src/frontend/stories/story-edit.vue
+++ b/src/frontend/stories/story-edit.vue
@@ -42,6 +42,12 @@
             :tab-icon="currentStoryTabIcon"
           />
           -->
+          <div v-if="currentStoryTab === 'Blocks'" dir="ltr">
+            <StoryEditBlocks
+              v-model:blocks="blocks"
+              :video-collection-id="props.config.videoCollectionId"
+            />
+          </div>
           <div v-if="currentStoryTab === 'Resources'" dir="ltr">
             <StoryEditResources
               v-model:resources="attachedResources"
@@ -59,12 +65,13 @@
 import { computed, onMounted, ref } from 'vue';
 import { storeToRefs } from 'pinia';
 import { router } from '@inertiajs/vue3';
-import { Trash2, BookOpen, FolderClosed } from '@lucide/vue';
+import { Trash2, BookOpen, FolderClosed, LayoutGrid } from '@lucide/vue';
 
 import type {
   NavigationPaneTab,
   ResourceItem,
   SharedPageProps,
+  StoryBlock,
   StoryEditProps,
 } from '../../types';
 import { ResponseStatus } from '../../types';
@@ -76,6 +83,8 @@ import StoryEditDetails from './components/story-edit-details.vue';
 // TODO(sections): re-enable when spec is ready
 // import StoryEditSections from './components/story-edit-sections.vue';
 import StoryEditResources from './components/story-edit-resources.vue';
+import StoryEditBlocks from './components/story-edit-blocks.vue';
+import { createEmptyBlock } from './components/block-utils';
 import { resourceIds } from './components/resource-utils';
 import {
   firstStoryEditTabWithError,
@@ -101,6 +110,7 @@ const model = useModelStore();
 model.setModel(props.model);
 
 const attachedResources = ref<ResourceItem[]>([...(props.model.resources ?? [])]);
+const blocks = ref<StoryBlock[]>([createEmptyBlock()]);
 const availableResources = props.availableResources ?? [];
 const isSaving = ref(false);
 
@@ -140,6 +150,10 @@ const storyEditTabs = computed((): NavigationPaneTab[] => [
   //   label: sectionTabLabel.value,
   //   hasError: storyEditTabHasError('sections', errors.value),
   // },
+  {
+    label: 'Blocks',
+    hasError: storyEditTabHasError('blocks', errors.value),
+  },
   {
     label: 'Resources',
     hasError: storyEditTabHasError('resources', errors.value),
@@ -150,6 +164,7 @@ const storyEditTabIcons = computed(() => ({
   Details: BookOpen,
   // TODO(sections): re-enable when spec is ready
   // [sectionTabLabel.value]: LayoutList,
+  Blocks: LayoutGrid,
   Resources: FolderClosed,
 }));
 
@@ -157,6 +172,7 @@ const initialTabs: NavigationPaneTab[] = [
   { label: 'Details' },
   // TODO(sections): re-enable when spec is ready
   // { label: `${props.model.sectionType || 'Section'}s` },
+  { label: 'Blocks' },
   { label: 'Resources' },
 ];
 
diff --git a/src/types.ts b/src/types.ts
index 23006fd8..63f80708 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -236,6 +236,49 @@ export interface StorySection {
   description?: string;
 }
 
+export interface BlockVisibility {
+  presenter: boolean;
+  personal: boolean;
+  hidden: boolean;
+}
+
+export type StoryBlockKind = 'content' | 'title' | 'scripture';
+
+interface StoryBlockBase {
+  id: string;
+  kind: StoryBlockKind;
+  blockName: string;
+  visibility: BlockVisibility;
+}
+
+export interface StoryContentBlock extends StoryBlockBase {
+  kind: 'content';
+  displayName: string;
+  blockRole: string;
+  style: string;
+  blockType: ResourceType;
+  content: string;
+  url?: string;
+  video?: { url: string | null };
+  leadersNotes: string;
+  showLeadersNotes: boolean;
+}
+
+export interface StoryTitleBlock extends StoryBlockBase {
+  kind: 'title';
+  title: string;
+  style: string;
+}
+
+export interface StoryScriptureBlock extends StoryBlockBase {
+  kind: 'scripture';
+  scripture: Scripture;
+  leadersNotes: string;
+  showLeadersNotes: boolean;
+}
+
+export type StoryBlock = StoryContentBlock | StoryTitleBlock | StoryScriptureBlock;
+
 export interface StorySpec {
   id: number;
   name: string;
diff --git a/tests/unit/story-edit-tab-errors.spec.ts b/tests/unit/story-edit-tab-errors.spec.ts
index 348ee566..ec75b1b1 100644
--- a/tests/unit/story-edit-tab-errors.spec.ts
+++ b/tests/unit/story-edit-tab-errors.spec.ts
@@ -10,6 +10,7 @@ test.describe('storyEditTabHasError', () => {
 
     expect(storyEditTabHasError('details', errors)).toBe(true);
     expect(storyEditTabHasError('sections', errors)).toBe(false);
+    expect(storyEditTabHasError('blocks', errors)).toBe(false);
     expect(storyEditTabHasError('resources', errors)).toBe(false);
   });
 
@@ -18,6 +19,7 @@ test.describe('storyEditTabHasError', () => {
 
     expect(storyEditTabHasError('details', errors)).toBe(false);
     expect(storyEditTabHasError('sections', errors)).toBe(true);
+    expect(storyEditTabHasError('blocks', errors)).toBe(false);
     expect(storyEditTabHasError('resources', errors)).toBe(false);
   });
 
@@ -26,8 +28,18 @@ test.describe('storyEditTabHasError', () => {
 
     expect(storyEditTabHasError('details', errors)).toBe(false);
     expect(storyEditTabHasError('sections', errors)).toBe(false);
+    expect(storyEditTabHasError('blocks', errors)).toBe(false);
     expect(storyEditTabHasError('resources', errors)).toBe(true);
   });
+
+  test('flags Blocks for bundle.blocks', () => {
+    const errors = { 'bundle.blocks.0.blockName': ['Block name is required'] };
+
+    expect(storyEditTabHasError('details', errors)).toBe(false);
+    expect(storyEditTabHasError('sections', errors)).toBe(false);
+    expect(storyEditTabHasError('blocks', errors)).toBe(true);
+    expect(storyEditTabHasError('resources', errors)).toBe(false);
+  });
 });
 
 test.describe('firstStoryEditTabWithError', () => {

From 70aa97e7fdc0375a46790dc1aaa02cbed1b9ef2b Mon Sep 17 00:00:00 2001
From: Timothy Koech <timosville@gmail.com>
Date: Tue, 11 Aug 2026 15:42:47 +0300
Subject: [PATCH 02/13] increment: add fields to blocks to match spec

---
 .../stubs/controllers/drafts_controller.stub  |   1 +
 src/frontend/dashboard/action-card.story.vue  |   2 +-
 src/frontend/index.ts                         |   6 +
 .../stories/chapter-edit-tab-errors.ts        |  45 ++
 src/frontend/stories/chapter-edit.story.vue   | 158 +++++++
 src/frontend/stories/chapter-edit.vue         | 244 ++++++++++
 .../stories/components/block-empty-state.vue  |   8 -
 .../chapter-add-block-toolbar.vue             |  44 ++
 .../chapter-block-card-shell.vue              |  94 ++++
 .../chapter-block-empty-state.vue             |  10 +
 .../chapter-block-image-field.vue             |  63 +++
 .../chapter-block-rich-text-editor.vue}       |   2 +-
 .../chapter-block-scripture-field.vue}        |  42 +-
 .../chapter-block-utils.ts}                   |  21 +-
 .../chapter-block-video-field.vue}            |   8 +-
 .../chapter-block-visibility.vue              |  74 +++
 .../chapter-content-block-card.vue            | 293 ++++++++++++
 .../chapter-scripture-block-card.vue          | 131 ++++++
 .../chapter-title-block-card.vue              | 137 ++++++
 ...tory.vue => chapter-edit-blocks.story.vue} |  65 +--
 ...dit-blocks.vue => chapter-edit-blocks.vue} | 114 ++---
 .../components/chapter-edit-details.story.vue |  56 +++
 .../components/chapter-edit-details.vue       |  71 +++
 .../stories/components/content-block-card.vue | 422 ------------------
 .../components/scripture-block-card.vue       | 246 ----------
 .../stories/components/title-block-card.vue   | 241 ----------
 src/frontend/stories/story-create.vue         |  18 +-
 src/frontend/stories/story-edit-tab-errors.ts |  35 +-
 src/frontend/stories/story-edit.story.vue     |  26 +-
 src/frontend/stories/story-edit.vue           |  18 +-
 src/frontend/test/mocks.ts                    | 147 +++++-
 src/types.ts                                  |  44 +-
 tests/unit/chapter-edit-tab-errors.spec.ts    |  68 +++
 tests/unit/story-edit-tab-errors.spec.ts      |   7 +-
 34 files changed, 1830 insertions(+), 1131 deletions(-)
 create mode 100644 src/frontend/stories/chapter-edit-tab-errors.ts
 create mode 100644 src/frontend/stories/chapter-edit.story.vue
 create mode 100644 src/frontend/stories/chapter-edit.vue
 delete mode 100644 src/frontend/stories/components/block-empty-state.vue
 create mode 100644 src/frontend/stories/components/chapter-blocks/chapter-add-block-toolbar.vue
 create mode 100644 src/frontend/stories/components/chapter-blocks/chapter-block-card-shell.vue
 create mode 100644 src/frontend/stories/components/chapter-blocks/chapter-block-empty-state.vue
 create mode 100644 src/frontend/stories/components/chapter-blocks/chapter-block-image-field.vue
 rename src/frontend/stories/components/{block-rich-text-editor.vue => chapter-blocks/chapter-block-rich-text-editor.vue} (97%)
 rename src/frontend/stories/components/{block-scripture-field.vue => chapter-blocks/chapter-block-scripture-field.vue} (59%)
 rename src/frontend/stories/components/{block-utils.ts => chapter-blocks/chapter-block-utils.ts} (70%)
 rename src/frontend/stories/components/{block-video-field.vue => chapter-blocks/chapter-block-video-field.vue} (86%)
 create mode 100644 src/frontend/stories/components/chapter-blocks/chapter-block-visibility.vue
 create mode 100644 src/frontend/stories/components/chapter-blocks/chapter-content-block-card.vue
 create mode 100644 src/frontend/stories/components/chapter-blocks/chapter-scripture-block-card.vue
 create mode 100644 src/frontend/stories/components/chapter-blocks/chapter-title-block-card.vue
 rename src/frontend/stories/components/{story-edit-blocks.story.vue => chapter-edit-blocks.story.vue} (55%)
 rename src/frontend/stories/components/{story-edit-blocks.vue => chapter-edit-blocks.vue} (54%)
 create mode 100644 src/frontend/stories/components/chapter-edit-details.story.vue
 create mode 100644 src/frontend/stories/components/chapter-edit-details.vue
 delete mode 100644 src/frontend/stories/components/content-block-card.vue
 delete mode 100644 src/frontend/stories/components/scripture-block-card.vue
 delete mode 100644 src/frontend/stories/components/title-block-card.vue
 create mode 100644 tests/unit/chapter-edit-tab-errors.spec.ts

diff --git a/src/backend/stubs/controllers/drafts_controller.stub b/src/backend/stubs/controllers/drafts_controller.stub
index ad42d259..12a65b84 100644
--- a/src/backend/stubs/controllers/drafts_controller.stub
+++ b/src/backend/stubs/controllers/drafts_controller.stub
@@ -100,6 +100,7 @@ export default class DraftsController {
     const isTranslation = version.locale !== cms.sourceLocale;
 
     if (!isTranslation) {
+      // TODO: migrate to ChapterEdit once chapter-edit.vue is adopted
       // @ts-expect-error Inertia page name
       return ctx.inertia.render('DraftIndex', data);
     }
diff --git a/src/frontend/dashboard/action-card.story.vue b/src/frontend/dashboard/action-card.story.vue
index fc01894b..c7294477 100644
--- a/src/frontend/dashboard/action-card.story.vue
+++ b/src/frontend/dashboard/action-card.story.vue
@@ -31,8 +31,8 @@
         :icon="FileText"
         title="New Page"
         description="Engage your audience morning, noon, and night. Create healthy daily rhythms with content that reaches them throughout the day."
-        @action="handleAction"
         disabled
+        @action="handleAction"
       />
     </Variant>
   </Story>
diff --git a/src/frontend/index.ts b/src/frontend/index.ts
index c2d902b4..e0081ece 100644
--- a/src/frontend/index.ts
+++ b/src/frontend/index.ts
@@ -8,6 +8,9 @@ import BooleanField from './fields/boolean-field.vue';
 import InvitationsEdit from './invitation/invitations-edit.vue';
 import InvitationsIndex from './invitation/invitations-index.vue';
 import ChapterPreview from './stories/chapter-preview.vue';
+import ChapterEdit from './stories/chapter-edit.vue';
+import ChapterEditDetails from './stories/components/chapter-edit-details.vue';
+import ChapterEditBlocks from './stories/components/chapter-edit-blocks.vue';
 import ContextMenu from './shared/context-menu.vue';
 import CreateAccount from './auth/create-account.vue';
 import DashboardIndex from './dashboard/dashboard-index.vue';
@@ -79,6 +82,9 @@ export {
   AudioField,
   BooleanField,
   ChapterPreview,
+  ChapterEdit,
+  ChapterEditBlocks,
+  ChapterEditDetails,
   ContextMenu,
   CreateAccount,
   DashboardIndex,
diff --git a/src/frontend/stories/chapter-edit-tab-errors.ts b/src/frontend/stories/chapter-edit-tab-errors.ts
new file mode 100644
index 00000000..e20aaaae
--- /dev/null
+++ b/src/frontend/stories/chapter-edit-tab-errors.ts
@@ -0,0 +1,45 @@
+export type ChapterEditTab = 'details' | 'blocks' | 'resources';
+
+const CHAPTER_EDIT_TAB_ORDER: ChapterEditTab[] = ['details', 'blocks', 'resources'];
+
+const CHAPTER_EDIT_TAB_LABELS: Record<ChapterEditTab, string> = {
+  details: 'Details',
+  blocks: 'Blocks',
+  resources: 'Resources',
+};
+
+function matchesErrorPrefix(key: string, prefix: string): boolean {
+  return key === prefix || key.startsWith(`${prefix}.`);
+}
+
+function errorKeyBelongsToTab(key: string, tab: ChapterEditTab): boolean {
+  if (tab === 'blocks') {
+    return matchesErrorPrefix(key, 'bundle.blocks');
+  }
+  if (tab === 'resources') {
+    return matchesErrorPrefix(key, 'bundle.resources');
+  }
+  return (
+    key.startsWith('bundle.') &&
+    !matchesErrorPrefix(key, 'bundle.blocks') &&
+    !matchesErrorPrefix(key, 'bundle.resources')
+  );
+}
+
+export function chapterEditTabHasError(
+  tab: ChapterEditTab,
+  errors: Record<string, string | string[]>,
+): boolean {
+  return Object.keys(errors).some((key) => errorKeyBelongsToTab(key, tab));
+}
+
+export function firstChapterEditTabWithError(
+  errors: Record<string, string | string[]>,
+): string | null {
+  for (const tab of CHAPTER_EDIT_TAB_ORDER) {
+    if (!chapterEditTabHasError(tab, errors)) continue;
+    return CHAPTER_EDIT_TAB_LABELS[tab];
+  }
+
+  return null;
+}
diff --git a/src/frontend/stories/chapter-edit.story.vue b/src/frontend/stories/chapter-edit.story.vue
new file mode 100644
index 00000000..bc3e2864
--- /dev/null
+++ b/src/frontend/stories/chapter-edit.story.vue
@@ -0,0 +1,158 @@
+<template>
+  <Story title="Chapter Edit" group="stories">
+    <Variant title="Create" :setup-app="loadCreate">
+      <ChapterEdit
+        :config="sharedProps.config"
+        :user="sharedProps.user"
+        :language="sharedProps.language"
+        :errors="{}"
+        :bookmarks="sharedProps.bookmarks"
+        :draft="sampleChapterDraft"
+        :bundle="emptyChapterBundle"
+        :story="chapterEditStory"
+        :available-resources="availableResources"
+        :has-edit-review="false"
+        :last-published="''"
+        :is-create="true"
+        :providers="mockResourceProviders"
+      />
+    </Variant>
+
+    <Variant title="Edit" :setup-app="loadEdit">
+      <ChapterEdit
+        :config="sharedProps.config"
+        :user="sharedProps.user"
+        :language="sharedProps.language"
+        :errors="{}"
+        :bookmarks="sharedProps.bookmarks"
+        :draft="sampleChapterDraft"
+        :bundle="sampleChapterBundle"
+        :story="chapterEditStory"
+        :available-resources="availableResources"
+        :has-edit-review="false"
+        :last-published="'2025-10-24T06:10:38.483+00:00'"
+        :providers="mockResourceProviders"
+      />
+      <ModelControl :model="sampleChapterBundle" :is-inspect-only="true" />
+    </Variant>
+
+    <Variant title="Blocks tab" :setup-app="loadBlocksTab">
+      <ChapterEdit
+        :config="sharedProps.config"
+        :user="sharedProps.user"
+        :language="sharedProps.language"
+        :errors="{}"
+        :bookmarks="sharedProps.bookmarks"
+        :draft="sampleChapterDraft"
+        :bundle="sampleChapterBundle"
+        :story="chapterEditStory"
+        :available-resources="availableResources"
+        :has-edit-review="false"
+        :last-published="''"
+        :providers="mockResourceProviders"
+      />
+    </Variant>
+
+    <Variant title="Resources tab" :setup-app="loadResourcesTab">
+      <ChapterEdit
+        :config="sharedProps.config"
+        :user="sharedProps.user"
+        :language="sharedProps.language"
+        :errors="{}"
+        :bookmarks="sharedProps.bookmarks"
+        :draft="sampleChapterDraft"
+        :bundle="sampleChapterBundle"
+        :story="chapterEditStory"
+        :available-resources="availableResources"
+        :has-edit-review="false"
+        :last-published="''"
+        :providers="mockResourceProviders"
+      />
+    </Variant>
+
+    <Variant title="Validation errors on tabs" :setup-app="loadValidationErrors">
+      <ChapterEdit
+        :config="sharedProps.config"
+        :user="sharedProps.user"
+        :language="sharedProps.language"
+        :errors="chapterEditValidationErrors"
+        :bookmarks="sharedProps.bookmarks"
+        :draft="sampleChapterDraft"
+        :bundle="sampleChapterBundle"
+        :story="chapterEditStory"
+        :available-resources="availableResources"
+        :has-edit-review="false"
+        :last-published="''"
+        :providers="mockResourceProviders"
+      />
+    </Variant>
+  </Story>
+</template>
+
+<script setup lang="ts">
+import ChapterEdit from './chapter-edit.vue';
+import ModelControl from '../test/model-control.vue';
+import {
+  availableResources,
+  chapterEditStory,
+  chapterEditValidationErrors,
+  emptyChapterBundle,
+  mockResourceProviders,
+  sampleChapterBundle,
+  sampleChapterDraft,
+  sharedProps,
+  miniSidebar,
+} from '../test/mocks';
+import { useSharedStore } from '../store';
+import type { StoryHandler } from '../shared/helpers';
+
+const loadCreate: StoryHandler = (context): void => {
+  miniSidebar(context);
+  const url = new URL(window.location.href);
+  url.searchParams.delete('tab');
+  window.history.replaceState({}, '', url.toString());
+};
+
+const loadEdit: StoryHandler = (context): void => {
+  miniSidebar(context);
+  const url = new URL(window.location.href);
+  url.searchParams.delete('tab');
+  window.history.replaceState({}, '', url.toString());
+};
+
+const loadBlocksTab: StoryHandler = (context): void => {
+  miniSidebar(context);
+  const url = new URL(window.location.href);
+  url.searchParams.set('tab', 'Blocks');
+  window.history.replaceState({}, '', url.toString());
+};
+
+const loadResourcesTab: StoryHandler = (context): void => {
+  miniSidebar(context);
+  const url = new URL(window.location.href);
+  url.searchParams.set('tab', 'Resources');
+  window.history.replaceState({}, '', url.toString());
+};
+
+const loadValidationErrors: StoryHandler = (context): void => {
+  miniSidebar(context);
+  useSharedStore().setErrors(chapterEditValidationErrors);
+  const url = new URL(window.location.href);
+  url.searchParams.delete('tab');
+  window.history.replaceState({}, '', url.toString());
+};
+</script>
+
+<docs lang="md">
+# Chapter Edit
+
+Tabbed chapter create/edit page with Details, Blocks, and Resources. Blocks use the shared block editor; chapter metadata uses fixed fields labelled with the story chapter type.
+
+## Variants
+
+- **Create** — empty chapter with Create Chapter action
+- **Edit** — populated chapter with mixed blocks and attached resources
+- **Blocks tab** — opens directly on the Blocks tab
+- **Resources tab** — opens directly on the Resources tab
+- **Validation errors on tabs** — error indicators on Details, Blocks, and Resources tabs
+</docs>
diff --git a/src/frontend/stories/chapter-edit.vue b/src/frontend/stories/chapter-edit.vue
new file mode 100644
index 00000000..53958620
--- /dev/null
+++ b/src/frontend/stories/chapter-edit.vue
@@ -0,0 +1,244 @@
+<template>
+  <AppLayout :title="pageTitle" :subtitle="headerSubtitle">
+    <template #actions>
+      <StudioButton
+        :label="saveButtonLabel"
+        variant="primary"
+        :disabled="isSaving"
+        @click="saveChapter"
+      />
+    </template>
+    <template #controls>
+      <TabNavigation
+        :tabs="chapterEditTabs"
+        :icons="chapterEditTabIcons"
+        :current-tab="currentChapterTab"
+        @change="onChapterTabChange"
+      />
+    </template>
+    <template #main>
+      <div class="relative">
+        <form :dir="shared.isRtl ? 'rtl' : 'ltr'">
+          <ChapterEditDetails
+            v-if="currentChapterTab === 'Details'"
+            :chapter-type="props.story.chapterType"
+          />
+          <div v-if="currentChapterTab === 'Blocks'" dir="ltr">
+            <ChapterEditBlocks
+              v-model:blocks="blocks"
+              :video-collection-id="props.config.videoCollectionId"
+            />
+          </div>
+          <div v-if="currentChapterTab === 'Resources'" dir="ltr">
+            <StoryEditResources
+              v-model:resources="attachedResources"
+              :available-resources="availableResources"
+              @create="createResource"
+            />
+          </div>
+        </form>
+      </div>
+    </template>
+  </AppLayout>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue';
+import { storeToRefs } from 'pinia';
+import { router } from '@inertiajs/vue3';
+import { BookOpen, FolderClosed, LayoutGrid } from '@lucide/vue';
+
+import type {
+  ChapterEditProps,
+  NavigationPaneTab,
+  ResourceItem,
+  SharedPageProps,
+  ChapterBlock,
+} from '../../types';
+import { ResponseStatus } from '../../types';
+import { useSharedStore, useWidgetsStore, useModelStore } from '../store';
+import AppLayout from '../shared/app-layout.vue';
+import StudioButton from '../shared/studio-button.vue';
+import TabNavigation from '../shared/tab-navigation.vue';
+import ChapterEditDetails from './components/chapter-edit-details.vue';
+import ChapterEditBlocks from './components/chapter-edit-blocks.vue';
+import StoryEditResources from './components/story-edit-resources.vue';
+import { resourceIds } from './components/resource-utils';
+import {
+  chapterEditTabHasError,
+  firstChapterEditTabWithError,
+} from './chapter-edit-tab-errors';
+
+const resolveChapterTab = (value: string | null, tabs: NavigationPaneTab[]): string => {
+  if (!value) return 'Details';
+  const match = tabs.find((tab) => tab.label.toLowerCase() === value.toLowerCase());
+  return match?.label ?? 'Details';
+};
+
+const props = defineProps<ChapterEditProps & SharedPageProps>();
+
+const shared = useSharedStore();
+const { errors } = storeToRefs(shared);
+shared.setFromProps(props);
+if (Object.keys(props.errors ?? {}).length === 0) {
+  shared.clearErrors();
+}
+useWidgetsStore().setProviders(props.providers);
+
+const model = useModelStore();
+model.setModel(props.bundle);
+
+const blocks = ref<ChapterBlock[]>(
+  props.bundle.blocks?.length ? [...props.bundle.blocks] : [],
+);
+const attachedResources = ref<ResourceItem[]>([...(props.bundle.resources ?? [])]);
+const availableResources = props.availableResources ?? [];
+const isSaving = ref(false);
+
+watch(
+  blocks,
+  (value) => {
+    model.setField('blocks', value);
+  },
+  { deep: true, immediate: true },
+);
+
+watch(
+  attachedResources,
+  (value) => {
+    model.setField('resources', value);
+  },
+  { deep: true, immediate: true },
+);
+
+const attachResourceId = new URLSearchParams(window.location.search).get('attachResource');
+if (attachResourceId) {
+  const resource = availableResources.find((item) => item.id === attachResourceId);
+  if (resource && !attachedResources.value.some((item) => item.id === attachResourceId)) {
+    attachedResources.value = [...attachedResources.value, resource];
+  }
+}
+
+const title = ref(props.bundle.title);
+
+model.$subscribe(() => {
+  title.value = model.getField('title', '');
+});
+
+const pageTitle = computed(() =>
+  props.isCreate ? 'Add Chapter' : `Edit ${props.story.chapterType ?? 'Chapter'}`,
+);
+
+const headerSubtitle = computed(() => {
+  if (props.isCreate) return 'Create a new chapter';
+  return title.value?.trim() || `Edit ${props.story.chapterType ?? 'Chapter'}`;
+});
+
+const saveButtonLabel = computed(() => (props.isCreate ? 'Create Chapter' : 'Save Changes'));
+
+const chapterEditTabs = computed((): NavigationPaneTab[] => [
+  {
+    label: 'Details',
+    hasError: chapterEditTabHasError('details', errors.value),
+  },
+  {
+    label: 'Blocks',
+    hasError: chapterEditTabHasError('blocks', errors.value),
+  },
+  {
+    label: 'Resources',
+    hasError: chapterEditTabHasError('resources', errors.value),
+  },
+]);
+
+const chapterEditTabIcons = computed(() => ({
+  Details: BookOpen,
+  Blocks: LayoutGrid,
+  Resources: FolderClosed,
+}));
+
+const initialTabs: NavigationPaneTab[] = [
+  { label: 'Details' },
+  { label: 'Blocks' },
+  { label: 'Resources' },
+];
+
+const currentChapterTab = ref(
+  resolveChapterTab(new URLSearchParams(window.location.search).get('tab'), initialTabs),
+);
+
+const onChapterTabChange = (tab: string) => {
+  currentChapterTab.value = tab;
+};
+
+const focusFirstErroredTab = () => {
+  const tab = firstChapterEditTabWithError(errors.value);
+  if (tab) {
+    currentChapterTab.value = tab;
+  }
+};
+
+const validationFailureMessage = (validationErrors: Record<string, string | string[]>) =>
+  Object.keys(validationErrors).length > 0
+    ? 'Some required fields are missing'
+    : 'Something went wrong. Please try again.';
+
+onMounted(() => {
+  if (Object.keys(props.errors ?? {}).length > 0) {
+    focusFirstErroredTab();
+  }
+});
+
+const createResource = () => {
+  const params = new URLSearchParams(window.location.search);
+  params.set('tab', 'Resources');
+  const returnTo = `${window.location.pathname}?${params.toString()}`;
+  const encodedReturnTo = encodeURIComponent(returnTo);
+  router.visit(`/${shared.locale}/resource/create?returnTo=${encodedReturnTo}`);
+};
+
+const getPayload = () => ({
+  bundle: {
+    number: model.getField('number', ''),
+    title: model.getField('title', ''),
+    description: model.getField('description', ''),
+    coverImage: model.getField('coverImage', ''),
+    devotionAudio: model.getField('devotionAudio', ''),
+    blocks: model.getField('blocks', []),
+    resources: resourceIds(attachedResources.value),
+  },
+});
+
+const saveChapter = () => {
+  shared.clearErrors();
+  isSaving.value = true;
+
+  router.post(
+    `/${shared.locale}/story/${props.story.id}/draft/${props.draft.id}/save`,
+    getPayload(),
+    {
+      preserveScroll: true,
+
+      onSuccess: () => {
+        shared.addMessage(
+          ResponseStatus.Confirmation,
+          props.isCreate ? 'Chapter created successfully' : 'Chapter saved successfully',
+        );
+      },
+
+      onError: (validationErrors) => {
+        shared.setErrors(validationErrors);
+        focusFirstErroredTab();
+        shared.addMessage(
+          ResponseStatus.Failure,
+          validationFailureMessage(validationErrors),
+        );
+      },
+
+      onFinish: () => {
+        isSaving.value = false;
+      },
+    },
+  );
+};
+</script>
diff --git a/src/frontend/stories/components/block-empty-state.vue b/src/frontend/stories/components/block-empty-state.vue
deleted file mode 100644
index a4415dc6..00000000
--- a/src/frontend/stories/components/block-empty-state.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<template>
-  <div class="py-11">
-    <p class="text-center font-dmsans text-base font-normal leading-7 text-studio-forest">
-      There are no blocks yet. <br />
-      Add a content, title, or scripture block below to get started.
-    </p>
-  </div>
-</template>
diff --git a/src/frontend/stories/components/chapter-blocks/chapter-add-block-toolbar.vue b/src/frontend/stories/components/chapter-blocks/chapter-add-block-toolbar.vue
new file mode 100644
index 00000000..1583eac9
--- /dev/null
+++ b/src/frontend/stories/components/chapter-blocks/chapter-add-block-toolbar.vue
@@ -0,0 +1,44 @@
+<template>
+  <div class="grid grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-3">
+    <button
+      type="button"
+      class="inline-flex w-full items-center justify-center rounded-xl border border-dashed border-studio-forest px-3 py-[18px] text-sm font-medium leading-4 text-studio-forest shadow-sm hover:bg-studio-lime"
+      @click.prevent="$emit('addTitle')"
+    >
+      <div class="inline-flex items-center justify-center gap-2">
+        <Plus class="size-5" aria-hidden="true" />
+        <span>Add Title Block</span>
+      </div>
+    </button>
+    <button
+      type="button"
+      class="inline-flex w-full items-center justify-center rounded-xl border border-dashed border-studio-forest px-3 py-[18px] text-sm font-medium leading-4 text-studio-forest shadow-sm hover:bg-studio-lime"
+      @click.prevent="$emit('addScripture')"
+    >
+      <div class="inline-flex items-center justify-center gap-2">
+        <Plus class="size-5" aria-hidden="true" />
+        <span>Add Scripture Block</span>
+      </div>
+    </button>
+    <button
+      type="button"
+      class="inline-flex w-full items-center justify-center rounded-xl border border-dashed border-studio-forest px-3 py-[18px] text-sm font-medium leading-4 text-studio-forest shadow-sm hover:bg-studio-lime"
+      @click.prevent="$emit('addContent')"
+    >
+      <div class="inline-flex items-center justify-center gap-2">
+        <Plus class="size-5" aria-hidden="true" />
+        <span>Add Content Block</span>
+      </div>
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Plus } from '@lucide/vue';
+
+defineEmits<{
+  addTitle: [];
+  addScripture: [];
+  addContent: [];
+}>();
+</script>
diff --git a/src/frontend/stories/components/chapter-blocks/chapter-block-card-shell.vue b/src/frontend/stories/components/chapter-blocks/chapter-block-card-shell.vue
new file mode 100644
index 00000000..591b52e7
--- /dev/null
+++ b/src/frontend/stories/components/chapter-blocks/chapter-block-card-shell.vue
@@ -0,0 +1,94 @@
+<template>
+  <div
+    class="relative my-2 list-none rounded-xl border border-gray-200 p-0"
+    draggable="true"
+    @dragstart="emit('dragstart')"
+    @dragover.prevent
+    @drop="emit('drop')"
+    @dragend="emit('dragend')"
+  >
+    <div class="rounded-xl bg-white">
+      <div
+        :class="[
+          'flex items-center justify-between gap-3 overflow-hidden px-4 py-3',
+          { 'border-b border-gray-100': expanded },
+        ]"
+      >
+        <div class="flex min-w-0 items-center gap-3">
+          <button
+            type="button"
+            class="cursor-move text-gray-400"
+            :aria-label="`Reorder ${kindLabel} block`"
+          >
+            <GripVertical class="size-4" aria-hidden="true" />
+          </button>
+          <button
+            type="button"
+            class="inline-flex min-w-0 items-center gap-2 text-left text-sm font-semibold text-gray-800"
+            @click="emit('toggle')"
+          >
+            <span class="truncate">{{ title }}</span>
+            <div
+              v-if="presenterVisible"
+              class="flex shrink-0 items-center rounded bg-studio-yellow p-[5px]"
+            >
+              <Monitor class="size-[14px] text-studio-forest" aria-hidden="true" />
+            </div>
+            <div
+              v-if="personalVisible"
+              class="flex shrink-0 items-center rounded bg-studio-lime p-[5px]"
+            >
+              <User class="size-[14px] text-studio-forest" aria-hidden="true" />
+            </div>
+          </button>
+        </div>
+        <div class="flex items-center justify-center gap-1">
+          <button
+            type="button"
+            class="rounded-xl p-1.5 text-gray-400 transition-colors hover:bg-red-50 hover:text-red-600"
+            :aria-label="`Delete ${kindLabel} block`"
+            @click="emit('delete')"
+          >
+            <Trash2 class="size-4" aria-hidden="true" />
+          </button>
+          <button
+            type="button"
+            class="rounded-xl p-1.5 text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600"
+            :aria-label="expanded ? `Collapse ${kindLabel} block` : `Expand ${kindLabel} block`"
+            @click="emit('toggle')"
+          >
+            <ChevronDown
+              class="size-4 origin-center transition-transform duration-200 ease-out"
+              :class="{ 'rotate-180': expanded }"
+              aria-hidden="true"
+            />
+          </button>
+        </div>
+      </div>
+
+      <div v-if="expanded" class="space-y-6 p-6">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ChevronDown, GripVertical, Monitor, Trash2, User } from '@lucide/vue';
+
+defineProps<{
+  title: string;
+  expanded: boolean;
+  presenterVisible: boolean;
+  personalVisible: boolean;
+  kindLabel: string;
+}>();
+
+const emit = defineEmits<{
+  toggle: [];
+  delete: [];
+  dragstart: [];
+  drop: [];
+  dragend: [];
+}>();
+</script>
diff --git a/src/frontend/stories/components/chapter-blocks/chapter-block-empty-state.vue b/src/frontend/stories/components/chapter-blocks/chapter-block-empty-state.vue
new file mode 100644
index 00000000..46fdfc51
--- /dev/null
+++ b/src/frontend/stories/components/chapter-blocks/chapter-block-empty-state.vue
@@ -0,0 +1,10 @@
+<template>
+  <div class="py-11">
+    <p class="text-center font-dmsans text-base font-normal leading-7 text-studio-forest">
+      Add blocks to build out a chapter and shape your content. <br />
+      You can add as many blocks as you like. <br />
+      If you're working with repeatable content you'll have the chance to reuse this structure on
+      future chapters.
+    </p>
+  </div>
+</template>
diff --git a/src/frontend/stories/components/chapter-blocks/chapter-block-image-field.vue b/src/frontend/stories/components/chapter-blocks/chapter-block-image-field.vue
new file mode 100644
index 00000000..1ac12d42
--- /dev/null
+++ b/src/frontend/stories/components/chapter-blocks/chapter-block-image-field.vue
@@ -0,0 +1,63 @@
+<template>
+  <ImageField :field="fieldSpec" :root-path="rootPath" :is-nested="true" />
+</template>
+
+<script setup lang="ts">
+import { computed, onBeforeUnmount, watch } from 'vue';
+
+import type { FieldSpec } from '../../../../types';
+import ImageField from '../../../fields/image-field.vue';
+import { useModelStore } from '../../../store';
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: string;
+    blockId: string;
+    label?: string;
+  }>(),
+  {
+    label: 'Cover Image',
+  },
+);
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string];
+}>();
+
+const model = useModelStore();
+const rootPath = computed(() => `_chapterBlocks.${props.blockId}`);
+const coverImagePath = computed(() => `${rootPath.value}.coverImage`);
+
+const fieldSpec = computed(
+  (): FieldSpec => ({
+    label: props.label,
+    name: 'coverImage',
+    widget: 'image',
+    description: 'PNG, JPG • Recommended 1280x720px',
+    extensions: ['.jpeg', '.jpg', '.png'],
+    maxSize: 5662310,
+  }),
+);
+
+const readCoverImage = (): string => model.getField(coverImagePath.value, '') as string;
+
+watch(
+  () => props.modelValue,
+  (value) => {
+    const current = readCoverImage();
+    if (current === value) return;
+    model.setField(coverImagePath.value, value);
+  },
+  { immediate: true },
+);
+
+const unsubscribe = model.$subscribe(() => {
+  const fresh = readCoverImage();
+  if (fresh === props.modelValue) return;
+  emit('update:modelValue', fresh);
+});
+
+onBeforeUnmount(() => {
+  unsubscribe();
+});
+</script>
diff --git a/src/frontend/stories/components/block-rich-text-editor.vue b/src/frontend/stories/components/chapter-blocks/chapter-block-rich-text-editor.vue
similarity index 97%
rename from src/frontend/stories/components/block-rich-text-editor.vue
rename to src/frontend/stories/components/chapter-blocks/chapter-block-rich-text-editor.vue
index d5aa794b..adf80e02 100644
--- a/src/frontend/stories/components/block-rich-text-editor.vue
+++ b/src/frontend/stories/components/chapter-blocks/chapter-block-rich-text-editor.vue
@@ -12,7 +12,7 @@
 <script setup lang="ts">
 import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
 import type { Editor, EditorChange } from 'codemirror';
-import type EasyMDE from '../../fields/markdown/types';
+import type EasyMDE from '../../../fields/markdown/types';
 
 const props = withDefaults(
   defineProps<{
diff --git a/src/frontend/stories/components/block-scripture-field.vue b/src/frontend/stories/components/chapter-blocks/chapter-block-scripture-field.vue
similarity index 59%
rename from src/frontend/stories/components/block-scripture-field.vue
rename to src/frontend/stories/components/chapter-blocks/chapter-block-scripture-field.vue
index c61ebcf8..3147003a 100644
--- a/src/frontend/stories/components/block-scripture-field.vue
+++ b/src/frontend/stories/components/chapter-blocks/chapter-block-scripture-field.vue
@@ -5,9 +5,9 @@
 <script setup lang="ts">
 import { computed, onBeforeUnmount, watch } from 'vue';
 
-import type { FieldSpec, Scripture } from '../../../types';
-import ScriptureField from '../../fields/scripture-field.vue';
-import { useModelStore } from '../../store';
+import type { FieldSpec, Scripture } from '../../../../types';
+import ScriptureField from '../../../fields/scripture-field.vue';
+import { useModelStore } from '../../../store';
 
 const props = withDefaults(
   defineProps<{
@@ -25,7 +25,7 @@ const emit = defineEmits<{
 }>();
 
 const model = useModelStore();
-const rootPath = computed(() => `_contentBlocks.${props.blockId}`);
+const rootPath = computed(() => `_chapterBlocks.${props.blockId}`);
 const scripturePath = computed(() => `${rootPath.value}.scripture`);
 
 const fieldSpec = computed(
@@ -39,19 +39,35 @@ const fieldSpec = computed(
 const readScripture = (): Scripture =>
   model.getField(scripturePath.value, { reference: '', verse: '' }) as Scripture;
 
+const syncPropsToModel = (value: Scripture) => {
+  const current = readScripture();
+  if (current.reference === value.reference && current.verse === value.verse) {
+    return;
+  }
+  if (
+    current.reference === value.reference &&
+    current.verse.trim() &&
+    !value.verse.trim()
+  ) {
+    return;
+  }
+  model.setField(scripturePath.value, value);
+};
+
+watch(
+  () => props.blockId,
+  () => {
+    model.setField(scripturePath.value, { ...props.modelValue });
+  },
+  { immediate: true },
+);
+
 watch(
   () => props.modelValue,
   (value) => {
-    const current = readScripture();
-    if (
-      current.reference === value.reference &&
-      current.verse === value.verse
-    ) {
-      return;
-    }
-    model.setField(scripturePath.value, value);
+    syncPropsToModel(value);
   },
-  { immediate: true, deep: true },
+  { deep: true },
 );
 
 const unsubscribe = model.$subscribe(() => {
diff --git a/src/frontend/stories/components/block-utils.ts b/src/frontend/stories/components/chapter-blocks/chapter-block-utils.ts
similarity index 70%
rename from src/frontend/stories/components/block-utils.ts
rename to src/frontend/stories/components/chapter-blocks/chapter-block-utils.ts
index 841fc2e1..9d974970 100644
--- a/src/frontend/stories/components/block-utils.ts
+++ b/src/frontend/stories/components/chapter-blocks/chapter-block-utils.ts
@@ -1,9 +1,9 @@
 import type {
-  StoryBlock,
-  StoryContentBlock,
-  StoryScriptureBlock,
-  StoryTitleBlock,
-} from '../../../types';
+  ChapterBlock,
+  ChapterContentBlock,
+  ChapterScriptureBlock,
+  ChapterTitleBlock,
+} from '../../../../types';
 
 export const DEFAULT_BLOCK_ROLE = 'summary';
 export const DEFAULT_BLOCK_STYLE = 'default';
@@ -18,7 +18,7 @@ export function createBlockId(): string {
   return crypto.randomUUID();
 }
 
-export function createEmptyBlock(): StoryContentBlock {
+export function createEmptyContentBlock(): ChapterContentBlock {
   return {
     id: createBlockId(),
     kind: 'content',
@@ -36,22 +36,25 @@ export function createEmptyBlock(): StoryContentBlock {
   };
 }
 
-export function createEmptyTitleBlock(): StoryTitleBlock {
+export function createEmptyTitleBlock(): ChapterTitleBlock {
   return {
     id: createBlockId(),
     kind: 'title',
     blockName: '',
     title: '',
+    subtitle: '',
+    coverImage: '',
     style: DEFAULT_BLOCK_STYLE,
     visibility: { ...defaultVisibility },
   };
 }
 
-export function createEmptyScriptureBlock(): StoryScriptureBlock {
+export function createEmptyScriptureBlock(): ChapterScriptureBlock {
   return {
     id: createBlockId(),
     kind: 'scripture',
     blockName: '',
+    displayName: '',
     scripture: { reference: '', verse: '' },
     visibility: { ...defaultVisibility },
     leadersNotes: '',
@@ -59,6 +62,6 @@ export function createEmptyScriptureBlock(): StoryScriptureBlock {
   };
 }
 
-export function blockKind(block: StoryBlock): StoryBlock['kind'] {
+export function blockKind(block: ChapterBlock): ChapterBlock['kind'] {
   return block.kind ?? 'content';
 }
diff --git a/src/frontend/stories/components/block-video-field.vue b/src/frontend/stories/components/chapter-blocks/chapter-block-video-field.vue
similarity index 86%
rename from src/frontend/stories/components/block-video-field.vue
rename to src/frontend/stories/components/chapter-blocks/chapter-block-video-field.vue
index 59fd78f9..6bc613e4 100644
--- a/src/frontend/stories/components/block-video-field.vue
+++ b/src/frontend/stories/components/chapter-blocks/chapter-block-video-field.vue
@@ -5,9 +5,9 @@
 <script setup lang="ts">
 import { computed, onBeforeUnmount, watch } from 'vue';
 
-import type { FieldSpec } from '../../../types';
-import VideoField from '../../fields/video-field.vue';
-import { useModelStore } from '../../store';
+import type { FieldSpec } from '../../../../types';
+import VideoField from '../../../fields/video-field.vue';
+import { useModelStore } from '../../../store';
 
 const props = withDefaults(
   defineProps<{
@@ -26,7 +26,7 @@ const emit = defineEmits<{
 }>();
 
 const model = useModelStore();
-const rootPath = computed(() => `_contentBlocks.${props.blockId}`);
+const rootPath = computed(() => `_chapterBlocks.${props.blockId}`);
 const videoPath = computed(() => `${rootPath.value}.video`);
 
 const fieldSpec = computed(
diff --git a/src/frontend/stories/components/chapter-blocks/chapter-block-visibility.vue b/src/frontend/stories/components/chapter-blocks/chapter-block-visibility.vue
new file mode 100644
index 00000000..a5a0e0cf
--- /dev/null
+++ b/src/frontend/stories/components/chapter-blocks/chapter-block-visibility.vue
@@ -0,0 +1,74 @@
+<template>
+  <section class="rounded-xl border border-gray-200 bg-gray-50 p-4">
+    <legend class="input-label mb-3">Visibility</legend>
+    <div class="flex items-center gap-6">
+      <label
+        v-for="option in visibilityOptions"
+        :key="option.key"
+        class="flex cursor-pointer items-center gap-3"
+      >
+        <input
+          type="checkbox"
+          class="size-[22px] rounded border-gray-300 text-studio-forest focus:ring-blue-500"
+          :checked="modelValue[option.key]"
+          @change="
+            updateVisibility(option.key, ($event.target as HTMLInputElement).checked)
+          "
+        />
+        <div class="flex items-center gap-2 rounded" :class="option.iconBackgroundClass">
+          <component
+            :is="option.icon"
+            class="size-[14px] text-studio-forest"
+            aria-hidden="true"
+          />
+        </div>
+        <span class="text-sm font-medium text-gray-900">{{ option.label }}</span>
+      </label>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+import type { Component } from 'vue';
+import { EyeOff, Monitor, User } from '@lucide/vue';
+
+import type { ChapterBlockVisibility } from '../../../../types';
+
+const props = defineProps<{
+  modelValue: ChapterBlockVisibility;
+}>();
+
+const emit = defineEmits<{
+  'update:modelValue': [value: ChapterBlockVisibility];
+}>();
+
+const updateVisibility = (key: keyof ChapterBlockVisibility, checked: boolean) => {
+  emit('update:modelValue', { ...props.modelValue, [key]: checked });
+};
+
+const visibilityOptions: {
+  key: keyof ChapterBlockVisibility;
+  label: string;
+  icon: Component;
+  iconBackgroundClass: string;
+}[] = [
+  {
+    key: 'presenter',
+    label: 'Presenter',
+    icon: Monitor,
+    iconBackgroundClass: 'bg-studio-yellow p-[5px]',
+  },
+  {
+    key: 'personal',
+    label: 'Personal',
+    icon: User,
+    iconBackgroundClass: 'bg-studio-lime p-[5px]',
+  },
+  {
+    key: 'hidden',
+    label: 'Hidden',
+    icon: EyeOff,
+    iconBackgroundClass: 'bg-red-200 p-[5px]',
+  },
+];
+</script>
diff --git a/src/frontend/stories/components/chapter-blocks/chapter-content-block-card.vue b/src/frontend/stories/components/chapter-blocks/chapter-content-block-card.vue
new file mode 100644
index 00000000..0a09e88a
--- /dev/null
+++ b/src/frontend/stories/components/chapter-blocks/chapter-content-block-card.vue
@@ -0,0 +1,293 @@
+<template>
+  <ChapterBlockCardShell
+    :title="blockTitle"
+    :expanded="expanded"
+    :presenter-visible="block.visibility.presenter"
+    :personal-visible="block.visibility.personal"
+    kind-label="content"
+    @toggle="emit('toggle')"
+    @delete="emit('delete')"
+    @dragstart="emit('dragstart')"
+    @drop="emit('drop')"
+    @dragend="emit('dragend')"
+  >
+    <div>
+      <label :for="`${block.id}-block-name`" class="input-label">Block Name</label>
+      <input
+        :id="`${block.id}-block-name`"
+        type="text"
+        :value="block.blockName"
+        placeholder="e.g., Summary, Introduction, Overview"
+        class="input-field mt-[2px]"
+        @input="updateField('blockName', ($event.target as HTMLInputElement).value)"
+      />
+      <p class="mt-1 text-sm italic text-gray-500">
+        This becomes the collapsible section name
+      </p>
+    </div>
+
+    <div>
+      <label :for="`${block.id}-display-name`" class="input-label">Display Name</label>
+      <input
+        :id="`${block.id}-display-name`"
+        type="text"
+        :value="block.displayName"
+        placeholder="e.g., Session Summary"
+        class="input-field mt-[2px]"
+        @input="updateField('displayName', ($event.target as HTMLInputElement).value)"
+      />
+    </div>
+
+    <RichListbox
+      :model-value="block.blockRole"
+      label="Block Role"
+      :options="blockRoleOptions"
+      @update:model-value="updateField('blockRole', $event)"
+    />
+
+    <RichListbox
+      :model-value="block.style"
+      label="Style"
+      :options="styleOptions"
+      @update:model-value="updateField('style', $event)"
+    />
+
+    <RichListbox
+      :model-value="block.blockType"
+      label="Block Type"
+      :options="blockTypeOptions"
+      @update:model-value="setBlockType"
+    />
+
+    <ChapterBlockRichTextEditor
+      v-if="block.blockType === 'text'"
+      v-model="contentModel"
+      label="Text Content"
+      placeholder="Enter your content..."
+    />
+
+    <div v-if="block.blockType === 'url'">
+      <label :for="`${block.id}-url`" class="input-label">URL</label>
+      <input
+        :id="`${block.id}-url`"
+        type="url"
+        :value="block.url ?? ''"
+        placeholder="https://..."
+        class="input-field mt-[2px]"
+        @input="updateField('url', ($event.target as HTMLInputElement).value)"
+      />
+    </div>
+
+    <ChapterBlockVideoField
+      v-if="block.blockType === 'video'"
+      :model-value="block.video ?? { url: null }"
+      :collection-id="videoCollectionId ?? ''"
+      :block-id="block.id"
+      label="Video"
+      @update:model-value="updateField('video', $event)"
+    />
+
+    <ChapterBlockVisibility v-model="visibilityModel" />
+
+    <div
+      v-if="block.showLeadersNotes"
+      class="rounded-xl border border-studio-yellow/60 bg-studio-yellow/30 p-4"
+    >
+      <div class="mb-3 flex items-center justify-between gap-3">
+        <div class="flex items-center gap-2">
+          <Crown class="size-[18px] text-studio-forest" aria-hidden="true" />
+          <span class="text-sm font-semibold text-studio-forest">Leaders Notes</span>
+          <span
+            class="rounded-full bg-studio-yellow px-2 py-0.5 text-xs font-medium text-studio-forest"
+          >
+            Leaders Only
+          </span>
+        </div>
+        <button
+          type="button"
+          class="rounded-xl p-1.5 text-gray-400 transition-colors hover:bg-red-50 hover:text-red-600"
+          aria-label="Remove leaders notes"
+          @click="updateField('showLeadersNotes', false)"
+        >
+          <Trash2 class="size-4" aria-hidden="true" />
+        </button>
+      </div>
+      <textarea
+        :value="block.leadersNotes"
+        rows="3"
+        placeholder="Add guidance and notes for leaders..."
+        class="input-field min-h-[80px] resize-y"
+        @input="updateField('leadersNotes', ($event.target as HTMLTextAreaElement).value)"
+      />
+    </div>
+
+    <button
+      v-else
+      type="button"
+      class="text-sm font-medium text-studio-forest underline-offset-2 hover:underline"
+      @click="updateField('showLeadersNotes', true)"
+    >
+      Add Leaders Notes
+    </button>
+  </ChapterBlockCardShell>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { Component } from 'vue';
+import {
+  BookOpen,
+  Crown,
+  ExternalLink,
+  FileText,
+  Star,
+  Trash2,
+  Video,
+} from '@lucide/vue';
+
+import type { ResourceType, ChapterContentBlock } from '../../../../types';
+import RichListbox from '../../../shared/rich-listbox.vue';
+import ChapterBlockCardShell from './chapter-block-card-shell.vue';
+import ChapterBlockRichTextEditor from './chapter-block-rich-text-editor.vue';
+import ChapterBlockVideoField from './chapter-block-video-field.vue';
+import ChapterBlockVisibility from './chapter-block-visibility.vue';
+
+const props = defineProps<{
+  block: ChapterContentBlock;
+  expanded: boolean;
+  videoCollectionId?: string;
+}>();
+
+const emit = defineEmits<{
+  'update:block': [block: ChapterContentBlock];
+  delete: [];
+  toggle: [];
+  dragstart: [];
+  drop: [];
+  dragend: [];
+}>();
+
+const blockTitle = computed(() =>
+  props.block.blockName.trim() ? props.block.blockName.trim() : 'New Content Block',
+);
+
+const contentModel = computed({
+  get: () => props.block.content,
+  set: (value: string) => updateField('content', value),
+});
+
+const visibilityModel = computed({
+  get: () => props.block.visibility,
+  set: (value: ChapterContentBlock['visibility']) => updateField('visibility', value),
+});
+
+const updateField = <K extends keyof ChapterContentBlock>(
+  key: K,
+  value: ChapterContentBlock[K],
+) => {
+  emit('update:block', { ...props.block, [key]: value });
+};
+
+const setBlockType = (type: string) => {
+  const blockType = type as ResourceType;
+  const next: ChapterContentBlock = { ...props.block, blockType };
+
+  if (blockType !== 'url') {
+    next.url = '';
+  } else if (next.url === undefined) {
+    next.url = '';
+  }
+
+  if (blockType !== 'video') {
+    next.video = { url: null };
+  } else if (!next.video) {
+    next.video = { url: null };
+  }
+
+  if (blockType !== 'text') {
+    next.content = '';
+  } else if (next.content === undefined) {
+    next.content = '';
+  }
+
+  emit('update:block', next);
+};
+
+const blockRoleOptions: {
+  value: string;
+  label: string;
+  description: string;
+  icon: Component;
+}[] = [
+  {
+    value: 'summary',
+    label: 'Summary',
+    description: 'Recap or overview of the session',
+    icon: BookOpen,
+  },
+  {
+    value: 'introduction',
+    label: 'Introduction',
+    description: 'Opening context for the content',
+    icon: BookOpen,
+  },
+  {
+    value: 'reflection',
+    label: 'Reflection',
+    description: 'Prompt for personal reflection',
+    icon: BookOpen,
+  },
+];
+
+const styleOptions: {
+  value: string;
+  label: string;
+  description: string;
+  icon: Component;
+}[] = [
+  {
+    value: 'default',
+    label: 'Default',
+    description: 'Standard visual weight',
+    icon: Star,
+  },
+  {
+    value: 'emphasis',
+    label: 'Emphasis',
+    description: 'Draws more attention',
+    icon: Star,
+  },
+  {
+    value: 'subtle',
+    label: 'Subtle',
+    description: 'Lighter visual treatment',
+    icon: Star,
+  },
+];
+
+const blockTypeOptions: {
+  value: ResourceType;
+  label: string;
+  description: string;
+  icon: Component;
+}[] = [
+  {
+    value: 'text',
+    label: 'Text',
+    description: 'Rich formatted text content',
+    icon: FileText,
+  },
+  {
+    value: 'url',
+    label: 'URL',
+    description: 'Link to an external website or resource',
+    icon: ExternalLink,
+  },
+  {
+    value: 'video',
+    label: 'Video',
+    description: 'Upload a video file',
+    icon: Video,
+  },
+];
+</script>
diff --git a/src/frontend/stories/components/chapter-blocks/chapter-scripture-block-card.vue b/src/frontend/stories/components/chapter-blocks/chapter-scripture-block-card.vue
new file mode 100644
index 00000000..c2b172f2
--- /dev/null
+++ b/src/frontend/stories/components/chapter-blocks/chapter-scripture-block-card.vue
@@ -0,0 +1,131 @@
+<template>
+  <ChapterBlockCardShell
+    :title="blockTitle"
+    :expanded="expanded"
+    :presenter-visible="block.visibility.presenter"
+    :personal-visible="block.visibility.personal"
+    kind-label="scripture"
+    @toggle="emit('toggle')"
+    @delete="emit('delete')"
+    @dragstart="emit('dragstart')"
+    @drop="emit('drop')"
+    @dragend="emit('dragend')"
+  >
+    <div>
+      <label :for="`${block.id}-block-name`" class="input-label">Block Name</label>
+      <input
+        :id="`${block.id}-block-name`"
+        type="text"
+        :value="block.blockName"
+        placeholder="e.g., Opening Passage, Key Verse"
+        class="input-field mt-[2px]"
+        @input="updateField('blockName', ($event.target as HTMLInputElement).value)"
+      />
+      <p class="mt-1 text-sm italic text-gray-500">
+        This becomes the collapsible section name
+      </p>
+    </div>
+
+    <div>
+      <label :for="`${block.id}-display-name`" class="input-label">Display Name</label>
+      <input
+        :id="`${block.id}-display-name`"
+        type="text"
+        :value="block.displayName"
+        placeholder="e.g., Opening Scripture"
+        class="input-field mt-[2px]"
+        @input="updateField('displayName', ($event.target as HTMLInputElement).value)"
+      />
+    </div>
+
+    <ChapterBlockScriptureField
+      :model-value="block.scripture"
+      :block-id="block.id"
+      label="Scripture"
+      @update:model-value="updateField('scripture', $event)"
+    />
+
+    <ChapterBlockVisibility v-model="visibilityModel" />
+
+    <div
+      v-if="block.showLeadersNotes"
+      class="rounded-xl border border-studio-yellow/60 bg-studio-yellow/30 p-4"
+    >
+      <div class="mb-3 flex items-center justify-between gap-3">
+        <div class="flex items-center gap-2">
+          <Crown class="size-[18px] text-studio-forest" aria-hidden="true" />
+          <span class="text-sm font-semibold text-studio-forest">Leaders Notes</span>
+          <span
+            class="rounded-full bg-studio-yellow px-2 py-0.5 text-xs font-medium text-studio-forest"
+          >
+            Leaders Only
+          </span>
+        </div>
+        <button
+          type="button"
+          class="rounded-xl p-1.5 text-gray-400 transition-colors hover:bg-red-50 hover:text-red-600"
+          aria-label="Remove leaders notes"
+          @click="updateField('showLeadersNotes', false)"
+        >
+          <Trash2 class="size-4" aria-hidden="true" />
+        </button>
+      </div>
+      <textarea
+        :value="block.leadersNotes"
+        rows="3"
+        placeholder="Add guidance and notes for leaders..."
+        class="input-field min-h-[80px] resize-y"
+        @input="updateField('leadersNotes', ($event.target as HTMLTextAreaElement).value)"
+      />
+    </div>
+
+    <button
+      v-else
+      type="button"
+      class="text-sm font-medium text-studio-forest underline-offset-2 hover:underline"
+      @click="updateField('showLeadersNotes', true)"
+    >
+      Add Leaders Notes
+    </button>
+  </ChapterBlockCardShell>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { Crown, Trash2 } from '@lucide/vue';
+
+import type { ChapterScriptureBlock } from '../../../../types';
+import ChapterBlockCardShell from './chapter-block-card-shell.vue';
+import ChapterBlockScriptureField from './chapter-block-scripture-field.vue';
+import ChapterBlockVisibility from './chapter-block-visibility.vue';
+
+const props = defineProps<{
+  block: ChapterScriptureBlock;
+  expanded: boolean;
+}>();
+
+const emit = defineEmits<{
+  'update:block': [block: ChapterScriptureBlock];
+  delete: [];
+  toggle: [];
+  dragstart: [];
+  drop: [];
+  dragend: [];
+}>();
+
+const blockTitle = computed(() =>
+  props.block.blockName.trim() ? props.block.blockName.trim() : 'New Scripture Block',
+);
+
+const visibilityModel = computed({
+  get: () => props.block.visibility,
+  set: (value: ChapterScriptureBlock['visibility']) => updateField('visibility', value),
+});
+
+const updateField = <K extends keyof ChapterScriptureBlock>(
+  key: K,
+  value: ChapterScriptureBlock[K],
+) => {
+  emit('update:block', { ...props.block, [key]: value });
+};
+</script>
diff --git a/src/frontend/stories/components/chapter-blocks/chapter-title-block-card.vue b/src/frontend/stories/components/chapter-blocks/chapter-title-block-card.vue
new file mode 100644
index 00000000..96f0b685
--- /dev/null
+++ b/src/frontend/stories/components/chapter-blocks/chapter-title-block-card.vue
@@ -0,0 +1,137 @@
+<template>
+  <ChapterBlockCardShell
+    :title="blockTitle"
+    :expanded="expanded"
+    :presenter-visible="block.visibility.presenter"
+    :personal-visible="block.visibility.personal"
+    kind-label="title"
+    @toggle="emit('toggle')"
+    @delete="emit('delete')"
+    @dragstart="emit('dragstart')"
+    @drop="emit('drop')"
+    @dragend="emit('dragend')"
+  >
+    <div>
+      <label :for="`${block.id}-block-name`" class="input-label">Block Name</label>
+      <input
+        :id="`${block.id}-block-name`"
+        type="text"
+        :value="block.blockName"
+        placeholder="e.g., Session Title, Chapter Heading"
+        class="input-field mt-[2px]"
+        @input="updateField('blockName', ($event.target as HTMLInputElement).value)"
+      />
+      <p class="mt-1 text-sm italic text-gray-500">
+        This becomes the collapsible section name
+      </p>
+    </div>
+
+    <div>
+      <label :for="`${block.id}-title`" class="input-label">Title</label>
+      <input
+        :id="`${block.id}-title`"
+        type="text"
+        :value="block.title"
+        placeholder="e.g., The Gospel of John"
+        class="input-field mt-[2px]"
+        @input="updateField('title', ($event.target as HTMLInputElement).value)"
+      />
+    </div>
+
+    <div>
+      <label :for="`${block.id}-subtitle`" class="input-label">Subtitle</label>
+      <input
+        :id="`${block.id}-subtitle`"
+        type="text"
+        :value="block.subtitle"
+        placeholder="e.g., Session 1 of 12"
+        class="input-field mt-[2px]"
+        @input="updateField('subtitle', ($event.target as HTMLInputElement).value)"
+      />
+    </div>
+
+    <ChapterBlockImageField
+      :model-value="block.coverImage"
+      :block-id="block.id"
+      label="Cover Image (Optional)"
+      @update:model-value="updateField('coverImage', $event)"
+    />
+
+    <RichListbox
+      :model-value="block.style"
+      label="Style"
+      :options="styleOptions"
+      @update:model-value="updateField('style', $event)"
+    />
+
+    <ChapterBlockVisibility v-model="visibilityModel" />
+  </ChapterBlockCardShell>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { Component } from 'vue';
+import { Star } from '@lucide/vue';
+
+import type { ChapterTitleBlock } from '../../../../types';
+import RichListbox from '../../../shared/rich-listbox.vue';
+import ChapterBlockCardShell from './chapter-block-card-shell.vue';
+import ChapterBlockImageField from './chapter-block-image-field.vue';
+import ChapterBlockVisibility from './chapter-block-visibility.vue';
+
+const props = defineProps<{
+  block: ChapterTitleBlock;
+  expanded: boolean;
+}>();
+
+const emit = defineEmits<{
+  'update:block': [block: ChapterTitleBlock];
+  delete: [];
+  toggle: [];
+  dragstart: [];
+  drop: [];
+  dragend: [];
+}>();
+
+const blockTitle = computed(() =>
+  props.block.blockName.trim() ? props.block.blockName.trim() : 'New Title Block',
+);
+
+const visibilityModel = computed({
+  get: () => props.block.visibility,
+  set: (value: ChapterTitleBlock['visibility']) => updateField('visibility', value),
+});
+
+const updateField = <K extends keyof ChapterTitleBlock>(
+  key: K,
+  value: ChapterTitleBlock[K],
+) => {
+  emit('update:block', { ...props.block, [key]: value });
+};
+
+const styleOptions: {
+  value: string;
+  label: string;
+  description: string;
+  icon: Component;
+}[] = [
+  {
+    value: 'default',
+    label: 'Default',
+    description: 'Standard visual weight',
+    icon: Star,
+  },
+  {
+    value: 'emphasis',
+    label: 'Emphasis',
+    description: 'Draws more attention',
+    icon: Star,
+  },
+  {
+    value: 'subtle',
+    label: 'Subtle',
+    description: 'Lighter visual treatment',
+    icon: Star,
+  },
+];
+</script>
diff --git a/src/frontend/stories/components/story-edit-blocks.story.vue b/src/frontend/stories/components/chapter-edit-blocks.story.vue
similarity index 55%
rename from src/frontend/stories/components/story-edit-blocks.story.vue
rename to src/frontend/stories/components/chapter-edit-blocks.story.vue
index d5431716..0caa41df 100644
--- a/src/frontend/stories/components/story-edit-blocks.story.vue
+++ b/src/frontend/stories/components/chapter-edit-blocks.story.vue
@@ -1,28 +1,28 @@
 <template>
-  <Story title="Story Edit Blocks" group="stories" :setup-app="setupProviders">
+  <Story title="Chapter Edit Blocks" group="stories" :setup-app="setupProviders">
     <Variant title="Default">
-      <StoryEditBlocks
+      <ChapterEditBlocks
         v-model:blocks="defaultBlocks"
         :video-collection-id="sharedProps.config.videoCollectionId"
       />
     </Variant>
 
     <Variant title="Empty">
-      <StoryEditBlocks
+      <ChapterEditBlocks
         v-model:blocks="emptyBlocks"
         :video-collection-id="sharedProps.config.videoCollectionId"
       />
     </Variant>
 
     <Variant title="Multiple blocks">
-      <StoryEditBlocks
+      <ChapterEditBlocks
         v-model:blocks="multipleBlocks"
         :video-collection-id="sharedProps.config.videoCollectionId"
       />
     </Variant>
 
     <Variant title="Mixed block kinds">
-      <StoryEditBlocks
+      <ChapterEditBlocks
         v-model:blocks="mixedBlocks"
         :video-collection-id="sharedProps.config.videoCollectionId"
       />
@@ -33,28 +33,24 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 
-import type { StoryBlock } from '../../../types';
-import { mockResourceProviders, sharedProps } from '../../test/mocks';
+import type { ChapterBlock } from '../../../types';
+import { mockResourceProviders, sampleMixedChapterBlocks, sharedProps } from '../../test/mocks';
 import { useWidgetsStore } from '../../store';
 import type { StoryHandler } from '../../shared/helpers';
-import StoryEditBlocks from './story-edit-blocks.vue';
-import {
-  createEmptyBlock,
-  createEmptyScriptureBlock,
-  createEmptyTitleBlock,
-} from './block-utils';
+import ChapterEditBlocks from './chapter-edit-blocks.vue';
+import { createEmptyContentBlock } from './chapter-blocks/chapter-block-utils';
 
 const setupProviders: StoryHandler = (): void => {
   useWidgetsStore().setProviders(mockResourceProviders);
 };
 
-const defaultBlocks = ref<StoryBlock[]>([createEmptyBlock()]);
+const defaultBlocks = ref<ChapterBlock[]>([createEmptyContentBlock()]);
 
-const emptyBlocks = ref<StoryBlock[]>([]);
+const emptyBlocks = ref<ChapterBlock[]>([]);
 
-const multipleBlocks = ref<StoryBlock[]>([
+const multipleBlocks = ref<ChapterBlock[]>([
   {
-    ...createEmptyBlock(),
+    ...createEmptyContentBlock(),
     blockName: 'Introduction',
     displayName: 'Session Introduction',
     blockRole: 'introduction',
@@ -63,7 +59,7 @@ const multipleBlocks = ref<StoryBlock[]>([
     content: 'Welcome to this session.',
   },
   {
-    ...createEmptyBlock(),
+    ...createEmptyContentBlock(),
     blockName: 'External Link',
     displayName: 'Further Reading',
     blockRole: 'summary',
@@ -72,7 +68,7 @@ const multipleBlocks = ref<StoryBlock[]>([
     url: 'https://example.com/article',
   },
   {
-    ...createEmptyBlock(),
+    ...createEmptyContentBlock(),
     blockName: 'Summary',
     displayName: 'Session Summary',
     blockRole: 'summary',
@@ -82,42 +78,21 @@ const multipleBlocks = ref<StoryBlock[]>([
     visibility: { presenter: true, personal: false, hidden: false },
   },
   {
-    ...createEmptyBlock(),
+    ...createEmptyContentBlock(),
     blockName: 'Session Video',
     displayName: 'Watch Session',
     blockRole: 'introduction',
     style: 'default',
     blockType: 'video',
   },
-  createEmptyBlock(),
+  createEmptyContentBlock(),
 ]);
 
-const mixedBlocks = ref<StoryBlock[]>([
-  {
-    ...createEmptyTitleBlock(),
-    blockName: 'Session Title',
-    title: 'The Gospel of John',
-    style: 'emphasis',
-  },
-  {
-    ...createEmptyBlock(),
-    blockName: 'Introduction',
-    displayName: 'Welcome',
-    content: 'Welcome to this session.',
-  },
-  {
-    ...createEmptyScriptureBlock(),
-    blockName: 'Opening Passage',
-    scripture: {
-      reference: 'John 1:1',
-      verse: 'In the beginning was the Word, and the Word was with God.',
-    },
-  },
-]);
+const mixedBlocks = ref<ChapterBlock[]>([...sampleMixedChapterBlocks]);
 </script>
 
 <docs lang="md">
-# Story Edit Blocks
+# Chapter Edit Blocks
 
-Content block editor for the Blocks tab on story create/edit pages. Supports content, title, and scripture blocks with add, remove, reorder, collapse, visibility toggles, and leaders notes.
+Content block editor for the Blocks tab on chapter create/edit pages. Supports content, title, and scripture blocks with add, remove, reorder, collapse, visibility toggles, and leaders notes.
 </docs>
diff --git a/src/frontend/stories/components/story-edit-blocks.vue b/src/frontend/stories/components/chapter-edit-blocks.vue
similarity index 54%
rename from src/frontend/stories/components/story-edit-blocks.vue
rename to src/frontend/stories/components/chapter-edit-blocks.vue
index caa67143..30f2e079 100644
--- a/src/frontend/stories/components/story-edit-blocks.vue
+++ b/src/frontend/stories/components/chapter-edit-blocks.vue
@@ -1,9 +1,16 @@
 <template>
   <div class="min-w-0 space-y-6 overflow-x-clip">
-    <BlockEmptyState v-if="blocks.length === 0" />
+    <ChapterAddBlockToolbar
+      v-if="blocks.length === 0"
+      @add-title="addTitleBlock"
+      @add-scripture="addScriptureBlock"
+      @add-content="addContentBlock"
+    />
+
+    <ChapterBlockEmptyState v-if="blocks.length === 0" />
 
     <template v-for="(block, index) in blocks" :key="block.id">
-      <ContentBlockCard
+      <ChapterContentBlockCard
         v-if="isContentBlock(block)"
         :block="block"
         :expanded="isExpanded(index)"
@@ -15,7 +22,7 @@
         @drop="onDrop(index)"
         @dragend="onDragEnd"
       />
-      <TitleBlockCard
+      <ChapterTitleBlockCard
         v-else-if="block.kind === 'title'"
         :block="block"
         :expanded="isExpanded(index)"
@@ -26,7 +33,7 @@
         @drop="onDrop(index)"
         @dragend="onDragEnd"
       />
-      <ScriptureBlockCard
+      <ChapterScriptureBlockCard
         v-else-if="block.kind === 'scripture'"
         :block="block"
         :expanded="isExpanded(index)"
@@ -39,88 +46,80 @@
       />
     </template>
 
-    <div class="grid grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-3">
-      <button
-        type="button"
-        class="inline-flex w-full items-center justify-center rounded-xl border border-dashed border-studio-forest px-3 py-[18px] text-sm font-medium leading-4 text-studio-forest shadow-sm hover:bg-studio-lime"
-        @click.prevent="addTitleBlock"
-      >
-        <div class="inline-flex items-center justify-center gap-2">
-          <Plus class="size-5" aria-hidden="true" />
-          <span>Add Title Block</span>
-        </div>
-      </button>
-      <button
-        type="button"
-        class="inline-flex w-full items-center justify-center rounded-xl border border-dashed border-studio-forest px-3 py-[18px] text-sm font-medium leading-4 text-studio-forest shadow-sm hover:bg-studio-lime"
-        @click.prevent="addScriptureBlock"
-      >
-        <div class="inline-flex items-center justify-center gap-2">
-          <Plus class="size-5" aria-hidden="true" />
-          <span>Add Scripture Block</span>
-        </div>
-      </button>
-      <button
-        type="button"
-        class="inline-flex w-full items-center justify-center rounded-xl border border-dashed border-studio-forest px-3 py-[18px] text-sm font-medium leading-4 text-studio-forest shadow-sm hover:bg-studio-lime"
-        @click.prevent="addContentBlock"
-      >
-        <div class="inline-flex items-center justify-center gap-2">
-          <Plus class="size-5" aria-hidden="true" />
-          <span>Add Content Block</span>
-        </div>
-      </button>
-    </div>
+    <ChapterAddBlockToolbar
+      v-if="blocks.length > 0"
+      @add-title="addTitleBlock"
+      @add-scripture="addScriptureBlock"
+      @add-content="addContentBlock"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue';
-import { Plus } from '@lucide/vue';
 
-import type { StoryBlock, StoryContentBlock } from '../../../types';
-import BlockEmptyState from './block-empty-state.vue';
-import ContentBlockCard from './content-block-card.vue';
-import ScriptureBlockCard from './scripture-block-card.vue';
-import TitleBlockCard from './title-block-card.vue';
+import type { ChapterBlock, ChapterContentBlock } from '../../../types';
+import ChapterAddBlockToolbar from './chapter-blocks/chapter-add-block-toolbar.vue';
+import ChapterBlockEmptyState from './chapter-blocks/chapter-block-empty-state.vue';
+import ChapterContentBlockCard from './chapter-blocks/chapter-content-block-card.vue';
+import ChapterScriptureBlockCard from './chapter-blocks/chapter-scripture-block-card.vue';
+import ChapterTitleBlockCard from './chapter-blocks/chapter-title-block-card.vue';
 import {
   blockKind,
-  createEmptyBlock,
+  createEmptyContentBlock,
   createEmptyScriptureBlock,
   createEmptyTitleBlock,
-} from './block-utils';
+} from './chapter-blocks/chapter-block-utils';
 
 const props = defineProps<{
-  blocks: StoryBlock[];
+  blocks: ChapterBlock[];
   videoCollectionId?: string;
 }>();
 
 const emit = defineEmits<{
-  'update:blocks': [blocks: StoryBlock[]];
+  'update:blocks': [blocks: ChapterBlock[]];
 }>();
 
 const blocks = computed({
   get: () => props.blocks,
-  set: (value: StoryBlock[]) => emit('update:blocks', value),
+  set: (value: ChapterBlock[]) => emit('update:blocks', value),
 });
 
 const expanded = ref<boolean[]>([]);
+const newlyAddedBlockId = ref<string | null>(null);
+const hasInitialized = ref(false);
+
+const expandSingleEmptyStarter = () => {
+  if (blocks.value.length !== 1) return;
+  const block = blocks.value[0];
+  if (block.blockName.trim()) return;
+  expanded.value = [true];
+};
 
 const syncExpanded = () => {
   const count = blocks.value.length;
   if (expanded.value.length === count) return;
   const fresh = [...expanded.value];
-  while (fresh.length < count) fresh.push(true);
+  while (fresh.length < count) {
+    const block = blocks.value[fresh.length];
+    fresh.push(block.id === newlyAddedBlockId.value);
+  }
   fresh.length = count;
   expanded.value = fresh;
+  newlyAddedBlockId.value = null;
+
+  if (!hasInitialized.value) {
+    hasInitialized.value = true;
+    expandSingleEmptyStarter();
+  }
 };
 
 watch(blocks, syncExpanded, { deep: true, immediate: true });
 
-const isContentBlock = (block: StoryBlock): block is StoryContentBlock =>
+const isContentBlock = (block: ChapterBlock): block is ChapterContentBlock =>
   blockKind(block) === 'content';
 
-const isExpanded = (index: number): boolean => expanded.value[index] ?? true;
+const isExpanded = (index: number): boolean => expanded.value[index] ?? false;
 
 const toggle = (index: number) => {
   const fresh = [...expanded.value];
@@ -128,22 +127,27 @@ const toggle = (index: number) => {
   expanded.value = fresh;
 };
 
-const updateBlock = (index: number, block: StoryBlock) => {
+const updateBlock = (index: number, block: ChapterBlock) => {
   const next = [...blocks.value];
   next[index] = block;
   blocks.value = next;
 };
 
+const appendBlock = (block: ChapterBlock) => {
+  newlyAddedBlockId.value = block.id;
+  blocks.value = [...blocks.value, block];
+};
+
 const addContentBlock = () => {
-  blocks.value = [...blocks.value, createEmptyBlock()];
+  appendBlock(createEmptyContentBlock());
 };
 
 const addTitleBlock = () => {
-  blocks.value = [...blocks.value, createEmptyTitleBlock()];
+  appendBlock(createEmptyTitleBlock());
 };
 
 const addScriptureBlock = () => {
-  blocks.value = [...blocks.value, createEmptyScriptureBlock()];
+  appendBlock(createEmptyScriptureBlock());
 };
 
 const deleteBlock = (index: number) => {
@@ -178,7 +182,7 @@ const onDrop = (toIndex: number) => {
 
   const toggles = [...expanded.value];
   const [movedToggle] = toggles.splice(dragFromIndex.value, 1);
-  toggles.splice(toIndex, 0, movedToggle ?? true);
+  toggles.splice(toIndex, 0, movedToggle ?? false);
   expanded.value = toggles;
   dragFromIndex.value = null;
 };
diff --git a/src/frontend/stories/components/chapter-edit-details.story.vue b/src/frontend/stories/components/chapter-edit-details.story.vue
new file mode 100644
index 00000000..0fc43974
--- /dev/null
+++ b/src/frontend/stories/components/chapter-edit-details.story.vue
@@ -0,0 +1,56 @@
+<template>
+  <Story title="Chapter Edit Details" group="stories">
+    <Variant title="Create" :setup-app="loadCreate">
+      <ChapterEditDetails chapter-type="Day" />
+      <ModelControl :model="emptyChapterModel" :is-inspect-only="true" />
+    </Variant>
+
+    <Variant title="Populated" :setup-app="loadPopulated">
+      <ChapterEditDetails chapter-type="Day" />
+      <ModelControl :model="populatedChapterModel" :is-inspect-only="true" />
+    </Variant>
+
+    <Variant title="Episode chapter type" :setup-app="loadPopulated">
+      <ChapterEditDetails chapter-type="Episode" />
+      <ModelControl :model="populatedChapterModel" :is-inspect-only="true" />
+    </Variant>
+  </Story>
+</template>
+
+<script setup lang="ts">
+import ChapterEditDetails from './chapter-edit-details.vue';
+import ModelControl from '../../test/model-control.vue';
+import { useModelStore } from '../../store';
+import type { StoryHandler } from '../../shared/helpers';
+
+const emptyChapterModel = {
+  number: '',
+  title: '',
+  description: '',
+  coverImage: '',
+  devotionAudio: '',
+};
+
+const populatedChapterModel = {
+  number: '01',
+  title: 'Is there more to life than this?',
+  description: 'An introduction to the Christian faith.',
+  coverImage:
+    'https://res.cloudinary.com/journeys/image/upload/v1756121793/mountain-placeholder_yuflkz.jpg',
+  devotionAudio: '',
+};
+
+const loadCreate: StoryHandler = (): void => {
+  useModelStore().setModel(emptyChapterModel);
+};
+
+const loadPopulated: StoryHandler = (): void => {
+  useModelStore().setModel(populatedChapterModel);
+};
+</script>
+
+<docs lang="md">
+# Chapter Edit Details
+
+Fixed metadata fields for the Details tab on chapter create/edit pages. Field labels use the story chapter type (e.g. Day Number, Episode Title).
+</docs>
diff --git a/src/frontend/stories/components/chapter-edit-details.vue b/src/frontend/stories/components/chapter-edit-details.vue
new file mode 100644
index 00000000..a82b5357
--- /dev/null
+++ b/src/frontend/stories/components/chapter-edit-details.vue
@@ -0,0 +1,71 @@
+<template>
+  <div class="form-panel space-y-6">
+    <StringField :field="numberField" :is-nested="true" />
+    <StringField :field="titleField" :is-nested="true" />
+    <MarkdownField :field="descriptionField" :is-nested="true" />
+    <ImageField :field="coverImageField" :is-nested="true" />
+    <AudioField :field="devotionAudioField" :is-nested="true" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import type { FieldSpec } from '../../../types';
+import AudioField from '../../fields/audio-field.vue';
+import ImageField from '../../fields/image-field.vue';
+import MarkdownField from '../../fields/markdown-field.vue';
+import StringField from '../../fields/string-field.vue';
+
+const props = defineProps<{
+  chapterType?: string | null;
+}>();
+
+const chapterLabel = computed(() => props.chapterType?.trim() || 'Chapter');
+
+const numberField = computed(
+  (): FieldSpec => ({
+    name: 'number',
+    label: `${chapterLabel.value} Number`,
+    widget: 'string',
+    placeholderText: 'e.g., 01',
+  }),
+);
+
+const titleField = computed(
+  (): FieldSpec => ({
+    name: 'title',
+    label: `${chapterLabel.value} Title`,
+    widget: 'string',
+    placeholderText: 'e.g., Is there more to life than this?',
+  }),
+);
+
+const descriptionField: FieldSpec = {
+  name: 'description',
+  label: 'Description',
+  widget: 'markdown',
+  noMarkup: true,
+  minimal: true,
+  toolbar: [],
+  placeholderText: 'Brief overview of this session...',
+};
+
+const coverImageField: FieldSpec = {
+  label: 'Cover Image',
+  name: 'coverImage',
+  widget: 'image',
+  description: 'PNG, JPG • Recommended 1280x720px',
+  extensions: ['.jpeg', '.jpg', '.png'],
+  maxSize: 5662310,
+};
+
+const devotionAudioField: FieldSpec = {
+  label: 'Devotion Audio',
+  name: 'devotionAudio',
+  widget: 'audio',
+  description: 'MP3, M4A, WAV up to 200 MB',
+  extensions: ['.mp3', '.m4a', '.wav'],
+  maxSize: 209715200,
+};
+</script>
diff --git a/src/frontend/stories/components/content-block-card.vue b/src/frontend/stories/components/content-block-card.vue
deleted file mode 100644
index 121bdcdd..00000000
--- a/src/frontend/stories/components/content-block-card.vue
+++ /dev/null
@@ -1,422 +0,0 @@
-<template>
-  <div
-    class="relative my-2 list-none rounded-xl border border-gray-200 p-0"
-    draggable="true"
-    @dragstart="emit('dragstart')"
-    @dragover.prevent
-    @drop="emit('drop')"
-    @dragend="emit('dragend')"
-  >
-    <div class="rounded-xl bg-white">
-      <div
-        :class="[
-          'flex items-center justify-between gap-3 overflow-hidden px-4 py-3',
-          { 'border-b border-gray-100': expanded },
-        ]"
-      >
-        <div class="flex min-w-0 items-center gap-3">
-          <button
-            type="button"
-            class="cursor-move text-gray-400"
-            aria-label="Reorder content block"
-          >
-            <GripVertical class="size-4" aria-hidden="true" />
-          </button>
-          <button
-            type="button"
-            class="inline-flex min-w-0 items-center gap-2 text-left text-sm font-semibold text-gray-800"
-            @click="emit('toggle')"
-          >
-            <span class="truncate">{{ blockTitle }}</span>
-            <div
-              v-if="block.visibility.presenter"
-              class="flex shrink-0 items-center rounded bg-studio-yellow p-[5px]"
-            >
-              <Monitor class="size-[14px] text-studio-forest" aria-hidden="true" />
-            </div>
-            <div
-              v-if="block.visibility.personal"
-              class="flex shrink-0 items-center rounded bg-studio-lime p-[5px]"
-            >
-              <User class="size-[14px] text-studio-forest" aria-hidden="true" />
-            </div>
-          </button>
-        </div>
-        <div class="flex items-center justify-center gap-1">
-          <button
-            type="button"
-            class="rounded-xl p-1.5 text-gray-400 transition-colors hover:bg-red-50 hover:text-red-600"
-            aria-label="Delete content block"
-            @click="emit('delete')"
-          >
-            <Trash2 class="size-4" aria-hidden="true" />
-          </button>
-          <button
-            type="button"
-            class="rounded-xl p-1.5 text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600"
-            :aria-label="expanded ? 'Collapse content block' : 'Expand content block'"
-            @click="emit('toggle')"
-          >
-            <ChevronDown
-              class="size-4 origin-center transition-transform duration-200 ease-out"
-              :class="{ 'rotate-180': expanded }"
-              aria-hidden="true"
-            />
-          </button>
-        </div>
-      </div>
-
-      <div v-if="expanded" class="space-y-6 p-6">
-        <div>
-          <label :for="`${block.id}-block-name`" class="input-label">Block Name</label>
-          <input
-            :id="`${block.id}-block-name`"
-            type="text"
-            :value="block.blockName"
-            placeholder="e.g., Summary, Introduction, Overview"
-            class="input-field mt-[2px]"
-            @input="updateField('blockName', ($event.target as HTMLInputElement).value)"
-          />
-          <p class="mt-1 text-sm italic text-gray-500">
-            This becomes the collapsible section name
-          </p>
-        </div>
-
-        <div>
-          <label :for="`${block.id}-display-name`" class="input-label"
-            >Display Name</label
-          >
-          <input
-            :id="`${block.id}-display-name`"
-            type="text"
-            :value="block.displayName"
-            placeholder="e.g., Session Summary"
-            class="input-field mt-[2px]"
-            @input="updateField('displayName', ($event.target as HTMLInputElement).value)"
-          />
-        </div>
-
-        <RichListbox
-          :model-value="block.blockRole"
-          label="Block Role"
-          :options="blockRoleOptions"
-          @update:model-value="updateField('blockRole', $event)"
-        />
-
-        <RichListbox
-          :model-value="block.style"
-          label="Style"
-          :options="styleOptions"
-          @update:model-value="updateField('style', $event)"
-        />
-
-        <RichListbox
-          :model-value="block.blockType"
-          label="Block Type"
-          :options="blockTypeOptions"
-          @update:model-value="setBlockType"
-        />
-
-        <BlockRichTextEditor
-          v-if="block.blockType === 'text'"
-          v-model="contentModel"
-          label="Text Content"
-          placeholder="Enter your content..."
-        />
-
-        <div v-if="block.blockType === 'url'">
-          <label :for="`${block.id}-url`" class="input-label">URL</label>
-          <input
-            :id="`${block.id}-url`"
-            type="url"
-            :value="block.url ?? ''"
-            placeholder="https://..."
-            class="input-field mt-[2px]"
-            @input="updateField('url', ($event.target as HTMLInputElement).value)"
-          />
-        </div>
-
-        <BlockVideoField
-          v-if="block.blockType === 'video'"
-          :model-value="block.video ?? { url: null }"
-          :collection-id="videoCollectionId ?? ''"
-          :block-id="block.id"
-          label="Video"
-          @update:model-value="updateField('video', $event)"
-        />
-
-        <section class="border-gray-[#E5E7EB] rounded-xl border bg-gray-50 p-4">
-          <legend class="input-label mb-3">Visibility</legend>
-          <div class="flex items-center gap-6">
-            <label
-              v-for="option in visibilityOptions"
-              :key="option.key"
-              class="flex cursor-pointer items-center gap-3"
-            >
-              <input
-                type="checkbox"
-                class="size-[22px] rounded border-gray-300 text-studio-forest focus:ring-blue-500"
-                :checked="block.visibility[option.key]"
-                @change="
-                  updateVisibility(
-                    option.key,
-                    ($event.target as HTMLInputElement).checked,
-                  )
-                "
-              />
-              <div
-                class="flex items-center gap-2 rounded"
-                :class="option.iconBackgroundClass"
-              >
-                <component
-                  :is="option.icon"
-                  class="size-[14px] text-studio-forest"
-                  aria-hidden="true"
-                />
-              </div>
-              <span class="text-sm font-medium text-gray-900">{{ option.label }}</span>
-            </label>
-          </div>
-        </section>
-
-        <div
-          v-if="block.showLeadersNotes"
-          class="rounded-xl border border-studio-yellow/60 bg-studio-yellow/30 p-4"
-        >
-          <div class="mb-3 flex items-center justify-between gap-3">
-            <div class="flex items-center gap-2">
-              <Crown class="size-[18px] text-studio-forest" aria-hidden="true" />
-              <span class="text-sm font-semibold text-studio-forest">Leaders Notes</span>
-              <span
-                class="rounded-full bg-studio-yellow px-2 py-0.5 text-xs font-medium text-studio-forest"
-              >
-                Leaders Only
-              </span>
-            </div>
-            <button
-              type="button"
-              class="rounded-xl p-1.5 text-gray-400 transition-colors hover:bg-red-50 hover:text-red-600"
-              aria-label="Remove leaders notes"
-              @click="updateField('showLeadersNotes', false)"
-            >
-              <Trash2 class="size-4" aria-hidden="true" />
-            </button>
-          </div>
-          <textarea
-            :value="block.leadersNotes"
-            rows="3"
-            placeholder="Add guidance and notes for leaders..."
-            class="input-field min-h-[80px] resize-y"
-            @input="
-              updateField('leadersNotes', ($event.target as HTMLTextAreaElement).value)
-            "
-          />
-        </div>
-
-        <button
-          v-else
-          type="button"
-          class="text-sm font-medium text-studio-forest underline-offset-2 hover:underline"
-          @click="updateField('showLeadersNotes', true)"
-        >
-          Add Leaders Notes
-        </button>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-import type { Component } from 'vue';
-import {
-  BookOpen,
-  ChevronDown,
-  Crown,
-  ExternalLink,
-  EyeOff,
-  FileText,
-  GripVertical,
-  Monitor,
-  Star,
-  Trash2,
-  User,
-  Video,
-} from '@lucide/vue';
-
-import type { BlockVisibility, ResourceType, StoryContentBlock } from '../../../types';
-import RichListbox from '../../shared/rich-listbox.vue';
-import BlockRichTextEditor from './block-rich-text-editor.vue';
-import BlockVideoField from './block-video-field.vue';
-
-const props = defineProps<{
-  block: StoryContentBlock;
-  expanded: boolean;
-  videoCollectionId?: string;
-}>();
-
-const emit = defineEmits<{
-  'update:block': [block: StoryContentBlock];
-  delete: [];
-  toggle: [];
-  dragstart: [];
-  drop: [];
-  dragend: [];
-}>();
-
-const blockTitle = computed(() =>
-  props.block.blockName.trim() ? props.block.blockName.trim() : 'New Content Block',
-);
-
-const contentModel = computed({
-  get: () => props.block.content,
-  set: (value: string) => updateField('content', value),
-});
-
-const updateField = <K extends keyof StoryContentBlock>(
-  key: K,
-  value: StoryContentBlock[K],
-) => {
-  emit('update:block', { ...props.block, [key]: value });
-};
-
-const updateVisibility = (key: keyof BlockVisibility, checked: boolean) => {
-  emit('update:block', {
-    ...props.block,
-    visibility: { ...props.block.visibility, [key]: checked },
-  });
-};
-
-const setBlockType = (type: string) => {
-  const blockType = type as ResourceType;
-  const next: StoryContentBlock = { ...props.block, blockType };
-
-  if (blockType !== 'url') {
-    next.url = '';
-  } else if (next.url === undefined) {
-    next.url = '';
-  }
-
-  if (blockType !== 'video') {
-    next.video = { url: null };
-  } else if (!next.video) {
-    next.video = { url: null };
-  }
-
-  if (blockType !== 'text') {
-    next.content = '';
-  } else if (next.content === undefined) {
-    next.content = '';
-  }
-
-  emit('update:block', next);
-};
-
-const blockRoleOptions: {
-  value: string;
-  label: string;
-  description: string;
-  icon: Component;
-}[] = [
-  {
-    value: 'summary',
-    label: 'Summary',
-    description: 'Recap or overview of the session',
-    icon: BookOpen,
-  },
-  {
-    value: 'introduction',
-    label: 'Introduction',
-    description: 'Opening context for the content',
-    icon: BookOpen,
-  },
-  {
-    value: 'reflection',
-    label: 'Reflection',
-    description: 'Prompt for personal reflection',
-    icon: BookOpen,
-  },
-];
-
-const styleOptions: {
-  value: string;
-  label: string;
-  description: string;
-  icon: Component;
-}[] = [
-  {
-    value: 'default',
-    label: 'Default',
-    description: 'Standard visual weight',
-    icon: Star,
-  },
-  {
-    value: 'emphasis',
-    label: 'Emphasis',
-    description: 'Draws more attention',
-    icon: Star,
-  },
-  {
-    value: 'subtle',
-    label: 'Subtle',
-    description: 'Lighter visual treatment',
-    icon: Star,
-  },
-];
-
-const blockTypeOptions: {
-  value: ResourceType;
-  label: string;
-  description: string;
-  icon: Component;
-}[] = [
-  {
-    value: 'text',
-    label: 'Text',
-    description: 'Rich formatted text content',
-    icon: FileText,
-  },
-  {
-    value: 'url',
-    label: 'URL',
-    description: 'Link to an external website or resource',
-    icon: ExternalLink,
-  },
-  {
-    value: 'video',
-    label: 'Video',
-    description: 'Upload a video file',
-    icon: Video,
-  },
-];
-
-const visibilityOptions: {
-  key: keyof BlockVisibility;
-  label: string;
-  icon: Component;
-
-  iconBackgroundClass: string;
-}[] = [
-  {
-    key: 'presenter',
-    label: 'Presenter',
-    icon: Monitor,
-
-    iconBackgroundClass: 'bg-studio-yellow p-[5px]',
-  },
-  {
-    key: 'personal',
-    label: 'Personal',
-    icon: User,
-
-    iconBackgroundClass: 'bg-studio-lime p-[5px]',
-  },
-  {
-    key: 'hidden',
-    label: 'Hidden',
-    icon: EyeOff,
-
-    iconBackgroundClass: 'bg-red-200 p-[5px]',
-  },
-];
-</script>
diff --git a/src/frontend/stories/components/scripture-block-card.vue b/src/frontend/stories/components/scripture-block-card.vue
deleted file mode 100644
index e3cfd965..00000000
--- a/src/frontend/stories/components/scripture-block-card.vue
+++ /dev/null
@@ -1,246 +0,0 @@
-<template>
-  <div
-    class="relative my-2 list-none rounded-xl border border-gray-200 p-0"
-    draggable="true"
-    @dragstart="emit('dragstart')"
-    @dragover.prevent
-    @drop="emit('drop')"
-    @dragend="emit('dragend')"
-  >
-    <div class="rounded-xl bg-white">
-      <div
-        :class="[
-          'flex items-center justify-between gap-3 overflow-hidden px-4 py-3',
-          { 'border-b border-gray-100': expanded },
-        ]"
-      >
-        <div class="flex min-w-0 items-center gap-3">
-          <button
-            type="button"
-            class="cursor-move text-gray-400"
-            aria-label="Reorder scripture block"
-          >
-            <GripVertical class="size-4" aria-hidden="true" />
-          </button>
-          <button
-            type="button"
-            class="inline-flex min-w-0 items-center gap-2 text-left text-sm font-semibold text-gray-800"
-            @click="emit('toggle')"
-          >
-            <span class="truncate">{{ blockTitle }}</span>
-            <div
-              v-if="block.visibility.presenter"
-              class="flex shrink-0 items-center rounded bg-studio-yellow p-[5px]"
-            >
-              <Monitor class="size-[14px] text-studio-forest" aria-hidden="true" />
-            </div>
-            <div
-              v-if="block.visibility.personal"
-              class="flex shrink-0 items-center rounded bg-studio-lime p-[5px]"
-            >
-              <User class="size-[14px] text-studio-forest" aria-hidden="true" />
-            </div>
-          </button>
-        </div>
-        <div class="flex items-center justify-center gap-1">
-          <button
-            type="button"
-            class="rounded-xl p-1.5 text-gray-400 transition-colors hover:bg-red-50 hover:text-red-600"
-            aria-label="Delete scripture block"
-            @click="emit('delete')"
-          >
-            <Trash2 class="size-4" aria-hidden="true" />
-          </button>
-          <button
-            type="button"
-            class="rounded-xl p-1.5 text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600"
-            :aria-label="expanded ? 'Collapse scripture block' : 'Expand scripture block'"
-            @click="emit('toggle')"
-          >
-            <ChevronDown
-              class="size-4 origin-center transition-transform duration-200 ease-out"
-              :class="{ 'rotate-180': expanded }"
-              aria-hidden="true"
-            />
-          </button>
-        </div>
-      </div>
-
-      <div v-if="expanded" class="space-y-6 p-6">
-        <div>
-          <label :for="`${block.id}-block-name`" class="input-label">Block Name</label>
-          <input
-            :id="`${block.id}-block-name`"
-            type="text"
-            :value="block.blockName"
-            placeholder="e.g., Opening Passage, Key Verse"
-            class="input-field mt-[2px]"
-            @input="updateField('blockName', ($event.target as HTMLInputElement).value)"
-          />
-          <p class="mt-1 text-sm italic text-gray-500">
-            This becomes the collapsible section name
-          </p>
-        </div>
-
-        <BlockScriptureField
-          :model-value="block.scripture"
-          :block-id="block.id"
-          label="Scripture"
-          @update:model-value="updateField('scripture', $event)"
-        />
-
-        <section class="border-gray-[#E5E7EB] rounded-xl border bg-gray-50 p-4">
-          <legend class="input-label mb-3">Visibility</legend>
-          <div class="flex items-center gap-6">
-            <label
-              v-for="option in visibilityOptions"
-              :key="option.key"
-              class="flex cursor-pointer items-center gap-3"
-            >
-              <input
-                type="checkbox"
-                class="size-[22px] rounded border-gray-300 text-studio-forest focus:ring-blue-500"
-                :checked="block.visibility[option.key]"
-                @change="
-                  updateVisibility(
-                    option.key,
-                    ($event.target as HTMLInputElement).checked,
-                  )
-                "
-              />
-              <div
-                class="flex items-center gap-2 rounded"
-                :class="option.iconBackgroundClass"
-              >
-                <component
-                  :is="option.icon"
-                  class="size-[14px] text-studio-forest"
-                  aria-hidden="true"
-                />
-              </div>
-              <span class="text-sm font-medium text-gray-900">{{ option.label }}</span>
-            </label>
-          </div>
-        </section>
-
-        <div
-          v-if="block.showLeadersNotes"
-          class="rounded-xl border border-studio-yellow/60 bg-studio-yellow/30 p-4"
-        >
-          <div class="mb-3 flex items-center justify-between gap-3">
-            <div class="flex items-center gap-2">
-              <Crown class="size-[18px] text-studio-forest" aria-hidden="true" />
-              <span class="text-sm font-semibold text-studio-forest">Leaders Notes</span>
-              <span
-                class="rounded-full bg-studio-yellow px-2 py-0.5 text-xs font-medium text-studio-forest"
-              >
-                Leaders Only
-              </span>
-            </div>
-            <button
-              type="button"
-              class="rounded-xl p-1.5 text-gray-400 transition-colors hover:bg-red-50 hover:text-red-600"
-              aria-label="Remove leaders notes"
-              @click="updateField('showLeadersNotes', false)"
-            >
-              <Trash2 class="size-4" aria-hidden="true" />
-            </button>
-          </div>
-          <textarea
-            :value="block.leadersNotes"
-            rows="3"
-            placeholder="Add guidance and notes for leaders..."
-            class="input-field min-h-[80px] resize-y"
-            @input="
-              updateField('leadersNotes', ($event.target as HTMLTextAreaElement).value)
-            "
-          />
-        </div>
-
-        <button
-          v-else
-          type="button"
-          class="text-sm font-medium text-studio-forest underline-offset-2 hover:underline"
-          @click="updateField('showLeadersNotes', true)"
-        >
-          Add Leaders Notes
-        </button>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-import type { Component } from 'vue';
-import {
-  ChevronDown,
-  Crown,
-  EyeOff,
-  GripVertical,
-  Monitor,
-  Trash2,
-  User,
-} from '@lucide/vue';
-
-import type { BlockVisibility, StoryScriptureBlock } from '../../../types';
-import BlockScriptureField from './block-scripture-field.vue';
-
-const props = defineProps<{
-  block: StoryScriptureBlock;
-  expanded: boolean;
-}>();
-
-const emit = defineEmits<{
-  'update:block': [block: StoryScriptureBlock];
-  delete: [];
-  toggle: [];
-  dragstart: [];
-  drop: [];
-  dragend: [];
-}>();
-
-const blockTitle = computed(() =>
-  props.block.blockName.trim() ? props.block.blockName.trim() : 'New Scripture Block',
-);
-
-const updateField = <K extends keyof StoryScriptureBlock>(
-  key: K,
-  value: StoryScriptureBlock[K],
-) => {
-  emit('update:block', { ...props.block, [key]: value });
-};
-
-const updateVisibility = (key: keyof BlockVisibility, checked: boolean) => {
-  emit('update:block', {
-    ...props.block,
-    visibility: { ...props.block.visibility, [key]: checked },
-  });
-};
-
-const visibilityOptions: {
-  key: keyof BlockVisibility;
-  label: string;
-  icon: Component;
-  iconBackgroundClass: string;
-}[] = [
-  {
-    key: 'presenter',
-    label: 'Presenter',
-    icon: Monitor,
-    iconBackgroundClass: 'bg-studio-yellow p-[5px]',
-  },
-  {
-    key: 'personal',
-    label: 'Personal',
-    icon: User,
-    iconBackgroundClass: 'bg-studio-lime p-[5px]',
-  },
-  {
-    key: 'hidden',
-    label: 'Hidden',
-    icon: EyeOff,
-    iconBackgroundClass: 'bg-red-200 p-[5px]',
-  },
-];
-</script>
diff --git a/src/frontend/stories/components/title-block-card.vue b/src/frontend/stories/components/title-block-card.vue
deleted file mode 100644
index 0232e3c2..00000000
--- a/src/frontend/stories/components/title-block-card.vue
+++ /dev/null
@@ -1,241 +0,0 @@
-<template>
-  <div
-    class="relative my-2 list-none rounded-xl border border-gray-200 p-0"
-    draggable="true"
-    @dragstart="emit('dragstart')"
-    @dragover.prevent
-    @drop="emit('drop')"
-    @dragend="emit('dragend')"
-  >
-    <div class="rounded-xl bg-white">
-      <div
-        :class="[
-          'flex items-center justify-between gap-3 overflow-hidden px-4 py-3',
-          { 'border-b border-gray-100': expanded },
-        ]"
-      >
-        <div class="flex min-w-0 items-center gap-3">
-          <button
-            type="button"
-            class="cursor-move text-gray-400"
-            aria-label="Reorder title block"
-          >
-            <GripVertical class="size-4" aria-hidden="true" />
-          </button>
-          <button
-            type="button"
-            class="inline-flex min-w-0 items-center gap-2 text-left text-sm font-semibold text-gray-800"
-            @click="emit('toggle')"
-          >
-            <span class="truncate">{{ blockTitle }}</span>
-            <div
-              v-if="block.visibility.presenter"
-              class="flex shrink-0 items-center rounded bg-studio-yellow p-[5px]"
-            >
-              <Monitor class="size-[14px] text-studio-forest" aria-hidden="true" />
-            </div>
-            <div
-              v-if="block.visibility.personal"
-              class="flex shrink-0 items-center rounded bg-studio-lime p-[5px]"
-            >
-              <User class="size-[14px] text-studio-forest" aria-hidden="true" />
-            </div>
-          </button>
-        </div>
-        <div class="flex items-center justify-center gap-1">
-          <button
-            type="button"
-            class="rounded-xl p-1.5 text-gray-400 transition-colors hover:bg-red-50 hover:text-red-600"
-            aria-label="Delete title block"
-            @click="emit('delete')"
-          >
-            <Trash2 class="size-4" aria-hidden="true" />
-          </button>
-          <button
-            type="button"
-            class="rounded-xl p-1.5 text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600"
-            :aria-label="expanded ? 'Collapse title block' : 'Expand title block'"
-            @click="emit('toggle')"
-          >
-            <ChevronDown
-              class="size-4 origin-center transition-transform duration-200 ease-out"
-              :class="{ 'rotate-180': expanded }"
-              aria-hidden="true"
-            />
-          </button>
-        </div>
-      </div>
-
-      <div v-if="expanded" class="space-y-6 p-6">
-        <div>
-          <label :for="`${block.id}-block-name`" class="input-label">Block Name</label>
-          <input
-            :id="`${block.id}-block-name`"
-            type="text"
-            :value="block.blockName"
-            placeholder="e.g., Session Title, Chapter Heading"
-            class="input-field mt-[2px]"
-            @input="updateField('blockName', ($event.target as HTMLInputElement).value)"
-          />
-          <p class="mt-1 text-sm italic text-gray-500">
-            This becomes the collapsible section name
-          </p>
-        </div>
-
-        <div>
-          <label :for="`${block.id}-title`" class="input-label">Title</label>
-          <input
-            :id="`${block.id}-title`"
-            type="text"
-            :value="block.title"
-            placeholder="e.g., The Gospel of John"
-            class="input-field mt-[2px]"
-            @input="updateField('title', ($event.target as HTMLInputElement).value)"
-          />
-        </div>
-
-        <RichListbox
-          :model-value="block.style"
-          label="Style"
-          :options="styleOptions"
-          @update:model-value="updateField('style', $event)"
-        />
-
-        <section class="border-gray-[#E5E7EB] rounded-xl border bg-gray-50 p-4">
-          <legend class="input-label mb-3">Visibility</legend>
-          <div class="flex items-center gap-6">
-            <label
-              v-for="option in visibilityOptions"
-              :key="option.key"
-              class="flex cursor-pointer items-center gap-3"
-            >
-              <input
-                type="checkbox"
-                class="size-[22px] rounded border-gray-300 text-studio-forest focus:ring-blue-500"
-                :checked="block.visibility[option.key]"
-                @change="
-                  updateVisibility(
-                    option.key,
-                    ($event.target as HTMLInputElement).checked,
-                  )
-                "
-              />
-              <div
-                class="flex items-center gap-2 rounded"
-                :class="option.iconBackgroundClass"
-              >
-                <component
-                  :is="option.icon"
-                  class="size-[14px] text-studio-forest"
-                  aria-hidden="true"
-                />
-              </div>
-              <span class="text-sm font-medium text-gray-900">{{ option.label }}</span>
-            </label>
-          </div>
-        </section>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-import type { Component } from 'vue';
-import {
-  ChevronDown,
-  EyeOff,
-  GripVertical,
-  Monitor,
-  Star,
-  Trash2,
-  User,
-} from '@lucide/vue';
-
-import type { BlockVisibility, StoryTitleBlock } from '../../../types';
-import RichListbox from '../../shared/rich-listbox.vue';
-
-const props = defineProps<{
-  block: StoryTitleBlock;
-  expanded: boolean;
-}>();
-
-const emit = defineEmits<{
-  'update:block': [block: StoryTitleBlock];
-  delete: [];
-  toggle: [];
-  dragstart: [];
-  drop: [];
-  dragend: [];
-}>();
-
-const blockTitle = computed(() =>
-  props.block.blockName.trim() ? props.block.blockName.trim() : 'New Title Block',
-);
-
-const updateField = <K extends keyof StoryTitleBlock>(
-  key: K,
-  value: StoryTitleBlock[K],
-) => {
-  emit('update:block', { ...props.block, [key]: value });
-};
-
-const updateVisibility = (key: keyof BlockVisibility, checked: boolean) => {
-  emit('update:block', {
-    ...props.block,
-    visibility: { ...props.block.visibility, [key]: checked },
-  });
-};
-
-const styleOptions: {
-  value: string;
-  label: string;
-  description: string;
-  icon: Component;
-}[] = [
-  {
-    value: 'default',
-    label: 'Default',
-    description: 'Standard visual weight',
-    icon: Star,
-  },
-  {
-    value: 'emphasis',
-    label: 'Emphasis',
-    description: 'Draws more attention',
-    icon: Star,
-  },
-  {
-    value: 'subtle',
-    label: 'Subtle',
-    description: 'Lighter visual treatment',
-    icon: Star,
-  },
-];
-
-const visibilityOptions: {
-  key: keyof BlockVisibility;
-  label: string;
-  icon: Component;
-  iconBackgroundClass: string;
-}[] = [
-  {
-    key: 'presenter',
-    label: 'Presenter',
-    icon: Monitor,
-    iconBackgroundClass: 'bg-studio-yellow p-[5px]',
-  },
-  {
-    key: 'personal',
-    label: 'Personal',
-    icon: User,
-    iconBackgroundClass: 'bg-studio-lime p-[5px]',
-  },
-  {
-    key: 'hidden',
-    label: 'Hidden',
-    icon: EyeOff,
-    iconBackgroundClass: 'bg-red-200 p-[5px]',
-  },
-];
-</script>
diff --git a/src/frontend/stories/story-create.vue b/src/frontend/stories/story-create.vue
index 59bb50df..e9e1e279 100644
--- a/src/frontend/stories/story-create.vue
+++ b/src/frontend/stories/story-create.vue
@@ -34,12 +34,6 @@
             :tab-icon="currentStoryTabIcon"
           />
           -->
-          <div v-if="currentStoryTab === 'Blocks'" dir="ltr">
-            <StoryEditBlocks
-              v-model:blocks="blocks"
-              :video-collection-id="props.config.videoCollectionId"
-            />
-          </div>
           <div v-if="currentStoryTab === 'Resources'" dir="ltr">
             <StoryEditResources
               v-model:resources="attachedResources"
@@ -57,13 +51,12 @@
 import { computed, onMounted, ref } from 'vue';
 import { storeToRefs } from 'pinia';
 import { router } from '@inertiajs/vue3';
-import { BookOpen, FolderClosed, LayoutGrid } from '@lucide/vue';
+import { BookOpen, FolderClosed } from '@lucide/vue';
 
 import type {
   NavigationPaneTab,
   ResourceItem,
   SharedPageProps,
-  StoryBlock,
   StoryCreateProps,
 } from '../../types';
 import { ResponseStatus } from '../../types';
@@ -75,8 +68,6 @@ import StoryEditDetails from './components/story-edit-details.vue';
 // TODO(sections): re-enable when spec is ready
 // import StoryEditSections from './components/story-edit-sections.vue';
 import StoryEditResources from './components/story-edit-resources.vue';
-import StoryEditBlocks from './components/story-edit-blocks.vue';
-import { createEmptyBlock } from './components/block-utils';
 import { resourceIds } from './components/resource-utils';
 import {
   firstStoryEditTabWithError,
@@ -103,7 +94,6 @@ const model = useModelStore();
 model.setModel(props.model);
 
 const attachedResources = ref<ResourceItem[]>([]);
-const blocks = ref<StoryBlock[]>([createEmptyBlock()]);
 const availableResources = props.availableResources ?? [];
 const isSaving = ref(false);
 
@@ -129,10 +119,6 @@ const storyEditTabs = computed((): NavigationPaneTab[] => [
   //   label: sectionTabLabel.value,
   //   hasError: storyEditTabHasError('sections', errors.value),
   // },
-  {
-    label: 'Blocks',
-    hasError: storyEditTabHasError('blocks', errors.value),
-  },
   {
     label: 'Resources',
     hasError: storyEditTabHasError('resources', errors.value),
@@ -143,7 +129,6 @@ const storyEditTabIcons = computed(() => ({
   Details: BookOpen,
   // TODO(sections): re-enable when spec is ready
   // [sectionTabLabel.value]: LayoutList,
-  Blocks: LayoutGrid,
   Resources: FolderClosed,
 }));
 
@@ -151,7 +136,6 @@ const initialTabs: NavigationPaneTab[] = [
   { label: 'Details' },
   // TODO(sections): re-enable when spec is ready
   // { label: `${props.model.sectionType || 'Section'}s` },
-  { label: 'Blocks' },
   { label: 'Resources' },
 ];
 
diff --git a/src/frontend/stories/story-edit-tab-errors.ts b/src/frontend/stories/story-edit-tab-errors.ts
index 58e9a6c1..eb6a90bd 100644
--- a/src/frontend/stories/story-edit-tab-errors.ts
+++ b/src/frontend/stories/story-edit-tab-errors.ts
@@ -1,6 +1,6 @@
-export type StoryEditTab = 'details' | 'sections' | 'blocks' | 'resources';
+export type StoryEditTab = 'details' | 'sections' | 'resources';
 
-const STORY_EDIT_TAB_ORDER: StoryEditTab[] = ['details', 'sections', 'blocks', 'resources'];
+const STORY_EDIT_TAB_ORDER: StoryEditTab[] = ['details', 'sections', 'resources'];
 
 const STORY_EDIT_TAB_LABELS: Record<
   StoryEditTab,
@@ -8,26 +8,37 @@ const STORY_EDIT_TAB_LABELS: Record<
 > = {
   details: 'Details',
   sections: (sectionTabLabel) => sectionTabLabel,
-  blocks: 'Blocks',
   resources: 'Resources',
 };
 
+const STORY_DETAILS_ERROR_PREFIXES = [
+  'bundle.title',
+  'bundle.coverImage',
+  'bundle.description',
+  'bundle.chapterLimit',
+  'bundle.tags',
+  'bundle.storyType',
+  'bundle.chapterType',
+  'bundle.sectionType',
+  'bundle.visibility',
+  'bundle.template',
+  'bundle.isPublished',
+] as const;
+
+function isStoryDetailsError(key: string): boolean {
+  return STORY_DETAILS_ERROR_PREFIXES.some(
+    (prefix) => key === prefix || key.startsWith(`${prefix}.`),
+  );
+}
+
 function errorKeyBelongsToTab(key: string, tab: StoryEditTab): boolean {
   if (tab === 'sections') {
     return key.startsWith('bundle.sections');
   }
-  if (tab === 'blocks') {
-    return key.startsWith('bundle.blocks');
-  }
   if (tab === 'resources') {
     return key.startsWith('bundle.resources');
   }
-  return (
-    key.startsWith('bundle.') &&
-    !key.startsWith('bundle.sections') &&
-    !key.startsWith('bundle.blocks') &&
-    !key.startsWith('bundle.resources')
-  );
+  return isStoryDetailsError(key);
 }
 
 export function storyEditTabHasError(
diff --git a/src/frontend/stories/story-edit.story.vue b/src/frontend/stories/story-edit.story.vue
index 2d1513c5..985b17c2 100644
--- a/src/frontend/stories/story-edit.story.vue
+++ b/src/frontend/stories/story-edit.story.vue
@@ -120,21 +120,6 @@
       />
     </Variant>
 
-    <Variant title="Blocks tab" :setup-app="loadBlocksTab">
-      <StoryEdit
-        :config="sharedProps.config"
-        :user="sharedProps.user"
-        :language="sharedProps.language"
-        :errors="{}"
-        :bookmarks="sharedProps.bookmarks"
-        :model="storyModel"
-        :available-resources="availableResources"
-        :has-no-content="false"
-        :providers="mockResourceProviders"
-        :templates="storyTemplates"
-      />
-    </Variant>
-
     <Variant title="Validation errors on tabs" :setup-app="loadNormalData">
       <StoryEdit
         :config="sharedProps.config"
@@ -204,7 +189,6 @@
 import StoryEdit from './story-edit.vue';
 import {
   availableResources,
-  mockResourceProviders,
   sampleAttachedResources,
   sharedProps,
   miniSidebar,
@@ -418,13 +402,6 @@ const loadResourcesTab: StoryHandler = (context): void => {
   loadNormalData(context);
 };
 
-const loadBlocksTab: StoryHandler = (context): void => {
-  const url = new URL(window.location.href);
-  url.searchParams.set('tab', 'Blocks');
-  window.history.replaceState({}, '', url.toString());
-  loadNormalData(context);
-};
-
 const loadSectionsTab: StoryHandler = (context): void => {
   const url = new URL(window.location.href);
   url.searchParams.set('tab', 'Sections');
@@ -443,7 +420,7 @@ const loadTranslationLocale: StoryHandler = (context): void => {
 <docs lang="md">
 # Story Edit
 
-Full-page story editor with tabbed navigation for Details, Blocks, and Resources. The Sections tab is temporarily commented out until the spec is ready.
+Full-page story editor with tabbed navigation for Details and Resources. The Sections tab is temporarily commented out until the spec is ready.
 Saving posts attached resource IDs to the story localisation.
 
 ## Variants
@@ -452,6 +429,7 @@ Saving posts attached resource IDs to the story localisation.
 - **Delete and save** — empty story, published; shows Delete (`red`) and Save Changes (`secondary`)
 - **Delete and save draft** — empty story, unpublished; shows Delete (`red`) and Save Changes (`secondary`)
 - **Without sections** — English source locale with no sections (Sections tab disabled in UI)
+- **Resources tab** — opens directly on the Resources tab
 - **Validation errors on tabs** — failed publish validation; Details tab shows error indicators and inline field messages
 - **Translation locale** — Spanish edit with English source column; source tags shown in read-only column only on Details tab
 - **Arabic translation locale** — Arabic edit on the left, English source on the right; RTL text in the translation column
diff --git a/src/frontend/stories/story-edit.vue b/src/frontend/stories/story-edit.vue
index cdf13d96..2cf09a6e 100644
--- a/src/frontend/stories/story-edit.vue
+++ b/src/frontend/stories/story-edit.vue
@@ -42,12 +42,6 @@
             :tab-icon="currentStoryTabIcon"
           />
           -->
-          <div v-if="currentStoryTab === 'Blocks'" dir="ltr">
-            <StoryEditBlocks
-              v-model:blocks="blocks"
-              :video-collection-id="props.config.videoCollectionId"
-            />
-          </div>
           <div v-if="currentStoryTab === 'Resources'" dir="ltr">
             <StoryEditResources
               v-model:resources="attachedResources"
@@ -65,13 +59,12 @@
 import { computed, onMounted, ref } from 'vue';
 import { storeToRefs } from 'pinia';
 import { router } from '@inertiajs/vue3';
-import { Trash2, BookOpen, FolderClosed, LayoutGrid } from '@lucide/vue';
+import { Trash2, BookOpen, FolderClosed } from '@lucide/vue';
 
 import type {
   NavigationPaneTab,
   ResourceItem,
   SharedPageProps,
-  StoryBlock,
   StoryEditProps,
 } from '../../types';
 import { ResponseStatus } from '../../types';
@@ -83,8 +76,6 @@ import StoryEditDetails from './components/story-edit-details.vue';
 // TODO(sections): re-enable when spec is ready
 // import StoryEditSections from './components/story-edit-sections.vue';
 import StoryEditResources from './components/story-edit-resources.vue';
-import StoryEditBlocks from './components/story-edit-blocks.vue';
-import { createEmptyBlock } from './components/block-utils';
 import { resourceIds } from './components/resource-utils';
 import {
   firstStoryEditTabWithError,
@@ -110,7 +101,6 @@ const model = useModelStore();
 model.setModel(props.model);
 
 const attachedResources = ref<ResourceItem[]>([...(props.model.resources ?? [])]);
-const blocks = ref<StoryBlock[]>([createEmptyBlock()]);
 const availableResources = props.availableResources ?? [];
 const isSaving = ref(false);
 
@@ -150,10 +140,6 @@ const storyEditTabs = computed((): NavigationPaneTab[] => [
   //   label: sectionTabLabel.value,
   //   hasError: storyEditTabHasError('sections', errors.value),
   // },
-  {
-    label: 'Blocks',
-    hasError: storyEditTabHasError('blocks', errors.value),
-  },
   {
     label: 'Resources',
     hasError: storyEditTabHasError('resources', errors.value),
@@ -164,7 +150,6 @@ const storyEditTabIcons = computed(() => ({
   Details: BookOpen,
   // TODO(sections): re-enable when spec is ready
   // [sectionTabLabel.value]: LayoutList,
-  Blocks: LayoutGrid,
   Resources: FolderClosed,
 }));
 
@@ -172,7 +157,6 @@ const initialTabs: NavigationPaneTab[] = [
   { label: 'Details' },
   // TODO(sections): re-enable when spec is ready
   // { label: `${props.model.sectionType || 'Section'}s` },
-  { label: 'Blocks' },
   { label: 'Resources' },
 ];
 
diff --git a/src/frontend/test/mocks.ts b/src/frontend/test/mocks.ts
index 4b0273f0..81f4ef78 100644
--- a/src/frontend/test/mocks.ts
+++ b/src/frontend/test/mocks.ts
@@ -1,4 +1,6 @@
 import type {
+  ChapterBundle,
+  ChapterEditProps,
   FieldSpec,
   LanguageSpecification,
   LanguageTableItem,
@@ -7,6 +9,7 @@ import type {
   ResourceEditProps,
   ResourceIndexItem,
   Providers,
+  ChapterBlock,
   StorySpec,
   InvitationItem,
   UiConfig,
@@ -14,6 +17,11 @@ import type {
 } from '../../types.ts';
 import { StoryHandler } from '../shared/helpers.js';
 import { useSharedStore } from '../store/shared.js';
+import {
+  createEmptyContentBlock,
+  createEmptyScriptureBlock,
+  createEmptyTitleBlock,
+} from '../stories/components/chapter-blocks/chapter-block-utils';
 
 interface Address {
   street: string;
@@ -4527,6 +4535,83 @@ export const sampleAttachedResources: ResourceItem[] = availableResources.filter
   (resource) => attachedStoryResourceIds.includes(resource.id),
 );
 
+export const sampleMixedChapterBlocks: ChapterBlock[] = [
+  {
+    ...createEmptyTitleBlock(),
+    blockName: 'Session Title',
+    title: 'The Gospel of John',
+    subtitle: 'An introduction to the fourth gospel',
+    coverImage:
+      'https://res.cloudinary.com/journeys/image/upload/v1756121793/mountain-placeholder_yuflkz.jpg',
+    style: 'emphasis',
+  },
+  {
+    ...createEmptyContentBlock(),
+    blockName: 'Introduction',
+    displayName: 'Session Introduction',
+    blockRole: 'introduction',
+    content:
+      'Welcome to this session on the Gospel of John. We will explore how John presents Jesus as the Word made flesh.',
+  },
+  {
+    ...createEmptyScriptureBlock(),
+    blockName: 'Opening Passage',
+    displayName: 'Opening Scripture',
+    scripture: {
+      reference: 'John 1:1-3',
+      verse:
+        'In the beginning was the Word, and the Word was with God, and the Word was God. He was in the beginning with God. All things were made through him, and without him was not any thing made that was made.',
+    },
+  },
+  {
+    ...createEmptyTitleBlock(),
+    blockName: 'Part One: The Word',
+    title: 'The Word Became Flesh',
+    subtitle: 'Session 1 of 12',
+    style: 'subtle',
+  },
+  {
+    ...createEmptyContentBlock(),
+    blockName: 'Further Reading',
+    displayName: 'External Resource',
+    blockRole: 'summary',
+    blockType: 'url',
+    url: 'https://example.com/john-overview',
+    content: '',
+  },
+  {
+    ...createEmptyScriptureBlock(),
+    blockName: 'Key Verse',
+    displayName: 'Key Verse',
+    scripture: {
+      reference: 'John 3:16',
+      verse:
+        'For God so loved the world, that he gave his only Son, that whoever believes in him should not perish but have eternal life.',
+    },
+    leadersNotes:
+      'Pause here and invite the group to reflect on the scope of "the world" in this verse.',
+    showLeadersNotes: true,
+  },
+  {
+    ...createEmptyContentBlock(),
+    blockName: 'Summary',
+    displayName: 'Session Summary',
+    blockRole: 'summary',
+    style: 'emphasis',
+    content:
+      '**Key takeaways:** Jesus is the eternal Word; belief in him brings eternal life.',
+    visibility: { presenter: true, personal: false, hidden: false },
+  },
+  {
+    ...createEmptyContentBlock(),
+    blockName: 'Session Video',
+    displayName: 'Watch Session',
+    blockRole: 'introduction',
+    blockType: 'video',
+    content: '',
+  },
+];
+
 export const mockResourceProviders: Providers = {
   s3: {
     accessKeyId: '',
@@ -4542,7 +4627,7 @@ export const mockResourceProviders: Providers = {
     cloudName: 'almassira',
     defaultPreset: 'session_thumbnail',
   },
-  scripture: { bibleApiKey: 'tmp' },
+  scripture: { bibleApiKey: import.meta.env.VITE_BIBLE_API_KEY ?? '' },
   bunny: {
     accessKey: 'redacted',
     libraryId: '2ef0214d-b18',
@@ -4652,3 +4737,63 @@ export const mockResourceEditErrors: Record<string, string[]> = {
   'bundle.title': ['A resource must have a title'],
   'bundle.url': ['URL resources must have a valid URL'],
 };
+
+export const sampleChapterDraft = {
+  id: 42,
+  number: 3,
+  status: 'started',
+  updatedAt: '2025-10-24T06:10:38.483+00:00',
+  createdAt: '2025-10-24T06:10:38.482+00:00',
+};
+
+export const emptyChapterBundle: ChapterBundle = {
+  number: '',
+  title: '',
+  description: '',
+  coverImage: '',
+  devotionAudio: '',
+  blocks: [],
+  resources: [],
+};
+
+export const sampleChapterBundle: ChapterBundle = {
+  number: '01',
+  title: 'Is there more to life than this?',
+  description: 'An introduction to the Christian faith.',
+  coverImage:
+    'https://res.cloudinary.com/journeys/image/upload/v1756121793/mountain-placeholder_yuflkz.jpg',
+  devotionAudio: '',
+  blocks: sampleMixedChapterBlocks,
+  resources: sampleAttachedResources.slice(0, 2),
+};
+
+export const chapterEditStory: StorySpec = {
+  ...story,
+  chapterType: 'Day',
+};
+
+export const chapterEditProps: Omit<ChapterEditProps, 'providers'> & {
+  providers: Providers;
+} = {
+  draft: sampleChapterDraft,
+  bundle: sampleChapterBundle,
+  story: chapterEditStory,
+  availableResources,
+  providers: mockResourceProviders,
+  hasEditReview: false,
+  lastPublished: '',
+};
+
+export const chapterEditCreateProps: Omit<ChapterEditProps, 'providers'> & {
+  providers: Providers;
+} = {
+  ...chapterEditProps,
+  bundle: emptyChapterBundle,
+  isCreate: true,
+};
+
+export const chapterEditValidationErrors: Record<string, string[]> = {
+  'bundle.title': ['The title field must have at least 1 character'],
+  'bundle.blocks.0.blockName': ['Block name is required'],
+  'bundle.resources.0': ['Invalid resource'],
+};
diff --git a/src/types.ts b/src/types.ts
index 63f80708..b3044e98 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -236,22 +236,22 @@ export interface StorySection {
   description?: string;
 }
 
-export interface BlockVisibility {
+export interface ChapterBlockVisibility {
   presenter: boolean;
   personal: boolean;
   hidden: boolean;
 }
 
-export type StoryBlockKind = 'content' | 'title' | 'scripture';
+export type ChapterBlockKind = 'content' | 'title' | 'scripture';
 
-interface StoryBlockBase {
+interface ChapterBlockBase {
   id: string;
-  kind: StoryBlockKind;
+  kind: ChapterBlockKind;
   blockName: string;
-  visibility: BlockVisibility;
+  visibility: ChapterBlockVisibility;
 }
 
-export interface StoryContentBlock extends StoryBlockBase {
+export interface ChapterContentBlock extends ChapterBlockBase {
   kind: 'content';
   displayName: string;
   blockRole: string;
@@ -264,20 +264,24 @@ export interface StoryContentBlock extends StoryBlockBase {
   showLeadersNotes: boolean;
 }
 
-export interface StoryTitleBlock extends StoryBlockBase {
+export interface ChapterTitleBlock extends ChapterBlockBase {
   kind: 'title';
   title: string;
+  subtitle: string;
+  coverImage?: string;
   style: string;
 }
 
-export interface StoryScriptureBlock extends StoryBlockBase {
+export interface ChapterScriptureBlock extends ChapterBlockBase {
   kind: 'scripture';
+  displayName: string;
   scripture: Scripture;
   leadersNotes: string;
   showLeadersNotes: boolean;
 }
 
-export type StoryBlock = StoryContentBlock | StoryTitleBlock | StoryScriptureBlock;
+export type ChapterBlock =
+  ChapterContentBlock | ChapterTitleBlock | ChapterScriptureBlock;
 
 export interface StorySpec {
   id: number;
@@ -481,6 +485,28 @@ export interface DraftEditProps {
   hasEditReview: boolean;
 }
 
+export interface ChapterBundle {
+  number: string;
+  title: string;
+  description: string;
+  coverImage: string;
+  devotionAudio: string;
+  blocks: ChapterBlock[];
+  resources: ResourceItem[];
+}
+
+export interface ChapterEditProps {
+  draft: DraftMeta;
+  bundle: ChapterBundle;
+  story: StorySpec;
+  availableResources: ResourceItem[];
+  providers: Providers;
+  hasEditReview: boolean;
+  lastPublished: string;
+  isCreate?: boolean;
+  source?: ChapterBundle;
+}
+
 export interface ChapterMeta {
   number: number;
   createdAt: string;
diff --git a/tests/unit/chapter-edit-tab-errors.spec.ts b/tests/unit/chapter-edit-tab-errors.spec.ts
new file mode 100644
index 00000000..629f733e
--- /dev/null
+++ b/tests/unit/chapter-edit-tab-errors.spec.ts
@@ -0,0 +1,68 @@
+import { test, expect } from '@playwright/test';
+import {
+  chapterEditTabHasError,
+  firstChapterEditTabWithError,
+} from '../../src/frontend/stories/chapter-edit-tab-errors.js';
+
+test.describe('chapterEditTabHasError', () => {
+  test('flags Details for bundle.title', () => {
+    const errors = { 'bundle.title': ['Title is required'] };
+
+    expect(chapterEditTabHasError('details', errors)).toBe(true);
+    expect(chapterEditTabHasError('blocks', errors)).toBe(false);
+    expect(chapterEditTabHasError('resources', errors)).toBe(false);
+  });
+
+  test('flags Blocks for bundle.blocks', () => {
+    const errors = { 'bundle.blocks.0.blockName': ['Block name is required'] };
+
+    expect(chapterEditTabHasError('details', errors)).toBe(false);
+    expect(chapterEditTabHasError('blocks', errors)).toBe(true);
+    expect(chapterEditTabHasError('resources', errors)).toBe(false);
+  });
+
+  test('flags Resources for bundle.resources', () => {
+    const errors = { 'bundle.resources.0': ['Invalid resource'] };
+
+    expect(chapterEditTabHasError('details', errors)).toBe(false);
+    expect(chapterEditTabHasError('blocks', errors)).toBe(false);
+    expect(chapterEditTabHasError('resources', errors)).toBe(true);
+  });
+
+  test('does not treat bundle.blocksmith as a Blocks error', () => {
+    const errors = { 'bundle.blocksmith': ['Unrelated'] };
+
+    expect(chapterEditTabHasError('blocks', errors)).toBe(false);
+    expect(chapterEditTabHasError('details', errors)).toBe(true);
+    expect(chapterEditTabHasError('resources', errors)).toBe(false);
+  });
+
+  test('does not treat bundle.resourcesmith as a Resources error', () => {
+    const errors = { 'bundle.resourcesmith': ['Unrelated'] };
+
+    expect(chapterEditTabHasError('resources', errors)).toBe(false);
+    expect(chapterEditTabHasError('details', errors)).toBe(true);
+    expect(chapterEditTabHasError('blocks', errors)).toBe(false);
+  });
+});
+
+test.describe('firstChapterEditTabWithError', () => {
+  test('returns Details before Blocks when both have errors', () => {
+    const errors = {
+      'bundle.title': ['Title is required'],
+      'bundle.blocks.0.blockName': ['Block name is required'],
+    };
+
+    expect(firstChapterEditTabWithError(errors)).toBe('Details');
+  });
+
+  test('returns Blocks when only blocks have errors', () => {
+    const errors = { 'bundle.blocks.0.blockName': ['Block name is required'] };
+
+    expect(firstChapterEditTabWithError(errors)).toBe('Blocks');
+  });
+
+  test('returns null when there are no errors', () => {
+    expect(firstChapterEditTabWithError({})).toBeNull();
+  });
+});
diff --git a/tests/unit/story-edit-tab-errors.spec.ts b/tests/unit/story-edit-tab-errors.spec.ts
index ec75b1b1..5688b464 100644
--- a/tests/unit/story-edit-tab-errors.spec.ts
+++ b/tests/unit/story-edit-tab-errors.spec.ts
@@ -10,7 +10,6 @@ test.describe('storyEditTabHasError', () => {
 
     expect(storyEditTabHasError('details', errors)).toBe(true);
     expect(storyEditTabHasError('sections', errors)).toBe(false);
-    expect(storyEditTabHasError('blocks', errors)).toBe(false);
     expect(storyEditTabHasError('resources', errors)).toBe(false);
   });
 
@@ -19,7 +18,6 @@ test.describe('storyEditTabHasError', () => {
 
     expect(storyEditTabHasError('details', errors)).toBe(false);
     expect(storyEditTabHasError('sections', errors)).toBe(true);
-    expect(storyEditTabHasError('blocks', errors)).toBe(false);
     expect(storyEditTabHasError('resources', errors)).toBe(false);
   });
 
@@ -28,16 +26,13 @@ test.describe('storyEditTabHasError', () => {
 
     expect(storyEditTabHasError('details', errors)).toBe(false);
     expect(storyEditTabHasError('sections', errors)).toBe(false);
-    expect(storyEditTabHasError('blocks', errors)).toBe(false);
     expect(storyEditTabHasError('resources', errors)).toBe(true);
   });
 
-  test('flags Blocks for bundle.blocks', () => {
+  test('does not flag story tabs for chapter-only bundle.blocks errors', () => {
     const errors = { 'bundle.blocks.0.blockName': ['Block name is required'] };
 
     expect(storyEditTabHasError('details', errors)).toBe(false);
-    expect(storyEditTabHasError('sections', errors)).toBe(false);
-    expect(storyEditTabHasError('blocks', errors)).toBe(true);
     expect(storyEditTabHasError('resources', errors)).toBe(false);
   });
 });

From a11ed336949bcf7bca037ed4caefe89d375acef8 Mon Sep 17 00:00:00 2001
From: Timothy Koech <timosville@gmail.com>
Date: Tue, 11 Aug 2026 15:45:16 +0300
Subject: [PATCH 03/13] refactor: remove redundant test for chapter-only
 bundle.blocks errors in story edit tab error checks

---
 tests/unit/story-edit-tab-errors.spec.ts | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/tests/unit/story-edit-tab-errors.spec.ts b/tests/unit/story-edit-tab-errors.spec.ts
index 5688b464..348ee566 100644
--- a/tests/unit/story-edit-tab-errors.spec.ts
+++ b/tests/unit/story-edit-tab-errors.spec.ts
@@ -28,13 +28,6 @@ test.describe('storyEditTabHasError', () => {
     expect(storyEditTabHasError('sections', errors)).toBe(false);
     expect(storyEditTabHasError('resources', errors)).toBe(true);
   });
-
-  test('does not flag story tabs for chapter-only bundle.blocks errors', () => {
-    const errors = { 'bundle.blocks.0.blockName': ['Block name is required'] };
-
-    expect(storyEditTabHasError('details', errors)).toBe(false);
-    expect(storyEditTabHasError('resources', errors)).toBe(false);
-  });
 });
 
 test.describe('firstStoryEditTabWithError', () => {

From 5f91ac2f09f1e4a77029d38c2da7e3195e42f85d Mon Sep 17 00:00:00 2001
From: Timothy Koech <timosville@gmail.com>
Date: Wed, 12 Aug 2026 09:12:38 +0300
Subject: [PATCH 04/13] increment: add new edit review variants and improved
 workflow actions

---
 src/frontend/stories/chapter-edit.story.vue |  61 ++++-
 src/frontend/stories/chapter-edit.vue       | 235 ++++++++++++++++----
 src/frontend/test/mocks.ts                  |   5 +
 3 files changed, 252 insertions(+), 49 deletions(-)

diff --git a/src/frontend/stories/chapter-edit.story.vue b/src/frontend/stories/chapter-edit.story.vue
index bc3e2864..2e95b3bb 100644
--- a/src/frontend/stories/chapter-edit.story.vue
+++ b/src/frontend/stories/chapter-edit.story.vue
@@ -86,6 +86,57 @@
         :providers="mockResourceProviders"
       />
     </Variant>
+
+    <Variant title="Edit review: Submit" :setup-app="loadEdit">
+      <ChapterEdit
+        :config="sharedProps.config"
+        :user="editorUser"
+        :language="sharedProps.language"
+        :errors="{}"
+        :bookmarks="sharedProps.bookmarks"
+        :draft="sampleChapterDraft"
+        :bundle="sampleChapterBundle"
+        :story="chapterEditStory"
+        :available-resources="availableResources"
+        :has-edit-review="true"
+        :last-published="''"
+        :providers="mockResourceProviders"
+      />
+    </Variant>
+
+    <Variant title="Edit review: Request change" :setup-app="loadEdit">
+      <ChapterEdit
+        :config="sharedProps.config"
+        :user="adminUser"
+        :language="sharedProps.language"
+        :errors="{}"
+        :bookmarks="sharedProps.bookmarks"
+        :draft="sampleChapterDraftSubmitted"
+        :bundle="sampleChapterBundle"
+        :story="chapterEditStory"
+        :available-resources="availableResources"
+        :has-edit-review="true"
+        :last-published="'2025-10-24T06:10:38.483+00:00'"
+        :providers="mockResourceProviders"
+      />
+    </Variant>
+
+    <Variant title="Mark Ready" :setup-app="loadEdit">
+      <ChapterEdit
+        :config="sharedProps.config"
+        :user="adminUser"
+        :language="sharedProps.language"
+        :errors="{}"
+        :bookmarks="sharedProps.bookmarks"
+        :draft="sampleChapterDraft"
+        :bundle="sampleChapterBundle"
+        :story="chapterEditStory"
+        :available-resources="availableResources"
+        :has-edit-review="true"
+        :last-published="''"
+        :providers="mockResourceProviders"
+      />
+    </Variant>
   </Story>
 </template>
 
@@ -93,13 +144,16 @@
 import ChapterEdit from './chapter-edit.vue';
 import ModelControl from '../test/model-control.vue';
 import {
+  adminUser,
   availableResources,
   chapterEditStory,
   chapterEditValidationErrors,
+  editorUser,
   emptyChapterBundle,
   mockResourceProviders,
   sampleChapterBundle,
   sampleChapterDraft,
+  sampleChapterDraftSubmitted,
   sharedProps,
   miniSidebar,
 } from '../test/mocks';
@@ -146,13 +200,16 @@ const loadValidationErrors: StoryHandler = (context): void => {
 <docs lang="md">
 # Chapter Edit
 
-Tabbed chapter create/edit page with Details, Blocks, and Resources. Blocks use the shared block editor; chapter metadata uses fixed fields labelled with the story chapter type.
+Tabbed chapter create/edit page with Details, Blocks, and Resources. Includes draft lifecycle actions (delete, submit, publish, request change), 2s autosave, and an explicit Save button. No sidebar meta/preview.
 
 ## Variants
 
 - **Create** — empty chapter with Create Chapter action
-- **Edit** — populated chapter with mixed blocks and attached resources
+- **Edit** — populated chapter with Publish changes (no edit-review)
 - **Blocks tab** — opens directly on the Blocks tab
 - **Resources tab** — opens directly on the Resources tab
 - **Validation errors on tabs** — error indicators on Details, Blocks, and Resources tabs
+- **Edit review: Submit** — editor with edit-review sees Submit
+- **Edit review: Request change** — admin reviewing a submitted draft
+- **Mark Ready** — admin publish label when never published
 </docs>
diff --git a/src/frontend/stories/chapter-edit.vue b/src/frontend/stories/chapter-edit.vue
index 53958620..4b9de8ba 100644
--- a/src/frontend/stories/chapter-edit.vue
+++ b/src/frontend/stories/chapter-edit.vue
@@ -1,12 +1,28 @@
 <template>
   <AppLayout :title="pageTitle" :subtitle="headerSubtitle">
     <template #actions>
-      <StudioButton
-        :label="saveButtonLabel"
-        variant="primary"
-        :disabled="isSaving"
-        @click="saveChapter"
-      />
+      <div class="flex flex-col flex-wrap items-start gap-1 md:flex-row md:items-center">
+        <button
+          type="button"
+          class="rounded-xl p-1.5 text-gray-400 transition-colors hover:bg-red-50 hover:text-red-600"
+          aria-label="Delete draft"
+          @click="deleteDraft"
+        >
+          <Trash2 class="size-5" aria-hidden="true" />
+        </button>
+        <WorkflowActions
+          :has-edit-review="props.hasEditReview"
+          @publish="publish"
+          @request-change="reject"
+          @submit="submit"
+        />
+        <StudioButton
+          :label="saveButtonLabel"
+          variant="primary"
+          :disabled="isSaving"
+          @click="saveChapter"
+        />
+      </div>
     </template>
     <template #controls>
       <TabNavigation
@@ -43,26 +59,34 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, ref, watch } from 'vue';
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
 import { storeToRefs } from 'pinia';
 import { router } from '@inertiajs/vue3';
-import { BookOpen, FolderClosed, LayoutGrid } from '@lucide/vue';
+import type { Errors } from '@inertiajs/core';
+import { BookOpen, FolderClosed, LayoutGrid, Trash2 } from '@lucide/vue';
 
 import type {
   ChapterEditProps,
+  DraftEditProps,
   NavigationPaneTab,
   ResourceItem,
   SharedPageProps,
   ChapterBlock,
 } from '../../types';
 import { ResponseStatus } from '../../types';
-import { useSharedStore, useWidgetsStore, useModelStore } from '../store';
+import {
+  useSharedStore,
+  useWidgetsStore,
+  useModelStore,
+  useDraftsStore,
+} from '../store';
 import AppLayout from '../shared/app-layout.vue';
 import StudioButton from '../shared/studio-button.vue';
 import TabNavigation from '../shared/tab-navigation.vue';
 import ChapterEditDetails from './components/chapter-edit-details.vue';
 import ChapterEditBlocks from './components/chapter-edit-blocks.vue';
 import StoryEditResources from './components/story-edit-resources.vue';
+import WorkflowActions from './components/workflow-actions.vue';
 import { resourceIds } from './components/resource-utils';
 import {
   chapterEditTabHasError,
@@ -83,7 +107,18 @@ shared.setFromProps(props);
 if (Object.keys(props.errors ?? {}).length === 0) {
   shared.clearErrors();
 }
-useWidgetsStore().setProviders(props.providers);
+
+const widgets = useWidgetsStore();
+widgets.setProviders(props.providers);
+
+const drafts = useDraftsStore();
+drafts.setFromProps(props as DraftEditProps);
+
+watch(
+  () => props.draft.updatedAt,
+  (updatedAt) => drafts.setUpdatedAt(updatedAt),
+  { immediate: true },
+);
 
 const model = useModelStore();
 model.setModel(props.bundle);
@@ -95,6 +130,9 @@ const attachedResources = ref<ResourceItem[]>([...(props.bundle.resources ?? [])
 const availableResources = props.availableResources ?? [];
 const isSaving = ref(false);
 
+let isSettingErrors = false;
+let autosaveTimeout: ReturnType<typeof setTimeout> | null = null;
+
 watch(
   blocks,
   (value) => {
@@ -119,12 +157,9 @@ if (attachResourceId) {
   }
 }
 
+const defaultTitle = computed(() => `New ${props.story.chapterType}`);
 const title = ref(props.bundle.title);
 
-model.$subscribe(() => {
-  title.value = model.getField('title', '');
-});
-
 const pageTitle = computed(() =>
   props.isCreate ? 'Add Chapter' : `Edit ${props.story.chapterType ?? 'Chapter'}`,
 );
@@ -183,62 +218,168 @@ const validationFailureMessage = (validationErrors: Record<string, string | stri
     ? 'Some required fields are missing'
     : 'Something went wrong. Please try again.';
 
-onMounted(() => {
-  if (Object.keys(props.errors ?? {}).length > 0) {
-    focusFirstErroredTab();
-  }
+const getBundle = () => ({
+  number: model.getField('number', ''),
+  title: model.getField('title', ''),
+  description: model.getField('description', ''),
+  coverImage: model.getField('coverImage', ''),
+  devotionAudio: model.getField('devotionAudio', ''),
+  blocks: model.getField('blocks', []),
+  resources: resourceIds(attachedResources.value),
 });
 
-const createResource = () => {
-  const params = new URLSearchParams(window.location.search);
-  params.set('tab', 'Resources');
-  const returnTo = `${window.location.pathname}?${params.toString()}`;
-  const encodedReturnTo = encodeURIComponent(returnTo);
-  router.visit(`/${shared.locale}/resource/create?returnTo=${encodedReturnTo}`);
-};
-
 const getPayload = () => ({
-  bundle: {
-    number: model.getField('number', ''),
-    title: model.getField('title', ''),
-    description: model.getField('description', ''),
-    coverImage: model.getField('coverImage', ''),
-    devotionAudio: model.getField('devotionAudio', ''),
-    blocks: model.getField('blocks', []),
-    resources: resourceIds(attachedResources.value),
-  },
+  feedback: '',
+  bundle: getBundle(),
 });
 
-const saveChapter = () => {
-  shared.clearErrors();
-  isSaving.value = true;
+const cancelAutosave = () => {
+  if (autosaveTimeout !== null) {
+    clearTimeout(autosaveTimeout);
+    autosaveTimeout = null;
+  }
+};
+
+const onSaveSuccess = (message?: string) => {
+  widgets.setIsDirty(false);
+  if (!message) return;
+  shared.addMessage(ResponseStatus.Confirmation, message);
+};
+
+const onSaveError = (_errors: Errors, message: string) => {
+  widgets.setIsDirty(false);
+  isSettingErrors = true;
+  shared.setErrors(props.errors);
+  shared.addMessage(ResponseStatus.Failure, message);
+};
 
+const postSave = (options?: { message?: string; focusErrors?: boolean }) => {
   router.post(
     `/${shared.locale}/story/${props.story.id}/draft/${props.draft.id}/save`,
     getPayload(),
     {
       preserveScroll: true,
-
       onSuccess: () => {
-        shared.addMessage(
-          ResponseStatus.Confirmation,
-          props.isCreate ? 'Chapter created successfully' : 'Chapter saved successfully',
-        );
+        onSaveSuccess(options?.message);
+        if (props.user.role === 'admin') return;
+        drafts.setStatus('started');
       },
-
       onError: (validationErrors) => {
+        widgets.setIsDirty(false);
+        isSettingErrors = true;
         shared.setErrors(validationErrors);
-        focusFirstErroredTab();
+        if (options?.focusErrors) {
+          focusFirstErroredTab();
+        }
         shared.addMessage(
           ResponseStatus.Failure,
-          validationFailureMessage(validationErrors),
+          options?.focusErrors
+            ? validationFailureMessage(validationErrors)
+            : `${props.story.chapterType} not saved`,
         );
       },
-
       onFinish: () => {
         isSaving.value = false;
       },
     },
   );
 };
+
+const scheduleAutosave = () => {
+  cancelAutosave();
+  autosaveTimeout = setTimeout(() => {
+    autosaveTimeout = null;
+    postSave();
+  }, 2000);
+};
+
+const saveChapter = () => {
+  cancelAutosave();
+  shared.clearErrors();
+  isSaving.value = true;
+  postSave({
+    message: props.isCreate ? 'Chapter created successfully' : 'Chapter saved successfully',
+    focusErrors: true,
+  });
+};
+
+const deleteDraft = () => {
+  cancelAutosave();
+  router.delete(`/${shared.locale}/story/${props.story.id}/draft/${props.draft.id}`, {
+    onSuccess: () => onSaveSuccess('Draft successfully deleted'),
+    onError: (e) => onSaveError(e, 'Error deleting draft'),
+  });
+};
+
+const submit = () => {
+  cancelAutosave();
+  router.post(
+    `/${shared.locale}/story/${props.story.id}/draft/${props.draft.id}/submit`,
+    getPayload(),
+    {
+      onSuccess: () =>
+        onSaveSuccess(`${props.story.chapterType} submitted for review`),
+      onError: (e) =>
+        onSaveError(e, 'Draft not submitted. Please review and correct any errors.'),
+    },
+  );
+};
+
+const publish = () => {
+  cancelAutosave();
+  widgets.setIsDirty(true);
+  router.post(
+    `/${shared.locale}/story/${props.story.id}/draft/${props.draft.id}/publish`,
+    getPayload(),
+    {
+      onSuccess: () =>
+        onSaveSuccess(`${props.story.chapterType} published successfully`),
+      onError: (e) =>
+        onSaveError(
+          e,
+          `${props.story.chapterType} not published. Please review and correct any errors.`,
+        ),
+    },
+  );
+};
+
+const reject = () => {
+  cancelAutosave();
+  router.post(
+    `/${shared.locale}/story/${props.story.id}/draft/${props.draft.id}/reject`,
+    getPayload(),
+    {
+      onSuccess: () => onSaveSuccess('Draft sent back for fixing'),
+      onError: (e) => onSaveError(e, 'Error sending draft back'),
+    },
+  );
+};
+
+const createResource = () => {
+  const params = new URLSearchParams(window.location.search);
+  params.set('tab', 'Resources');
+  const returnTo = `${window.location.pathname}?${params.toString()}`;
+  const encodedReturnTo = encodeURIComponent(returnTo);
+  router.visit(`/${shared.locale}/resource/create?returnTo=${encodedReturnTo}`);
+};
+
+onMounted(() => {
+  if (Object.keys(props.errors ?? {}).length > 0) {
+    focusFirstErroredTab();
+  }
+
+  model.$subscribe(() => {
+    if (isSettingErrors) {
+      isSettingErrors = false;
+      return;
+    }
+    widgets.setIsDirty(true);
+    scheduleAutosave();
+    title.value = model.getField('title', defaultTitle.value);
+  });
+});
+
+onUnmounted(() => {
+  cancelAutosave();
+});
 </script>
diff --git a/src/frontend/test/mocks.ts b/src/frontend/test/mocks.ts
index 81f4ef78..a8f47c50 100644
--- a/src/frontend/test/mocks.ts
+++ b/src/frontend/test/mocks.ts
@@ -4746,6 +4746,11 @@ export const sampleChapterDraft = {
   createdAt: '2025-10-24T06:10:38.482+00:00',
 };
 
+export const sampleChapterDraftSubmitted = {
+  ...sampleChapterDraft,
+  status: 'submitted',
+};
+
 export const emptyChapterBundle: ChapterBundle = {
   number: '',
   title: '',

From 1a3536a6a936c11e7bf0e0746db14dfb305d7303 Mon Sep 17 00:00:00 2001
From: Timothy Koech <timosville@gmail.com>
Date: Thu, 13 Aug 2026 13:30:55 +0300
Subject: [PATCH 05/13] increment: add 'inNavigation' visibility option to
 ChapterBlockVisibility and update related components

---
 src/frontend/stories/chapter-edit.vue         | 29 ++++----
 .../chapter-block-card-shell.vue              | 17 ++++-
 .../chapter-blocks/chapter-block-utils.ts     |  1 +
 .../chapter-block-visibility.vue              | 70 ++++++++++---------
 .../chapter-content-block-card.vue            |  8 ++-
 .../chapter-scripture-block-card.vue          |  9 ++-
 .../chapter-title-block-card.vue              |  9 ++-
 .../components/chapter-edit-blocks.story.vue  |  2 +-
 .../components/chapter-edit-details.vue       | 36 +++++-----
 src/frontend/test/mocks.ts                    |  2 +-
 src/types.ts                                  |  1 +
 11 files changed, 106 insertions(+), 78 deletions(-)

diff --git a/src/frontend/stories/chapter-edit.vue b/src/frontend/stories/chapter-edit.vue
index 4b9de8ba..2235a1c6 100644
--- a/src/frontend/stories/chapter-edit.vue
+++ b/src/frontend/stories/chapter-edit.vue
@@ -63,7 +63,7 @@ import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
 import { storeToRefs } from 'pinia';
 import { router } from '@inertiajs/vue3';
 import type { Errors } from '@inertiajs/core';
-import { BookOpen, FolderClosed, LayoutGrid, Trash2 } from '@lucide/vue';
+import { BookOpen, FolderClosed, Blocks, Trash2 } from '@lucide/vue';
 
 import type {
   ChapterEditProps,
@@ -74,12 +74,7 @@ import type {
   ChapterBlock,
 } from '../../types';
 import { ResponseStatus } from '../../types';
-import {
-  useSharedStore,
-  useWidgetsStore,
-  useModelStore,
-  useDraftsStore,
-} from '../store';
+import { useSharedStore, useWidgetsStore, useModelStore, useDraftsStore } from '../store';
 import AppLayout from '../shared/app-layout.vue';
 import StudioButton from '../shared/studio-button.vue';
 import TabNavigation from '../shared/tab-navigation.vue';
@@ -149,7 +144,9 @@ watch(
   { deep: true, immediate: true },
 );
 
-const attachResourceId = new URLSearchParams(window.location.search).get('attachResource');
+const attachResourceId = new URLSearchParams(window.location.search).get(
+  'attachResource',
+);
 if (attachResourceId) {
   const resource = availableResources.find((item) => item.id === attachResourceId);
   if (resource && !attachedResources.value.some((item) => item.id === attachResourceId)) {
@@ -169,7 +166,9 @@ const headerSubtitle = computed(() => {
   return title.value?.trim() || `Edit ${props.story.chapterType ?? 'Chapter'}`;
 });
 
-const saveButtonLabel = computed(() => (props.isCreate ? 'Create Chapter' : 'Save Changes'));
+const saveButtonLabel = computed(() =>
+  props.isCreate ? 'Create Chapter' : 'Save Changes',
+);
 
 const chapterEditTabs = computed((): NavigationPaneTab[] => [
   {
@@ -188,7 +187,7 @@ const chapterEditTabs = computed((): NavigationPaneTab[] => [
 
 const chapterEditTabIcons = computed(() => ({
   Details: BookOpen,
-  Blocks: LayoutGrid,
+  Blocks: Blocks,
   Resources: FolderClosed,
 }));
 
@@ -298,7 +297,9 @@ const saveChapter = () => {
   shared.clearErrors();
   isSaving.value = true;
   postSave({
-    message: props.isCreate ? 'Chapter created successfully' : 'Chapter saved successfully',
+    message: props.isCreate
+      ? 'Chapter created successfully'
+      : 'Chapter saved successfully',
     focusErrors: true,
   });
 };
@@ -317,8 +318,7 @@ const submit = () => {
     `/${shared.locale}/story/${props.story.id}/draft/${props.draft.id}/submit`,
     getPayload(),
     {
-      onSuccess: () =>
-        onSaveSuccess(`${props.story.chapterType} submitted for review`),
+      onSuccess: () => onSaveSuccess(`${props.story.chapterType} submitted for review`),
       onError: (e) =>
         onSaveError(e, 'Draft not submitted. Please review and correct any errors.'),
     },
@@ -332,8 +332,7 @@ const publish = () => {
     `/${shared.locale}/story/${props.story.id}/draft/${props.draft.id}/publish`,
     getPayload(),
     {
-      onSuccess: () =>
-        onSaveSuccess(`${props.story.chapterType} published successfully`),
+      onSuccess: () => onSaveSuccess(`${props.story.chapterType} published successfully`),
       onError: (e) =>
         onSaveError(
           e,
diff --git a/src/frontend/stories/components/chapter-blocks/chapter-block-card-shell.vue b/src/frontend/stories/components/chapter-blocks/chapter-block-card-shell.vue
index 591b52e7..aa1b8344 100644
--- a/src/frontend/stories/components/chapter-blocks/chapter-block-card-shell.vue
+++ b/src/frontend/stories/components/chapter-blocks/chapter-block-card-shell.vue
@@ -27,6 +27,11 @@
             class="inline-flex min-w-0 items-center gap-2 text-left text-sm font-semibold text-gray-800"
             @click="emit('toggle')"
           >
+            <component
+              :is="kindIcon"
+              class="size-4 shrink-0 text-gray-700"
+              aria-hidden="true"
+            />
             <span class="truncate">{{ title }}</span>
             <div
               v-if="presenterVisible"
@@ -54,7 +59,9 @@
           <button
             type="button"
             class="rounded-xl p-1.5 text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600"
-            :aria-label="expanded ? `Collapse ${kindLabel} block` : `Expand ${kindLabel} block`"
+            :aria-label="
+              expanded ? `Collapse ${kindLabel} block` : `Expand ${kindLabel} block`
+            "
             @click="emit('toggle')"
           >
             <ChevronDown
@@ -69,15 +76,23 @@
       <div v-if="expanded" class="space-y-6 p-6">
         <slot />
       </div>
+      <div
+        v-if="expanded && $slots.footer"
+        class="rounded-b-xl border-t border-gray-200 bg-gray-50 px-4 py-3"
+      >
+        <slot name="footer" />
+      </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import type { Component } from 'vue';
 import { ChevronDown, GripVertical, Monitor, Trash2, User } from '@lucide/vue';
 
 defineProps<{
   title: string;
+  kindIcon: Component;
   expanded: boolean;
   presenterVisible: boolean;
   personalVisible: boolean;
diff --git a/src/frontend/stories/components/chapter-blocks/chapter-block-utils.ts b/src/frontend/stories/components/chapter-blocks/chapter-block-utils.ts
index 9d974970..663d2c60 100644
--- a/src/frontend/stories/components/chapter-blocks/chapter-block-utils.ts
+++ b/src/frontend/stories/components/chapter-blocks/chapter-block-utils.ts
@@ -11,6 +11,7 @@ export const DEFAULT_BLOCK_STYLE = 'default';
 const defaultVisibility = {
   presenter: true,
   personal: true,
+  inNavigation: true,
   hidden: false,
 };
 
diff --git a/src/frontend/stories/components/chapter-blocks/chapter-block-visibility.vue b/src/frontend/stories/components/chapter-blocks/chapter-block-visibility.vue
index a5a0e0cf..093f91e7 100644
--- a/src/frontend/stories/components/chapter-blocks/chapter-block-visibility.vue
+++ b/src/frontend/stories/components/chapter-blocks/chapter-block-visibility.vue
@@ -1,36 +1,27 @@
 <template>
-  <section class="rounded-xl border border-gray-200 bg-gray-50 p-4">
-    <legend class="input-label mb-3">Visibility</legend>
-    <div class="flex items-center gap-6">
-      <label
-        v-for="option in visibilityOptions"
-        :key="option.key"
-        class="flex cursor-pointer items-center gap-3"
-      >
-        <input
-          type="checkbox"
-          class="size-[22px] rounded border-gray-300 text-studio-forest focus:ring-blue-500"
-          :checked="modelValue[option.key]"
-          @change="
-            updateVisibility(option.key, ($event.target as HTMLInputElement).checked)
-          "
-        />
-        <div class="flex items-center gap-2 rounded" :class="option.iconBackgroundClass">
-          <component
-            :is="option.icon"
-            class="size-[14px] text-studio-forest"
-            aria-hidden="true"
-          />
-        </div>
-        <span class="text-sm font-medium text-gray-900">{{ option.label }}</span>
-      </label>
-    </div>
-  </section>
+  <div class="flex flex-wrap items-center gap-2">
+    <span class="text-sm text-gray-500">Visible to</span>
+    <span class="h-4 w-px shrink-0 bg-gray-300" aria-hidden="true" />
+    <button
+      v-for="option in visibilityOptions"
+      :key="option.key"
+      type="button"
+      class="inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-sm font-medium transition-colors"
+      :class="
+        modelValue[option.key] ? option.activeClasses : option.inactiveClasses
+      "
+      :aria-pressed="modelValue[option.key]"
+      @click="toggleVisibility(option.key)"
+    >
+      <component :is="option.icon" class="size-[14px]" aria-hidden="true" />
+      {{ option.label }}
+    </button>
+  </div>
 </template>
 
 <script setup lang="ts">
 import type { Component } from 'vue';
-import { EyeOff, Monitor, User } from '@lucide/vue';
+import { EyeOff, Monitor, Send, User } from '@lucide/vue';
 
 import type { ChapterBlockVisibility } from '../../../../types';
 
@@ -42,33 +33,44 @@ const emit = defineEmits<{
   'update:modelValue': [value: ChapterBlockVisibility];
 }>();
 
-const updateVisibility = (key: keyof ChapterBlockVisibility, checked: boolean) => {
-  emit('update:modelValue', { ...props.modelValue, [key]: checked });
+const toggleVisibility = (key: keyof ChapterBlockVisibility) => {
+  emit('update:modelValue', { ...props.modelValue, [key]: !props.modelValue[key] });
 };
 
 const visibilityOptions: {
   key: keyof ChapterBlockVisibility;
   label: string;
   icon: Component;
-  iconBackgroundClass: string;
+  activeClasses: string;
+  inactiveClasses: string;
 }[] = [
   {
     key: 'presenter',
     label: 'Presenter',
     icon: Monitor,
-    iconBackgroundClass: 'bg-studio-yellow p-[5px]',
+    activeClasses: 'bg-studio-yellow text-studio-forest',
+    inactiveClasses: 'border border-gray-200 bg-white text-gray-400',
   },
   {
     key: 'personal',
     label: 'Personal',
     icon: User,
-    iconBackgroundClass: 'bg-studio-lime p-[5px]',
+    activeClasses: 'bg-studio-lime text-studio-forest',
+    inactiveClasses: 'border border-gray-200 bg-white text-gray-400',
+  },
+  {
+    key: 'inNavigation',
+    label: 'In navigation',
+    icon: Send,
+    activeClasses: 'bg-studio-forest text-white',
+    inactiveClasses: 'border border-gray-200 bg-white text-gray-400',
   },
   {
     key: 'hidden',
     label: 'Hidden',
     icon: EyeOff,
-    iconBackgroundClass: 'bg-red-200 p-[5px]',
+    activeClasses: 'bg-error-light text-error',
+    inactiveClasses: 'border border-gray-200 bg-white text-gray-400',
   },
 ];
 </script>
diff --git a/src/frontend/stories/components/chapter-blocks/chapter-content-block-card.vue b/src/frontend/stories/components/chapter-blocks/chapter-content-block-card.vue
index 0a09e88a..1ee57764 100644
--- a/src/frontend/stories/components/chapter-blocks/chapter-content-block-card.vue
+++ b/src/frontend/stories/components/chapter-blocks/chapter-content-block-card.vue
@@ -1,6 +1,7 @@
 <template>
   <ChapterBlockCardShell
     :title="blockTitle"
+    :kind-icon="LayoutList"
     :expanded="expanded"
     :presenter-visible="block.visibility.presenter"
     :personal-visible="block.visibility.personal"
@@ -87,8 +88,6 @@
       @update:model-value="updateField('video', $event)"
     />
 
-    <ChapterBlockVisibility v-model="visibilityModel" />
-
     <div
       v-if="block.showLeadersNotes"
       class="rounded-xl border border-studio-yellow/60 bg-studio-yellow/30 p-4"
@@ -129,6 +128,10 @@
     >
       Add Leaders Notes
     </button>
+
+    <template #footer>
+      <ChapterBlockVisibility v-model="visibilityModel" />
+    </template>
   </ChapterBlockCardShell>
 </template>
 
@@ -143,6 +146,7 @@ import {
   Star,
   Trash2,
   Video,
+  LayoutList,
 } from '@lucide/vue';
 
 import type { ResourceType, ChapterContentBlock } from '../../../../types';
diff --git a/src/frontend/stories/components/chapter-blocks/chapter-scripture-block-card.vue b/src/frontend/stories/components/chapter-blocks/chapter-scripture-block-card.vue
index c2b172f2..60b08304 100644
--- a/src/frontend/stories/components/chapter-blocks/chapter-scripture-block-card.vue
+++ b/src/frontend/stories/components/chapter-blocks/chapter-scripture-block-card.vue
@@ -1,6 +1,7 @@
 <template>
   <ChapterBlockCardShell
     :title="blockTitle"
+    :kind-icon="BookMarked"
     :expanded="expanded"
     :presenter-visible="block.visibility.presenter"
     :personal-visible="block.visibility.personal"
@@ -45,8 +46,6 @@
       @update:model-value="updateField('scripture', $event)"
     />
 
-    <ChapterBlockVisibility v-model="visibilityModel" />
-
     <div
       v-if="block.showLeadersNotes"
       class="rounded-xl border border-studio-yellow/60 bg-studio-yellow/30 p-4"
@@ -87,12 +86,16 @@
     >
       Add Leaders Notes
     </button>
+
+    <template #footer>
+      <ChapterBlockVisibility v-model="visibilityModel" />
+    </template>
   </ChapterBlockCardShell>
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue';
-import { Crown, Trash2 } from '@lucide/vue';
+import { BookMarked, Crown, Trash2 } from '@lucide/vue';
 
 import type { ChapterScriptureBlock } from '../../../../types';
 import ChapterBlockCardShell from './chapter-block-card-shell.vue';
diff --git a/src/frontend/stories/components/chapter-blocks/chapter-title-block-card.vue b/src/frontend/stories/components/chapter-blocks/chapter-title-block-card.vue
index 96f0b685..be07f835 100644
--- a/src/frontend/stories/components/chapter-blocks/chapter-title-block-card.vue
+++ b/src/frontend/stories/components/chapter-blocks/chapter-title-block-card.vue
@@ -1,6 +1,7 @@
 <template>
   <ChapterBlockCardShell
     :title="blockTitle"
+    :kind-icon="PencilLine"
     :expanded="expanded"
     :presenter-visible="block.visibility.presenter"
     :personal-visible="block.visibility.personal"
@@ -51,7 +52,7 @@
     </div>
 
     <ChapterBlockImageField
-      :model-value="block.coverImage"
+      :model-value="block.coverImage ?? ''"
       :block-id="block.id"
       label="Cover Image (Optional)"
       @update:model-value="updateField('coverImage', $event)"
@@ -64,14 +65,16 @@
       @update:model-value="updateField('style', $event)"
     />
 
-    <ChapterBlockVisibility v-model="visibilityModel" />
+    <template #footer>
+      <ChapterBlockVisibility v-model="visibilityModel" />
+    </template>
   </ChapterBlockCardShell>
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue';
 import type { Component } from 'vue';
-import { Star } from '@lucide/vue';
+import { PencilLine, Star } from '@lucide/vue';
 
 import type { ChapterTitleBlock } from '../../../../types';
 import RichListbox from '../../../shared/rich-listbox.vue';
diff --git a/src/frontend/stories/components/chapter-edit-blocks.story.vue b/src/frontend/stories/components/chapter-edit-blocks.story.vue
index 0caa41df..0458b535 100644
--- a/src/frontend/stories/components/chapter-edit-blocks.story.vue
+++ b/src/frontend/stories/components/chapter-edit-blocks.story.vue
@@ -75,7 +75,7 @@ const multipleBlocks = ref<ChapterBlock[]>([
     style: 'emphasis',
     blockType: 'text',
     content: 'Key takeaways from today.',
-    visibility: { presenter: true, personal: false, hidden: false },
+    visibility: { presenter: true, personal: false, inNavigation: true, hidden: false },
   },
   {
     ...createEmptyContentBlock(),
diff --git a/src/frontend/stories/components/chapter-edit-details.vue b/src/frontend/stories/components/chapter-edit-details.vue
index a82b5357..b5c30583 100644
--- a/src/frontend/stories/components/chapter-edit-details.vue
+++ b/src/frontend/stories/components/chapter-edit-details.vue
@@ -1,10 +1,14 @@
 <template>
-  <div class="form-panel space-y-6">
+  <div
+    class="flex flex-col gap-y-2 rounded-xl border border-gray-200 bg-white px-6 pb-11"
+  >
     <StringField :field="numberField" :is-nested="true" />
     <StringField :field="titleField" :is-nested="true" />
     <MarkdownField :field="descriptionField" :is-nested="true" />
     <ImageField :field="coverImageField" :is-nested="true" />
-    <AudioField :field="devotionAudioField" :is-nested="true" />
+    <div class="mt-4">
+      <AudioField :field="devotionAudioField" :is-nested="true" />
+    </div>
   </div>
 </template>
 
@@ -23,23 +27,19 @@ const props = defineProps<{
 
 const chapterLabel = computed(() => props.chapterType?.trim() || 'Chapter');
 
-const numberField = computed(
-  (): FieldSpec => ({
-    name: 'number',
-    label: `${chapterLabel.value} Number`,
-    widget: 'string',
-    placeholderText: 'e.g., 01',
-  }),
-);
+const numberField = computed((): FieldSpec => ({
+  name: 'number',
+  label: `${chapterLabel.value} Number`,
+  widget: 'string',
+  placeholderText: 'e.g., 01',
+}));
 
-const titleField = computed(
-  (): FieldSpec => ({
-    name: 'title',
-    label: `${chapterLabel.value} Title`,
-    widget: 'string',
-    placeholderText: 'e.g., Is there more to life than this?',
-  }),
-);
+const titleField = computed((): FieldSpec => ({
+  name: 'title',
+  label: `${chapterLabel.value} Title`,
+  widget: 'string',
+  placeholderText: 'e.g., Is there more to life than this?',
+}));
 
 const descriptionField: FieldSpec = {
   name: 'description',
diff --git a/src/frontend/test/mocks.ts b/src/frontend/test/mocks.ts
index a8f47c50..dc451aef 100644
--- a/src/frontend/test/mocks.ts
+++ b/src/frontend/test/mocks.ts
@@ -4600,7 +4600,7 @@ export const sampleMixedChapterBlocks: ChapterBlock[] = [
     style: 'emphasis',
     content:
       '**Key takeaways:** Jesus is the eternal Word; belief in him brings eternal life.',
-    visibility: { presenter: true, personal: false, hidden: false },
+    visibility: { presenter: true, personal: false, inNavigation: true, hidden: false },
   },
   {
     ...createEmptyContentBlock(),
diff --git a/src/types.ts b/src/types.ts
index b3044e98..13ed4f7c 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -239,6 +239,7 @@ export interface StorySection {
 export interface ChapterBlockVisibility {
   presenter: boolean;
   personal: boolean;
+  inNavigation: boolean;
   hidden: boolean;
 }
 

From 7f6d311787b31ee0a96d132446d5896d94fadf19 Mon Sep 17 00:00:00 2001
From: Timothy Koech <timosville@gmail.com>
Date: Thu, 13 Aug 2026 13:51:09 +0300
Subject: [PATCH 06/13] increment: enhance visibility handling in chapter block
 components by adding navigation visibility and updating related props

---
 .../chapter-block-card-shell.vue              |  9 +++++-
 .../chapter-block-visibility.vue              | 29 +++++++++++++++----
 .../chapter-content-block-card.vue            |  5 ++--
 .../chapter-scripture-block-card.vue          |  5 ++--
 .../chapter-title-block-card.vue              |  5 ++--
 5 files changed, 40 insertions(+), 13 deletions(-)

diff --git a/src/frontend/stories/components/chapter-blocks/chapter-block-card-shell.vue b/src/frontend/stories/components/chapter-blocks/chapter-block-card-shell.vue
index aa1b8344..d73c1f53 100644
--- a/src/frontend/stories/components/chapter-blocks/chapter-block-card-shell.vue
+++ b/src/frontend/stories/components/chapter-blocks/chapter-block-card-shell.vue
@@ -45,6 +45,12 @@
             >
               <User class="size-[14px] text-studio-forest" aria-hidden="true" />
             </div>
+            <div
+              v-if="navigationVisible"
+              class="flex shrink-0 items-center rounded bg-studio-forest p-[5px]"
+            >
+              <Send class="size-[14px] text-white" aria-hidden="true" />
+            </div>
           </button>
         </div>
         <div class="flex items-center justify-center gap-1">
@@ -88,7 +94,7 @@
 
 <script setup lang="ts">
 import type { Component } from 'vue';
-import { ChevronDown, GripVertical, Monitor, Trash2, User } from '@lucide/vue';
+import { ChevronDown, GripVertical, Monitor, Send, Trash2, User } from '@lucide/vue';
 
 defineProps<{
   title: string;
@@ -96,6 +102,7 @@ defineProps<{
   expanded: boolean;
   presenterVisible: boolean;
   personalVisible: boolean;
+  navigationVisible: boolean;
   kindLabel: string;
 }>();
 
diff --git a/src/frontend/stories/components/chapter-blocks/chapter-block-visibility.vue b/src/frontend/stories/components/chapter-blocks/chapter-block-visibility.vue
index 093f91e7..882f1e36 100644
--- a/src/frontend/stories/components/chapter-blocks/chapter-block-visibility.vue
+++ b/src/frontend/stories/components/chapter-blocks/chapter-block-visibility.vue
@@ -8,9 +8,9 @@
       type="button"
       class="inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-sm font-medium transition-colors"
       :class="
-        modelValue[option.key] ? option.activeClasses : option.inactiveClasses
+        isActive(option.key) ? option.activeClasses : option.inactiveClasses
       "
-      :aria-pressed="modelValue[option.key]"
+      :aria-pressed="isActive(option.key)"
       @click="toggleVisibility(option.key)"
     >
       <component :is="option.icon" class="size-[14px]" aria-hidden="true" />
@@ -34,9 +34,26 @@ const emit = defineEmits<{
 }>();
 
 const toggleVisibility = (key: keyof ChapterBlockVisibility) => {
+  if (key !== 'hidden' && props.modelValue.hidden) {
+    emit('update:modelValue', { ...props.modelValue, hidden: false, [key]: true });
+    return;
+  }
   emit('update:modelValue', { ...props.modelValue, [key]: !props.modelValue[key] });
 };
 
+const isActive = (key: keyof ChapterBlockVisibility) => {
+  if (key === 'hidden') {
+    return (
+      props.modelValue.hidden ||
+      (!props.modelValue.presenter && !props.modelValue.personal && !props.modelValue.inNavigation)
+    );
+  }
+  if (props.modelValue.hidden) {
+    return false;
+  }
+  return props.modelValue[key];
+};
+
 const visibilityOptions: {
   key: keyof ChapterBlockVisibility;
   label: string;
@@ -49,28 +66,28 @@ const visibilityOptions: {
     label: 'Presenter',
     icon: Monitor,
     activeClasses: 'bg-studio-yellow text-studio-forest',
-    inactiveClasses: 'border border-gray-200 bg-white text-gray-400',
+    inactiveClasses: 'bg-studio-yellow/20 text-studio-forest',
   },
   {
     key: 'personal',
     label: 'Personal',
     icon: User,
     activeClasses: 'bg-studio-lime text-studio-forest',
-    inactiveClasses: 'border border-gray-200 bg-white text-gray-400',
+    inactiveClasses: 'bg-studio-lime/20 text-studio-forest',
   },
   {
     key: 'inNavigation',
     label: 'In navigation',
     icon: Send,
     activeClasses: 'bg-studio-forest text-white',
-    inactiveClasses: 'border border-gray-200 bg-white text-gray-400',
+    inactiveClasses: 'bg-studio-forest/20 text-white',
   },
   {
     key: 'hidden',
     label: 'Hidden',
     icon: EyeOff,
     activeClasses: 'bg-error-light text-error',
-    inactiveClasses: 'border border-gray-200 bg-white text-gray-400',
+    inactiveClasses: 'bg-error-light/20 text-error',
   },
 ];
 </script>
diff --git a/src/frontend/stories/components/chapter-blocks/chapter-content-block-card.vue b/src/frontend/stories/components/chapter-blocks/chapter-content-block-card.vue
index 1ee57764..f5acecbd 100644
--- a/src/frontend/stories/components/chapter-blocks/chapter-content-block-card.vue
+++ b/src/frontend/stories/components/chapter-blocks/chapter-content-block-card.vue
@@ -3,8 +3,9 @@
     :title="blockTitle"
     :kind-icon="LayoutList"
     :expanded="expanded"
-    :presenter-visible="block.visibility.presenter"
-    :personal-visible="block.visibility.personal"
+    :presenter-visible="block.visibility.presenter && !block.visibility.hidden"
+    :personal-visible="block.visibility.personal && !block.visibility.hidden"
+    :navigation-visible="block.visibility.inNavigation && !block.visibility.hidden"
     kind-label="content"
     @toggle="emit('toggle')"
     @delete="emit('delete')"
diff --git a/src/frontend/stories/components/chapter-blocks/chapter-scripture-block-card.vue b/src/frontend/stories/components/chapter-blocks/chapter-scripture-block-card.vue
index 60b08304..5bbd413d 100644
--- a/src/frontend/stories/components/chapter-blocks/chapter-scripture-block-card.vue
+++ b/src/frontend/stories/components/chapter-blocks/chapter-scripture-block-card.vue
@@ -3,8 +3,9 @@
     :title="blockTitle"
     :kind-icon="BookMarked"
     :expanded="expanded"
-    :presenter-visible="block.visibility.presenter"
-    :personal-visible="block.visibility.personal"
+    :presenter-visible="block.visibility.presenter && !block.visibility.hidden"
+    :personal-visible="block.visibility.personal && !block.visibility.hidden"
+    :navigation-visible="block.visibility.inNavigation && !block.visibility.hidden"
     kind-label="scripture"
     @toggle="emit('toggle')"
     @delete="emit('delete')"
diff --git a/src/frontend/stories/components/chapter-blocks/chapter-title-block-card.vue b/src/frontend/stories/components/chapter-blocks/chapter-title-block-card.vue
index be07f835..13fc773e 100644
--- a/src/frontend/stories/components/chapter-blocks/chapter-title-block-card.vue
+++ b/src/frontend/stories/components/chapter-blocks/chapter-title-block-card.vue
@@ -3,8 +3,9 @@
     :title="blockTitle"
     :kind-icon="PencilLine"
     :expanded="expanded"
-    :presenter-visible="block.visibility.presenter"
-    :personal-visible="block.visibility.personal"
+    :presenter-visible="block.visibility.presenter && !block.visibility.hidden"
+    :personal-visible="block.visibility.personal && !block.visibility.hidden"
+    :navigation-visible="block.visibility.inNavigation && !block.visibility.hidden"
     kind-label="title"
     @toggle="emit('toggle')"
     @delete="emit('delete')"

From 8d3c861f45d0865157af3a57693d3601c23bd7f3 Mon Sep 17 00:00:00 2001
From: Timothy Koech <timosville@gmail.com>
Date: Thu, 13 Aug 2026 15:30:24 +0300
Subject: [PATCH 07/13] increment: introduce ChapterContentItem type and
 enhance chapter block functionality with new content item handling

---
 .../fields/attachments/attachment-field.vue   |   1 +
 src/frontend/stories/chapter-edit.story.vue   |  27 ++
 src/frontend/stories/chapter-edit.vue         |   6 +-
 .../chapter-add-leaders-notes-button.vue      |  16 ++
 .../chapter-block-image-field.vue             |  17 +-
 .../chapter-block-rich-text-editor.vue        |   2 +-
 .../chapter-block-role-options.ts             | 104 +++++++
 .../chapter-block-scripture-field.vue         | 107 ++++++-
 .../chapter-block-style-options.ts            |  24 ++
 .../chapter-blocks/chapter-block-utils.ts     |  85 +++++-
 .../chapter-block-video-field.vue             |  13 +-
 .../chapter-block-visibility.vue              |  17 +-
 .../chapter-content-add-items-toolbar.vue     |  48 ++++
 .../chapter-content-block-card.vue            | 266 ++++++++----------
 .../chapter-dashed-add-button.vue             |  32 +++
 .../chapter-scripture-block-card.vue          |  10 +-
 .../chapter-title-block-card.vue              |  39 +--
 .../components/chapter-edit-blocks.story.vue  |  44 ++-
 .../components/chapter-edit-blocks.vue        |   2 +
 src/frontend/test/mocks.ts                    |  41 ++-
 src/types.ts                                  |  15 +-
 21 files changed, 670 insertions(+), 246 deletions(-)
 create mode 100644 src/frontend/stories/components/chapter-blocks/chapter-add-leaders-notes-button.vue
 create mode 100644 src/frontend/stories/components/chapter-blocks/chapter-block-role-options.ts
 create mode 100644 src/frontend/stories/components/chapter-blocks/chapter-block-style-options.ts
 create mode 100644 src/frontend/stories/components/chapter-blocks/chapter-content-add-items-toolbar.vue
 create mode 100644 src/frontend/stories/components/chapter-blocks/chapter-dashed-add-button.vue

diff --git a/src/frontend/fields/attachments/attachment-field.vue b/src/frontend/fields/attachments/attachment-field.vue
index a573203a..2e2de99e 100644
--- a/src/frontend/fields/attachments/attachment-field.vue
+++ b/src/frontend/fields/attachments/attachment-field.vue
@@ -3,6 +3,7 @@
     <div class="relative">
       <div class="relative">
         <label
+          v-if="field.label"
           class="input-label"
           :class="{ 'text-error': hasError, 'text-gray-600': isReadOnly }"
           >{{ field.label }}</label
diff --git a/src/frontend/stories/chapter-edit.story.vue b/src/frontend/stories/chapter-edit.story.vue
index 2e95b3bb..73a0f2de 100644
--- a/src/frontend/stories/chapter-edit.story.vue
+++ b/src/frontend/stories/chapter-edit.story.vue
@@ -53,6 +53,23 @@
       />
     </Variant>
 
+    <Variant title="Devotion" :setup-app="loadDevotionBlocksTab">
+      <ChapterEdit
+        :config="sharedProps.config"
+        :user="sharedProps.user"
+        :language="sharedProps.language"
+        :errors="{}"
+        :bookmarks="sharedProps.bookmarks"
+        :draft="sampleChapterDraft"
+        :bundle="sampleDevotionChapterBundle"
+        :story="chapterEditDevotionStory"
+        :available-resources="availableResources"
+        :has-edit-review="false"
+        :last-published="''"
+        :providers="mockResourceProviders"
+      />
+    </Variant>
+
     <Variant title="Resources tab" :setup-app="loadResourcesTab">
       <ChapterEdit
         :config="sharedProps.config"
@@ -147,11 +164,13 @@ import {
   adminUser,
   availableResources,
   chapterEditStory,
+  chapterEditDevotionStory,
   chapterEditValidationErrors,
   editorUser,
   emptyChapterBundle,
   mockResourceProviders,
   sampleChapterBundle,
+  sampleDevotionChapterBundle,
   sampleChapterDraft,
   sampleChapterDraftSubmitted,
   sharedProps,
@@ -181,6 +200,13 @@ const loadBlocksTab: StoryHandler = (context): void => {
   window.history.replaceState({}, '', url.toString());
 };
 
+const loadDevotionBlocksTab: StoryHandler = (context): void => {
+  miniSidebar(context);
+  const url = new URL(window.location.href);
+  url.searchParams.set('tab', 'Blocks');
+  window.history.replaceState({}, '', url.toString());
+};
+
 const loadResourcesTab: StoryHandler = (context): void => {
   miniSidebar(context);
   const url = new URL(window.location.href);
@@ -207,6 +233,7 @@ Tabbed chapter create/edit page with Details, Blocks, and Resources. Includes dr
 - **Create** — empty chapter with Create Chapter action
 - **Edit** — populated chapter with Publish changes (no edit-review)
 - **Blocks tab** — opens directly on the Blocks tab
+- **Devotion** — Devotion chapter type with sample blocks, opens on the Blocks tab
 - **Resources tab** — opens directly on the Resources tab
 - **Validation errors on tabs** — error indicators on Details, Blocks, and Resources tabs
 - **Edit review: Submit** — editor with edit-review sees Submit
diff --git a/src/frontend/stories/chapter-edit.vue b/src/frontend/stories/chapter-edit.vue
index 2235a1c6..5dd88b63 100644
--- a/src/frontend/stories/chapter-edit.vue
+++ b/src/frontend/stories/chapter-edit.vue
@@ -43,6 +43,7 @@
             <ChapterEditBlocks
               v-model:blocks="blocks"
               :video-collection-id="props.config.videoCollectionId"
+              :chapter-type="props.story.chapterType"
             />
           </div>
           <div v-if="currentChapterTab === 'Resources'" dir="ltr">
@@ -87,6 +88,7 @@ import {
   chapterEditTabHasError,
   firstChapterEditTabWithError,
 } from './chapter-edit-tab-errors';
+import { normalizeChapterBlocks } from './components/chapter-blocks/chapter-block-utils';
 
 const resolveChapterTab = (value: string | null, tabs: NavigationPaneTab[]): string => {
   if (!value) return 'Details';
@@ -119,7 +121,9 @@ const model = useModelStore();
 model.setModel(props.bundle);
 
 const blocks = ref<ChapterBlock[]>(
-  props.bundle.blocks?.length ? [...props.bundle.blocks] : [],
+  props.bundle.blocks?.length
+    ? normalizeChapterBlocks([...props.bundle.blocks])
+    : [],
 );
 const attachedResources = ref<ResourceItem[]>([...(props.bundle.resources ?? [])]);
 const availableResources = props.availableResources ?? [];
diff --git a/src/frontend/stories/components/chapter-blocks/chapter-add-leaders-notes-button.vue b/src/frontend/stories/components/chapter-blocks/chapter-add-leaders-notes-button.vue
new file mode 100644
index 00000000..67d33a83
--- /dev/null
+++ b/src/frontend/stories/components/chapter-blocks/chapter-add-leaders-notes-button.vue
@@ -0,0 +1,16 @@
+<template>
+  <ChapterDashedAddButton @click="$emit('click')">
+    <UserCog class="size-4" aria-hidden="true" />
+    <span>Add Leader Notes</span>
+  </ChapterDashedAddButton>
+</template>
+
+<script setup lang="ts">
+import { UserCog } from '@lucide/vue';
+
+import ChapterDashedAddButton from './chapter-dashed-add-button.vue';
+
+defineEmits<{
+  click: [];
+}>();
+</script>
diff --git a/src/frontend/stories/components/chapter-blocks/chapter-block-image-field.vue b/src/frontend/stories/components/chapter-blocks/chapter-block-image-field.vue
index 1ac12d42..b978b601 100644
--- a/src/frontend/stories/components/chapter-blocks/chapter-block-image-field.vue
+++ b/src/frontend/stories/components/chapter-blocks/chapter-block-image-field.vue
@@ -13,9 +13,11 @@ const props = withDefaults(
   defineProps<{
     modelValue: string;
     blockId: string;
+    itemId?: string;
     label?: string;
   }>(),
   {
+    itemId: undefined,
     label: 'Cover Image',
   },
 );
@@ -26,12 +28,15 @@ const emit = defineEmits<{
 
 const model = useModelStore();
 const rootPath = computed(() => `_chapterBlocks.${props.blockId}`);
-const coverImagePath = computed(() => `${rootPath.value}.coverImage`);
+const fieldName = computed(() =>
+  props.itemId ? `items.${props.itemId}.imageUrl` : 'coverImage',
+);
+const fieldPath = computed(() => `${rootPath.value}.${fieldName.value}`);
 
 const fieldSpec = computed(
   (): FieldSpec => ({
     label: props.label,
-    name: 'coverImage',
+    name: fieldName.value,
     widget: 'image',
     description: 'PNG, JPG • Recommended 1280x720px',
     extensions: ['.jpeg', '.jpg', '.png'],
@@ -39,20 +44,20 @@ const fieldSpec = computed(
   }),
 );
 
-const readCoverImage = (): string => model.getField(coverImagePath.value, '') as string;
+const readValue = (): string => model.getField(fieldPath.value, '') as string;
 
 watch(
   () => props.modelValue,
   (value) => {
-    const current = readCoverImage();
+    const current = readValue();
     if (current === value) return;
-    model.setField(coverImagePath.value, value);
+    model.setField(fieldPath.value, value);
   },
   { immediate: true },
 );
 
 const unsubscribe = model.$subscribe(() => {
-  const fresh = readCoverImage();
+  const fresh = readValue();
   if (fresh === props.modelValue) return;
   emit('update:modelValue', fresh);
 });
diff --git a/src/frontend/stories/components/chapter-blocks/chapter-block-rich-text-editor.vue b/src/frontend/stories/components/chapter-blocks/chapter-block-rich-text-editor.vue
index adf80e02..79486dfd 100644
--- a/src/frontend/stories/components/chapter-blocks/chapter-block-rich-text-editor.vue
+++ b/src/frontend/stories/components/chapter-blocks/chapter-block-rich-text-editor.vue
@@ -2,7 +2,7 @@
   <div>
     <label v-if="label" class="input-label mb-2 block">{{ label }}</label>
     <div class="mt-1">
-      <div class="cm-s-easymde rounded-xl border border-gray-200">
+      <div class="cm-s-easymde rounded-xl">
         <textarea ref="textArea" data-testid="block-rich-text-editor" />
       </div>
     </div>
diff --git a/src/frontend/stories/components/chapter-blocks/chapter-block-role-options.ts b/src/frontend/stories/components/chapter-blocks/chapter-block-role-options.ts
new file mode 100644
index 00000000..6f324e64
--- /dev/null
+++ b/src/frontend/stories/components/chapter-blocks/chapter-block-role-options.ts
@@ -0,0 +1,104 @@
+import {
+  BookMarked,
+  BookOpen,
+  Eye,
+  FileText,
+  HandHeart,
+  Heart,
+  Lightbulb,
+  ShieldOff,
+} from '@lucide/vue';
+
+import type { RichListboxOption } from '../../../shared/rich-listbox.vue';
+
+export type BlockRoleOption = RichListboxOption;
+
+const fallbackBlockRoleOptions: BlockRoleOption[] = [
+  {
+    value: 'summary',
+    label: 'Summary',
+    description: 'Recap or overview of the session',
+    icon: BookOpen,
+  },
+  {
+    value: 'introduction',
+    label: 'Introduction',
+    description: 'Opening context for the content',
+    icon: BookOpen,
+  },
+  {
+    value: 'reflection',
+    label: 'Reflection',
+    description: 'Prompt for personal reflection',
+    icon: BookOpen,
+  },
+];
+
+const devotionBlockRoleOptions: BlockRoleOption[] = [
+  {
+    value: 'introduction',
+    label: 'Introduction',
+    description: 'Opens the devotion and sets the context',
+    icon: BookOpen,
+  },
+  {
+    value: 'scripture',
+    label: 'Scripture',
+    description: 'A Bible passage central to the devotion',
+    icon: BookMarked,
+  },
+  {
+    value: 'commentary',
+    label: 'Commentary',
+    description:
+      'Explanation, interpretation, context, or theological reflection on the Scripture',
+    icon: Lightbulb,
+  },
+  {
+    value: 'reflection',
+    label: 'Reflection',
+    description: 'A moment for personal reflection',
+    icon: Eye,
+  },
+  {
+    value: 'prayer',
+    label: 'Prayer',
+    description: 'A guided or prompted prayer element',
+    icon: Heart,
+  },
+  {
+    value: 'response',
+    label: 'Response',
+    description: 'A call to act or respond to what was shared',
+    icon: HandHeart,
+  },
+  {
+    value: 'conclusion',
+    label: 'Conclusion',
+    description: 'Closes and summarises the devotion',
+    icon: FileText,
+  },
+  {
+    value: 'unclassified',
+    label: 'Unclassified',
+    description: 'For legacy content or where you are unsure of the role',
+    icon: ShieldOff,
+  },
+];
+
+const normalizeChapterType = (chapterType?: string | null): string =>
+  chapterType?.trim().toLowerCase() ?? '';
+
+export function isDevotionChapterType(chapterType?: string | null): boolean {
+  return normalizeChapterType(chapterType) === 'devotion';
+}
+
+export function getBlockRoleOptions(chapterType?: string | null): BlockRoleOption[] {
+  return isDevotionChapterType(chapterType)
+    ? devotionBlockRoleOptions
+    : fallbackBlockRoleOptions;
+}
+
+export function getDefaultBlockRole(chapterType?: string | null): string {
+  return isDevotionChapterType(chapterType) ? 'introduction' : 'summary';
+}
diff --git a/src/frontend/stories/components/chapter-blocks/chapter-block-scripture-field.vue b/src/frontend/stories/components/chapter-blocks/chapter-block-scripture-field.vue
index 3147003a..bc2ac0d5 100644
--- a/src/frontend/stories/components/chapter-blocks/chapter-block-scripture-field.vue
+++ b/src/frontend/stories/components/chapter-blocks/chapter-block-scripture-field.vue
@@ -1,22 +1,63 @@
 <template>
-  <ScriptureField :field="fieldSpec" :root-path="rootPath" :is-nested="true" />
+  <ScriptureField
+    v-if="!useCustomLabels"
+    :field="fieldSpec"
+    :root-path="rootPath"
+    :is-nested="true"
+  />
+  <div v-else class="space-y-4">
+    <div>
+      <label :for="referenceInputId" class="input-label">{{ referenceLabel }}</label>
+      <input
+        :id="referenceInputId"
+        v-model="reference"
+        type="text"
+        :placeholder="referencePlaceholder"
+        class="input-field mt-[2px]"
+        @input="emitScripture"
+        @blur="lookup"
+      />
+    </div>
+    <div>
+      <label :for="passageInputId" class="input-label">{{ passageLabel }}</label>
+      <textarea
+        :id="passageInputId"
+        v-model="verse"
+        rows="6"
+        :placeholder="passagePlaceholder"
+        class="input-field mt-[2px] min-h-[120px] resize-y"
+        @input="emitScripture"
+      />
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { computed, onBeforeUnmount, watch } from 'vue';
+import { computed, onBeforeUnmount, ref, watch } from 'vue';
 
 import type { FieldSpec, Scripture } from '../../../../types';
 import ScriptureField from '../../../fields/scripture-field.vue';
-import { useModelStore } from '../../../store';
+import { parseReference } from '../../../shared/helpers';
+import { useModelStore, useSharedStore, useWidgetsStore } from '../../../store';
 
 const props = withDefaults(
   defineProps<{
     modelValue: Scripture;
     blockId: string;
+    itemId?: string;
     label?: string;
+    referenceLabel?: string;
+    passageLabel?: string;
+    referencePlaceholder?: string;
+    passagePlaceholder?: string;
   }>(),
   {
+    itemId: undefined,
     label: 'Scripture',
+    referenceLabel: undefined,
+    passageLabel: undefined,
+    referencePlaceholder: 'John 1 or John 1:3-4',
+    passagePlaceholder: 'Verse',
   },
 );
 
@@ -25,13 +66,23 @@ const emit = defineEmits<{
 }>();
 
 const model = useModelStore();
+const shared = useSharedStore();
+const provider = useWidgetsStore().providers.scripture;
 const rootPath = computed(() => `_chapterBlocks.${props.blockId}`);
-const scripturePath = computed(() => `${rootPath.value}.scripture`);
+const fieldName = computed(() =>
+  props.itemId ? `items.${props.itemId}.scripture` : 'scripture',
+);
+const scripturePath = computed(() => `${rootPath.value}.${fieldName.value}`);
+const useCustomLabels = computed(
+  () => Boolean(props.referenceLabel && props.passageLabel),
+);
+const referenceInputId = computed(() => `${props.blockId}-${fieldName.value}-reference`);
+const passageInputId = computed(() => `${props.blockId}-${fieldName.value}-passage`);
 
 const fieldSpec = computed(
   (): FieldSpec => ({
     label: props.label,
-    name: 'scripture',
+    name: fieldName.value,
     widget: 'scripture',
   }),
 );
@@ -39,6 +90,9 @@ const fieldSpec = computed(
 const readScripture = (): Scripture =>
   model.getField(scripturePath.value, { reference: '', verse: '' }) as Scripture;
 
+const reference = ref(props.modelValue.reference);
+const verse = ref(props.modelValue.verse);
+
 const syncPropsToModel = (value: Scripture) => {
   const current = readScripture();
   if (current.reference === value.reference && current.verse === value.verse) {
@@ -54,6 +108,45 @@ const syncPropsToModel = (value: Scripture) => {
   model.setField(scripturePath.value, value);
 };
 
+const emitScripture = () => {
+  const next = { reference: reference.value, verse: verse.value };
+  syncPropsToModel(next);
+  emit('update:modelValue', next);
+};
+
+const lookup = async () => {
+  if (!useCustomLabels.value || !provider?.bibleApiKey || !reference.value.trim()) {
+    return;
+  }
+  if (verse.value.trim()) return;
+
+  const code = parseReference(reference.value);
+  if (code === '') return;
+
+  const query = ['content-type=text', 'include-titles=false'].join('&');
+  const response = await fetch(
+    `https://api.scripture.api.bible/v1/bibles/${shared.bibleVersion}/passages/${code}?${query}`,
+    {
+      headers: {
+        'Content-Type': 'application/json',
+        'api-key': provider.bibleApiKey,
+      },
+    },
+  );
+
+  if (response.status !== 200) return;
+
+  const data = await response.json();
+  verse.value = data.data.content
+    .trim()
+    .replace(/\[(\d+)\]/g, '\n`$1`')
+    .replace(/¶\s/g, '')
+    .replace(/^\n/, '')
+    .replace(/\n\s+\n/g, '\n\n')
+    .replace(/\n+/g, '\n');
+  emitScripture();
+};
+
 watch(
   () => props.blockId,
   () => {
@@ -65,6 +158,8 @@ watch(
 watch(
   () => props.modelValue,
   (value) => {
+    reference.value = value.reference;
+    verse.value = value.verse;
     syncPropsToModel(value);
   },
   { deep: true },
@@ -78,6 +173,8 @@ const unsubscribe = model.$subscribe(() => {
   ) {
     return;
   }
+  reference.value = fresh.reference;
+  verse.value = fresh.verse;
   emit('update:modelValue', { ...fresh });
 });
 
diff --git a/src/frontend/stories/components/chapter-blocks/chapter-block-style-options.ts b/src/frontend/stories/components/chapter-blocks/chapter-block-style-options.ts
new file mode 100644
index 00000000..14e2cf6e
--- /dev/null
+++ b/src/frontend/stories/components/chapter-blocks/chapter-block-style-options.ts
@@ -0,0 +1,24 @@
+import { Bookmark, Star, Tag } from '@lucide/vue';
+
+import type { RichListboxOption } from '../../../shared/rich-listbox.vue';
+
+export const blockStyleOptions: RichListboxOption[] = [
+  {
+    value: 'primary',
+    label: 'Primary',
+    description: 'Main featured content for this block',
+    icon: Star,
+  },
+  {
+    value: 'secondary',
+    label: 'Secondary',
+    description: 'Supporting content that complements the primary',
+    icon: Bookmark,
+  },
+  {
+    value: 'tertiary',
+    label: 'Tertiary',
+    description: 'Supplementary or additional content',
+    icon: Tag,
+  },
+];
diff --git a/src/frontend/stories/components/chapter-blocks/chapter-block-utils.ts b/src/frontend/stories/components/chapter-blocks/chapter-block-utils.ts
index 663d2c60..24324b4c 100644
--- a/src/frontend/stories/components/chapter-blocks/chapter-block-utils.ts
+++ b/src/frontend/stories/components/chapter-blocks/chapter-block-utils.ts
@@ -1,20 +1,29 @@
 import type {
   ChapterBlock,
   ChapterContentBlock,
+  ChapterContentItem,
   ChapterScriptureBlock,
   ChapterTitleBlock,
+  ResourceType,
+  Scripture,
 } from '../../../../types';
 
 export const DEFAULT_BLOCK_ROLE = 'summary';
-export const DEFAULT_BLOCK_STYLE = 'default';
+export const DEFAULT_BLOCK_STYLE = 'primary';
 
 const defaultVisibility = {
-  presenter: true,
-  personal: true,
-  inNavigation: true,
+  presenter: false,
+  personal: false,
+  inNavigation: false,
   hidden: false,
 };
 
+type LegacyChapterContentBlock = ChapterContentBlock & {
+  blockType?: ResourceType;
+  url?: string;
+  video?: { url: string | null };
+};
+
 export function createBlockId(): string {
   return crypto.randomUUID();
 }
@@ -27,14 +36,69 @@ export function createEmptyContentBlock(): ChapterContentBlock {
     displayName: '',
     blockRole: DEFAULT_BLOCK_ROLE,
     style: DEFAULT_BLOCK_STYLE,
-    blockType: 'text',
     content: '',
-    url: '',
-    video: { url: null },
+    items: [],
     visibility: { ...defaultVisibility },
     leadersNotes: '',
-    showLeadersNotes: true,
+    showLeadersNotes: false,
+  };
+}
+
+export function createContentItem(
+  kind: ChapterContentItem['kind'],
+): ChapterContentItem {
+  const id = createBlockId();
+
+  if (kind === 'image') {
+    return { id, kind, imageUrl: '' };
+  }
+
+  if (kind === 'video') {
+    return { id, kind, video: { url: null } };
+  }
+
+  return { id, kind, scripture: { reference: '', verse: '' } };
+}
+
+export function normalizeContentBlock(block: ChapterContentBlock): ChapterContentBlock {
+  if (Array.isArray(block.items)) {
+    return block;
+  }
+
+  const legacy = block as LegacyChapterContentBlock;
+  const items: ChapterContentItem[] = [];
+  let content = block.content ?? '';
+
+  if (legacy.blockType === 'video') {
+    items.push(createContentItem('video'));
+    if (items[0]?.video) {
+      items[0].video = legacy.video ?? { url: null };
+    }
+  } else if (legacy.blockType === 'url' && legacy.url) {
+    content = legacy.url;
+  }
+
+  const normalized: ChapterContentBlock = {
+    id: block.id,
+    kind: 'content',
+    blockName: block.blockName,
+    displayName: block.displayName,
+    blockRole: block.blockRole,
+    style: block.style,
+    content,
+    items,
+    visibility: block.visibility,
+    leadersNotes: block.leadersNotes,
+    showLeadersNotes: block.showLeadersNotes,
   };
+
+  return normalized;
+}
+
+export function normalizeChapterBlocks(blocks: ChapterBlock[]): ChapterBlock[] {
+  return blocks.map((block) =>
+    block.kind === 'content' ? normalizeContentBlock(block) : block,
+  );
 }
 
 export function createEmptyTitleBlock(): ChapterTitleBlock {
@@ -45,7 +109,6 @@ export function createEmptyTitleBlock(): ChapterTitleBlock {
     title: '',
     subtitle: '',
     coverImage: '',
-    style: DEFAULT_BLOCK_STYLE,
     visibility: { ...defaultVisibility },
   };
 }
@@ -56,10 +119,10 @@ export function createEmptyScriptureBlock(): ChapterScriptureBlock {
     kind: 'scripture',
     blockName: '',
     displayName: '',
-    scripture: { reference: '', verse: '' },
+    scripture: { reference: '', verse: '' } satisfies Scripture,
     visibility: { ...defaultVisibility },
     leadersNotes: '',
-    showLeadersNotes: true,
+    showLeadersNotes: false,
   };
 }
 
diff --git a/src/frontend/stories/components/chapter-blocks/chapter-block-video-field.vue b/src/frontend/stories/components/chapter-blocks/chapter-block-video-field.vue
index 6bc613e4..0352dfe8 100644
--- a/src/frontend/stories/components/chapter-blocks/chapter-block-video-field.vue
+++ b/src/frontend/stories/components/chapter-blocks/chapter-block-video-field.vue
@@ -14,9 +14,11 @@ const props = withDefaults(
     modelValue: { url: string | null };
     collectionId: string;
     blockId: string;
+    itemId?: string;
     label?: string;
   }>(),
   {
+    itemId: undefined,
     label: 'Video',
   },
 );
@@ -27,12 +29,15 @@ const emit = defineEmits<{
 
 const model = useModelStore();
 const rootPath = computed(() => `_chapterBlocks.${props.blockId}`);
-const videoPath = computed(() => `${rootPath.value}.video`);
+const fieldName = computed(() =>
+  props.itemId ? `items.${props.itemId}.video` : 'video',
+);
+const fieldPath = computed(() => `${rootPath.value}.${fieldName.value}`);
 
 const fieldSpec = computed(
   (): FieldSpec => ({
     label: props.label,
-    name: 'video',
+    name: fieldName.value,
     widget: 'video',
     description: 'MP4 and MOV files up to 500MB',
     extensions: ['.mp4', '.mov'],
@@ -42,14 +47,14 @@ const fieldSpec = computed(
 );
 
 const readVideo = (): { url: string | null } =>
-  model.getField(videoPath.value, { url: null }) as { url: string | null };
+  model.getField(fieldPath.value, { url: null }) as { url: string | null };
 
 watch(
   () => props.modelValue,
   (value) => {
     const current = readVideo();
     if (current.url === value.url) return;
-    model.setField(videoPath.value, value);
+    model.setField(fieldPath.value, value);
   },
   { immediate: true, deep: true },
 );
diff --git a/src/frontend/stories/components/chapter-blocks/chapter-block-visibility.vue b/src/frontend/stories/components/chapter-blocks/chapter-block-visibility.vue
index 882f1e36..368e109c 100644
--- a/src/frontend/stories/components/chapter-blocks/chapter-block-visibility.vue
+++ b/src/frontend/stories/components/chapter-blocks/chapter-block-visibility.vue
@@ -7,9 +7,7 @@
       :key="option.key"
       type="button"
       class="inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-sm font-medium transition-colors"
-      :class="
-        isActive(option.key) ? option.activeClasses : option.inactiveClasses
-      "
+      :class="isActive(option.key) ? option.activeClasses : option.inactiveClasses"
       :aria-pressed="isActive(option.key)"
       @click="toggleVisibility(option.key)"
     >
@@ -45,7 +43,9 @@ const isActive = (key: keyof ChapterBlockVisibility) => {
   if (key === 'hidden') {
     return (
       props.modelValue.hidden ||
-      (!props.modelValue.presenter && !props.modelValue.personal && !props.modelValue.inNavigation)
+      (!props.modelValue.presenter &&
+        !props.modelValue.personal &&
+        !props.modelValue.inNavigation)
     );
   }
   if (props.modelValue.hidden) {
@@ -66,28 +66,29 @@ const visibilityOptions: {
     label: 'Presenter',
     icon: Monitor,
     activeClasses: 'bg-studio-yellow text-studio-forest',
-    inactiveClasses: 'bg-studio-yellow/20 text-studio-forest',
+    inactiveClasses: 'bg-studio-yellow/20 text-studio-forest border border-studio-yellow',
   },
   {
     key: 'personal',
     label: 'Personal',
     icon: User,
     activeClasses: 'bg-studio-lime text-studio-forest',
-    inactiveClasses: 'bg-studio-lime/20 text-studio-forest',
+    inactiveClasses: 'bg-studio-lime/20 text-studio-forest border border-studio-lime',
   },
   {
     key: 'inNavigation',
     label: 'In navigation',
     icon: Send,
     activeClasses: 'bg-studio-forest text-white',
-    inactiveClasses: 'bg-studio-forest/20 text-white',
+    inactiveClasses:
+      'bg-studio-forest/20 text-studio-forest border border-studio-forest ',
   },
   {
     key: 'hidden',
     label: 'Hidden',
     icon: EyeOff,
     activeClasses: 'bg-error-light text-error',
-    inactiveClasses: 'bg-error-light/20 text-error',
+    inactiveClasses: 'bg-error-light/20 text-error border border-error-light',
   },
 ];
 </script>
diff --git a/src/frontend/stories/components/chapter-blocks/chapter-content-add-items-toolbar.vue b/src/frontend/stories/components/chapter-blocks/chapter-content-add-items-toolbar.vue
new file mode 100644
index 00000000..7e9f5b89
--- /dev/null
+++ b/src/frontend/stories/components/chapter-blocks/chapter-content-add-items-toolbar.vue
@@ -0,0 +1,48 @@
+<template>
+  <div class="mt-6 space-y-3">
+    <div class="flex flex-wrap gap-3">
+      <ChapterDashedAddButton :dashed="false" :full-width="false" @click="$emit('addImage')">
+        <Plus class="size-4" aria-hidden="true" />
+        <Image class="size-4" aria-hidden="true" />
+        <span>Image</span>
+      </ChapterDashedAddButton>
+      <ChapterDashedAddButton :dashed="false" :full-width="false" @click="$emit('addVideo')">
+        <Plus class="size-4" aria-hidden="true" />
+        <Video class="size-4" aria-hidden="true" />
+        <span>Video</span>
+      </ChapterDashedAddButton>
+      <ChapterDashedAddButton :dashed="false" :full-width="false" @click="$emit('addScripture')">
+        <Plus class="size-4" aria-hidden="true" />
+        <BookMarked class="size-4" aria-hidden="true" />
+        <span>Scripture</span>
+      </ChapterDashedAddButton>
+    </div>
+    <ChapterAddLeadersNotesButton
+      v-if="showAddLeadersNotes"
+      @click="$emit('addLeadersNotes')"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { BookMarked, Image, Plus, Video } from '@lucide/vue';
+
+import ChapterAddLeadersNotesButton from './chapter-add-leaders-notes-button.vue';
+import ChapterDashedAddButton from './chapter-dashed-add-button.vue';
+
+withDefaults(
+  defineProps<{
+    showAddLeadersNotes?: boolean;
+  }>(),
+  {
+    showAddLeadersNotes: true,
+  },
+);
+
+defineEmits<{
+  addImage: [];
+  addVideo: [];
+  addScripture: [];
+  addLeadersNotes: [];
+}>();
+</script>
diff --git a/src/frontend/stories/components/chapter-blocks/chapter-content-block-card.vue b/src/frontend/stories/components/chapter-blocks/chapter-content-block-card.vue
index f5acecbd..ed858576 100644
--- a/src/frontend/stories/components/chapter-blocks/chapter-content-block-card.vue
+++ b/src/frontend/stories/components/chapter-blocks/chapter-content-block-card.vue
@@ -49,46 +49,110 @@
 
     <RichListbox
       :model-value="block.style"
-      label="Style"
-      :options="styleOptions"
+      label="Block Style"
+      :options="blockStyleOptions"
       @update:model-value="updateField('style', $event)"
     />
 
-    <RichListbox
-      :model-value="block.blockType"
-      label="Block Type"
-      :options="blockTypeOptions"
-      @update:model-value="setBlockType"
-    />
+    <div>
+      <label class="input-label block">Content Items</label>
+      <p class="text-sm text-gray-500">Add items that serve this block's role.</p>
 
-    <ChapterBlockRichTextEditor
-      v-if="block.blockType === 'text'"
-      v-model="contentModel"
-      label="Text Content"
-      placeholder="Enter your content..."
-    />
+      <div class="mt-4">
+        <div class="pb-6">
+          <div class="mb-3 flex items-center gap-2">
+            <FileText class="size-4 text-gray-500" aria-hidden="true" />
+            <span class="input-label mb-0">Text</span>
+          </div>
+          <ChapterBlockRichTextEditor
+            v-model="contentModel"
+            placeholder="Enter your content..."
+          />
+        </div>
 
-    <div v-if="block.blockType === 'url'">
-      <label :for="`${block.id}-url`" class="input-label">URL</label>
-      <input
-        :id="`${block.id}-url`"
-        type="url"
-        :value="block.url ?? ''"
-        placeholder="https://..."
-        class="input-field mt-[2px]"
-        @input="updateField('url', ($event.target as HTMLInputElement).value)"
+        <template v-for="item in block.items" :key="item.id">
+          <div v-if="item.kind === 'image'" class="border-t border-gray-100 pt-6">
+            <div class="mb-2 flex items-center justify-between gap-3">
+              <span class="input-label mb-0">Image</span>
+              <button
+                type="button"
+                class="rounded-xl p-1.5 text-gray-400 transition-colors hover:bg-red-50 hover:text-red-600"
+                aria-label="Remove image item"
+                @click="removeItem(item.id)"
+              >
+                <Trash2 class="size-4" aria-hidden="true" />
+              </button>
+            </div>
+            <div class="[&>div]:mt-0">
+              <ChapterBlockImageField
+                :model-value="item.imageUrl ?? ''"
+                :block-id="block.id"
+                :item-id="item.id"
+                label=""
+                @update:model-value="updateItem(item.id, { imageUrl: $event })"
+              />
+            </div>
+          </div>
+
+          <div v-else-if="item.kind === 'video'" class="border-t border-gray-100 pt-6">
+            <div class="mb-2 flex items-center justify-between gap-3">
+              <span class="input-label mb-0">Video</span>
+              <button
+                type="button"
+                class="rounded-xl p-1.5 text-gray-400 transition-colors hover:bg-red-50 hover:text-red-600"
+                aria-label="Remove video item"
+                @click="removeItem(item.id)"
+              >
+                <Trash2 class="size-4" aria-hidden="true" />
+              </button>
+            </div>
+            <div class="[&>div]:mt-0">
+              <ChapterBlockVideoField
+                :model-value="item.video ?? { url: null }"
+                :collection-id="videoCollectionId ?? ''"
+                :block-id="block.id"
+                :item-id="item.id"
+                label=""
+                @update:model-value="updateItem(item.id, { video: $event })"
+              />
+            </div>
+          </div>
+
+          <div v-else-if="item.kind === 'scripture'" class="border-t border-gray-100 pt-6">
+            <div class="mb-2 flex items-center justify-between gap-3">
+              <span class="input-label mb-0">Scripture</span>
+              <button
+                type="button"
+                class="rounded-xl p-1.5 text-gray-400 transition-colors hover:bg-red-50 hover:text-red-600"
+                aria-label="Remove scripture item"
+                @click="removeItem(item.id)"
+              >
+                <Trash2 class="size-4" aria-hidden="true" />
+              </button>
+            </div>
+            <ChapterBlockScriptureField
+              :model-value="item.scripture ?? { reference: '', verse: '' }"
+              :block-id="block.id"
+              :item-id="item.id"
+              reference-label="Bible Reference"
+              passage-label="Scripture Text"
+              reference-placeholder="e.g., John 3:16, Romans 8:28–30"
+              passage-placeholder="Paste or type the scripture passage here..."
+              @update:model-value="updateItem(item.id, { scripture: $event })"
+            />
+          </div>
+        </template>
+      </div>
+
+      <ChapterContentAddItemsToolbar
+        :show-add-leaders-notes="!block.showLeadersNotes"
+        @add-image="addItem('image')"
+        @add-video="addItem('video')"
+        @add-scripture="addItem('scripture')"
+        @add-leaders-notes="updateField('showLeadersNotes', true)"
       />
     </div>
 
-    <ChapterBlockVideoField
-      v-if="block.blockType === 'video'"
-      :model-value="block.video ?? { url: null }"
-      :collection-id="videoCollectionId ?? ''"
-      :block-id="block.id"
-      label="Video"
-      @update:model-value="updateField('video', $event)"
-    />
-
     <div
       v-if="block.showLeadersNotes"
       class="rounded-xl border border-studio-yellow/60 bg-studio-yellow/30 p-4"
@@ -121,15 +185,6 @@
       />
     </div>
 
-    <button
-      v-else
-      type="button"
-      class="text-sm font-medium text-studio-forest underline-offset-2 hover:underline"
-      @click="updateField('showLeadersNotes', true)"
-    >
-      Add Leaders Notes
-    </button>
-
     <template #footer>
       <ChapterBlockVisibility v-model="visibilityModel" />
     </template>
@@ -138,29 +193,31 @@
 
 <script setup lang="ts">
 import { computed } from 'vue';
-import type { Component } from 'vue';
 import {
-  BookOpen,
   Crown,
-  ExternalLink,
   FileText,
-  Star,
-  Trash2,
-  Video,
   LayoutList,
+  Trash2,
 } from '@lucide/vue';
 
-import type { ResourceType, ChapterContentBlock } from '../../../../types';
+import type { ChapterContentBlock, ChapterContentItem } from '../../../../types';
 import RichListbox from '../../../shared/rich-listbox.vue';
 import ChapterBlockCardShell from './chapter-block-card-shell.vue';
+import ChapterBlockImageField from './chapter-block-image-field.vue';
 import ChapterBlockRichTextEditor from './chapter-block-rich-text-editor.vue';
+import ChapterBlockScriptureField from './chapter-block-scripture-field.vue';
 import ChapterBlockVideoField from './chapter-block-video-field.vue';
 import ChapterBlockVisibility from './chapter-block-visibility.vue';
+import ChapterContentAddItemsToolbar from './chapter-content-add-items-toolbar.vue';
+import { createContentItem } from './chapter-block-utils';
+import { getBlockRoleOptions } from './chapter-block-role-options';
+import { blockStyleOptions } from './chapter-block-style-options';
 
 const props = defineProps<{
   block: ChapterContentBlock;
   expanded: boolean;
   videoCollectionId?: string;
+  chapterType?: string | null;
 }>();
 
 const emit = defineEmits<{
@@ -193,106 +250,23 @@ const updateField = <K extends keyof ChapterContentBlock>(
   emit('update:block', { ...props.block, [key]: value });
 };
 
-const setBlockType = (type: string) => {
-  const blockType = type as ResourceType;
-  const next: ChapterContentBlock = { ...props.block, blockType };
-
-  if (blockType !== 'url') {
-    next.url = '';
-  } else if (next.url === undefined) {
-    next.url = '';
-  }
-
-  if (blockType !== 'video') {
-    next.video = { url: null };
-  } else if (!next.video) {
-    next.video = { url: null };
-  }
-
-  if (blockType !== 'text') {
-    next.content = '';
-  } else if (next.content === undefined) {
-    next.content = '';
-  }
-
-  emit('update:block', next);
+const addItem = (kind: ChapterContentItem['kind']) => {
+  updateField('items', [...props.block.items, createContentItem(kind)]);
 };
 
-const blockRoleOptions: {
-  value: string;
-  label: string;
-  description: string;
-  icon: Component;
-}[] = [
-  {
-    value: 'summary',
-    label: 'Summary',
-    description: 'Recap or overview of the session',
-    icon: BookOpen,
-  },
-  {
-    value: 'introduction',
-    label: 'Introduction',
-    description: 'Opening context for the content',
-    icon: BookOpen,
-  },
-  {
-    value: 'reflection',
-    label: 'Reflection',
-    description: 'Prompt for personal reflection',
-    icon: BookOpen,
-  },
-];
+const removeItem = (id: string) => {
+  updateField(
+    'items',
+    props.block.items.filter((item) => item.id !== id),
+  );
+};
 
-const styleOptions: {
-  value: string;
-  label: string;
-  description: string;
-  icon: Component;
-}[] = [
-  {
-    value: 'default',
-    label: 'Default',
-    description: 'Standard visual weight',
-    icon: Star,
-  },
-  {
-    value: 'emphasis',
-    label: 'Emphasis',
-    description: 'Draws more attention',
-    icon: Star,
-  },
-  {
-    value: 'subtle',
-    label: 'Subtle',
-    description: 'Lighter visual treatment',
-    icon: Star,
-  },
-];
+const updateItem = (id: string, patch: Partial<ChapterContentItem>) => {
+  updateField(
+    'items',
+    props.block.items.map((item) => (item.id === id ? { ...item, ...patch } : item)),
+  );
+};
 
-const blockTypeOptions: {
-  value: ResourceType;
-  label: string;
-  description: string;
-  icon: Component;
-}[] = [
-  {
-    value: 'text',
-    label: 'Text',
-    description: 'Rich formatted text content',
-    icon: FileText,
-  },
-  {
-    value: 'url',
-    label: 'URL',
-    description: 'Link to an external website or resource',
-    icon: ExternalLink,
-  },
-  {
-    value: 'video',
-    label: 'Video',
-    description: 'Upload a video file',
-    icon: Video,
-  },
-];
+const blockRoleOptions = computed(() => getBlockRoleOptions(props.chapterType));
 </script>
diff --git a/src/frontend/stories/components/chapter-blocks/chapter-dashed-add-button.vue b/src/frontend/stories/components/chapter-blocks/chapter-dashed-add-button.vue
new file mode 100644
index 00000000..fd12f647
--- /dev/null
+++ b/src/frontend/stories/components/chapter-blocks/chapter-dashed-add-button.vue
@@ -0,0 +1,32 @@
+<template>
+  <button
+    type="button"
+    class="inline-flex items-center justify-center rounded-xl border border-gray-300 bg-white text-sm font-medium leading-4 text-studio-forest hover:bg-gray-50"
+    :class="[
+      dashed ? 'border-dashed' : '',
+      fullWidth ? 'w-full px-3 py-3' : 'w-auto max-w-fit px-4 py-2',
+    ]"
+    @click.prevent="$emit('click')"
+  >
+    <div class="inline-flex items-center justify-center gap-2">
+      <slot />
+    </div>
+  </button>
+</template>
+
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    dashed?: boolean;
+    fullWidth?: boolean;
+  }>(),
+  {
+    dashed: true,
+    fullWidth: true,
+  },
+);
+
+defineEmits<{
+  click: [];
+}>();
+</script>
diff --git a/src/frontend/stories/components/chapter-blocks/chapter-scripture-block-card.vue b/src/frontend/stories/components/chapter-blocks/chapter-scripture-block-card.vue
index 5bbd413d..340d9d1a 100644
--- a/src/frontend/stories/components/chapter-blocks/chapter-scripture-block-card.vue
+++ b/src/frontend/stories/components/chapter-blocks/chapter-scripture-block-card.vue
@@ -79,14 +79,11 @@
       />
     </div>
 
-    <button
+    <ChapterAddLeadersNotesButton
       v-else
-      type="button"
-      class="text-sm font-medium text-studio-forest underline-offset-2 hover:underline"
+      class="mt-6"
       @click="updateField('showLeadersNotes', true)"
-    >
-      Add Leaders Notes
-    </button>
+    />
 
     <template #footer>
       <ChapterBlockVisibility v-model="visibilityModel" />
@@ -100,6 +97,7 @@ import { BookMarked, Crown, Trash2 } from '@lucide/vue';
 
 import type { ChapterScriptureBlock } from '../../../../types';
 import ChapterBlockCardShell from './chapter-block-card-shell.vue';
+import ChapterAddLeadersNotesButton from './chapter-add-leaders-notes-button.vue';
 import ChapterBlockScriptureField from './chapter-block-scripture-field.vue';
 import ChapterBlockVisibility from './chapter-block-visibility.vue';
 
diff --git a/src/frontend/stories/components/chapter-blocks/chapter-title-block-card.vue b/src/frontend/stories/components/chapter-blocks/chapter-title-block-card.vue
index 13fc773e..345d6627 100644
--- a/src/frontend/stories/components/chapter-blocks/chapter-title-block-card.vue
+++ b/src/frontend/stories/components/chapter-blocks/chapter-title-block-card.vue
@@ -58,14 +58,7 @@
       label="Cover Image (Optional)"
       @update:model-value="updateField('coverImage', $event)"
     />
-
-    <RichListbox
-      :model-value="block.style"
-      label="Style"
-      :options="styleOptions"
-      @update:model-value="updateField('style', $event)"
-    />
-
+    <div class="mt-4"></div>
     <template #footer>
       <ChapterBlockVisibility v-model="visibilityModel" />
     </template>
@@ -74,11 +67,9 @@
 
 <script setup lang="ts">
 import { computed } from 'vue';
-import type { Component } from 'vue';
-import { PencilLine, Star } from '@lucide/vue';
+import { PencilLine } from '@lucide/vue';
 
 import type { ChapterTitleBlock } from '../../../../types';
-import RichListbox from '../../../shared/rich-listbox.vue';
 import ChapterBlockCardShell from './chapter-block-card-shell.vue';
 import ChapterBlockImageField from './chapter-block-image-field.vue';
 import ChapterBlockVisibility from './chapter-block-visibility.vue';
@@ -112,30 +103,4 @@ const updateField = <K extends keyof ChapterTitleBlock>(
 ) => {
   emit('update:block', { ...props.block, [key]: value });
 };
-
-const styleOptions: {
-  value: string;
-  label: string;
-  description: string;
-  icon: Component;
-}[] = [
-  {
-    value: 'default',
-    label: 'Default',
-    description: 'Standard visual weight',
-    icon: Star,
-  },
-  {
-    value: 'emphasis',
-    label: 'Emphasis',
-    description: 'Draws more attention',
-    icon: Star,
-  },
-  {
-    value: 'subtle',
-    label: 'Subtle',
-    description: 'Lighter visual treatment',
-    icon: Star,
-  },
-];
 </script>
diff --git a/src/frontend/stories/components/chapter-edit-blocks.story.vue b/src/frontend/stories/components/chapter-edit-blocks.story.vue
index 0458b535..65dbaca0 100644
--- a/src/frontend/stories/components/chapter-edit-blocks.story.vue
+++ b/src/frontend/stories/components/chapter-edit-blocks.story.vue
@@ -27,6 +27,14 @@
         :video-collection-id="sharedProps.config.videoCollectionId"
       />
     </Variant>
+
+    <Variant title="Devotion">
+      <ChapterEditBlocks
+        v-model:blocks="devotionBlocks"
+        :video-collection-id="sharedProps.config.videoCollectionId"
+        chapter-type="Devotion"
+      />
+    </Variant>
   </Story>
 </template>
 
@@ -38,7 +46,7 @@ import { mockResourceProviders, sampleMixedChapterBlocks, sharedProps } from '..
 import { useWidgetsStore } from '../../store';
 import type { StoryHandler } from '../../shared/helpers';
 import ChapterEditBlocks from './chapter-edit-blocks.vue';
-import { createEmptyContentBlock } from './chapter-blocks/chapter-block-utils';
+import { createEmptyContentBlock, createContentItem } from './chapter-blocks/chapter-block-utils';
 
 const setupProviders: StoryHandler = (): void => {
   useWidgetsStore().setProviders(mockResourceProviders);
@@ -54,8 +62,7 @@ const multipleBlocks = ref<ChapterBlock[]>([
     blockName: 'Introduction',
     displayName: 'Session Introduction',
     blockRole: 'introduction',
-    style: 'default',
-    blockType: 'text',
+    style: 'primary',
     content: 'Welcome to this session.',
   },
   {
@@ -63,17 +70,15 @@ const multipleBlocks = ref<ChapterBlock[]>([
     blockName: 'External Link',
     displayName: 'Further Reading',
     blockRole: 'summary',
-    style: 'default',
-    blockType: 'url',
-    url: 'https://example.com/article',
+    style: 'secondary',
+    content: 'https://example.com/article',
   },
   {
     ...createEmptyContentBlock(),
     blockName: 'Summary',
     displayName: 'Session Summary',
     blockRole: 'summary',
-    style: 'emphasis',
-    blockType: 'text',
+    style: 'primary',
     content: 'Key takeaways from today.',
     visibility: { presenter: true, personal: false, inNavigation: true, hidden: false },
   },
@@ -82,13 +87,32 @@ const multipleBlocks = ref<ChapterBlock[]>([
     blockName: 'Session Video',
     displayName: 'Watch Session',
     blockRole: 'introduction',
-    style: 'default',
-    blockType: 'video',
+    style: 'tertiary',
+    content: '',
+    items: [createContentItem('video')],
   },
   createEmptyContentBlock(),
 ]);
 
 const mixedBlocks = ref<ChapterBlock[]>([...sampleMixedChapterBlocks]);
+
+const devotionBlocks = ref<ChapterBlock[]>([
+  {
+    ...createEmptyContentBlock(),
+    blockName: 'Opening',
+    displayName: 'Opening Devotion',
+    blockRole: 'introduction',
+    content: 'Welcome to today\'s devotion.',
+  },
+  {
+    ...createEmptyContentBlock(),
+    blockName: 'Passage',
+    displayName: 'Scripture Reading',
+    blockRole: 'scripture',
+    content: '',
+    items: [createContentItem('scripture')],
+  },
+]);
 </script>
 
 <docs lang="md">
diff --git a/src/frontend/stories/components/chapter-edit-blocks.vue b/src/frontend/stories/components/chapter-edit-blocks.vue
index 30f2e079..28af7778 100644
--- a/src/frontend/stories/components/chapter-edit-blocks.vue
+++ b/src/frontend/stories/components/chapter-edit-blocks.vue
@@ -15,6 +15,7 @@
         :block="block"
         :expanded="isExpanded(index)"
         :video-collection-id="videoCollectionId"
+        :chapter-type="chapterType"
         @update:block="updateBlock(index, $event)"
         @delete="deleteBlock(index)"
         @toggle="toggle(index)"
@@ -74,6 +75,7 @@ import {
 const props = defineProps<{
   blocks: ChapterBlock[];
   videoCollectionId?: string;
+  chapterType?: string | null;
 }>();
 
 const emit = defineEmits<{
diff --git a/src/frontend/test/mocks.ts b/src/frontend/test/mocks.ts
index dc451aef..5a516314 100644
--- a/src/frontend/test/mocks.ts
+++ b/src/frontend/test/mocks.ts
@@ -21,6 +21,7 @@ import {
   createEmptyContentBlock,
   createEmptyScriptureBlock,
   createEmptyTitleBlock,
+  createContentItem,
 } from '../stories/components/chapter-blocks/chapter-block-utils';
 
 interface Address {
@@ -4543,13 +4544,13 @@ export const sampleMixedChapterBlocks: ChapterBlock[] = [
     subtitle: 'An introduction to the fourth gospel',
     coverImage:
       'https://res.cloudinary.com/journeys/image/upload/v1756121793/mountain-placeholder_yuflkz.jpg',
-    style: 'emphasis',
   },
   {
     ...createEmptyContentBlock(),
     blockName: 'Introduction',
     displayName: 'Session Introduction',
     blockRole: 'introduction',
+    style: 'secondary',
     content:
       'Welcome to this session on the Gospel of John. We will explore how John presents Jesus as the Word made flesh.',
   },
@@ -4568,16 +4569,13 @@ export const sampleMixedChapterBlocks: ChapterBlock[] = [
     blockName: 'Part One: The Word',
     title: 'The Word Became Flesh',
     subtitle: 'Session 1 of 12',
-    style: 'subtle',
   },
   {
     ...createEmptyContentBlock(),
     blockName: 'Further Reading',
     displayName: 'External Resource',
     blockRole: 'summary',
-    blockType: 'url',
-    url: 'https://example.com/john-overview',
-    content: '',
+    content: 'https://example.com/john-overview',
   },
   {
     ...createEmptyScriptureBlock(),
@@ -4597,7 +4595,7 @@ export const sampleMixedChapterBlocks: ChapterBlock[] = [
     blockName: 'Summary',
     displayName: 'Session Summary',
     blockRole: 'summary',
-    style: 'emphasis',
+    style: 'primary',
     content:
       '**Key takeaways:** Jesus is the eternal Word; belief in him brings eternal life.',
     visibility: { presenter: true, personal: false, inNavigation: true, hidden: false },
@@ -4607,8 +4605,8 @@ export const sampleMixedChapterBlocks: ChapterBlock[] = [
     blockName: 'Session Video',
     displayName: 'Watch Session',
     blockRole: 'introduction',
-    blockType: 'video',
     content: '',
+    items: [createContentItem('video')],
   },
 ];
 
@@ -4777,6 +4775,35 @@ export const chapterEditStory: StorySpec = {
   chapterType: 'Day',
 };
 
+export const chapterEditDevotionStory: StorySpec = {
+  ...story,
+  chapterType: 'Devotion',
+};
+
+export const sampleDevotionChapterBundle: ChapterBundle = {
+  ...sampleChapterBundle,
+  number: '01',
+  title: 'Morning Devotion',
+  description: "A short daily devotion on God's love.",
+  blocks: [
+    {
+      ...createEmptyContentBlock(),
+      blockName: 'Opening',
+      displayName: 'Opening Devotion',
+      blockRole: 'introduction',
+      content: "Welcome to today's devotion.",
+    },
+    {
+      ...createEmptyContentBlock(),
+      blockName: 'Passage',
+      displayName: 'Scripture Reading',
+      blockRole: 'scripture',
+      content: '',
+      items: [createContentItem('scripture')],
+    },
+  ],
+};
+
 export const chapterEditProps: Omit<ChapterEditProps, 'providers'> & {
   providers: Providers;
 } = {
diff --git a/src/types.ts b/src/types.ts
index 13ed4f7c..354d35f2 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -252,15 +252,23 @@ interface ChapterBlockBase {
   visibility: ChapterBlockVisibility;
 }
 
+export type ChapterContentItemKind = 'image' | 'video' | 'scripture';
+
+export interface ChapterContentItem {
+  id: string;
+  kind: ChapterContentItemKind;
+  imageUrl?: string;
+  video?: { url: string | null };
+  scripture?: Scripture;
+}
+
 export interface ChapterContentBlock extends ChapterBlockBase {
   kind: 'content';
   displayName: string;
   blockRole: string;
   style: string;
-  blockType: ResourceType;
   content: string;
-  url?: string;
-  video?: { url: string | null };
+  items: ChapterContentItem[];
   leadersNotes: string;
   showLeadersNotes: boolean;
 }
@@ -270,7 +278,6 @@ export interface ChapterTitleBlock extends ChapterBlockBase {
   title: string;
   subtitle: string;
   coverImage?: string;
-  style: string;
 }
 
 export interface ChapterScriptureBlock extends ChapterBlockBase {

From f680696b6543ee44933fb132ec1eba337f8e2943 Mon Sep 17 00:00:00 2001
From: Timothy Koech <timosville@gmail.com>
Date: Thu, 13 Aug 2026 16:18:29 +0300
Subject: [PATCH 08/13] increment: refactor chapter editing components to
 support devotion drafts, including new types, props, and tab error handling

---
 .../stubs/controllers/drafts_controller.stub  |  2 +-
 src/frontend/index.ts                         | 12 +--
 ...e => devotion-draft-edit-blocks.story.vue} | 31 +++---
 ...cks.vue => devotion-draft-edit-blocks.vue} |  0
 ... => devotion-draft-edit-details.story.vue} | 14 +--
 ...ls.vue => devotion-draft-edit-details.vue} |  0
 ...s.ts => devotion-draft-edit-tab-errors.ts} | 24 +++--
 ...tory.vue => devotion-draft-edit.story.vue} | 98 +++++++++----------
 ...apter-edit.vue => devotion-draft-edit.vue} | 70 ++++++-------
 src/frontend/test/mocks.ts                    | 38 +++----
 src/types.ts                                  |  8 +-
 tests/unit/chapter-edit-tab-errors.spec.ts    | 68 -------------
 .../devotion-draft-edit-tab-errors.spec.ts    | 68 +++++++++++++
 13 files changed, 224 insertions(+), 209 deletions(-)
 rename src/frontend/stories/components/{chapter-edit-blocks.story.vue => devotion-draft-edit-blocks.story.vue} (81%)
 rename src/frontend/stories/components/{chapter-edit-blocks.vue => devotion-draft-edit-blocks.vue} (100%)
 rename src/frontend/stories/components/{chapter-edit-details.story.vue => devotion-draft-edit-details.story.vue} (78%)
 rename src/frontend/stories/components/{chapter-edit-details.vue => devotion-draft-edit-details.vue} (100%)
 rename src/frontend/stories/{chapter-edit-tab-errors.ts => devotion-draft-edit-tab-errors.ts} (54%)
 rename src/frontend/stories/{chapter-edit.story.vue => devotion-draft-edit.story.vue} (75%)
 rename src/frontend/stories/{chapter-edit.vue => devotion-draft-edit.vue} (84%)
 delete mode 100644 tests/unit/chapter-edit-tab-errors.spec.ts
 create mode 100644 tests/unit/devotion-draft-edit-tab-errors.spec.ts

diff --git a/src/backend/stubs/controllers/drafts_controller.stub b/src/backend/stubs/controllers/drafts_controller.stub
index 12a65b84..d4df774f 100644
--- a/src/backend/stubs/controllers/drafts_controller.stub
+++ b/src/backend/stubs/controllers/drafts_controller.stub
@@ -100,7 +100,7 @@ export default class DraftsController {
     const isTranslation = version.locale !== cms.sourceLocale;
 
     if (!isTranslation) {
-      // TODO: migrate to ChapterEdit once chapter-edit.vue is adopted
+      // TODO: use DevotionDraftEdit for devotion templates once adopted
       // @ts-expect-error Inertia page name
       return ctx.inertia.render('DraftIndex', data);
     }
diff --git a/src/frontend/index.ts b/src/frontend/index.ts
index e0081ece..8314a4e3 100644
--- a/src/frontend/index.ts
+++ b/src/frontend/index.ts
@@ -8,9 +8,9 @@ import BooleanField from './fields/boolean-field.vue';
 import InvitationsEdit from './invitation/invitations-edit.vue';
 import InvitationsIndex from './invitation/invitations-index.vue';
 import ChapterPreview from './stories/chapter-preview.vue';
-import ChapterEdit from './stories/chapter-edit.vue';
-import ChapterEditDetails from './stories/components/chapter-edit-details.vue';
-import ChapterEditBlocks from './stories/components/chapter-edit-blocks.vue';
+import DevotionDraftEdit from './stories/devotion-draft-edit.vue';
+import DevotionDraftEditDetails from './stories/components/devotion-draft-edit-details.vue';
+import DevotionDraftEditBlocks from './stories/components/devotion-draft-edit-blocks.vue';
 import ContextMenu from './shared/context-menu.vue';
 import CreateAccount from './auth/create-account.vue';
 import DashboardIndex from './dashboard/dashboard-index.vue';
@@ -82,9 +82,9 @@ export {
   AudioField,
   BooleanField,
   ChapterPreview,
-  ChapterEdit,
-  ChapterEditBlocks,
-  ChapterEditDetails,
+  DevotionDraftEdit,
+  DevotionDraftEditBlocks,
+  DevotionDraftEditDetails,
   ContextMenu,
   CreateAccount,
   DashboardIndex,
diff --git a/src/frontend/stories/components/chapter-edit-blocks.story.vue b/src/frontend/stories/components/devotion-draft-edit-blocks.story.vue
similarity index 81%
rename from src/frontend/stories/components/chapter-edit-blocks.story.vue
rename to src/frontend/stories/components/devotion-draft-edit-blocks.story.vue
index 65dbaca0..d8216aad 100644
--- a/src/frontend/stories/components/chapter-edit-blocks.story.vue
+++ b/src/frontend/stories/components/devotion-draft-edit-blocks.story.vue
@@ -1,35 +1,35 @@
 <template>
-  <Story title="Chapter Edit Blocks" group="stories" :setup-app="setupProviders">
+  <Story title="Devotion Draft Edit Blocks" group="stories" :setup-app="setupProviders">
     <Variant title="Default">
-      <ChapterEditBlocks
+      <DevotionDraftEditBlocks
         v-model:blocks="defaultBlocks"
         :video-collection-id="sharedProps.config.videoCollectionId"
       />
     </Variant>
 
     <Variant title="Empty">
-      <ChapterEditBlocks
+      <DevotionDraftEditBlocks
         v-model:blocks="emptyBlocks"
         :video-collection-id="sharedProps.config.videoCollectionId"
       />
     </Variant>
 
     <Variant title="Multiple blocks">
-      <ChapterEditBlocks
+      <DevotionDraftEditBlocks
         v-model:blocks="multipleBlocks"
         :video-collection-id="sharedProps.config.videoCollectionId"
       />
     </Variant>
 
     <Variant title="Mixed block kinds">
-      <ChapterEditBlocks
+      <DevotionDraftEditBlocks
         v-model:blocks="mixedBlocks"
         :video-collection-id="sharedProps.config.videoCollectionId"
       />
     </Variant>
 
     <Variant title="Devotion">
-      <ChapterEditBlocks
+      <DevotionDraftEditBlocks
         v-model:blocks="devotionBlocks"
         :video-collection-id="sharedProps.config.videoCollectionId"
         chapter-type="Devotion"
@@ -42,11 +42,18 @@
 import { ref } from 'vue';
 
 import type { ChapterBlock } from '../../../types';
-import { mockResourceProviders, sampleMixedChapterBlocks, sharedProps } from '../../test/mocks';
+import {
+  mockResourceProviders,
+  sampleMixedChapterBlocks,
+  sharedProps,
+} from '../../test/mocks';
 import { useWidgetsStore } from '../../store';
 import type { StoryHandler } from '../../shared/helpers';
-import ChapterEditBlocks from './chapter-edit-blocks.vue';
-import { createEmptyContentBlock, createContentItem } from './chapter-blocks/chapter-block-utils';
+import DevotionDraftEditBlocks from './devotion-draft-edit-blocks.vue';
+import {
+  createEmptyContentBlock,
+  createContentItem,
+} from './chapter-blocks/chapter-block-utils';
 
 const setupProviders: StoryHandler = (): void => {
   useWidgetsStore().setProviders(mockResourceProviders);
@@ -102,7 +109,7 @@ const devotionBlocks = ref<ChapterBlock[]>([
     blockName: 'Opening',
     displayName: 'Opening Devotion',
     blockRole: 'introduction',
-    content: 'Welcome to today\'s devotion.',
+    content: "Welcome to today's devotion.",
   },
   {
     ...createEmptyContentBlock(),
@@ -116,7 +123,7 @@ const devotionBlocks = ref<ChapterBlock[]>([
 </script>
 
 <docs lang="md">
-# Chapter Edit Blocks
+# Devotion Draft Edit Blocks
 
-Content block editor for the Blocks tab on chapter create/edit pages. Supports content, title, and scripture blocks with add, remove, reorder, collapse, visibility toggles, and leaders notes.
+Content block editor for the Blocks tab on devotion draft edit pages. Supports content, title, and scripture blocks with add, remove, reorder, collapse, visibility toggles, and leaders notes.
 </docs>
diff --git a/src/frontend/stories/components/chapter-edit-blocks.vue b/src/frontend/stories/components/devotion-draft-edit-blocks.vue
similarity index 100%
rename from src/frontend/stories/components/chapter-edit-blocks.vue
rename to src/frontend/stories/components/devotion-draft-edit-blocks.vue
diff --git a/src/frontend/stories/components/chapter-edit-details.story.vue b/src/frontend/stories/components/devotion-draft-edit-details.story.vue
similarity index 78%
rename from src/frontend/stories/components/chapter-edit-details.story.vue
rename to src/frontend/stories/components/devotion-draft-edit-details.story.vue
index 0fc43974..a3235b3d 100644
--- a/src/frontend/stories/components/chapter-edit-details.story.vue
+++ b/src/frontend/stories/components/devotion-draft-edit-details.story.vue
@@ -1,24 +1,24 @@
 <template>
-  <Story title="Chapter Edit Details" group="stories">
+  <Story title="Devotion Draft Edit Details" group="stories">
     <Variant title="Create" :setup-app="loadCreate">
-      <ChapterEditDetails chapter-type="Day" />
+      <DevotionDraftEditDetails chapter-type="Day" />
       <ModelControl :model="emptyChapterModel" :is-inspect-only="true" />
     </Variant>
 
     <Variant title="Populated" :setup-app="loadPopulated">
-      <ChapterEditDetails chapter-type="Day" />
+      <DevotionDraftEditDetails chapter-type="Day" />
       <ModelControl :model="populatedChapterModel" :is-inspect-only="true" />
     </Variant>
 
     <Variant title="Episode chapter type" :setup-app="loadPopulated">
-      <ChapterEditDetails chapter-type="Episode" />
+      <DevotionDraftEditDetails chapter-type="Episode" />
       <ModelControl :model="populatedChapterModel" :is-inspect-only="true" />
     </Variant>
   </Story>
 </template>
 
 <script setup lang="ts">
-import ChapterEditDetails from './chapter-edit-details.vue';
+import DevotionDraftEditDetails from './devotion-draft-edit-details.vue';
 import ModelControl from '../../test/model-control.vue';
 import { useModelStore } from '../../store';
 import type { StoryHandler } from '../../shared/helpers';
@@ -50,7 +50,7 @@ const loadPopulated: StoryHandler = (): void => {
 </script>
 
 <docs lang="md">
-# Chapter Edit Details
+# Devotion Draft Edit Details
 
-Fixed metadata fields for the Details tab on chapter create/edit pages. Field labels use the story chapter type (e.g. Day Number, Episode Title).
+Fixed metadata fields for the Details tab on devotion draft edit pages. Field labels use the story chapter type (e.g. Day Number, Episode Title).
 </docs>
diff --git a/src/frontend/stories/components/chapter-edit-details.vue b/src/frontend/stories/components/devotion-draft-edit-details.vue
similarity index 100%
rename from src/frontend/stories/components/chapter-edit-details.vue
rename to src/frontend/stories/components/devotion-draft-edit-details.vue
diff --git a/src/frontend/stories/chapter-edit-tab-errors.ts b/src/frontend/stories/devotion-draft-edit-tab-errors.ts
similarity index 54%
rename from src/frontend/stories/chapter-edit-tab-errors.ts
rename to src/frontend/stories/devotion-draft-edit-tab-errors.ts
index e20aaaae..ebf3f887 100644
--- a/src/frontend/stories/chapter-edit-tab-errors.ts
+++ b/src/frontend/stories/devotion-draft-edit-tab-errors.ts
@@ -1,8 +1,12 @@
-export type ChapterEditTab = 'details' | 'blocks' | 'resources';
+export type DevotionDraftEditTab = 'details' | 'blocks' | 'resources';
 
-const CHAPTER_EDIT_TAB_ORDER: ChapterEditTab[] = ['details', 'blocks', 'resources'];
+const DEVOTION_DRAFT_EDIT_TAB_ORDER: DevotionDraftEditTab[] = [
+  'details',
+  'blocks',
+  'resources',
+];
 
-const CHAPTER_EDIT_TAB_LABELS: Record<ChapterEditTab, string> = {
+const DEVOTION_DRAFT_EDIT_TAB_LABELS: Record<DevotionDraftEditTab, string> = {
   details: 'Details',
   blocks: 'Blocks',
   resources: 'Resources',
@@ -12,7 +16,7 @@ function matchesErrorPrefix(key: string, prefix: string): boolean {
   return key === prefix || key.startsWith(`${prefix}.`);
 }
 
-function errorKeyBelongsToTab(key: string, tab: ChapterEditTab): boolean {
+function errorKeyBelongsToTab(key: string, tab: DevotionDraftEditTab): boolean {
   if (tab === 'blocks') {
     return matchesErrorPrefix(key, 'bundle.blocks');
   }
@@ -26,19 +30,19 @@ function errorKeyBelongsToTab(key: string, tab: ChapterEditTab): boolean {
   );
 }
 
-export function chapterEditTabHasError(
-  tab: ChapterEditTab,
+export function devotionDraftEditTabHasError(
+  tab: DevotionDraftEditTab,
   errors: Record<string, string | string[]>,
 ): boolean {
   return Object.keys(errors).some((key) => errorKeyBelongsToTab(key, tab));
 }
 
-export function firstChapterEditTabWithError(
+export function firstDevotionDraftEditTabWithError(
   errors: Record<string, string | string[]>,
 ): string | null {
-  for (const tab of CHAPTER_EDIT_TAB_ORDER) {
-    if (!chapterEditTabHasError(tab, errors)) continue;
-    return CHAPTER_EDIT_TAB_LABELS[tab];
+  for (const tab of DEVOTION_DRAFT_EDIT_TAB_ORDER) {
+    if (!devotionDraftEditTabHasError(tab, errors)) continue;
+    return DEVOTION_DRAFT_EDIT_TAB_LABELS[tab];
   }
 
   return null;
diff --git a/src/frontend/stories/chapter-edit.story.vue b/src/frontend/stories/devotion-draft-edit.story.vue
similarity index 75%
rename from src/frontend/stories/chapter-edit.story.vue
rename to src/frontend/stories/devotion-draft-edit.story.vue
index 73a0f2de..fc9e07d8 100644
--- a/src/frontend/stories/chapter-edit.story.vue
+++ b/src/frontend/stories/devotion-draft-edit.story.vue
@@ -1,15 +1,15 @@
 <template>
-  <Story title="Chapter Edit" group="stories">
+  <Story title="Devotion Draft Edit" group="stories">
     <Variant title="Create" :setup-app="loadCreate">
-      <ChapterEdit
+      <DevotionDraftEdit
         :config="sharedProps.config"
         :user="sharedProps.user"
         :language="sharedProps.language"
         :errors="{}"
         :bookmarks="sharedProps.bookmarks"
-        :draft="sampleChapterDraft"
-        :bundle="emptyChapterBundle"
-        :story="chapterEditStory"
+        :draft="sampleDevotionDraft"
+        :bundle="emptyDevotionDraftBundle"
+        :story="devotionDraftEditStory"
         :available-resources="availableResources"
         :has-edit-review="false"
         :last-published="''"
@@ -19,33 +19,33 @@
     </Variant>
 
     <Variant title="Edit" :setup-app="loadEdit">
-      <ChapterEdit
+      <DevotionDraftEdit
         :config="sharedProps.config"
         :user="sharedProps.user"
         :language="sharedProps.language"
         :errors="{}"
         :bookmarks="sharedProps.bookmarks"
-        :draft="sampleChapterDraft"
-        :bundle="sampleChapterBundle"
-        :story="chapterEditStory"
+        :draft="sampleDevotionDraft"
+        :bundle="sampleDevotionDraftBundle"
+        :story="devotionDraftEditStory"
         :available-resources="availableResources"
         :has-edit-review="false"
         :last-published="'2025-10-24T06:10:38.483+00:00'"
         :providers="mockResourceProviders"
       />
-      <ModelControl :model="sampleChapterBundle" :is-inspect-only="true" />
+      <ModelControl :model="sampleDevotionDraftBundle" :is-inspect-only="true" />
     </Variant>
 
     <Variant title="Blocks tab" :setup-app="loadBlocksTab">
-      <ChapterEdit
+      <DevotionDraftEdit
         :config="sharedProps.config"
         :user="sharedProps.user"
         :language="sharedProps.language"
         :errors="{}"
         :bookmarks="sharedProps.bookmarks"
-        :draft="sampleChapterDraft"
-        :bundle="sampleChapterBundle"
-        :story="chapterEditStory"
+        :draft="sampleDevotionDraft"
+        :bundle="sampleDevotionDraftBundle"
+        :story="devotionDraftEditStory"
         :available-resources="availableResources"
         :has-edit-review="false"
         :last-published="''"
@@ -54,15 +54,15 @@
     </Variant>
 
     <Variant title="Devotion" :setup-app="loadDevotionBlocksTab">
-      <ChapterEdit
+      <DevotionDraftEdit
         :config="sharedProps.config"
         :user="sharedProps.user"
         :language="sharedProps.language"
         :errors="{}"
         :bookmarks="sharedProps.bookmarks"
-        :draft="sampleChapterDraft"
+        :draft="sampleDevotionDraft"
         :bundle="sampleDevotionChapterBundle"
-        :story="chapterEditDevotionStory"
+        :story="devotionDraftEditDevotionStory"
         :available-resources="availableResources"
         :has-edit-review="false"
         :last-published="''"
@@ -71,15 +71,15 @@
     </Variant>
 
     <Variant title="Resources tab" :setup-app="loadResourcesTab">
-      <ChapterEdit
+      <DevotionDraftEdit
         :config="sharedProps.config"
         :user="sharedProps.user"
         :language="sharedProps.language"
         :errors="{}"
         :bookmarks="sharedProps.bookmarks"
-        :draft="sampleChapterDraft"
-        :bundle="sampleChapterBundle"
-        :story="chapterEditStory"
+        :draft="sampleDevotionDraft"
+        :bundle="sampleDevotionDraftBundle"
+        :story="devotionDraftEditStory"
         :available-resources="availableResources"
         :has-edit-review="false"
         :last-published="''"
@@ -88,15 +88,15 @@
     </Variant>
 
     <Variant title="Validation errors on tabs" :setup-app="loadValidationErrors">
-      <ChapterEdit
+      <DevotionDraftEdit
         :config="sharedProps.config"
         :user="sharedProps.user"
         :language="sharedProps.language"
-        :errors="chapterEditValidationErrors"
+        :errors="devotionDraftEditValidationErrors"
         :bookmarks="sharedProps.bookmarks"
-        :draft="sampleChapterDraft"
-        :bundle="sampleChapterBundle"
-        :story="chapterEditStory"
+        :draft="sampleDevotionDraft"
+        :bundle="sampleDevotionDraftBundle"
+        :story="devotionDraftEditStory"
         :available-resources="availableResources"
         :has-edit-review="false"
         :last-published="''"
@@ -105,15 +105,15 @@
     </Variant>
 
     <Variant title="Edit review: Submit" :setup-app="loadEdit">
-      <ChapterEdit
+      <DevotionDraftEdit
         :config="sharedProps.config"
         :user="editorUser"
         :language="sharedProps.language"
         :errors="{}"
         :bookmarks="sharedProps.bookmarks"
-        :draft="sampleChapterDraft"
-        :bundle="sampleChapterBundle"
-        :story="chapterEditStory"
+        :draft="sampleDevotionDraft"
+        :bundle="sampleDevotionDraftBundle"
+        :story="devotionDraftEditStory"
         :available-resources="availableResources"
         :has-edit-review="true"
         :last-published="''"
@@ -122,15 +122,15 @@
     </Variant>
 
     <Variant title="Edit review: Request change" :setup-app="loadEdit">
-      <ChapterEdit
+      <DevotionDraftEdit
         :config="sharedProps.config"
         :user="adminUser"
         :language="sharedProps.language"
         :errors="{}"
         :bookmarks="sharedProps.bookmarks"
-        :draft="sampleChapterDraftSubmitted"
-        :bundle="sampleChapterBundle"
-        :story="chapterEditStory"
+        :draft="sampleDevotionDraftSubmitted"
+        :bundle="sampleDevotionDraftBundle"
+        :story="devotionDraftEditStory"
         :available-resources="availableResources"
         :has-edit-review="true"
         :last-published="'2025-10-24T06:10:38.483+00:00'"
@@ -139,15 +139,15 @@
     </Variant>
 
     <Variant title="Mark Ready" :setup-app="loadEdit">
-      <ChapterEdit
+      <DevotionDraftEdit
         :config="sharedProps.config"
         :user="adminUser"
         :language="sharedProps.language"
         :errors="{}"
         :bookmarks="sharedProps.bookmarks"
-        :draft="sampleChapterDraft"
-        :bundle="sampleChapterBundle"
-        :story="chapterEditStory"
+        :draft="sampleDevotionDraft"
+        :bundle="sampleDevotionDraftBundle"
+        :story="devotionDraftEditStory"
         :available-resources="availableResources"
         :has-edit-review="true"
         :last-published="''"
@@ -158,21 +158,21 @@
 </template>
 
 <script setup lang="ts">
-import ChapterEdit from './chapter-edit.vue';
+import DevotionDraftEdit from './devotion-draft-edit.vue';
 import ModelControl from '../test/model-control.vue';
 import {
   adminUser,
   availableResources,
-  chapterEditStory,
-  chapterEditDevotionStory,
-  chapterEditValidationErrors,
+  devotionDraftEditStory,
+  devotionDraftEditDevotionStory,
+  devotionDraftEditValidationErrors,
   editorUser,
-  emptyChapterBundle,
+  emptyDevotionDraftBundle,
   mockResourceProviders,
-  sampleChapterBundle,
+  sampleDevotionDraftBundle,
   sampleDevotionChapterBundle,
-  sampleChapterDraft,
-  sampleChapterDraftSubmitted,
+  sampleDevotionDraft,
+  sampleDevotionDraftSubmitted,
   sharedProps,
   miniSidebar,
 } from '../test/mocks';
@@ -216,7 +216,7 @@ const loadResourcesTab: StoryHandler = (context): void => {
 
 const loadValidationErrors: StoryHandler = (context): void => {
   miniSidebar(context);
-  useSharedStore().setErrors(chapterEditValidationErrors);
+  useSharedStore().setErrors(devotionDraftEditValidationErrors);
   const url = new URL(window.location.href);
   url.searchParams.delete('tab');
   window.history.replaceState({}, '', url.toString());
@@ -224,9 +224,9 @@ const loadValidationErrors: StoryHandler = (context): void => {
 </script>
 
 <docs lang="md">
-# Chapter Edit
+# Devotion Draft Edit
 
-Tabbed chapter create/edit page with Details, Blocks, and Resources. Includes draft lifecycle actions (delete, submit, publish, request change), 2s autosave, and an explicit Save button. No sidebar meta/preview.
+Tabbed devotion draft editor with Details, Blocks, and Resources. Includes draft lifecycle actions (delete, submit, publish, request change), 2s autosave, and an explicit Save button. No sidebar meta/preview.
 
 ## Variants
 
diff --git a/src/frontend/stories/chapter-edit.vue b/src/frontend/stories/devotion-draft-edit.vue
similarity index 84%
rename from src/frontend/stories/chapter-edit.vue
rename to src/frontend/stories/devotion-draft-edit.vue
index 5dd88b63..43488162 100644
--- a/src/frontend/stories/chapter-edit.vue
+++ b/src/frontend/stories/devotion-draft-edit.vue
@@ -20,33 +20,33 @@
           :label="saveButtonLabel"
           variant="primary"
           :disabled="isSaving"
-          @click="saveChapter"
+          @click="saveDevotionDraft"
         />
       </div>
     </template>
     <template #controls>
       <TabNavigation
-        :tabs="chapterEditTabs"
-        :icons="chapterEditTabIcons"
-        :current-tab="currentChapterTab"
-        @change="onChapterTabChange"
+        :tabs="devotionDraftEditTabs"
+        :icons="devotionDraftEditTabIcons"
+        :current-tab="currentDevotionDraftTab"
+        @change="onDevotionDraftTabChange"
       />
     </template>
     <template #main>
       <div class="relative">
         <form :dir="shared.isRtl ? 'rtl' : 'ltr'">
-          <ChapterEditDetails
-            v-if="currentChapterTab === 'Details'"
+          <DevotionDraftEditDetails
+            v-if="currentDevotionDraftTab === 'Details'"
             :chapter-type="props.story.chapterType"
           />
-          <div v-if="currentChapterTab === 'Blocks'" dir="ltr">
-            <ChapterEditBlocks
+          <div v-if="currentDevotionDraftTab === 'Blocks'" dir="ltr">
+            <DevotionDraftEditBlocks
               v-model:blocks="blocks"
               :video-collection-id="props.config.videoCollectionId"
               :chapter-type="props.story.chapterType"
             />
           </div>
-          <div v-if="currentChapterTab === 'Resources'" dir="ltr">
+          <div v-if="currentDevotionDraftTab === 'Resources'" dir="ltr">
             <StoryEditResources
               v-model:resources="attachedResources"
               :available-resources="availableResources"
@@ -67,7 +67,7 @@ import type { Errors } from '@inertiajs/core';
 import { BookOpen, FolderClosed, Blocks, Trash2 } from '@lucide/vue';
 
 import type {
-  ChapterEditProps,
+  DevotionDraftEditProps,
   DraftEditProps,
   NavigationPaneTab,
   ResourceItem,
@@ -79,24 +79,27 @@ import { useSharedStore, useWidgetsStore, useModelStore, useDraftsStore } from '
 import AppLayout from '../shared/app-layout.vue';
 import StudioButton from '../shared/studio-button.vue';
 import TabNavigation from '../shared/tab-navigation.vue';
-import ChapterEditDetails from './components/chapter-edit-details.vue';
-import ChapterEditBlocks from './components/chapter-edit-blocks.vue';
+import DevotionDraftEditDetails from './components/devotion-draft-edit-details.vue';
+import DevotionDraftEditBlocks from './components/devotion-draft-edit-blocks.vue';
 import StoryEditResources from './components/story-edit-resources.vue';
 import WorkflowActions from './components/workflow-actions.vue';
 import { resourceIds } from './components/resource-utils';
 import {
-  chapterEditTabHasError,
-  firstChapterEditTabWithError,
-} from './chapter-edit-tab-errors';
+  devotionDraftEditTabHasError,
+  firstDevotionDraftEditTabWithError,
+} from './devotion-draft-edit-tab-errors';
 import { normalizeChapterBlocks } from './components/chapter-blocks/chapter-block-utils';
 
-const resolveChapterTab = (value: string | null, tabs: NavigationPaneTab[]): string => {
+const resolveDevotionDraftTab = (
+  value: string | null,
+  tabs: NavigationPaneTab[],
+): string => {
   if (!value) return 'Details';
   const match = tabs.find((tab) => tab.label.toLowerCase() === value.toLowerCase());
   return match?.label ?? 'Details';
 };
 
-const props = defineProps<ChapterEditProps & SharedPageProps>();
+const props = defineProps<DevotionDraftEditProps & SharedPageProps>();
 
 const shared = useSharedStore();
 const { errors } = storeToRefs(shared);
@@ -121,9 +124,7 @@ const model = useModelStore();
 model.setModel(props.bundle);
 
 const blocks = ref<ChapterBlock[]>(
-  props.bundle.blocks?.length
-    ? normalizeChapterBlocks([...props.bundle.blocks])
-    : [],
+  props.bundle.blocks?.length ? normalizeChapterBlocks([...props.bundle.blocks]) : [],
 );
 const attachedResources = ref<ResourceItem[]>([...(props.bundle.resources ?? [])]);
 const availableResources = props.availableResources ?? [];
@@ -174,22 +175,22 @@ const saveButtonLabel = computed(() =>
   props.isCreate ? 'Create Chapter' : 'Save Changes',
 );
 
-const chapterEditTabs = computed((): NavigationPaneTab[] => [
+const devotionDraftEditTabs = computed((): NavigationPaneTab[] => [
   {
     label: 'Details',
-    hasError: chapterEditTabHasError('details', errors.value),
+    hasError: devotionDraftEditTabHasError('details', errors.value),
   },
   {
     label: 'Blocks',
-    hasError: chapterEditTabHasError('blocks', errors.value),
+    hasError: devotionDraftEditTabHasError('blocks', errors.value),
   },
   {
     label: 'Resources',
-    hasError: chapterEditTabHasError('resources', errors.value),
+    hasError: devotionDraftEditTabHasError('resources', errors.value),
   },
 ]);
 
-const chapterEditTabIcons = computed(() => ({
+const devotionDraftEditTabIcons = computed(() => ({
   Details: BookOpen,
   Blocks: Blocks,
   Resources: FolderClosed,
@@ -201,18 +202,21 @@ const initialTabs: NavigationPaneTab[] = [
   { label: 'Resources' },
 ];
 
-const currentChapterTab = ref(
-  resolveChapterTab(new URLSearchParams(window.location.search).get('tab'), initialTabs),
+const currentDevotionDraftTab = ref(
+  resolveDevotionDraftTab(
+    new URLSearchParams(window.location.search).get('tab'),
+    initialTabs,
+  ),
 );
 
-const onChapterTabChange = (tab: string) => {
-  currentChapterTab.value = tab;
+const onDevotionDraftTabChange = (tab: string) => {
+  currentDevotionDraftTab.value = tab;
 };
 
 const focusFirstErroredTab = () => {
-  const tab = firstChapterEditTabWithError(errors.value);
+  const tab = firstDevotionDraftEditTabWithError(errors.value);
   if (tab) {
-    currentChapterTab.value = tab;
+    currentDevotionDraftTab.value = tab;
   }
 };
 
@@ -296,7 +300,7 @@ const scheduleAutosave = () => {
   }, 2000);
 };
 
-const saveChapter = () => {
+const saveDevotionDraft = () => {
   cancelAutosave();
   shared.clearErrors();
   isSaving.value = true;
diff --git a/src/frontend/test/mocks.ts b/src/frontend/test/mocks.ts
index 5a516314..e3b7c370 100644
--- a/src/frontend/test/mocks.ts
+++ b/src/frontend/test/mocks.ts
@@ -1,6 +1,6 @@
 import type {
-  ChapterBundle,
-  ChapterEditProps,
+  DevotionDraftBundle,
+  DevotionDraftEditProps,
   FieldSpec,
   LanguageSpecification,
   LanguageTableItem,
@@ -4736,7 +4736,7 @@ export const mockResourceEditErrors: Record<string, string[]> = {
   'bundle.url': ['URL resources must have a valid URL'],
 };
 
-export const sampleChapterDraft = {
+export const sampleDevotionDraft = {
   id: 42,
   number: 3,
   status: 'started',
@@ -4744,12 +4744,12 @@ export const sampleChapterDraft = {
   createdAt: '2025-10-24T06:10:38.482+00:00',
 };
 
-export const sampleChapterDraftSubmitted = {
-  ...sampleChapterDraft,
+export const sampleDevotionDraftSubmitted = {
+  ...sampleDevotionDraft,
   status: 'submitted',
 };
 
-export const emptyChapterBundle: ChapterBundle = {
+export const emptyDevotionDraftBundle: DevotionDraftBundle = {
   number: '',
   title: '',
   description: '',
@@ -4759,7 +4759,7 @@ export const emptyChapterBundle: ChapterBundle = {
   resources: [],
 };
 
-export const sampleChapterBundle: ChapterBundle = {
+export const sampleDevotionDraftBundle: DevotionDraftBundle = {
   number: '01',
   title: 'Is there more to life than this?',
   description: 'An introduction to the Christian faith.',
@@ -4770,18 +4770,18 @@ export const sampleChapterBundle: ChapterBundle = {
   resources: sampleAttachedResources.slice(0, 2),
 };
 
-export const chapterEditStory: StorySpec = {
+export const devotionDraftEditStory: StorySpec = {
   ...story,
   chapterType: 'Day',
 };
 
-export const chapterEditDevotionStory: StorySpec = {
+export const devotionDraftEditDevotionStory: StorySpec = {
   ...story,
   chapterType: 'Devotion',
 };
 
-export const sampleDevotionChapterBundle: ChapterBundle = {
-  ...sampleChapterBundle,
+export const sampleDevotionChapterBundle: DevotionDraftBundle = {
+  ...sampleDevotionDraftBundle,
   number: '01',
   title: 'Morning Devotion',
   description: "A short daily devotion on God's love.",
@@ -4804,27 +4804,27 @@ export const sampleDevotionChapterBundle: ChapterBundle = {
   ],
 };
 
-export const chapterEditProps: Omit<ChapterEditProps, 'providers'> & {
+export const devotionDraftEditProps: Omit<DevotionDraftEditProps, 'providers'> & {
   providers: Providers;
 } = {
-  draft: sampleChapterDraft,
-  bundle: sampleChapterBundle,
-  story: chapterEditStory,
+  draft: sampleDevotionDraft,
+  bundle: sampleDevotionDraftBundle,
+  story: devotionDraftEditStory,
   availableResources,
   providers: mockResourceProviders,
   hasEditReview: false,
   lastPublished: '',
 };
 
-export const chapterEditCreateProps: Omit<ChapterEditProps, 'providers'> & {
+export const devotionDraftEditCreateProps: Omit<DevotionDraftEditProps, 'providers'> & {
   providers: Providers;
 } = {
-  ...chapterEditProps,
-  bundle: emptyChapterBundle,
+  ...devotionDraftEditProps,
+  bundle: emptyDevotionDraftBundle,
   isCreate: true,
 };
 
-export const chapterEditValidationErrors: Record<string, string[]> = {
+export const devotionDraftEditValidationErrors: Record<string, string[]> = {
   'bundle.title': ['The title field must have at least 1 character'],
   'bundle.blocks.0.blockName': ['Block name is required'],
   'bundle.resources.0': ['Invalid resource'],
diff --git a/src/types.ts b/src/types.ts
index 354d35f2..c6fa8f77 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -493,7 +493,7 @@ export interface DraftEditProps {
   hasEditReview: boolean;
 }
 
-export interface ChapterBundle {
+export interface DevotionDraftBundle {
   number: string;
   title: string;
   description: string;
@@ -503,16 +503,16 @@ export interface ChapterBundle {
   resources: ResourceItem[];
 }
 
-export interface ChapterEditProps {
+export interface DevotionDraftEditProps {
   draft: DraftMeta;
-  bundle: ChapterBundle;
+  bundle: DevotionDraftBundle;
   story: StorySpec;
   availableResources: ResourceItem[];
   providers: Providers;
   hasEditReview: boolean;
   lastPublished: string;
   isCreate?: boolean;
-  source?: ChapterBundle;
+  source?: DevotionDraftBundle;
 }
 
 export interface ChapterMeta {
diff --git a/tests/unit/chapter-edit-tab-errors.spec.ts b/tests/unit/chapter-edit-tab-errors.spec.ts
deleted file mode 100644
index 629f733e..00000000
--- a/tests/unit/chapter-edit-tab-errors.spec.ts
+++ /dev/null
@@ -1,68 +0,0 @@
-import { test, expect } from '@playwright/test';
-import {
-  chapterEditTabHasError,
-  firstChapterEditTabWithError,
-} from '../../src/frontend/stories/chapter-edit-tab-errors.js';
-
-test.describe('chapterEditTabHasError', () => {
-  test('flags Details for bundle.title', () => {
-    const errors = { 'bundle.title': ['Title is required'] };
-
-    expect(chapterEditTabHasError('details', errors)).toBe(true);
-    expect(chapterEditTabHasError('blocks', errors)).toBe(false);
-    expect(chapterEditTabHasError('resources', errors)).toBe(false);
-  });
-
-  test('flags Blocks for bundle.blocks', () => {
-    const errors = { 'bundle.blocks.0.blockName': ['Block name is required'] };
-
-    expect(chapterEditTabHasError('details', errors)).toBe(false);
-    expect(chapterEditTabHasError('blocks', errors)).toBe(true);
-    expect(chapterEditTabHasError('resources', errors)).toBe(false);
-  });
-
-  test('flags Resources for bundle.resources', () => {
-    const errors = { 'bundle.resources.0': ['Invalid resource'] };
-
-    expect(chapterEditTabHasError('details', errors)).toBe(false);
-    expect(chapterEditTabHasError('blocks', errors)).toBe(false);
-    expect(chapterEditTabHasError('resources', errors)).toBe(true);
-  });
-
-  test('does not treat bundle.blocksmith as a Blocks error', () => {
-    const errors = { 'bundle.blocksmith': ['Unrelated'] };
-
-    expect(chapterEditTabHasError('blocks', errors)).toBe(false);
-    expect(chapterEditTabHasError('details', errors)).toBe(true);
-    expect(chapterEditTabHasError('resources', errors)).toBe(false);
-  });
-
-  test('does not treat bundle.resourcesmith as a Resources error', () => {
-    const errors = { 'bundle.resourcesmith': ['Unrelated'] };
-
-    expect(chapterEditTabHasError('resources', errors)).toBe(false);
-    expect(chapterEditTabHasError('details', errors)).toBe(true);
-    expect(chapterEditTabHasError('blocks', errors)).toBe(false);
-  });
-});
-
-test.describe('firstChapterEditTabWithError', () => {
-  test('returns Details before Blocks when both have errors', () => {
-    const errors = {
-      'bundle.title': ['Title is required'],
-      'bundle.blocks.0.blockName': ['Block name is required'],
-    };
-
-    expect(firstChapterEditTabWithError(errors)).toBe('Details');
-  });
-
-  test('returns Blocks when only blocks have errors', () => {
-    const errors = { 'bundle.blocks.0.blockName': ['Block name is required'] };
-
-    expect(firstChapterEditTabWithError(errors)).toBe('Blocks');
-  });
-
-  test('returns null when there are no errors', () => {
-    expect(firstChapterEditTabWithError({})).toBeNull();
-  });
-});
diff --git a/tests/unit/devotion-draft-edit-tab-errors.spec.ts b/tests/unit/devotion-draft-edit-tab-errors.spec.ts
new file mode 100644
index 00000000..a6da1d2a
--- /dev/null
+++ b/tests/unit/devotion-draft-edit-tab-errors.spec.ts
@@ -0,0 +1,68 @@
+import { test, expect } from '@playwright/test';
+import {
+  devotionDraftEditTabHasError,
+  firstDevotionDraftEditTabWithError,
+} from '../../src/frontend/stories/devotion-draft-edit-tab-errors.js';
+
+test.describe('devotionDraftEditTabHasError', () => {
+  test('flags Details for bundle.title', () => {
+    const errors = { 'bundle.title': ['Title is required'] };
+
+    expect(devotionDraftEditTabHasError('details', errors)).toBe(true);
+    expect(devotionDraftEditTabHasError('blocks', errors)).toBe(false);
+    expect(devotionDraftEditTabHasError('resources', errors)).toBe(false);
+  });
+
+  test('flags Blocks for bundle.blocks', () => {
+    const errors = { 'bundle.blocks.0.blockName': ['Block name is required'] };
+
+    expect(devotionDraftEditTabHasError('details', errors)).toBe(false);
+    expect(devotionDraftEditTabHasError('blocks', errors)).toBe(true);
+    expect(devotionDraftEditTabHasError('resources', errors)).toBe(false);
+  });
+
+  test('flags Resources for bundle.resources', () => {
+    const errors = { 'bundle.resources.0': ['Invalid resource'] };
+
+    expect(devotionDraftEditTabHasError('details', errors)).toBe(false);
+    expect(devotionDraftEditTabHasError('blocks', errors)).toBe(false);
+    expect(devotionDraftEditTabHasError('resources', errors)).toBe(true);
+  });
+
+  test('does not treat bundle.blocksmith as a Blocks error', () => {
+    const errors = { 'bundle.blocksmith': ['Unrelated'] };
+
+    expect(devotionDraftEditTabHasError('blocks', errors)).toBe(false);
+    expect(devotionDraftEditTabHasError('details', errors)).toBe(true);
+    expect(devotionDraftEditTabHasError('resources', errors)).toBe(false);
+  });
+
+  test('does not treat bundle.resourcesmith as a Resources error', () => {
+    const errors = { 'bundle.resourcesmith': ['Unrelated'] };
+
+    expect(devotionDraftEditTabHasError('resources', errors)).toBe(false);
+    expect(devotionDraftEditTabHasError('details', errors)).toBe(true);
+    expect(devotionDraftEditTabHasError('blocks', errors)).toBe(false);
+  });
+});
+
+test.describe('firstDevotionDraftEditTabWithError', () => {
+  test('returns Details before Blocks when both have errors', () => {
+    const errors = {
+      'bundle.title': ['Title is required'],
+      'bundle.blocks.0.blockName': ['Block name is required'],
+    };
+
+    expect(firstDevotionDraftEditTabWithError(errors)).toBe('Details');
+  });
+
+  test('returns Blocks when only blocks have errors', () => {
+    const errors = { 'bundle.blocks.0.blockName': ['Block name is required'] };
+
+    expect(firstDevotionDraftEditTabWithError(errors)).toBe('Blocks');
+  });
+
+  test('returns null when there are no errors', () => {
+    expect(firstDevotionDraftEditTabWithError({})).toBeNull();
+  });
+});

From b520ded1d85122e39639e084600fcbb6abba352d Mon Sep 17 00:00:00 2001
From: Timothy Koech <timosville@gmail.com>
Date: Thu, 13 Aug 2026 16:23:33 +0300
Subject: [PATCH 09/13] increment: refactor devotion draft editing components
 by consolidating block utilities

---
 .../add-block-toolbar.vue}                    |  0
 .../add-leaders-notes-button.vue}             |  6 +--
 .../block-card-shell.vue}                     |  0
 .../block-empty-state.vue}                    |  4 +-
 .../block-image-field.vue}                    | 18 ++++---
 .../block-rich-text-editor.vue}               |  0
 .../block-role-options.ts}                    |  0
 .../block-scripture-field.vue}                | 16 +++----
 .../block-style-options.ts}                   |  0
 .../block-utils.ts}                           |  6 +--
 .../block-video-field.vue}                    | 20 ++++----
 .../block-visibility.vue}                     |  0
 .../content-add-items-toolbar.vue}            | 21 ++++----
 .../content-block-card.vue}                   | 48 +++++++++----------
 .../dashed-add-button.vue}                    |  0
 .../scripture-block-card.vue}                 | 18 +++----
 .../title-block-card.vue}                     | 14 +++---
 .../devotion-draft-edit-blocks.story.vue      |  5 +-
 .../components/devotion-draft-edit-blocks.vue | 24 +++++-----
 src/frontend/stories/devotion-draft-edit.vue  |  4 +-
 src/frontend/test/mocks.ts                    |  2 +-
 21 files changed, 95 insertions(+), 111 deletions(-)
 rename src/frontend/stories/components/{chapter-blocks/chapter-add-block-toolbar.vue => blocks/add-block-toolbar.vue} (100%)
 rename src/frontend/stories/components/{chapter-blocks/chapter-add-leaders-notes-button.vue => blocks/add-leaders-notes-button.vue} (59%)
 rename src/frontend/stories/components/{chapter-blocks/chapter-block-card-shell.vue => blocks/block-card-shell.vue} (100%)
 rename src/frontend/stories/components/{chapter-blocks/chapter-block-empty-state.vue => blocks/block-empty-state.vue} (85%)
 rename src/frontend/stories/components/{chapter-blocks/chapter-block-image-field.vue => blocks/block-image-field.vue} (84%)
 rename src/frontend/stories/components/{chapter-blocks/chapter-block-rich-text-editor.vue => blocks/block-rich-text-editor.vue} (100%)
 rename src/frontend/stories/components/{chapter-blocks/chapter-block-role-options.ts => blocks/block-role-options.ts} (100%)
 rename src/frontend/stories/components/{chapter-blocks/chapter-block-scripture-field.vue => blocks/block-scripture-field.vue} (95%)
 rename src/frontend/stories/components/{chapter-blocks/chapter-block-style-options.ts => blocks/block-style-options.ts} (100%)
 rename src/frontend/stories/components/{chapter-blocks/chapter-block-utils.ts => blocks/block-utils.ts} (94%)
 rename src/frontend/stories/components/{chapter-blocks/chapter-block-video-field.vue => blocks/block-video-field.vue} (84%)
 rename src/frontend/stories/components/{chapter-blocks/chapter-block-visibility.vue => blocks/block-visibility.vue} (100%)
 rename src/frontend/stories/components/{chapter-blocks/chapter-content-add-items-toolbar.vue => blocks/content-add-items-toolbar.vue} (55%)
 rename src/frontend/stories/components/{chapter-blocks/chapter-content-block-card.vue => blocks/content-block-card.vue} (87%)
 rename src/frontend/stories/components/{chapter-blocks/chapter-dashed-add-button.vue => blocks/dashed-add-button.vue} (100%)
 rename src/frontend/stories/components/{chapter-blocks/chapter-scripture-block-card.vue => blocks/scripture-block-card.vue} (89%)
 rename src/frontend/stories/components/{chapter-blocks/chapter-title-block-card.vue => blocks/title-block-card.vue} (89%)

diff --git a/src/frontend/stories/components/chapter-blocks/chapter-add-block-toolbar.vue b/src/frontend/stories/components/blocks/add-block-toolbar.vue
similarity index 100%
rename from src/frontend/stories/components/chapter-blocks/chapter-add-block-toolbar.vue
rename to src/frontend/stories/components/blocks/add-block-toolbar.vue
diff --git a/src/frontend/stories/components/chapter-blocks/chapter-add-leaders-notes-button.vue b/src/frontend/stories/components/blocks/add-leaders-notes-button.vue
similarity index 59%
rename from src/frontend/stories/components/chapter-blocks/chapter-add-leaders-notes-button.vue
rename to src/frontend/stories/components/blocks/add-leaders-notes-button.vue
index 67d33a83..fe4201c8 100644
--- a/src/frontend/stories/components/chapter-blocks/chapter-add-leaders-notes-button.vue
+++ b/src/frontend/stories/components/blocks/add-leaders-notes-button.vue
@@ -1,14 +1,14 @@
 <template>
-  <ChapterDashedAddButton @click="$emit('click')">
+  <DashedAddButton @click="$emit('click')">
     <UserCog class="size-4" aria-hidden="true" />
     <span>Add Leader Notes</span>
-  </ChapterDashedAddButton>
+  </DashedAddButton>
 </template>
 
 <script setup lang="ts">
 import { UserCog } from '@lucide/vue';
 
-import ChapterDashedAddButton from './chapter-dashed-add-button.vue';
+import DashedAddButton from './dashed-add-button.vue';
 
 defineEmits<{
   click: [];
diff --git a/src/frontend/stories/components/chapter-blocks/chapter-block-card-shell.vue b/src/frontend/stories/components/blocks/block-card-shell.vue
similarity index 100%
rename from src/frontend/stories/components/chapter-blocks/chapter-block-card-shell.vue
rename to src/frontend/stories/components/blocks/block-card-shell.vue
diff --git a/src/frontend/stories/components/chapter-blocks/chapter-block-empty-state.vue b/src/frontend/stories/components/blocks/block-empty-state.vue
similarity index 85%
rename from src/frontend/stories/components/chapter-blocks/chapter-block-empty-state.vue
rename to src/frontend/stories/components/blocks/block-empty-state.vue
index 46fdfc51..d2a337f4 100644
--- a/src/frontend/stories/components/chapter-blocks/chapter-block-empty-state.vue
+++ b/src/frontend/stories/components/blocks/block-empty-state.vue
@@ -3,8 +3,8 @@
     <p class="text-center font-dmsans text-base font-normal leading-7 text-studio-forest">
       Add blocks to build out a chapter and shape your content. <br />
       You can add as many blocks as you like. <br />
-      If you're working with repeatable content you'll have the chance to reuse this structure on
-      future chapters.
+      If you're working with repeatable content you'll have the chance to reuse this
+      structure on future chapters.
     </p>
   </div>
 </template>
diff --git a/src/frontend/stories/components/chapter-blocks/chapter-block-image-field.vue b/src/frontend/stories/components/blocks/block-image-field.vue
similarity index 84%
rename from src/frontend/stories/components/chapter-blocks/chapter-block-image-field.vue
rename to src/frontend/stories/components/blocks/block-image-field.vue
index b978b601..63adf752 100644
--- a/src/frontend/stories/components/chapter-blocks/chapter-block-image-field.vue
+++ b/src/frontend/stories/components/blocks/block-image-field.vue
@@ -33,16 +33,14 @@ const fieldName = computed(() =>
 );
 const fieldPath = computed(() => `${rootPath.value}.${fieldName.value}`);
 
-const fieldSpec = computed(
-  (): FieldSpec => ({
-    label: props.label,
-    name: fieldName.value,
-    widget: 'image',
-    description: 'PNG, JPG • Recommended 1280x720px',
-    extensions: ['.jpeg', '.jpg', '.png'],
-    maxSize: 5662310,
-  }),
-);
+const fieldSpec = computed((): FieldSpec => ({
+  label: props.label,
+  name: fieldName.value,
+  widget: 'image',
+  description: 'PNG, JPG • Recommended 1280x720px',
+  extensions: ['.jpeg', '.jpg', '.png'],
+  maxSize: 5662310,
+}));
 
 const readValue = (): string => model.getField(fieldPath.value, '') as string;
 
diff --git a/src/frontend/stories/components/chapter-blocks/chapter-block-rich-text-editor.vue b/src/frontend/stories/components/blocks/block-rich-text-editor.vue
similarity index 100%
rename from src/frontend/stories/components/chapter-blocks/chapter-block-rich-text-editor.vue
rename to src/frontend/stories/components/blocks/block-rich-text-editor.vue
diff --git a/src/frontend/stories/components/chapter-blocks/chapter-block-role-options.ts b/src/frontend/stories/components/blocks/block-role-options.ts
similarity index 100%
rename from src/frontend/stories/components/chapter-blocks/chapter-block-role-options.ts
rename to src/frontend/stories/components/blocks/block-role-options.ts
diff --git a/src/frontend/stories/components/chapter-blocks/chapter-block-scripture-field.vue b/src/frontend/stories/components/blocks/block-scripture-field.vue
similarity index 95%
rename from src/frontend/stories/components/chapter-blocks/chapter-block-scripture-field.vue
rename to src/frontend/stories/components/blocks/block-scripture-field.vue
index bc2ac0d5..9fe374ac 100644
--- a/src/frontend/stories/components/chapter-blocks/chapter-block-scripture-field.vue
+++ b/src/frontend/stories/components/blocks/block-scripture-field.vue
@@ -73,19 +73,17 @@ const fieldName = computed(() =>
   props.itemId ? `items.${props.itemId}.scripture` : 'scripture',
 );
 const scripturePath = computed(() => `${rootPath.value}.${fieldName.value}`);
-const useCustomLabels = computed(
-  () => Boolean(props.referenceLabel && props.passageLabel),
+const useCustomLabels = computed(() =>
+  Boolean(props.referenceLabel && props.passageLabel),
 );
 const referenceInputId = computed(() => `${props.blockId}-${fieldName.value}-reference`);
 const passageInputId = computed(() => `${props.blockId}-${fieldName.value}-passage`);
 
-const fieldSpec = computed(
-  (): FieldSpec => ({
-    label: props.label,
-    name: fieldName.value,
-    widget: 'scripture',
-  }),
-);
+const fieldSpec = computed((): FieldSpec => ({
+  label: props.label,
+  name: fieldName.value,
+  widget: 'scripture',
+}));
 
 const readScripture = (): Scripture =>
   model.getField(scripturePath.value, { reference: '', verse: '' }) as Scripture;
diff --git a/src/frontend/stories/components/chapter-blocks/chapter-block-style-options.ts b/src/frontend/stories/components/blocks/block-style-options.ts
similarity index 100%
rename from src/frontend/stories/components/chapter-blocks/chapter-block-style-options.ts
rename to src/frontend/stories/components/blocks/block-style-options.ts
diff --git a/src/frontend/stories/components/chapter-blocks/chapter-block-utils.ts b/src/frontend/stories/components/blocks/block-utils.ts
similarity index 94%
rename from src/frontend/stories/components/chapter-blocks/chapter-block-utils.ts
rename to src/frontend/stories/components/blocks/block-utils.ts
index 24324b4c..7336c262 100644
--- a/src/frontend/stories/components/chapter-blocks/chapter-block-utils.ts
+++ b/src/frontend/stories/components/blocks/block-utils.ts
@@ -44,9 +44,7 @@ export function createEmptyContentBlock(): ChapterContentBlock {
   };
 }
 
-export function createContentItem(
-  kind: ChapterContentItem['kind'],
-): ChapterContentItem {
+export function createContentItem(kind: ChapterContentItem['kind']): ChapterContentItem {
   const id = createBlockId();
 
   if (kind === 'image') {
@@ -95,7 +93,7 @@ export function normalizeContentBlock(block: ChapterContentBlock): ChapterConten
   return normalized;
 }
 
-export function normalizeChapterBlocks(blocks: ChapterBlock[]): ChapterBlock[] {
+export function normalizeBlocks(blocks: ChapterBlock[]): ChapterBlock[] {
   return blocks.map((block) =>
     block.kind === 'content' ? normalizeContentBlock(block) : block,
   );
diff --git a/src/frontend/stories/components/chapter-blocks/chapter-block-video-field.vue b/src/frontend/stories/components/blocks/block-video-field.vue
similarity index 84%
rename from src/frontend/stories/components/chapter-blocks/chapter-block-video-field.vue
rename to src/frontend/stories/components/blocks/block-video-field.vue
index 0352dfe8..f9a04c96 100644
--- a/src/frontend/stories/components/chapter-blocks/chapter-block-video-field.vue
+++ b/src/frontend/stories/components/blocks/block-video-field.vue
@@ -34,17 +34,15 @@ const fieldName = computed(() =>
 );
 const fieldPath = computed(() => `${rootPath.value}.${fieldName.value}`);
 
-const fieldSpec = computed(
-  (): FieldSpec => ({
-    label: props.label,
-    name: fieldName.value,
-    widget: 'video',
-    description: 'MP4 and MOV files up to 500MB',
-    extensions: ['.mp4', '.mov'],
-    collectionId: props.collectionId,
-    maxSize: 500662310,
-  }),
-);
+const fieldSpec = computed((): FieldSpec => ({
+  label: props.label,
+  name: fieldName.value,
+  widget: 'video',
+  description: 'MP4 and MOV files up to 500MB',
+  extensions: ['.mp4', '.mov'],
+  collectionId: props.collectionId,
+  maxSize: 500662310,
+}));
 
 const readVideo = (): { url: string | null } =>
   model.getField(fieldPath.value, { url: null }) as { url: string | null };
diff --git a/src/frontend/stories/components/chapter-blocks/chapter-block-visibility.vue b/src/frontend/stories/components/blocks/block-visibility.vue
similarity index 100%
rename from src/frontend/stories/components/chapter-blocks/chapter-block-visibility.vue
rename to src/frontend/stories/components/blocks/block-visibility.vue
diff --git a/src/frontend/stories/components/chapter-blocks/chapter-content-add-items-toolbar.vue b/src/frontend/stories/components/blocks/content-add-items-toolbar.vue
similarity index 55%
rename from src/frontend/stories/components/chapter-blocks/chapter-content-add-items-toolbar.vue
rename to src/frontend/stories/components/blocks/content-add-items-toolbar.vue
index 7e9f5b89..f029d9a8 100644
--- a/src/frontend/stories/components/chapter-blocks/chapter-content-add-items-toolbar.vue
+++ b/src/frontend/stories/components/blocks/content-add-items-toolbar.vue
@@ -1,34 +1,31 @@
 <template>
   <div class="mt-6 space-y-3">
     <div class="flex flex-wrap gap-3">
-      <ChapterDashedAddButton :dashed="false" :full-width="false" @click="$emit('addImage')">
+      <DashedAddButton :dashed="false" :full-width="false" @click="$emit('addImage')">
         <Plus class="size-4" aria-hidden="true" />
         <Image class="size-4" aria-hidden="true" />
         <span>Image</span>
-      </ChapterDashedAddButton>
-      <ChapterDashedAddButton :dashed="false" :full-width="false" @click="$emit('addVideo')">
+      </DashedAddButton>
+      <DashedAddButton :dashed="false" :full-width="false" @click="$emit('addVideo')">
         <Plus class="size-4" aria-hidden="true" />
         <Video class="size-4" aria-hidden="true" />
         <span>Video</span>
-      </ChapterDashedAddButton>
-      <ChapterDashedAddButton :dashed="false" :full-width="false" @click="$emit('addScripture')">
+      </DashedAddButton>
+      <DashedAddButton :dashed="false" :full-width="false" @click="$emit('addScripture')">
         <Plus class="size-4" aria-hidden="true" />
         <BookMarked class="size-4" aria-hidden="true" />
         <span>Scripture</span>
-      </ChapterDashedAddButton>
+      </DashedAddButton>
     </div>
-    <ChapterAddLeadersNotesButton
-      v-if="showAddLeadersNotes"
-      @click="$emit('addLeadersNotes')"
-    />
+    <AddLeadersNotesButton v-if="showAddLeadersNotes" @click="$emit('addLeadersNotes')" />
   </div>
 </template>
 
 <script setup lang="ts">
 import { BookMarked, Image, Plus, Video } from '@lucide/vue';
 
-import ChapterAddLeadersNotesButton from './chapter-add-leaders-notes-button.vue';
-import ChapterDashedAddButton from './chapter-dashed-add-button.vue';
+import AddLeadersNotesButton from './add-leaders-notes-button.vue';
+import DashedAddButton from './dashed-add-button.vue';
 
 withDefaults(
   defineProps<{
diff --git a/src/frontend/stories/components/chapter-blocks/chapter-content-block-card.vue b/src/frontend/stories/components/blocks/content-block-card.vue
similarity index 87%
rename from src/frontend/stories/components/chapter-blocks/chapter-content-block-card.vue
rename to src/frontend/stories/components/blocks/content-block-card.vue
index ed858576..8ec9fc17 100644
--- a/src/frontend/stories/components/chapter-blocks/chapter-content-block-card.vue
+++ b/src/frontend/stories/components/blocks/content-block-card.vue
@@ -1,5 +1,5 @@
 <template>
-  <ChapterBlockCardShell
+  <BlockCardShell
     :title="blockTitle"
     :kind-icon="LayoutList"
     :expanded="expanded"
@@ -64,7 +64,7 @@
             <FileText class="size-4 text-gray-500" aria-hidden="true" />
             <span class="input-label mb-0">Text</span>
           </div>
-          <ChapterBlockRichTextEditor
+          <BlockRichTextEditor
             v-model="contentModel"
             placeholder="Enter your content..."
           />
@@ -84,7 +84,7 @@
               </button>
             </div>
             <div class="[&>div]:mt-0">
-              <ChapterBlockImageField
+              <BlockImageField
                 :model-value="item.imageUrl ?? ''"
                 :block-id="block.id"
                 :item-id="item.id"
@@ -107,7 +107,7 @@
               </button>
             </div>
             <div class="[&>div]:mt-0">
-              <ChapterBlockVideoField
+              <BlockVideoField
                 :model-value="item.video ?? { url: null }"
                 :collection-id="videoCollectionId ?? ''"
                 :block-id="block.id"
@@ -118,7 +118,10 @@
             </div>
           </div>
 
-          <div v-else-if="item.kind === 'scripture'" class="border-t border-gray-100 pt-6">
+          <div
+            v-else-if="item.kind === 'scripture'"
+            class="border-t border-gray-100 pt-6"
+          >
             <div class="mb-2 flex items-center justify-between gap-3">
               <span class="input-label mb-0">Scripture</span>
               <button
@@ -130,7 +133,7 @@
                 <Trash2 class="size-4" aria-hidden="true" />
               </button>
             </div>
-            <ChapterBlockScriptureField
+            <BlockScriptureField
               :model-value="item.scripture ?? { reference: '', verse: '' }"
               :block-id="block.id"
               :item-id="item.id"
@@ -144,7 +147,7 @@
         </template>
       </div>
 
-      <ChapterContentAddItemsToolbar
+      <ContentAddItemsToolbar
         :show-add-leaders-notes="!block.showLeadersNotes"
         @add-image="addItem('image')"
         @add-video="addItem('video')"
@@ -186,32 +189,27 @@
     </div>
 
     <template #footer>
-      <ChapterBlockVisibility v-model="visibilityModel" />
+      <BlockVisibility v-model="visibilityModel" />
     </template>
-  </ChapterBlockCardShell>
+  </BlockCardShell>
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue';
-import {
-  Crown,
-  FileText,
-  LayoutList,
-  Trash2,
-} from '@lucide/vue';
+import { Crown, FileText, LayoutList, Trash2 } from '@lucide/vue';
 
 import type { ChapterContentBlock, ChapterContentItem } from '../../../../types';
 import RichListbox from '../../../shared/rich-listbox.vue';
-import ChapterBlockCardShell from './chapter-block-card-shell.vue';
-import ChapterBlockImageField from './chapter-block-image-field.vue';
-import ChapterBlockRichTextEditor from './chapter-block-rich-text-editor.vue';
-import ChapterBlockScriptureField from './chapter-block-scripture-field.vue';
-import ChapterBlockVideoField from './chapter-block-video-field.vue';
-import ChapterBlockVisibility from './chapter-block-visibility.vue';
-import ChapterContentAddItemsToolbar from './chapter-content-add-items-toolbar.vue';
-import { createContentItem } from './chapter-block-utils';
-import { getBlockRoleOptions } from './chapter-block-role-options';
-import { blockStyleOptions } from './chapter-block-style-options';
+import BlockCardShell from './block-card-shell.vue';
+import BlockImageField from './block-image-field.vue';
+import BlockRichTextEditor from './block-rich-text-editor.vue';
+import BlockScriptureField from './block-scripture-field.vue';
+import BlockVideoField from './block-video-field.vue';
+import BlockVisibility from './block-visibility.vue';
+import ContentAddItemsToolbar from './content-add-items-toolbar.vue';
+import { createContentItem } from './block-utils';
+import { getBlockRoleOptions } from './block-role-options';
+import { blockStyleOptions } from './block-style-options';
 
 const props = defineProps<{
   block: ChapterContentBlock;
diff --git a/src/frontend/stories/components/chapter-blocks/chapter-dashed-add-button.vue b/src/frontend/stories/components/blocks/dashed-add-button.vue
similarity index 100%
rename from src/frontend/stories/components/chapter-blocks/chapter-dashed-add-button.vue
rename to src/frontend/stories/components/blocks/dashed-add-button.vue
diff --git a/src/frontend/stories/components/chapter-blocks/chapter-scripture-block-card.vue b/src/frontend/stories/components/blocks/scripture-block-card.vue
similarity index 89%
rename from src/frontend/stories/components/chapter-blocks/chapter-scripture-block-card.vue
rename to src/frontend/stories/components/blocks/scripture-block-card.vue
index 340d9d1a..39a58934 100644
--- a/src/frontend/stories/components/chapter-blocks/chapter-scripture-block-card.vue
+++ b/src/frontend/stories/components/blocks/scripture-block-card.vue
@@ -1,5 +1,5 @@
 <template>
-  <ChapterBlockCardShell
+  <BlockCardShell
     :title="blockTitle"
     :kind-icon="BookMarked"
     :expanded="expanded"
@@ -40,7 +40,7 @@
       />
     </div>
 
-    <ChapterBlockScriptureField
+    <BlockScriptureField
       :model-value="block.scripture"
       :block-id="block.id"
       label="Scripture"
@@ -79,16 +79,16 @@
       />
     </div>
 
-    <ChapterAddLeadersNotesButton
+    <AddLeadersNotesButton
       v-else
       class="mt-6"
       @click="updateField('showLeadersNotes', true)"
     />
 
     <template #footer>
-      <ChapterBlockVisibility v-model="visibilityModel" />
+      <BlockVisibility v-model="visibilityModel" />
     </template>
-  </ChapterBlockCardShell>
+  </BlockCardShell>
 </template>
 
 <script setup lang="ts">
@@ -96,10 +96,10 @@ import { computed } from 'vue';
 import { BookMarked, Crown, Trash2 } from '@lucide/vue';
 
 import type { ChapterScriptureBlock } from '../../../../types';
-import ChapterBlockCardShell from './chapter-block-card-shell.vue';
-import ChapterAddLeadersNotesButton from './chapter-add-leaders-notes-button.vue';
-import ChapterBlockScriptureField from './chapter-block-scripture-field.vue';
-import ChapterBlockVisibility from './chapter-block-visibility.vue';
+import BlockCardShell from './block-card-shell.vue';
+import AddLeadersNotesButton from './add-leaders-notes-button.vue';
+import BlockScriptureField from './block-scripture-field.vue';
+import BlockVisibility from './block-visibility.vue';
 
 const props = defineProps<{
   block: ChapterScriptureBlock;
diff --git a/src/frontend/stories/components/chapter-blocks/chapter-title-block-card.vue b/src/frontend/stories/components/blocks/title-block-card.vue
similarity index 89%
rename from src/frontend/stories/components/chapter-blocks/chapter-title-block-card.vue
rename to src/frontend/stories/components/blocks/title-block-card.vue
index 345d6627..ca66922f 100644
--- a/src/frontend/stories/components/chapter-blocks/chapter-title-block-card.vue
+++ b/src/frontend/stories/components/blocks/title-block-card.vue
@@ -1,5 +1,5 @@
 <template>
-  <ChapterBlockCardShell
+  <BlockCardShell
     :title="blockTitle"
     :kind-icon="PencilLine"
     :expanded="expanded"
@@ -52,7 +52,7 @@
       />
     </div>
 
-    <ChapterBlockImageField
+    <BlockImageField
       :model-value="block.coverImage ?? ''"
       :block-id="block.id"
       label="Cover Image (Optional)"
@@ -60,9 +60,9 @@
     />
     <div class="mt-4"></div>
     <template #footer>
-      <ChapterBlockVisibility v-model="visibilityModel" />
+      <BlockVisibility v-model="visibilityModel" />
     </template>
-  </ChapterBlockCardShell>
+  </BlockCardShell>
 </template>
 
 <script setup lang="ts">
@@ -70,9 +70,9 @@ import { computed } from 'vue';
 import { PencilLine } from '@lucide/vue';
 
 import type { ChapterTitleBlock } from '../../../../types';
-import ChapterBlockCardShell from './chapter-block-card-shell.vue';
-import ChapterBlockImageField from './chapter-block-image-field.vue';
-import ChapterBlockVisibility from './chapter-block-visibility.vue';
+import BlockCardShell from './block-card-shell.vue';
+import BlockImageField from './block-image-field.vue';
+import BlockVisibility from './block-visibility.vue';
 
 const props = defineProps<{
   block: ChapterTitleBlock;
diff --git a/src/frontend/stories/components/devotion-draft-edit-blocks.story.vue b/src/frontend/stories/components/devotion-draft-edit-blocks.story.vue
index d8216aad..513f1a5d 100644
--- a/src/frontend/stories/components/devotion-draft-edit-blocks.story.vue
+++ b/src/frontend/stories/components/devotion-draft-edit-blocks.story.vue
@@ -50,10 +50,7 @@ import {
 import { useWidgetsStore } from '../../store';
 import type { StoryHandler } from '../../shared/helpers';
 import DevotionDraftEditBlocks from './devotion-draft-edit-blocks.vue';
-import {
-  createEmptyContentBlock,
-  createContentItem,
-} from './chapter-blocks/chapter-block-utils';
+import { createEmptyContentBlock, createContentItem } from './blocks/block-utils';
 
 const setupProviders: StoryHandler = (): void => {
   useWidgetsStore().setProviders(mockResourceProviders);
diff --git a/src/frontend/stories/components/devotion-draft-edit-blocks.vue b/src/frontend/stories/components/devotion-draft-edit-blocks.vue
index 28af7778..9bbd894c 100644
--- a/src/frontend/stories/components/devotion-draft-edit-blocks.vue
+++ b/src/frontend/stories/components/devotion-draft-edit-blocks.vue
@@ -1,16 +1,16 @@
 <template>
   <div class="min-w-0 space-y-6 overflow-x-clip">
-    <ChapterAddBlockToolbar
+    <AddBlockToolbar
       v-if="blocks.length === 0"
       @add-title="addTitleBlock"
       @add-scripture="addScriptureBlock"
       @add-content="addContentBlock"
     />
 
-    <ChapterBlockEmptyState v-if="blocks.length === 0" />
+    <BlockEmptyState v-if="blocks.length === 0" />
 
     <template v-for="(block, index) in blocks" :key="block.id">
-      <ChapterContentBlockCard
+      <ContentBlockCard
         v-if="isContentBlock(block)"
         :block="block"
         :expanded="isExpanded(index)"
@@ -23,7 +23,7 @@
         @drop="onDrop(index)"
         @dragend="onDragEnd"
       />
-      <ChapterTitleBlockCard
+      <TitleBlockCard
         v-else-if="block.kind === 'title'"
         :block="block"
         :expanded="isExpanded(index)"
@@ -34,7 +34,7 @@
         @drop="onDrop(index)"
         @dragend="onDragEnd"
       />
-      <ChapterScriptureBlockCard
+      <ScriptureBlockCard
         v-else-if="block.kind === 'scripture'"
         :block="block"
         :expanded="isExpanded(index)"
@@ -47,7 +47,7 @@
       />
     </template>
 
-    <ChapterAddBlockToolbar
+    <AddBlockToolbar
       v-if="blocks.length > 0"
       @add-title="addTitleBlock"
       @add-scripture="addScriptureBlock"
@@ -60,17 +60,17 @@
 import { computed, ref, watch } from 'vue';
 
 import type { ChapterBlock, ChapterContentBlock } from '../../../types';
-import ChapterAddBlockToolbar from './chapter-blocks/chapter-add-block-toolbar.vue';
-import ChapterBlockEmptyState from './chapter-blocks/chapter-block-empty-state.vue';
-import ChapterContentBlockCard from './chapter-blocks/chapter-content-block-card.vue';
-import ChapterScriptureBlockCard from './chapter-blocks/chapter-scripture-block-card.vue';
-import ChapterTitleBlockCard from './chapter-blocks/chapter-title-block-card.vue';
+import AddBlockToolbar from './blocks/add-block-toolbar.vue';
+import BlockEmptyState from './blocks/block-empty-state.vue';
+import ContentBlockCard from './blocks/content-block-card.vue';
+import ScriptureBlockCard from './blocks/scripture-block-card.vue';
+import TitleBlockCard from './blocks/title-block-card.vue';
 import {
   blockKind,
   createEmptyContentBlock,
   createEmptyScriptureBlock,
   createEmptyTitleBlock,
-} from './chapter-blocks/chapter-block-utils';
+} from './blocks/block-utils';
 
 const props = defineProps<{
   blocks: ChapterBlock[];
diff --git a/src/frontend/stories/devotion-draft-edit.vue b/src/frontend/stories/devotion-draft-edit.vue
index 43488162..e39f8e77 100644
--- a/src/frontend/stories/devotion-draft-edit.vue
+++ b/src/frontend/stories/devotion-draft-edit.vue
@@ -88,7 +88,7 @@ import {
   devotionDraftEditTabHasError,
   firstDevotionDraftEditTabWithError,
 } from './devotion-draft-edit-tab-errors';
-import { normalizeChapterBlocks } from './components/chapter-blocks/chapter-block-utils';
+import { normalizeBlocks } from './components/blocks/block-utils';
 
 const resolveDevotionDraftTab = (
   value: string | null,
@@ -124,7 +124,7 @@ const model = useModelStore();
 model.setModel(props.bundle);
 
 const blocks = ref<ChapterBlock[]>(
-  props.bundle.blocks?.length ? normalizeChapterBlocks([...props.bundle.blocks]) : [],
+  props.bundle.blocks?.length ? normalizeBlocks([...props.bundle.blocks]) : [],
 );
 const attachedResources = ref<ResourceItem[]>([...(props.bundle.resources ?? [])]);
 const availableResources = props.availableResources ?? [];
diff --git a/src/frontend/test/mocks.ts b/src/frontend/test/mocks.ts
index e3b7c370..f1db26d0 100644
--- a/src/frontend/test/mocks.ts
+++ b/src/frontend/test/mocks.ts
@@ -22,7 +22,7 @@ import {
   createEmptyScriptureBlock,
   createEmptyTitleBlock,
   createContentItem,
-} from '../stories/components/chapter-blocks/chapter-block-utils';
+} from '../stories/components/blocks/block-utils';
 
 interface Address {
   street: string;

From 5554e1cbe55073863cd658b33842c8906535724a Mon Sep 17 00:00:00 2001
From: Timothy Koech <timosville@gmail.com>
Date: Fri, 14 Aug 2026 08:14:48 +0300
Subject: [PATCH 10/13] increment: enhance devotion draft functionality by
 introducing new types, validation, and editing capabilities

---
 src/backend/index.ts                          |   5 +
 src/backend/services/draft_service.ts         |   6 +
 src/backend/services/helpers.ts               |   2 +
 src/backend/services/story_service.ts         |   1 +
 .../stubs/controllers/drafts_controller.stub  |  36 ++-
 .../stubs/validators/story_validator.stub     |  11 +-
 src/backend/validators/devotion_draft.ts      | 162 +++++++++++++
 .../devotion-draft-edit-details.story.vue     |   4 +-
 src/frontend/stories/devotion-draft-edit.vue  |   2 +-
 src/frontend/test/mocks.ts                    |  13 +-
 src/shared/devotion_draft.ts                  |  67 ++++++
 src/shared/story_helpers.ts                   |   5 +
 src/types.ts                                  |  14 +-
 tests/unit/devotionDraft.spec.ts              |  89 ++++++++
 tests/unit/devotionDraftValidator.spec.ts     | 214 ++++++++++++++++++
 tests/unit/draftService.spec.ts               |  21 ++
 16 files changed, 637 insertions(+), 15 deletions(-)
 create mode 100644 src/backend/validators/devotion_draft.ts
 create mode 100644 src/shared/devotion_draft.ts
 create mode 100644 tests/unit/devotionDraft.spec.ts
 create mode 100644 tests/unit/devotionDraftValidator.spec.ts

diff --git a/src/backend/index.ts b/src/backend/index.ts
index 0ca3236b..93ab26cd 100644
--- a/src/backend/index.ts
+++ b/src/backend/index.ts
@@ -54,6 +54,11 @@ export * from './validators/invitation.js';
 export * from './validators/bundle.js';
 export * from './validators/chapter.js';
 export * from './validators/course.js';
+export * from './validators/devotion_draft.js';
+export {
+  createDevotionDraftBundle,
+  normalizeDevotionDraftBundle,
+} from '../shared/devotion_draft.js';
 export { default as DropValidator } from './validators/drop.js';
 export { default as PageValidator } from './validators/page.js';
 export * from './validators/user.js';
diff --git a/src/backend/services/draft_service.ts b/src/backend/services/draft_service.ts
index 46163318..12a88a06 100644
--- a/src/backend/services/draft_service.ts
+++ b/src/backend/services/draft_service.ts
@@ -2,6 +2,8 @@ import Chapter from '../models/chapter.js';
 import type { FieldMap, FieldSpec, StorySpec, StoryVersion, JSON } from '../../types';
 import { BundleService } from './bundle_service.js';
 import { CmsService } from './cms_service.js';
+import { createDevotionDraftBundle } from '../../shared/devotion_draft.js';
+import { isDevotionTemplate } from '../../shared/story_helpers.js';
 
 export class DraftService {
   public story: StorySpec;
@@ -25,6 +27,10 @@ export class DraftService {
   ): Promise<JSON<any> | null> {
     // is this the source language?
     if (version.locale === this.cms.sourceLocale) {
+      if (isDevotionTemplate(this.story.template)) {
+        return JSON.stringify(createDevotionDraftBundle(number));
+      }
+
       const bundleService = new BundleService(this.story.fields);
       return bundleService.defaultBundle;
     }
diff --git a/src/backend/services/helpers.ts b/src/backend/services/helpers.ts
index cdc4e7bb..0c564e76 100644
--- a/src/backend/services/helpers.ts
+++ b/src/backend/services/helpers.ts
@@ -8,6 +8,8 @@ export {
   canPublishStory,
   canPublishStoryMetadata,
   canPublishStoryReady,
+  DEVOTION_TEMPLATE_ID,
+  isDevotionTemplate,
   missingPublishedChapters,
   storyDetailsBlockedMessages,
   publishBlockedMessage,
diff --git a/src/backend/services/story_service.ts b/src/backend/services/story_service.ts
index ac3bb652..0420d32f 100644
--- a/src/backend/services/story_service.ts
+++ b/src/backend/services/story_service.ts
@@ -429,6 +429,7 @@ export class StoryService {
     return {
       id: story.id,
       name: localisation?.title ?? '',
+      template: story.template,
       coverImage: localisation?.coverImage ?? '',
       chapterLimit: story.chapterLimit,
       chapterType: story.chapterType ?? '',
diff --git a/src/backend/stubs/controllers/drafts_controller.stub b/src/backend/stubs/controllers/drafts_controller.stub
index d4df774f..b8e40263 100644
--- a/src/backend/stubs/controllers/drafts_controller.stub
+++ b/src/backend/stubs/controllers/drafts_controller.stub
@@ -10,7 +10,11 @@ import {
   Draft,
   DraftService,
   IndexService,
+  ResourceService,
   StoryService,
+  isDevotionTemplate,
+  normalizeDevotionDraftBundle,
+  type DevotionDraftEditProps,
   type DraftEditProps,
 } from '@story-cms/kit';
 import cms from '#services/cms';
@@ -33,12 +37,19 @@ export default class DraftsController {
     const bundle = await service.getDraftBundle(version, number);
     if (bundle === null) return ctx.response.redirect('/');
 
-    await Draft.create({
+    const draft = await Draft.create({
       ...version,
       number,
       bundle,
     });
 
+    if (
+      version.locale === cms.sourceLocale &&
+      isDevotionTemplate(story.template)
+    ) {
+      ctx.session.flash('newDevotionDraftId', draft.id);
+    }
+
     await Activity.create({
       userId: ctx.auth.user?.id,
       locale: version.locale,
@@ -100,7 +111,28 @@ export default class DraftsController {
     const isTranslation = version.locale !== cms.sourceLocale;
 
     if (!isTranslation) {
-      // TODO: use DevotionDraftEdit for devotion templates once adopted
+      if (isDevotionTemplate(story.template)) {
+        const bundle = normalizeDevotionDraftBundle(draft.bundle, draft.number);
+        const resourceService = new ResourceService();
+        const [availableResources, resources] = await Promise.all([
+          resourceService.listForLocale(version.locale),
+          resourceService.hydrate(bundle.resources),
+        ]);
+        const createdDraftId = ctx.session.flashMessages.get('newDevotionDraftId');
+        const devotionData: DevotionDraftEditProps = {
+          ...data,
+          bundle: {
+            ...bundle,
+            resources,
+          },
+          availableResources,
+          isCreate: Number(createdDraftId) === draft.id,
+        };
+
+        // @ts-expect-error Inertia page name
+        return ctx.inertia.render('DevotionDraftEdit', devotionData);
+      }
+
       // @ts-expect-error Inertia page name
       return ctx.inertia.render('DraftIndex', data);
     }
diff --git a/src/backend/stubs/validators/story_validator.stub b/src/backend/stubs/validators/story_validator.stub
index 8e29cf98..06c0f025 100644
--- a/src/backend/stubs/validators/story_validator.stub
+++ b/src/backend/stubs/validators/story_validator.stub
@@ -2,7 +2,12 @@
   exports({ to: app.makePath('app/validators/story_validator.ts') })
 }}}
 import vine, { SimpleMessagesProvider } from '@vinejs/vine';
-import type { StorySpec, ValidatorType } from '@story-cms/kit';
+import {
+  DevotionDraftValidator,
+  isDevotionTemplate,
+  type StorySpec,
+  type ValidatorType,
+} from '@story-cms/kit';
 
 // to save us from setting vine.string().trim().minLength(1) everywhere
 vine.convertEmptyStringsToNull = true;
@@ -41,6 +46,10 @@ export default class Story1 implements ValidatorType {
 }
 
 export const storyValidator = (story: StorySpec): ValidatorType => {
+  if (isDevotionTemplate(story.template)) {
+    return new DevotionDraftValidator();
+  }
+
   switch (story.id) {
     case 1:
       return new Story1();
diff --git a/src/backend/validators/devotion_draft.ts b/src/backend/validators/devotion_draft.ts
new file mode 100644
index 00000000..b0f6699b
--- /dev/null
+++ b/src/backend/validators/devotion_draft.ts
@@ -0,0 +1,162 @@
+import vine, { SimpleMessagesProvider } from '@vinejs/vine';
+import type { FieldContext } from '@vinejs/vine/types';
+import type { ValidatorType } from '../../types.js';
+import audioRule from './audio_rule.js';
+import videoRule from './video_rule.js';
+
+const requiredString = () => vine.string().trim().minLength(1);
+
+const visibilitySchema = vine.object({
+  presenter: vine.boolean({ strict: true }),
+  personal: vine.boolean({ strict: true }),
+  inNavigation: vine.boolean({ strict: true }),
+  hidden: vine.boolean({ strict: true }),
+});
+
+const scriptureSchema = vine.object({
+  reference: requiredString(),
+  verse: requiredString(),
+});
+
+const imageItemSchema = vine.object({
+  id: requiredString(),
+  kind: vine.literal('image'),
+  imageUrl: vine.string().trim().url({ require_protocol: true }),
+});
+
+const videoItemSchema = vine.object({
+  id: requiredString(),
+  kind: vine.literal('video'),
+  video: vine
+    .object({
+      url: vine.string().nullable(),
+    })
+    .use(videoRule(null)),
+});
+
+const scriptureItemSchema = vine.object({
+  id: requiredString(),
+  kind: vine.literal('scripture'),
+  scripture: scriptureSchema,
+});
+
+const itemSchema = vine.union([
+  vine.union.if((value) => value.kind === 'image', imageItemSchema),
+  vine.union.if((value) => value.kind === 'video', videoItemSchema),
+  vine.union.if((value) => value.kind === 'scripture', scriptureItemSchema),
+  vine.union.else(
+    vine.object({
+      id: requiredString(),
+      kind: vine.enum(['image', 'video', 'scripture'] as const),
+    }),
+  ),
+]);
+
+const blockBase = {
+  id: requiredString(),
+  blockName: requiredString(),
+  visibility: visibilitySchema,
+};
+
+const contentOrItemRule = vine.createRule(
+  (value: unknown, _options: undefined, field: FieldContext) => {
+    if (!value || typeof value !== 'object' || Array.isArray(value)) return;
+
+    const block = value as Record<string, unknown>;
+    const hasContent = typeof block.content === 'string' && block.content.trim().length > 0;
+    const hasItems = Array.isArray(block.items) && block.items.length > 0;
+    if (!hasContent && !hasItems) {
+      field.report(
+        'A content block must have text or at least one media or scripture item',
+        'contentOrItem',
+        field,
+      );
+    }
+  },
+);
+
+const contentBlockSchema = vine
+  .object({
+    ...blockBase,
+    kind: vine.literal('content'),
+    displayName: requiredString(),
+    blockRole: requiredString(),
+    style: requiredString(),
+    content: vine.string().optional(),
+    items: vine.array(itemSchema).optional(),
+    leadersNotes: vine.string().optional(),
+    showLeadersNotes: vine.boolean({ strict: true }).optional(),
+  })
+  .bail(false)
+  .use(contentOrItemRule());
+
+const titleBlockSchema = vine.object({
+  ...blockBase,
+  kind: vine.literal('title'),
+  title: requiredString(),
+  subtitle: vine.string().optional(),
+  coverImage: vine.string().optional(),
+});
+
+const scriptureBlockSchema = vine.object({
+  ...blockBase,
+  kind: vine.literal('scripture'),
+  displayName: requiredString(),
+  scripture: scriptureSchema,
+  leadersNotes: vine.string().optional(),
+  showLeadersNotes: vine.boolean({ strict: true }).optional(),
+});
+
+const blockSchema = vine.union([
+  vine.union.if((value) => value.kind === 'content', contentBlockSchema),
+  vine.union.if((value) => value.kind === 'title', titleBlockSchema),
+  vine.union.if((value) => value.kind === 'scripture', scriptureBlockSchema),
+  vine.union.else(
+    vine.object({
+      ...blockBase,
+      kind: vine.enum(['content', 'title', 'scripture'] as const),
+    }),
+  ),
+]);
+
+const devotionAudioSchema = vine
+  .object({
+    url: vine.string().nullable(),
+    length: vine.number().nullable(),
+  })
+  .use(audioRule({ canBeEmpty: true }))
+  .optional();
+
+export const devotionDraftErrorMessages = new SimpleMessagesProvider({
+  'bundle.number.required': 'The devotion must have a number',
+  'bundle.number.minLength': 'The devotion must have a number',
+  'bundle.title.required': 'The devotion must have a title',
+  'bundle.title.minLength': 'The devotion must have a title',
+  'bundle.blocks.required': 'The devotion must have at least one block',
+  'bundle.blocks.minLength': 'The devotion must have at least one block',
+  'bundle.blocks.*.id.required': 'Every block must have an ID',
+  'bundle.blocks.*.id.minLength': 'Every block must have an ID',
+  'bundle.blocks.*.blockName.required': 'Every block must have a name',
+  'bundle.blocks.*.blockName.minLength': 'Every block must have a name',
+  'bundle.resources.*.uuid': 'Invalid resource',
+});
+
+export class DevotionDraftValidator implements ValidatorType {
+  validate(data: any): Promise<any> {
+    vine.messagesProvider = devotionDraftErrorMessages;
+
+    const schema = vine.create({
+      bundle: vine.object({
+        number: requiredString(),
+        title: requiredString(),
+        description: vine.string().optional(),
+        coverImage: vine.string().optional(),
+        devotionAudio: devotionAudioSchema,
+        blocks: vine.array(blockSchema).minLength(1),
+        resources: vine.array(vine.string().uuid()).optional(),
+      }),
+    });
+
+    return schema.validate(data);
+  }
+}
diff --git a/src/frontend/stories/components/devotion-draft-edit-details.story.vue b/src/frontend/stories/components/devotion-draft-edit-details.story.vue
index a3235b3d..3a73919d 100644
--- a/src/frontend/stories/components/devotion-draft-edit-details.story.vue
+++ b/src/frontend/stories/components/devotion-draft-edit-details.story.vue
@@ -28,7 +28,7 @@ const emptyChapterModel = {
   title: '',
   description: '',
   coverImage: '',
-  devotionAudio: '',
+  devotionAudio: { url: null, length: null },
 };
 
 const populatedChapterModel = {
@@ -37,7 +37,7 @@ const populatedChapterModel = {
   description: 'An introduction to the Christian faith.',
   coverImage:
     'https://res.cloudinary.com/journeys/image/upload/v1756121793/mountain-placeholder_yuflkz.jpg',
-  devotionAudio: '',
+  devotionAudio: { url: null, length: null },
 };
 
 const loadCreate: StoryHandler = (): void => {
diff --git a/src/frontend/stories/devotion-draft-edit.vue b/src/frontend/stories/devotion-draft-edit.vue
index e39f8e77..4cd31660 100644
--- a/src/frontend/stories/devotion-draft-edit.vue
+++ b/src/frontend/stories/devotion-draft-edit.vue
@@ -230,7 +230,7 @@ const getBundle = () => ({
   title: model.getField('title', ''),
   description: model.getField('description', ''),
   coverImage: model.getField('coverImage', ''),
-  devotionAudio: model.getField('devotionAudio', ''),
+  devotionAudio: model.getField('devotionAudio', { url: null, length: null }),
   blocks: model.getField('blocks', []),
   resources: resourceIds(attachedResources.value),
 });
diff --git a/src/frontend/test/mocks.ts b/src/frontend/test/mocks.ts
index f1db26d0..d6e1989b 100644
--- a/src/frontend/test/mocks.ts
+++ b/src/frontend/test/mocks.ts
@@ -1,5 +1,5 @@
 import type {
-  DevotionDraftBundle,
+  DevotionDraftEditBundle,
   DevotionDraftEditProps,
   FieldSpec,
   LanguageSpecification,
@@ -4749,29 +4749,30 @@ export const sampleDevotionDraftSubmitted = {
   status: 'submitted',
 };
 
-export const emptyDevotionDraftBundle: DevotionDraftBundle = {
+export const emptyDevotionDraftBundle: DevotionDraftEditBundle = {
   number: '',
   title: '',
   description: '',
   coverImage: '',
-  devotionAudio: '',
+  devotionAudio: { url: null, length: null },
   blocks: [],
   resources: [],
 };
 
-export const sampleDevotionDraftBundle: DevotionDraftBundle = {
+export const sampleDevotionDraftBundle: DevotionDraftEditBundle = {
   number: '01',
   title: 'Is there more to life than this?',
   description: 'An introduction to the Christian faith.',
   coverImage:
     'https://res.cloudinary.com/journeys/image/upload/v1756121793/mountain-placeholder_yuflkz.jpg',
-  devotionAudio: '',
+  devotionAudio: { url: null, length: null },
   blocks: sampleMixedChapterBlocks,
   resources: sampleAttachedResources.slice(0, 2),
 };
 
 export const devotionDraftEditStory: StorySpec = {
   ...story,
+  template: 'devotion',
   chapterType: 'Day',
 };
 
@@ -4780,7 +4781,7 @@ export const devotionDraftEditDevotionStory: StorySpec = {
   chapterType: 'Devotion',
 };
 
-export const sampleDevotionChapterBundle: DevotionDraftBundle = {
+export const sampleDevotionChapterBundle: DevotionDraftEditBundle = {
   ...sampleDevotionDraftBundle,
   number: '01',
   title: 'Morning Devotion',
diff --git a/src/shared/devotion_draft.ts b/src/shared/devotion_draft.ts
new file mode 100644
index 00000000..eb784723
--- /dev/null
+++ b/src/shared/devotion_draft.ts
@@ -0,0 +1,67 @@
+import type { ChapterBlock, DevotionDraftBundle } from '../types.js';
+
+const paddedDraftNumber = (number: number): string => String(number).padStart(2, '0');
+
+export const createDevotionDraftBundle = (number: number): DevotionDraftBundle => ({
+  number: paddedDraftNumber(number),
+  title: '',
+  description: '',
+  coverImage: '',
+  devotionAudio: { url: null, length: null },
+  blocks: [],
+  resources: [],
+});
+
+const parsedBundle = (value: unknown): Record<string, unknown> => {
+  if (typeof value === 'string') {
+    try {
+      const parsed = JSON.parse(value) as unknown;
+      return parsed && typeof parsed === 'object' && !Array.isArray(parsed)
+        ? (parsed as Record<string, unknown>)
+        : {};
+    } catch {
+      return {};
+    }
+  }
+
+  return value && typeof value === 'object' && !Array.isArray(value)
+    ? (value as Record<string, unknown>)
+    : {};
+};
+
+const stringValue = (value: unknown, fallback = ''): string =>
+  typeof value === 'string' ? value : fallback;
+
+const normalizedAudio = (
+  value: unknown,
+): DevotionDraftBundle['devotionAudio'] => {
+  if (!value || typeof value !== 'object' || Array.isArray(value)) {
+    return { url: null, length: null };
+  }
+
+  const audio = value as Record<string, unknown>;
+  return {
+    url: typeof audio.url === 'string' ? audio.url : null,
+    length: typeof audio.length === 'number' ? audio.length : null,
+  };
+};
+
+export const normalizeDevotionDraftBundle = (
+  value: unknown,
+  draftNumber: number,
+): DevotionDraftBundle => {
+  const bundle = parsedBundle(value);
+  const fallback = createDevotionDraftBundle(draftNumber);
+
+  return {
+    number: stringValue(bundle.number).trim() || fallback.number,
+    title: stringValue(bundle.title),
+    description: stringValue(bundle.description),
+    coverImage: stringValue(bundle.coverImage),
+    devotionAudio: normalizedAudio(bundle.devotionAudio),
+    blocks: Array.isArray(bundle.blocks) ? (bundle.blocks as ChapterBlock[]) : [],
+    resources: Array.isArray(bundle.resources)
+      ? bundle.resources.filter((id): id is string => typeof id === 'string')
+      : [],
+  };
+};
diff --git a/src/shared/story_helpers.ts b/src/shared/story_helpers.ts
index 320b7e14..47c381fa 100644
--- a/src/shared/story_helpers.ts
+++ b/src/shared/story_helpers.ts
@@ -6,6 +6,11 @@ export interface StoryPublishMetadata {
   visibility: string;
 }
 
+export const DEVOTION_TEMPLATE_ID = 'devotion';
+
+export const isDevotionTemplate = (template: string | null | undefined): boolean =>
+  template === DEVOTION_TEMPLATE_ID;
+
 const isBlank = (value: string | null | undefined): boolean => !value?.trim();
 
 export const storyTypeBlockedMessages = (
diff --git a/src/types.ts b/src/types.ts
index c6fa8f77..236a4e8e 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -294,6 +294,7 @@ export type ChapterBlock =
 export interface StorySpec {
   id: number;
   name: string;
+  template?: string;
   coverImage: string;
   chapterLimit: number;
   chapterType: string;
@@ -498,14 +499,21 @@ export interface DevotionDraftBundle {
   title: string;
   description: string;
   coverImage: string;
-  devotionAudio: string;
+  devotionAudio: {
+    url: string | null;
+    length: number | null;
+  };
   blocks: ChapterBlock[];
-  resources: ResourceItem[];
+  resources: string[];
 }
 
+export type DevotionDraftEditBundle = Omit<DevotionDraftBundle, 'resources'> & {
+  resources: ResourceItem[];
+};
+
 export interface DevotionDraftEditProps {
   draft: DraftMeta;
-  bundle: DevotionDraftBundle;
+  bundle: DevotionDraftEditBundle;
   story: StorySpec;
   availableResources: ResourceItem[];
   providers: Providers;
diff --git a/tests/unit/devotionDraft.spec.ts b/tests/unit/devotionDraft.spec.ts
new file mode 100644
index 00000000..7983231b
--- /dev/null
+++ b/tests/unit/devotionDraft.spec.ts
@@ -0,0 +1,89 @@
+import { expect, test } from '@playwright/test';
+import {
+  createDevotionDraftBundle,
+  normalizeDevotionDraftBundle,
+} from '../../src/shared/devotion_draft.js';
+import { isDevotionTemplate } from '../../src/shared/story_helpers.js';
+import { resourceIds } from '../../src/frontend/stories/components/resource-utils.js';
+
+test.describe('devotion draft helpers', () => {
+  test('matches only the exact devotion template identifier', () => {
+    expect(isDevotionTemplate('devotion')).toBe(true);
+    expect(isDevotionTemplate('Devotion')).toBe(false);
+    expect(isDevotionTemplate('devotion ')).toBe(false);
+    expect(isDevotionTemplate(undefined)).toBe(false);
+  });
+
+  test('creates the canonical empty bundle with a padded draft number', () => {
+    expect(createDevotionDraftBundle(1)).toEqual({
+      number: '01',
+      title: '',
+      description: '',
+      coverImage: '',
+      devotionAudio: { url: null, length: null },
+      blocks: [],
+      resources: [],
+    });
+    expect(createDevotionDraftBundle(12).number).toBe('12');
+  });
+
+  test('normalizes partial and legacy bundles without discarding content', () => {
+    const block = {
+      id: 'block-1',
+      kind: 'title' as const,
+      blockName: 'Heading',
+      title: 'Welcome',
+      subtitle: '',
+      visibility: {
+        presenter: true,
+        personal: false,
+        inNavigation: true,
+        hidden: false,
+      },
+    };
+
+    expect(
+      normalizeDevotionDraftBundle(
+        {
+          title: 'Existing devotion',
+          devotionAudio: '',
+          blocks: [block],
+          resources: ['resource-1', null, 2],
+        },
+        3,
+      ),
+    ).toEqual({
+      number: '03',
+      title: 'Existing devotion',
+      description: '',
+      coverImage: '',
+      devotionAudio: { url: null, length: null },
+      blocks: [block],
+      resources: ['resource-1'],
+    });
+  });
+
+  test('normalizes a JSON string and nullable audio metadata', () => {
+    expect(
+      normalizeDevotionDraftBundle(
+        JSON.stringify({
+          number: '07',
+          devotionAudio: { url: 'https://example.com/audio.mp3', length: 120 },
+        }),
+        1,
+      ),
+    ).toMatchObject({
+      number: '07',
+      devotionAudio: { url: 'https://example.com/audio.mp3', length: 120 },
+    });
+  });
+
+  test('serializes hydrated editor resources back to persisted IDs', () => {
+    expect(
+      resourceIds([
+        { id: 'resource-2' },
+        { id: 'resource-1' },
+      ] as Parameters<typeof resourceIds>[0]),
+    ).toEqual(['resource-2', 'resource-1']);
+  });
+});
diff --git a/tests/unit/devotionDraftValidator.spec.ts b/tests/unit/devotionDraftValidator.spec.ts
new file mode 100644
index 00000000..a783ef9d
--- /dev/null
+++ b/tests/unit/devotionDraftValidator.spec.ts
@@ -0,0 +1,214 @@
+import { expect, test } from '@playwright/test';
+import vine from '@vinejs/vine';
+import { DevotionDraftValidator } from '../../src/backend/validators/devotion_draft.js';
+
+const visibility = {
+  presenter: true,
+  personal: false,
+  inNavigation: true,
+  hidden: false,
+};
+
+const contentBlock = () => ({
+  id: 'content-1',
+  kind: 'content',
+  blockName: 'Introduction',
+  visibility,
+  displayName: 'Welcome',
+  blockRole: 'introduction',
+  style: 'primary',
+  content: 'A short introduction.',
+  items: [],
+  leadersNotes: '',
+  showLeadersNotes: false,
+});
+
+const titleBlock = () => ({
+  id: 'title-1',
+  kind: 'title',
+  blockName: 'Title',
+  visibility,
+  title: 'God is faithful',
+  subtitle: '',
+  coverImage: '',
+});
+
+const scriptureBlock = () => ({
+  id: 'scripture-1',
+  kind: 'scripture',
+  blockName: 'Scripture',
+  visibility,
+  displayName: 'Read the passage',
+  scripture: { reference: 'John 3:16', verse: 'For God so loved the world.' },
+  leadersNotes: '',
+  showLeadersNotes: false,
+});
+
+const validData = () => ({
+  bundle: {
+    number: '01',
+    title: 'Morning devotion',
+    description: '',
+    coverImage: '',
+    devotionAudio: { url: null, length: null },
+    blocks: [contentBlock(), titleBlock(), scriptureBlock()],
+    resources: ['00000000-0000-4000-8000-000000000001'],
+  },
+});
+
+type ValidationError = {
+  messages?: Array<{ message: string; rule: string; field: string }>;
+};
+
+async function validationFields(data: unknown): Promise<string[]> {
+  try {
+    await new DevotionDraftValidator().validate(data);
+    return [];
+  } catch (error) {
+    return ((error as ValidationError).messages ?? []).map((message) => message.field);
+  }
+}
+
+test.describe('DevotionDraftValidator', () => {
+  test.beforeEach(() => {
+    vine.convertEmptyStringsToNull = false;
+  });
+
+  test('accepts valid mixed blocks and optional fields', async () => {
+    const result = await new DevotionDraftValidator().validate(validData());
+
+    expect(result.bundle.blocks).toHaveLength(3);
+    expect(result.bundle.devotionAudio).toEqual({ url: null, length: null });
+  });
+
+  test('accepts a valid bundle when optional fields are omitted', async () => {
+    const data: any = validData();
+    delete data.bundle.description;
+    delete data.bundle.coverImage;
+    delete data.bundle.devotionAudio;
+    delete data.bundle.resources;
+    delete data.bundle.blocks[0].leadersNotes;
+    delete data.bundle.blocks[0].showLeadersNotes;
+    delete data.bundle.blocks[1].subtitle;
+    delete data.bundle.blocks[1].coverImage;
+    delete data.bundle.blocks[2].leadersNotes;
+    delete data.bundle.blocks[2].showLeadersNotes;
+
+    await expect(new DevotionDraftValidator().validate(data)).resolves.toBeDefined();
+  });
+
+  test('accepts content supplied by a valid image, video, or scripture item', async () => {
+    const itemBlocks = [
+      { id: 'image-1', kind: 'image', imageUrl: 'https://example.com/image.jpg' },
+      { id: 'video-1', kind: 'video', video: { url: 'https://example.com/video.mp4' } },
+      {
+        id: 'verse-1',
+        kind: 'scripture',
+        scripture: { reference: 'Psalm 23:1', verse: 'The Lord is my shepherd.' },
+      },
+    ].map((item, index) => ({
+      ...contentBlock(),
+      id: `content-${index}`,
+      content: '',
+      items: [item],
+    }));
+    const data = validData();
+    data.bundle.blocks = itemBlocks;
+
+    await expect(new DevotionDraftValidator().validate(data)).resolves.toBeDefined();
+  });
+
+  test('accepts content text without an items property', async () => {
+    const withoutItems: Partial<ReturnType<typeof contentBlock>> = {
+      ...contentBlock(),
+    };
+    delete withoutItems.items;
+    const data = validData();
+    data.bundle.blocks = [withoutItems] as typeof data.bundle.blocks;
+
+    await expect(new DevotionDraftValidator().validate(data)).resolves.toBeDefined();
+  });
+
+  test('requires number, title, and at least one block', async () => {
+    const data = validData();
+    data.bundle.number = '';
+    data.bundle.title = '';
+    data.bundle.blocks = [];
+
+    expect(await validationFields(data)).toEqual(
+      expect.arrayContaining(['bundle.number', 'bundle.title', 'bundle.blocks']),
+    );
+  });
+
+  test('requires the shared fields on every block', async () => {
+    const data = validData();
+    data.bundle.blocks = [
+      {
+        ...contentBlock(),
+        id: '',
+        blockName: '',
+        visibility: undefined as never,
+      },
+    ];
+
+    expect(await validationFields(data)).toEqual(
+      expect.arrayContaining([
+        'bundle.blocks.0.id',
+        'bundle.blocks.0.blockName',
+        'bundle.blocks.0.visibility',
+      ]),
+    );
+  });
+
+  test('requires complete content, title, and scripture block details', async () => {
+    const data = validData();
+    data.bundle.blocks = [
+      {
+        ...contentBlock(),
+        displayName: '',
+        blockRole: '',
+        style: '',
+        content: '',
+        items: [],
+      },
+      { ...titleBlock(), title: '' },
+      {
+        ...scriptureBlock(),
+        displayName: '',
+        scripture: { reference: '', verse: '' },
+      },
+    ];
+
+    expect(await validationFields(data)).toEqual(
+      expect.arrayContaining([
+        'bundle.blocks.0.displayName',
+        'bundle.blocks.0.blockRole',
+        'bundle.blocks.0.style',
+        'bundle.blocks.0',
+        'bundle.blocks.1.title',
+        'bundle.blocks.2.displayName',
+        'bundle.blocks.2.scripture.reference',
+        'bundle.blocks.2.scripture.verse',
+      ]),
+    );
+  });
+
+  test('rejects invalid resource and media values with nested paths', async () => {
+    const data = validData();
+    data.bundle.resources = ['not-a-resource-id'];
+    data.bundle.blocks = [
+      {
+        ...contentBlock(),
+        content: '',
+        items: [{ id: 'image-1', kind: 'image', imageUrl: 'not-a-url' }],
+      },
+    ];
+
+    expect(await validationFields(data)).toEqual(
+      expect.arrayContaining([
+        'bundle.resources.0',
+        'bundle.blocks.0.items.0.imageUrl',
+      ]),
+    );
+  });
+});
diff --git a/tests/unit/draftService.spec.ts b/tests/unit/draftService.spec.ts
index 49a9710a..d56555ec 100644
--- a/tests/unit/draftService.spec.ts
+++ b/tests/unit/draftService.spec.ts
@@ -122,6 +122,27 @@ test.describe('DraftService.getDraftBundle', () => {
     expect((mockQueryBuilder as any).lastWhereCall).toBeUndefined();
   });
 
+  test('returns the devotion bundle for a source-locale devotion story', async () => {
+    storySpec.template = 'devotion';
+    const draftService = new DraftService(storySpec, mockCms);
+
+    const result = await draftService.getDraftBundle(
+      { apiVersion: 1, locale: 'en', storyId: storySpec.id },
+      4,
+    );
+
+    expect(JSON.parse(result!)).toEqual({
+      number: '04',
+      title: '',
+      description: '',
+      coverImage: '',
+      devotionAudio: { url: null, length: null },
+      blocks: [],
+      resources: [],
+    });
+    expect((mockQueryBuilder as any).lastWhereCall).toBeUndefined();
+  });
+
   test('returns fresh bundle from source chapter for translation', async () => {
     // arrange
     const draftService = new DraftService(storySpec, mockCms);

From 62918989ae1704b43d77ccf423515bf163b2c795 Mon Sep 17 00:00:00 2001
From: Timothy Koech <timosville@gmail.com>
Date: Fri, 14 Aug 2026 09:13:05 +0300
Subject: [PATCH 11/13] increment: handle validation erros

---
 .../components/blocks/block-card-shell.vue    |  6 +-
 .../components/blocks/block-empty-state.vue   | 12 +++
 .../components/blocks/block-field-errors.ts   | 48 +++++++++++
 .../components/blocks/block-image-field.vue   | 12 +--
 .../blocks/block-scripture-field.vue          | 61 ++++++++++++--
 .../components/blocks/block-video-field.vue   | 10 +--
 .../components/blocks/content-block-card.vue  | 71 +++++++++++-----
 .../blocks/scripture-block-card.vue           | 17 +++-
 .../components/blocks/title-block-card.vue    | 21 ++++-
 .../blocks/use-block-field-errors.ts          | 40 +++++++++
 .../components/devotion-draft-edit-blocks.vue | 37 ++++++++-
 .../stories/devotion-draft-edit.story.vue     |  4 +-
 src/frontend/stories/devotion-draft-edit.vue  |  5 +-
 src/frontend/test/mocks.ts                    |  5 +-
 tests/unit/block-field-errors.spec.ts         | 82 +++++++++++++++++++
 15 files changed, 382 insertions(+), 49 deletions(-)
 create mode 100644 src/frontend/stories/components/blocks/block-field-errors.ts
 create mode 100644 src/frontend/stories/components/blocks/use-block-field-errors.ts
 create mode 100644 tests/unit/block-field-errors.spec.ts

diff --git a/src/frontend/stories/components/blocks/block-card-shell.vue b/src/frontend/stories/components/blocks/block-card-shell.vue
index d73c1f53..3b6c106d 100644
--- a/src/frontend/stories/components/blocks/block-card-shell.vue
+++ b/src/frontend/stories/components/blocks/block-card-shell.vue
@@ -54,6 +54,9 @@
           </button>
         </div>
         <div class="flex items-center justify-center gap-1">
+          <div v-if="hasError" class="text-error">
+            <CircleAlert class="size-5" aria-hidden="true" />
+          </div>
           <button
             type="button"
             class="rounded-xl p-1.5 text-gray-400 transition-colors hover:bg-red-50 hover:text-red-600"
@@ -94,7 +97,7 @@
 
 <script setup lang="ts">
 import type { Component } from 'vue';
-import { ChevronDown, GripVertical, Monitor, Send, Trash2, User } from '@lucide/vue';
+import { ChevronDown, CircleAlert, GripVertical, Monitor, Send, Trash2, User } from '@lucide/vue';
 
 defineProps<{
   title: string;
@@ -104,6 +107,7 @@ defineProps<{
   personalVisible: boolean;
   navigationVisible: boolean;
   kindLabel: string;
+  hasError?: boolean;
 }>();
 
 const emit = defineEmits<{
diff --git a/src/frontend/stories/components/blocks/block-empty-state.vue b/src/frontend/stories/components/blocks/block-empty-state.vue
index d2a337f4..62c42539 100644
--- a/src/frontend/stories/components/blocks/block-empty-state.vue
+++ b/src/frontend/stories/components/blocks/block-empty-state.vue
@@ -1,5 +1,11 @@
 <template>
   <div class="py-11">
+    <p
+      v-if="errorMessage"
+      class="mb-4 text-center text-sm text-error"
+    >
+      {{ errorMessage }}
+    </p>
     <p class="text-center font-dmsans text-base font-normal leading-7 text-studio-forest">
       Add blocks to build out a chapter and shape your content. <br />
       You can add as many blocks as you like. <br />
@@ -8,3 +14,9 @@
     </p>
   </div>
 </template>
+
+<script setup lang="ts">
+defineProps<{
+  errorMessage?: string;
+}>();
+</script>
diff --git a/src/frontend/stories/components/blocks/block-field-errors.ts b/src/frontend/stories/components/blocks/block-field-errors.ts
new file mode 100644
index 00000000..c0058039
--- /dev/null
+++ b/src/frontend/stories/components/blocks/block-field-errors.ts
@@ -0,0 +1,48 @@
+type ValidationErrors = Record<string, string | string[]>;
+
+function normalizeMessages(messages: string | string[] | undefined): string[] {
+  if (!messages) return [];
+  return Array.isArray(messages) ? messages : [messages];
+}
+
+function blockPrefix(blockIndex: number): string {
+  return `bundle.blocks.${blockIndex}`;
+}
+
+export function blockFieldErrorMessages(
+  errors: ValidationErrors,
+  blockIndex: number,
+  field: string,
+): string[] {
+  return normalizeMessages(errors[`${blockPrefix(blockIndex)}.${field}`]);
+}
+
+export function blockItemFieldErrorMessages(
+  errors: ValidationErrors,
+  blockIndex: number,
+  itemIndex: number,
+  field: string,
+): string[] {
+  return normalizeMessages(
+    errors[`${blockPrefix(blockIndex)}.items.${itemIndex}.${field}`],
+  );
+}
+
+export function blockHasError(errors: ValidationErrors, blockIndex: number): boolean {
+  const prefix = blockPrefix(blockIndex);
+  return Object.keys(errors).some((key) => key === prefix || key.startsWith(`${prefix}.`));
+}
+
+export function blockLevelErrorMessages(
+  errors: ValidationErrors,
+  blockIndex: number,
+): string[] {
+  return normalizeMessages(errors[blockPrefix(blockIndex)]);
+}
+
+export function blocksArrayErrorMessages(errors: ValidationErrors): string[] {
+  return [
+    ...normalizeMessages(errors['bundle.blocks']),
+    ...normalizeMessages(errors['bundle.blocks.minLength']),
+  ];
+}
diff --git a/src/frontend/stories/components/blocks/block-image-field.vue b/src/frontend/stories/components/blocks/block-image-field.vue
index 63adf752..3d6ad8b4 100644
--- a/src/frontend/stories/components/blocks/block-image-field.vue
+++ b/src/frontend/stories/components/blocks/block-image-field.vue
@@ -12,12 +12,12 @@ import { useModelStore } from '../../../store';
 const props = withDefaults(
   defineProps<{
     modelValue: string;
-    blockId: string;
-    itemId?: string;
+    blockIndex: number;
+    itemIndex?: number;
     label?: string;
   }>(),
   {
-    itemId: undefined,
+    itemIndex: undefined,
     label: 'Cover Image',
   },
 );
@@ -27,9 +27,11 @@ const emit = defineEmits<{
 }>();
 
 const model = useModelStore();
-const rootPath = computed(() => `_chapterBlocks.${props.blockId}`);
+const rootPath = computed(() => `blocks.${props.blockIndex}`);
 const fieldName = computed(() =>
-  props.itemId ? `items.${props.itemId}.imageUrl` : 'coverImage',
+  props.itemIndex === undefined
+    ? 'coverImage'
+    : `items.${props.itemIndex}.imageUrl`,
 );
 const fieldPath = computed(() => `${rootPath.value}.${fieldName.value}`);
 
diff --git a/src/frontend/stories/components/blocks/block-scripture-field.vue b/src/frontend/stories/components/blocks/block-scripture-field.vue
index 9fe374ac..bb8b9575 100644
--- a/src/frontend/stories/components/blocks/block-scripture-field.vue
+++ b/src/frontend/stories/components/blocks/block-scripture-field.vue
@@ -14,9 +14,13 @@
         type="text"
         :placeholder="referencePlaceholder"
         class="input-field mt-[2px]"
+        :class="{ 'border-error': referenceHasError }"
         @input="emitScripture"
         @blur="lookup"
       />
+      <p v-if="referenceHasError" class="text-sm text-error">
+        {{ referenceErrorMessage }}
+      </p>
     </div>
     <div>
       <label :for="passageInputId" class="input-label">{{ passageLabel }}</label>
@@ -26,8 +30,12 @@
         rows="6"
         :placeholder="passagePlaceholder"
         class="input-field mt-[2px] min-h-[120px] resize-y"
+        :class="{ 'border-error': verseHasError }"
         @input="emitScripture"
       />
+      <p v-if="verseHasError" class="text-sm text-error">
+        {{ verseErrorMessage }}
+      </p>
     </div>
   </div>
 </template>
@@ -39,12 +47,16 @@ import type { FieldSpec, Scripture } from '../../../../types';
 import ScriptureField from '../../../fields/scripture-field.vue';
 import { parseReference } from '../../../shared/helpers';
 import { useModelStore, useSharedStore, useWidgetsStore } from '../../../store';
+import {
+  blockFieldErrorMessages,
+  blockItemFieldErrorMessages,
+} from './block-field-errors';
 
 const props = withDefaults(
   defineProps<{
     modelValue: Scripture;
-    blockId: string;
-    itemId?: string;
+    blockIndex: number;
+    itemIndex?: number;
     label?: string;
     referenceLabel?: string;
     passageLabel?: string;
@@ -52,7 +64,7 @@ const props = withDefaults(
     passagePlaceholder?: string;
   }>(),
   {
-    itemId: undefined,
+    itemIndex: undefined,
     label: 'Scripture',
     referenceLabel: undefined,
     passageLabel: undefined,
@@ -68,16 +80,20 @@ const emit = defineEmits<{
 const model = useModelStore();
 const shared = useSharedStore();
 const provider = useWidgetsStore().providers.scripture;
-const rootPath = computed(() => `_chapterBlocks.${props.blockId}`);
+const rootPath = computed(() => `blocks.${props.blockIndex}`);
 const fieldName = computed(() =>
-  props.itemId ? `items.${props.itemId}.scripture` : 'scripture',
+  props.itemIndex === undefined
+    ? 'scripture'
+    : `items.${props.itemIndex}.scripture`,
 );
 const scripturePath = computed(() => `${rootPath.value}.${fieldName.value}`);
 const useCustomLabels = computed(() =>
   Boolean(props.referenceLabel && props.passageLabel),
 );
-const referenceInputId = computed(() => `${props.blockId}-${fieldName.value}-reference`);
-const passageInputId = computed(() => `${props.blockId}-${fieldName.value}-passage`);
+const referenceInputId = computed(
+  () => `${props.blockIndex}-${fieldName.value}-reference`,
+);
+const passageInputId = computed(() => `${props.blockIndex}-${fieldName.value}-verse`);
 
 const fieldSpec = computed((): FieldSpec => ({
   label: props.label,
@@ -91,6 +107,35 @@ const readScripture = (): Scripture =>
 const reference = ref(props.modelValue.reference);
 const verse = ref(props.modelValue.verse);
 
+const scriptureReferenceMessages = computed(() => {
+  if (props.itemIndex === undefined) {
+    return blockFieldErrorMessages(shared.errors, props.blockIndex, 'scripture.reference');
+  }
+  return blockItemFieldErrorMessages(
+    shared.errors,
+    props.blockIndex,
+    props.itemIndex,
+    'scripture.reference',
+  );
+});
+
+const scriptureVerseMessages = computed(() => {
+  if (props.itemIndex === undefined) {
+    return blockFieldErrorMessages(shared.errors, props.blockIndex, 'scripture.verse');
+  }
+  return blockItemFieldErrorMessages(
+    shared.errors,
+    props.blockIndex,
+    props.itemIndex,
+    'scripture.verse',
+  );
+});
+
+const referenceHasError = computed(() => scriptureReferenceMessages.value.length > 0);
+const verseHasError = computed(() => scriptureVerseMessages.value.length > 0);
+const referenceErrorMessage = computed(() => scriptureReferenceMessages.value[0] ?? '');
+const verseErrorMessage = computed(() => scriptureVerseMessages.value[0] ?? '');
+
 const syncPropsToModel = (value: Scripture) => {
   const current = readScripture();
   if (current.reference === value.reference && current.verse === value.verse) {
@@ -146,7 +191,7 @@ const lookup = async () => {
 };
 
 watch(
-  () => props.blockId,
+  () => props.blockIndex,
   () => {
     model.setField(scripturePath.value, { ...props.modelValue });
   },
diff --git a/src/frontend/stories/components/blocks/block-video-field.vue b/src/frontend/stories/components/blocks/block-video-field.vue
index f9a04c96..ecfbde14 100644
--- a/src/frontend/stories/components/blocks/block-video-field.vue
+++ b/src/frontend/stories/components/blocks/block-video-field.vue
@@ -13,12 +13,12 @@ const props = withDefaults(
   defineProps<{
     modelValue: { url: string | null };
     collectionId: string;
-    blockId: string;
-    itemId?: string;
+    blockIndex: number;
+    itemIndex?: number;
     label?: string;
   }>(),
   {
-    itemId: undefined,
+    itemIndex: undefined,
     label: 'Video',
   },
 );
@@ -28,9 +28,9 @@ const emit = defineEmits<{
 }>();
 
 const model = useModelStore();
-const rootPath = computed(() => `_chapterBlocks.${props.blockId}`);
+const rootPath = computed(() => `blocks.${props.blockIndex}`);
 const fieldName = computed(() =>
-  props.itemId ? `items.${props.itemId}.video` : 'video',
+  props.itemIndex === undefined ? 'video' : `items.${props.itemIndex}.video`,
 );
 const fieldPath = computed(() => `${rootPath.value}.${fieldName.value}`);
 
diff --git a/src/frontend/stories/components/blocks/content-block-card.vue b/src/frontend/stories/components/blocks/content-block-card.vue
index 8ec9fc17..21076436 100644
--- a/src/frontend/stories/components/blocks/content-block-card.vue
+++ b/src/frontend/stories/components/blocks/content-block-card.vue
@@ -3,6 +3,7 @@
     :title="blockTitle"
     :kind-icon="LayoutList"
     :expanded="expanded"
+    :has-error="hasError"
     :presenter-visible="block.visibility.presenter && !block.visibility.hidden"
     :personal-visible="block.visibility.personal && !block.visibility.hidden"
     :navigation-visible="block.visibility.inNavigation && !block.visibility.hidden"
@@ -21,9 +22,13 @@
         :value="block.blockName"
         placeholder="e.g., Summary, Introduction, Overview"
         class="input-field mt-[2px]"
+        :class="{ 'border-error': fieldHasError('blockName') }"
         @input="updateField('blockName', ($event.target as HTMLInputElement).value)"
       />
-      <p class="mt-1 text-sm italic text-gray-500">
+      <p v-if="fieldHasError('blockName')" class="text-sm text-error">
+        {{ fieldMessages('blockName')[0] }}
+      </p>
+      <p v-else class="mt-1 text-sm italic text-gray-500">
         This becomes the collapsible section name
       </p>
     </div>
@@ -36,27 +41,44 @@
         :value="block.displayName"
         placeholder="e.g., Session Summary"
         class="input-field mt-[2px]"
+        :class="{ 'border-error': fieldHasError('displayName') }"
         @input="updateField('displayName', ($event.target as HTMLInputElement).value)"
       />
+      <p v-if="fieldHasError('displayName')" class="text-sm text-error">
+        {{ fieldMessages('displayName')[0] }}
+      </p>
     </div>
 
-    <RichListbox
-      :model-value="block.blockRole"
-      label="Block Role"
-      :options="blockRoleOptions"
-      @update:model-value="updateField('blockRole', $event)"
-    />
+    <div>
+      <RichListbox
+        :model-value="block.blockRole"
+        label="Block Role"
+        :options="blockRoleOptions"
+        @update:model-value="updateField('blockRole', $event)"
+      />
+      <p v-if="fieldHasError('blockRole')" class="text-sm text-error">
+        {{ fieldMessages('blockRole')[0] }}
+      </p>
+    </div>
 
-    <RichListbox
-      :model-value="block.style"
-      label="Block Style"
-      :options="blockStyleOptions"
-      @update:model-value="updateField('style', $event)"
-    />
+    <div>
+      <RichListbox
+        :model-value="block.style"
+        label="Block Style"
+        :options="blockStyleOptions"
+        @update:model-value="updateField('style', $event)"
+      />
+      <p v-if="fieldHasError('style')" class="text-sm text-error">
+        {{ fieldMessages('style')[0] }}
+      </p>
+    </div>
 
     <div>
       <label class="input-label block">Content Items</label>
       <p class="text-sm text-gray-500">Add items that serve this block's role.</p>
+      <p v-if="blockLevelErrors.length" class="mt-2 text-sm text-error">
+        {{ blockLevelErrors[0] }}
+      </p>
 
       <div class="mt-4">
         <div class="pb-6">
@@ -70,7 +92,7 @@
           />
         </div>
 
-        <template v-for="item in block.items" :key="item.id">
+        <template v-for="(item, itemIndex) in block.items" :key="item.id">
           <div v-if="item.kind === 'image'" class="border-t border-gray-100 pt-6">
             <div class="mb-2 flex items-center justify-between gap-3">
               <span class="input-label mb-0">Image</span>
@@ -86,8 +108,8 @@
             <div class="[&>div]:mt-0">
               <BlockImageField
                 :model-value="item.imageUrl ?? ''"
-                :block-id="block.id"
-                :item-id="item.id"
+                :block-index="blockIndex"
+                :item-index="itemIndex"
                 label=""
                 @update:model-value="updateItem(item.id, { imageUrl: $event })"
               />
@@ -110,8 +132,8 @@
               <BlockVideoField
                 :model-value="item.video ?? { url: null }"
                 :collection-id="videoCollectionId ?? ''"
-                :block-id="block.id"
-                :item-id="item.id"
+                :block-index="blockIndex"
+                :item-index="itemIndex"
                 label=""
                 @update:model-value="updateItem(item.id, { video: $event })"
               />
@@ -135,8 +157,8 @@
             </div>
             <BlockScriptureField
               :model-value="item.scripture ?? { reference: '', verse: '' }"
-              :block-id="block.id"
-              :item-id="item.id"
+              :block-index="blockIndex"
+              :item-index="itemIndex"
               reference-label="Bible Reference"
               passage-label="Scripture Text"
               reference-placeholder="e.g., John 3:16, Romans 8:28–30"
@@ -210,9 +232,11 @@ import ContentAddItemsToolbar from './content-add-items-toolbar.vue';
 import { createContentItem } from './block-utils';
 import { getBlockRoleOptions } from './block-role-options';
 import { blockStyleOptions } from './block-style-options';
+import { useBlockFieldErrors } from './use-block-field-errors';
 
 const props = defineProps<{
   block: ChapterContentBlock;
+  blockIndex: number;
   expanded: boolean;
   videoCollectionId?: string;
   chapterType?: string | null;
@@ -227,6 +251,13 @@ const emit = defineEmits<{
   dragend: [];
 }>();
 
+const {
+  hasError,
+  blockLevelErrors,
+  fieldMessages,
+  fieldHasError,
+} = useBlockFieldErrors(props.blockIndex);
+
 const blockTitle = computed(() =>
   props.block.blockName.trim() ? props.block.blockName.trim() : 'New Content Block',
 );
diff --git a/src/frontend/stories/components/blocks/scripture-block-card.vue b/src/frontend/stories/components/blocks/scripture-block-card.vue
index 39a58934..d86f0b13 100644
--- a/src/frontend/stories/components/blocks/scripture-block-card.vue
+++ b/src/frontend/stories/components/blocks/scripture-block-card.vue
@@ -3,6 +3,7 @@
     :title="blockTitle"
     :kind-icon="BookMarked"
     :expanded="expanded"
+    :has-error="hasError"
     :presenter-visible="block.visibility.presenter && !block.visibility.hidden"
     :personal-visible="block.visibility.personal && !block.visibility.hidden"
     :navigation-visible="block.visibility.inNavigation && !block.visibility.hidden"
@@ -21,9 +22,13 @@
         :value="block.blockName"
         placeholder="e.g., Opening Passage, Key Verse"
         class="input-field mt-[2px]"
+        :class="{ 'border-error': fieldHasError('blockName') }"
         @input="updateField('blockName', ($event.target as HTMLInputElement).value)"
       />
-      <p class="mt-1 text-sm italic text-gray-500">
+      <p v-if="fieldHasError('blockName')" class="text-sm text-error">
+        {{ fieldMessages('blockName')[0] }}
+      </p>
+      <p v-else class="mt-1 text-sm italic text-gray-500">
         This becomes the collapsible section name
       </p>
     </div>
@@ -36,13 +41,17 @@
         :value="block.displayName"
         placeholder="e.g., Opening Scripture"
         class="input-field mt-[2px]"
+        :class="{ 'border-error': fieldHasError('displayName') }"
         @input="updateField('displayName', ($event.target as HTMLInputElement).value)"
       />
+      <p v-if="fieldHasError('displayName')" class="text-sm text-error">
+        {{ fieldMessages('displayName')[0] }}
+      </p>
     </div>
 
     <BlockScriptureField
       :model-value="block.scripture"
-      :block-id="block.id"
+      :block-index="blockIndex"
       label="Scripture"
       @update:model-value="updateField('scripture', $event)"
     />
@@ -100,9 +109,11 @@ import BlockCardShell from './block-card-shell.vue';
 import AddLeadersNotesButton from './add-leaders-notes-button.vue';
 import BlockScriptureField from './block-scripture-field.vue';
 import BlockVisibility from './block-visibility.vue';
+import { useBlockFieldErrors } from './use-block-field-errors';
 
 const props = defineProps<{
   block: ChapterScriptureBlock;
+  blockIndex: number;
   expanded: boolean;
 }>();
 
@@ -115,6 +126,8 @@ const emit = defineEmits<{
   dragend: [];
 }>();
 
+const { hasError, fieldMessages, fieldHasError } = useBlockFieldErrors(props.blockIndex);
+
 const blockTitle = computed(() =>
   props.block.blockName.trim() ? props.block.blockName.trim() : 'New Scripture Block',
 );
diff --git a/src/frontend/stories/components/blocks/title-block-card.vue b/src/frontend/stories/components/blocks/title-block-card.vue
index ca66922f..3696424a 100644
--- a/src/frontend/stories/components/blocks/title-block-card.vue
+++ b/src/frontend/stories/components/blocks/title-block-card.vue
@@ -3,6 +3,7 @@
     :title="blockTitle"
     :kind-icon="PencilLine"
     :expanded="expanded"
+    :has-error="hasError"
     :presenter-visible="block.visibility.presenter && !block.visibility.hidden"
     :personal-visible="block.visibility.personal && !block.visibility.hidden"
     :navigation-visible="block.visibility.inNavigation && !block.visibility.hidden"
@@ -21,9 +22,13 @@
         :value="block.blockName"
         placeholder="e.g., Session Title, Chapter Heading"
         class="input-field mt-[2px]"
+        :class="{ 'border-error': fieldHasError('blockName') }"
         @input="updateField('blockName', ($event.target as HTMLInputElement).value)"
       />
-      <p class="mt-1 text-sm italic text-gray-500">
+      <p v-if="fieldHasError('blockName')" class="text-sm text-error">
+        {{ fieldMessages('blockName')[0] }}
+      </p>
+      <p v-else class="mt-1 text-sm italic text-gray-500">
         This becomes the collapsible section name
       </p>
     </div>
@@ -36,8 +41,12 @@
         :value="block.title"
         placeholder="e.g., The Gospel of John"
         class="input-field mt-[2px]"
+        :class="{ 'border-error': fieldHasError('title') }"
         @input="updateField('title', ($event.target as HTMLInputElement).value)"
       />
+      <p v-if="fieldHasError('title')" class="text-sm text-error">
+        {{ fieldMessages('title')[0] }}
+      </p>
     </div>
 
     <div>
@@ -48,13 +57,17 @@
         :value="block.subtitle"
         placeholder="e.g., Session 1 of 12"
         class="input-field mt-[2px]"
+        :class="{ 'border-error': fieldHasError('subtitle') }"
         @input="updateField('subtitle', ($event.target as HTMLInputElement).value)"
       />
+      <p v-if="fieldHasError('subtitle')" class="text-sm text-error">
+        {{ fieldMessages('subtitle')[0] }}
+      </p>
     </div>
 
     <BlockImageField
       :model-value="block.coverImage ?? ''"
-      :block-id="block.id"
+      :block-index="blockIndex"
       label="Cover Image (Optional)"
       @update:model-value="updateField('coverImage', $event)"
     />
@@ -73,9 +86,11 @@ import type { ChapterTitleBlock } from '../../../../types';
 import BlockCardShell from './block-card-shell.vue';
 import BlockImageField from './block-image-field.vue';
 import BlockVisibility from './block-visibility.vue';
+import { useBlockFieldErrors } from './use-block-field-errors';
 
 const props = defineProps<{
   block: ChapterTitleBlock;
+  blockIndex: number;
   expanded: boolean;
 }>();
 
@@ -88,6 +103,8 @@ const emit = defineEmits<{
   dragend: [];
 }>();
 
+const { hasError, fieldMessages, fieldHasError } = useBlockFieldErrors(props.blockIndex);
+
 const blockTitle = computed(() =>
   props.block.blockName.trim() ? props.block.blockName.trim() : 'New Title Block',
 );
diff --git a/src/frontend/stories/components/blocks/use-block-field-errors.ts b/src/frontend/stories/components/blocks/use-block-field-errors.ts
new file mode 100644
index 00000000..e861234c
--- /dev/null
+++ b/src/frontend/stories/components/blocks/use-block-field-errors.ts
@@ -0,0 +1,40 @@
+import { computed } from 'vue';
+import { storeToRefs } from 'pinia';
+
+import { useSharedStore } from '../../../store';
+import {
+  blockFieldErrorMessages,
+  blockHasError,
+  blockItemFieldErrorMessages,
+  blockLevelErrorMessages,
+} from './block-field-errors';
+
+export function useBlockFieldErrors(blockIndex: number) {
+  const shared = useSharedStore();
+  const { errors } = storeToRefs(shared);
+
+  const hasError = computed(() => blockHasError(errors.value, blockIndex));
+  const blockLevelErrors = computed(() =>
+    blockLevelErrorMessages(errors.value, blockIndex),
+  );
+
+  const fieldMessages = (field: string) =>
+    blockFieldErrorMessages(errors.value, blockIndex, field);
+
+  const fieldHasError = (field: string) => fieldMessages(field).length > 0;
+
+  const itemFieldMessages = (itemIndex: number, field: string) =>
+    blockItemFieldErrorMessages(errors.value, blockIndex, itemIndex, field);
+
+  const itemFieldHasError = (itemIndex: number, field: string) =>
+    itemFieldMessages(itemIndex, field).length > 0;
+
+  return {
+    hasError,
+    blockLevelErrors,
+    fieldMessages,
+    fieldHasError,
+    itemFieldMessages,
+    itemFieldHasError,
+  };
+}
diff --git a/src/frontend/stories/components/devotion-draft-edit-blocks.vue b/src/frontend/stories/components/devotion-draft-edit-blocks.vue
index 9bbd894c..ee87404b 100644
--- a/src/frontend/stories/components/devotion-draft-edit-blocks.vue
+++ b/src/frontend/stories/components/devotion-draft-edit-blocks.vue
@@ -7,12 +7,16 @@
       @add-content="addContentBlock"
     />
 
-    <BlockEmptyState v-if="blocks.length === 0" />
+    <BlockEmptyState
+      v-if="blocks.length === 0"
+      :error-message="blocksArrayError"
+    />
 
     <template v-for="(block, index) in blocks" :key="block.id">
       <ContentBlockCard
         v-if="isContentBlock(block)"
         :block="block"
+        :block-index="index"
         :expanded="isExpanded(index)"
         :video-collection-id="videoCollectionId"
         :chapter-type="chapterType"
@@ -26,6 +30,7 @@
       <TitleBlockCard
         v-else-if="block.kind === 'title'"
         :block="block"
+        :block-index="index"
         :expanded="isExpanded(index)"
         @update:block="updateBlock(index, $event)"
         @delete="deleteBlock(index)"
@@ -37,6 +42,7 @@
       <ScriptureBlockCard
         v-else-if="block.kind === 'scripture'"
         :block="block"
+        :block-index="index"
         :expanded="isExpanded(index)"
         @update:block="updateBlock(index, $event)"
         @delete="deleteBlock(index)"
@@ -58,10 +64,13 @@
 
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue';
+import { storeToRefs } from 'pinia';
 
 import type { ChapterBlock, ChapterContentBlock } from '../../../types';
+import { useSharedStore } from '../../store';
 import AddBlockToolbar from './blocks/add-block-toolbar.vue';
 import BlockEmptyState from './blocks/block-empty-state.vue';
+import { blockHasError, blocksArrayErrorMessages } from './blocks/block-field-errors';
 import ContentBlockCard from './blocks/content-block-card.vue';
 import ScriptureBlockCard from './blocks/scripture-block-card.vue';
 import TitleBlockCard from './blocks/title-block-card.vue';
@@ -82,11 +91,16 @@ const emit = defineEmits<{
   'update:blocks': [blocks: ChapterBlock[]];
 }>();
 
+const shared = useSharedStore();
+const { errors } = storeToRefs(shared);
+
 const blocks = computed({
   get: () => props.blocks,
   set: (value: ChapterBlock[]) => emit('update:blocks', value),
 });
 
+const blocksArrayError = computed(() => blocksArrayErrorMessages(errors.value)[0] ?? '');
+
 const expanded = ref<boolean[]>([]);
 const newlyAddedBlockId = ref<string | null>(null);
 const hasInitialized = ref(false);
@@ -98,6 +112,26 @@ const expandSingleEmptyStarter = () => {
   expanded.value = [true];
 };
 
+const expandErroredBlocks = () => {
+  const count = blocks.value.length;
+  if (count === 0) return;
+
+  const fresh = [...expanded.value];
+  while (fresh.length < count) fresh.push(false);
+
+  let changed = false;
+  for (let index = 0; index < count; index++) {
+    if (blockHasError(errors.value, index) && !fresh[index]) {
+      fresh[index] = true;
+      changed = true;
+    }
+  }
+
+  if (changed) {
+    expanded.value = fresh;
+  }
+};
+
 const syncExpanded = () => {
   const count = blocks.value.length;
   if (expanded.value.length === count) return;
@@ -117,6 +151,7 @@ const syncExpanded = () => {
 };
 
 watch(blocks, syncExpanded, { deep: true, immediate: true });
+watch(errors, expandErroredBlocks, { deep: true, immediate: true });
 
 const isContentBlock = (block: ChapterBlock): block is ChapterContentBlock =>
   blockKind(block) === 'content';
diff --git a/src/frontend/stories/devotion-draft-edit.story.vue b/src/frontend/stories/devotion-draft-edit.story.vue
index fc9e07d8..d68c6618 100644
--- a/src/frontend/stories/devotion-draft-edit.story.vue
+++ b/src/frontend/stories/devotion-draft-edit.story.vue
@@ -218,7 +218,7 @@ const loadValidationErrors: StoryHandler = (context): void => {
   miniSidebar(context);
   useSharedStore().setErrors(devotionDraftEditValidationErrors);
   const url = new URL(window.location.href);
-  url.searchParams.delete('tab');
+  url.searchParams.set('tab', 'Blocks');
   window.history.replaceState({}, '', url.toString());
 };
 </script>
@@ -235,7 +235,7 @@ Tabbed devotion draft editor with Details, Blocks, and Resources. Includes draft
 - **Blocks tab** — opens directly on the Blocks tab
 - **Devotion** — Devotion chapter type with sample blocks, opens on the Blocks tab
 - **Resources tab** — opens directly on the Resources tab
-- **Validation errors on tabs** — error indicators on Details, Blocks, and Resources tabs
+- **Validation errors on tabs** — Blocks tab with inline field errors and tab indicators
 - **Edit review: Submit** — editor with edit-review sees Submit
 - **Edit review: Request change** — admin reviewing a submitted draft
 - **Mark Ready** — admin publish label when never published
diff --git a/src/frontend/stories/devotion-draft-edit.vue b/src/frontend/stories/devotion-draft-edit.vue
index 4cd31660..10db2116 100644
--- a/src/frontend/stories/devotion-draft-edit.vue
+++ b/src/frontend/stories/devotion-draft-edit.vue
@@ -253,10 +253,11 @@ const onSaveSuccess = (message?: string) => {
   shared.addMessage(ResponseStatus.Confirmation, message);
 };
 
-const onSaveError = (_errors: Errors, message: string) => {
+const onSaveError = (validationErrors: Errors, message: string) => {
   widgets.setIsDirty(false);
   isSettingErrors = true;
-  shared.setErrors(props.errors);
+  shared.setErrors(validationErrors);
+  focusFirstErroredTab();
   shared.addMessage(ResponseStatus.Failure, message);
 };
 
diff --git a/src/frontend/test/mocks.ts b/src/frontend/test/mocks.ts
index d6e1989b..025b5ac1 100644
--- a/src/frontend/test/mocks.ts
+++ b/src/frontend/test/mocks.ts
@@ -4827,6 +4827,9 @@ export const devotionDraftEditCreateProps: Omit<DevotionDraftEditProps, 'provide
 
 export const devotionDraftEditValidationErrors: Record<string, string[]> = {
   'bundle.title': ['The title field must have at least 1 character'],
-  'bundle.blocks.0.blockName': ['Block name is required'],
+  'bundle.blocks.0.blockName': ['Every block must have a name'],
+  'bundle.blocks.0': [
+    'A content block must have text or at least one media or scripture item',
+  ],
   'bundle.resources.0': ['Invalid resource'],
 };
diff --git a/tests/unit/block-field-errors.spec.ts b/tests/unit/block-field-errors.spec.ts
new file mode 100644
index 00000000..4b6ad448
--- /dev/null
+++ b/tests/unit/block-field-errors.spec.ts
@@ -0,0 +1,82 @@
+import { test, expect } from '@playwright/test';
+
+import {
+  blockFieldErrorMessages,
+  blockHasError,
+  blockItemFieldErrorMessages,
+  blockLevelErrorMessages,
+  blocksArrayErrorMessages,
+} from '../../src/frontend/stories/components/blocks/block-field-errors.js';
+
+test.describe('blockFieldErrorMessages', () => {
+  test('reads field-level block errors', () => {
+    const errors = {
+      'bundle.blocks.0.blockName': ['Every block must have a name'],
+      'bundle.blocks.1.title': ['Title is required'],
+    };
+
+    expect(blockFieldErrorMessages(errors, 0, 'blockName')).toEqual([
+      'Every block must have a name',
+    ]);
+    expect(blockFieldErrorMessages(errors, 1, 'title')).toEqual(['Title is required']);
+    expect(blockFieldErrorMessages(errors, 0, 'title')).toEqual([]);
+  });
+});
+
+test.describe('blockItemFieldErrorMessages', () => {
+  test('reads nested item field errors', () => {
+    const errors = {
+      'bundle.blocks.0.items.0.imageUrl': ['Invalid image URL'],
+    };
+
+    expect(blockItemFieldErrorMessages(errors, 0, 0, 'imageUrl')).toEqual([
+      'Invalid image URL',
+    ]);
+    expect(blockItemFieldErrorMessages(errors, 0, 1, 'imageUrl')).toEqual([]);
+  });
+});
+
+test.describe('blockHasError', () => {
+  test('matches block-level and nested keys', () => {
+    const errors = {
+      'bundle.blocks.0': [
+        'A content block must have text or at least one media or scripture item',
+      ],
+      'bundle.blocks.1.displayName': ['Display name is required'],
+    };
+
+    expect(blockHasError(errors, 0)).toBe(true);
+    expect(blockHasError(errors, 1)).toBe(true);
+    expect(blockHasError(errors, 2)).toBe(false);
+  });
+});
+
+test.describe('blockLevelErrorMessages', () => {
+  test('reads exact block-level contentOrItem errors', () => {
+    const errors = {
+      'bundle.blocks.0': [
+        'A content block must have text or at least one media or scripture item',
+      ],
+      'bundle.blocks.0.blockName': ['Every block must have a name'],
+    };
+
+    expect(blockLevelErrorMessages(errors, 0)).toEqual([
+      'A content block must have text or at least one media or scripture item',
+    ]);
+  });
+});
+
+test.describe('blocksArrayErrorMessages', () => {
+  test('reads empty blocks array errors', () => {
+    const errors = {
+      'bundle.blocks': ['The devotion must have at least one block'],
+      'bundle.blocks.minLength': ['The devotion must have at least one block'],
+    };
+
+    expect(blocksArrayErrorMessages(errors)).toEqual([
+      'The devotion must have at least one block',
+      'The devotion must have at least one block',
+    ]);
+    expect(blocksArrayErrorMessages({})).toEqual([]);
+  });
+});

From 53cd8595d4ac558749871f007663d586d6199aeb Mon Sep 17 00:00:00 2001
From: Timothy Koech <timosville@gmail.com>
Date: Fri, 14 Aug 2026 09:36:11 +0300
Subject: [PATCH 12/13] increment: handle drag and drop in preview

---
 src/backend/configure.ts                      |  1 +
 src/backend/index.ts                          |  1 +
 .../controllers/chapters_controller.stub      | 18 +++-
 .../resources/views/preview_devotion.stub     | 92 +++++++++++++++++++
 src/shared/preview_bundle.ts                  | 35 +++++++
 src/types.ts                                  |  4 +-
 tests/unit/preview_bundle.spec.ts             | 77 ++++++++++++++++
 7 files changed, 223 insertions(+), 5 deletions(-)
 create mode 100644 src/backend/stubs/resources/views/preview_devotion.stub
 create mode 100644 src/shared/preview_bundle.ts
 create mode 100644 tests/unit/preview_bundle.spec.ts

diff --git a/src/backend/configure.ts b/src/backend/configure.ts
index 28b2500a..6f2295ef 100644
--- a/src/backend/configure.ts
+++ b/src/backend/configure.ts
@@ -152,6 +152,7 @@ export async function configure(command: Configure) {
 
   await codemods.makeUsingStub(stubsRoot, 'resources/layout.stub', {});
   await codemods.makeUsingStub(stubsRoot, 'resources/views/preview.stub', {});
+  await codemods.makeUsingStub(stubsRoot, 'resources/views/preview_devotion.stub', {});
   await codemods.makeUsingStub(stubsRoot, 'resources/views/scripture.stub', {});
 
   await codemods.makeUsingStub(stubsRoot, 'commands/migrate.stub', {});
diff --git a/src/backend/index.ts b/src/backend/index.ts
index 93ab26cd..555a3264 100644
--- a/src/backend/index.ts
+++ b/src/backend/index.ts
@@ -59,6 +59,7 @@ export {
   createDevotionDraftBundle,
   normalizeDevotionDraftBundle,
 } from '../shared/devotion_draft.js';
+export { resolvePreviewBundle } from '../shared/preview_bundle.js';
 export { default as DropValidator } from './validators/drop.js';
 export { default as PageValidator } from './validators/page.js';
 export * from './validators/user.js';
diff --git a/src/backend/stubs/controllers/chapters_controller.stub b/src/backend/stubs/controllers/chapters_controller.stub
index 561847ec..4138ec70 100644
--- a/src/backend/stubs/controllers/chapters_controller.stub
+++ b/src/backend/stubs/controllers/chapters_controller.stub
@@ -10,7 +10,10 @@ import {
   type AddStatus,
   IndexService,
   Chapter,
+  Draft,
+  Story,
   StoryService,
+  resolvePreviewBundle,
 } from '@story-cms/kit';
 import cms from '#services/cms';
 
@@ -47,8 +50,15 @@ export default class ChaptersController {
     };
 
     const chapter = await Chapter.query().where(specifier).firstOrFail();
-    const bundleView = await edge.render({{ '`preview_${story.id}`' }}, {
-      bundle: chapter.bundle,
+    const draft = await Draft.query().where(specifier).first();
+    const storyRecord = await Story.findOrFail(story.id);
+    const bundle = resolvePreviewBundle({
+      chapter,
+      draft,
+      template: storyRecord.template,
+    });
+    const bundleView = await edge.render(`preview_${storyRecord.template}`, {
+      bundle,
       marked: marked,
       number: chapter.number,
     });
@@ -56,8 +66,8 @@ export default class ChaptersController {
     const props: PreviewProps = {
       chapter: chapter.meta,
       bundleView: bundleView,
-      title: chapter.index.title,
-      bundle: chapter.bundle,
+      title: (typeof bundle.title === 'string' ? bundle.title : '') || chapter.index.title,
+      bundle,
       story,
     };
 
diff --git a/src/backend/stubs/resources/views/preview_devotion.stub b/src/backend/stubs/resources/views/preview_devotion.stub
new file mode 100644
index 00000000..ddb0f66c
--- /dev/null
+++ b/src/backend/stubs/resources/views/preview_devotion.stub
@@ -0,0 +1,92 @@
+{{{
+  exports({ to: app.makePath('resources/views/preview_devotion.edge') })
+}}}
+<section>
+  @if(bundle.number)
+  <div class="mb-1 text-sm font-medium leading-5 text-gray-400">Number</div>
+  <div class="text-lg">\{\{ bundle.number \}\}</div>
+  @end
+
+  @if(bundle.title)
+  <div class="mt-6 mb-1 text-sm font-medium leading-5 text-gray-400">Title</div>
+  <div class="text-2xl">\{\{ bundle.title \}\}</div>
+  @end
+
+  @if(bundle.description)
+  <div class="mt-6 mb-1 text-sm font-medium leading-5 text-gray-400">Description</div>
+  <div class="max-w-none prose prose-sm">\{\{\{ marked.parse(bundle.description) \}\}\}</div>
+  @end
+
+  @if(bundle.coverImage)
+  <div class="mt-6 mb-1 text-sm font-medium leading-5 text-gray-400">Cover Image</div>
+  <img src="\{\{ bundle.coverImage \}\}" alt="\{\{ bundle.title \}\}" class="w-full max-w-xl h-auto rounded" />
+  @end
+
+  @if(bundle.devotionAudio && bundle.devotionAudio.url)
+  <div class="mt-6 mb-1 text-sm font-medium leading-5 text-gray-400">Devotion Audio</div>
+  <audio controls>
+    <source src="\{\{ bundle.devotionAudio.url \}\}" type="audio/mpeg" />
+  </audio>
+  @end
+
+  @if(bundle.blocks)
+  @each(block in bundle.blocks)
+  @if(!block.visibility || !block.visibility.hidden)
+  <div class="pt-8 mt-8 border-t border-gray-200">
+    @if(block.blockName)
+    <div class="mb-1 text-xs font-medium tracking-wide text-gray-400 uppercase">\{\{ block.blockName \}\}</div>
+    @end
+
+    @if(block.kind === 'title')
+    @if(block.title)
+    <div class="text-2xl font-semibold">\{\{ block.title \}\}</div>
+    @end
+    @if(block.subtitle)
+    <div class="mt-2 text-lg text-gray-600">\{\{ block.subtitle \}\}</div>
+    @end
+    @if(block.coverImage)
+    <img src="\{\{ block.coverImage \}\}" alt="\{\{ block.title \}\}" class="mt-4 w-full max-w-xl h-auto rounded">
+    @end
+    @end
+
+    @if(block.kind === 'scripture')
+    @if(block.displayName)
+    <div class="mb-2 text-xl font-semibold">\{\{ block.displayName \}\}</div>
+    @end
+    @if(block.scripture)
+    @!component('components/scripture', {passage: block.scripture})
+    @end
+    @end
+
+    @if(!block.kind || block.kind === 'content')
+    @if(block.displayName)
+    <div class="mb-2 text-xl font-semibold">\{\{ block.displayName \}\}</div>
+    @end
+    @if(block.content)
+    <div class="max-w-none prose prose-sm">\{\{\{ marked.parse(block.content) \}\}\}</div>
+    @end
+    @if(block.items)
+    @each(item in block.items)
+    @if(item.kind === 'image' && item.imageUrl)
+    <div class="mt-4">
+      <img src="\{\{ item.imageUrl \}\}" alt="" class="w-full max-w-xl h-auto rounded">
+    </div>
+    @end
+    @if(item.kind === 'video' && item.video && item.video.url)
+    <div class="mt-4 w-full max-w-xl">
+      @!component('components/video', {url: item.video.url, librayId: librayId})
+    </div>
+    @end
+    @if(item.kind === 'scripture' && item.scripture)
+    <div class="mt-4">
+      @!component('components/scripture', {passage: item.scripture})
+    </div>
+    @end
+    @endeach
+    @end
+    @end
+  </div>
+  @end
+  @endeach
+  @end
+</section>
diff --git a/src/shared/preview_bundle.ts b/src/shared/preview_bundle.ts
new file mode 100644
index 00000000..61051598
--- /dev/null
+++ b/src/shared/preview_bundle.ts
@@ -0,0 +1,35 @@
+import type { PreviewBundle } from '../types.js';
+import { normalizeDevotionDraftBundle } from './devotion_draft.js';
+import { isDevotionTemplate } from './story_helpers.js';
+
+const parseBundle = (value: unknown): Record<string, unknown> => {
+  if (typeof value === 'string') {
+    try {
+      const parsed = JSON.parse(value) as unknown;
+      return parsed && typeof parsed === 'object' && !Array.isArray(parsed)
+        ? (parsed as Record<string, unknown>)
+        : {};
+    } catch {
+      return {};
+    }
+  }
+
+  return value && typeof value === 'object' && !Array.isArray(value)
+    ? (value as Record<string, unknown>)
+    : {};
+};
+
+export function resolvePreviewBundle(options: {
+  chapter: { bundle: unknown; number: number };
+  draft?: { bundle: unknown; number: number } | null;
+  template?: string;
+}): PreviewBundle {
+  const source = options.draft ?? options.chapter;
+  const { number } = source;
+
+  if (isDevotionTemplate(options.template)) {
+    return normalizeDevotionDraftBundle(source.bundle, number);
+  }
+
+  return parseBundle(source.bundle);
+}
diff --git a/src/types.ts b/src/types.ts
index 236a4e8e..fd322bb8 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -507,6 +507,8 @@ export interface DevotionDraftBundle {
   resources: string[];
 }
 
+export type PreviewBundle = DevotionDraftBundle | Record<string, unknown>;
+
 export type DevotionDraftEditBundle = Omit<DevotionDraftBundle, 'resources'> & {
   resources: ResourceItem[];
 };
@@ -531,7 +533,7 @@ export interface ChapterMeta {
 
 export interface PreviewProps {
   chapter: ChapterMeta;
-  bundle: any;
+  bundle: PreviewBundle;
   bundleView: string;
   story: StorySpec;
   title: string;
diff --git a/tests/unit/preview_bundle.spec.ts b/tests/unit/preview_bundle.spec.ts
new file mode 100644
index 00000000..50bb6839
--- /dev/null
+++ b/tests/unit/preview_bundle.spec.ts
@@ -0,0 +1,77 @@
+import { expect, test } from '@playwright/test';
+
+import { resolvePreviewBundle } from '../../src/shared/preview_bundle.js';
+
+const contentBlock = (blockName: string) => ({
+  id: blockName,
+  kind: 'content' as const,
+  blockName,
+  displayName: blockName,
+  blockRole: 'introduction',
+  style: 'primary',
+  content: `Content for ${blockName}`,
+  items: [],
+  visibility: {
+    presenter: false,
+    personal: false,
+    inNavigation: false,
+    hidden: false,
+  },
+  leadersNotes: '',
+  showLeadersNotes: false,
+});
+
+test.describe('resolvePreviewBundle', () => {
+  test('prefers draft block order over published chapter for devotion', () => {
+    const chapterBlocks = [
+      contentBlock('Block-A'),
+      contentBlock('Block-B'),
+      contentBlock('Block-C'),
+    ];
+    const draftBlocks = [
+      contentBlock('Block-C'),
+      contentBlock('Block-A'),
+      contentBlock('Block-B'),
+    ];
+
+    const result = resolvePreviewBundle({
+      chapter: { bundle: { blocks: chapterBlocks }, number: 1 },
+      draft: { bundle: { blocks: draftBlocks }, number: 1 },
+      template: 'devotion',
+    });
+
+    expect(result.blocks).toHaveLength(3);
+    expect(
+      (result.blocks as Array<{ blockName: string }>).map((block) => block.blockName),
+    ).toEqual(['Block-C', 'Block-A', 'Block-B']);
+  });
+
+  test('uses chapter bundle when no draft exists', () => {
+    const chapterBlocks = [
+      contentBlock('Block-A'),
+      contentBlock('Block-B'),
+    ];
+
+    const result = resolvePreviewBundle({
+      chapter: { bundle: { blocks: chapterBlocks }, number: 2 },
+      draft: null,
+      template: 'devotion',
+    });
+
+    expect(
+      (result.blocks as Array<{ blockName: string }>).map((block) => block.blockName),
+    ).toEqual(['Block-A', 'Block-B']);
+  });
+
+  test('returns parsed chapter bundle for non-devotion templates', () => {
+    const chapterBundle = { title: 'Course chapter', screens: [{ screenName: 'Intro' }] };
+
+    const result = resolvePreviewBundle({
+      chapter: { bundle: chapterBundle, number: 1 },
+      draft: { bundle: { title: 'Draft title' }, number: 1 },
+      template: 'course',
+    });
+
+    expect(result.title).toBe('Draft title');
+  });
+});

From 840d71bd1588c48dec545b3d23044a6a49bc830c Mon Sep 17 00:00:00 2001
From: Timothy Koech <timosville@gmail.com>
Date: Fri, 14 Aug 2026 09:46:42 +0300
Subject: [PATCH 13/13] increment: add support for reusing previous chapter
 block structures in devotion draft editing

---
 src/backend/index.ts                          |   5 +
 .../stubs/controllers/drafts_controller.stub  |  17 +++
 .../components/blocks/add-block-toolbar.vue   |  70 ++++++----
 .../devotion-draft-edit-blocks.story.vue      |  14 +-
 .../components/devotion-draft-edit-blocks.vue |  18 +++
 .../stories/devotion-draft-edit.story.vue     |  28 ++++
 src/frontend/stories/devotion-draft-edit.vue  |   1 +
 src/frontend/test/mocks.ts                    |  18 +++
 src/shared/block_structure.ts                 |  75 +++++++++++
 src/shared/previous_chapter_blocks.ts         |  27 ++++
 src/types.ts                                  |   1 +
 tests/unit/block_structure.spec.ts            | 121 ++++++++++++++++++
 tests/unit/previous_chapter_blocks.spec.ts    |  66 ++++++++++
 13 files changed, 437 insertions(+), 24 deletions(-)
 create mode 100644 src/shared/block_structure.ts
 create mode 100644 src/shared/previous_chapter_blocks.ts
 create mode 100644 tests/unit/block_structure.spec.ts
 create mode 100644 tests/unit/previous_chapter_blocks.spec.ts

diff --git a/src/backend/index.ts b/src/backend/index.ts
index 555a3264..f845d0c7 100644
--- a/src/backend/index.ts
+++ b/src/backend/index.ts
@@ -60,6 +60,11 @@ export {
   normalizeDevotionDraftBundle,
 } from '../shared/devotion_draft.js';
 export { resolvePreviewBundle } from '../shared/preview_bundle.js';
+export { cloneBlocksStructure } from '../shared/block_structure.js';
+export {
+  getPreviousDevotionChapterBlocks,
+  type StoryChapterSpecifier,
+} from '../shared/previous_chapter_blocks.js';
 export { default as DropValidator } from './validators/drop.js';
 export { default as PageValidator } from './validators/page.js';
 export * from './validators/user.js';
diff --git a/src/backend/stubs/controllers/drafts_controller.stub b/src/backend/stubs/controllers/drafts_controller.stub
index b8e40263..87e4446b 100644
--- a/src/backend/stubs/controllers/drafts_controller.stub
+++ b/src/backend/stubs/controllers/drafts_controller.stub
@@ -14,6 +14,7 @@ import {
   StoryService,
   isDevotionTemplate,
   normalizeDevotionDraftBundle,
+  getPreviousDevotionChapterBlocks,
   type DevotionDraftEditProps,
   type DraftEditProps,
 } from '@story-cms/kit';
@@ -119,6 +120,21 @@ export default class DraftsController {
           resourceService.hydrate(bundle.resources),
         ]);
         const createdDraftId = ctx.session.flashMessages.get('newDevotionDraftId');
+        const previousChapterBlocks =
+          draft.number > 1
+            ? await getPreviousDevotionChapterBlocks(
+                { ...specifier, number: draft.number },
+                async (spec) => {
+                  const previousDraft = await Draft.query().where(spec).first();
+                  if (previousDraft) {
+                    return previousDraft.bundle;
+                  }
+
+                  const previousChapter = await Chapter.query().where(spec).first();
+                  return previousChapter?.bundle ?? null;
+                },
+              )
+            : [];
         const devotionData: DevotionDraftEditProps = {
           ...data,
           bundle: {
@@ -127,6 +143,7 @@ export default class DraftsController {
           },
           availableResources,
           isCreate: Number(createdDraftId) === draft.id,
+          previousChapterBlocks,
         };
 
         // @ts-expect-error Inertia page name
diff --git a/src/frontend/stories/components/blocks/add-block-toolbar.vue b/src/frontend/stories/components/blocks/add-block-toolbar.vue
index 1583eac9..6e4daf0a 100644
--- a/src/frontend/stories/components/blocks/add-block-toolbar.vue
+++ b/src/frontend/stories/components/blocks/add-block-toolbar.vue
@@ -1,33 +1,47 @@
 <template>
-  <div class="grid grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-3">
-    <button
-      type="button"
-      class="inline-flex w-full items-center justify-center rounded-xl border border-dashed border-studio-forest px-3 py-[18px] text-sm font-medium leading-4 text-studio-forest shadow-sm hover:bg-studio-lime"
-      @click.prevent="$emit('addTitle')"
-    >
-      <div class="inline-flex items-center justify-center gap-2">
-        <Plus class="size-5" aria-hidden="true" />
-        <span>Add Title Block</span>
-      </div>
-    </button>
-    <button
-      type="button"
-      class="inline-flex w-full items-center justify-center rounded-xl border border-dashed border-studio-forest px-3 py-[18px] text-sm font-medium leading-4 text-studio-forest shadow-sm hover:bg-studio-lime"
-      @click.prevent="$emit('addScripture')"
-    >
-      <div class="inline-flex items-center justify-center gap-2">
-        <Plus class="size-5" aria-hidden="true" />
-        <span>Add Scripture Block</span>
-      </div>
-    </button>
+  <div class="space-y-3">
+    <div class="grid grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-3">
+      <button
+        type="button"
+        class="inline-flex w-full items-center justify-center rounded-xl border border-dashed border-studio-forest px-3 py-[18px] text-sm font-medium leading-4 text-studio-forest shadow-sm hover:bg-studio-lime"
+        @click.prevent="$emit('addTitle')"
+      >
+        <div class="inline-flex items-center justify-center gap-2">
+          <Plus class="size-5" aria-hidden="true" />
+          <span>Add Title Block</span>
+        </div>
+      </button>
+      <button
+        type="button"
+        class="inline-flex w-full items-center justify-center rounded-xl border border-dashed border-studio-forest px-3 py-[18px] text-sm font-medium leading-4 text-studio-forest shadow-sm hover:bg-studio-lime"
+        @click.prevent="$emit('addScripture')"
+      >
+        <div class="inline-flex items-center justify-center gap-2">
+          <Plus class="size-5" aria-hidden="true" />
+          <span>Add Scripture Block</span>
+        </div>
+      </button>
+      <button
+        type="button"
+        class="inline-flex w-full items-center justify-center rounded-xl border border-dashed border-studio-forest px-3 py-[18px] text-sm font-medium leading-4 text-studio-forest shadow-sm hover:bg-studio-lime"
+        @click.prevent="$emit('addContent')"
+      >
+        <div class="inline-flex items-center justify-center gap-2">
+          <Plus class="size-5" aria-hidden="true" />
+          <span>Add Content Block</span>
+        </div>
+      </button>
+    </div>
+
     <button
+      v-if="showReusePrevious"
       type="button"
       class="inline-flex w-full items-center justify-center rounded-xl border border-dashed border-studio-forest px-3 py-[18px] text-sm font-medium leading-4 text-studio-forest shadow-sm hover:bg-studio-lime"
-      @click.prevent="$emit('addContent')"
+      @click.prevent="$emit('reusePrevious')"
     >
       <div class="inline-flex items-center justify-center gap-2">
         <Plus class="size-5" aria-hidden="true" />
-        <span>Add Content Block</span>
+        <span>Reuse Previous Structure</span>
       </div>
     </button>
   </div>
@@ -36,9 +50,19 @@
 <script setup lang="ts">
 import { Plus } from '@lucide/vue';
 
+withDefaults(
+  defineProps<{
+    showReusePrevious?: boolean;
+  }>(),
+  {
+    showReusePrevious: false,
+  },
+);
+
 defineEmits<{
   addTitle: [];
   addScripture: [];
   addContent: [];
+  reusePrevious: [];
 }>();
 </script>
diff --git a/src/frontend/stories/components/devotion-draft-edit-blocks.story.vue b/src/frontend/stories/components/devotion-draft-edit-blocks.story.vue
index 513f1a5d..f1e4c3ab 100644
--- a/src/frontend/stories/components/devotion-draft-edit-blocks.story.vue
+++ b/src/frontend/stories/components/devotion-draft-edit-blocks.story.vue
@@ -35,6 +35,15 @@
         chapter-type="Devotion"
       />
     </Variant>
+
+    <Variant title="Reuse previous structure">
+      <DevotionDraftEditBlocks
+        v-model:blocks="emptyBlocks"
+        :previous-chapter-blocks="previousChapterBlocks"
+        :video-collection-id="sharedProps.config.videoCollectionId"
+        chapter-type="Devotion"
+      />
+    </Variant>
   </Story>
 </template>
 
@@ -45,6 +54,7 @@ import type { ChapterBlock } from '../../../types';
 import {
   mockResourceProviders,
   sampleMixedChapterBlocks,
+  samplePreviousDevotionChapterBlocks,
   sharedProps,
 } from '../../test/mocks';
 import { useWidgetsStore } from '../../store';
@@ -60,6 +70,8 @@ const defaultBlocks = ref<ChapterBlock[]>([createEmptyContentBlock()]);
 
 const emptyBlocks = ref<ChapterBlock[]>([]);
 
+const previousChapterBlocks = samplePreviousDevotionChapterBlocks;
+
 const multipleBlocks = ref<ChapterBlock[]>([
   {
     ...createEmptyContentBlock(),
@@ -122,5 +134,5 @@ const devotionBlocks = ref<ChapterBlock[]>([
 <docs lang="md">
 # Devotion Draft Edit Blocks
 
-Content block editor for the Blocks tab on devotion draft edit pages. Supports content, title, and scripture blocks with add, remove, reorder, collapse, visibility toggles, and leaders notes.
+Content block editor for the Blocks tab on devotion draft edit pages. Supports content, title, and scripture blocks with add, remove, reorder, collapse, visibility toggles, leaders notes, and reuse previous structure on chapter 2+.
 </docs>
diff --git a/src/frontend/stories/components/devotion-draft-edit-blocks.vue b/src/frontend/stories/components/devotion-draft-edit-blocks.vue
index ee87404b..da491685 100644
--- a/src/frontend/stories/components/devotion-draft-edit-blocks.vue
+++ b/src/frontend/stories/components/devotion-draft-edit-blocks.vue
@@ -2,9 +2,11 @@
   <div class="min-w-0 space-y-6 overflow-x-clip">
     <AddBlockToolbar
       v-if="blocks.length === 0"
+      :show-reuse-previous="canReusePrevious"
       @add-title="addTitleBlock"
       @add-scripture="addScriptureBlock"
       @add-content="addContentBlock"
+      @reuse-previous="reusePreviousStructure"
     />
 
     <BlockEmptyState
@@ -79,12 +81,15 @@ import {
   createEmptyContentBlock,
   createEmptyScriptureBlock,
   createEmptyTitleBlock,
+  normalizeBlocks,
 } from './blocks/block-utils';
+import { cloneBlocksStructure } from '../../../shared/block_structure';
 
 const props = defineProps<{
   blocks: ChapterBlock[];
   videoCollectionId?: string;
   chapterType?: string | null;
+  previousChapterBlocks?: ChapterBlock[];
 }>();
 
 const emit = defineEmits<{
@@ -101,6 +106,10 @@ const blocks = computed({
 
 const blocksArrayError = computed(() => blocksArrayErrorMessages(errors.value)[0] ?? '');
 
+const canReusePrevious = computed(
+  () => (props.previousChapterBlocks?.length ?? 0) > 0 && blocks.value.length === 0,
+);
+
 const expanded = ref<boolean[]>([]);
 const newlyAddedBlockId = ref<string | null>(null);
 const hasInitialized = ref(false);
@@ -187,6 +196,15 @@ const addScriptureBlock = () => {
   appendBlock(createEmptyScriptureBlock());
 };
 
+const reusePreviousStructure = () => {
+  if (!props.previousChapterBlocks?.length) return;
+
+  const cloned = cloneBlocksStructure(normalizeBlocks([...props.previousChapterBlocks]));
+  blocks.value = cloned;
+  expanded.value = cloned.map((_, index) => index === 0);
+  hasInitialized.value = true;
+};
+
 const deleteBlock = (index: number) => {
   const next = [...blocks.value];
   next.splice(index, 1);
diff --git a/src/frontend/stories/devotion-draft-edit.story.vue b/src/frontend/stories/devotion-draft-edit.story.vue
index d68c6618..48c2fa02 100644
--- a/src/frontend/stories/devotion-draft-edit.story.vue
+++ b/src/frontend/stories/devotion-draft-edit.story.vue
@@ -18,6 +18,25 @@
       />
     </Variant>
 
+    <Variant title="Chapter 2 create" :setup-app="loadChapterTwoCreate">
+      <DevotionDraftEdit
+        :config="sharedProps.config"
+        :user="sharedProps.user"
+        :language="sharedProps.language"
+        :errors="{}"
+        :bookmarks="sharedProps.bookmarks"
+        :draft="devotionDraftEditChapterTwoCreateProps.draft"
+        :bundle="devotionDraftEditChapterTwoCreateProps.bundle"
+        :story="devotionDraftEditDevotionStory"
+        :available-resources="availableResources"
+        :has-edit-review="false"
+        :last-published="''"
+        :is-create="true"
+        :previous-chapter-blocks="devotionDraftEditChapterTwoCreateProps.previousChapterBlocks"
+        :providers="mockResourceProviders"
+      />
+    </Variant>
+
     <Variant title="Edit" :setup-app="loadEdit">
       <DevotionDraftEdit
         :config="sharedProps.config"
@@ -165,6 +184,7 @@ import {
   availableResources,
   devotionDraftEditStory,
   devotionDraftEditDevotionStory,
+  devotionDraftEditChapterTwoCreateProps,
   devotionDraftEditValidationErrors,
   editorUser,
   emptyDevotionDraftBundle,
@@ -186,6 +206,13 @@ const loadCreate: StoryHandler = (context): void => {
   window.history.replaceState({}, '', url.toString());
 };
 
+const loadChapterTwoCreate: StoryHandler = (context): void => {
+  miniSidebar(context);
+  const url = new URL(window.location.href);
+  url.searchParams.set('tab', 'Blocks');
+  window.history.replaceState({}, '', url.toString());
+};
+
 const loadEdit: StoryHandler = (context): void => {
   miniSidebar(context);
   const url = new URL(window.location.href);
@@ -231,6 +258,7 @@ Tabbed devotion draft editor with Details, Blocks, and Resources. Includes draft
 ## Variants
 
 - **Create** — empty chapter with Create Chapter action
+- **Chapter 2 create** — empty chapter 2 on Blocks tab with Reuse Previous Structure
 - **Edit** — populated chapter with Publish changes (no edit-review)
 - **Blocks tab** — opens directly on the Blocks tab
 - **Devotion** — Devotion chapter type with sample blocks, opens on the Blocks tab
diff --git a/src/frontend/stories/devotion-draft-edit.vue b/src/frontend/stories/devotion-draft-edit.vue
index 10db2116..57ee45ee 100644
--- a/src/frontend/stories/devotion-draft-edit.vue
+++ b/src/frontend/stories/devotion-draft-edit.vue
@@ -42,6 +42,7 @@
           <div v-if="currentDevotionDraftTab === 'Blocks'" dir="ltr">
             <DevotionDraftEditBlocks
               v-model:blocks="blocks"
+              :previous-chapter-blocks="props.previousChapterBlocks ?? []"
               :video-collection-id="props.config.videoCollectionId"
               :chapter-type="props.story.chapterType"
             />
diff --git a/src/frontend/test/mocks.ts b/src/frontend/test/mocks.ts
index 025b5ac1..c1817a64 100644
--- a/src/frontend/test/mocks.ts
+++ b/src/frontend/test/mocks.ts
@@ -4805,6 +4805,9 @@ export const sampleDevotionChapterBundle: DevotionDraftEditBundle = {
   ],
 };
 
+export const samplePreviousDevotionChapterBlocks: ChapterBlock[] =
+  sampleDevotionChapterBundle.blocks;
+
 export const devotionDraftEditProps: Omit<DevotionDraftEditProps, 'providers'> & {
   providers: Providers;
 } = {
@@ -4825,6 +4828,21 @@ export const devotionDraftEditCreateProps: Omit<DevotionDraftEditProps, 'provide
   isCreate: true,
 };
 
+export const devotionDraftEditChapterTwoCreateProps: Omit<DevotionDraftEditProps, 'providers'> & {
+  providers: Providers;
+} = {
+  ...devotionDraftEditCreateProps,
+  draft: {
+    ...sampleDevotionDraft,
+    number: 2,
+  },
+  bundle: {
+    ...emptyDevotionDraftBundle,
+    number: '02',
+  },
+  previousChapterBlocks: samplePreviousDevotionChapterBlocks,
+};
+
 export const devotionDraftEditValidationErrors: Record<string, string[]> = {
   'bundle.title': ['The title field must have at least 1 character'],
   'bundle.blocks.0.blockName': ['Every block must have a name'],
diff --git a/src/shared/block_structure.ts b/src/shared/block_structure.ts
new file mode 100644
index 00000000..f9709ed1
--- /dev/null
+++ b/src/shared/block_structure.ts
@@ -0,0 +1,75 @@
+import type {
+  ChapterBlock,
+  ChapterContentBlock,
+  ChapterContentItem,
+  ChapterScriptureBlock,
+  ChapterTitleBlock,
+} from '../types.js';
+
+const createBlockId = (): string => crypto.randomUUID();
+
+const blockKind = (block: ChapterBlock): ChapterBlock['kind'] => block.kind ?? 'content';
+
+const cloneContentItemStructure = (item: ChapterContentItem): ChapterContentItem => {
+  const id = createBlockId();
+
+  if (item.kind === 'image') {
+    return { id, kind: 'image', imageUrl: '' };
+  }
+
+  if (item.kind === 'video') {
+    return { id, kind: 'video', video: { url: null } };
+  }
+
+  return { id, kind: 'scripture', scripture: { reference: '', verse: '' } };
+};
+
+const cloneBlockStructure = (block: ChapterBlock): ChapterBlock => {
+  const visibility = { ...block.visibility };
+  const kind = blockKind(block);
+
+  if (kind === 'title') {
+    const titleBlock = block as ChapterTitleBlock;
+    return {
+      id: createBlockId(),
+      kind: 'title',
+      blockName: titleBlock.blockName,
+      title: '',
+      subtitle: '',
+      coverImage: '',
+      visibility,
+    };
+  }
+
+  if (kind === 'scripture') {
+    const scriptureBlock = block as ChapterScriptureBlock;
+    return {
+      id: createBlockId(),
+      kind: 'scripture',
+      blockName: scriptureBlock.blockName,
+      displayName: scriptureBlock.displayName,
+      scripture: { reference: '', verse: '' },
+      visibility,
+      leadersNotes: '',
+      showLeadersNotes: false,
+    };
+  }
+
+  const contentBlock = block as ChapterContentBlock;
+  return {
+    id: createBlockId(),
+    kind: 'content',
+    blockName: contentBlock.blockName,
+    displayName: contentBlock.displayName,
+    blockRole: contentBlock.blockRole,
+    style: contentBlock.style,
+    content: '',
+    items: (contentBlock.items ?? []).map(cloneContentItemStructure),
+    visibility,
+    leadersNotes: '',
+    showLeadersNotes: false,
+  };
+};
+
+export const cloneBlocksStructure = (blocks: ChapterBlock[]): ChapterBlock[] =>
+  blocks.map(cloneBlockStructure);
diff --git a/src/shared/previous_chapter_blocks.ts b/src/shared/previous_chapter_blocks.ts
new file mode 100644
index 00000000..9ebe9e13
--- /dev/null
+++ b/src/shared/previous_chapter_blocks.ts
@@ -0,0 +1,27 @@
+import type { ChapterBlock } from '../types.js';
+import { normalizeDevotionDraftBundle } from './devotion_draft.js';
+
+export interface StoryChapterSpecifier {
+  apiVersion: number;
+  locale: string;
+  storyId: number;
+  number: number;
+}
+
+export const getPreviousDevotionChapterBlocks = async (
+  specifier: StoryChapterSpecifier,
+  loadBundle: (spec: StoryChapterSpecifier) => Promise<unknown | null>,
+): Promise<ChapterBlock[]> => {
+  if (specifier.number <= 1) {
+    return [];
+  }
+
+  const previousNumber = specifier.number - 1;
+  const bundle = await loadBundle({ ...specifier, number: previousNumber });
+
+  if (bundle === null || bundle === undefined) {
+    return [];
+  }
+
+  return normalizeDevotionDraftBundle(bundle, previousNumber).blocks;
+};
diff --git a/src/types.ts b/src/types.ts
index fd322bb8..c131d162 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -523,6 +523,7 @@ export interface DevotionDraftEditProps {
   lastPublished: string;
   isCreate?: boolean;
   source?: DevotionDraftBundle;
+  previousChapterBlocks?: ChapterBlock[];
 }
 
 export interface ChapterMeta {
diff --git a/tests/unit/block_structure.spec.ts b/tests/unit/block_structure.spec.ts
new file mode 100644
index 00000000..ffbdc45c
--- /dev/null
+++ b/tests/unit/block_structure.spec.ts
@@ -0,0 +1,121 @@
+import { expect, test } from '@playwright/test';
+
+import { cloneBlocksStructure } from '../../src/shared/block_structure.js';
+import { createContentItem } from '../../src/frontend/stories/components/blocks/block-utils.js';
+
+test.describe('cloneBlocksStructure', () => {
+  test('preserves block order, kinds, labels, roles, styles, and visibility', () => {
+    const source = cloneBlocksStructure([
+      {
+        id: 'title-1',
+        kind: 'title',
+        blockName: 'Heading',
+        title: 'Old Title',
+        subtitle: 'Old Subtitle',
+        coverImage: 'https://example.com/cover.jpg',
+        visibility: {
+          presenter: true,
+          personal: false,
+          inNavigation: true,
+          hidden: false,
+        },
+      },
+      {
+        id: 'content-1',
+        kind: 'content',
+        blockName: 'Opening',
+        displayName: 'Opening Devotion',
+        blockRole: 'introduction',
+        style: 'secondary',
+        content: 'Old content',
+        items: [createContentItem('video')],
+        visibility: {
+          presenter: false,
+          personal: true,
+          inNavigation: false,
+          hidden: false,
+        },
+        leadersNotes: 'Secret notes',
+        showLeadersNotes: true,
+      },
+      {
+        id: 'scripture-1',
+        kind: 'scripture',
+        blockName: 'Passage',
+        displayName: 'Scripture Reading',
+        scripture: { reference: 'John 3:16', verse: 'For God so loved...' },
+        visibility: {
+          presenter: false,
+          personal: false,
+          inNavigation: false,
+          hidden: false,
+        },
+        leadersNotes: 'More notes',
+        showLeadersNotes: true,
+      },
+    ]);
+
+    expect(source).toHaveLength(3);
+    expect(source.map((block) => block.blockName)).toEqual([
+      'Heading',
+      'Opening',
+      'Passage',
+    ]);
+    expect(source.map((block) => block.kind ?? 'content')).toEqual([
+      'title',
+      'content',
+      'scripture',
+    ]);
+
+    const contentBlock = source[1] as Extract<(typeof source)[number], { kind: 'content' }>;
+    expect(contentBlock.displayName).toBe('Opening Devotion');
+    expect(contentBlock.blockRole).toBe('introduction');
+    expect(contentBlock.style).toBe('secondary');
+    expect(contentBlock.visibility).toEqual({
+      presenter: false,
+      personal: true,
+      inNavigation: false,
+      hidden: false,
+    });
+    expect(contentBlock.items).toHaveLength(1);
+    expect(contentBlock.items[0]?.kind).toBe('video');
+  });
+
+  test('clears content fields and assigns fresh ids', () => {
+    const originalIds = ['block-a', 'item-a'];
+    const cloned = cloneBlocksStructure([
+      {
+        id: originalIds[0],
+        kind: 'content',
+        blockName: 'Media',
+        displayName: 'Media Block',
+        blockRole: 'commentary',
+        style: 'primary',
+        content: 'Filled content',
+        items: [
+          {
+            id: originalIds[1],
+            kind: 'image',
+            imageUrl: 'https://example.com/image.jpg',
+          },
+        ],
+        visibility: {
+          presenter: false,
+          personal: false,
+          inNavigation: false,
+          hidden: false,
+        },
+        leadersNotes: 'Notes',
+        showLeadersNotes: true,
+      },
+    ]);
+
+    const block = cloned[0] as Extract<(typeof cloned)[number], { kind: 'content' }>;
+    expect(block.id).not.toBe(originalIds[0]);
+    expect(block.content).toBe('');
+    expect(block.leadersNotes).toBe('');
+    expect(block.showLeadersNotes).toBe(false);
+    expect(block.items[0]?.id).not.toBe(originalIds[1]);
+    expect(block.items[0]?.imageUrl).toBe('');
+  });
+});
diff --git a/tests/unit/previous_chapter_blocks.spec.ts b/tests/unit/previous_chapter_blocks.spec.ts
new file mode 100644
index 00000000..d453d3b5
--- /dev/null
+++ b/tests/unit/previous_chapter_blocks.spec.ts
@@ -0,0 +1,66 @@
+import { expect, test } from '@playwright/test';
+
+import { getPreviousDevotionChapterBlocks } from '../../src/shared/previous_chapter_blocks.js';
+
+test.describe('getPreviousDevotionChapterBlocks', () => {
+  test('returns empty array for the first chapter', async () => {
+    let called = false;
+    const loadBundle = async () => {
+      called = true;
+      return null;
+    };
+
+    await expect(
+      getPreviousDevotionChapterBlocks(
+        { apiVersion: 1, locale: 'en', storyId: 1, number: 1 },
+        loadBundle,
+      ),
+    ).resolves.toEqual([]);
+    expect(called).toBe(false);
+  });
+
+  test('loads blocks from the immediately previous chapter', async () => {
+    const loadBundle = async (spec: { number: number }) => {
+      if (spec.number === 2) {
+        return {
+          blocks: [
+            {
+              id: 'block-2',
+              kind: 'content',
+              blockName: 'Second',
+            },
+          ],
+        };
+      }
+
+      return {
+        blocks: [
+          {
+            id: 'block-1',
+            kind: 'content',
+            blockName: 'First',
+            blockRole: 'introduction',
+            style: 'primary',
+            displayName: 'Intro',
+            content: 'Hello',
+            items: [],
+            visibility: {
+              presenter: false,
+              personal: false,
+              inNavigation: false,
+              hidden: false,
+            },
+          },
+        ],
+      };
+    };
+
+    const blocks = await getPreviousDevotionChapterBlocks(
+      { apiVersion: 1, locale: 'en', storyId: 1, number: 2 },
+      loadBundle,
+    );
+
+    expect(blocks).toHaveLength(1);
+    expect(blocks[0]?.blockName).toBe('First');
+  });
+});