diff --git a/client/src/features/library/components/LibraryCreatorAccess.vue b/client/src/features/library/components/LibraryCreatorAccess.vue
index 26e0c8a4b..81bd5ac69 100644
--- a/client/src/features/library/components/LibraryCreatorAccess.vue
+++ b/client/src/features/library/components/LibraryCreatorAccess.vue
@@ -1,9 +1,11 @@
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { computed, inject, onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { UserPlus, Trash2 } from '@lucide/vue'
-import { api } from '@/lib/api'
-import type { LibraryAccessEntry } from '@bookorbit/types'
+import { RefreshCw, ShieldCheck, TriangleAlert, UserPlus, X } from '@lucide/vue'
+import type { AccessLevel } from '@bookorbit/types'
+import { formatList } from '@/i18n/formatters'
+import { LIBRARY_ACCESS_KEY } from '../composables/useLibraryAccess'
+import LibraryCreatorCard from './LibraryCreatorCard.vue'
 
 const { t } = useI18n()
 
@@ -11,213 +13,200 @@ const props = defineProps<{
   libraryId: number | null
 }>()
 
-interface UserOption {
-  id: number
-  username: string
-  name: string
-}
+const access = inject(LIBRARY_ACCESS_KEY)
+if (!access) throw new Error('LibraryCreatorAccess needs the library access state provided by LibraryCreatorModal')
+const { entries, pending, loading, busy, loaded, error, availableUsers, failedGrants, load, grant, changeLevel, revoke, applyPending } = access
+
+const LEVELS: AccessLevel[] = ['viewer', 'editor', 'owner']
 
-const accessList = ref<LibraryAccessEntry[]>([])
-const availableUsers = ref<UserOption[]>([])
 const grantUserId = ref<number | null>(null)
-const grantLevel = ref<'viewer' | 'editor' | 'owner'>('viewer')
-const loading = ref(false)
-const actionLoading = ref(false)
-const error = ref<string | null>(null)
+const grantLevel = ref<AccessLevel>('viewer')
+const confirmingRevoke = ref<number | null>(null)
 
-async function loadAccess() {
-  if (!props.libraryId) return
-  loading.value = true
-  error.value = null
-  try {
-    const [accessRes, usersRes] = await Promise.all([api(`/api/v1/libraries/${props.libraryId}/access`), api('/api/v1/users/assignable')])
-    if (!accessRes.ok || !usersRes.ok) {
-      error.value = 'Could not load library access settings.'
-      return
-    }
-    accessList.value = await accessRes.json()
-    if (usersRes.ok) {
-      const all: UserOption[] = await usersRes.json()
-      const grantedIds = new Set(accessList.value.map((a) => a.userId))
-      availableUsers.value = all.filter((u) => !grantedIds.has(u.id))
-    }
-  } catch {
-    error.value = 'Could not connect to the server.'
-  } finally {
-    loading.value = false
-  }
+interface PersonRow {
+  userId: number
+  name: string
+  username: string
+  accessLevel: AccessLevel
+  queued: boolean
 }
 
-async function grant() {
-  if (!props.libraryId || !grantUserId.value) return
-  error.value = null
-  actionLoading.value = true
-  try {
-    const res = await api(`/api/v1/libraries/${props.libraryId}/access`, {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ userId: grantUserId.value, accessLevel: grantLevel.value }),
-    })
-    if (!res.ok) {
-      const body = await res.json().catch(() => null)
-      error.value = body?.message ?? 'Failed to grant access'
-      return
-    }
-    grantUserId.value = null
-    await loadAccess()
-  } catch {
-    error.value = 'Could not connect to the server.'
-  } finally {
-    actionLoading.value = false
-  }
+const people = computed<PersonRow[]>(() => [
+  ...entries.value.map((entry) => ({
+    userId: entry.userId,
+    name: entry.name,
+    username: entry.username,
+    accessLevel: entry.accessLevel,
+    queued: false,
+  })),
+  ...pending.value
+    .filter((grant) => !grant.failed)
+    .map((grant) => ({ userId: grant.userId, name: grant.name, username: grant.username, accessLevel: grant.accessLevel, queued: true })),
+])
+const failedNames = computed(() => formatList(failedGrants.value.map((grant) => grant.name || grant.username)))
+
+function initials(name: string): string {
+  return name
+    .split(/\s+/)
+    .filter(Boolean)
+    .slice(0, 2)
+    .map((word) => word[0]!.toUpperCase())
+    .join('')
 }
 
-async function changeLevel(userId: number, accessLevel: 'viewer' | 'editor' | 'owner') {
-  if (!props.libraryId) return
-  error.value = null
-  actionLoading.value = true
-  try {
-    const res = await api(`/api/v1/libraries/${props.libraryId}/access/${userId}`, {
-      method: 'PATCH',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ accessLevel }),
-    })
-    if (!res.ok) {
-      const body = await res.json().catch(() => null)
-      error.value = body?.message ?? 'Failed to update access level'
-      return
-    }
-    await loadAccess()
-  } catch {
-    error.value = 'Could not connect to the server.'
-  } finally {
-    actionLoading.value = false
-  }
+async function handleGrant() {
+  if (grantUserId.value === null) return
+  if (await grant(grantUserId.value, grantLevel.value)) grantUserId.value = null
 }
 
-async function revoke(userId: number) {
-  if (!props.libraryId) return
-  const entry = accessList.value.find((item) => item.userId === userId)
-  if (!window.confirm(`Revoke access for ${entry?.name || entry?.username || 'this user'}?`)) return
-  error.value = null
-  actionLoading.value = true
-  try {
-    const res = await api(`/api/v1/libraries/${props.libraryId}/access/${userId}`, { method: 'DELETE' })
-    if (!res.ok) {
-      const body = await res.json().catch(() => null)
-      error.value = body?.message ?? 'Failed to revoke access'
-      return
-    }
-    await loadAccess()
-  } catch {
-    error.value = 'Could not connect to the server.'
-  } finally {
-    actionLoading.value = false
-  }
+function handleLevelChange(row: PersonRow, event: Event) {
+  void changeLevel(row.userId, (event.target as HTMLSelectElement).value as AccessLevel)
 }
 
-onMounted(loadAccess)
+function handleRemove(row: PersonRow) {
+  if (row.queued) {
+    void revoke(row.userId)
+    return
+  }
+  confirmingRevoke.value = row.userId
+}
+
+function cancelRevoke() {
+  confirmingRevoke.value = null
+}
+
+async function confirmRevoke(row: PersonRow) {
+  confirmingRevoke.value = null
+  await revoke(row.userId)
+}
+
+function retryFailed() {
+  void applyPending()
+}
+
+onMounted(() => {
+  if (!loaded.value && !loading.value) void load()
+})
 </script>
 
 <template>
-  <div class="px-6 py-6 space-y-6">
-    <div v-if="!libraryId" class="rounded-lg border border-dashed border-border px-5 py-8 text-center">
-      <UserPlus :size="22" class="text-muted-foreground mx-auto mb-2" />
-      <p class="text-sm text-muted-foreground">{{ t('library.creator.access.notYetCreated') }}</p>
+  <div class="flex flex-col gap-3">
+    <div v-if="failedGrants.length > 0" role="alert" class="flex items-start gap-2.5 rounded-xl border border-warning/40 bg-warning/10 px-3.5 py-3">
+      <TriangleAlert :size="16" class="mt-0.5 shrink-0 text-warning" aria-hidden="true" />
+      <div class="min-w-0 flex-1">
+        <p class="text-sm font-medium text-foreground">{{ t('library.creator.access.failed.title', { count: failedGrants.length }) }}</p>
+        <p class="mt-0.5 text-xs text-muted-foreground">{{ t('library.creator.access.failed.body', { names: failedNames }) }}</p>
+      </div>
+      <button
+        type="button"
+        class="inline-flex h-8 shrink-0 items-center gap-1.5 rounded-md border border-border bg-background px-3 text-[13px] font-medium text-foreground hover:bg-muted disabled:opacity-50"
+        :disabled="busy || props.libraryId === null"
+        @click="retryFailed"
+      >
+        <RefreshCw :size="13" :class="busy ? 'motion-safe:animate-spin' : ''" aria-hidden="true" />
+        {{ t('common.retry') }}
+      </button>
     </div>
 
-    <template v-else>
-      <div>
-        <p class="text-[11px] font-semibold uppercase tracking-widest text-foreground mb-1">{{ t('library.creator.access.title') }}</p>
-        <p class="text-xs text-muted-foreground mb-3">{{ t('library.creator.access.description') }}</p>
+    <LibraryCreatorCard flush :label="t('library.creator.access.peopleTitle')" label-id="library-access-title">
+      <template #meta>
+        <span v-if="people.length > 0" class="tabular-nums">{{ t('library.creator.access.peopleCount', { count: people.length }) }}</span>
+        <span v-else-if="libraryId === null">{{ t('library.creator.optional') }}</span>
+      </template>
 
-        <p v-if="error" class="text-xs text-destructive mb-3" role="alert">{{ error }}</p>
-
-        <!-- Grant access row -->
-        <div class="mb-4 grid grid-cols-2 gap-2 sm:flex">
+      <form class="flex flex-wrap gap-2 border-t border-border px-3 py-2.5" @submit.prevent="handleGrant">
+        <div class="relative min-w-0 flex-[1_1_12rem]">
+          <UserPlus :size="15" class="pointer-events-none absolute start-3 top-1/2 -translate-y-1/2 text-muted-foreground" aria-hidden="true" />
           <select
+            id="library-access-user"
             v-model="grantUserId"
             :aria-label="t('library.creator.access.userSelectAria')"
-            class="col-span-2 rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-ring sm:flex-1"
-            :disabled="loading || actionLoading"
+            class="h-9 w-full rounded-md border border-input bg-background pe-3 ps-9 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-ring"
+            :disabled="loading || busy"
           >
             <option :value="null" disabled>{{ t('library.creator.access.selectUser') }}</option>
-            <option v-for="u in availableUsers" :key="u.id" :value="u.id">{{ u.name }} ({{ u.username }})</option>
+            <option v-for="user in availableUsers" :key="user.id" :value="user.id">{{ user.name }} (@{{ user.username }})</option>
           </select>
-          <select
-            v-model="grantLevel"
-            :aria-label="t('library.creator.access.levelSelectAria')"
-            class="rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-ring"
-            :disabled="loading || actionLoading"
-          >
-            <option value="viewer">{{ t('library.creator.access.levels.viewer') }}</option>
-            <option value="editor">{{ t('library.creator.access.levels.editor') }}</option>
-            <option value="owner">{{ t('library.creator.access.levels.owner') }}</option>
-          </select>
-          <button
-            type="button"
-            class="flex items-center gap-1.5 px-3 py-2 rounded-md bg-primary text-primary-foreground text-sm font-medium hover:opacity-90 transition-opacity disabled:opacity-50 shrink-0"
-            :disabled="!grantUserId || loading || actionLoading"
-            @click="grant"
-          >
-            <UserPlus :size="14" />
-            {{ t('library.creator.access.grant') }}
-          </button>
         </div>
+        <select
+          id="library-access-level"
+          v-model="grantLevel"
+          :aria-label="t('library.creator.access.levelSelectAria')"
+          class="h-9 rounded-md border border-input bg-background px-3 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-ring"
+          :disabled="loading || busy"
+        >
+          <option v-for="level in LEVELS" :key="level" :value="level">{{ t(`library.creator.access.levels.${level}`) }}</option>
+        </select>
+        <button
+          type="submit"
+          class="inline-flex h-9 items-center rounded-md border border-border px-3 text-sm font-medium text-foreground transition-colors hover:bg-muted disabled:opacity-50"
+          :disabled="grantUserId === null || loading || busy"
+        >
+          {{ libraryId === null ? t('library.creator.access.add') : t('library.creator.access.grant') }}
+        </button>
+      </form>
 
-        <!-- Access list -->
-        <div class="overflow-x-auto rounded-lg border border-border">
-          <table class="w-full min-w-md text-sm">
-            <thead class="bg-muted/50">
-              <tr>
-                <th class="px-4 py-3 text-left font-medium text-muted-foreground text-xs">{{ t('library.creator.access.columns.user') }}</th>
-                <th class="px-4 py-3 text-left font-medium text-muted-foreground text-xs">{{ t('library.creator.access.columns.accessLevel') }}</th>
-                <th class="px-4 py-3 w-10" />
-              </tr>
-            </thead>
-            <tbody class="divide-y divide-border">
-              <tr v-if="loading">
-                <td colspan="3" class="px-4 py-6 text-center text-xs text-muted-foreground">
-                  {{ t('library.creator.access.loading') }}
-                </td>
-              </tr>
-              <tr v-for="entry in accessList" :key="entry.userId" class="hover:bg-muted/20 transition-colors">
-                <td class="px-4 py-3">
-                  <p class="font-medium text-foreground">{{ entry.name }}</p>
-                  <p class="text-xs text-muted-foreground">{{ entry.username }}</p>
-                </td>
-                <td class="px-4 py-3">
-                  <select
-                    :value="entry.accessLevel"
-                    :aria-label="`Access level for ${entry.name}`"
-                    :disabled="actionLoading"
-                    class="rounded border border-border bg-background px-2 py-1 text-xs text-foreground focus:outline-none focus:ring-1 focus:ring-ring"
-                    @change="changeLevel(entry.userId, ($event.target as HTMLSelectElement).value as 'viewer' | 'editor' | 'owner')"
-                  >
-                    <option value="viewer">{{ t('library.creator.access.levels.viewer') }}</option>
-                    <option value="editor">{{ t('library.creator.access.levels.editor') }}</option>
-                    <option value="owner">{{ t('library.creator.access.levels.owner') }}</option>
-                  </select>
-                </td>
-                <td class="px-4 py-3">
-                  <button
-                    type="button"
-                    class="p-1.5 rounded text-muted-foreground hover:text-destructive hover:bg-destructive/10 transition-colors"
-                    :aria-label="`Revoke access for ${entry.name}`"
-                    :disabled="actionLoading"
-                    @click="revoke(entry.userId)"
-                  >
-                    <Trash2 :size="13" />
-                  </button>
-                </td>
-              </tr>
-              <tr v-if="!loading && accessList.length === 0">
-                <td colspan="3" class="px-4 py-6 text-center text-xs text-muted-foreground">{{ t('library.creator.access.empty') }}</td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-    </template>
+      <p v-if="error" role="alert" class="border-t border-border px-4 py-2 text-xs text-destructive">{{ error }}</p>
+
+      <p v-if="loading && !loaded" class="border-t border-border px-4 py-5 text-center text-xs text-muted-foreground">
+        {{ t('library.creator.access.loading') }}
+      </p>
+      <ul v-else-if="people.length > 0" class="divide-y divide-border border-t border-border" aria-labelledby="library-access-title">
+        <li v-for="row in people" :key="row.userId" class="flex min-h-12 items-center gap-2.5 px-3 py-2">
+          <span
+            class="flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-[11px] font-semibold text-foreground"
+            aria-hidden="true"
+          >
+            {{ initials(row.name || row.username) }}
+          </span>
+          <span class="min-w-0 flex-1">
+            <span class="block truncate text-[13px] font-medium text-foreground">{{ row.name || row.username }}</span>
+            <span class="block truncate font-mono text-[11.5px] text-muted-foreground">@{{ row.username }}</span>
+          </span>
+          <template v-if="confirmingRevoke === row.userId">
+            <span class="text-xs text-foreground">{{ t('library.creator.access.revokeQuestion') }}</span>
+            <button
+              type="button"
+              class="h-8 rounded-md bg-destructive px-2.5 text-xs font-medium text-destructive-foreground hover:opacity-90 disabled:opacity-50"
+              :disabled="busy"
+              @click="confirmRevoke(row)"
+            >
+              {{ t('library.creator.access.revoke') }}
+            </button>
+            <button type="button" class="h-8 rounded-md px-2.5 text-xs font-medium text-foreground hover:bg-muted" @click="cancelRevoke">
+              {{ t('library.creator.access.keep') }}
+            </button>
+          </template>
+          <template v-else>
+            <select
+              :value="row.accessLevel"
+              :aria-label="t('library.creator.access.levelFor', { name: row.name || row.username })"
+              :disabled="busy"
+              class="h-8 rounded-md border border-input bg-background px-2 text-xs text-foreground focus:outline-none focus:ring-2 focus:ring-ring"
+              @change="handleLevelChange(row, $event)"
+            >
+              <option v-for="level in LEVELS" :key="level" :value="level">{{ t(`library.creator.access.levels.${level}`) }}</option>
+            </select>
+            <button
+              type="button"
+              class="flex size-8 shrink-0 items-center justify-center rounded-md text-foreground transition-colors hover:bg-destructive/10 hover:text-destructive disabled:opacity-50"
+              :aria-label="t('library.creator.access.revokeFor', { name: row.name || row.username })"
+              :disabled="busy"
+              @click="handleRemove(row)"
+            >
+              <X :size="15" aria-hidden="true" />
+            </button>
+          </template>
+        </li>
+      </ul>
+      <p v-else class="border-t border-border px-4 py-5 text-center text-xs text-muted-foreground">
+        {{ libraryId === null ? t('library.creator.access.emptyCreate') : t('library.creator.access.empty') }}
+      </p>
+    </LibraryCreatorCard>
+
+    <p class="flex items-center gap-1.5 text-xs text-muted-foreground">
+      <ShieldCheck :size="13" class="shrink-0" aria-hidden="true" />
+      {{ t('library.creator.access.superusers') }}
+    </p>
   </div>
 </template>
diff --git a/client/src/features/library/components/LibraryCreatorCard.vue b/client/src/features/library/components/LibraryCreatorCard.vue
new file mode 100644
index 000000000..929a29ab0
--- /dev/null
+++ b/client/src/features/library/components/LibraryCreatorCard.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+defineProps<{
+  label: string
+  labelId?: string
+  flush?: boolean
+}>()
+</script>
+
+<template>
+  <section class="rounded-xl border border-border bg-card" :class="flush ? 'overflow-hidden' : 'px-4 pb-4 pt-3.5'" :aria-labelledby="labelId">
+    <div class="flex items-center gap-2.5" :class="flush ? 'px-4 pb-2.5 pt-3' : 'mb-3'">
+      <h4 :id="labelId" class="text-[10.5px] font-semibold uppercase tracking-wider text-muted-foreground">{{ label }}</h4>
+      <div v-if="$slots.meta" class="ms-auto flex items-center gap-1.5 text-xs text-muted-foreground">
+        <slot name="meta" />
+      </div>
+    </div>
+    <slot />
+  </section>
+</template>
diff --git a/client/src/features/library/components/LibraryCreatorDetails.vue b/client/src/features/library/components/LibraryCreatorDetails.vue
index 2961c43eb..6879cb088 100644
--- a/client/src/features/library/components/LibraryCreatorDetails.vue
+++ b/client/src/features/library/components/LibraryCreatorDetails.vue
@@ -1,18 +1,43 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
+import { Check } from '@lucide/vue'
 import { APP_FEATURES, type CoverAspectRatio, type LibraryType } from '@bookorbit/types'
 import AppIcon from '@/components/AppIcon.vue'
 import IconPicker from '@/components/IconPicker.vue'
+import LibraryCreatorCard from './LibraryCreatorCard.vue'
 
 const { t } = useI18n()
 
-const aspectRatioOptions = computed<{ value: CoverAspectRatio; label: string; swatchClass: string }[]>(() => [
-  { value: '2/3', label: t('library.creator.details.coverStyle.portrait'), swatchClass: 'aspect-[2/3]' },
-  { value: '1/1', label: t('library.creator.details.coverStyle.square'), swatchClass: 'aspect-square' },
-])
+/** A short, library-flavoured starting set. Anything else is one click away in the full picker. */
+const SUGGESTED_ICONS = [
+  'Library',
+  'LibraryBig',
+  'BookOpen',
+  'BookOpenText',
+  'BookCopy',
+  'BookMarked',
+  'FolderBookmark',
+  'Bookmark',
+  'BookHeadphones',
+  'Headphones',
+  'AudioLines',
+  'ScrollText',
+  'Newspaper',
+  'GraduationCap',
+  'Feather',
+  'Sparkles',
+  'Swords',
+  'Rocket',
+  'Ghost',
+  'Heart',
+  'Star',
+  'Moon',
+  'Baby',
+  'Layers',
+]
 
-defineProps<{
+const props = defineProps<{
   name: string
   icon: string | null
   coverAspectRatio: CoverAspectRatio
@@ -25,10 +50,48 @@ const emit = defineEmits<{
   'update:icon': [value: string | null]
   'update:coverAspectRatio': [value: CoverAspectRatio]
   'update:type': [value: LibraryType]
+  'update:pickerOpen': [value: boolean]
 }>()
 
-function updateIcon(value: string) {
-  emit('update:icon', value || null)
+const iconChoices = computed(() => (props.icon && !SUGGESTED_ICONS.includes(props.icon) ? [props.icon, ...SUGGESTED_ICONS] : SUGGESTED_ICONS))
+
+const coverOptions = computed<{ value: CoverAspectRatio; title: string; hint: string; tiles: string[] }[]>(() => [
+  {
+    value: '2/3',
+    title: t('library.creator.details.cover.portraitTitle'),
+    hint: t('library.creator.details.cover.portraitHint'),
+    tiles: ['var(--format-ebook)', 'var(--format-document)', 'var(--format-audio)'],
+  },
+  {
+    value: '1/1',
+    title: t('library.creator.details.cover.squareTitle'),
+    hint: t('library.creator.details.cover.squareHint'),
+    tiles: ['var(--format-kindle)', 'var(--format-comic)', 'var(--format-audio)'],
+  },
+])
+
+function iconLabel(name: string): string {
+  return name.replace(/([a-z0-9])([A-Z])/g, '$1 $2')
+}
+
+function updateName(event: Event) {
+  emit('update:name', (event.target as HTMLInputElement).value)
+}
+
+function selectIcon(name: string) {
+  emit('update:icon', name)
+}
+
+function pickIcon(value: string) {
+  if (value) emit('update:icon', value)
+}
+
+function handlePickerOpen(open: boolean) {
+  emit('update:pickerOpen', open)
+}
+
+function updateCoverAspectRatio(event: Event) {
+  emit('update:coverAspectRatio', (event.target as HTMLInputElement).value as CoverAspectRatio)
 }
 
 function selectBooksType() {
@@ -38,103 +101,138 @@ function selectBooksType() {
 function selectPodcastsType() {
   emit('update:type', 'podcasts')
 }
-
-function updateName(event: Event) {
-  emit('update:name', (event.target as HTMLInputElement).value)
-}
-
-function updateCoverAspectRatio(event: Event) {
-  emit('update:coverAspectRatio', (event.target as HTMLInputElement).value as CoverAspectRatio)
-}
 </script>
 
 <template>
-  <div class="px-6 py-6 flex flex-col gap-7 h-full min-h-0">
-    <div>
-      <p class="mb-3 text-[11px] font-semibold uppercase tracking-widest text-foreground">Library type</p>
-      <div class="grid gap-3" :class="APP_FEATURES.podcasts ? 'grid-cols-2' : 'grid-cols-1'">
+  <div class="flex flex-col gap-3.5">
+    <LibraryCreatorCard v-if="APP_FEATURES.podcasts" :label="t('library.creator.details.type.title')">
+      <div class="grid gap-2 @md:grid-cols-2">
         <button
           type="button"
-          class="rounded-lg border px-4 py-3 text-left transition-colors"
-          :class="type === 'books' ? 'border-primary bg-primary/8' : 'border-border hover:bg-muted/50'"
+          class="rounded-lg border px-3.5 py-2.5 text-start transition-colors disabled:cursor-not-allowed"
+          :class="type === 'books' ? 'border-primary bg-primary/8 ring-1 ring-primary' : 'border-border bg-background hover:bg-muted'"
+          :aria-pressed="type === 'books'"
           :disabled="typeLocked"
           @click="selectBooksType"
         >
-          <span class="block text-sm font-medium">Books</span>
-          <span class="mt-1 block text-xs text-muted-foreground">Ebooks, comics, and audiobooks</span>
+          <span class="block text-sm font-medium text-foreground">{{ t('library.creator.details.type.books') }}</span>
+          <span class="mt-0.5 block text-xs text-muted-foreground">{{ t('library.creator.details.type.booksHint') }}</span>
         </button>
         <button
-          v-if="APP_FEATURES.podcasts"
           type="button"
-          class="rounded-lg border px-4 py-3 text-left transition-colors"
-          :class="type === 'podcasts' ? 'border-primary bg-primary/8' : 'border-border hover:bg-muted/50'"
+          class="rounded-lg border px-3.5 py-2.5 text-start transition-colors disabled:cursor-not-allowed"
+          :class="type === 'podcasts' ? 'border-primary bg-primary/8 ring-1 ring-primary' : 'border-border bg-background hover:bg-muted'"
+          :aria-pressed="type === 'podcasts'"
           :disabled="typeLocked"
           @click="selectPodcastsType"
         >
-          <span class="block text-sm font-medium">Podcasts</span>
-          <span class="mt-1 block text-xs text-muted-foreground">RSS feeds and managed episode storage</span>
+          <span class="block text-sm font-medium text-foreground">{{ t('library.creator.details.type.podcasts') }}</span>
+          <span class="mt-0.5 block text-xs text-muted-foreground">{{ t('library.creator.details.type.podcastsHint') }}</span>
         </button>
       </div>
-    </div>
-    <div>
-      <label for="library-name" class="mb-3 block text-[11px] font-semibold uppercase tracking-widest text-foreground">
-        {{ type === 'podcasts' ? 'Podcast library name' : t('library.creator.details.libraryName') }}
-      </label>
-      <div class="flex items-center gap-3">
-        <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary/20">
-          <AppIcon :icon="icon || 'Library'" fallback="Library" :size="24" class="text-primary" />
-        </div>
-        <input
-          id="library-name"
-          type="text"
-          :value="name"
-          :placeholder="type === 'podcasts' ? 'My Podcasts' : t('library.creator.details.namePlaceholder')"
-          maxlength="255"
-          class="flex-1 rounded-lg border border-border bg-background px-4 py-2.5 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
-          autocomplete="off"
-          autofocus
-          @input="updateName"
-        />
-      </div>
-    </div>
+    </LibraryCreatorCard>
 
-    <div>
-      <label class="block text-[11px] font-semibold uppercase tracking-widest text-foreground mb-3">
-        {{ t('library.creator.details.icon.label') }}
-      </label>
-      <IconPicker :model-value="icon ?? ''" :placeholder="t('library.creator.details.icon.placeholder')" @update:model-value="updateIcon" />
-    </div>
-
-    <fieldset v-if="type === 'books'" aria-describedby="cover-style-description">
-      <legend class="mb-3 text-[11px] font-semibold uppercase tracking-widest text-foreground">
-        {{ t('library.creator.details.coverStyle.title') }}
-      </legend>
-      <div class="flex flex-wrap gap-2">
-        <label
-          v-for="option in aspectRatioOptions"
-          :key="option.value"
-          class="flex cursor-pointer items-center gap-2 rounded-lg border px-3 py-2 text-sm font-medium transition-colors"
-          :class="
-            coverAspectRatio === option.value
-              ? 'border-primary bg-primary/10 text-foreground ring-1 ring-primary/30'
-              : 'border-border bg-background text-muted-foreground hover:border-foreground/30 hover:text-foreground'
-          "
+    <LibraryCreatorCard :label="t('library.creator.details.identity')">
+      <div class="flex items-end gap-3.5">
+        <span
+          class="flex size-13 shrink-0 items-center justify-center rounded-2xl"
+          :class="icon ? 'bg-primary/12 text-primary' : 'border-[1.5px] border-dashed border-primary/45 text-primary'"
+          aria-hidden="true"
         >
+          <AppIcon :icon="icon || 'Library'" fallback="Library" :size="24" />
+        </span>
+        <div class="min-w-0 flex-1">
+          <label for="library-name" class="mb-1.5 block text-xs font-medium text-muted-foreground">
+            {{ type === 'podcasts' ? t('library.creator.details.podcastName') : t('library.creator.details.libraryName') }}
+          </label>
           <input
-            type="radio"
-            name="cover-aspect-ratio"
-            :value="option.value"
-            :checked="coverAspectRatio === option.value"
-            class="sr-only"
-            @change="updateCoverAspectRatio"
+            id="library-name"
+            type="text"
+            :value="name"
+            :placeholder="type === 'podcasts' ? t('library.creator.details.podcastPlaceholder') : t('library.creator.details.namePlaceholder')"
+            maxlength="255"
+            class="h-10 w-full rounded-lg border border-input bg-background px-3 text-[15px] font-medium text-foreground placeholder:font-normal placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
+            autocomplete="off"
+            @input="updateName"
           />
-          <span class="h-5 border border-current/70 rounded-sm" :class="option.swatchClass" aria-hidden="true" />
-          {{ option.label }}
-        </label>
+        </div>
       </div>
-      <p id="cover-style-description" class="mt-2 text-xs text-muted-foreground">
-        {{ t('library.creator.details.coverStyle.hintSlots') }}
-      </p>
-    </fieldset>
+
+      <div class="mt-4">
+        <div class="mb-2 flex items-center gap-2">
+          <p id="library-icon-label" class="text-xs font-medium text-muted-foreground">{{ t('library.creator.details.icon.label') }}</p>
+          <div class="ms-auto">
+            <IconPicker
+              model-value=""
+              hide-text
+              :placeholder="t('library.creator.details.icon.more')"
+              @update:model-value="pickIcon"
+              @open-change="handlePickerOpen"
+            />
+          </div>
+        </div>
+        <div role="group" aria-labelledby="library-icon-label" class="grid grid-cols-[repeat(auto-fill,2.5rem)] justify-between gap-1.5">
+          <button
+            v-for="choice in iconChoices"
+            :key="choice"
+            type="button"
+            class="flex size-10 items-center justify-center rounded-lg border transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            :class="
+              icon === choice
+                ? 'border-primary bg-primary/14 text-primary ring-1 ring-primary'
+                : 'border-border bg-background text-foreground hover:bg-muted'
+            "
+            :aria-pressed="icon === choice"
+            :aria-label="iconLabel(choice)"
+            :title="iconLabel(choice)"
+            @click="selectIcon(choice)"
+          >
+            <AppIcon :icon="choice" fallback="Library" :size="17" />
+          </button>
+        </div>
+      </div>
+    </LibraryCreatorCard>
+
+    <LibraryCreatorCard v-if="type === 'books'" :label="t('library.creator.details.coverStyle.title')">
+      <fieldset aria-describedby="cover-style-description">
+        <legend class="sr-only">{{ t('library.creator.details.coverStyle.title') }}</legend>
+        <div class="grid gap-2.5 @md:grid-cols-2">
+          <label
+            v-for="option in coverOptions"
+            :key="option.value"
+            class="flex cursor-pointer items-center gap-3 rounded-xl border px-3.5 py-3 transition-colors focus-within:ring-2 focus-within:ring-ring"
+            :class="
+              coverAspectRatio === option.value ? 'border-primary bg-primary/8 ring-1 ring-primary' : 'border-border bg-background hover:bg-muted'
+            "
+          >
+            <input
+              type="radio"
+              name="cover-aspect-ratio"
+              :value="option.value"
+              :checked="coverAspectRatio === option.value"
+              class="sr-only"
+              @change="updateCoverAspectRatio"
+            />
+            <span class="flex h-8 shrink-0 items-end gap-1" aria-hidden="true">
+              <span
+                v-for="tile in option.tiles"
+                :key="tile"
+                class="rounded-[3px] shadow-xs"
+                :class="option.value === '2/3' ? 'h-8 w-5' : 'size-7'"
+                :style="{ backgroundColor: tile }"
+              />
+            </span>
+            <span class="min-w-0">
+              <span class="flex items-center gap-1.5 text-sm font-semibold text-foreground">
+                {{ option.title }}
+                <Check v-if="coverAspectRatio === option.value" :size="14" class="text-primary" aria-hidden="true" />
+              </span>
+              <span class="block text-xs text-muted-foreground">{{ option.hint }}</span>
+            </span>
+          </label>
+        </div>
+        <p id="cover-style-description" class="mt-2.5 text-xs text-muted-foreground">{{ t('library.creator.details.cover.slotsHint') }}</p>
+      </fieldset>
+    </LibraryCreatorCard>
   </div>
 </template>
diff --git a/client/src/features/library/components/LibraryCreatorFileWrite.vue b/client/src/features/library/components/LibraryCreatorFileWrite.vue
index a204834e4..6d5b787e3 100644
--- a/client/src/features/library/components/LibraryCreatorFileWrite.vue
+++ b/client/src/features/library/components/LibraryCreatorFileWrite.vue
@@ -1,26 +1,35 @@
 <script setup lang="ts">
+import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
+import { FileCode, FilePenLine } from '@lucide/vue'
 import ToggleSwitch from '@/components/ui/ToggleSwitch.vue'
+import { formatNumber } from '@/i18n/formatters'
+
+type FamilyKey = 'epub' | 'fb2' | 'pdf' | 'cbx' | 'kindle' | 'audio'
 
 const { t } = useI18n()
 
-const props = defineProps<{
-  fileRenameEnabled: boolean
-  fileWriteEnabled: boolean
-  fileWriteWriteCover: boolean
-  fileWriteEpubEnabled: boolean
-  fileWriteEpubMaxFileSizeMb: number
-  fileWriteFb2Enabled: boolean
-  fileWriteFb2MaxFileSizeMb: number
-  fileWritePdfEnabled: boolean
-  fileWritePdfMaxFileSizeMb: number
-  fileWriteCbxEnabled: boolean
-  fileWriteCbxMaxFileSizeMb: number
-  fileWriteKindleEnabled: boolean
-  fileWriteKindleMaxFileSizeMb: number
-  fileWriteAudioEnabled: boolean
-  fileWriteAudioMaxFileSizeMb: number
-}>()
+const props = withDefaults(
+  defineProps<{
+    fileRenameEnabled: boolean
+    fileWriteEnabled: boolean
+    fileWriteWriteCover: boolean
+    fileWriteEpubEnabled: boolean
+    fileWriteEpubMaxFileSizeMb: number
+    fileWriteFb2Enabled: boolean
+    fileWriteFb2MaxFileSizeMb: number
+    fileWritePdfEnabled: boolean
+    fileWritePdfMaxFileSizeMb: number
+    fileWriteCbxEnabled: boolean
+    fileWriteCbxMaxFileSizeMb: number
+    fileWriteKindleEnabled: boolean
+    fileWriteKindleMaxFileSizeMb: number
+    fileWriteAudioEnabled: boolean
+    fileWriteAudioMaxFileSizeMb: number
+    formatCounts?: Record<string, number> | null
+  }>(),
+  { formatCounts: null },
+)
 
 const emit = defineEmits<{
   'update:fileRenameEnabled': [value: boolean]
@@ -40,291 +49,181 @@ const emit = defineEmits<{
   'update:fileWriteAudioMaxFileSizeMb': [value: number]
 }>()
 
-function handleFileRenameToggle() {
-  emit('update:fileRenameEnabled', !props.fileRenameEnabled)
+/** The formats each writer handles, as its hint describes them, so the count matches what gets written. */
+const FAMILY_FORMATS: Record<FamilyKey, string[]> = {
+  epub: ['epub'],
+  fb2: ['fb2'],
+  pdf: ['pdf'],
+  cbx: ['cbz', 'cb7'],
+  kindle: ['mobi', 'azw3', 'azw'],
+  audio: ['m4b', 'm4a', 'mp3', 'flac'],
 }
 
-function handleFileWriteToggle() {
-  emit('update:fileWriteEnabled', !props.fileWriteEnabled)
+interface FamilyRow {
+  key: FamilyKey
+  enabled: boolean
+  size: number
+  blocked: boolean
+  count: number | null
 }
 
-function handleWriteCoverToggle() {
-  const next = !props.fileWriteWriteCover
-  emit('update:fileWriteWriteCover', next)
-  if (!next && props.fileWriteAudioEnabled) {
-    emit('update:fileWriteAudioEnabled', false)
+const rows = computed<FamilyRow[]>(() => {
+  const state: Record<FamilyKey, [boolean, number]> = {
+    epub: [props.fileWriteEpubEnabled, props.fileWriteEpubMaxFileSizeMb],
+    fb2: [props.fileWriteFb2Enabled, props.fileWriteFb2MaxFileSizeMb],
+    pdf: [props.fileWritePdfEnabled, props.fileWritePdfMaxFileSizeMb],
+    cbx: [props.fileWriteCbxEnabled, props.fileWriteCbxMaxFileSizeMb],
+    kindle: [props.fileWriteKindleEnabled, props.fileWriteKindleMaxFileSizeMb],
+    audio: [props.fileWriteAudioEnabled, props.fileWriteAudioMaxFileSizeMb],
   }
+  return (Object.keys(FAMILY_FORMATS) as FamilyKey[]).map((key) => {
+    const blocked = key === 'audio' && !props.fileWriteWriteCover
+    return {
+      key,
+      enabled: state[key][0] && !blocked,
+      size: state[key][1],
+      blocked,
+      count: props.formatCounts ? FAMILY_FORMATS[key].reduce((sum, format) => sum + (props.formatCounts?.[format] ?? 0), 0) : null,
+    }
+  })
+})
+
+const writtenCount = computed(() => rows.value.filter((row) => row.enabled).length)
+
+function emitEnabled(key: FamilyKey, value: boolean) {
+  if (key === 'epub') emit('update:fileWriteEpubEnabled', value)
+  else if (key === 'fb2') emit('update:fileWriteFb2Enabled', value)
+  else if (key === 'pdf') emit('update:fileWritePdfEnabled', value)
+  else if (key === 'cbx') emit('update:fileWriteCbxEnabled', value)
+  else if (key === 'kindle') emit('update:fileWriteKindleEnabled', value)
+  else emit('update:fileWriteAudioEnabled', value)
 }
 
-function handleEpubToggle() {
-  emit('update:fileWriteEpubEnabled', !props.fileWriteEpubEnabled)
+function emitSize(key: FamilyKey, value: number) {
+  if (key === 'epub') emit('update:fileWriteEpubMaxFileSizeMb', value)
+  else if (key === 'fb2') emit('update:fileWriteFb2MaxFileSizeMb', value)
+  else if (key === 'pdf') emit('update:fileWritePdfMaxFileSizeMb', value)
+  else if (key === 'cbx') emit('update:fileWriteCbxMaxFileSizeMb', value)
+  else if (key === 'kindle') emit('update:fileWriteKindleMaxFileSizeMb', value)
+  else emit('update:fileWriteAudioMaxFileSizeMb', value)
 }
 
-function handleFb2Toggle() {
-  emit('update:fileWriteFb2Enabled', !props.fileWriteFb2Enabled)
+function handleRenameToggle(value: boolean) {
+  emit('update:fileRenameEnabled', value)
 }
 
-function handlePdfToggle() {
-  emit('update:fileWritePdfEnabled', !props.fileWritePdfEnabled)
+function handleWriteToggle(value: boolean) {
+  emit('update:fileWriteEnabled', value)
 }
 
-function handleCbxToggle() {
-  emit('update:fileWriteCbxEnabled', !props.fileWriteCbxEnabled)
+function handleCoverChange(event: Event) {
+  const next = (event.target as HTMLInputElement).checked
+  emit('update:fileWriteWriteCover', next)
+  if (!next && props.fileWriteAudioEnabled) emit('update:fileWriteAudioEnabled', false)
 }
 
-function handleKindleToggle() {
-  emit('update:fileWriteKindleEnabled', !props.fileWriteKindleEnabled)
+function toggleFamily(row: FamilyRow, event: Event) {
+  emitEnabled(row.key, (event.target as HTMLInputElement).checked)
 }
 
-function handleAudioToggle() {
-  emit('update:fileWriteAudioEnabled', !props.fileWriteAudioEnabled)
-}
-
-function onMaxSizeInput(field: 'epub' | 'fb2' | 'pdf' | 'cbx' | 'kindle' | 'audio', e: Event) {
-  const val = Number((e.target as HTMLInputElement).value)
-  if (field === 'epub') emit('update:fileWriteEpubMaxFileSizeMb', val)
-  else if (field === 'fb2') emit('update:fileWriteFb2MaxFileSizeMb', val)
-  else if (field === 'pdf') emit('update:fileWritePdfMaxFileSizeMb', val)
-  else if (field === 'cbx') emit('update:fileWriteCbxMaxFileSizeMb', val)
-  else if (field === 'kindle') emit('update:fileWriteKindleMaxFileSizeMb', val)
-  else emit('update:fileWriteAudioMaxFileSizeMb', val)
-}
-
-function onEpubMaxSizeInput(e: Event) {
-  onMaxSizeInput('epub', e)
-}
-
-function onFb2MaxSizeInput(e: Event) {
-  onMaxSizeInput('fb2', e)
-}
-
-function onPdfMaxSizeInput(e: Event) {
-  onMaxSizeInput('pdf', e)
-}
-
-function onCbxMaxSizeInput(e: Event) {
-  onMaxSizeInput('cbx', e)
-}
-
-function onKindleMaxSizeInput(e: Event) {
-  onMaxSizeInput('kindle', e)
-}
-
-function onAudioMaxSizeInput(e: Event) {
-  onMaxSizeInput('audio', e)
+function updateSize(row: FamilyRow, event: Event) {
+  emitSize(row.key, Number((event.target as HTMLInputElement).value))
 }
 </script>
 
 <template>
-  <div class="space-y-4 px-4 py-5 sm:px-6 sm:py-6">
-    <div class="flex items-start justify-between gap-4 rounded-lg border border-border bg-card p-4">
-      <div>
-        <p class="text-sm font-medium text-foreground">{{ t('library.creator.fileWrite.rename.title') }}</p>
-        <p class="mt-1 text-xs leading-relaxed text-muted-foreground">
-          {{ t('library.creator.fileWrite.rename.hint') }}
-        </p>
+  <section class="divide-y divide-border rounded-xl border border-border bg-card">
+    <div class="flex items-start gap-3.5 px-4 py-3.5">
+      <FilePenLine :size="17" class="mt-0.5 shrink-0 text-foreground" aria-hidden="true" />
+      <div class="min-w-0 flex-1">
+        <p class="text-sm font-semibold text-foreground">{{ t('library.creator.fileWrite.rename.title') }}</p>
+        <p class="mt-0.5 text-xs text-muted-foreground">{{ t('library.creator.fileWrite.rename.hint') }}</p>
       </div>
       <ToggleSwitch
         :model-value="fileRenameEnabled"
         :aria-label="t('library.creator.fileWrite.rename.title')"
-        @update:model-value="handleFileRenameToggle"
+        @update:model-value="handleRenameToggle"
       />
     </div>
 
-    <div class="rounded-lg border border-border bg-card p-4">
-      <div class="flex items-start justify-between gap-4">
-        <div>
-          <p class="text-sm font-medium text-foreground">{{ t('library.creator.fileWrite.write.title') }}</p>
-          <p class="mt-1 text-xs leading-relaxed text-muted-foreground">{{ t('library.creator.fileWrite.write.hint') }}</p>
-        </div>
-        <ToggleSwitch
-          :model-value="fileWriteEnabled"
-          :aria-label="t('library.creator.fileWrite.write.title')"
-          @update:model-value="handleFileWriteToggle"
-        />
-      </div>
-
-      <div v-if="fileWriteEnabled" class="mt-4 border-t border-border pt-4">
-        <div class="flex items-start justify-between gap-4">
-          <div>
-            <p class="text-sm font-medium text-foreground">{{ t('library.creator.fileWrite.cover.title') }}</p>
-            <p class="mt-1 text-xs text-muted-foreground">{{ t('library.creator.fileWrite.cover.hint') }}</p>
-          </div>
-          <ToggleSwitch
-            :model-value="fileWriteWriteCover"
-            :aria-label="t('library.creator.fileWrite.cover.title')"
-            @update:model-value="handleWriteCoverToggle"
-          />
-        </div>
+    <div class="flex items-start gap-3.5 px-4 py-3.5">
+      <FileCode :size="17" class="mt-0.5 shrink-0 text-foreground" aria-hidden="true" />
+      <div class="min-w-0 flex-1">
+        <p class="text-sm font-semibold text-foreground">{{ t('library.creator.fileWrite.write.title') }}</p>
+        <p class="mt-0.5 text-xs text-muted-foreground">{{ t('library.creator.fileWrite.write.hint') }}</p>
       </div>
+      <ToggleSwitch
+        :model-value="fileWriteEnabled"
+        :aria-label="t('library.creator.fileWrite.write.title')"
+        @update:model-value="handleWriteToggle"
+      />
     </div>
 
-    <template v-if="fileWriteEnabled">
-      <p class="pt-2 text-[11px] font-semibold uppercase tracking-widest text-foreground">{{ t('library.creator.fileWrite.formatLimits') }}</p>
+    <div v-if="fileWriteEnabled" class="px-4 pb-4 pt-3.5">
+      <label class="mb-3 flex cursor-pointer items-start gap-2.5">
+        <input type="checkbox" class="mt-0.5 size-4 shrink-0 accent-primary" :checked="fileWriteWriteCover" @change="handleCoverChange" />
+        <span class="min-w-0">
+          <span class="block text-[13px] font-medium text-foreground">{{ t('library.creator.fileWrite.cover.title') }}</span>
+          <span class="block text-xs text-muted-foreground">{{ t('library.creator.fileWrite.coverAudioHint') }}</span>
+        </span>
+      </label>
 
-      <div class="grid gap-3 sm:grid-cols-2">
-        <div class="space-y-3 rounded-lg border border-border bg-card p-4">
-          <div class="flex items-start justify-between gap-3">
-            <div>
-              <p class="text-sm font-medium text-foreground">{{ t('library.creator.fileWrite.epub.title') }}</p>
-              <p class="mt-1 text-xs text-muted-foreground">{{ t('library.creator.fileWrite.epub.hint') }}</p>
-            </div>
-            <ToggleSwitch
-              :model-value="fileWriteEpubEnabled"
-              :aria-label="t('library.creator.fileWrite.epub.toggleAria')"
-              @update:model-value="handleEpubToggle"
-            />
-          </div>
-          <label v-if="fileWriteEpubEnabled" for="epub-max-size" class="flex items-center justify-between gap-3 text-xs text-muted-foreground">
-            {{ t('library.creator.fileWrite.maxFileSizeMb') }}
-            <input
-              id="epub-max-size"
-              type="number"
-              :value="fileWriteEpubMaxFileSizeMb"
-              min="1"
-              max="10000"
-              step="1"
-              class="w-24 rounded-md border border-input bg-background px-3 py-1.5 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-ring"
-              @input="onEpubMaxSizeInput"
-            />
-          </label>
-        </div>
-
-        <div class="space-y-3 rounded-lg border border-border bg-card p-4">
-          <div class="flex items-start justify-between gap-3">
-            <div>
-              <p class="text-sm font-medium text-foreground">{{ t('library.creator.fileWrite.fb2.title') }}</p>
-              <p class="mt-1 text-xs text-muted-foreground">{{ t('library.creator.fileWrite.fb2.hint') }}</p>
-            </div>
-            <ToggleSwitch
-              :model-value="fileWriteFb2Enabled"
-              :aria-label="t('library.creator.fileWrite.fb2.toggleAria')"
-              @update:model-value="handleFb2Toggle"
-            />
-          </div>
-          <label v-if="fileWriteFb2Enabled" for="fb2-max-size" class="flex items-center justify-between gap-3 text-xs text-muted-foreground">
-            {{ t('library.creator.fileWrite.maxFileSizeMb') }}
-            <input
-              id="fb2-max-size"
-              type="number"
-              :value="fileWriteFb2MaxFileSizeMb"
-              min="1"
-              max="10000"
-              step="1"
-              class="w-24 rounded-md border border-input bg-background px-3 py-1.5 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-ring"
-              @input="onFb2MaxSizeInput"
-            />
-          </label>
-        </div>
-
-        <div class="space-y-3 rounded-lg border border-border bg-card p-4">
-          <div class="flex items-start justify-between gap-3">
-            <div>
-              <p class="text-sm font-medium text-foreground">{{ t('library.creator.fileWrite.pdf.title') }}</p>
-              <p class="mt-1 text-xs text-muted-foreground">{{ t('library.creator.fileWrite.pdf.hint') }}</p>
-            </div>
-            <ToggleSwitch
-              :model-value="fileWritePdfEnabled"
-              :aria-label="t('library.creator.fileWrite.pdf.toggleAria')"
-              @update:model-value="handlePdfToggle"
-            />
-          </div>
-          <label v-if="fileWritePdfEnabled" for="pdf-max-size" class="flex items-center justify-between gap-3 text-xs text-muted-foreground">
-            {{ t('library.creator.fileWrite.maxFileSizeMb') }}
-            <input
-              id="pdf-max-size"
-              type="number"
-              :value="fileWritePdfMaxFileSizeMb"
-              min="1"
-              max="10000"
-              step="1"
-              class="w-24 rounded-md border border-input bg-background px-3 py-1.5 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-ring"
-              @input="onPdfMaxSizeInput"
-            />
-          </label>
-        </div>
-
-        <div class="space-y-3 rounded-lg border border-border bg-card p-4">
-          <div class="flex items-start justify-between gap-3">
-            <div>
-              <p class="text-sm font-medium text-foreground">{{ t('library.creator.fileWrite.cbx.title') }}</p>
-              <p class="mt-1 text-xs text-muted-foreground">{{ t('library.creator.fileWrite.cbx.hint') }}</p>
-            </div>
-            <ToggleSwitch
-              :model-value="fileWriteCbxEnabled"
-              :aria-label="t('library.creator.fileWrite.cbx.toggleAria')"
-              @update:model-value="handleCbxToggle"
-            />
-          </div>
-          <label v-if="fileWriteCbxEnabled" for="cbx-max-size" class="flex items-center justify-between gap-3 text-xs text-muted-foreground">
-            {{ t('library.creator.fileWrite.maxFileSizeMb') }}
-            <input
-              id="cbx-max-size"
-              type="number"
-              :value="fileWriteCbxMaxFileSizeMb"
-              min="1"
-              max="10000"
-              step="1"
-              class="w-24 rounded-md border border-input bg-background px-3 py-1.5 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-ring"
-              @input="onCbxMaxSizeInput"
-            />
-          </label>
-        </div>
-
-        <div class="space-y-3 rounded-lg border border-border bg-card p-4">
-          <div class="flex items-start justify-between gap-3">
-            <div>
-              <p class="text-sm font-medium text-foreground">{{ t('library.creator.fileWrite.kindle.title') }}</p>
-              <p class="mt-1 text-xs text-muted-foreground">{{ t('library.creator.fileWrite.kindle.hint') }}</p>
-            </div>
-            <ToggleSwitch
-              :model-value="fileWriteKindleEnabled"
-              :aria-label="t('library.creator.fileWrite.kindle.toggleAria')"
-              @update:model-value="handleKindleToggle"
-            />
-          </div>
-          <label v-if="fileWriteKindleEnabled" for="kindle-max-size" class="flex items-center justify-between gap-3 text-xs text-muted-foreground">
-            {{ t('library.creator.fileWrite.maxFileSizeMb') }}
-            <input
-              id="kindle-max-size"
-              type="number"
-              :value="fileWriteKindleMaxFileSizeMb"
-              min="1"
-              max="10000"
-              step="1"
-              class="w-24 rounded-md border border-input bg-background px-3 py-1.5 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-ring"
-              @input="onKindleMaxSizeInput"
-            />
-          </label>
-        </div>
-
-        <div v-if="fileWriteWriteCover" class="space-y-3 rounded-lg border border-border bg-card p-4">
-          <div class="flex items-start justify-between gap-3">
-            <div>
-              <p class="text-sm font-medium text-foreground">{{ t('library.creator.fileWrite.audio.title') }}</p>
-              <p class="mt-1 text-xs text-muted-foreground">{{ t('library.creator.fileWrite.audio.hint') }}</p>
-            </div>
-            <ToggleSwitch
-              :model-value="fileWriteAudioEnabled"
-              :aria-label="t('library.creator.fileWrite.audio.toggleAria')"
-              @update:model-value="handleAudioToggle"
-            />
-          </div>
-          <label v-if="fileWriteAudioEnabled" for="audio-max-size" class="flex items-center justify-between gap-3 text-xs text-muted-foreground">
-            {{ t('library.creator.fileWrite.maxFileSizeMb') }}
-            <input
-              id="audio-max-size"
-              type="number"
-              :value="fileWriteAudioMaxFileSizeMb"
-              min="1"
-              max="10000"
-              step="1"
-              class="w-24 rounded-md border border-input bg-background px-3 py-1.5 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-ring"
-              @input="onAudioMaxSizeInput"
-            />
-          </label>
+      <div class="overflow-hidden rounded-lg border border-border bg-background">
+        <div
+          class="flex items-center gap-3 border-b border-border px-3 py-2 text-[10.5px] font-semibold uppercase tracking-wider text-muted-foreground"
+        >
+          <span class="flex-1">{{ t('library.creator.fileWrite.table.format') }}</span>
+          <span v-if="formatCounts" class="hidden w-16 text-end @lg:block">{{ t('library.creator.fileWrite.table.inLibrary') }}</span>
+          <span class="w-28 text-end">{{ t('library.creator.fileWrite.table.sizeLimit') }}</span>
         </div>
+        <ul class="divide-y divide-border">
+          <li v-for="row in rows" :key="row.key" class="flex items-center gap-3 px-3 py-2.5" :class="row.blocked ? 'text-muted-foreground' : ''">
+            <label class="flex min-w-0 flex-1 cursor-pointer items-start gap-2.5" :class="row.blocked ? 'cursor-not-allowed' : ''">
+              <input
+                type="checkbox"
+                class="mt-0.5 size-4 shrink-0 accent-primary disabled:opacity-50"
+                :checked="row.enabled"
+                :disabled="row.blocked"
+                :aria-label="t(`library.creator.fileWrite.${row.key}.toggleAria`)"
+                @change="toggleFamily(row, $event)"
+              />
+              <span class="min-w-0">
+                <span class="block text-[13px] font-medium" :class="row.blocked ? 'text-muted-foreground' : 'text-foreground'">
+                  {{ t(`library.creator.fileWrite.${row.key}.title`) }}
+                </span>
+                <span class="block text-xs text-muted-foreground">
+                  {{ row.blocked ? t('library.creator.fileWrite.audioNeedsCover') : t(`library.creator.fileWrite.${row.key}.hint`) }}
+                </span>
+              </span>
+            </label>
+            <span
+              v-if="formatCounts"
+              class="hidden w-16 text-end text-xs tabular-nums @lg:block"
+              :class="row.count ? 'text-foreground' : 'text-muted-foreground'"
+            >
+              {{ row.count ? formatNumber(row.count) : '–' }}
+            </span>
+            <span class="relative w-28 shrink-0">
+              <input
+                :id="`${row.key}-max-size`"
+                type="number"
+                min="1"
+                max="10000"
+                step="1"
+                :value="row.size"
+                :disabled="!row.enabled"
+                :aria-label="t('library.creator.fileWrite.sizeLimitAria', { format: t(`library.creator.fileWrite.${row.key}.title`) })"
+                class="h-8 w-full rounded-md border border-input bg-background pe-10 ps-2.5 text-end text-[13px] tabular-nums text-foreground focus:outline-none focus:ring-2 focus:ring-ring disabled:opacity-50"
+                @input="updateSize(row, $event)"
+              />
+              <span class="pointer-events-none absolute end-2.5 top-1/2 -translate-y-1/2 text-xs text-muted-foreground" aria-hidden="true">
+                {{ t('library.creator.fileWrite.mb') }}
+              </span>
+            </span>
+          </li>
+        </ul>
       </div>
-    </template>
-  </div>
+      <p class="mt-2 text-xs text-muted-foreground">{{ t('library.creator.fileWrite.summary', { count: writtenCount }) }}</p>
+    </div>
+  </section>
 </template>
diff --git a/client/src/features/library/components/LibraryCreatorFolders.vue b/client/src/features/library/components/LibraryCreatorFolders.vue
index a3accac7c..ae9179998 100644
--- a/client/src/features/library/components/LibraryCreatorFolders.vue
+++ b/client/src/features/library/components/LibraryCreatorFolders.vue
@@ -1,29 +1,105 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { AlertTriangle, CheckCircle2, ChevronDown, ChevronUp, FolderOpen, FolderPlus, Loader2, Plus, RefreshCw, Trash2, XCircle } from '@lucide/vue'
-import type { LibraryType, PrescanPathResult, PrescanResult } from '@bookorbit/types'
+import { CircleCheck, CircleX, FolderOpen, FolderPlus, FolderSearch, Info, Loader2, Plus, RefreshCw, Trash2, TriangleAlert } from '@lucide/vue'
+import type { LibraryStats, LibraryType } from '@bookorbit/types'
+import { formatBytes } from '@/lib/formatting'
+import LibraryFormatBar from '@/features/settings/libraries/components/LibraryFormatBar.vue'
+import type { FolderCheck } from '../composables/useLibraryCreator'
 import { useLibraryFolderSelection } from '../composables/useLibraryFolderSelection'
 import FolderPickerModal from './FolderPickerModal.vue'
+import LibraryCreatorCard from './LibraryCreatorCard.vue'
 import LibraryCreatorLocalFolders from './LibraryCreatorLocalFolders.vue'
 
 const { t } = useI18n()
 
-const props = defineProps<{
-  folders: string[]
-  localFolders: string[]
-  prescanResult: PrescanResult | null
-  prescanLoading: boolean
-  libraryType: LibraryType
-}>()
+const props = withDefaults(
+  defineProps<{
+    folders: string[]
+    localFolders: string[]
+    libraryType: LibraryType
+    checks?: Record<string, FolderCheck>
+    stats?: LibraryStats | null
+  }>(),
+  { checks: () => ({}), stats: null },
+)
 
 const emit = defineEmits<{
   'update:folders': [value: string[]]
   'update:localFolders': [value: string[]]
   'update:pickerOpen': [value: boolean]
-  prescan: []
+  check: [paths: string[]]
 }>()
 
+const {
+  pickerOpen,
+  manualPath,
+  manualError,
+  openPicker,
+  closePicker,
+  addBrowsedFolders: addSelectedFolders,
+  removeFolder,
+  clearManualError,
+  addManualFolder,
+} = useLibraryFolderSelection({
+  folders: () => props.folders,
+  updateFolders: (folders) => emit('update:folders', folders),
+  updatePickerOpen: (open) => emit('update:pickerOpen', open),
+})
+
+const podcast = computed(() => props.libraryType === 'podcasts')
+const canAdd = computed(() => !podcast.value || props.folders.length === 0)
+const checkedFolders = computed(() => props.folders.map((folder) => props.checks[folder]).filter((check) => check?.state === 'checked'))
+const matchingFiles = computed(() =>
+  checkedFolders.value.reduce((sum, check) => sum + (check.state === 'checked' && check.accessible ? check.fileCount : 0), 0),
+)
+const anyChecking = computed(() => props.folders.some((folder) => props.checks[folder]?.state === 'checking'))
+const showStats = computed(() => !podcast.value && props.stats !== null && props.stats.totalBooks > 0)
+
+type FolderStatus =
+  | { kind: 'unchecked' }
+  | { kind: 'checking' }
+  | { kind: 'failed' }
+  | { kind: 'inaccessible' }
+  | { kind: 'overlap'; library: string }
+  | { kind: 'ok'; files: number }
+
+interface FolderRow {
+  folder: string
+  parent: string
+  leaf: string
+  status: FolderStatus
+}
+
+const rows = computed<FolderRow[]>(() => props.folders.map((folder) => ({ folder, ...splitPath(folder), status: statusOf(props.checks[folder]) })))
+
+function statusOf(check: FolderCheck | undefined): FolderStatus {
+  if (!check) return { kind: 'unchecked' }
+  if (check.state === 'checking') return { kind: 'checking' }
+  if (check.state === 'failed') return { kind: 'failed' }
+  if (!check.accessible) return { kind: 'inaccessible' }
+  if (check.overlapLibrary) return { kind: 'overlap', library: check.overlapLibrary }
+  return { kind: 'ok', files: check.fileCount }
+}
+
+function splitPath(path: string): { parent: string; leaf: string } {
+  const index = path.lastIndexOf('/')
+  if (index < 0) return { parent: '', leaf: path }
+  return { parent: path.slice(0, index + 1), leaf: path.slice(index + 1) }
+}
+
+function checkAll() {
+  emit('check', props.folders)
+}
+
+function retry(folder: string) {
+  emit('check', [folder])
+}
+
+function handleRemove(folder: string) {
+  removeFolder(folder)
+}
+
 function handleLocalFoldersUpdate(value: string[]) {
   emit('update:localFolders', value)
 }
@@ -32,206 +108,165 @@ function handleNestedPickerChange(value: boolean) {
   emit('update:pickerOpen', value)
 }
 
-const {
-  pickerOpen,
-  manualEntryOpen,
-  manualPath,
-  manualError,
-  openPicker,
-  closePicker,
-  addBrowsedFolders: addSelectedFolders,
-  removeFolder,
-  toggleManualEntry,
-  closeManualEntry,
-  clearManualError,
-  addManualFolder,
-} = useLibraryFolderSelection({
-  folders: () => props.folders,
-  updateFolders: (folders) => emit('update:folders', folders),
-  updatePickerOpen: (open) => emit('update:pickerOpen', open),
-})
-
-const prescanByPath = computed(() => new Map(props.prescanResult?.paths.map((result) => [result.path, result]) ?? []))
-
-const validationSummary = computed(() => {
-  const itemLabel = props.libraryType === 'podcasts' ? 'podcast episode files' : 'book files'
-  if (props.prescanLoading) return `Checking accessibility and counting matching ${itemLabel}...`
-  if (!props.prescanResult) return `Verify access and estimate matching ${itemLabel}.`
-  const accessibleCount = props.prescanResult.paths.filter((path) => path.accessible).length
-  const inaccessibleCount = props.prescanResult.paths.length - accessibleCount
-  const files = `${props.prescanResult.totalFiles.toLocaleString()} matching file${props.prescanResult.totalFiles === 1 ? '' : 's'}`
-  return inaccessibleCount > 0
-    ? `${files}. ${inaccessibleCount} folder${inaccessibleCount === 1 ? '' : 's'} could not be accessed.`
-    : `${files} across ${accessibleCount} folder${accessibleCount === 1 ? '' : 's'}.`
-})
-
-function prescanStatusFor(path: string): PrescanPathResult | null {
-  return prescanByPath.value.get(path) ?? null
-}
-
-function statusLabel(path: string): string {
-  if (props.prescanLoading) return 'Checking'
-  const status = prescanStatusFor(path)
-  if (!status) return 'Not checked'
-  if (!status.accessible) return 'Not accessible'
-  if (status.overlapLibrary) return 'Overlaps another library'
-  return `Accessible · ${status.fileCount.toLocaleString()} file${status.fileCount === 1 ? '' : 's'}`
-}
-
-function statusClass(path: string): string {
-  if (props.prescanLoading || !prescanStatusFor(path)) return 'bg-muted text-muted-foreground'
-  const status = prescanStatusFor(path)!
-  if (!status.accessible) return 'bg-destructive/10 text-destructive'
-  if (status.overlapLibrary) return 'bg-muted text-foreground'
-  return 'bg-primary/10 text-primary'
-}
-
-function statusTitle(path: string): string | undefined {
-  const overlapLibrary = prescanStatusFor(path)?.overlapLibrary
-  return overlapLibrary ? `Also used by “${overlapLibrary}”` : undefined
-}
-
-function handlePrescan() {
-  emit('prescan')
-}
-
 function addBrowsedFolders(paths: string[]) {
-  addSelectedFolders(props.libraryType === 'podcasts' ? paths.slice(0, 1) : paths)
+  addSelectedFolders(podcast.value ? paths.slice(0, 1) : paths)
 }
 </script>
 
 <template>
-  <div class="space-y-4 px-6 py-6">
-    <button
-      v-if="folders.length === 0"
-      type="button"
-      class="flex min-h-24 w-full flex-col items-center justify-center gap-2 rounded-lg border border-dashed border-border bg-muted/15 px-5 py-3 text-center transition-colors hover:border-primary/50 hover:bg-muted/40"
-      @click="openPicker"
+  <div class="flex flex-col gap-3">
+    <LibraryCreatorCard
+      flush
+      label-id="library-folders-title"
+      :label="podcast ? t('library.creator.folders.storageTitle') : t('library.creator.folders.listTitle')"
     >
-      <span class="flex size-9 items-center justify-center rounded-lg bg-primary/10 text-primary">
-        <FolderOpen :size="19" />
-      </span>
-      <span>
-        <span class="block text-sm font-semibold text-foreground">{{ t('library.creator.folders.browseTitle') }}</span>
-        <span class="mt-1 block text-sm text-muted-foreground">
-          {{
-            libraryType === 'podcasts' ? 'Choose where downloaded podcast episodes will be stored.' : t('library.creator.folders.browseDescription')
-          }}
-        </span>
-      </span>
-    </button>
-
-    <section v-else aria-labelledby="selected-folders-title">
-      <div class="mb-3 flex items-center justify-between gap-3">
-        <div class="flex items-center gap-2">
-          <h4 id="selected-folders-title" class="text-sm font-semibold text-foreground">
-            {{ libraryType === 'podcasts' ? 'Storage folder' : t('library.creator.folders.selectedTitle') }}
-          </h4>
-          <span class="rounded-full bg-muted px-2 py-0.5 text-xs font-medium text-muted-foreground">{{ folders.length }}</span>
-        </div>
+      <template v-if="folders.length > 0" #meta>
+        <template v-if="checkedFolders.length > 0">
+          <span>{{ t('library.creator.folders.matchingFiles', { count: matchingFiles }) }}</span>
+        </template>
+        <template v-else-if="showStats && stats">
+          <span>{{ t('library.creator.folders.bookCount', { count: stats.totalBooks }) }}</span>
+          <span aria-hidden="true">&middot;</span>
+          <span class="tabular-nums">{{ formatBytes(stats.totalSizeBytes) }}</span>
+        </template>
         <button
-          v-if="libraryType === 'books'"
           type="button"
-          class="flex h-9 items-center gap-2 rounded-md border border-border px-3 text-sm font-medium text-foreground transition-colors hover:bg-muted"
-          @click="openPicker"
+          class="flex size-7 items-center justify-center rounded-md text-foreground transition-colors hover:bg-muted disabled:opacity-50"
+          :aria-label="t('library.creator.folders.checkAll')"
+          :title="t('library.creator.folders.checkAll')"
+          :disabled="anyChecking"
+          @click="checkAll"
         >
-          <Plus :size="16" />
-          {{ t('library.creator.folders.addFolders') }}
+          <RefreshCw :size="13" :class="anyChecking ? 'motion-safe:animate-spin' : ''" aria-hidden="true" />
         </button>
-      </div>
+      </template>
 
-      <div class="overflow-hidden rounded-lg border border-border bg-card divide-y divide-border">
-        <div v-for="folder in folders" :key="folder" class="flex min-h-12 items-center gap-2.5 px-3 py-2">
-          <FolderOpen :size="16" class="shrink-0 text-primary" />
-          <p class="min-w-0 flex-1 truncate font-mono text-[13px] text-foreground" :title="folder">{{ folder }}</p>
-          <div class="flex shrink-0 items-center gap-2">
-            <span class="rounded-full px-2 py-0.5 text-xs font-medium" :class="statusClass(folder)" :title="statusTitle(folder)">
-              <Loader2 v-if="prescanLoading" :size="11" class="mr-1 inline animate-spin" />
-              <XCircle v-else-if="prescanStatusFor(folder) && !prescanStatusFor(folder)!.accessible" :size="11" class="mr-1 inline" />
-              <AlertTriangle v-else-if="prescanStatusFor(folder)?.overlapLibrary" :size="11" class="mr-1 inline" />
-              <CheckCircle2 v-else-if="prescanStatusFor(folder)?.accessible" :size="11" class="mr-1 inline" />
-              {{ statusLabel(folder) }}
+      <ul v-if="rows.length > 0" class="divide-y divide-border border-t border-border" aria-labelledby="library-folders-title">
+        <li v-for="row in rows" :key="row.folder" class="flex min-h-12 items-center gap-2.5 px-4 py-2">
+          <FolderOpen :size="16" class="shrink-0 text-primary" aria-hidden="true" />
+          <p class="flex min-w-0 flex-1 font-mono text-[12.5px]" dir="ltr" :title="row.folder">
+            <span class="min-w-0 truncate text-path-dim">{{ row.parent }}</span>
+            <span class="max-w-[70%] shrink-0 truncate font-semibold text-foreground">{{ row.leaf }}</span>
+          </p>
+          <span
+            v-if="row.status.kind === 'checking'"
+            class="inline-flex shrink-0 items-center gap-1 rounded-full bg-muted px-2 py-0.5 text-xs font-medium text-muted-foreground"
+          >
+            <Loader2 :size="11" class="motion-safe:animate-spin" aria-hidden="true" />
+            {{ t('library.creator.folders.status.checking') }}
+          </span>
+          <template v-else-if="row.status.kind === 'failed'">
+            <span class="inline-flex shrink-0 items-center rounded-full bg-muted px-2 py-0.5 text-xs font-medium text-muted-foreground">
+              {{ t('library.creator.folders.status.failed') }}
             </span>
             <button
               type="button"
-              class="flex size-8 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-destructive/10 hover:text-destructive"
-              :aria-label="t('library.creator.folders.removeFolder', { folder })"
-              @click="removeFolder(folder)"
+              class="flex size-7 shrink-0 items-center justify-center rounded-md text-foreground hover:bg-muted"
+              :aria-label="t('library.creator.folders.checkAgain', { folder: row.folder })"
+              @click="retry(row.folder)"
             >
-              <Trash2 :size="16" />
+              <RefreshCw :size="13" aria-hidden="true" />
             </button>
-          </div>
-        </div>
+          </template>
+          <span
+            v-else-if="row.status.kind === 'inaccessible'"
+            class="inline-flex shrink-0 items-center gap-1 rounded-full bg-destructive/12 px-2 py-0.5 text-xs font-medium text-destructive"
+          >
+            <CircleX :size="11" aria-hidden="true" />
+            {{ t('library.creator.folders.status.notAccessible') }}
+          </span>
+          <span
+            v-else-if="row.status.kind === 'overlap'"
+            class="inline-flex max-w-44 shrink-0 items-center gap-1 rounded-full bg-warning/14 px-2 py-0.5 text-xs font-medium text-warning"
+            :title="t('library.creator.folders.status.overlapTitle', { library: row.status.library })"
+          >
+            <TriangleAlert :size="11" class="shrink-0" aria-hidden="true" />
+            <span class="truncate">{{ t('library.creator.folders.status.overlap', { library: row.status.library }) }}</span>
+          </span>
+          <span
+            v-else-if="row.status.kind === 'ok'"
+            class="inline-flex shrink-0 items-center gap-1 rounded-full bg-success/12 px-2 py-0.5 text-xs font-medium text-success"
+          >
+            <CircleCheck :size="11" aria-hidden="true" />
+            {{ t('library.creator.folders.status.files', { count: row.status.files }) }}
+          </span>
+          <button
+            type="button"
+            class="flex size-8 shrink-0 items-center justify-center rounded-md text-foreground transition-colors hover:bg-destructive/10 hover:text-destructive"
+            :aria-label="t('library.creator.folders.removeFolder', { folder: row.folder })"
+            @click="handleRemove(row.folder)"
+          >
+            <Trash2 :size="15" aria-hidden="true" />
+          </button>
+        </li>
+      </ul>
+      <div v-else class="border-t border-border px-4 py-6 text-center">
+        <span class="mx-auto mb-2.5 flex size-9 items-center justify-center rounded-xl bg-primary/12 text-primary" aria-hidden="true">
+          <FolderOpen :size="18" />
+        </span>
+        <p class="text-sm font-semibold text-foreground">{{ t('library.creator.folders.noneAdded') }}</p>
+        <p class="mt-0.5 text-xs text-muted-foreground">
+          {{ podcast ? t('library.creator.folders.emptyPodcastHint') : t('library.creator.folders.emptyHint') }}
+        </p>
       </div>
-    </section>
 
-    <div v-if="libraryType === 'books' || folders.length === 0">
-      <button
-        type="button"
-        class="flex h-9 items-center gap-2 text-sm font-medium text-muted-foreground transition-colors hover:text-foreground"
-        :aria-expanded="manualEntryOpen"
-        @click="toggleManualEntry"
+      <div v-if="showStats && stats && checkedFolders.length === 0" class="border-t border-border px-4 pb-3 pt-3">
+        <LibraryFormatBar show-legend :counts="stats.formatCounts" :legend-limit="6" />
+      </div>
+
+      <form
+        v-if="canAdd"
+        class="flex flex-wrap items-start gap-2 border-t border-border bg-background/50 px-3 py-2.5"
+        @submit.prevent="addManualFolder"
       >
-        <FolderPlus :size="16" />
-        {{ t('library.creator.folders.manualEntry') }}
-        <ChevronUp v-if="manualEntryOpen" :size="15" />
-        <ChevronDown v-else :size="15" />
-      </button>
-
-      <form v-if="manualEntryOpen" class="mt-2 rounded-lg border border-border bg-muted/20 p-3" @submit.prevent="addManualFolder">
-        <label for="manual-folder-path" class="mb-2 block text-sm font-medium text-foreground">{{ t('library.creator.folders.absolutePath') }}</label>
-        <div class="flex flex-col gap-2 sm:flex-row">
-          <input
-            id="manual-folder-path"
-            v-model="manualPath"
-            type="text"
-            :placeholder="libraryType === 'podcasts' ? '/path/to/podcasts' : t('library.creator.folders.pathPlaceholder')"
-            class="h-10 min-w-0 flex-1 rounded-md border border-input bg-background px-3 font-mono text-sm text-foreground placeholder:font-sans placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
-            @input="clearManualError"
-          />
-          <div class="grid grid-cols-2 gap-2 sm:flex">
-            <button
-              type="submit"
-              class="h-10 rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground transition-opacity hover:opacity-90"
-            >
-              {{ t('library.creator.folders.addFolder') }}
-            </button>
-            <button
-              type="button"
-              class="h-10 rounded-md border border-border px-4 text-sm font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
-              @click="closeManualEntry"
-            >
-              {{ t('common.cancel') }}
-            </button>
+        <div class="min-w-0 flex-[1_1_14rem]">
+          <label for="manual-folder-path" class="sr-only">{{ t('library.creator.folders.absolutePath') }}</label>
+          <div class="relative">
+            <FolderPlus :size="15" class="pointer-events-none absolute start-3 top-1/2 -translate-y-1/2 text-muted-foreground" aria-hidden="true" />
+            <input
+              id="manual-folder-path"
+              v-model="manualPath"
+              type="text"
+              dir="ltr"
+              :placeholder="podcast ? t('library.creator.folders.pastePodcastPlaceholder') : t('library.creator.folders.pastePlaceholder')"
+              class="h-9 w-full rounded-md border border-input bg-background pe-3 ps-9 font-mono text-[12.5px] text-foreground placeholder:font-sans placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
+              :aria-invalid="manualError ? 'true' : undefined"
+              :aria-describedby="manualError ? 'manual-folder-error' : undefined"
+              @input="clearManualError"
+            />
           </div>
+          <p v-if="manualError" id="manual-folder-error" class="mt-1.5 text-xs text-destructive" role="alert">{{ manualError }}</p>
         </div>
-        <p v-if="manualError" class="mt-2 text-sm text-destructive">{{ manualError }}</p>
-        <p v-else class="mt-2 text-xs text-muted-foreground">{{ t('library.creator.folders.manualCheckHint') }}</p>
-      </form>
-    </div>
-
-    <div v-if="folders.length > 0" class="rounded-lg border border-border bg-muted/20 p-3">
-      <div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
-        <p class="min-w-0 text-sm text-muted-foreground">{{ validationSummary }}</p>
+        <button
+          type="submit"
+          class="inline-flex h-9 items-center gap-1.5 rounded-md border border-border px-3 text-sm font-medium text-foreground transition-colors hover:bg-muted"
+        >
+          <Plus :size="14" aria-hidden="true" />
+          {{ t('library.creator.folders.add') }}
+        </button>
         <button
           type="button"
-          class="flex h-10 shrink-0 items-center justify-center gap-2 rounded-md border border-border bg-background px-4 text-sm font-medium text-foreground transition-colors hover:bg-muted disabled:opacity-50"
-          :disabled="folders.length === 0 || prescanLoading"
-          @click="handlePrescan"
+          class="inline-flex h-9 items-center gap-1.5 rounded-md border border-border px-3 text-sm font-medium text-foreground transition-colors hover:bg-muted"
+          @click="openPicker"
         >
-          <RefreshCw :size="16" :class="prescanLoading ? 'animate-spin' : ''" />
-          {{ prescanLoading ? 'Checking...' : prescanResult ? 'Check again' : 'Check folders' }}
+          <FolderSearch :size="14" aria-hidden="true" />
+          {{ t('library.creator.folders.browse') }}
         </button>
-      </div>
-    </div>
-  </div>
+      </form>
+    </LibraryCreatorCard>
 
-  <LibraryCreatorLocalFolders
-    v-if="libraryType === 'podcasts'"
-    :local-folders="localFolders"
-    @update:local-folders="handleLocalFoldersUpdate"
-    @update:picker-open="handleNestedPickerChange"
-  />
+    <p v-if="!podcast" class="flex items-start gap-1.5 text-xs text-muted-foreground">
+      <Info :size="13" class="mt-px shrink-0" aria-hidden="true" />
+      <span>{{ t('library.creator.folders.checkHint') }}</span>
+    </p>
+
+    <LibraryCreatorLocalFolders
+      v-if="podcast"
+      :local-folders="localFolders"
+      @update:local-folders="handleLocalFoldersUpdate"
+      @update:picker-open="handleNestedPickerChange"
+    />
+  </div>
 
   <FolderPickerModal v-if="pickerOpen" :selected-paths="folders" @select="addBrowsedFolders" @close="closePicker" />
 </template>
diff --git a/client/src/features/library/components/LibraryCreatorMetadata.vue b/client/src/features/library/components/LibraryCreatorMetadata.vue
index 0936b43ee..f9a383117 100644
--- a/client/src/features/library/components/LibraryCreatorMetadata.vue
+++ b/client/src/features/library/components/LibraryCreatorMetadata.vue
@@ -1,181 +1,287 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { ChevronDown, ChevronUp, GripVertical, Headphones } from '@lucide/vue'
-import { isReadAlongFormatKey } from '@bookorbit/types'
+import { ArrowDown, ArrowLeftRight, ArrowUp, FileCode, FileText, GripVertical, Headphones, RotateCcw } from '@lucide/vue'
+import { DEFAULT_FORMAT_PRIORITY, isReadAlongFormatKey, withReadAlongFormatPriority } from '@bookorbit/types'
+import { formatNumber } from '@/i18n/formatters'
+import { formatColorVar } from '@/features/book/lib/format-colors'
 import { formatKeyCode, formatKeyName } from '@/features/book/lib/book-formats'
-import { METADATA_LABELS } from '../composables/useLibraryCreator'
+import { formatFamilyColor } from '@/features/settings/libraries/lib/library-formats'
+import { DEFAULT_METADATA_PRECEDENCE } from '../composables/useLibraryCreator'
+import LibraryCreatorCard from './LibraryCreatorCard.vue'
 
 const { t } = useI18n()
 
-const props = defineProps<{
-  metadataPrecedence: string[]
-  formatPriority: string[]
-}>()
+/** Without counts there is no way to tell which formats matter, so only the head of the order shows until asked. */
+const PREVIEW_ROWS = 6
+
+const props = withDefaults(
+  defineProps<{
+    metadataPrecedence: string[]
+    formatPriority: string[]
+    allowedFormats?: string[]
+    formatCounts?: Record<string, number> | null
+  }>(),
+  { allowedFormats: () => [], formatCounts: null },
+)
 
 const emit = defineEmits<{
   'update:metadataPrecedence': [value: string[]]
   'update:formatPriority': [value: string[]]
 }>()
 
-function useDragList(getList: () => string[], onUpdate: (v: string[]) => void) {
-  const dragFrom = ref<number | null>(null)
-  const dragOver = ref<number | null>(null)
+const showAll = ref(false)
+const dragKey = ref<string | null>(null)
+const overKey = ref<string | null>(null)
 
-  function onDragStart(i: number) {
-    dragFrom.value = i
-  }
-  function onDragEnter(i: number) {
-    dragOver.value = i
-  }
-  function onDrop() {
-    if (dragFrom.value === null || dragOver.value === null || dragFrom.value === dragOver.value) return
-    const list = [...getList()]
-    const [item] = list.splice(dragFrom.value, 1)
-    if (item !== undefined) list.splice(dragOver.value, 0, item)
-    onUpdate(list)
-    dragFrom.value = null
-    dragOver.value = null
-  }
-  function onDragEnd() {
-    dragFrom.value = null
-    dragOver.value = null
-  }
-
-  return { dragFrom, dragOver, onDragStart, onDragEnter, onDrop, onDragEnd }
+function baseFormat(key: string): string {
+  return isReadAlongFormatKey(key) ? 'epub' : key.toLowerCase()
 }
 
-const metaDrag = useDragList(
-  () => props.metadataPrecedence,
-  (v) => emit('update:metadataPrecedence', v),
+const present = computed(() => {
+  if (!props.formatCounts) return null
+  const held = Object.entries(props.formatCounts)
+    .filter(([, count]) => count > 0)
+    .map(([format]) => format.toLowerCase())
+  return held.length > 0 ? new Set(held) : null
+})
+
+const visible = computed(() => {
+  if (showAll.value) return props.formatPriority
+  if (present.value) return props.formatPriority.filter((key) => present.value!.has(baseFormat(key)))
+  return props.formatPriority.slice(0, PREVIEW_ROWS)
+})
+const hiddenCount = computed(() => props.formatPriority.length - visible.value.length)
+const maxCount = computed(() => Math.max(1, ...Object.values(props.formatCounts ?? {})))
+
+interface FormatRow {
+  key: string
+  code: string
+  name: string
+  readAlong: boolean
+  count: number | null
+  imported: boolean
+  absent: boolean
+}
+
+const rows = computed<FormatRow[]>(() =>
+  visible.value.map((key) => {
+    const readAlong = isReadAlongFormatKey(key)
+    const base = baseFormat(key)
+    return {
+      key,
+      code: formatKeyCode(key),
+      name: formatKeyName(key),
+      readAlong,
+      count: props.formatCounts && !readAlong ? (props.formatCounts[base] ?? 0) : null,
+      imported: props.allowedFormats.length === 0 || props.allowedFormats.includes(base),
+      absent: present.value !== null && !present.value.has(base),
+    }
+  }),
 )
 
-const fmtDrag = useDragList(
-  () => props.formatPriority,
-  (v) => emit('update:formatPriority', v),
-)
+const sources = computed(() => {
+  const known = props.metadataPrecedence.filter((key) => DEFAULT_METADATA_PRECEDENCE.includes(key))
+  return [...known, ...DEFAULT_METADATA_PRECEDENCE.filter((key) => !known.includes(key))]
+})
 
-function moveItem(list: string[], index: number, direction: -1 | 1): string[] | null {
-  const target = index + direction
-  if (target < 0 || target >= list.length) return null
-  const updated = [...list]
-  const [item] = updated.splice(index, 1)
-  if (item === undefined) return null
-  updated.splice(target, 0, item)
-  return updated
+function chipStyle(key: string): Record<string, string> {
+  const color = formatColorVar(key)
+  return { color, backgroundColor: `color-mix(in oklch, ${color} 13%, transparent)` }
 }
 
-function moveMetadata(index: number, direction: -1 | 1) {
-  const updated = moveItem(props.metadataPrecedence, index, direction)
-  if (updated) emit('update:metadataPrecedence', updated)
+function barStyle(row: FormatRow): Record<string, string> {
+  return { width: `${((row.count ?? 0) / maxCount.value) * 100}%`, backgroundColor: formatFamilyColor(baseFormat(row.key)) }
 }
 
-function moveFormat(index: number, direction: -1 | 1) {
-  const updated = moveItem(props.formatPriority, index, direction)
-  if (updated) emit('update:formatPriority', updated)
+/** Moves among the rows on screen, so a hidden format never swallows a click. */
+function move(key: string, direction: -1 | 1) {
+  const target = visible.value[visible.value.indexOf(key) + direction]
+  if (target) placeRelative(key, target, direction === 1 ? 'after' : 'before')
+}
+
+function placeRelative(key: string, target: string, side: 'before' | 'after') {
+  const next = props.formatPriority.filter((candidate) => candidate !== key)
+  const index = next.indexOf(target)
+  if (index === -1) return
+  next.splice(side === 'after' ? index + 1 : index, 0, key)
+  emit('update:formatPriority', next)
+}
+
+function moveUp(key: string) {
+  move(key, -1)
+}
+
+function moveDown(key: string) {
+  move(key, 1)
+}
+
+function resetOrder() {
+  emit('update:formatPriority', withReadAlongFormatPriority(DEFAULT_FORMAT_PRIORITY))
+}
+
+function toggleShowAll() {
+  showAll.value = !showAll.value
+}
+
+function onDragStart(key: string) {
+  dragKey.value = key
+}
+
+function onDragEnter(key: string) {
+  overKey.value = key
+}
+
+function onDrop(key: string) {
+  const from = dragKey.value
+  dragKey.value = null
+  overKey.value = null
+  if (!from || from === key) return
+  const movingDown = props.formatPriority.indexOf(from) < props.formatPriority.indexOf(key)
+  placeRelative(from, key, movingDown ? 'after' : 'before')
+}
+
+function onDragEnd() {
+  dragKey.value = null
+  overKey.value = null
+}
+
+function swapSources() {
+  emit('update:metadataPrecedence', [...sources.value].reverse())
 }
 </script>
 
 <template>
-  <div class="px-6 py-6 space-y-6">
-    <!-- Source precedence -->
-    <div>
-      <p class="text-[11px] font-semibold uppercase tracking-widest text-foreground mb-1">
-        {{ t('library.creator.metadata.sourcePrecedence.title') }}
-      </p>
-      <p class="text-xs text-muted-foreground mb-3">{{ t('library.creator.metadata.sourcePrecedence.hint') }}</p>
-      <div class="rounded-lg border border-border overflow-hidden divide-y divide-border">
-        <div
-          v-for="(key, index) in metadataPrecedence"
-          :key="key"
-          draggable="true"
-          class="flex items-center gap-3 px-3 py-2.5 bg-card cursor-grab active:cursor-grabbing select-none transition-colors"
-          :class="metaDrag.dragOver.value === index ? 'bg-primary/10 border-l-2 border-l-primary' : ''"
-          @dragstart="metaDrag.onDragStart(index)"
-          @dragenter.prevent="metaDrag.onDragEnter(index)"
-          @dragover.prevent
-          @drop="metaDrag.onDrop"
-          @dragend="metaDrag.onDragEnd"
-        >
-          <GripVertical :size="13" class="text-muted-foreground shrink-0" />
-          <span class="flex items-center justify-center w-4 h-4 rounded-full bg-primary/10 text-primary text-[9px] font-bold shrink-0">
-            {{ index + 1 }}
-          </span>
-          <span class="flex-1 text-sm text-foreground truncate">{{ METADATA_LABELS[key] ?? key }}</span>
-          <div class="flex items-center gap-0.5">
-            <button
-              type="button"
-              class="flex size-7 items-center justify-center rounded text-muted-foreground hover:bg-muted hover:text-foreground disabled:opacity-30"
-              :disabled="index === 0"
-              :aria-label="t('library.creator.metadata.moveUp', { item: METADATA_LABELS[key] ?? key })"
-              @click="moveMetadata(index, -1)"
-            >
-              <ChevronUp :size="14" />
-            </button>
-            <button
-              type="button"
-              class="flex size-7 items-center justify-center rounded text-muted-foreground hover:bg-muted hover:text-foreground disabled:opacity-30"
-              :disabled="index === metadataPrecedence.length - 1"
-              :aria-label="t('library.creator.metadata.moveDown', { item: METADATA_LABELS[key] ?? key })"
-              @click="moveMetadata(index, 1)"
-            >
-              <ChevronDown :size="14" />
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
+  <div class="flex flex-col gap-3.5">
+    <LibraryCreatorCard flush :label="t('library.creator.metadata.primary.title')" label-id="primary-file-title">
+      <template #meta>
+        <button type="button" class="inline-flex items-center gap-1 text-xs font-medium text-primary hover:underline" @click="resetOrder">
+          <RotateCcw :size="12" aria-hidden="true" />
+          {{ t('library.creator.metadata.primary.reset') }}
+        </button>
+      </template>
+      <p class="-mt-1 px-4 pb-3 text-xs text-muted-foreground">{{ t('library.creator.metadata.primary.hint') }}</p>
 
-    <!-- Format priority -->
-    <div>
-      <p class="text-[11px] font-semibold uppercase tracking-widest text-foreground mb-1">
-        {{ t('library.creator.metadata.formatPriority.title') }}
-      </p>
-      <p class="text-xs text-muted-foreground mb-3">{{ t('library.creator.metadata.formatPriority.hint') }}</p>
-      <div class="rounded-lg border border-border overflow-hidden divide-y divide-border">
-        <div
-          v-for="(fmt, index) in formatPriority"
-          :key="fmt"
+      <ol aria-labelledby="primary-file-title" class="border-t border-border">
+        <li
+          v-for="(row, index) in rows"
+          :key="row.key"
           draggable="true"
-          class="flex items-center gap-3 px-3 py-2.5 bg-card cursor-grab active:cursor-grabbing select-none transition-colors"
-          :class="fmtDrag.dragOver.value === index ? 'bg-primary/10 border-l-2 border-l-primary' : ''"
-          @dragstart="fmtDrag.onDragStart(index)"
-          @dragenter.prevent="fmtDrag.onDragEnter(index)"
+          class="flex min-h-11 cursor-grab items-center gap-2.5 border-b border-border px-3 py-1.5 last:border-b-0 active:cursor-grabbing"
+          :class="[
+            index === 0 ? 'bg-primary/6' : '',
+            overKey === row.key && dragKey !== row.key ? 'shadow-[inset_3px_0_0_var(--primary)]' : '',
+            dragKey === row.key ? 'opacity-50' : '',
+          ]"
+          @dragstart="onDragStart(row.key)"
+          @dragenter.prevent="onDragEnter(row.key)"
           @dragover.prevent
-          @drop="fmtDrag.onDrop"
-          @dragend="fmtDrag.onDragEnd"
+          @drop="onDrop(row.key)"
+          @dragend="onDragEnd"
         >
-          <GripVertical :size="13" class="text-muted-foreground shrink-0" />
-          <span class="flex items-center justify-center w-5 h-5 rounded-full bg-primary/10 text-primary text-[10.5px] font-bold shrink-0">
-            {{ index + 1 }}
+          <GripVertical :size="14" class="shrink-0 text-muted-foreground" aria-hidden="true" />
+          <span class="w-4 shrink-0 text-center text-xs font-bold tabular-nums" :class="index === 0 ? 'text-primary' : 'text-muted-foreground'">
+            {{ formatNumber(index + 1) }}
           </span>
-          <span class="flex flex-1 items-center gap-1.5 text-sm font-mono text-foreground">
-            {{ formatKeyCode(fmt) }}
-            <Headphones v-if="isReadAlongFormatKey(fmt)" :size="13" :stroke-width="2.5" aria-hidden="true" />
+          <span class="inline-flex w-16 shrink-0">
+            <span class="inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 text-[11px] font-semibold tracking-wide" :style="chipStyle(row.key)">
+              {{ row.code }}
+              <Headphones v-if="row.readAlong" :size="11" :stroke-width="2.5" aria-hidden="true" />
+            </span>
           </span>
-          <span class="sr-only text-xs text-muted-foreground sm:not-sr-only">{{ formatKeyName(fmt) }}</span>
-          <div class="flex items-center gap-0.5">
+          <span class="flex min-w-0 flex-1 items-center gap-2">
+            <span class="truncate text-[13px]" :class="row.imported ? 'text-foreground' : 'text-muted-foreground line-through'">{{ row.name }}</span>
+            <span v-if="index === 0" class="shrink-0 rounded-full bg-primary/14 px-1.5 py-px text-[10.5px] font-medium text-primary">
+              {{ t('library.creator.metadata.primary.first') }}
+            </span>
+            <span v-if="!row.imported" class="shrink-0 text-[11px] text-muted-foreground">{{
+              t('library.creator.metadata.primary.notImported')
+            }}</span>
+          </span>
+          <span v-if="formatCounts" class="hidden w-36 shrink-0 items-center gap-2 @lg:flex">
+            <span class="h-1 flex-1 overflow-hidden rounded-full bg-muted" aria-hidden="true">
+              <span v-if="row.count" class="block h-full rounded-full" :style="barStyle(row)" />
+            </span>
+            <span class="w-10 text-end text-xs tabular-nums" :class="row.count ? 'text-foreground' : 'text-muted-foreground'">
+              {{ row.count === null ? '' : row.count ? formatNumber(row.count) : '–' }}
+            </span>
+          </span>
+          <span class="flex shrink-0">
             <button
               type="button"
-              class="flex size-7 items-center justify-center rounded text-muted-foreground hover:bg-muted hover:text-foreground disabled:opacity-30"
+              class="flex size-7 items-center justify-center rounded-md text-foreground hover:bg-muted disabled:opacity-30"
               :disabled="index === 0"
-              :aria-label="t('library.creator.metadata.moveUp', { item: formatKeyName(fmt) })"
-              @click="moveFormat(index, -1)"
+              :aria-label="t('library.creator.metadata.moveUp', { item: row.name })"
+              @click="moveUp(row.key)"
             >
-              <ChevronUp :size="14" />
+              <ArrowUp :size="13" aria-hidden="true" />
             </button>
             <button
               type="button"
-              class="flex size-7 items-center justify-center rounded text-muted-foreground hover:bg-muted hover:text-foreground disabled:opacity-30"
-              :disabled="index === formatPriority.length - 1"
-              :aria-label="t('library.creator.metadata.moveDown', { item: formatKeyName(fmt) })"
-              @click="moveFormat(index, 1)"
+              class="flex size-7 items-center justify-center rounded-md text-foreground hover:bg-muted disabled:opacity-30"
+              :disabled="index === rows.length - 1"
+              :aria-label="t('library.creator.metadata.moveDown', { item: row.name })"
+              @click="moveDown(row.key)"
             >
-              <ChevronDown :size="14" />
+              <ArrowDown :size="13" aria-hidden="true" />
             </button>
-          </div>
-        </div>
+          </span>
+        </li>
+      </ol>
+
+      <div v-if="hiddenCount > 0 || showAll" class="flex flex-wrap items-center gap-x-3 gap-y-1 border-t border-dashed border-border px-4 py-2.5">
+        <p class="text-xs text-muted-foreground">
+          <template v-if="showAll">{{ t('library.creator.metadata.primary.showingAll') }}</template>
+          <template v-else-if="present">{{ t('library.creator.metadata.primary.notHeld', { count: hiddenCount }) }}</template>
+          <template v-else>{{ t('library.creator.metadata.primary.moreBelow', { count: hiddenCount }) }}</template>
+        </p>
+        <button type="button" class="ms-auto text-xs font-medium text-primary hover:underline" :aria-expanded="showAll" @click="toggleShowAll">
+          {{
+            showAll
+              ? t('library.creator.metadata.primary.showFewer')
+              : t('library.creator.metadata.primary.showAll', { count: formatPriority.length })
+          }}
+        </button>
       </div>
-    </div>
+    </LibraryCreatorCard>
+
+    <LibraryCreatorCard :label="t('library.creator.metadata.source.title')" label-id="metadata-source-title">
+      <ol aria-labelledby="metadata-source-title" class="flex flex-col items-stretch gap-2 @lg:flex-row @lg:items-center">
+        <template v-for="(source, index) in sources" :key="source">
+          <li
+            class="flex min-w-0 flex-1 items-center gap-3 rounded-xl border px-3 py-2.5"
+            :class="index === 0 ? 'border-primary/55 bg-primary/7' : 'border-border bg-background'"
+          >
+            <span
+              class="flex size-5.5 shrink-0 items-center justify-center rounded-full text-[11px] font-bold"
+              :class="index === 0 ? 'bg-primary text-primary-foreground' : 'bg-muted text-muted-foreground'"
+            >
+              {{ formatNumber(index + 1) }}
+            </span>
+            <component :is="source === 'embedded' ? FileText : FileCode" :size="16" class="shrink-0 text-foreground" aria-hidden="true" />
+            <span class="min-w-0">
+              <span class="block text-[13px] font-semibold text-foreground">
+                {{ source === 'embedded' ? t('library.creator.metadata.source.embeddedTitle') : t('library.creator.metadata.source.opfTitle') }}
+              </span>
+              <span class="block text-xs text-muted-foreground">
+                {{ source === 'embedded' ? t('library.creator.metadata.source.embeddedHint') : t('library.creator.metadata.source.opfHint') }}
+              </span>
+            </span>
+          </li>
+          <li v-if="index === 0" class="flex justify-center">
+            <button
+              type="button"
+              class="flex size-8 items-center justify-center rounded-full border border-border bg-card text-foreground transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              :aria-label="t('library.creator.metadata.source.swap')"
+              :title="t('library.creator.metadata.source.swap')"
+              @click="swapSources"
+            >
+              <ArrowLeftRight :size="14" class="rotate-90 @lg:rotate-0" aria-hidden="true" />
+            </button>
+          </li>
+        </template>
+      </ol>
+      <p class="mt-2.5 text-xs text-muted-foreground">{{ t('library.creator.metadata.source.hint') }}</p>
+    </LibraryCreatorCard>
   </div>
 </template>
diff --git a/client/src/features/library/components/LibraryCreatorModal.vue b/client/src/features/library/components/LibraryCreatorModal.vue
index 867ac24b8..3b38e811a 100644
--- a/client/src/features/library/components/LibraryCreatorModal.vue
+++ b/client/src/features/library/components/LibraryCreatorModal.vue
@@ -1,26 +1,38 @@
 <script setup lang="ts">
-import { computed, onMounted, ref, watch, type Component } from 'vue'
+import { computed, nextTick, onMounted, provide, ref, watch, type Component } from 'vue'
 import { useI18n } from 'vue-i18n'
+import { useMediaQuery } from '@vueuse/core'
 import {
-  AlertCircle,
   BookOpen,
-  Check,
   ChevronLeft,
   ChevronRight,
+  CircleCheck,
   Clock,
-  FileEdit,
+  Ellipsis,
+  FileCode,
+  FilePenLine,
   FolderOpen,
+  Images,
   Info,
+  Library as LibraryIcon,
   Loader2,
+  Plus,
+  RefreshCw,
   ScanLine,
   Tags,
+  Trash2,
+  TriangleAlert,
   Users,
   X,
 } from '@lucide/vue'
-import { APP_FEATURES, type CoverAspectRatio, type Library, type LibraryType, type OrganizationMode } from '@bookorbit/types'
-import { useLibraryAddedAt } from '../composables/useLibraryAddedAt'
+import { APP_FEATURES, isReadAlongFormatKey, type CoverAspectRatio, type Library, type LibraryType, type OrganizationMode } from '@bookorbit/types'
+import AppIcon from '@/components/AppIcon.vue'
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
 import { useModal } from '@/composables/useModal'
+import { formatNumber } from '@/i18n/formatters'
 import { api } from '@/lib/api'
+import { useLibraryAddedAt } from '../composables/useLibraryAddedAt'
+import { LIBRARY_ACCESS_KEY, useLibraryAccess } from '../composables/useLibraryAccess'
 import { useLibraryCreator, type LibraryCreatorSectionId } from '../composables/useLibraryCreator'
 import LibraryCreatorAccess from './LibraryCreatorAccess.vue'
 import LibraryCreatorDetails from './LibraryCreatorDetails.vue'
@@ -42,154 +54,253 @@ const props = defineProps<{
 const emit = defineEmits<{
   close: []
   saved: [library: Library]
+  scan: [library: Library]
+  refreshCovers: [library: Library]
+  syncFiles: [library: Library]
+  remove: [library: Library]
 }>()
 
-interface CreatorSection {
-  id: LibraryCreatorSectionId
-  label: string
-  description: string
-  icon: Component
-  component: Component
-  required?: boolean
+const SECTION_ICONS: Record<LibraryCreatorSectionId, Component> = {
+  details: LibraryIcon,
+  folders: FolderOpen,
+  scanner: ScanLine,
+  metadata: Tags,
+  reading: BookOpen,
+  schedule: Clock,
+  fileWrite: FilePenLine,
+  access: Users,
 }
-
-const ALL_SECTIONS: CreatorSection[] = [
-  {
-    id: 'details',
-    label: 'Details',
-    description: 'Name your library and choose how its covers appear.',
-    icon: Info,
-    component: LibraryCreatorDetails,
-    required: true,
-  },
-  {
-    id: 'folders',
-    label: 'Folders',
-    description: 'Choose the server folders used by this library.',
-    icon: FolderOpen,
-    component: LibraryCreatorFolders,
-    required: true,
-  },
-  {
-    id: 'scanner',
-    label: 'Scanning',
-    description: 'Control how files are grouped, included, and excluded.',
-    icon: ScanLine,
-    component: LibraryCreatorScanner,
-  },
-  {
-    id: 'metadata',
-    label: 'Metadata',
-    description: 'Choose which metadata sources and formats take priority.',
-    icon: Tags,
-    component: LibraryCreatorMetadata,
-  },
-  {
-    id: 'reading',
-    label: 'Reading',
-    description: 'Set when books automatically move between reading states.',
-    icon: BookOpen,
-    component: LibraryCreatorReading,
-  },
-  {
-    id: 'schedule',
-    label: 'Automation',
-    description: 'Watch folders and schedule recurring library scans.',
-    icon: Clock,
-    component: LibraryCreatorSchedule,
-  },
-  {
-    id: 'fileWrite',
-    label: 'File updates',
-    description: 'Optionally rename files or write metadata back to disk.',
-    icon: FileEdit,
-    component: LibraryCreatorFileWrite,
-  },
-  {
-    id: 'access',
-    label: 'Access',
-    description: 'Choose who can view, edit, or manage this library.',
-    icon: Users,
-    component: LibraryCreatorAccess,
-  },
-]
+const SECTION_COMPONENTS: Record<LibraryCreatorSectionId, Component> = {
+  details: LibraryCreatorDetails,
+  folders: LibraryCreatorFolders,
+  scanner: LibraryCreatorScanner,
+  metadata: LibraryCreatorMetadata,
+  reading: LibraryCreatorReading,
+  schedule: LibraryCreatorSchedule,
+  fileWrite: LibraryCreatorFileWrite,
+  access: LibraryCreatorAccess,
+}
+const BOOK_SECTIONS: LibraryCreatorSectionId[] = ['details', 'folders', 'scanner', 'metadata', 'reading', 'schedule', 'fileWrite', 'access']
+const WRITE_FAMILY_FLAGS = [
+  'fileWriteEpubEnabled',
+  'fileWriteFb2Enabled',
+  'fileWritePdfEnabled',
+  'fileWriteCbxEnabled',
+  'fileWriteKindleEnabled',
+] as const
 
 const creator = useLibraryCreator()
-const { form, mode, editingLibraryId, loading, prescanLoading, prescanResult, error, validationErrors } = creator
+const { form, mode, editingLibraryId, loading, folderChecks, stats, error, validationErrors } = creator
+const access = useLibraryAccess(editingLibraryId)
+provide(LIBRARY_ACCESS_KEY, access)
+const addedAtRecompute = useLibraryAddedAt(editingLibraryId)
+
+/** Below this the sheet cannot carry the rail, so sections become a drill-in list. */
+const isWide = useMediaQuery('(min-width: 768px)')
+
 const panel = ref<HTMLElement | null>(null)
-const stepIndex = ref(0)
-const visitedUpTo = ref(0)
+const discardButton = ref<HTMLButtonElement | null>(null)
+const activeSection = ref<LibraryCreatorSectionId | null>(null)
 const initializing = ref(true)
-const initializationWarning = ref<string | null>(null)
+const initializationWarning = ref(false)
 const initialFormSnapshot = ref('')
 const nestedModalOpen = ref(false)
-const addedAtRecompute = useLibraryAddedAt(editingLibraryId)
-const attemptedSections = ref(new Set<LibraryCreatorSectionId>())
+const menuOpen = ref(false)
+const attemptedSave = ref(false)
+const pendingLeave = ref<(() => void) | null>(null)
+const createdLibrary = ref<Library | null>(null)
 
-const sections = computed(() => {
-  if (form.type === 'podcasts') {
-    return ALL_SECTIONS.filter(
-      (section) =>
-        section.id === 'details' || section.id === 'folders' || section.id === 'schedule' || (mode.value === 'edit' && section.id === 'access'),
-    )
-  }
-  return mode.value === 'create' ? ALL_SECTIONS.filter((section) => section.id !== 'access') : ALL_SECTIONS
-})
-const activeSection = computed(() => {
-  const section = sections.value[stepIndex.value] ?? sections.value[0]!
-  if (form.type === 'podcasts' && section.id === 'schedule') {
-    return { ...section, description: t('library.creator.schedule.watchFolders.hint') }
-  }
-  return section
-})
-const ActiveComponent = computed(() => activeSection.value.component)
-const activeId = computed(() => activeSection.value.id)
-const isFirstStep = computed(() => stepIndex.value === 0)
-const isLastStep = computed(() => stepIndex.value === sections.value.length - 1)
-const stepValid = computed(() => !validationErrors.value[activeId.value])
-const requiredSetupValid = computed(() => !validationErrors.value.details && !validationErrors.value.folders)
+const creating = computed(() => mode.value === 'create')
+const podcast = computed(() => form.type === 'podcasts')
 const isDirty = computed(() => !initializing.value && initialFormSnapshot.value !== JSON.stringify(form))
-const progressWidth = computed(() => `${((stepIndex.value + 1) / sections.value.length) * 100}%`)
-const title = computed(() => (props.library ? `Edit ${form.name || props.library.name}` : 'Create a library'))
-const displayedError = computed(() => error.value || sectionError(activeId.value))
+const requiredSetupValid = computed(() => !validationErrors.value.details && !validationErrors.value.folders)
+const showActionsMenu = computed(() => Boolean(props.library) && !creating.value && !createdLibrary.value)
 
-watch(
-  () => JSON.stringify(form),
-  () => {
-    error.value = null
-  },
+const sectionIds = computed<LibraryCreatorSectionId[]>(() => {
+  if (podcast.value) return creating.value ? ['details', 'folders', 'schedule'] : ['details', 'folders', 'schedule', 'access']
+  return BOOK_SECTIONS
+})
+
+const modeLabel = computed(() =>
+  form.organizationMode === 'book_per_file'
+    ? t('library.creator.scanner.scanMode.fileAsBook.title')
+    : t('library.creator.scanner.scanMode.folderAsBook.title'),
 )
 
+const checkedFileCount = computed(() => {
+  let files = 0
+  let checked = 0
+  for (const folder of form.folders) {
+    const check = folderChecks.value[folder]
+    if (check?.state !== 'checked') continue
+    checked += 1
+    if (check.accessible) files += check.fileCount
+  }
+  return checked > 0 ? files : null
+})
+
+const leadFormat = computed(() => {
+  const held = stats.value ? new Set(Object.keys(stats.value.formatCounts).filter((format) => (stats.value?.formatCounts[format] ?? 0) > 0)) : null
+  // Read-along EPUBs are a subset of EPUBs the counts cannot see, so the summary names the plain format.
+  const lead = form.formatPriority.find((key) => {
+    if (isReadAlongFormatKey(key)) return false
+    const imported = form.allowedFormats.length === 0 || form.allowedFormats.includes(key)
+    return imported && (!held || held.has(key))
+  })
+  return lead ? lead.toUpperCase() : ''
+})
+
+const writtenKinds = computed(
+  () => WRITE_FAMILY_FLAGS.filter((flag) => form[flag]).length + (form.fileWriteAudioEnabled && form.fileWriteWriteCover ? 1 : 0),
+)
+
+const scheduleLabel = computed(() => {
+  const cron = form.autoScanCronExpression
+  const presets: Record<string, string> = {
+    '0 * * * *': t('library.creator.schedule.presets.hourly'),
+    '0 */6 * * *': t('library.creator.schedule.presets.every6Hours'),
+    '0 */12 * * *': t('library.creator.schedule.presets.every12Hours'),
+    '0 0 * * *': t('library.creator.schedule.presets.daily'),
+    '0 0 * * 1': t('library.creator.schedule.presets.weekly'),
+  }
+  return cron ? (presets[cron] ?? t('library.creator.summary.customSchedule')) : null
+})
+
+function summaryFor(id: LibraryCreatorSectionId): string {
+  switch (id) {
+    case 'details':
+      if (!form.name.trim()) return t('library.creator.summary.needsName')
+      if (!form.icon?.trim()) return t('library.creator.summary.needsIcon')
+      if (podcast.value) return form.name
+      return form.coverAspectRatio === '1/1'
+        ? t('library.creator.summary.detailsSquare', { name: form.name })
+        : t('library.creator.summary.detailsPortrait', { name: form.name })
+    case 'folders':
+      if (form.folders.length === 0) return t('library.creator.summary.needsFolder')
+      if (checkedFileCount.value !== null)
+        return t('library.creator.summary.foldersFiles', { folders: form.folders.length, files: checkedFileCount.value })
+      if (stats.value && !podcast.value)
+        return t('library.creator.summary.foldersBooks', { folders: form.folders.length, books: stats.value.totalBooks })
+      return t('library.creator.summary.folders', { folders: form.folders.length })
+    case 'scanner':
+      return form.allowedFormats.length === 0
+        ? t('library.creator.summary.scannerAll', { mode: modeLabel.value })
+        : t('library.creator.summary.scannerSome', { mode: modeLabel.value, count: form.allowedFormats.length })
+    case 'metadata':
+      return form.metadataPrecedence[0] === 'opfFile'
+        ? t('library.creator.summary.metadataOpf', { format: leadFormat.value })
+        : t('library.creator.summary.metadataFile', { format: leadFormat.value })
+    case 'reading':
+      return t('library.creator.summary.reading', { start: percent(form.readingThreshold), finish: percent(form.markAsFinishedPercentComplete) })
+    case 'schedule': {
+      const watching = podcast.value ? form.watchLocalFolders : form.watch
+      if (podcast.value) return watching ? t('library.creator.summary.watching') : t('library.creator.summary.notWatching')
+      if (watching && scheduleLabel.value) return t('library.creator.summary.watchingScheduled', { schedule: scheduleLabel.value })
+      if (watching) return t('library.creator.summary.watchingOnly')
+      if (scheduleLabel.value) return t('library.creator.summary.scheduledOnly', { schedule: scheduleLabel.value })
+      return t('library.creator.summary.manualOnly')
+    }
+    case 'fileWrite':
+      if (form.fileWriteEnabled && form.fileRenameEnabled) return t('library.creator.summary.writesAndRenames', { count: writtenKinds.value })
+      if (form.fileWriteEnabled) return t('library.creator.summary.writes', { count: writtenKinds.value })
+      if (form.fileRenameEnabled) return t('library.creator.summary.renames')
+      return t('library.creator.summary.untouched')
+    case 'access':
+      if (editingLibraryId.value === null) {
+        return access.pending.value.length > 0
+          ? t('library.creator.summary.accessQueued', { count: access.pending.value.length })
+          : t('library.creator.summary.onlySuperusers')
+      }
+      return access.loaded.value ? t('library.creator.summary.accessPeople', { count: access.entries.value.length }) : ''
+  }
+}
+
+interface SectionEntry {
+  id: LibraryCreatorSectionId
+  label: string
+  summary: string
+  icon: Component
+  /** A required section that is not filled in yet, while creating. */
+  missing: boolean
+  /** A section holding a validation error after a save was attempted. */
+  invalid: boolean
+}
+
+const sections = computed<SectionEntry[]>(() =>
+  sectionIds.value.map((id) => ({
+    id,
+    label: t(`library.creator.nav.${id}`),
+    summary: summaryFor(id),
+    icon: SECTION_ICONS[id],
+    missing: creating.value && (id === 'details' || id === 'folders') && Boolean(validationErrors.value[id]),
+    invalid: attemptedSave.value && Boolean(validationErrors.value[id]) && !(creating.value && (id === 'details' || id === 'folders')),
+  })),
+)
+
+const activeEntry = computed(() => sections.value.find((section) => section.id === activeSection.value) ?? null)
+const activeDescription = computed(() => {
+  if (!activeSection.value) return ''
+  if (activeSection.value === 'schedule' && podcast.value) return t('library.creator.schedule.watchFolders.hint')
+  return t(`library.creator.nav.descriptions.${activeSection.value}`)
+})
+const ActiveComponent = computed(() => (activeSection.value ? SECTION_COMPONENTS[activeSection.value] : null))
+const showSectionList = computed(() => !isWide.value && activeSection.value === null)
+
+const headerTitle = computed(() => {
+  if (creating.value) return t('library.creator.sheet.createTitle')
+  return form.name.trim() || props.library?.name || t('library.creator.sheet.editFallbackTitle')
+})
+const headerSubtitle = computed(() => {
+  if (creating.value) return t('library.creator.sheet.createHint')
+  if (podcast.value) return t('library.creator.summary.folders', { folders: form.folders.length })
+  if (stats.value)
+    return t('library.creator.sheet.editSubtitle', { books: stats.value.totalBooks, folders: form.folders.length, mode: modeLabel.value })
+  return t('library.creator.sheet.editSubtitleNoBooks', { folders: form.folders.length, mode: modeLabel.value })
+})
+
+const displayedError = computed(() => {
+  if (error.value) return error.value
+  if (!attemptedSave.value || !activeSection.value) return null
+  return validationErrors.value[activeSection.value] ?? null
+})
+
+const createHint = computed(() => (requiredSetupValid.value ? t('library.creator.sheet.readyHint') : t('library.creator.sheet.needsHint')))
+
 const sectionProps = computed(() => ({
-  details: { name: form.name, icon: form.icon, coverAspectRatio: form.coverAspectRatio, type: form.type, typeLocked: mode.value === 'edit' },
+  details: { name: form.name, icon: form.icon, coverAspectRatio: form.coverAspectRatio, type: form.type, typeLocked: !creating.value },
   folders: {
     folders: form.folders,
     localFolders: form.localFolders,
-    prescanResult: prescanResult.value,
-    prescanLoading: prescanLoading.value,
     libraryType: form.type,
+    checks: folderChecks.value,
+    stats: stats.value,
   },
   scanner: {
     organizationMode: form.organizationMode,
-    organizationModeLocked: mode.value === 'edit',
+    organizationModeLocked: !creating.value,
     allowedFormats: form.allowedFormats,
     addedAtSource: form.addedAtSource,
-    canRecomputeAddedAt: mode.value === 'edit',
+    canRecomputeAddedAt: !creating.value,
     storedAddedAtSource: creator.storedAddedAtSource.value,
     recomputingAddedAt: addedAtRecompute.running.value,
     recomputeJob: addedAtRecompute.job.value,
     recomputeErrorKey: addedAtRecompute.errorKey.value,
     excludePatterns: form.excludePatterns,
   },
-  metadata: { metadataPrecedence: form.metadataPrecedence, formatPriority: form.formatPriority },
+  metadata: {
+    metadataPrecedence: form.metadataPrecedence,
+    formatPriority: form.formatPriority,
+    allowedFormats: form.allowedFormats,
+    formatCounts: stats.value?.formatCounts ?? null,
+  },
   reading: {
     readingThreshold: form.readingThreshold,
     markAsFinishedPercentComplete: form.markAsFinishedPercentComplete,
   },
   schedule: {
-    watch: form.type === 'podcasts' ? form.watchLocalFolders : form.watch,
+    watch: podcast.value ? form.watchLocalFolders : form.watch,
     autoScanCronExpression: form.autoScanCronExpression,
-    showAutoScanSchedule: form.type === 'books',
+    showAutoScanSchedule: !podcast.value,
   },
   fileWrite: {
     fileRenameEnabled: form.fileRenameEnabled,
@@ -207,74 +318,133 @@ const sectionProps = computed(() => ({
     fileWriteKindleMaxFileSizeMb: form.fileWriteKindleMaxFileSizeMb,
     fileWriteAudioEnabled: form.fileWriteAudioEnabled,
     fileWriteAudioMaxFileSizeMb: form.fileWriteAudioMaxFileSizeMb,
+    formatCounts: stats.value?.formatCounts ?? null,
   },
   access: { libraryId: editingLibraryId.value },
 }))
 
-function getSectionProps(id: LibraryCreatorSectionId) {
-  return sectionProps.value[id]
+const activeProps = computed(() => (activeSection.value ? sectionProps.value[activeSection.value] : {}))
+
+watch(
+  () => JSON.stringify(form),
+  () => {
+    error.value = null
+  },
+)
+
+watch(isWide, (wide) => {
+  if (wide && activeSection.value === null) activeSection.value = 'details'
+})
+
+/** A library created with grants that failed stays open on Access; once a retry clears them, it is done. */
+watch(
+  () => access.failedGrants.value.length,
+  (failed) => {
+    if (failed === 0 && createdLibrary.value) emit('saved', createdLibrary.value)
+  },
+)
+
+function percent(value: number): string {
+  return formatNumber(value / 100, { style: 'percent', maximumFractionDigits: 2 })
+}
+
+function selectSection(id: LibraryCreatorSectionId) {
+  activeSection.value = id
+}
+
+function backToSections() {
+  activeSection.value = null
+}
+
+async function askToLeave(action: () => void) {
+  pendingLeave.value = action
+  await nextTick()
+  discardButton.value?.focus()
+}
+
+function confirmLeave() {
+  const action = pendingLeave.value
+  pendingLeave.value = null
+  action?.()
+}
+
+function cancelLeave() {
+  pendingLeave.value = null
+}
+
+function leaveThen(action: () => void) {
+  if (isDirty.value) void askToLeave(action)
+  else action()
+}
+
+function closeEditor() {
+  emit('close')
 }
 
 function requestClose() {
   if (loading.value || nestedModalOpen.value) return
-  if (isDirty.value && !window.confirm('Discard your unsaved library changes?')) return
-  emit('close')
-}
-
-function goTo(index: number) {
-  if (index < 0 || index >= sections.value.length) return
-  if (mode.value === 'create' && index > visitedUpTo.value) return
-  stepIndex.value = index
-  error.value = null
-}
-
-function next() {
-  if (isLastStep.value) return
-  if (!stepValid.value) {
-    markSectionAttempted(activeId.value)
-    error.value = validationErrors.value[activeId.value] ?? null
+  if (pendingLeave.value) {
+    cancelLeave()
     return
   }
-  stepIndex.value += 1
-  visitedUpTo.value = Math.max(visitedUpTo.value, stepIndex.value)
-  error.value = null
-}
-
-function back() {
-  if (isFirstStep.value) requestClose()
-  else goTo(stepIndex.value - 1)
+  if (createdLibrary.value) {
+    emit('saved', createdLibrary.value)
+    return
+  }
+  leaveThen(closeEditor)
 }
 
 function goToFirstInvalidSection(): boolean {
-  const invalidIndex = sections.value.findIndex((section) => validationErrors.value[section.id])
-  if (invalidIndex === -1) return false
-  visitedUpTo.value = Math.max(visitedUpTo.value, invalidIndex)
-  stepIndex.value = invalidIndex
-  markSectionAttempted(sections.value[invalidIndex]!.id)
-  error.value = validationErrors.value[sections.value[invalidIndex]!.id] ?? null
+  const invalid = sectionIds.value.find((id) => validationErrors.value[id])
+  if (!invalid) return false
+  activeSection.value = invalid
   return true
 }
 
-function markSectionAttempted(id: LibraryCreatorSectionId) {
-  attemptedSections.value = new Set(attemptedSections.value).add(id)
-}
-
-function sectionError(id: LibraryCreatorSectionId): string | null {
-  return attemptedSections.value.has(id) ? (validationErrors.value[id] ?? null) : null
-}
-
 async function handleSave() {
+  attemptedSave.value = true
   if (goToFirstInvalidSection()) return
+  const wasCreating = creating.value
   const saved = await creator.save()
-  if (saved) emit('saved', saved)
+  if (!saved) return
+  if (wasCreating && access.pending.value.length > 0) {
+    // Grants need the library to exist, so the editor becomes an editor for it before sending them.
+    creator.initEdit(saved)
+    initialFormSnapshot.value = JSON.stringify(form)
+    const failed = await access.applyPending()
+    if (failed > 0) {
+      createdLibrary.value = saved
+      activeSection.value = 'access'
+      return
+    }
+  }
+  emit('saved', saved)
 }
 
-function handleNameUpdate(value: string) {
-  form.name = value
+function finishCreate() {
+  if (createdLibrary.value) emit('saved', createdLibrary.value)
 }
 
-function handleIconUpdate(value: string | null) {
-  form.icon = value
+function handleMenuOpen(value: boolean) {
+  menuOpen.value = value
+}
+
+function runScan() {
+  if (props.library) emit('scan', props.library)
+}
+
+function runRefreshCovers() {
+  if (props.library) emit('refreshCovers', props.library)
+}
+
+function runSyncFiles() {
+  const library = props.library
+  if (library) leaveThen(() => emit('syncFiles', library))
+}
+
+function runRemove() {
+  const library = props.library
+  if (library) leaveThen(() => emit('remove', library))
 }
 
 function handleTypeUpdate(value: LibraryType) {
@@ -283,66 +453,60 @@ function handleTypeUpdate(value: LibraryType) {
   if (availableType === 'podcasts') {
     form.coverAspectRatio = '1/1'
     form.watchLocalFolders = true
-    if (!form.name.trim()) form.name = 'Podcasts'
+    if (!form.name.trim()) form.name = t('library.creator.details.podcastDefaultName')
     if (!form.icon) form.icon = 'Podcast'
   }
-  stepIndex.value = 0
-  visitedUpTo.value = 0
-}
-
-function handleCoverAspectRatioUpdate(value: CoverAspectRatio) {
-  form.coverAspectRatio = value
 }
 
 function handleFoldersUpdate(value: string[]) {
+  const added = value.filter((folder) => !form.folders.includes(folder))
   form.folders = value
-  prescanResult.value = null
+  if (added.length > 0) void creator.checkFolders(added)
 }
 
-function handleLocalFoldersUpdate(value: string[]) {
-  form.localFolders = value
-}
-
-function handleOrganizationModeUpdate(value: OrganizationMode) {
-  form.organizationMode = value
-}
-
-function handleAddedAtSourceUpdate(value: Library['addedAtSource']) {
-  form.addedAtSource = value
-}
-
-function handleRecomputeAddedAt() {
-  if (!addedAtRecompute.running.value) void addedAtRecompute.start()
+function handleCheckFolders(paths: string[]) {
+  void creator.checkFolders(paths)
 }
 
 function handleNestedModalChange(value: boolean) {
   nestedModalOpen.value = value
 }
 
+function handleRecomputeAddedAt() {
+  if (!addedAtRecompute.running.value) void addedAtRecompute.start()
+}
+
+function handleWatchUpdate(value: boolean) {
+  if (podcast.value) form.watchLocalFolders = value
+  else form.watch = value
+}
+
+function handleWriteCoverUpdate(value: boolean) {
+  form.fileWriteWriteCover = value
+}
+
 const sectionListeners = {
-  'update:name': handleNameUpdate,
+  'update:name': (value: string) => (form.name = value),
   'update:type': handleTypeUpdate,
-  'update:icon': handleIconUpdate,
-  'update:coverAspectRatio': handleCoverAspectRatioUpdate,
+  'update:icon': (value: string | null) => (form.icon = value),
+  'update:coverAspectRatio': (value: CoverAspectRatio) => (form.coverAspectRatio = value),
   'update:folders': handleFoldersUpdate,
-  'update:localFolders': handleLocalFoldersUpdate,
-  'update:organizationMode': handleOrganizationModeUpdate,
-  'update:addedAtSource': handleAddedAtSourceUpdate,
+  'update:localFolders': (value: string[]) => (form.localFolders = value),
+  'update:organizationMode': (value: OrganizationMode) => (form.organizationMode = value),
+  'update:addedAtSource': (value: Library['addedAtSource']) => (form.addedAtSource = value),
   recompute: handleRecomputeAddedAt,
+  check: handleCheckFolders,
   'update:metadataPrecedence': (value: string[]) => (form.metadataPrecedence = value),
   'update:formatPriority': (value: string[]) => (form.formatPriority = value),
   'update:allowedFormats': (value: string[]) => (form.allowedFormats = value),
   'update:excludePatterns': (value: string[]) => (form.excludePatterns = value),
   'update:readingThreshold': (value: number) => (form.readingThreshold = value),
   'update:markAsFinishedPercentComplete': (value: number) => (form.markAsFinishedPercentComplete = value),
-  'update:watch': (value: boolean) => {
-    if (form.type === 'podcasts') form.watchLocalFolders = value
-    else form.watch = value
-  },
+  'update:watch': handleWatchUpdate,
   'update:autoScanCronExpression': (value: string | null) => (form.autoScanCronExpression = value),
   'update:fileRenameEnabled': (value: boolean) => (form.fileRenameEnabled = value),
   'update:fileWriteEnabled': (value: boolean) => (form.fileWriteEnabled = value),
-  'update:fileWriteWriteCover': (value: boolean) => (form.fileWriteWriteCover = value),
+  'update:fileWriteWriteCover': handleWriteCoverUpdate,
   'update:fileWriteEpubEnabled': (value: boolean) => (form.fileWriteEpubEnabled = value),
   'update:fileWriteEpubMaxFileSizeMb': (value: number) => (form.fileWriteEpubMaxFileSizeMb = value),
   'update:fileWriteFb2Enabled': (value: boolean) => (form.fileWriteFb2Enabled = value),
@@ -356,227 +520,291 @@ const sectionListeners = {
   'update:fileWriteAudioEnabled': (value: boolean) => (form.fileWriteAudioEnabled = value),
   'update:fileWriteAudioMaxFileSizeMb': (value: number) => (form.fileWriteAudioMaxFileSizeMb = value),
   'update:pickerOpen': handleNestedModalChange,
-  prescan: creator.runPrescan,
 }
 
 useModal({
   container: panel,
   onClose: requestClose,
-  disabled: () => nestedModalOpen.value || loading.value,
+  disabled: () => nestedModalOpen.value || menuOpen.value || loading.value,
 })
 
-onMounted(async () => {
-  try {
-    if (props.library) {
+async function initialize() {
+  if (props.library) {
+    try {
       const response = await api(`/api/v1/libraries/${props.library.id}`)
       if (response.ok) creator.initEdit(await response.json())
       else {
         creator.initEdit(props.library)
-        initializationWarning.value = 'The latest library settings could not be loaded. You can still edit the cached settings shown here.'
+        initializationWarning.value = true
       }
-      visitedUpTo.value = ALL_SECTIONS.length - 1
-    } else {
-      creator.initCreate()
-      if (props.initialType && props.initialType !== form.type) handleTypeUpdate(props.initialType)
-      visitedUpTo.value = 0
-    }
-  } catch {
-    if (props.library) {
+    } catch {
       creator.initEdit(props.library)
-      visitedUpTo.value = ALL_SECTIONS.length - 1
-      initializationWarning.value = 'The latest library settings could not be loaded. You can still edit the cached settings shown here.'
-    } else {
-      creator.initCreate()
-      if (props.initialType && props.initialType !== form.type) handleTypeUpdate(props.initialType)
+      initializationWarning.value = true
     }
+    void creator.loadStats()
+    void access.load()
+    return
+  }
+  creator.initCreate()
+  if (props.initialType && props.initialType !== form.type) handleTypeUpdate(props.initialType)
+}
+
+onMounted(async () => {
+  try {
+    await initialize()
   } finally {
-    stepIndex.value = 0
+    activeSection.value = isWide.value ? 'details' : null
     initialFormSnapshot.value = JSON.stringify(form)
     initializing.value = false
+    if (creating.value && isWide.value) {
+      await nextTick()
+      panel.value?.querySelector<HTMLInputElement>('#library-name')?.focus()
+    }
   }
 })
 </script>
 
 <template>
   <Teleport to="body">
-    <div
-      class="fixed inset-0 z-70 flex items-end justify-center bg-foreground/25 sm:items-center sm:p-4"
-      role="presentation"
-      @click.self="requestClose"
-    >
+    <div class="fixed inset-0 z-70 bg-foreground/25 motion-safe:animate-in motion-safe:fade-in-0" role="presentation" @click.self="requestClose">
       <div
         ref="panel"
-        class="flex h-[100dvh] w-full flex-col overflow-hidden border-border bg-background shadow-2xl outline-none sm:h-[min(92dvh,760px)] sm:max-w-4xl sm:rounded-xl sm:border"
+        class="fixed inset-y-0 end-0 flex w-full flex-col bg-background shadow-2xl outline-none sm:max-w-[56rem] sm:border-s sm:border-border motion-safe:animate-in motion-safe:duration-300 ltr:motion-safe:slide-in-from-right rtl:motion-safe:slide-in-from-left"
         role="dialog"
         aria-modal="true"
         aria-labelledby="library-creator-title"
         aria-describedby="library-creator-description"
         tabindex="-1"
       >
-        <header class="shrink-0 border-b border-border bg-card px-4 py-3.5 sm:px-6 sm:py-4">
-          <div class="flex items-start justify-between gap-4">
-            <div class="min-w-0">
-              <div class="flex items-center gap-2">
-                <h2 id="library-creator-title" class="truncate font-serif text-lg font-semibold text-foreground sm:text-xl">{{ title }}</h2>
-                <span v-if="isDirty" class="shrink-0 rounded-full bg-muted px-2 py-0.5 text-[10px] font-medium text-muted-foreground">
-                  {{ t('library.creator.unsaved') }}
-                </span>
-              </div>
-              <p id="library-creator-description" class="mt-0.5 text-xs text-muted-foreground sm:text-sm">{{ activeSection.description }}</p>
+        <header class="flex shrink-0 items-center gap-3 border-b border-border px-4 py-3 sm:px-5">
+          <button
+            v-if="!isWide && activeSection !== null"
+            type="button"
+            class="-ms-1 flex size-9 shrink-0 items-center justify-center rounded-lg text-foreground hover:bg-muted"
+            :aria-label="t('common.back')"
+            @click="backToSections"
+          >
+            <ChevronLeft :size="18" class="rtl:rotate-180" aria-hidden="true" />
+          </button>
+          <span class="flex size-9.5 shrink-0 items-center justify-center rounded-xl bg-primary/12 text-primary" aria-hidden="true">
+            <AppIcon :icon="form.icon || 'Library'" fallback="Library" :size="18" />
+          </span>
+          <div class="min-w-0 flex-1">
+            <div class="flex items-center gap-2">
+              <h2 id="library-creator-title" class="truncate text-base font-semibold tracking-tight text-foreground">
+                {{ !isWide && activeEntry ? activeEntry.label : headerTitle }}
+              </h2>
+              <span v-if="isDirty" class="shrink-0 rounded-full bg-muted px-2 py-0.5 text-[11px] font-medium text-muted-foreground">
+                {{ t('library.creator.unsaved') }}
+              </span>
             </div>
-            <button
-              type="button"
-              class="-mr-1 flex size-9 shrink-0 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:opacity-50"
-              :aria-label="t('library.creator.closeAria')"
-              :disabled="loading"
-              @click="requestClose"
-            >
-              <X :size="18" />
-            </button>
+            <p id="library-creator-description" class="mt-0.5 truncate text-xs text-muted-foreground">
+              {{ !isWide && activeEntry ? headerTitle : headerSubtitle }}
+            </p>
           </div>
+          <button
+            type="button"
+            class="-me-1 flex size-9 shrink-0 items-center justify-center rounded-lg text-foreground transition-colors hover:bg-muted disabled:opacity-50"
+            :aria-label="t('library.creator.closeAria')"
+            :disabled="loading"
+            @click="requestClose"
+          >
+            <X :size="18" aria-hidden="true" />
+          </button>
         </header>
 
-        <div
-          v-if="mode === 'create' && !props.library"
-          class="h-1 shrink-0 bg-muted md:hidden"
-          role="progressbar"
-          :aria-label="t('library.creator.progressAria')"
-          :aria-valuenow="stepIndex + 1"
-          aria-valuemin="1"
-          :aria-valuemax="sections.length"
-        >
-          <div class="h-full bg-primary transition-[width] duration-200" :style="{ width: progressWidth }" />
-        </div>
-
-        <div class="flex min-h-0 flex-1 flex-col md:flex-row">
+        <div class="flex min-h-0 flex-1">
           <nav
-            class="flex shrink-0 gap-1 overflow-x-auto border-b border-border bg-muted/30 px-3 py-2 md:w-56 md:flex-col md:overflow-y-auto md:border-b-0 md:border-r md:px-3 md:py-4"
+            v-if="isWide"
+            class="w-56 shrink-0 overflow-y-auto border-e border-border bg-card p-2.5"
             :aria-label="t('library.creator.sectionsAria')"
           >
-            <button
-              v-for="(section, index) in sections"
-              :key="section.id"
-              type="button"
-              class="relative flex shrink-0 items-center gap-2 rounded-lg px-3 py-2 text-left text-xs transition-colors md:w-full md:gap-3 md:py-2.5 md:text-sm"
-              :class="[
-                stepIndex === index
-                  ? 'bg-background font-medium text-foreground shadow-sm'
-                  : mode === 'create' && index > visitedUpTo
-                    ? 'cursor-not-allowed text-muted-foreground opacity-50'
-                    : 'text-muted-foreground hover:bg-muted hover:text-foreground',
-              ]"
-              :disabled="mode === 'create' && index > visitedUpTo"
-              :aria-current="stepIndex === index ? 'step' : undefined"
-              @click="goTo(index)"
-            >
-              <span
-                class="flex size-6 shrink-0 items-center justify-center rounded-md"
-                :class="
-                  sectionError(section.id)
-                    ? 'bg-destructive/10 text-destructive'
-                    : stepIndex === index
-                      ? 'bg-primary/10 text-primary'
-                      : 'bg-muted text-muted-foreground'
-                "
-              >
-                <AlertCircle v-if="sectionError(section.id)" :size="13" />
-                <Check v-else-if="mode === 'create' && index < stepIndex" :size="13" />
-                <component :is="section.icon" v-else :size="13" />
-              </span>
-              <span class="whitespace-nowrap md:min-w-0 md:flex-1 md:whitespace-normal">{{ section.label }}</span>
-              <span v-if="section.required" class="hidden text-[10px] text-muted-foreground md:block">{{ t('library.creator.required') }}</span>
-            </button>
+            <ul class="space-y-0.5">
+              <li v-for="section in sections" :key="section.id">
+                <div v-if="section.id === 'access'" class="mx-2 my-2 h-px bg-border" aria-hidden="true" />
+                <button
+                  type="button"
+                  class="flex w-full items-start gap-2.5 rounded-lg px-2.5 py-2 text-start transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                  :class="activeSection === section.id ? 'bg-primary/10' : 'hover:bg-muted'"
+                  :aria-current="activeSection === section.id ? 'true' : undefined"
+                  @click="selectSection(section.id)"
+                >
+                  <component
+                    :is="section.icon"
+                    :size="16"
+                    class="mt-0.5 shrink-0"
+                    :class="activeSection === section.id ? 'text-primary' : 'text-foreground'"
+                    aria-hidden="true"
+                  />
+                  <span class="min-w-0 flex-1">
+                    <span
+                      class="flex items-center gap-1.5 text-sm font-medium"
+                      :class="activeSection === section.id ? 'text-primary' : 'text-foreground'"
+                    >
+                      {{ section.label }}
+                      <span v-if="section.missing" class="size-1.5 shrink-0 rounded-full bg-warning" aria-hidden="true" />
+                      <TriangleAlert v-else-if="section.invalid" :size="12" class="shrink-0 text-destructive" aria-hidden="true" />
+                    </span>
+                    <span class="mt-0.5 block truncate text-xs" :class="section.missing ? 'text-warning' : 'text-muted-foreground'">
+                      {{ section.summary }}
+                    </span>
+                  </span>
+                </button>
+              </li>
+            </ul>
           </nav>
 
-          <main class="min-w-0 flex-1 overflow-y-auto bg-background">
+          <main class="@container min-w-0 flex-1 overflow-y-auto">
             <div v-if="initializing" class="flex h-full items-center justify-center text-muted-foreground">
-              <Loader2 class="size-5 animate-spin" :aria-label="t('library.creator.loadingAria')" />
+              <Loader2 class="size-5 motion-safe:animate-spin" :aria-label="t('library.creator.loadingAria')" />
             </div>
-            <template v-else>
+
+            <ul v-else-if="showSectionList" class="flex flex-col gap-2 p-3" :aria-label="t('library.creator.sectionsAria')">
+              <li v-for="section in sections" :key="section.id">
+                <button
+                  type="button"
+                  class="flex w-full items-center gap-3 rounded-xl border border-border bg-card px-3 py-3 text-start focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                  @click="selectSection(section.id)"
+                >
+                  <component :is="section.icon" :size="17" class="shrink-0 text-foreground" aria-hidden="true" />
+                  <span class="min-w-0 flex-1">
+                    <span class="flex items-center gap-1.5 text-sm font-medium text-foreground">
+                      {{ section.label }}
+                      <span v-if="section.missing" class="size-1.5 shrink-0 rounded-full bg-warning" aria-hidden="true" />
+                    </span>
+                    <span class="mt-0.5 block truncate text-xs" :class="section.missing ? 'text-warning' : 'text-muted-foreground'">{{
+                      section.summary
+                    }}</span>
+                  </span>
+                  <ChevronRight :size="16" class="shrink-0 text-muted-foreground rtl:rotate-180" aria-hidden="true" />
+                </button>
+              </li>
+            </ul>
+
+            <div v-else class="flex flex-col gap-3.5 px-4 pb-7 pt-4 sm:px-5">
               <div
                 v-if="initializationWarning"
-                class="mx-4 mt-4 rounded-lg border border-border bg-muted/40 px-3 py-2 text-xs text-muted-foreground sm:mx-6"
+                class="flex items-start gap-2 rounded-lg border border-border bg-muted px-3 py-2 text-xs text-muted-foreground"
+                role="status"
               >
-                {{ initializationWarning }}
+                <Info :size="13" class="mt-px shrink-0" aria-hidden="true" />
+                {{ t('library.creator.sheet.staleWarning') }}
               </div>
-              <component :is="ActiveComponent" v-bind="getSectionProps(activeId)" v-on="sectionListeners" />
-            </template>
+              <div v-if="isWide && activeEntry">
+                <h3 class="text-base font-semibold tracking-tight text-foreground">{{ activeEntry.label }}</h3>
+                <p class="mt-0.5 text-[13px] text-muted-foreground">{{ activeDescription }}</p>
+              </div>
+              <p v-else-if="activeEntry" class="text-[13px] text-muted-foreground">{{ activeDescription }}</p>
+              <component :is="ActiveComponent" v-if="ActiveComponent" v-bind="activeProps" v-on="sectionListeners" />
+            </div>
           </main>
         </div>
 
-        <footer class="shrink-0 border-t border-border bg-card px-4 py-3 sm:px-6 sm:py-4">
-          <div v-if="displayedError" class="mb-3 flex items-start gap-2 text-xs text-destructive" role="alert">
-            <AlertCircle :size="14" class="mt-0.5 shrink-0" />
+        <footer class="shrink-0 border-t border-border bg-card px-4 py-3 sm:px-5">
+          <p v-if="displayedError && !pendingLeave" class="mb-2.5 flex items-start gap-2 text-xs text-destructive" role="alert">
+            <TriangleAlert :size="14" class="mt-px shrink-0" aria-hidden="true" />
             <span>{{ displayedError }}</span>
-          </div>
+          </p>
 
-          <div v-if="initializing" class="flex h-9 items-center justify-center gap-2 text-sm text-muted-foreground">
-            <Loader2 class="size-4 animate-spin" />
-            Loading settings...
-          </div>
-
-          <div v-else-if="mode === 'create'" class="flex items-center justify-between gap-3">
+          <div v-if="pendingLeave" class="flex flex-wrap items-center gap-2" role="group" :aria-label="t('library.creator.sheet.discardQuestion')">
+            <TriangleAlert :size="16" class="shrink-0 text-warning" aria-hidden="true" />
+            <p class="min-w-0 flex-1 text-sm text-foreground">{{ t('library.creator.sheet.discardQuestion') }}</p>
             <button
+              ref="discardButton"
               type="button"
-              class="inline-flex h-9 items-center gap-1.5 rounded-md border border-border px-3 text-sm font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
-              @click="back"
+              class="h-9 rounded-md bg-destructive px-3.5 text-sm font-medium text-destructive-foreground hover:opacity-90"
+              @click="confirmLeave"
             >
-              <X v-if="isFirstStep" :size="14" />
-              <ChevronLeft v-else :size="14" />
-              {{ isFirstStep ? 'Cancel' : 'Back' }}
-            </button>
-
-            <span class="hidden text-xs tabular-nums text-muted-foreground sm:block">{{ stepIndex + 1 }} of {{ sections.length }}</span>
-
-            <div class="flex items-center gap-2">
-              <button
-                v-if="stepIndex > 0 && !isLastStep"
-                type="button"
-                class="inline-flex h-9 items-center rounded-md border border-border px-3 text-sm font-medium text-foreground transition-colors hover:bg-muted disabled:cursor-not-allowed disabled:opacity-50"
-                :disabled="loading || !requiredSetupValid"
-                @click="handleSave"
-              >
-                <span class="sm:hidden">{{ loading ? 'Creating...' : 'Create' }}</span>
-                <span class="hidden sm:inline">{{ loading ? 'Creating...' : 'Create now' }}</span>
-              </button>
-              <button
-                v-if="!isLastStep"
-                type="button"
-                class="inline-flex h-9 items-center gap-1.5 rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground transition-opacity hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-50"
-                @click="next"
-              >
-                Continue
-                <ChevronRight :size="14" />
-              </button>
-              <button
-                v-else
-                type="button"
-                class="inline-flex h-9 items-center rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground transition-opacity hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-50"
-                :disabled="loading"
-                @click="handleSave"
-              >
-                {{ loading ? 'Creating...' : 'Create library' }}
-              </button>
-            </div>
-          </div>
-
-          <div v-else class="flex items-center justify-end gap-2">
-            <button
-              type="button"
-              class="h-9 rounded-md border border-border px-4 text-sm font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:opacity-50"
-              :disabled="loading"
-              @click="requestClose"
-            >
-              Cancel
+              {{ t('library.creator.sheet.discard') }}
             </button>
             <button
               type="button"
-              class="h-9 rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground transition-opacity hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-50"
+              class="h-9 rounded-md border border-border px-3.5 text-sm font-medium text-foreground hover:bg-muted"
+              @click="cancelLeave"
+            >
+              {{ t('library.creator.sheet.keepEditing') }}
+            </button>
+          </div>
+
+          <div v-else-if="initializing" class="flex h-9 items-center gap-2 text-sm text-muted-foreground">
+            <Loader2 class="size-4 motion-safe:animate-spin" aria-hidden="true" />
+            {{ t('library.creator.sheet.loading') }}
+          </div>
+
+          <div v-else class="flex flex-wrap items-center gap-2">
+            <button
+              v-if="createdLibrary"
+              type="button"
+              class="inline-flex h-9 items-center rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground transition-opacity hover:opacity-90"
+              @click="finishCreate"
+            >
+              {{ t('library.creator.sheet.done') }}
+            </button>
+            <button
+              v-else-if="creating"
+              type="button"
+              class="inline-flex h-9 items-center gap-1.5 rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground transition-opacity hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-50"
+              :disabled="loading || !requiredSetupValid"
+              @click="handleSave"
+            >
+              <Plus :size="15" aria-hidden="true" />
+              {{ loading ? t('library.creator.actions.creating') : t('library.creator.actions.createLibrary') }}
+            </button>
+            <button
+              v-else
+              type="button"
+              class="inline-flex h-9 items-center rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground transition-opacity hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-50"
               :disabled="loading || !isDirty"
               @click="handleSave"
             >
-              {{ loading ? 'Saving...' : 'Save changes' }}
+              {{ loading ? t('library.creator.actions.saving') : t('library.creator.actions.saveChanges') }}
             </button>
+            <button
+              v-if="!createdLibrary"
+              type="button"
+              class="inline-flex h-9 items-center rounded-md border border-border px-4 text-sm font-medium text-foreground transition-colors hover:bg-muted disabled:opacity-50"
+              :disabled="loading"
+              @click="requestClose"
+            >
+              {{ t('common.cancel') }}
+            </button>
+
+            <p v-if="creating" class="ms-auto flex items-center gap-1.5 text-xs text-muted-foreground">
+              <CircleCheck v-if="requiredSetupValid" :size="13" class="shrink-0" aria-hidden="true" />
+              <Info v-else :size="13" class="shrink-0" aria-hidden="true" />
+              {{ createHint }}
+            </p>
+
+            <DropdownMenu v-else-if="showActionsMenu && library" @update:open="handleMenuOpen">
+              <DropdownMenuTrigger as-child>
+                <button
+                  type="button"
+                  class="ms-auto flex size-9 items-center justify-center rounded-md border border-border text-foreground transition-colors hover:bg-muted"
+                  :aria-label="t('settings.admin.libraries.moreActions', { name: library.name })"
+                >
+                  <Ellipsis :size="16" aria-hidden="true" />
+                </button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end" side="top" class="z-80 min-w-52">
+                <DropdownMenuItem @click="runScan">
+                  <RefreshCw :size="14" aria-hidden="true" />
+                  {{ t('library.creator.sheet.scanNow') }}
+                </DropdownMenuItem>
+                <DropdownMenuItem v-if="library.type !== 'podcasts'" @click="runRefreshCovers">
+                  <Images :size="14" aria-hidden="true" />
+                  {{ t('settings.admin.libraries.refreshCovers') }}
+                </DropdownMenuItem>
+                <DropdownMenuItem v-if="library.type !== 'podcasts'" :disabled="!library.fileWriteEnabled" @click="runSyncFiles">
+                  <FileCode :size="14" aria-hidden="true" />
+                  {{ t('settings.admin.libraries.syncMetadataToFiles') }}
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem variant="destructive" @click="runRemove">
+                  <Trash2 :size="14" aria-hidden="true" />
+                  {{ t('settings.admin.libraries.deleteLibrary') }}
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
           </div>
         </footer>
       </div>
diff --git a/client/src/features/library/components/LibraryCreatorReading.vue b/client/src/features/library/components/LibraryCreatorReading.vue
index 2d1cb6d32..a953d7b3d 100644
--- a/client/src/features/library/components/LibraryCreatorReading.vue
+++ b/client/src/features/library/components/LibraryCreatorReading.vue
@@ -1,10 +1,17 @@
 <script setup lang="ts">
+import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { formatNumber, formatPercent } from '@/i18n/formatters'
+import LibraryCreatorCard from './LibraryCreatorCard.vue'
 
 const { t } = useI18n()
 
-defineProps<{
+const START_MIN = 0.05
+const START_MAX = 5
+const FINISH_MIN = 90
+const FINISH_MAX = 100
+
+const props = defineProps<{
   readingThreshold: number
   markAsFinishedPercentComplete: number
 }>()
@@ -14,79 +21,222 @@ const emit = defineEmits<{
   'update:markAsFinishedPercentComplete': [value: number]
 }>()
 
-function onReadingThresholdInput(e: Event) {
-  const val = parseFloat((e.target as HTMLInputElement).value)
-  if (!isNaN(val)) emit('update:readingThreshold', val)
+const startFraction = computed(() => fractionOf(props.readingThreshold, START_MIN, START_MAX))
+const finishFraction = computed(() => fractionOf(props.markAsFinishedPercentComplete, FINISH_MIN, FINISH_MAX))
+
+function fractionOf(value: number, min: number, max: number): number {
+  if (!Number.isFinite(value)) return 0
+  return Math.min(1, Math.max(0, (value - min) / (max - min)))
 }
 
-function onFinishPercentInput(e: Event) {
-  const val = parseFloat((e.target as HTMLInputElement).value)
-  if (!isNaN(val)) emit('update:markAsFinishedPercentComplete', val)
+function onReadingThresholdInput(event: Event) {
+  const value = parseFloat((event.target as HTMLInputElement).value)
+  if (!Number.isNaN(value)) emit('update:readingThreshold', value)
 }
 
-function formatFinishedThreshold(value: number): string {
+function onFinishedInput(event: Event) {
+  const value = parseFloat((event.target as HTMLInputElement).value)
+  if (!Number.isNaN(value)) emit('update:markAsFinishedPercentComplete', value)
+}
+
+function percent(value: number): string {
   return formatNumber(value / 100, { style: 'percent', maximumFractionDigits: 2 })
 }
 </script>
 
 <template>
-  <div class="px-6 py-6 space-y-6">
-    <!-- Reading start -->
-    <div>
-      <div class="flex items-center justify-between mb-1">
-        <label for="reading-threshold" class="text-[11px] font-semibold uppercase tracking-widest text-foreground">
-          {{ t('library.creator.reading.readingStart.title') }}
-        </label>
-        <output for="reading-threshold" class="text-sm font-medium text-foreground tabular-nums">{{ readingThreshold }}%</output>
+  <LibraryCreatorCard :label="t('library.creator.reading.statusTitle')">
+    <div class="mb-7 px-1">
+      <div class="mb-2 flex items-center text-[11px]" aria-hidden="true">
+        <span class="text-muted-foreground">{{ t('library.creator.reading.zones.notStarted') }}</span>
+        <span class="mx-auto font-medium text-primary">{{ t('library.creator.reading.zones.reading') }}</span>
+        <span class="font-medium text-success">{{ t('library.creator.reading.zones.read') }}</span>
       </div>
-      <p id="reading-threshold-help" class="text-xs text-muted-foreground mb-3">
-        {{ t('library.creator.reading.readingStart.hint') }}
-      </p>
-      <input
-        id="reading-threshold"
-        type="range"
-        :value="readingThreshold"
-        min="0.05"
-        max="5"
-        step="0.05"
-        class="w-full accent-primary"
-        aria-describedby="reading-threshold-help"
-        @input="onReadingThresholdInput"
-      />
-      <div class="flex justify-between text-xs text-muted-foreground mt-1">
-        <span>0.05%</span>
-        <span>5%</span>
+
+      <!--
+        Each end is its own slider over its own range, drawn wider than true scale: at scale the whole
+        0.05% to 5% start range would be a few pixels. The break marks say the axis is not continuous.
+      -->
+      <div class="flex items-center gap-1">
+        <div class="relative w-[30%] shrink-0">
+          <input
+            id="reading-threshold-slider"
+            type="range"
+            class="reading-range reading-range--start w-full"
+            :min="START_MIN"
+            :max="START_MAX"
+            step="0.05"
+            :value="readingThreshold"
+            :style="{ '--fraction': startFraction }"
+            :aria-label="t('library.creator.reading.startSlider')"
+            :aria-valuetext="percent(readingThreshold)"
+            @input="onReadingThresholdInput"
+          />
+          <span class="reading-readout" :style="{ '--fraction': startFraction }" aria-hidden="true">{{ percent(readingThreshold) }}</span>
+        </div>
+        <svg
+          class="h-3.5 w-2 shrink-0 text-muted-foreground"
+          viewBox="0 0 8 14"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="1.5"
+          aria-hidden="true"
+        >
+          <path d="M1 13 4 1M4 13 7 1" />
+        </svg>
+        <span class="h-2.5 min-w-0 flex-1 rounded-full bg-primary/45" aria-hidden="true" />
+        <svg
+          class="h-3.5 w-2 shrink-0 text-muted-foreground"
+          viewBox="0 0 8 14"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="1.5"
+          aria-hidden="true"
+        >
+          <path d="M1 13 4 1M4 13 7 1" />
+        </svg>
+        <div class="relative w-[30%] shrink-0">
+          <input
+            id="finished-threshold-slider"
+            type="range"
+            class="reading-range reading-range--finish w-full"
+            :min="FINISH_MIN"
+            :max="FINISH_MAX"
+            step="0.25"
+            :value="markAsFinishedPercentComplete"
+            :style="{ '--fraction': finishFraction }"
+            :aria-label="t('library.creator.reading.finishSlider')"
+            :aria-valuetext="percent(markAsFinishedPercentComplete)"
+            @input="onFinishedInput"
+          />
+          <span class="reading-readout" :style="{ '--fraction': finishFraction }" aria-hidden="true">{{
+            percent(markAsFinishedPercentComplete)
+          }}</span>
+        </div>
       </div>
     </div>
 
-    <!-- Mark as finished -->
-    <div>
-      <div class="flex items-center justify-between mb-1">
-        <label for="finished-threshold" class="text-[11px] font-semibold uppercase tracking-widest text-foreground">
-          {{ t('library.creator.reading.markAsFinished.title') }}
-        </label>
-        <output for="finished-threshold" class="text-sm font-medium text-foreground tabular-nums">
-          {{ formatFinishedThreshold(markAsFinishedPercentComplete) }}
-        </output>
+    <div class="grid gap-4 @lg:grid-cols-2">
+      <div>
+        <label for="reading-threshold" class="block text-[13px] font-medium text-foreground">{{
+          t('library.creator.reading.readingStart.title')
+        }}</label>
+        <div class="relative mt-1.5 w-36">
+          <input
+            id="reading-threshold"
+            type="number"
+            inputmode="decimal"
+            :value="readingThreshold"
+            :min="START_MIN"
+            :max="START_MAX"
+            step="0.05"
+            class="h-9 w-full rounded-md border border-input bg-background pe-8 ps-3 text-end text-sm tabular-nums text-foreground focus:outline-none focus:ring-2 focus:ring-ring"
+            aria-describedby="reading-threshold-help"
+            @input="onReadingThresholdInput"
+          />
+          <span class="pointer-events-none absolute end-3 top-1/2 -translate-y-1/2 text-sm text-muted-foreground" aria-hidden="true">%</span>
+        </div>
+        <p id="reading-threshold-help" class="mt-1.5 text-xs text-muted-foreground">
+          {{ t('library.creator.reading.readingStart.hint') }}
+          {{ t('library.creator.reading.range', { min: percent(START_MIN), max: percent(START_MAX) }) }}
+        </p>
       </div>
-      <p id="finished-threshold-help" class="text-xs text-muted-foreground mb-3">
-        {{ t('library.creator.reading.markAsFinished.hint') }}
-      </p>
-      <input
-        id="finished-threshold"
-        type="range"
-        :value="markAsFinishedPercentComplete"
-        min="90"
-        max="100"
-        step="0.05"
-        class="w-full accent-primary"
-        aria-describedby="finished-threshold-help"
-        @input="onFinishPercentInput"
-      />
-      <div class="flex justify-between text-xs text-muted-foreground mt-1">
-        <span>{{ formatPercent(0.9) }}</span>
-        <span>{{ formatPercent(1) }}</span>
+      <div>
+        <label for="finished-threshold" class="block text-[13px] font-medium text-foreground">{{
+          t('library.creator.reading.markAsFinished.title')
+        }}</label>
+        <div class="relative mt-1.5 w-36">
+          <input
+            id="finished-threshold"
+            type="number"
+            inputmode="decimal"
+            :value="markAsFinishedPercentComplete"
+            :min="FINISH_MIN"
+            :max="FINISH_MAX"
+            step="0.05"
+            class="h-9 w-full rounded-md border border-input bg-background pe-8 ps-3 text-end text-sm tabular-nums text-foreground focus:outline-none focus:ring-2 focus:ring-ring"
+            aria-describedby="finished-threshold-help"
+            @input="onFinishedInput"
+          />
+          <span class="pointer-events-none absolute end-3 top-1/2 -translate-y-1/2 text-sm text-muted-foreground" aria-hidden="true">%</span>
+        </div>
+        <p id="finished-threshold-help" class="mt-1.5 text-xs text-muted-foreground">
+          {{ t('library.creator.reading.markAsFinished.hint') }}
+          {{ t('library.creator.reading.range', { min: formatPercent(0.9), max: formatPercent(1) }) }}
+        </p>
       </div>
     </div>
-  </div>
+  </LibraryCreatorCard>
 </template>
+
+<style scoped>
+/* The thumb centre travels from half a thumb in to half a thumb short of the end, so the fill and the
+   readout track that span rather than the full width. */
+.reading-range {
+  --thumb: 18px;
+  --stop: calc(var(--thumb) / 2 + (100% - var(--thumb)) * var(--fraction));
+  appearance: none;
+  display: block;
+  height: 10px;
+  border-radius: 999px;
+  cursor: pointer;
+  touch-action: none;
+}
+
+.reading-range--start {
+  background: linear-gradient(to right, var(--surface-4) var(--stop), color-mix(in oklch, var(--primary) 45%, transparent) var(--stop));
+}
+
+.reading-range--finish {
+  background: linear-gradient(to right, color-mix(in oklch, var(--primary) 45%, transparent) var(--stop), var(--success) var(--stop));
+}
+
+:dir(rtl) .reading-range--start {
+  background: linear-gradient(to left, var(--surface-4) var(--stop), color-mix(in oklch, var(--primary) 45%, transparent) var(--stop));
+}
+
+:dir(rtl) .reading-range--finish {
+  background: linear-gradient(to left, color-mix(in oklch, var(--primary) 45%, transparent) var(--stop), var(--success) var(--stop));
+}
+
+.reading-range:focus-visible {
+  outline: 2px solid var(--ring);
+  outline-offset: 4px;
+}
+
+.reading-range::-webkit-slider-thumb {
+  appearance: none;
+  width: var(--thumb);
+  height: var(--thumb);
+  border: 2px solid var(--foreground);
+  border-radius: 999px;
+  background: var(--background);
+  box-shadow: var(--elevation-sm);
+}
+
+.reading-range::-moz-range-thumb {
+  width: var(--thumb);
+  height: var(--thumb);
+  border: 2px solid var(--foreground);
+  border-radius: 999px;
+  background: var(--background);
+  box-shadow: var(--elevation-sm);
+}
+
+.reading-readout {
+  position: absolute;
+  top: 100%;
+  inset-inline-start: calc(9px + (100% - 18px) * var(--fraction));
+  margin-top: 6px;
+  translate: calc(var(--fraction) * -100%) 0;
+  font-size: 11.5px;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+  color: var(--foreground);
+}
+
+:dir(rtl) .reading-readout {
+  translate: calc(var(--fraction) * 100%) 0;
+}
+</style>
diff --git a/client/src/features/library/components/LibraryCreatorScanner.vue b/client/src/features/library/components/LibraryCreatorScanner.vue
index 6899f383a..28466f5d4 100644
--- a/client/src/features/library/components/LibraryCreatorScanner.vue
+++ b/client/src/features/library/components/LibraryCreatorScanner.vue
@@ -1,11 +1,13 @@
 <script setup lang="ts">
 import { computed, nextTick, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { Lock, Plus, RefreshCw, X } from '@lucide/vue'
-import type { AddedAtRecomputeJob, AddedAtSource, OrganizationMode } from '@bookorbit/types'
+import { ArrowRight, Lock, Plus, RefreshCw, TriangleAlert, X } from '@lucide/vue'
+import { BOOK_FORMATS, type AddedAtRecomputeJob, type AddedAtSource, type OrganizationMode } from '@bookorbit/types'
 import { formatNumber } from '@/i18n/formatters'
-import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
-import { BOOK_FORMATS } from '@bookorbit/types'
+import { formatColorVar } from '@/features/book/lib/format-colors'
+import { formatFamilyColor } from '@/features/settings/libraries/lib/library-formats'
+import LibraryCreatorCard from './LibraryCreatorCard.vue'
+import LibraryOrganizationPreview from './LibraryOrganizationPreview.vue'
 
 const { t } = useI18n()
 
@@ -30,6 +32,97 @@ const emit = defineEmits<{
   recompute: []
 }>()
 
+const ORGANIZATION_MODES: OrganizationMode[] = ['book_per_folder', 'book_per_file']
+const ADDED_AT_SOURCES: AddedAtSource[] = ['imported', 'file_modified', 'file_created']
+const FORMAT_GROUPS: { id: 'ebook' | 'kindle' | 'document' | 'comic' | 'audio'; formats: string[] }[] = [
+  { id: 'ebook', formats: ['epub', 'kepub', 'fb2'] },
+  { id: 'kindle', formats: ['mobi', 'azw3', 'azw'] },
+  { id: 'document', formats: ['pdf'] },
+  { id: 'comic', formats: ['cbz', 'cbr', 'cb7'] },
+  { id: 'audio', formats: ['m4b', 'mp3', 'm4a', 'opus', 'ogg', 'flac'] },
+]
+
+const modeCopy = computed<Record<OrganizationMode, { title: string; hint: string; result: string }>>(() => ({
+  book_per_folder: {
+    title: t('library.creator.scanner.scanMode.folderAsBook.title'),
+    hint: t('library.creator.scanner.mode.folderHint'),
+    result: t('library.creator.scanner.mode.folderResult'),
+  },
+  book_per_file: {
+    title: t('library.creator.scanner.scanMode.fileAsBook.title'),
+    hint: t('library.creator.scanner.mode.fileHint'),
+    result: t('library.creator.scanner.mode.fileResult'),
+  },
+}))
+
+// ── Import ────────────────────────────────────────────────────────────────────
+
+const restricting = ref(props.allowedFormats.length > 0)
+const importAll = computed(() => !restricting.value && props.allowedFormats.length === 0)
+
+function isImported(format: string): boolean {
+  return props.allowedFormats.length === 0 || props.allowedFormats.includes(format)
+}
+
+function selectImportAll() {
+  restricting.value = false
+  emit('update:allowedFormats', [])
+}
+
+function selectImportSome() {
+  restricting.value = true
+  if (props.allowedFormats.length === 0) emit('update:allowedFormats', [...BOOK_FORMATS])
+}
+
+function toggleFormat(format: string) {
+  const current = props.allowedFormats.length === 0 ? [...BOOK_FORMATS] : [...props.allowedFormats]
+  const index = current.indexOf(format)
+  if (index === -1) current.push(format)
+  else if (current.length > 1) current.splice(index, 1)
+  else return
+  emit('update:allowedFormats', current)
+}
+
+function chipStyle(format: string): Record<string, string> {
+  if (!isImported(format)) return {}
+  const color = formatColorVar(format)
+  return { color, backgroundColor: `color-mix(in oklch, ${color} 13%, transparent)`, borderColor: 'transparent' }
+}
+
+// ── Skip patterns ───────────────────────────────────────────────────────────────
+
+const newPattern = ref('')
+
+function addPattern() {
+  const trimmed = newPattern.value.trim()
+  if (!trimmed || props.excludePatterns.includes(trimmed)) return
+  emit('update:excludePatterns', [...props.excludePatterns, trimmed])
+  newPattern.value = ''
+}
+
+function removePattern(pattern: string) {
+  emit(
+    'update:excludePatterns',
+    props.excludePatterns.filter((candidate) => candidate !== pattern),
+  )
+}
+
+function onPatternKeydown(event: KeyboardEvent) {
+  if (event.key === 'Enter') {
+    event.preventDefault()
+    addPattern()
+  }
+}
+
+// ── Organization ────────────────────────────────────────────────────────────────
+
+function selectMode(event: Event) {
+  if (props.organizationModeLocked) return
+  emit('update:organizationMode', (event.target as HTMLInputElement).value as OrganizationMode)
+}
+
+// ── Date added ────────────────────────────────────────────────────────────────
+
 const confirmingRecompute = ref(false)
 const confirmButton = ref<HTMLButtonElement | null>(null)
 const sourceGroup = ref<HTMLElement | null>(null)
@@ -40,9 +133,6 @@ const progressText = computed(() => {
   const counters = ['processed', 'total', 'updated', 'unchanged', 'skipped', 'failed'] as const
   return t('library.creator.scanner.addedAt.progressSummary', Object.fromEntries(counters.map((key) => [key, formatNumber(job[key])])))
 })
-
-const ADDED_AT_SOURCES: AddedAtSource[] = ['imported', 'file_modified', 'file_created']
-
 const recomputeDisabled = computed(
   () =>
     props.recomputingAddedAt ||
@@ -52,8 +142,8 @@ const recomputeDisabled = computed(
 )
 const showSaveFirstHint = computed(() => props.canRecomputeAddedAt && props.addedAtSource !== props.storedAddedAtSource)
 
-function selectAddedAtSource(source: AddedAtSource) {
-  emit('update:addedAtSource', source)
+function selectAddedAtSource(event: Event) {
+  emit('update:addedAtSource', (event.target as HTMLInputElement).value as AddedAtSource)
 }
 
 async function requestRecompute() {
@@ -75,179 +165,203 @@ async function confirmRecompute() {
   await nextTick()
   sourceGroup.value?.querySelector<HTMLInputElement>('input:checked')?.focus()
 }
-
-// ── Scan mode ─────────────────────────────────────────────────────────────────
-
-function handleSelectMode(mode: OrganizationMode) {
-  if (props.organizationModeLocked) return
-  emit('update:organizationMode', mode)
-}
-
-function handleSelectFolderMode() {
-  handleSelectMode('book_per_folder')
-}
-
-function handleSelectFileMode() {
-  handleSelectMode('book_per_file')
-}
-
-// ── Allowed formats ──────────────────────────────────────────────────────────
-
-const ALL_FORMATS: readonly string[] = BOOK_FORMATS
-
-function toggleAllowedFormat(fmt: string) {
-  const current = [...props.allowedFormats]
-  const idx = current.indexOf(fmt)
-  if (idx === -1) {
-    current.push(fmt)
-  } else {
-    if (current.length === 1) return
-    current.splice(idx, 1)
-  }
-  emit('update:allowedFormats', current)
-}
-
-function selectAllFormats() {
-  emit('update:allowedFormats', [])
-}
-
-// ── Exclude patterns ─────────────────────────────────────────────────────────
-
-const newPattern = ref('')
-
-function addPattern() {
-  const trimmed = newPattern.value.trim()
-  if (!trimmed || props.excludePatterns.includes(trimmed)) return
-  emit('update:excludePatterns', [...props.excludePatterns, trimmed])
-  newPattern.value = ''
-}
-
-function removePattern(i: number) {
-  const updated = [...props.excludePatterns]
-  updated.splice(i, 1)
-  emit('update:excludePatterns', updated)
-}
-
-function onPatternKeydown(e: KeyboardEvent) {
-  if (e.key === 'Enter') {
-    e.preventDefault()
-    addPattern()
-  }
-}
 </script>
 
 <template>
-  <div class="px-6 py-6 space-y-8">
-    <!-- Scan mode -->
-    <div>
-      <div class="flex items-center gap-2 mb-3">
-        <p class="text-[11px] font-semibold uppercase tracking-widest text-foreground">{{ t('library.creator.scanner.scanMode.title') }}</p>
-        <Tooltip v-if="organizationModeLocked">
-          <TooltipTrigger as-child>
-            <span
-              class="inline-flex h-5 w-5 items-center justify-center rounded-full border border-border text-muted-foreground cursor-help"
-              :aria-label="t('library.creator.scanner.scanMode.lockedAria')"
-            >
-              <Lock :size="11" />
-            </span>
-          </TooltipTrigger>
-          <TooltipContent class="max-w-72 text-xs leading-relaxed">
-            {{ t('library.creator.scanner.scanMode.lockTooltip') }}
-          </TooltipContent>
-        </Tooltip>
+  <div class="flex flex-col gap-3.5">
+    <LibraryCreatorCard :label="t('library.creator.scanner.mode.title')" label-id="organization-mode-title">
+      <template v-if="organizationModeLocked" #meta>
+        <span class="inline-flex items-center gap-1 rounded-full border border-border px-2 py-0.5 text-[11px] font-medium text-muted-foreground">
+          <Lock :size="10" aria-hidden="true" />
+          {{ t('library.creator.scanner.mode.locked') }}
+        </span>
+      </template>
+
+      <div v-if="organizationModeLocked" class="flex flex-col gap-3 @md:flex-row @md:items-center">
+        <LibraryOrganizationPreview :mode="organizationMode" class="w-full shrink-0 @md:w-44" />
+        <div class="min-w-0">
+          <p class="text-sm font-semibold text-foreground">{{ modeCopy[organizationMode].title }}</p>
+          <p class="mt-0.5 text-xs text-muted-foreground">{{ modeCopy[organizationMode].hint }}</p>
+          <p class="mt-1.5 text-xs text-muted-foreground">{{ t('library.creator.scanner.scanMode.lockTooltip') }}</p>
+        </div>
       </div>
-      <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
+
+      <template v-else>
+        <div role="radiogroup" aria-labelledby="organization-mode-title" class="grid gap-2.5">
+          <label
+            v-for="mode in ORGANIZATION_MODES"
+            :key="mode"
+            class="flex cursor-pointer flex-col gap-2.5 rounded-xl border p-3 transition-colors focus-within:ring-2 focus-within:ring-ring"
+            :class="organizationMode === mode ? 'border-primary bg-primary/7 ring-1 ring-primary' : 'border-border bg-background hover:bg-muted'"
+          >
+            <span class="flex items-center gap-2">
+              <input
+                type="radio"
+                name="organization-mode"
+                :value="mode"
+                :checked="organizationMode === mode"
+                class="size-4 shrink-0 accent-primary"
+                @change="selectMode"
+              />
+              <span class="text-sm font-semibold text-foreground">{{ modeCopy[mode].title }}</span>
+              <span v-if="mode === 'book_per_folder'" class="ms-auto rounded-full bg-muted px-2 py-0.5 text-[11px] font-medium text-muted-foreground">
+                {{ t('library.creator.scanner.scanMode.recommended') }}
+              </span>
+            </span>
+            <span class="flex flex-col gap-2.5 @md:flex-row @md:items-center">
+              <LibraryOrganizationPreview :mode="mode" class="shrink-0 @md:w-44" />
+              <span class="flex min-w-0 flex-col gap-1">
+                <span class="flex items-center gap-1.5 text-xs font-semibold text-foreground">
+                  <ArrowRight :size="12" class="shrink-0 text-muted-foreground rtl:rotate-180" aria-hidden="true" />
+                  {{ modeCopy[mode].result }}
+                </span>
+                <span class="text-xs text-muted-foreground">{{ modeCopy[mode].hint }}</span>
+              </span>
+            </span>
+          </label>
+        </div>
+        <p class="mt-2.5 flex items-center gap-1.5 text-xs text-muted-foreground">
+          <Lock :size="12" class="shrink-0" aria-hidden="true" />
+          {{ t('library.creator.scanner.mode.cannotChange') }}
+        </p>
+      </template>
+    </LibraryCreatorCard>
+
+    <LibraryCreatorCard :label="t('library.creator.scanner.import.title')" label-id="import-formats-title">
+      <div class="flex flex-wrap items-center gap-x-3 gap-y-2">
+        <div role="radiogroup" aria-labelledby="import-formats-title" class="inline-flex gap-0.5 rounded-lg border border-border bg-muted p-0.5">
+          <label
+            class="cursor-pointer rounded-md px-3 py-1 text-[13px] font-medium transition-colors focus-within:ring-2 focus-within:ring-ring"
+            :class="importAll ? 'bg-background text-primary shadow-xs' : 'text-foreground hover:bg-background/60'"
+          >
+            <input type="radio" name="import-formats" class="sr-only" :checked="importAll" @change="selectImportAll" />
+            {{ t('library.creator.scanner.import.all') }}
+          </label>
+          <label
+            class="cursor-pointer rounded-md px-3 py-1 text-[13px] font-medium transition-colors focus-within:ring-2 focus-within:ring-ring"
+            :class="!importAll ? 'bg-background text-primary shadow-xs' : 'text-foreground hover:bg-background/60'"
+          >
+            <input type="radio" name="import-formats" class="sr-only" :checked="!importAll" @change="selectImportSome" />
+            {{ t('library.creator.scanner.import.some') }}
+          </label>
+        </div>
+        <span class="text-xs text-muted-foreground">
+          {{ importAll ? t('library.creator.scanner.allowedFormats.allAllowed') : t('library.creator.scanner.allowedFormats.onlySelected') }}
+        </span>
+      </div>
+
+      <template v-if="!importAll">
+        <div class="mt-3 grid gap-2 @lg:grid-cols-2">
+          <div v-for="group in FORMAT_GROUPS" :key="group.id" class="rounded-lg border border-border bg-background px-3 py-2.5">
+            <p :id="`format-group-${group.id}`" class="mb-2 flex items-center gap-2 text-xs font-semibold text-foreground">
+              <span class="size-1.5 rounded-[2px]" :style="{ backgroundColor: formatFamilyColor(group.formats[0]!) }" aria-hidden="true" />
+              {{ t(`library.creator.scanner.import.groups.${group.id}`) }}
+            </p>
+            <div role="group" :aria-labelledby="`format-group-${group.id}`" class="flex flex-wrap gap-1.5">
+              <button
+                v-for="format in group.formats"
+                :key="format"
+                type="button"
+                class="rounded-md border px-2 py-0.5 text-[11px] font-semibold tracking-wide transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                :class="isImported(format) ? '' : 'border-border text-muted-foreground line-through hover:text-foreground'"
+                :style="chipStyle(format)"
+                :aria-pressed="isImported(format)"
+                @click="toggleFormat(format)"
+              >
+                {{ format.toUpperCase() }}
+              </button>
+            </div>
+          </div>
+        </div>
+        <p class="mt-2.5 flex items-start gap-1.5 text-xs text-warning">
+          <TriangleAlert :size="13" class="mt-px shrink-0" aria-hidden="true" />
+          <span>{{ t('library.creator.scanner.allowedFormats.warning') }}</span>
+        </p>
+      </template>
+    </LibraryCreatorCard>
+
+    <LibraryCreatorCard :label="t('library.creator.scanner.skip.title')">
+      <template #meta>{{
+        excludePatterns.length ? t('library.creator.scanner.skip.count', { count: excludePatterns.length }) : t('library.creator.optional')
+      }}</template>
+      <div class="flex flex-wrap items-center gap-1.5 rounded-lg border border-input bg-background p-1.5 focus-within:ring-2 focus-within:ring-ring">
+        <span
+          v-for="pattern in excludePatterns"
+          :key="pattern"
+          class="inline-flex items-center gap-1 rounded-md border border-border bg-card py-0.5 pe-1 ps-2 font-mono text-xs text-foreground"
+          dir="ltr"
+        >
+          {{ pattern }}
+          <button
+            type="button"
+            class="flex size-4.5 items-center justify-center rounded text-foreground hover:bg-muted hover:text-destructive"
+            :aria-label="t('library.creator.scanner.skip.remove', { pattern })"
+            @click="removePattern(pattern)"
+          >
+            <X :size="11" aria-hidden="true" />
+          </button>
+        </span>
+        <label for="exclude-pattern-input" class="sr-only">{{ t('library.creator.scanner.skip.inputLabel') }}</label>
+        <input
+          id="exclude-pattern-input"
+          v-model="newPattern"
+          type="text"
+          dir="ltr"
+          class="h-7 min-w-40 flex-1 bg-transparent px-1.5 font-mono text-[12.5px] text-foreground placeholder:font-sans placeholder:text-muted-foreground focus:outline-none"
+          :placeholder="excludePatterns.length ? t('library.creator.scanner.skip.placeholderMore') : t('library.creator.scanner.skip.placeholder')"
+          aria-describedby="exclude-pattern-hint"
+          @keydown="onPatternKeydown"
+        />
         <button
           type="button"
-          class="text-left rounded-lg border p-4 transition-colors"
-          :class="[
-            organizationMode === 'book_per_folder'
-              ? 'border-primary bg-primary/5 ring-1 ring-primary'
-              : 'border-border bg-card hover:border-primary/40',
-            organizationModeLocked ? 'cursor-not-allowed opacity-75' : '',
-          ]"
-          :disabled="organizationModeLocked"
-          @click="handleSelectFolderMode"
+          class="inline-flex h-7 items-center gap-1 rounded-md px-2 text-xs font-medium text-foreground hover:bg-muted disabled:opacity-50"
+          :disabled="!newPattern.trim()"
+          @click="addPattern"
         >
-          <div class="flex items-center gap-2 mb-1.5">
-            <span
-              class="w-3.5 h-3.5 rounded-full border-2 shrink-0 flex items-center justify-center"
-              :class="organizationMode === 'book_per_folder' ? 'border-primary' : 'border-muted-foreground/40'"
-            >
-              <span v-if="organizationMode === 'book_per_folder'" class="w-1.5 h-1.5 rounded-full bg-primary" />
-            </span>
-            <span class="text-sm font-semibold text-foreground">{{ t('library.creator.scanner.scanMode.folderAsBook.title') }}</span>
-          </div>
-          <p class="text-xs text-muted-foreground leading-relaxed">
-            {{ t('library.creator.scanner.scanMode.folderAsBook.hint') }}
-          </p>
-        </button>
-
-        <button
-          type="button"
-          class="text-left rounded-lg border p-4 transition-colors"
-          :class="[
-            organizationMode === 'book_per_file'
-              ? 'border-primary bg-primary/5 ring-1 ring-primary'
-              : 'border-border bg-card hover:border-primary/40',
-            organizationModeLocked ? 'cursor-not-allowed opacity-75' : '',
-          ]"
-          :disabled="organizationModeLocked"
-          @click="handleSelectFileMode"
-        >
-          <div class="flex items-center gap-2 mb-1.5">
-            <span
-              class="w-3.5 h-3.5 rounded-full border-2 shrink-0 flex items-center justify-center"
-              :class="organizationMode === 'book_per_file' ? 'border-primary' : 'border-muted-foreground/40'"
-            >
-              <span v-if="organizationMode === 'book_per_file'" class="w-1.5 h-1.5 rounded-full bg-primary" />
-            </span>
-            <span class="text-sm font-semibold text-foreground">{{ t('library.creator.scanner.scanMode.fileAsBook.title') }}</span>
-          </div>
-          <p class="text-xs text-muted-foreground leading-relaxed">
-            {{ t('library.creator.scanner.scanMode.fileAsBook.hint') }}
-          </p>
+          <Plus :size="12" aria-hidden="true" />
+          {{ t('library.creator.scanner.excludePatterns.add') }}
         </button>
       </div>
-    </div>
+      <p id="exclude-pattern-hint" class="mt-1.5 text-xs text-muted-foreground">{{ t('library.creator.scanner.skip.hint') }}</p>
+    </LibraryCreatorCard>
 
-    <div>
-      <p id="added-at-title" class="text-[11px] font-semibold uppercase tracking-widest text-foreground mb-1">
-        {{ t('library.creator.scanner.addedAt.title') }}
-      </p>
-      <p id="added-at-hint" class="text-xs text-muted-foreground mb-3">{{ t('library.creator.scanner.addedAt.hint') }}</p>
-      <div ref="sourceGroup" role="radiogroup" aria-labelledby="added-at-title" aria-describedby="added-at-hint" class="space-y-2">
+    <LibraryCreatorCard :label="t('library.creator.scanner.addedAt.title')" label-id="added-at-title">
+      <div
+        ref="sourceGroup"
+        role="radiogroup"
+        aria-labelledby="added-at-title"
+        aria-describedby="added-at-hint"
+        class="grid gap-0.5 rounded-lg border border-border bg-muted p-0.5 @lg:grid-cols-3"
+      >
         <label
           v-for="source in ADDED_AT_SOURCES"
           :key="source"
-          class="block w-full cursor-pointer rounded-lg border p-3 text-start transition-colors focus-within:ring-2 focus-within:ring-ring"
-          :class="addedAtSource === source ? 'border-primary bg-primary/5 ring-1 ring-primary' : 'border-border bg-card hover:border-primary/40'"
+          class="cursor-pointer rounded-md px-3 py-1.5 text-center text-[13px] font-medium transition-colors focus-within:ring-2 focus-within:ring-ring"
+          :class="addedAtSource === source ? 'bg-background text-primary shadow-xs' : 'text-foreground hover:bg-background/60'"
         >
-          <span class="mb-1 flex items-center gap-2">
-            <input
-              type="radio"
-              name="added-at-source"
-              :value="source"
-              :checked="addedAtSource === source"
-              class="accent-primary"
-              @change="selectAddedAtSource(source)"
-            />
-            <span class="text-sm font-semibold text-foreground">{{ t(`library.creator.scanner.addedAt.options.${source}.title`) }}</span>
-          </span>
-          <span class="block ps-5.5 text-xs text-muted-foreground leading-relaxed">{{
-            t(`library.creator.scanner.addedAt.options.${source}.hint`)
-          }}</span>
+          <input
+            type="radio"
+            name="added-at-source"
+            :value="source"
+            :checked="addedAtSource === source"
+            class="sr-only"
+            @change="selectAddedAtSource"
+          />
+          {{ t(`library.creator.scanner.addedAt.options.${source}.title`) }}
         </label>
       </div>
+      <p id="added-at-hint" class="mt-2 text-xs text-muted-foreground">{{ t(`library.creator.scanner.addedAt.options.${addedAtSource}.hint`) }}</p>
+      <p class="mt-1 text-xs text-muted-foreground">{{ t('library.creator.scanner.addedAt.hint') }}</p>
+
       <div v-if="canRecomputeAddedAt" class="mt-3 flex flex-wrap items-center gap-3">
         <button
           ref="recomputeButton"
           type="button"
-          class="flex items-center gap-1.5 px-3 py-2 rounded-md border border-border text-sm font-medium text-foreground hover:bg-muted transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
+          class="inline-flex h-8 items-center gap-1.5 rounded-md border border-border px-3 text-[13px] font-medium text-foreground transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
           :disabled="recomputeDisabled"
           @click="requestRecompute"
         >
-          <RefreshCw :size="13" :class="recomputingAddedAt ? 'motion-safe:animate-spin' : ''" />
+          <RefreshCw :size="13" :class="recomputingAddedAt ? 'motion-safe:animate-spin' : ''" aria-hidden="true" />
           {{ recomputingAddedAt ? t('library.creator.scanner.addedAt.recomputing') : t('library.creator.scanner.addedAt.recompute') }}
         </button>
         <p class="text-xs text-muted-foreground">
@@ -258,7 +372,7 @@ function onPatternKeydown(e: KeyboardEvent) {
         v-if="confirmingRecompute"
         role="group"
         :aria-label="t('library.creator.scanner.addedAt.recompute')"
-        class="mt-3 rounded-md border border-border p-3"
+        class="mt-3 rounded-lg border border-border bg-background p-3"
       >
         <p class="text-sm text-muted-foreground">{{ t('library.creator.scanner.addedAt.backgroundConfirm') }}</p>
         <div class="mt-3 flex flex-wrap gap-2">
@@ -266,14 +380,14 @@ function onPatternKeydown(e: KeyboardEvent) {
             ref="confirmButton"
             type="button"
             :disabled="recomputeDisabled"
-            class="rounded-md border border-border px-3 py-2 text-sm text-foreground hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50"
+            class="h-8 rounded-md border border-border px-3 text-[13px] font-medium text-foreground hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50"
             @click="confirmRecompute"
           >
             {{ t('library.creator.scanner.addedAt.recompute') }}
           </button>
           <button
             type="button"
-            class="rounded-md px-3 py-2 text-sm text-foreground hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            class="h-8 rounded-md px-3 text-[13px] font-medium text-foreground hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
             @click="cancelRecompute"
           >
             {{ t('common.cancel') }}
@@ -303,102 +417,6 @@ function onPatternKeydown(e: KeyboardEvent) {
         </ul>
       </div>
       <p v-if="recomputeErrorKey" role="alert" class="mt-3 text-sm text-destructive">{{ t(recomputeErrorKey) }}</p>
-    </div>
-
-    <!-- Filtering group -->
-    <div>
-      <!-- Allowed formats -->
-      <div class="mb-8">
-        <div class="flex items-center justify-between mb-1">
-          <p class="text-[11px] font-semibold uppercase tracking-widest text-foreground">
-            {{ t('library.creator.scanner.allowedFormats.title') }}
-          </p>
-          <button
-            v-if="allowedFormats.length > 0"
-            type="button"
-            class="text-xs text-muted-foreground hover:text-foreground transition-colors"
-            @click="selectAllFormats"
-          >
-            {{ t('library.creator.scanner.allowedFormats.allowAll') }}
-          </button>
-        </div>
-        <p class="text-xs text-muted-foreground mb-3">
-          {{
-            allowedFormats.length === 0
-              ? t('library.creator.scanner.allowedFormats.allAllowed')
-              : t('library.creator.scanner.allowedFormats.onlySelected')
-          }}
-        </p>
-        <div class="flex flex-wrap gap-2">
-          <button
-            v-for="fmt in ALL_FORMATS"
-            :key="fmt"
-            type="button"
-            class="px-2.75 py-1 rounded-full text-[11px] font-medium border transition-colors"
-            :class="
-              allowedFormats.length === 0 || allowedFormats.includes(fmt)
-                ? 'border-primary bg-primary/10 text-primary'
-                : 'border-border text-muted-foreground hover:border-primary/50 hover:text-foreground'
-            "
-            :aria-pressed="allowedFormats.length === 0 || allowedFormats.includes(fmt)"
-            @click="toggleAllowedFormat(fmt)"
-          >
-            {{ fmt.toUpperCase() }}
-          </button>
-        </div>
-        <p v-if="allowedFormats.length > 0" class="mt-2 text-xs font-medium text-foreground">
-          {{ t('library.creator.scanner.allowedFormats.warning') }}
-        </p>
-      </div>
-
-      <!-- Exclude patterns -->
-      <div>
-        <p class="text-[11px] font-semibold uppercase tracking-widest text-foreground mb-1">
-          {{ t('library.creator.scanner.excludePatterns.title') }}
-        </p>
-        <p class="text-xs text-muted-foreground mb-3">
-          {{ t('library.creator.scanner.excludePatterns.hintBefore') }} <code class="font-mono bg-muted px-1 rounded">**/samples/**</code
-          >{{ t('library.creator.scanner.excludePatterns.hintAfter') }}
-        </p>
-        <div class="flex gap-2 mb-2">
-          <input
-            v-model="newPattern"
-            type="text"
-            placeholder="**/node_modules/**"
-            class="flex-1 rounded-md border border-border bg-background px-3 py-2 text-sm font-mono text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
-            @keydown="onPatternKeydown"
-          />
-          <button
-            type="button"
-            class="flex items-center gap-1.5 px-3 py-2 rounded-md border border-border text-sm font-medium text-muted-foreground hover:text-foreground hover:bg-muted transition-colors shrink-0"
-            :disabled="!newPattern.trim()"
-            @click="addPattern"
-          >
-            <Plus :size="13" />
-            {{ t('library.creator.scanner.excludePatterns.add') }}
-          </button>
-        </div>
-        <div class="min-h-[40px] rounded-md border border-border bg-muted/30 p-2 flex flex-wrap gap-1.5 overflow-y-auto" style="max-height: 80px">
-          <span v-if="excludePatterns.length === 0" class="text-xs text-muted-foreground self-center px-1">
-            {{ t('library.creator.scanner.excludePatterns.empty') }}
-          </span>
-          <span
-            v-for="(pattern, i) in excludePatterns"
-            :key="pattern"
-            class="flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-background border border-border text-xs font-mono text-foreground"
-          >
-            {{ pattern }}
-            <button
-              type="button"
-              class="text-muted-foreground hover:text-destructive transition-colors"
-              :aria-label="`Remove exclude pattern ${pattern}`"
-              @click="removePattern(i)"
-            >
-              <X :size="11" />
-            </button>
-          </span>
-        </div>
-      </div>
-    </div>
+    </LibraryCreatorCard>
   </div>
 </template>
diff --git a/client/src/features/library/components/LibraryCreatorSchedule.vue b/client/src/features/library/components/LibraryCreatorSchedule.vue
index 3426cbb1c..21fcd4404 100644
--- a/client/src/features/library/components/LibraryCreatorSchedule.vue
+++ b/client/src/features/library/components/LibraryCreatorSchedule.vue
@@ -1,13 +1,16 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { Eye } from '@lucide/vue'
+import { CalendarClock, Eye } from '@lucide/vue'
 import { isFiveFieldCronExpression } from '@bookorbit/types'
 import ToggleSwitch from '@/components/ui/ToggleSwitch.vue'
 import { parseCronToHuman } from '@/features/library/utils/cron'
 
 const { t, locale } = useI18n()
 
+const CUSTOM = '__custom__'
+const NEVER = '__never__'
+
 const props = withDefaults(
   defineProps<{
     watch: boolean
@@ -23,126 +26,105 @@ const emit = defineEmits<{
 }>()
 
 const presets = computed(() => [
-  { label: t('library.creator.schedule.presets.never'), value: null },
+  { label: t('library.creator.schedule.presets.never'), value: NEVER },
   { label: t('library.creator.schedule.presets.hourly'), value: '0 * * * *' },
   { label: t('library.creator.schedule.presets.every6Hours'), value: '0 */6 * * *' },
   { label: t('library.creator.schedule.presets.every12Hours'), value: '0 */12 * * *' },
   { label: t('library.creator.schedule.presets.daily'), value: '0 0 * * *' },
   { label: t('library.creator.schedule.presets.weekly'), value: '0 0 * * 1' },
-  { label: t('library.creator.schedule.presets.custom'), value: '__custom__' },
+  { label: t('library.creator.schedule.presets.custom'), value: CUSTOM },
 ])
 
-const isCustom = computed(() => {
-  if (props.autoScanCronExpression === null) return false
-  return !presets.value.some((p) => p.value === props.autoScanCronExpression)
-})
-
-const isCronValid = computed(() => {
-  if (!isCustom.value || !props.autoScanCronExpression) return true
-  return isFiveFieldCronExpression(props.autoScanCronExpression)
-})
-
 const selectedPreset = computed(() => {
-  if (props.autoScanCronExpression === null) return null
-  if (isCustom.value) return '__custom__'
-  return props.autoScanCronExpression
+  if (props.autoScanCronExpression === null) return NEVER
+  return presets.value.some((preset) => preset.value === props.autoScanCronExpression) ? props.autoScanCronExpression : CUSTOM
 })
+const isCustom = computed(() => selectedPreset.value === CUSTOM)
+const isCronValid = computed(() => !isCustom.value || !props.autoScanCronExpression || isFiveFieldCronExpression(props.autoScanCronExpression))
 
-function selectPreset(value: string | null) {
-  if (value === '__custom__') {
-    emit('update:autoScanCronExpression', '*/30 * * * *')
-  } else {
-    emit('update:autoScanCronExpression', value)
-  }
-}
-
-function handleWatchUpdate(value: boolean) {
-  emit('update:watch', value)
-}
-
-function handleCronInput(event: Event) {
-  emit('update:autoScanCronExpression', (event.target as HTMLInputElement).value || null)
-}
-
-function humanReadableCron(cron: string | null): string {
+const humanSchedule = computed(() => {
+  const cron = props.autoScanCronExpression
   if (!cron) return t('library.creator.schedule.human.disabled')
-  const map: Record<string, string> = {
+  const known: Record<string, string> = {
     '0 * * * *': t('library.creator.schedule.human.hourly'),
     '0 */6 * * *': t('library.creator.schedule.human.every6Hours'),
     '0 */12 * * *': t('library.creator.schedule.human.every12Hours'),
     '0 0 * * *': t('library.creator.schedule.human.dailyMidnight'),
     '0 0 * * 1': t('library.creator.schedule.human.weeklyMonday'),
   }
-  if (map[cron]) return map[cron]
+  if (known[cron]) return known[cron]
   const description = parseCronToHuman(cron, locale.value)
   return !description || description === cron ? t('library.creator.schedule.human.invalid') : description
+})
+
+function handleWatchUpdate(value: boolean) {
+  emit('update:watch', value)
+}
+
+function selectPreset(event: Event) {
+  const value = (event.target as HTMLSelectElement).value
+  if (value === NEVER) emit('update:autoScanCronExpression', null)
+  else if (value === CUSTOM) emit('update:autoScanCronExpression', '*/30 * * * *')
+  else emit('update:autoScanCronExpression', value)
+}
+
+function handleCronInput(event: Event) {
+  emit('update:autoScanCronExpression', (event.target as HTMLInputElement).value || null)
 }
 </script>
 
 <template>
-  <div class="px-6 py-6 space-y-8">
-    <!-- Watch folders -->
-    <div>
-      <p class="text-[11px] font-semibold uppercase tracking-widest text-foreground mb-3">{{ t('library.creator.schedule.fileWatching') }}</p>
-      <div class="overflow-hidden rounded-lg border border-border">
-        <div class="flex items-center justify-between gap-4 bg-card px-4 py-4 sm:px-5">
-          <div>
-            <p class="text-sm font-medium text-foreground">{{ t('library.creator.schedule.watchFolders.title') }}</p>
-            <p class="text-xs text-muted-foreground mt-0.5">{{ t('library.creator.schedule.watchFolders.hint') }}</p>
-          </div>
-          <ToggleSwitch :model-value="watch" :aria-label="t('library.creator.schedule.watchFolders.title')" @update:model-value="handleWatchUpdate" />
+  <section class="divide-y divide-border rounded-xl border border-border bg-card">
+    <div class="flex items-start gap-3.5 px-4 py-3.5">
+      <Eye :size="17" class="mt-0.5 shrink-0 text-foreground" aria-hidden="true" />
+      <div class="min-w-0 flex-1">
+        <p class="text-sm font-semibold text-foreground">{{ t('library.creator.schedule.watchFolders.title') }}</p>
+        <p class="mt-0.5 text-xs text-muted-foreground">{{ t('library.creator.schedule.watchFolders.hint') }}</p>
+      </div>
+      <ToggleSwitch :model-value="watch" :aria-label="t('library.creator.schedule.watchFolders.title')" @update:model-value="handleWatchUpdate" />
+    </div>
+
+    <div v-if="showAutoScanSchedule" class="flex items-start gap-3.5 px-4 py-3.5">
+      <CalendarClock :size="17" class="mt-0.5 shrink-0 text-foreground" aria-hidden="true" />
+      <div class="min-w-0 flex-1">
+        <label for="library-scan-preset" class="text-sm font-semibold text-foreground">{{ t('library.creator.schedule.autoScanSchedule') }}</label>
+        <div class="mt-2 flex flex-wrap items-center gap-x-3 gap-y-2">
+          <select
+            id="library-scan-preset"
+            :value="selectedPreset"
+            class="h-9 w-full rounded-md border border-input bg-background px-3 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-ring @md:w-48"
+            aria-describedby="library-scan-summary"
+            @change="selectPreset"
+          >
+            <option v-for="preset in presets" :key="preset.value" :value="preset.value">{{ preset.label }}</option>
+          </select>
+          <p id="library-scan-summary" class="flex items-center gap-1.5 text-xs text-muted-foreground" aria-live="polite">
+            <Eye :size="12" class="shrink-0" aria-hidden="true" />
+            {{ humanSchedule }}
+          </p>
         </div>
+
+        <div v-if="isCustom" class="mt-3">
+          <label for="library-scan-cron" class="mb-1.5 block text-xs font-medium text-muted-foreground">{{
+            t('library.creator.schedule.cronExpression')
+          }}</label>
+          <input
+            id="library-scan-cron"
+            type="text"
+            dir="ltr"
+            :value="autoScanCronExpression ?? ''"
+            placeholder="0 0 * * *"
+            class="h-9 w-full rounded-md border bg-background px-3 font-mono text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 @md:w-60"
+            :class="isCronValid ? 'border-input focus:ring-ring' : 'border-destructive focus:ring-destructive'"
+            :aria-invalid="!isCronValid"
+            aria-describedby="library-scan-cron-help"
+            @input="handleCronInput"
+          />
+          <p v-if="!isCronValid" id="library-scan-cron-help" class="mt-1 text-xs text-destructive">{{ t('library.creator.schedule.cronInvalid') }}</p>
+          <p v-else id="library-scan-cron-help" class="mt-1 text-xs text-muted-foreground">{{ t('library.creator.schedule.cronFormat') }}</p>
+        </div>
+        <p class="mt-2 text-xs text-muted-foreground">{{ t('library.creator.schedule.timezoneHint') }}</p>
       </div>
     </div>
-
-    <!-- Auto-scan schedule -->
-    <div v-if="showAutoScanSchedule">
-      <p class="text-[11px] font-semibold uppercase tracking-widest text-foreground mb-3">{{ t('library.creator.schedule.autoScanSchedule') }}</p>
-      <p class="mb-3 text-xs text-muted-foreground">{{ t('library.creator.schedule.timezoneHint') }}</p>
-      <div class="mb-4 grid grid-cols-2 gap-2 sm:grid-cols-3">
-        <button
-          v-for="preset in presets"
-          :key="String(preset.value)"
-          type="button"
-          class="px-3 py-2 rounded-lg border text-xs font-medium transition-colors"
-          :class="
-            selectedPreset === preset.value
-              ? 'border-primary bg-primary/10 text-primary'
-              : 'border-border text-muted-foreground hover:border-primary/40 hover:text-foreground'
-          "
-          @click="selectPreset(preset.value)"
-        >
-          {{ preset.label }}
-        </button>
-      </div>
-
-      <!-- Custom cron input -->
-      <div v-if="isCustom || selectedPreset === '__custom__'" class="mt-2">
-        <label for="library-scan-cron" class="mb-1.5 block text-xs font-medium text-muted-foreground">
-          {{ t('library.creator.schedule.cronExpression') }}
-        </label>
-        <input
-          id="library-scan-cron"
-          type="text"
-          :value="autoScanCronExpression ?? ''"
-          placeholder="0 0 * * *"
-          class="w-full rounded-md border bg-background px-3 py-2 text-sm font-mono text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2"
-          :class="isCronValid ? 'border-border focus:ring-ring' : 'border-destructive focus:ring-destructive'"
-          :aria-invalid="!isCronValid"
-          aria-describedby="library-scan-cron-help"
-          @input="handleCronInput"
-        />
-        <p v-if="!isCronValid" id="library-scan-cron-help" class="mt-1 text-xs text-destructive">
-          {{ t('library.creator.schedule.cronInvalid') }}
-        </p>
-        <p v-else id="library-scan-cron-help" class="mt-1 text-xs text-muted-foreground">{{ t('library.creator.schedule.cronFormat') }}</p>
-      </div>
-
-      <!-- Human readable preview -->
-      <div class="flex items-center gap-2 mt-3 text-xs text-muted-foreground">
-        <Eye :size="12" />
-        {{ humanReadableCron(autoScanCronExpression) }}
-      </div>
-    </div>
-  </div>
+  </section>
 </template>
diff --git a/client/src/features/library/components/LibraryOrganizationPreview.vue b/client/src/features/library/components/LibraryOrganizationPreview.vue
new file mode 100644
index 000000000..6811498ac
--- /dev/null
+++ b/client/src/features/library/components/LibraryOrganizationPreview.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { computed, type Component } from 'vue'
+import { FileAudio, FileText, Folder, Image } from '@lucide/vue'
+import type { OrganizationMode } from '@bookorbit/types'
+
+const props = defineProps<{ mode: OrganizationMode }>()
+
+interface TreeLine {
+  name: string
+  icon: Component
+  child: boolean
+  muted?: boolean
+}
+
+// Sample file names, not interface copy: they show the shape of a folder, so they stay untranslated.
+const lines = computed<TreeLine[]>(() =>
+  props.mode === 'book_per_folder'
+    ? [
+        { name: 'Dune/', icon: Folder, child: false },
+        { name: 'Dune.epub', icon: FileText, child: true },
+        { name: 'Dune.m4b', icon: FileAudio, child: true },
+        { name: 'cover.jpg', icon: Image, child: true, muted: true },
+      ]
+    : [
+        { name: 'Sci-Fi/', icon: Folder, child: false },
+        { name: 'Dune.epub', icon: FileText, child: true },
+        { name: 'Foundation.epub', icon: FileText, child: true },
+        { name: 'Hyperion.epub', icon: FileText, child: true },
+      ],
+)
+</script>
+
+<template>
+  <div class="rounded-lg border border-border bg-background px-2.5 py-2" dir="ltr" aria-hidden="true">
+    <div
+      v-for="line in lines"
+      :key="line.name"
+      class="flex h-5 items-center gap-1.5"
+      :class="[line.child ? 'ps-4' : '', line.muted ? 'text-muted-foreground' : 'text-foreground']"
+    >
+      <span v-if="line.child" class="-ms-2.5 -mt-2.5 h-2.5 w-2 shrink-0 rounded-es-sm border-b border-s border-border" />
+      <component :is="line.icon" :size="12" class="shrink-0" />
+      <span class="truncate font-mono text-[11.5px]">{{ line.name }}</span>
+    </div>
+  </div>
+</template>
diff --git a/client/src/features/library/components/__tests__/LibraryCreatorFileWrite.spec.ts b/client/src/features/library/components/__tests__/LibraryCreatorFileWrite.spec.ts
index 1d3e0ffa5..37cf7d569 100644
--- a/client/src/features/library/components/__tests__/LibraryCreatorFileWrite.spec.ts
+++ b/client/src/features/library/components/__tests__/LibraryCreatorFileWrite.spec.ts
@@ -27,18 +27,6 @@ describe('LibraryCreatorFileWrite', () => {
     })
   }
 
-  it('emits rename toggle updates and hides file-write detail controls when disabled', async () => {
-    const wrapper = mountComponent()
-
-    expect(wrapper.text()).toContain('Rename files after metadata changes')
-    expect(wrapper.text()).not.toContain('Include cover image')
-
-    const renameSwitch = wrapper.findAll('[role="switch"]')[0]
-    expect(renameSwitch).toBeDefined()
-    await renameSwitch!.trigger('click')
-    expect(wrapper.emitted('update:fileRenameEnabled')).toEqual([[true]])
-  })
-
   const ALL_ENABLED = {
     fileRenameEnabled: true,
     fileWriteEnabled: true,
@@ -57,26 +45,36 @@ describe('LibraryCreatorFileWrite', () => {
     fileWriteAudioMaxFileSizeMb: 40,
   }
 
-  function toggleByLabel(wrapper: ReturnType<typeof mountComponent>, label: string) {
-    const control = wrapper.findAll('[role="switch"]').find((node) => node.attributes('aria-label') === label)
-    if (!control) throw new Error(`no switch labelled "${label}"`)
-    return control.trigger('click')
+  function checkbox(wrapper: ReturnType<typeof mountComponent>, label: string) {
+    const control = wrapper.findAll('input[type="checkbox"]').find((node) => node.attributes('aria-label') === label)
+    if (!control) throw new Error(`no checkbox labelled "${label}"`)
+    return control
   }
 
-  it('emits an update for every format toggle', async () => {
+  it('emits the two switches and hides the per-format table while writing is off', async () => {
+    const wrapper = mountComponent()
+
+    expect(wrapper.text()).toContain('Rename files after metadata changes')
+    expect(wrapper.text()).not.toContain('Include cover image')
+    const switches = wrapper.findAll('[role="switch"]')
+    expect(switches).toHaveLength(2)
+
+    await switches[0]!.trigger('click')
+    await switches[1]!.trigger('click')
+    expect(wrapper.emitted('update:fileRenameEnabled')).toEqual([[true]])
+    expect(wrapper.emitted('update:fileWriteEnabled')).toEqual([[true]])
+  })
+
+  it('emits an update for every format checkbox', async () => {
     const wrapper = mountComponent(ALL_ENABLED)
 
-    expect(wrapper.findAll('[role="switch"]')).toHaveLength(9)
+    await checkbox(wrapper, 'Write EPUB metadata').setValue(false)
+    await checkbox(wrapper, 'Write FB2 metadata').setValue(false)
+    await checkbox(wrapper, 'Write PDF metadata').setValue(false)
+    await checkbox(wrapper, 'Write comic archive metadata').setValue(false)
+    await checkbox(wrapper, 'Write Kindle metadata').setValue(false)
+    await checkbox(wrapper, 'Write audio covers').setValue(false)
 
-    await toggleByLabel(wrapper, 'Write metadata to files')
-    await toggleByLabel(wrapper, 'Write EPUB metadata')
-    await toggleByLabel(wrapper, 'Write FB2 metadata')
-    await toggleByLabel(wrapper, 'Write PDF metadata')
-    await toggleByLabel(wrapper, 'Write comic archive metadata')
-    await toggleByLabel(wrapper, 'Write Kindle metadata')
-    await toggleByLabel(wrapper, 'Write audio covers')
-
-    expect(wrapper.emitted('update:fileWriteEnabled')).toEqual([[false]])
     expect(wrapper.emitted('update:fileWriteEpubEnabled')).toEqual([[false]])
     expect(wrapper.emitted('update:fileWriteFb2Enabled')).toEqual([[false]])
     expect(wrapper.emitted('update:fileWritePdfEnabled')).toEqual([[false]])
@@ -88,8 +86,7 @@ describe('LibraryCreatorFileWrite', () => {
   it('emits max-size updates for every format', async () => {
     const wrapper = mountComponent(ALL_ENABLED)
 
-    const inputs = wrapper.findAll('input[type="number"]')
-    expect(inputs).toHaveLength(6)
+    expect(wrapper.findAll('input[type="number"]')).toHaveLength(6)
 
     await wrapper.find('#epub-max-size').setValue('15')
     await wrapper.find('#fb2-max-size').setValue('65')
@@ -106,71 +103,36 @@ describe('LibraryCreatorFileWrite', () => {
     expect(wrapper.emitted('update:fileWriteAudioMaxFileSizeMb')).toEqual([[45]])
   })
 
-  it('hides the FB2 size input until the FB2 toggle is on', () => {
-    const off = mountComponent({ fileWriteEnabled: true, fileWriteFb2Enabled: false })
-    expect(off.text()).toContain('FictionBook (FB2)')
-    expect(off.find('#fb2-max-size').exists()).toBe(false)
-
-    const on = mountComponent({ fileWriteEnabled: true, fileWriteFb2Enabled: true })
-    expect(on.find('#fb2-max-size').exists()).toBe(true)
-    expect(on.find('#fb2-max-size').attributes('value')).toBe('100')
-  })
-
-  it('shows FB2 controls independently of the cover-writing toggle', () => {
-    const wrapper = mountComponent({ fileWriteEnabled: true, fileWriteWriteCover: false, fileWriteFb2Enabled: true })
+  it('keeps a size limit visible but disabled while its format is off', () => {
+    const wrapper = mountComponent({ fileWriteEnabled: true, fileWriteFb2Enabled: false })
 
     expect(wrapper.text()).toContain('FictionBook (FB2)')
-    expect(wrapper.find('#fb2-max-size').exists()).toBe(true)
+    expect(wrapper.get('#fb2-max-size').attributes('disabled')).toBeDefined()
+    expect(wrapper.get('#fb2-max-size').attributes('aria-label')).toBe('FictionBook (FB2) size limit in MB')
   })
 
-  it('hides the FB2 card until file writing is enabled', () => {
-    expect(mountComponent({ fileWriteEnabled: false, fileWriteFb2Enabled: true }).text()).not.toContain('FictionBook (FB2)')
-  })
+  it('explains why audio is unavailable without the cover image', () => {
+    const wrapper = mountComponent({ fileWriteEnabled: true, fileWriteWriteCover: false, fileWriteAudioEnabled: true })
 
-  it('hides the Kindle size input until the Kindle toggle is on', () => {
-    const off = mountComponent({ fileWriteEnabled: true, fileWriteKindleEnabled: false })
-    expect(off.text()).toContain('Kindle (MOBI, AZW3)')
-    expect(off.find('#kindle-max-size').exists()).toBe(false)
-
-    const on = mountComponent({ fileWriteEnabled: true, fileWriteKindleEnabled: true })
-    expect(on.find('#kindle-max-size').exists()).toBe(true)
-  })
-
-  it('shows Kindle controls independently of the cover-writing toggle', () => {
-    const wrapper = mountComponent({ fileWriteEnabled: true, fileWriteWriteCover: false, fileWriteKindleEnabled: true })
-
-    expect(wrapper.text()).toContain('Kindle (MOBI, AZW3)')
-    expect(wrapper.text()).not.toContain('Audio')
-  })
-
-  it('gives the Kindle toggle an accessible label', () => {
-    const wrapper = mountComponent({ fileWriteEnabled: true })
-
-    expect(wrapper.findAll('[role="switch"]').some((node) => node.attributes('aria-label') === 'Write Kindle metadata')).toBe(true)
-  })
-
-  it('renders audio controls only when file write details and cover writing are enabled', () => {
-    const hidden = mountComponent({ fileWriteEnabled: false, fileWriteAudioEnabled: true })
-    expect(hidden.text()).not.toContain('Audio')
-
-    const coverDisabled = mountComponent({ fileWriteEnabled: true, fileWriteWriteCover: false, fileWriteAudioEnabled: true })
-    expect(coverDisabled.text()).not.toContain('Audio')
-
-    const visible = mountComponent({ fileWriteEnabled: true, fileWriteWriteCover: true, fileWriteAudioEnabled: true })
-    expect(visible.text()).toContain('Audio')
-    expect(visible.text()).toContain('M4B, M4A, MP3, and FLAC')
+    const audio = checkbox(wrapper, 'Write audio covers')
+    expect(audio.attributes('disabled')).toBeDefined()
+    expect((audio.element as HTMLInputElement).checked).toBe(false)
+    expect(wrapper.text()).toContain('Needs “Include cover image” turned on.')
   })
 
   it('disables audio embedding when cover writing is turned off', async () => {
-    const wrapper = mountComponent({
-      fileWriteEnabled: true,
-      fileWriteWriteCover: true,
-      fileWriteAudioEnabled: true,
-    })
+    const wrapper = mountComponent({ fileWriteEnabled: true, fileWriteWriteCover: true, fileWriteAudioEnabled: true })
 
-    await wrapper.findAll('[role="switch"]')[2]!.trigger('click')
+    await wrapper.findAll('input[type="checkbox"]')[0]!.setValue(false)
 
     expect(wrapper.emitted('update:fileWriteWriteCover')).toEqual([[false]])
     expect(wrapper.emitted('update:fileWriteAudioEnabled')).toEqual([[false]])
   })
+
+  it('counts the books each writer would touch when counts are known', () => {
+    const wrapper = mountComponent({ fileWriteEnabled: true, formatCounts: { mobi: 24, azw3: 35, epub: 378 } })
+
+    const kindle = wrapper.findAll('li').find((row) => row.text().includes('Kindle'))!
+    expect(kindle.text()).toContain('59')
+  })
 })
diff --git a/client/src/features/library/components/__tests__/LibraryCreatorFolders.spec.ts b/client/src/features/library/components/__tests__/LibraryCreatorFolders.spec.ts
index 791262f74..49898ea02 100644
--- a/client/src/features/library/components/__tests__/LibraryCreatorFolders.spec.ts
+++ b/client/src/features/library/components/__tests__/LibraryCreatorFolders.spec.ts
@@ -1,31 +1,70 @@
 import { mount } from '@vue/test-utils'
 import { describe, expect, it } from 'vitest'
+import type { LibraryStats } from '@bookorbit/types'
+import type { FolderCheck } from '../../composables/useLibraryCreator'
 import LibraryCreatorFolders from '../LibraryCreatorFolders.vue'
 
 describe('LibraryCreatorFolders', () => {
-  it('adds manual paths without a separate test request', async () => {
+  it('adds a pasted path from the always-visible path field', async () => {
     const wrapper = mountFolders()
 
-    await buttonByText(wrapper, 'Enter a path manually').trigger('click')
     await wrapper.get('#manual-folder-path').setValue('/books/fiction')
     await wrapper.get('form').trigger('submit')
 
     expect(wrapper.emitted('update:folders')).toEqual([[['/books/fiction']]])
-    expect(wrapper.text()).not.toContain('Test path')
   })
 
-  it('presents validation results beside each selected folder', () => {
+  it('rejects a relative path with a message tied to the field', async () => {
+    const wrapper = mountFolders()
+
+    await wrapper.get('#manual-folder-path').setValue('books')
+    await wrapper.get('form').trigger('submit')
+
+    expect(wrapper.emitted('update:folders')).toBeUndefined()
+    expect(wrapper.get('#manual-folder-error').text()).toBe('Enter an absolute server path beginning with /.')
+    expect(wrapper.get('#manual-folder-path').attributes('aria-describedby')).toBe('manual-folder-error')
+  })
+
+  it('shows each folder check beside its folder', () => {
     const wrapper = mountFolders({
-      folders: ['/books'],
-      prescanResult: {
-        totalFiles: 1250,
-        paths: [{ path: '/books', accessible: true, fileCount: 1250 }],
+      folders: ['/books/fantasy', '/books/comics', '/books/missing', '/books/new'],
+      checks: {
+        '/books/fantasy': { state: 'checked', accessible: true, fileCount: 1250 },
+        '/books/comics': { state: 'checked', accessible: true, fileCount: 11, overlapLibrary: 'Comics' },
+        '/books/missing': { state: 'checked', accessible: false, fileCount: 0 },
+        '/books/new': { state: 'checking' },
       },
     })
 
-    expect(wrapper.text()).toContain('Accessible')
-    expect(wrapper.text()).toContain('Accessible · 1,250 files')
-    expect(wrapper.text()).toContain('1,250 matching files across 1 folder.')
+    const rows = wrapper.findAll('li')
+    expect(rows[0]!.text()).toContain('1,250 files')
+    expect(rows[1]!.text()).toContain('Also in Comics')
+    expect(rows[2]!.text()).toContain('Not accessible')
+    expect(rows[3]!.text()).toContain('Checking')
+    expect(wrapper.text()).toContain('1,261 matching files')
+  })
+
+  it('bolds the folder name and keeps the parent path quiet', () => {
+    const wrapper = mountFolders({ folders: ['/mnt/media/books/Novels'] })
+    const path = wrapper.get('li p')
+
+    expect(path.findAll('span').map((span) => span.text())).toEqual(['/mnt/media/books/', 'Novels'])
+  })
+
+  it('asks for a recheck of one folder after a failed check', async () => {
+    const wrapper = mountFolders({ folders: ['/books'], checks: { '/books': { state: 'failed' } } })
+
+    await wrapper.get('button[aria-label="Check /books again"]').trigger('click')
+
+    expect(wrapper.emitted('check')).toEqual([[['/books']]])
+  })
+
+  it('shows what an existing library holds before any folder is rechecked', () => {
+    const stats: LibraryStats = { totalBooks: 455, totalSizeBytes: 787_300_000, formatCounts: { epub: 378, pdf: 6 } }
+    const wrapper = mountFolders({ folders: ['/books'], stats })
+
+    expect(wrapper.text()).toContain('455 books')
+    expect(wrapper.text()).toContain('EPUB')
   })
 
   it('offers existing podcast folders only for podcast libraries', () => {
@@ -33,6 +72,14 @@ describe('LibraryCreatorFolders', () => {
     expect(mountFolders({ libraryType: 'podcasts' }).text()).toContain('Existing podcast folders')
   })
 
+  it('stops offering to add once a podcast library has its storage folder', () => {
+    expect(
+      mountFolders({ libraryType: 'podcasts', folders: ['/podcasts'] })
+        .find('#manual-folder-path')
+        .exists(),
+    ).toBe(false)
+  })
+
   it('reports the podcast local folders it was given as removable rows', () => {
     const wrapper = mountFolders({ libraryType: 'podcasts', folders: ['/podcasts'], localFolders: ['/archive/shows'] })
 
@@ -46,16 +93,17 @@ function mountFolders(
     folders?: string[]
     localFolders?: string[]
     libraryType?: 'books' | 'podcasts'
-    prescanResult?: { totalFiles: number; paths: { path: string; accessible: boolean; fileCount: number }[] } | null
+    checks?: Record<string, FolderCheck>
+    stats?: LibraryStats | null
   } = {},
 ) {
   return mount(LibraryCreatorFolders, {
     props: {
       folders: props.folders ?? [],
       localFolders: props.localFolders ?? [],
-      prescanResult: props.prescanResult ?? null,
-      prescanLoading: false,
       libraryType: props.libraryType ?? 'books',
+      checks: props.checks ?? {},
+      stats: props.stats ?? null,
     },
     global: {
       stubs: {
@@ -64,9 +112,3 @@ function mountFolders(
     },
   })
 }
-
-function buttonByText(wrapper: ReturnType<typeof mountFolders>, text: string) {
-  const button = wrapper.findAll('button').find((candidate) => candidate.text().includes(text))
-  if (!button) throw new Error(`Button not found: ${text}`)
-  return button
-}
diff --git a/client/src/features/library/components/__tests__/LibraryCreatorMetadata.spec.ts b/client/src/features/library/components/__tests__/LibraryCreatorMetadata.spec.ts
index 047e1f5b2..8ebe83533 100644
--- a/client/src/features/library/components/__tests__/LibraryCreatorMetadata.spec.ts
+++ b/client/src/features/library/components/__tests__/LibraryCreatorMetadata.spec.ts
@@ -5,40 +5,94 @@ import { READ_ALONG_FORMAT_PRIORITY } from '@bookorbit/types'
 import { i18n } from '@/i18n'
 import LibraryCreatorMetadata from '../LibraryCreatorMetadata.vue'
 
-function mountMetadata(formatPriority: string[]) {
+function mountMetadata(props: {
+  formatPriority: string[]
+  formatCounts?: Record<string, number> | null
+  metadataPrecedence?: string[]
+  allowedFormats?: string[]
+}) {
   return mount(LibraryCreatorMetadata, {
-    props: { metadataPrecedence: ['embedded'], formatPriority },
+    props: { metadataPrecedence: ['embedded', 'opfFile'], ...props },
   })
 }
 
+function rowCodes(wrapper: ReturnType<typeof mountMetadata>): string[] {
+  return wrapper.findAll('ol[aria-labelledby="primary-file-title"] > li').map((row) => row.findAll('span')[2]!.text())
+}
+
 describe('LibraryCreatorMetadata', () => {
   beforeEach(() => {
     i18n.global.locale.value = 'en'
   })
 
   it('shows the read-along entry as an EPUB row marked with headphones', () => {
-    const wrapper = mountMetadata([READ_ALONG_FORMAT_PRIORITY, 'm4b', 'epub'])
-    const formatRows = wrapper.findAll('[draggable="true"]').slice(1)
+    const wrapper = mountMetadata({ formatPriority: [READ_ALONG_FORMAT_PRIORITY, 'm4b', 'epub'] })
+    const rows = wrapper.findAll('ol[aria-labelledby="primary-file-title"] > li')
 
-    expect(formatRows.map((row) => row.find('.font-mono').text())).toEqual(['EPUB', 'M4B', 'EPUB'])
-    expect(formatRows[0]!.find('.font-mono svg').exists()).toBe(true)
-    expect(formatRows[2]!.find('.font-mono svg').exists()).toBe(false)
-    expect(formatRows[0]!.text()).toContain('Read-along EPUB')
-    expect(formatRows[2]!.text()).toContain('EPUB e-book')
+    expect(rowCodes(wrapper)).toEqual(['EPUB', 'M4B', 'EPUB'])
+    expect(rows[0]!.find('svg.lucide-headphones-icon, svg[class*="headphones"]').exists()).toBe(true)
+    expect(rows[0]!.text()).toContain('Read-along EPUB')
+    expect(rows[2]!.text()).toContain('EPUB e-book')
   })
 
-  it('labels move controls with the translated format name', () => {
-    const wrapper = mountMetadata([READ_ALONG_FORMAT_PRIORITY, 'm4b', 'epub'])
+  it('ranks only the formats the library holds, with their counts', () => {
+    const wrapper = mountMetadata({
+      formatPriority: ['epub', 'kepub', 'pdf', 'cbz', 'mobi', 'azw3', 'fb2', 'm4b'],
+      formatCounts: { epub: 378, azw3: 35, mobi: 24, fb2: 12, pdf: 6 },
+    })
 
-    expect(wrapper.find('button[aria-label="Move Read-along EPUB down"]').exists()).toBe(true)
-    expect(wrapper.find('button[aria-label="Move M4B audiobook up"]').exists()).toBe(true)
+    expect(rowCodes(wrapper)).toEqual(['EPUB', 'PDF', 'MOBI', 'AZW3', 'FB2'])
+    expect(wrapper.text()).toContain('378')
+    expect(wrapper.text()).toContain('3 formats this library does not hold keep their default order after these.')
+  })
+
+  it('reveals the rest of the order on request', async () => {
+    const wrapper = mountMetadata({ formatPriority: ['epub', 'kepub', 'pdf', 'cbz'], formatCounts: { epub: 3 } })
+
+    await wrapper
+      .findAll('button')
+      .find((button) => button.text() === 'Show all 4')!
+      .trigger('click')
+
+    expect(rowCodes(wrapper)).toEqual(['EPUB', 'KEPUB', 'PDF', 'CBZ'])
+  })
+
+  it('moves among the visible rows even when hidden formats sit between them', async () => {
+    const wrapper = mountMetadata({ formatPriority: ['epub', 'kepub', 'pdf', 'mobi'], formatCounts: { epub: 3, mobi: 2 } })
+
+    await wrapper.find('button[aria-label="Move MOBI e-book up"]').trigger('click')
+
+    expect(wrapper.emitted('update:formatPriority')).toEqual([[['mobi', 'epub', 'kepub', 'pdf']]])
   })
 
   it('moves the read-along entry like any other format', async () => {
-    const wrapper = mountMetadata([READ_ALONG_FORMAT_PRIORITY, 'm4b', 'epub'])
+    const wrapper = mountMetadata({ formatPriority: [READ_ALONG_FORMAT_PRIORITY, 'm4b', 'epub'] })
 
     await wrapper.find('button[aria-label="Move Read-along EPUB down"]').trigger('click')
 
     expect(wrapper.emitted('update:formatPriority')).toEqual([[['m4b', READ_ALONG_FORMAT_PRIORITY, 'epub']]])
   })
+
+  it('marks formats that are not imported', () => {
+    const wrapper = mountMetadata({ formatPriority: ['epub', 'pdf'], allowedFormats: ['epub'] })
+
+    expect(wrapper.findAll('ol[aria-labelledby="primary-file-title"] > li')[1]!.text()).toContain('Not imported')
+  })
+
+  it('swaps which source is read first', async () => {
+    const wrapper = mountMetadata({ formatPriority: ['epub'] })
+
+    await wrapper.get('button[aria-label="Swap the order"]').trigger('click')
+
+    expect(wrapper.emitted('update:metadataPrecedence')).toEqual([[['opfFile', 'embedded']]])
+  })
+
+  it('fills in a source missing from an older saved list before swapping', async () => {
+    const wrapper = mountMetadata({ formatPriority: ['epub'], metadataPrecedence: ['embedded'] })
+
+    expect(wrapper.text()).toContain('metadata.opf file')
+    await wrapper.get('button[aria-label="Swap the order"]').trigger('click')
+
+    expect(wrapper.emitted('update:metadataPrecedence')).toEqual([[['opfFile', 'embedded']]])
+  })
 })
diff --git a/client/src/features/library/components/__tests__/LibraryCreatorModal.spec.ts b/client/src/features/library/components/__tests__/LibraryCreatorModal.spec.ts
index eb5f4d98b..76cfa3465 100644
--- a/client/src/features/library/components/__tests__/LibraryCreatorModal.spec.ts
+++ b/client/src/features/library/components/__tests__/LibraryCreatorModal.spec.ts
@@ -1,106 +1,240 @@
-import { flushPromises, mount, shallowMount } from '@vue/test-utils'
-import { afterEach, describe, expect, it, vi } from 'vitest'
+import { flushPromises, mount, shallowMount, type VueWrapper } from '@vue/test-utils'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import type { Library } from '@bookorbit/types'
+import { i18n } from '@/i18n'
 import { useLibraryCreator } from '../../composables/useLibraryCreator'
-import LibraryCreatorScanner from '../LibraryCreatorScanner.vue'
 import LibraryCreatorDetails from '../LibraryCreatorDetails.vue'
+import LibraryCreatorFolders from '../LibraryCreatorFolders.vue'
 import LibraryCreatorModal from '../LibraryCreatorModal.vue'
+import LibraryCreatorScanner from '../LibraryCreatorScanner.vue'
 import LibraryCreatorSchedule from '../LibraryCreatorSchedule.vue'
 
 const apiMock = vi.hoisted(() => vi.fn<(input: RequestInfo | URL, init?: RequestInit) => Promise<Response>>())
 
 vi.mock('@/lib/api', () => ({ api: apiMock }))
 
+/** The editor reads the viewport to decide between the section rail and the drill-in list. */
+function stubViewport(wide: boolean) {
+  window.matchMedia = vi.fn<(query: string) => unknown>().mockImplementation((query: string) => ({
+    matches: query.includes('min-width') ? wide : !wide,
+    media: query,
+    onchange: null,
+    addEventListener: vi.fn<() => void>(),
+    removeEventListener: vi.fn<() => void>(),
+    addListener: vi.fn<() => void>(),
+    removeListener: vi.fn<() => void>(),
+    dispatchEvent: vi.fn<() => void>(),
+  })) as unknown as typeof window.matchMedia
+}
+
+function jsonResponse(body: unknown, status = 200): Response {
+  return new Response(JSON.stringify(body), { status, headers: { 'Content-Type': 'application/json' } })
+}
+
+function makeLibrary(overrides: Partial<Library> = {}): Library {
+  return {
+    ...useLibraryCreator().form,
+    id: 9,
+    name: 'Fantasy',
+    icon: 'Swords',
+    folders: [{ id: 1, path: '/books', role: 'downloads', createdAt: '2026-01-01T00:00:00.000Z' }],
+    createdAt: '2026-01-01T00:00:00.000Z',
+    updatedAt: '2026-01-01T00:00:00.000Z',
+    ...overrides,
+  } as unknown as Library
+}
+
+function navButton(wrapper: VueWrapper, label: string) {
+  const button = wrapper.findAll('nav button').find((candidate) => candidate.text().startsWith(label))
+  if (!button) throw new Error(`No section named ${label}`)
+  return button
+}
+
+function footerButton(wrapper: VueWrapper, label: string) {
+  const button = wrapper.findAll('footer button').find((candidate) => candidate.text().includes(label))
+  if (!button) throw new Error(`No footer button named ${label}`)
+  return button
+}
+
+async function mountCreator(props: Record<string, unknown> = {}, stubs: Record<string, unknown> = {}) {
+  const wrapper = shallowMount(LibraryCreatorModal, { props, attachTo: document.body, global: { stubs: { teleport: true, ...stubs } } })
+  await flushPromises()
+  return wrapper
+}
+
 describe('LibraryCreatorModal', () => {
+  beforeEach(() => {
+    i18n.global.locale.value = 'en'
+    stubViewport(true)
+    apiMock.mockImplementation(async () => jsonResponse(null))
+  })
+
   afterEach(() => {
     document.body.innerHTML = ''
     apiMock.mockReset()
     vi.restoreAllMocks()
   })
 
-  it('uses fetched saved settings for delegated managers whose library list omits the source', async () => {
-    const full = { ...useLibraryCreator().form, id: 7, name: 'Library', icon: 'BookOpen', folders: [], addedAtSource: 'file_created' }
-    apiMock.mockImplementation(
-      async (url) => ({ ok: true, json: async () => (String(url).endsWith('recompute-added-at') ? null : full) }) as Response,
-    )
-    const listEntry = { id: 7, name: 'Library', folders: [], coverAspectRatio: '2/3' } as unknown as Library
-    const wrapper = shallowMount(LibraryCreatorModal, { props: { library: listEntry }, global: { stubs: { teleport: true } } })
-    await flushPromises()
-    await wrapper
-      .findAll('nav button')
-      .find((button) => button.text().includes('Scanning'))!
-      .trigger('click')
-    const scanner = wrapper.getComponent(LibraryCreatorScanner)
-    expect(scanner.props('addedAtSource')).toBe('file_created')
-    expect(scanner.props('storedAddedAtSource')).toBe('file_created')
-    wrapper.unmount()
-  })
-
-  it('renders an accessible responsive dialog with required setup identified', async () => {
-    const wrapper = shallowMount(LibraryCreatorModal, {
-      attachTo: document.body,
-      global: { stubs: { teleport: true } },
-    })
-    await flushPromises()
+  it('renders an accessible sheet that names what a new library still needs', async () => {
+    const wrapper = await mountCreator()
 
     const dialog = wrapper.get('[role="dialog"]')
     expect(dialog.attributes('aria-modal')).toBe('true')
     expect(dialog.attributes('aria-labelledby')).toBe('library-creator-title')
-    expect(wrapper.get('#library-creator-title').text()).toBe('Create a library')
-    expect(wrapper.text()).toContain('Required')
+    expect(wrapper.get('#library-creator-title').text()).toBe('New library')
     expect(wrapper.get('button[aria-label="Close library creator"]')).toBeTruthy()
-
+    expect(navButton(wrapper, 'Library').text()).toContain('Needs a name')
+    expect(navButton(wrapper, 'Folders').text()).toContain('Needs a folder')
+    expect(footerButton(wrapper, 'Create library').attributes('disabled')).toBeDefined()
     wrapper.unmount()
   })
 
-  it('unlocks the folder step after valid details are entered', async () => {
-    const wrapper = shallowMount(LibraryCreatorModal, {
-      attachTo: document.body,
-      global: { stubs: { teleport: true } },
-    })
-    await flushPromises()
+  it('offers every section while creating, with no step order to follow', async () => {
+    const wrapper = await mountCreator()
+
+    await navButton(wrapper, 'Metadata').trigger('click')
+
+    expect(wrapper.find('main').text()).toContain('Which file leads when a book has several')
+    wrapper.unmount()
+  })
+
+  it('checks a folder as soon as it is added and enables create once the essentials are in', async () => {
+    apiMock.mockImplementation(async (url) =>
+      String(url).endsWith('/prescan')
+        ? jsonResponse({ paths: [{ path: '/books', accessible: true, fileCount: 1284 }], totalFiles: 1284 })
+        : jsonResponse(null),
+    )
+    const wrapper = await mountCreator()
 
     const details = wrapper.getComponent(LibraryCreatorDetails)
-    details.vm.$emit('update:name', 'Main Library')
-    details.vm.$emit('update:icon', 'BookOpen')
-    await wrapper.vm.$nextTick()
-
-    const continueButton = wrapper.findAll('button').find((button) => button.text().includes('Continue'))
-    expect(continueButton?.attributes('disabled')).toBeUndefined()
-    await continueButton?.trigger('click')
-    expect(wrapper.text()).toContain('Choose the server folders used by this library.')
+    details.vm.$emit('update:name', 'Fantasy')
+    details.vm.$emit('update:icon', 'Swords')
+    await navButton(wrapper, 'Folders').trigger('click')
+    wrapper.getComponent(LibraryCreatorFolders).vm.$emit('update:folders', ['/books'])
+    await flushPromises()
 
+    expect(apiMock).toHaveBeenCalledWith('/api/v1/libraries/prescan', expect.objectContaining({ body: JSON.stringify({ paths: ['/books'] }) }))
+    expect(navButton(wrapper, 'Folders').text()).toContain('1 folder · 1,284 files')
+    expect(footerButton(wrapper, 'Create library').attributes('disabled')).toBeUndefined()
     wrapper.unmount()
   })
 
-  it('shows required-field validation only after continuing', async () => {
-    const wrapper = shallowMount(LibraryCreatorModal, {
-      attachTo: document.body,
-      global: { stubs: { teleport: true } },
-    })
-    await flushPromises()
+  it('asks in the footer before discarding changes, instead of a browser dialog', async () => {
+    const confirmSpy = vi.spyOn(window, 'confirm')
+    const wrapper = await mountCreator()
 
-    expect(wrapper.find('[role="alert"]').exists()).toBe(false)
-    const continueButton = wrapper.findAll('button').find((button) => button.text().includes('Continue'))
-    await continueButton?.trigger('click')
+    wrapper.getComponent(LibraryCreatorDetails).vm.$emit('update:name', 'Draft')
+    await wrapper.vm.$nextTick()
+    await footerButton(wrapper, 'Cancel').trigger('click')
 
-    expect(wrapper.get('[role="alert"]').text()).toContain('Enter a library name.')
+    expect(wrapper.get('footer').text()).toContain('Discard your unsaved changes?')
+    expect(wrapper.emitted('close')).toBeUndefined()
+    await footerButton(wrapper, 'Discard').trigger('click')
+
+    expect(wrapper.emitted('close')).toEqual([[]])
+    expect(confirmSpy).not.toHaveBeenCalled()
+    wrapper.unmount()
+  })
+
+  it('uses fetched saved settings for delegated managers whose library list omits the source', async () => {
+    const full = { ...makeLibrary({ id: 7, name: 'Library' }), addedAtSource: 'file_created' }
+    apiMock.mockImplementation(async (url) => jsonResponse(String(url).endsWith('/libraries/7') ? full : null))
+    const listEntry = { id: 7, name: 'Library', folders: [], coverAspectRatio: '2/3' } as unknown as Library
+
+    const wrapper = await mountCreator({ library: listEntry })
+    await navButton(wrapper, 'Scanning').trigger('click')
+
+    const scanner = wrapper.getComponent(LibraryCreatorScanner)
+    expect(scanner.props('addedAtSource')).toBe('file_created')
+    expect(scanner.props('storedAddedAtSource')).toBe('file_created')
+    expect(scanner.props('organizationModeLocked')).toBe(true)
+    wrapper.unmount()
+  })
+
+  it('keeps save disabled until something changes while editing', async () => {
+    const library = makeLibrary()
+    apiMock.mockImplementation(async (url) => jsonResponse(String(url).endsWith('/libraries/9') ? library : null))
+    const wrapper = await mountCreator({ library })
+
+    expect(footerButton(wrapper, 'Save changes').attributes('disabled')).toBeDefined()
+    wrapper.getComponent(LibraryCreatorDetails).vm.$emit('update:name', 'Epic Fantasy')
+    await wrapper.vm.$nextTick()
+
+    expect(footerButton(wrapper, 'Save changes').attributes('disabled')).toBeUndefined()
+    expect(wrapper.text()).toContain('Unsaved')
     wrapper.unmount()
   })
 
   it('clamps attempted podcast creation to a book library', async () => {
-    const wrapper = shallowMount(LibraryCreatorModal, {
-      attachTo: document.body,
-      global: { stubs: { teleport: true } },
-    })
-    await flushPromises()
+    const wrapper = await mountCreator()
 
     const details = wrapper.getComponent(LibraryCreatorDetails)
     details.vm.$emit('update:type', 'podcasts')
     await wrapper.vm.$nextTick()
 
     expect(details.props('type')).toBe('books')
+    wrapper.unmount()
+  })
 
+  it('shows sections as a drill-in list on narrow screens', async () => {
+    stubViewport(false)
+    const wrapper = await mountCreator()
+
+    expect(wrapper.find('nav').exists()).toBe(false)
+    const entry = wrapper.findAll('main button').find((button) => button.text().startsWith('Reading'))!
+    await entry.trigger('click')
+
+    expect(wrapper.get('#library-creator-title').text()).toBe('Reading')
+    expect(wrapper.find('button[aria-label="Back"]').exists()).toBe(true)
+    wrapper.unmount()
+  })
+
+  it('grants queued access after creating, and stays open on Access when a grant fails', async () => {
+    const created = makeLibrary()
+    apiMock.mockImplementation(async (url, init) => {
+      const path = String(url)
+      const method = init?.method ?? 'GET'
+      if (path.endsWith('/users/assignable')) {
+        return jsonResponse([
+          { id: 2, username: 'maya', name: 'Maya Ortiz' },
+          { id: 3, username: 'sam', name: 'Sam Whitfield' },
+        ])
+      }
+      if (path.endsWith('/prescan')) return jsonResponse({ paths: [{ path: '/books', accessible: true, fileCount: 3 }], totalFiles: 3 })
+      if (path === '/api/v1/libraries' && method === 'POST') return jsonResponse(created)
+      if (path === '/api/v1/libraries/9/access' && method === 'POST') {
+        const body = JSON.parse(String(init?.body)) as { userId: number }
+        return body.userId === 2 ? jsonResponse({}) : jsonResponse({ message: 'nope' }, 500)
+      }
+      if (path === '/api/v1/libraries/9/access') return jsonResponse([{ userId: 2, username: 'maya', name: 'Maya Ortiz', accessLevel: 'viewer' }])
+      return jsonResponse(null)
+    })
+    const wrapper = await mountCreator({}, { LibraryCreatorAccess: false, LibraryCreatorCard: false })
+
+    const details = wrapper.getComponent(LibraryCreatorDetails)
+    details.vm.$emit('update:name', 'Fantasy')
+    details.vm.$emit('update:icon', 'Swords')
+    await navButton(wrapper, 'Folders').trigger('click')
+    wrapper.getComponent(LibraryCreatorFolders).vm.$emit('update:folders', ['/books'])
+    await navButton(wrapper, 'Access').trigger('click')
+    await flushPromises()
+
+    for (const userId of ['2', '3']) {
+      await wrapper.get('#library-access-user').setValue(userId)
+      await wrapper.get('main form').trigger('submit')
+    }
+    expect(navButton(wrapper, 'Access').text()).toContain('2 people to add')
+
+    await footerButton(wrapper, 'Create library').trigger('click')
+    await flushPromises()
+
+    expect(wrapper.emitted('saved')).toBeUndefined()
+    expect(wrapper.get('[role="alert"]').text()).toContain('1 person could not be added')
+    expect(wrapper.get('[role="alert"]').text()).toContain('Sam Whitfield')
+    expect(wrapper.get('#library-creator-title').text()).toBe('Fantasy')
+
+    await footerButton(wrapper, 'Done').trigger('click')
+    expect(wrapper.emitted('saved')).toEqual([[created]])
     wrapper.unmount()
   })
 
diff --git a/client/src/features/library/components/__tests__/LibraryCreatorReading.spec.ts b/client/src/features/library/components/__tests__/LibraryCreatorReading.spec.ts
index a2655a1c2..760b0e59c 100644
--- a/client/src/features/library/components/__tests__/LibraryCreatorReading.spec.ts
+++ b/client/src/features/library/components/__tests__/LibraryCreatorReading.spec.ts
@@ -3,17 +3,70 @@ import { describe, expect, it } from 'vitest'
 
 import LibraryCreatorReading from '../LibraryCreatorReading.vue'
 
+function mountReading(readingThreshold = 0.25, markAsFinishedPercentComplete = 98) {
+  return mount(LibraryCreatorReading, { props: { readingThreshold, markAsFinishedPercentComplete } })
+}
+
 describe('LibraryCreatorReading', () => {
   it('shows and emits a finished threshold at the requested 0.05% precision', async () => {
-    const wrapper = mount(LibraryCreatorReading, {
-      props: { readingThreshold: 0.25, markAsFinishedPercentComplete: 99.95 },
-    })
+    const wrapper = mountReading(0.25, 99.95)
 
-    const slider = wrapper.get<HTMLInputElement>('#finished-threshold')
-    expect(slider.attributes('step')).toBe('0.05')
-    expect(wrapper.get('output[for="finished-threshold"]').text()).toBe('99.95%')
+    const input = wrapper.get<HTMLInputElement>('#finished-threshold')
+    expect(input.attributes('step')).toBe('0.05')
+    expect(input.attributes('min')).toBe('90')
+    expect(input.attributes('max')).toBe('100')
+    expect(wrapper.text()).toContain('99.95%')
 
-    await slider.setValue('98.05')
+    await input.setValue('98.05')
     expect(wrapper.emitted('update:markAsFinishedPercentComplete')).toContainEqual([98.05])
   })
+
+  it('labels both thresholds and describes their ranges', async () => {
+    const wrapper = mountReading()
+
+    expect(wrapper.get('label[for="reading-threshold"]').text()).toBe('Reading start')
+    expect(wrapper.get('#reading-threshold-help').text()).toContain('Between 0.05% and 5%.')
+
+    await wrapper.get('#reading-threshold').setValue('')
+    expect(wrapper.emitted('update:readingThreshold')).toBeUndefined()
+    await wrapper.get('#reading-threshold').setValue('1.5')
+    expect(wrapper.emitted('update:readingThreshold')).toEqual([[1.5]])
+  })
+
+  it('drags each end over its own range only', async () => {
+    const wrapper = mountReading()
+    const start = wrapper.get<HTMLInputElement>('#reading-threshold-slider')
+    const finish = wrapper.get<HTMLInputElement>('#finished-threshold-slider')
+
+    expect([start.attributes('min'), start.attributes('max'), start.attributes('step')]).toEqual(['0.05', '5', '0.05'])
+    expect([finish.attributes('min'), finish.attributes('max')]).toEqual(['90', '100'])
+
+    await start.setValue('1.5')
+    await finish.setValue('97.5')
+    expect(wrapper.emitted('update:readingThreshold')).toEqual([[1.5]])
+    expect(wrapper.emitted('update:markAsFinishedPercentComplete')).toEqual([[97.5]])
+  })
+
+  it('snaps the finish slider to round values while the field keeps full precision', () => {
+    const wrapper = mountReading()
+
+    expect(wrapper.get('#finished-threshold-slider').attributes('step')).toBe('0.25')
+    expect(wrapper.get('#finished-threshold').attributes('step')).toBe('0.05')
+  })
+
+  it('names the sliders and announces their values as percentages', () => {
+    const wrapper = mountReading(0.25, 98)
+
+    const start = wrapper.get('#reading-threshold-slider')
+    expect(start.attributes('aria-label')).toBe('Drag to set when a book counts as started')
+    expect(start.attributes('aria-valuetext')).toBe('0.25%')
+    expect(wrapper.get('#finished-threshold-slider').attributes('aria-valuetext')).toBe('98%')
+  })
+
+  it('pins an out-of-range value to the end of its slider rather than past it', () => {
+    const wrapper = mountReading(9, 80)
+
+    expect(wrapper.get('#reading-threshold-slider').attributes('style')).toContain('--fraction: 1')
+    expect(wrapper.get('#finished-threshold-slider').attributes('style')).toContain('--fraction: 0')
+  })
 })
diff --git a/client/src/features/library/components/__tests__/LibraryCreatorScanner.spec.ts b/client/src/features/library/components/__tests__/LibraryCreatorScanner.spec.ts
index abfdd184e..2c9f63d11 100644
--- a/client/src/features/library/components/__tests__/LibraryCreatorScanner.spec.ts
+++ b/client/src/features/library/components/__tests__/LibraryCreatorScanner.spec.ts
@@ -1,14 +1,9 @@
 import { mount } from '@vue/test-utils'
 import { describe, expect, it } from 'vitest'
+import { BOOK_FORMATS } from '@bookorbit/types'
 
 import LibraryCreatorScanner from '../LibraryCreatorScanner.vue'
 
-const tooltipStubs = {
-  Tooltip: { template: '<div><slot /></div>' },
-  TooltipTrigger: { template: '<div><slot /></div>' },
-  TooltipContent: { template: '<div><slot /></div>' },
-}
-
 function mountScanner(overrides: Partial<InstanceType<typeof LibraryCreatorScanner>['$props']> = {}) {
   return mount(LibraryCreatorScanner, {
     props: {
@@ -19,9 +14,6 @@ function mountScanner(overrides: Partial<InstanceType<typeof LibraryCreatorScann
       excludePatterns: [],
       ...overrides,
     },
-    global: {
-      stubs: tooltipStubs,
-    },
   })
 }
 
@@ -29,23 +21,58 @@ describe('LibraryCreatorScanner', () => {
   it('emits organization mode changes while creating a library', async () => {
     const wrapper = mountScanner()
 
-    await wrapper.findAll('button')[1]!.trigger('click')
+    await wrapper.get('input[name="organization-mode"][value="book_per_file"]').setValue()
 
     expect(wrapper.emitted('update:organizationMode')).toEqual([['book_per_file']])
+    expect(wrapper.text()).toContain('This is the one setting you cannot change later.')
   })
 
-  it('disables organization mode changes when locked', async () => {
-    const wrapper = mountScanner({ organizationModeLocked: true })
-    const modeButtons = wrapper.findAll('button').slice(0, 2)
+  it('shows only the chosen mode, with the reason it is fixed, once the library exists', () => {
+    const wrapper = mountScanner({ organizationModeLocked: true, organizationMode: 'book_per_file' })
 
-    expect(modeButtons).toHaveLength(2)
-    expect(modeButtons.every((button) => button.attributes('disabled') !== undefined)).toBe(true)
+    expect(wrapper.find('input[name="organization-mode"]').exists()).toBe(false)
+    expect(wrapper.text()).toContain('File as Book')
+    expect(wrapper.text()).toContain('Set at creation')
     expect(wrapper.text()).toContain('Organization mode is fixed after library creation')
-
-    await modeButtons[1]!.trigger('click')
-
-    expect(wrapper.emitted('update:organizationMode')).toBeUndefined()
   })
+
+  it('starts restricting imports from every format, then drops the ones unticked', async () => {
+    const wrapper = mountScanner()
+
+    await wrapper.get('input[name="import-formats"]:not(:checked)').setValue()
+    expect(wrapper.emitted('update:allowedFormats')).toEqual([[[...BOOK_FORMATS]]])
+
+    await wrapper.setProps({ allowedFormats: [...BOOK_FORMATS] })
+    await wrapper
+      .findAll('button[aria-pressed]')
+      .find((button) => button.text() === 'PDF')!
+      .trigger('click')
+
+    expect(wrapper.emitted('update:allowedFormats')![1]![0]).not.toContain('pdf')
+    expect(wrapper.text()).toContain('will be marked as missing on the next scan')
+  })
+
+  it('never lets the last imported format be unticked', async () => {
+    const wrapper = mountScanner({ allowedFormats: ['epub'] })
+
+    await wrapper
+      .findAll('button[aria-pressed]')
+      .find((button) => button.text() === 'EPUB')!
+      .trigger('click')
+
+    expect(wrapper.emitted('update:allowedFormats')).toBeUndefined()
+  })
+
+  it('adds skip patterns on Enter and removes them by name', async () => {
+    const wrapper = mountScanner({ excludePatterns: ['**/samples/**'] })
+
+    await wrapper.get('#exclude-pattern-input').setValue('**/extras/**')
+    await wrapper.get('#exclude-pattern-input').trigger('keydown', { key: 'Enter' })
+    await wrapper.get('button[aria-label="Remove pattern **/samples/**"]').trigger('click')
+
+    expect(wrapper.emitted('update:excludePatterns')).toEqual([[['**/samples/**', '**/extras/**']], [[]]])
+  })
+
   it('enables recompute only for saved file sources and requires confirmation', async () => {
     const wrapper = mountScanner({ addedAtSource: 'file_created', storedAddedAtSource: 'file_created', canRecomputeAddedAt: true })
     const recompute = wrapper.findAll('button').find((button) => button.text() === 'Recompute now')!
@@ -59,7 +86,7 @@ describe('LibraryCreatorScanner', () => {
     wrapper.unmount()
   })
 
-  it('uses native radios and exposes partial failures as accessible status', async () => {
+  it('uses native radios for the date source and exposes partial failures as accessible status', async () => {
     const wrapper = mountScanner({
       addedAtSource: 'file_created',
       recomputeJob: {
@@ -76,7 +103,7 @@ describe('LibraryCreatorScanner', () => {
         failureSamples: [],
       },
     })
-    const radios = wrapper.findAll('input[type="radio"]')
+    const radios = wrapper.findAll('input[name="added-at-source"]')
     expect(radios).toHaveLength(3)
     await radios[1]!.setValue()
     expect(wrapper.emitted('update:addedAtSource')).toEqual([['file_modified']])
diff --git a/client/src/features/library/composables/__tests__/useLibraryAccess.spec.ts b/client/src/features/library/composables/__tests__/useLibraryAccess.spec.ts
new file mode 100644
index 000000000..75a7c3a9b
--- /dev/null
+++ b/client/src/features/library/composables/__tests__/useLibraryAccess.spec.ts
@@ -0,0 +1,87 @@
+// @vitest-environment node
+import { ref } from 'vue'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+const apiMock = vi.hoisted(() => vi.fn<(input: RequestInfo | URL, init?: RequestInit) => Promise<Response>>())
+
+vi.mock('@/lib/api', () => ({ api: apiMock }))
+
+const USERS = [
+  { id: 2, username: 'maya', name: 'Maya Ortiz' },
+  { id: 3, username: 'sam', name: 'Sam Whitfield' },
+]
+
+function jsonResponse(body: unknown, status = 200): Response {
+  return new Response(JSON.stringify(body), { status, headers: { 'Content-Type': 'application/json' } })
+}
+
+describe('useLibraryAccess', () => {
+  beforeEach(() => {
+    apiMock.mockReset()
+  })
+
+  it('queues grants while the library does not exist yet', async () => {
+    apiMock.mockResolvedValue(jsonResponse(USERS))
+    const { useLibraryAccess } = await import('../useLibraryAccess')
+    const access = useLibraryAccess(ref<number | null>(null))
+
+    await access.load()
+    await access.grant(2, 'editor')
+    await access.changeLevel(2, 'owner')
+
+    expect(apiMock).toHaveBeenCalledTimes(1)
+    expect(access.pending.value).toEqual([{ userId: 2, username: 'maya', name: 'Maya Ortiz', accessLevel: 'owner', failed: false }])
+    expect(access.availableUsers.value.map((user) => user.id)).toEqual([3])
+    expect(access.count.value).toBe(1)
+
+    await access.revoke(2)
+    expect(access.pending.value).toEqual([])
+  })
+
+  it('sends queued grants once the library exists and keeps the ones that fail', async () => {
+    const libraryId = ref<number | null>(null)
+    apiMock.mockImplementation(async (url, init) => {
+      const path = String(url)
+      if (path.endsWith('/users/assignable')) return jsonResponse(USERS)
+      if (init?.method === 'POST') {
+        const body = JSON.parse(String(init.body)) as { userId: number }
+        return body.userId === 2 ? jsonResponse({}) : jsonResponse({ message: 'nope' }, 500)
+      }
+      return jsonResponse([{ userId: 2, username: 'maya', name: 'Maya Ortiz', accessLevel: 'viewer' }])
+    })
+    const { useLibraryAccess } = await import('../useLibraryAccess')
+    const access = useLibraryAccess(libraryId)
+    await access.load()
+    await access.grant(2, 'viewer')
+    await access.grant(3, 'viewer')
+
+    libraryId.value = 9
+    const failed = await access.applyPending()
+
+    expect(failed).toBe(1)
+    expect(access.failedGrants.value.map((grant) => grant.userId)).toEqual([3])
+    expect(access.entries.value.map((entry) => entry.userId)).toEqual([2])
+    expect(apiMock).toHaveBeenCalledWith(
+      '/api/v1/libraries/9/access',
+      expect.objectContaining({ method: 'POST', body: JSON.stringify({ userId: 3, accessLevel: 'viewer' }) }),
+    )
+  })
+
+  it('writes straight to the server for an existing library and reports its message on failure', async () => {
+    apiMock.mockImplementation(async (url, init) => {
+      if (String(url).endsWith('/users/assignable')) return jsonResponse(USERS)
+      if (init?.method === 'PATCH') return jsonResponse({ message: 'Owners cannot be demoted' }, 400)
+      return jsonResponse([])
+    })
+    const { useLibraryAccess } = await import('../useLibraryAccess')
+    const access = useLibraryAccess(ref<number | null>(4))
+    await access.load()
+
+    await access.grant(2, 'viewer')
+    const changed = await access.changeLevel(2, 'editor')
+
+    expect(apiMock).toHaveBeenCalledWith('/api/v1/libraries/4/access', expect.objectContaining({ method: 'POST' }))
+    expect(changed).toBe(false)
+    expect(access.error.value).toBe('Owners cannot be demoted')
+  })
+})
diff --git a/client/src/features/library/composables/__tests__/useLibraryCreator.spec.ts b/client/src/features/library/composables/__tests__/useLibraryCreator.spec.ts
index a3dbc3dea..1119e7be6 100644
--- a/client/src/features/library/composables/__tests__/useLibraryCreator.spec.ts
+++ b/client/src/features/library/composables/__tests__/useLibraryCreator.spec.ts
@@ -38,66 +38,90 @@ describe('useLibraryCreator', () => {
     expect(apiMock).not.toHaveBeenCalled()
   })
 
-  it('does not run prescan without folders', async () => {
+  it('does not check folders when there are none', async () => {
     const { useLibraryCreator } = await import('../useLibraryCreator')
     const creator = useLibraryCreator()
 
-    await creator.runPrescan()
+    await creator.checkFolders()
 
     expect(apiMock).not.toHaveBeenCalled()
-    expect(creator.prescanLoading.value).toBe(false)
-    expect(creator.prescanResult.value).toBeNull()
+    expect(creator.folderChecks.value).toEqual({})
   })
 
-  it('stores successful prescan results', async () => {
+  it('checks only the folders asked about and keys results by the requested path', async () => {
     const { useLibraryCreator } = await import('../useLibraryCreator')
     const creator = useLibraryCreator()
-    const result: PrescanResult = { paths: [{ path: '/books', accessible: true, fileCount: 2 }], totalFiles: 2 }
+    const result: PrescanResult = {
+      paths: [{ path: '/mnt/resolved/new', accessible: true, fileCount: 2, overlapLibrary: 'Comics' }],
+      totalFiles: 2,
+    }
     apiMock.mockResolvedValue(jsonResponse(result))
+    creator.form.folders = ['/books', '/books-new']
 
-    creator.form.folders = ['/books']
-
-    await creator.runPrescan()
+    await creator.checkFolders(['/books-new'])
 
     expect(apiMock).toHaveBeenCalledWith(
       '/api/v1/libraries/prescan',
-      expect.objectContaining({
-        method: 'POST',
-        body: JSON.stringify({ paths: ['/books'] }),
-      }),
+      expect.objectContaining({ method: 'POST', body: JSON.stringify({ paths: ['/books-new'] }) }),
     )
-    expect(creator.prescanLoading.value).toBe(false)
-    expect(creator.prescanResult.value).toEqual(result)
+    expect(creator.folderChecks.value).toEqual({
+      '/books-new': { state: 'checked', accessible: true, fileCount: 2, overlapLibrary: 'Comics' },
+    })
   })
 
-  it('includes the current library ID when prescanning an edit', async () => {
+  it('includes the current library ID when checking folders during an edit', async () => {
     const { useLibraryCreator } = await import('../useLibraryCreator')
     const creator = useLibraryCreator()
     const result: PrescanResult = { paths: [{ path: '/books', accessible: true, fileCount: 2 }], totalFiles: 2 }
     apiMock.mockResolvedValue(jsonResponse(result))
     creator.initEdit(makeLibrary({ id: 12 }))
 
-    await creator.runPrescan()
+    await creator.checkFolders()
 
     expect(apiMock).toHaveBeenCalledWith(
       '/api/v1/libraries/prescan',
-      expect.objectContaining({
-        method: 'POST',
-        body: JSON.stringify({ paths: ['/books'], libraryId: 12 }),
-      }),
+      expect.objectContaining({ method: 'POST', body: JSON.stringify({ paths: ['/books'], libraryId: 12 }) }),
     )
   })
 
-  it('surfaces prescan connection failures', async () => {
+  it('marks folders as failed when the check cannot reach the server', async () => {
     const { useLibraryCreator } = await import('../useLibraryCreator')
     const creator = useLibraryCreator()
     apiMock.mockRejectedValue(new TypeError('network error'))
-
     creator.form.folders = ['/books']
-    await creator.runPrescan()
 
-    expect(creator.error.value).toBe('Could not connect to the server to scan folders.')
-    expect(creator.prescanLoading.value).toBe(false)
+    await creator.checkFolders()
+
+    expect(creator.folderChecks.value).toEqual({ '/books': { state: 'failed' } })
+    expect(creator.error.value).toBeNull()
+  })
+
+  it('ignores a slower, older check of the same folder', async () => {
+    const { useLibraryCreator } = await import('../useLibraryCreator')
+    const creator = useLibraryCreator()
+    let resolveFirst: (value: Response) => void = () => undefined
+    apiMock
+      .mockImplementationOnce(() => new Promise<Response>((resolve) => (resolveFirst = resolve)))
+      .mockResolvedValueOnce(jsonResponse({ paths: [{ path: '/books', accessible: true, fileCount: 9 }], totalFiles: 9 }))
+
+    const first = creator.checkFolders(['/books'])
+    await creator.checkFolders(['/books'])
+    resolveFirst(jsonResponse({ paths: [{ path: '/books', accessible: false, fileCount: 0 }], totalFiles: 0 }))
+    await first
+
+    expect(creator.folderChecks.value['/books']).toEqual({ state: 'checked', accessible: true, fileCount: 9, overlapLibrary: undefined })
+  })
+
+  it('loads counts for a book library being edited', async () => {
+    const { useLibraryCreator } = await import('../useLibraryCreator')
+    const creator = useLibraryCreator()
+    apiMock.mockResolvedValue(jsonResponse({ totalBooks: 455, totalSizeBytes: 10, formatCounts: { epub: 400, pdf: 55 } }))
+    creator.initEdit(makeLibrary({ id: 12 }))
+
+    await creator.loadStats()
+
+    expect(apiMock).toHaveBeenCalledWith('/api/v1/libraries/12/stats')
+    expect(creator.stats.value?.formatCounts).toEqual({ epub: 400, pdf: 55 })
   })
 
   it('validates cron expressions and file size limits before saving', async () => {
diff --git a/client/src/features/library/composables/useLibraryAccess.ts b/client/src/features/library/composables/useLibraryAccess.ts
new file mode 100644
index 000000000..579736eb9
--- /dev/null
+++ b/client/src/features/library/composables/useLibraryAccess.ts
@@ -0,0 +1,173 @@
+import { computed, ref, type InjectionKey, type Ref } from 'vue'
+import type { AccessLevel, LibraryAccessEntry } from '@bookorbit/types'
+import { api } from '@/lib/api'
+import { i18n } from '@/i18n'
+
+export interface AssignableUser {
+  id: number
+  username: string
+  name: string
+}
+
+/** A grant chosen while creating a library, sent once the library exists. */
+export interface PendingGrant {
+  userId: number
+  username: string
+  name: string
+  accessLevel: AccessLevel
+  failed: boolean
+}
+
+/**
+ * Library access for the library editor. Once the library exists every change goes straight to the
+ * server, as before. While it is being created there is nothing to grant against yet, so choices
+ * queue up and `applyPending` sends them after the create succeeds; any that fail stay queued and
+ * flagged so the editor can say who was not added and retry.
+ */
+export function useLibraryAccess(libraryId: Ref<number | null>) {
+  const entries = ref<LibraryAccessEntry[]>([])
+  const assignable = ref<AssignableUser[]>([])
+  const pending = ref<PendingGrant[]>([])
+  const loading = ref(false)
+  const busy = ref(false)
+  const loaded = ref(false)
+  const error = ref<string | null>(null)
+
+  const availableUsers = computed(() => {
+    const taken = new Set([...entries.value.map((entry) => entry.userId), ...pending.value.map((grant) => grant.userId)])
+    return assignable.value.filter((user) => !taken.has(user.id))
+  })
+  const failedGrants = computed(() => pending.value.filter((grant) => grant.failed))
+  const count = computed(() => (libraryId.value === null ? pending.value.length : entries.value.length))
+
+  async function load(): Promise<void> {
+    loading.value = true
+    error.value = null
+    try {
+      const [usersRes, accessRes] = await Promise.all([
+        api('/api/v1/users/assignable'),
+        libraryId.value === null ? Promise.resolve(null) : api(`/api/v1/libraries/${libraryId.value}/access`),
+      ])
+      if (!usersRes.ok || (accessRes && !accessRes.ok)) {
+        error.value = i18n.global.t('library.creator.access.errors.load')
+        return
+      }
+      const users: unknown = await usersRes.json()
+      const granted: unknown = accessRes ? await accessRes.json() : []
+      assignable.value = Array.isArray(users) ? (users as AssignableUser[]) : []
+      entries.value = Array.isArray(granted) ? (granted as LibraryAccessEntry[]) : []
+      loaded.value = true
+    } catch {
+      error.value = i18n.global.t('library.creator.errors.connection')
+    } finally {
+      loading.value = false
+    }
+  }
+
+  async function mutate(request: () => Promise<Response>, fallbackKey: string): Promise<boolean> {
+    error.value = null
+    busy.value = true
+    try {
+      const res = await request()
+      if (!res.ok) {
+        error.value = await messageFrom(res, i18n.global.t(fallbackKey))
+        return false
+      }
+      await load()
+      return true
+    } catch {
+      error.value = i18n.global.t('library.creator.errors.connection')
+      return false
+    } finally {
+      busy.value = false
+    }
+  }
+
+  async function grant(userId: number, accessLevel: AccessLevel): Promise<boolean> {
+    const user = assignable.value.find((candidate) => candidate.id === userId)
+    if (!user) return false
+    if (libraryId.value === null) {
+      pending.value = [...pending.value, { userId, username: user.username, name: user.name, accessLevel, failed: false }]
+      return true
+    }
+    const id = libraryId.value
+    return mutate(() => api(`/api/v1/libraries/${id}/access`, jsonRequest('POST', { userId, accessLevel })), 'library.creator.access.errors.grant')
+  }
+
+  async function changeLevel(userId: number, accessLevel: AccessLevel): Promise<boolean> {
+    if (pending.value.some((grant) => grant.userId === userId)) {
+      pending.value = pending.value.map((grant) => (grant.userId === userId ? { ...grant, accessLevel } : grant))
+      return true
+    }
+    if (libraryId.value === null) return false
+    const id = libraryId.value
+    return mutate(
+      () => api(`/api/v1/libraries/${id}/access/${userId}`, jsonRequest('PATCH', { accessLevel })),
+      'library.creator.access.errors.updateLevel',
+    )
+  }
+
+  async function revoke(userId: number): Promise<boolean> {
+    if (pending.value.some((grant) => grant.userId === userId)) {
+      pending.value = pending.value.filter((grant) => grant.userId !== userId)
+      return true
+    }
+    if (libraryId.value === null) return false
+    const id = libraryId.value
+    return mutate(() => api(`/api/v1/libraries/${id}/access/${userId}`, { method: 'DELETE' }), 'library.creator.access.errors.revoke')
+  }
+
+  /** Sends queued grants one at a time. Returns how many could not be added. */
+  async function applyPending(): Promise<number> {
+    const id = libraryId.value
+    if (id === null || pending.value.length === 0) return 0
+    busy.value = true
+    const remaining: PendingGrant[] = []
+    try {
+      for (const grant of pending.value) {
+        try {
+          const res = await api(`/api/v1/libraries/${id}/access`, jsonRequest('POST', { userId: grant.userId, accessLevel: grant.accessLevel }))
+          if (!res.ok) remaining.push({ ...grant, failed: true })
+        } catch {
+          remaining.push({ ...grant, failed: true })
+        }
+      }
+    } finally {
+      pending.value = remaining
+      busy.value = false
+    }
+    await load()
+    return remaining.length
+  }
+
+  return {
+    entries,
+    assignable,
+    pending,
+    loading,
+    busy,
+    loaded,
+    error,
+    availableUsers,
+    failedGrants,
+    count,
+    load,
+    grant,
+    changeLevel,
+    revoke,
+    applyPending,
+  }
+}
+
+export type LibraryAccessState = ReturnType<typeof useLibraryAccess>
+export const LIBRARY_ACCESS_KEY: InjectionKey<LibraryAccessState> = Symbol('library-access')
+
+function jsonRequest(method: string, body: unknown): RequestInit {
+  return { method, headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) }
+}
+
+async function messageFrom(response: Response, fallback: string): Promise<string> {
+  const body = await response.json().catch(() => null)
+  const message = body?.message
+  return typeof message === 'string' && message.trim() ? message : fallback
+}
diff --git a/client/src/features/library/composables/useLibraryCreator.ts b/client/src/features/library/composables/useLibraryCreator.ts
index 55b8753a7..b93882aeb 100644
--- a/client/src/features/library/composables/useLibraryCreator.ts
+++ b/client/src/features/library/composables/useLibraryCreator.ts
@@ -6,7 +6,7 @@ import {
   withoutImplicitReadAlongFormatPriority,
   withReadAlongFormatPriority,
 } from '@bookorbit/types'
-import type { AddedAtSource, CoverAspectRatio, Library, LibraryType, OrganizationMode, PrescanResult } from '@bookorbit/types'
+import type { AddedAtSource, CoverAspectRatio, Library, LibraryStats, LibraryType, OrganizationMode, PrescanResult } from '@bookorbit/types'
 import { i18n } from '@/i18n'
 import { coveringFolderPath, normalizeFolderPath } from './folder-paths'
 
@@ -21,6 +21,10 @@ export const METADATA_LABELS: Record<string, string> = {
 
 export type LibraryCreatorSectionId = 'details' | 'folders' | 'scanner' | 'metadata' | 'reading' | 'schedule' | 'fileWrite' | 'access'
 
+/** The result of checking one folder: whether the server can read it, and what it would import. */
+export type FolderCheck =
+  { state: 'checking' } | { state: 'checked'; accessible: boolean; fileCount: number; overlapLibrary?: string } | { state: 'failed' }
+
 const FILE_SIZE_MIN_MB = 1
 const FILE_SIZE_MAX_MB = 10_000
 
@@ -63,35 +67,38 @@ function blankForm() {
 }
 
 export function useLibraryCreator() {
+  const t = (key: string) => i18n.global.t(key)
   const form = reactive(blankForm())
   const mode = ref<'create' | 'edit'>('create')
   const editingLibraryId = ref<number | null>(null)
   const loading = ref(false)
-  const prescanLoading = ref(false)
-  const prescanResult = ref<PrescanResult | null>(null)
+  const folderChecks = ref<Record<string, FolderCheck>>({})
+  const stats = ref<LibraryStats | null>(null)
   const error = ref<string | null>(null)
   const storedAddedAtSource = ref<AddedAtSource | null>(null)
+  const latestCheck = new Map<string, number>()
+  let checkSequence = 0
 
   const validationErrors = computed<Partial<Record<LibraryCreatorSectionId, string>>>(() => {
     const errors: Partial<Record<LibraryCreatorSectionId, string>> = {}
-    if (!form.name.trim()) errors.details = 'Enter a library name.'
-    else if (!form.icon?.trim()) errors.details = 'Choose an icon.'
-    if (form.folders.length === 0) errors.folders = 'Add at least one folder.'
-    else if (form.type === 'podcasts' && form.folders.length !== 1) errors.folders = 'Choose exactly one storage folder for podcasts.'
+    if (!form.name.trim()) errors.details = t('library.creator.errors.nameRequired')
+    else if (!form.icon?.trim()) errors.details = t('library.creator.errors.iconRequired')
+    if (form.folders.length === 0) errors.folders = t('library.creator.errors.folderRequired')
+    else if (form.type === 'podcasts' && form.folders.length !== 1) errors.folders = t('library.creator.errors.podcastStorageFolder')
     else if (form.type === 'podcasts' && overlappingPodcastFolder(form.folders, form.localFolders)) {
-      errors.folders = 'Existing podcast folders must sit outside the storage folder.'
+      errors.folders = t('library.creator.errors.podcastFolderOverlap')
     }
     if (form.autoScanCronExpression && !isFiveFieldCronExpression(form.autoScanCronExpression)) {
-      errors.schedule = 'Enter a valid 5-field cron expression.'
+      errors.schedule = t('library.creator.errors.cronInvalid')
     }
     if (form.readingThreshold < 0.05 || form.readingThreshold > 5) {
-      errors.reading = 'Reading start must be between 0.05% and 5%.'
+      errors.reading = t('library.creator.errors.readingStartRange')
     } else if (
       !Number.isFinite(form.markAsFinishedPercentComplete) ||
       form.markAsFinishedPercentComplete < 90 ||
       form.markAsFinishedPercentComplete > 100
     ) {
-      errors.reading = i18n.global.t('library.creator.reading.markAsFinished.invalidThreshold')
+      errors.reading = t('library.creator.reading.markAsFinished.invalidThreshold')
     }
     const fileSizes = [
       form.fileWriteEpubMaxFileSizeMb,
@@ -101,7 +108,7 @@ export function useLibraryCreator() {
       form.fileWriteAudioMaxFileSizeMb,
     ]
     if (fileSizes.some((value) => !Number.isInteger(value) || value < FILE_SIZE_MIN_MB || value > FILE_SIZE_MAX_MB)) {
-      errors.fileWrite = 'File-size limits must be whole numbers from 1 to 10,000 MB.'
+      errors.fileWrite = t('library.creator.errors.fileSizeRange')
     }
     return errors
   })
@@ -111,7 +118,8 @@ export function useLibraryCreator() {
     Object.assign(form, blankForm())
     mode.value = 'create'
     editingLibraryId.value = null
-    prescanResult.value = null
+    folderChecks.value = {}
+    stats.value = null
     error.value = null
   }
 
@@ -153,34 +161,56 @@ export function useLibraryCreator() {
     form.fileRenameEnabled = library.fileRenameEnabled
     mode.value = 'edit'
     editingLibraryId.value = library.id
-    prescanResult.value = null
+    folderChecks.value = {}
     error.value = null
   }
 
-  async function runPrescan() {
-    if (form.folders.length === 0) return
-    prescanLoading.value = true
-    prescanResult.value = null
-    error.value = null
+  /**
+   * Checks folders one request at a time per call, keyed by the requested path because the server
+   * answers with the resolved path. Only the folders asked about are counted: recounting a large
+   * existing folder every time another is added would walk tens of thousands of files for nothing.
+   */
+  async function checkFolders(paths: string[] = form.folders): Promise<void> {
+    const targets = [...new Set(paths)].filter((path) => path.trim())
+    if (targets.length === 0) return
+    const sequence = ++checkSequence
+    const pending = { ...folderChecks.value }
+    for (const path of targets) {
+      latestCheck.set(path, sequence)
+      pending[path] = { state: 'checking' }
+    }
+    folderChecks.value = pending
+
+    let results: PrescanResult['paths'] | null = null
     try {
-      const payload = {
-        paths: form.folders,
-        ...(editingLibraryId.value === null ? {} : { libraryId: editingLibraryId.value }),
-      }
       const res = await api('/api/v1/libraries/prescan', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(payload),
+        body: JSON.stringify({ paths: targets, ...(editingLibraryId.value === null ? {} : { libraryId: editingLibraryId.value }) }),
       })
-      if (res.ok) {
-        prescanResult.value = await res.json()
-      } else {
-        error.value = await responseError(res, 'Could not scan the selected folders.')
-      }
+      if (res.ok) results = ((await res.json()) as PrescanResult).paths
     } catch {
-      error.value = 'Could not connect to the server to scan folders.'
-    } finally {
-      prescanLoading.value = false
+      results = null
+    }
+
+    const next = { ...folderChecks.value }
+    targets.forEach((path, index) => {
+      if (latestCheck.get(path) !== sequence) return
+      const result = results?.[index]
+      next[path] = result
+        ? { state: 'checked', accessible: result.accessible, fileCount: result.fileCount, overlapLibrary: result.overlapLibrary }
+        : { state: 'failed' }
+    })
+    folderChecks.value = next
+  }
+
+  async function loadStats(): Promise<void> {
+    if (editingLibraryId.value === null || form.type !== 'books') return
+    try {
+      const res = await api(`/api/v1/libraries/${editingLibraryId.value}/stats`)
+      if (res.ok) stats.value = (await res.json()) as LibraryStats
+    } catch {
+      stats.value = null
     }
   }
 
@@ -231,12 +261,12 @@ export function useLibraryCreator() {
         })
       }
       if (!res.ok) {
-        error.value = await responseError(res, 'Failed to save library.')
+        error.value = await responseError(res, t('library.creator.errors.saveFailed'))
         return null
       }
       return await res.json()
     } catch {
-      error.value = 'Could not connect to the server. Check your connection and try again.'
+      error.value = t('library.creator.errors.connection')
       return null
     } finally {
       loading.value = false
@@ -249,13 +279,14 @@ export function useLibraryCreator() {
     mode,
     editingLibraryId,
     loading,
-    prescanLoading,
-    prescanResult,
+    folderChecks,
+    stats,
     error,
     validationErrors,
     initCreate,
     initEdit,
-    runPrescan,
+    checkFolders,
+    loadStats,
     save,
   }
 }
diff --git a/client/src/features/library/composables/useLibraryFolderSelection.ts b/client/src/features/library/composables/useLibraryFolderSelection.ts
index f825f65b5..a566c8f43 100644
--- a/client/src/features/library/composables/useLibraryFolderSelection.ts
+++ b/client/src/features/library/composables/useLibraryFolderSelection.ts
@@ -1,4 +1,5 @@
 import { ref } from 'vue'
+import { i18n } from '@/i18n'
 import { consolidateFolderPaths, coveringFolderPath, normalizeFolderPath } from './folder-paths'
 
 interface FolderSelectionOptions {
@@ -50,23 +51,23 @@ export function useLibraryFolderSelection(options: FolderSelectionOptions) {
   function addManualFolder() {
     const path = normalizeFolderPath(manualPath.value)
     if (!manualPath.value.trim()) {
-      manualError.value = 'Enter a server folder path.'
+      manualError.value = i18n.global.t('library.creator.folders.errors.empty')
       return
     }
     if (!path.startsWith('/')) {
-      manualError.value = 'Enter an absolute server path beginning with /.'
+      manualError.value = i18n.global.t('library.creator.folders.errors.notAbsolute')
       return
     }
 
     const existing = options.folders().map(normalizeFolderPath)
     if (existing.includes(path)) {
-      manualError.value = 'That folder has already been added.'
+      manualError.value = i18n.global.t('library.creator.folders.errors.duplicate')
       return
     }
 
     const coveringPath = coveringFolderPath(path, existing)
     if (coveringPath) {
-      manualError.value = `That folder is already covered by ${coveringPath}.`
+      manualError.value = i18n.global.t('library.creator.folders.errors.covered', { path: coveringPath })
       return
     }
 
diff --git a/client/src/features/settings/LibrariesSettings.vue b/client/src/features/settings/LibrariesSettings.vue
index b7fd99876..ea2742c5c 100644
--- a/client/src/features/settings/LibrariesSettings.vue
+++ b/client/src/features/settings/LibrariesSettings.vue
@@ -269,6 +269,17 @@ async function onSaved(library: LibraryType) {
   void overview.load()
 }
 
+/** Both open their own confirmation, which cannot sit on top of the editor, so the editor closes first. */
+function syncFilesFromEditor(lib: LibraryType) {
+  closeCreator()
+  promptSyncFiles(lib)
+}
+
+function removeFromEditor(lib: LibraryType) {
+  closeCreator()
+  openDelete(lib)
+}
+
 function openDelete(lib: LibraryType) {
   deletingLibrary.value = lib
   deleteConfirmName.value = ''
@@ -411,7 +422,16 @@ async function confirmDelete() {
       </div>
     </div>
 
-    <LibraryCreatorModal v-if="creatorOpen" :library="editingLibrary" @close="closeCreator" @saved="onSaved" />
+    <LibraryCreatorModal
+      v-if="creatorOpen"
+      :library="editingLibrary"
+      @close="closeCreator"
+      @saved="onSaved"
+      @scan="scan"
+      @refresh-covers="refreshCovers"
+      @sync-files="syncFilesFromEditor"
+      @remove="removeFromEditor"
+    />
 
     <ConfirmDialog
       v-if="deletingLibrary"
diff --git a/client/src/features/settings/__tests__/LibrariesSettings.spec.ts b/client/src/features/settings/__tests__/LibrariesSettings.spec.ts
index 78ef12e82..f694318d8 100644
--- a/client/src/features/settings/__tests__/LibrariesSettings.spec.ts
+++ b/client/src/features/settings/__tests__/LibrariesSettings.spec.ts
@@ -46,7 +46,7 @@ vi.mock('vue-sonner', () => ({
 }))
 
 vi.mock('@/features/library/components/LibraryCreatorModal.vue', () => ({
-  default: { template: '<div />' },
+  default: { name: 'LibraryCreatorModal', props: ['library'], template: '<div data-testid="library-creator" />' },
 }))
 
 // --- Module-level mutable state ---
@@ -650,6 +650,28 @@ describe('LibrariesSettings ledger', () => {
       headerTarget.remove()
     })
 
+    it('closes the editor before asking to delete from its menu, so the dialog is not stacked on it', async () => {
+      const headerTarget = document.createElement('div')
+      headerTarget.id = 'settings-header-actions'
+      document.body.appendChild(headerTarget)
+      librariesRef.value = [makeLibrary({ id: 5, name: 'Novels' })]
+      const wrapper = await mountLoaded({ realTeleport: true })
+
+      wrapper.findComponent(LibraryRowActions).vm.$emit('edit', librariesRef.value[0]!)
+      await flushPromises()
+      const editor = wrapper.findComponent({ name: 'LibraryCreatorModal' })
+      expect(editor.props('library')).toEqual(librariesRef.value[0])
+
+      editor.vm.$emit('remove', librariesRef.value[0]!)
+      await flushPromises()
+
+      expect(wrapper.find('[data-testid="library-creator"]').exists()).toBe(false)
+      expect(document.querySelector('[role="dialog"]')!.textContent).toContain('Delete "Novels"?')
+
+      wrapper.unmount()
+      headerTarget.remove()
+    })
+
     it('puts the page actions in the settings header slot when one exists', async () => {
       const headerTarget = document.createElement('div')
       headerTarget.id = 'settings-header-actions'
diff --git a/client/src/locales/en.json b/client/src/locales/en.json
index 26e0dd6dc..570564094 100644
--- a/client/src/locales/en.json
+++ b/client/src/locales/en.json
@@ -8484,7 +8484,26 @@
         "icon": {
           "label": "Icon",
           "placeholder": "Choose an icon...",
-          "selected": "Selected"
+          "selected": "Selected",
+          "more": "More icons"
+        },
+        "identity": "Identity",
+        "podcastName": "Podcast library name",
+        "podcastPlaceholder": "My Podcasts",
+        "podcastDefaultName": "Podcasts",
+        "type": {
+          "title": "Library type",
+          "books": "Books",
+          "booksHint": "Ebooks, comics, and audiobooks",
+          "podcasts": "Podcasts",
+          "podcastsHint": "RSS feeds and managed episode storage"
+        },
+        "cover": {
+          "portraitTitle": "Portrait 2:3",
+          "portraitHint": "Ebooks and mixed libraries",
+          "squareTitle": "Square 1:1",
+          "squareHint": "Audiobook-only libraries",
+          "slotsHint": "A book with both an ebook and an audiobook shows the cover that fits this shape."
         }
       },
       "folders": {
@@ -8519,6 +8538,32 @@
           "addDescription": "Every folder directly inside becomes a show.",
           "add": "Add another folder",
           "remove": "Remove {folder}"
+        },
+        "listTitle": "Folders",
+        "storageTitle": "Storage folder",
+        "matchingFiles": "{count, plural, one {# matching file} other {# matching files}}",
+        "bookCount": "{count, plural, one {# book} other {# books}}",
+        "checkAll": "Check folders again",
+        "checkAgain": "Check {folder} again",
+        "checkHint": "Each folder is checked as soon as you add it. A folder another library already reads is flagged, because both libraries would import the same files.",
+        "emptyHint": "Paste a server path below, or browse for one.",
+        "emptyPodcastHint": "Choose where downloaded podcast episodes will be stored.",
+        "pastePlaceholder": "Paste a server path, e.g. /books/Sci-Fi",
+        "pastePodcastPlaceholder": "Paste a server path, e.g. /podcasts",
+        "browse": "Browse...",
+        "status": {
+          "checking": "Checking",
+          "failed": "Check failed",
+          "notAccessible": "Not accessible",
+          "overlap": "Also in {library}",
+          "overlapTitle": "The library \"{library}\" already reads this folder.",
+          "files": "{count, plural, one {# file} other {# files}}"
+        },
+        "errors": {
+          "empty": "Enter a server folder path.",
+          "notAbsolute": "Enter an absolute server path beginning with /.",
+          "duplicate": "That folder has already been added.",
+          "covered": "That folder is already covered by {path}."
         }
       },
       "scanner": {
@@ -8592,6 +8637,36 @@
           "hintAfter": ").",
           "add": "Add",
           "empty": "No patterns added."
+        },
+        "mode": {
+          "title": "How files become books",
+          "locked": "Set at creation",
+          "cannotChange": "This is the one setting you cannot change later.",
+          "folderHint": "Every folder is one book. Best when a title keeps several formats together, or an audiobook spans many files.",
+          "fileHint": "Every file is its own book. Best for flat folders with one format per title.",
+          "folderResult": "One book with two formats",
+          "fileResult": "Three books, one per file"
+        },
+        "import": {
+          "title": "Import",
+          "all": "All formats",
+          "some": "Only these",
+          "groups": {
+            "ebook": "Ebooks",
+            "kindle": "Kindle",
+            "document": "Documents",
+            "comic": "Comics",
+            "audio": "Audio"
+          }
+        },
+        "skip": {
+          "title": "Skip files matching",
+          "count": "{count, plural, one {# pattern} other {# patterns}}",
+          "hint": "Glob patterns, matched against paths inside the library folders.",
+          "inputLabel": "Pattern to skip",
+          "placeholder": "Type a pattern like **/samples/** and press Enter",
+          "placeholderMore": "Add another pattern",
+          "remove": "Remove pattern {pattern}"
         }
       },
       "metadata": {
@@ -8604,7 +8679,28 @@
           "hint": "When a book has multiple formats, the format highest in the list is preferred."
         },
         "moveUp": "Move {item} up",
-        "moveDown": "Move {item} down"
+        "moveDown": "Move {item} down",
+        "primary": {
+          "title": "Primary file",
+          "hint": "When a book has several files, the first format in this order becomes its primary file: the one that opens first and supplies the book's details. Drag a row, or use the arrows.",
+          "reset": "Reset order",
+          "first": "First choice",
+          "notImported": "Not imported",
+          "notHeld": "{count, plural, one {# format this library does not hold keeps its default place after these.} other {# formats this library does not hold keep their default order after these.}}",
+          "moreBelow": "{count, plural, one {# more format follows in this order.} other {# more formats follow in this order.}}",
+          "showingAll": "Showing every format.",
+          "showAll": "Show all {count}",
+          "showFewer": "Show fewer"
+        },
+        "source": {
+          "title": "Book details come from",
+          "embeddedTitle": "Tags in the book file",
+          "embeddedHint": "Read from the primary file",
+          "opfTitle": "metadata.opf file",
+          "opfHint": "Saved next to the book by Calibre",
+          "swap": "Swap the order",
+          "hint": "BookOrbit uses the first one a book has and ignores the other. Calibre libraries usually want metadata.opf first."
+        }
       },
       "fileWrite": {
         "maxFileSizeMb": "Max file size (MB)",
@@ -8650,7 +8746,17 @@
           "title": "Audio",
           "hint": "Embeds the stored cover into M4B, M4A, MP3, and FLAC files.",
           "toggleAria": "Write audio covers"
-        }
+        },
+        "coverAudioHint": "Writes the stored cover into the file too. Audio files can only take a cover.",
+        "audioNeedsCover": "Needs “Include cover image” turned on.",
+        "table": {
+          "format": "Format",
+          "inLibrary": "Here",
+          "sizeLimit": "Size limit"
+        },
+        "sizeLimitAria": "{format} size limit in MB",
+        "mb": "MB",
+        "summary": "{count, plural, =0 {No file types are written.} one {# kind of file is written. Files over their size limit are skipped.} other {# kinds of file are written. Files over their size limit are skipped.}}"
       },
       "reading": {
         "readingStart": {
@@ -8661,7 +8767,16 @@
           "title": "Mark as finished",
           "hint": "A book is automatically marked as \"read\" when this percentage of progress is reached.",
           "invalidThreshold": "Finished progress must be between 90% and 100%."
-        }
+        },
+        "statusTitle": "Reading status",
+        "zones": {
+          "notStarted": "Not started",
+          "reading": "Reading",
+          "read": "Read"
+        },
+        "range": "Between {min} and {max}.",
+        "startSlider": "Drag to set when a book counts as started",
+        "finishSlider": "Drag to set when a book counts as finished"
       },
       "schedule": {
         "fileWatching": "File watching",
@@ -8716,8 +8831,101 @@
         "errors": {
           "grant": "Failed to grant access",
           "updateLevel": "Failed to update access level",
-          "revoke": "Failed to revoke access"
+          "revoke": "Failed to revoke access",
+          "load": "Could not load library access settings."
+        },
+        "peopleTitle": "People with access",
+        "peopleCount": "{count, plural, one {# person} other {# people}}",
+        "add": "Add",
+        "emptyCreate": "Nobody else yet. People you add here get access as soon as the library exists.",
+        "superusers": "Superusers always have full access.",
+        "levelFor": "Access level for {name}",
+        "revokeFor": "Remove access for {name}",
+        "revokeQuestion": "Remove access?",
+        "revoke": "Remove",
+        "keep": "Keep",
+        "failed": {
+          "title": "{count, plural, one {# person could not be added} other {# people could not be added}}",
+          "body": "The library was created. Try adding {names} again, or add them later from this section."
         }
+      },
+      "optional": "Optional",
+      "nav": {
+        "details": "Library",
+        "folders": "Folders",
+        "scanner": "Scanning",
+        "metadata": "Metadata",
+        "reading": "Reading",
+        "schedule": "Automation",
+        "fileWrite": "File updates",
+        "access": "Access",
+        "descriptions": {
+          "details": "What the library is called and how its covers look.",
+          "folders": "The server folders this library reads from.",
+          "scanner": "How files are grouped into books, and which files are skipped.",
+          "metadata": "Which file leads when a book has several, and where its details come from.",
+          "reading": "When a book moves from unread to reading to read.",
+          "schedule": "Keep the library current without pressing Scan.",
+          "fileWrite": "Optional changes BookOrbit may make to the files on disk.",
+          "access": "Who else can see and work with this library."
+        }
+      },
+      "sheet": {
+        "createTitle": "New library",
+        "createHint": "Name it and point it at a folder. Everything else starts with a sensible default.",
+        "editFallbackTitle": "Library settings",
+        "editSubtitle": "{books, plural, one {# book} other {# books}} · {folders, plural, one {# folder} other {# folders}} · {mode}",
+        "editSubtitleNoBooks": "{folders, plural, one {# folder} other {# folders}} · {mode}",
+        "readyHint": "Ready to create. The rest can wait.",
+        "needsHint": "Needs a name, an icon and a folder.",
+        "discardQuestion": "Discard your unsaved changes?",
+        "discard": "Discard",
+        "keepEditing": "Keep editing",
+        "done": "Done",
+        "loading": "Loading settings...",
+        "staleWarning": "The latest library settings could not be loaded. You can still edit the cached settings shown here.",
+        "scanNow": "Scan now"
+      },
+      "summary": {
+        "needsName": "Needs a name",
+        "needsIcon": "Needs an icon",
+        "needsFolder": "Needs a folder",
+        "detailsPortrait": "{name} · Portrait covers",
+        "detailsSquare": "{name} · Square covers",
+        "folders": "{folders, plural, one {# folder} other {# folders}}",
+        "foldersFiles": "{folders, plural, one {# folder} other {# folders}} · {files, plural, one {# file} other {# files}}",
+        "foldersBooks": "{folders, plural, one {# folder} other {# folders}} · {books, plural, one {# book} other {# books}}",
+        "scannerAll": "{mode} · All formats",
+        "scannerSome": "{mode} · {count, plural, one {# format} other {# formats}}",
+        "metadataFile": "{format} leads · Book file first",
+        "metadataOpf": "{format} leads · metadata.opf first",
+        "reading": "Started {start} · Finished {finish}",
+        "watching": "Watching folders",
+        "notWatching": "Not watching",
+        "watchingScheduled": "Watching · {schedule}",
+        "watchingOnly": "Watching · No schedule",
+        "scheduledOnly": "Not watching · {schedule}",
+        "manualOnly": "Manual scans only",
+        "customSchedule": "Custom schedule",
+        "writesAndRenames": "{count, plural, =0 {Writes nothing} one {Writes # kind} other {Writes # kinds}} · Renames",
+        "writes": "{count, plural, =0 {Writes nothing} one {Writes # kind of file} other {Writes # kinds of file}}",
+        "renames": "Renames files",
+        "untouched": "Files left untouched",
+        "onlySuperusers": "Only superusers",
+        "accessQueued": "{count, plural, one {# person to add} other {# people to add}}",
+        "accessPeople": "{count, plural, =0 {Only superusers} one {# person} other {# people}}"
+      },
+      "errors": {
+        "nameRequired": "Enter a library name.",
+        "iconRequired": "Choose an icon.",
+        "folderRequired": "Add at least one folder.",
+        "podcastStorageFolder": "Choose exactly one storage folder for podcasts.",
+        "podcastFolderOverlap": "Existing podcast folders must sit outside the storage folder.",
+        "cronInvalid": "Enter a valid 5-field cron expression.",
+        "readingStartRange": "Reading start must be between 0.05% and 5%.",
+        "fileSizeRange": "File-size limits must be whole numbers from 1 to 10,000 MB.",
+        "saveFailed": "Failed to save library.",
+        "connection": "Could not connect to the server. Check your connection and try again."
       }
     },
     "folderPicker": {