From 760cc6476fe921fab8a830db5350f642fbc06464 Mon Sep 17 00:00:00 2001
From: neon <18559658+neonsolstice@users.noreply.github.com>
Date: Wed, 14 Jan 2026 13:13:07 -0600
Subject: [PATCH] feat(library): add creator wizard, folder picker, and full
 CRUD

---
 .../library/components/FolderPickerModal.vue  | 170 +++++++
 .../components/LibraryCreatorAccess.vue       | 155 +++++++
 .../components/LibraryCreatorDetails.vue      | 129 ++++++
 .../components/LibraryCreatorFolders.vue      | 196 ++++++++
 .../components/LibraryCreatorModal.vue        | 432 ++++++++++++++++++
 .../components/LibraryCreatorScanner.vue      | 212 +++++++++
 .../components/LibraryCreatorSchedule.vue     | 123 +++++
 .../library/composables/useLibraryCreator.ts  | 147 ++++++
 .../features/settings/LibrariesSettings.vue   | 129 ++++--
 docker-compose.yml                            |   1 +
 packages/types/src/index.ts                   |   3 +-
 packages/types/src/library.ts                 |  52 +++
 server/src/app.module.ts                      |   2 +
 ..._add_oidc_schema.sql => 0000_baseline.sql} |  10 +
 .../src/db/migrations/meta/0000_snapshot.json |  69 ++-
 server/src/db/migrations/meta/_journal.json   |   4 +-
 server/src/db/schema/libraries.ts             |  24 +-
 .../modules/library/dto/create-library.dto.ts |  67 +++
 .../library/dto/prescan-library.dto.ts        |   9 +
 .../library/dto/reorder-libraries.dto.ts      |  19 +
 .../modules/library/dto/update-library.dto.ts |  69 +++
 .../src/modules/library/library.controller.ts |  48 ++
 .../src/modules/library/library.repository.ts | 111 ++++-
 server/src/modules/library/library.service.ts | 149 +++++-
 .../src/modules/metadata/metadata.service.ts  |  11 +-
 server/src/modules/path/path.controller.ts    |  15 +
 server/src/modules/path/path.module.ts        |  10 +
 server/src/modules/path/path.service.ts       |  33 ++
 28 files changed, 2346 insertions(+), 53 deletions(-)
 create mode 100644 client/src/features/library/components/FolderPickerModal.vue
 create mode 100644 client/src/features/library/components/LibraryCreatorAccess.vue
 create mode 100644 client/src/features/library/components/LibraryCreatorDetails.vue
 create mode 100644 client/src/features/library/components/LibraryCreatorFolders.vue
 create mode 100644 client/src/features/library/components/LibraryCreatorModal.vue
 create mode 100644 client/src/features/library/components/LibraryCreatorScanner.vue
 create mode 100644 client/src/features/library/components/LibraryCreatorSchedule.vue
 create mode 100644 client/src/features/library/composables/useLibraryCreator.ts
 create mode 100644 packages/types/src/library.ts
 rename server/src/db/migrations/{0000_add_oidc_schema.sql => 0000_baseline.sql} (95%)
 create mode 100644 server/src/modules/library/dto/create-library.dto.ts
 create mode 100644 server/src/modules/library/dto/prescan-library.dto.ts
 create mode 100644 server/src/modules/library/dto/reorder-libraries.dto.ts
 create mode 100644 server/src/modules/library/dto/update-library.dto.ts
 create mode 100644 server/src/modules/path/path.controller.ts
 create mode 100644 server/src/modules/path/path.module.ts
 create mode 100644 server/src/modules/path/path.service.ts

diff --git a/client/src/features/library/components/FolderPickerModal.vue b/client/src/features/library/components/FolderPickerModal.vue
new file mode 100644
index 000000000..64a347a62
--- /dev/null
+++ b/client/src/features/library/components/FolderPickerModal.vue
@@ -0,0 +1,170 @@
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+import { Folder, FolderOpen, ChevronRight, ChevronUp, Search, X, Check, Loader2, HardDrive } from 'lucide-vue-next'
+import { api } from '@/lib/api'
+
+interface DirEntry {
+  name: string
+  path: string
+}
+
+const emit = defineEmits<{
+  select: [path: string]
+  close: []
+}>()
+
+const currentPath = ref('/')
+const entries = ref<DirEntry[]>([])
+const loading = ref(false)
+const search = ref('')
+const error = ref<string | null>(null)
+
+const filteredEntries = computed(() => {
+  const q = search.value.trim().toLowerCase()
+  return q ? entries.value.filter((e) => e.name.toLowerCase().includes(q)) : entries.value
+})
+
+const breadcrumbs = computed(() => {
+  if (currentPath.value === '/') return [{ label: '/', path: '/' }]
+  const parts = currentPath.value.split('/').filter(Boolean)
+  const crumbs = [{ label: '/', path: '/' }]
+  let built = ''
+  for (const part of parts) {
+    built += '/' + part
+    crumbs.push({ label: part, path: built })
+  }
+  return crumbs
+})
+
+const canGoUp = computed(() => currentPath.value !== '/')
+
+async function navigate(path: string) {
+  search.value = ''
+  currentPath.value = path
+}
+
+async function goUp() {
+  const parts = currentPath.value.split('/').filter(Boolean)
+  parts.pop()
+  navigate(parts.length === 0 ? '/' : '/' + parts.join('/'))
+}
+
+async function loadEntries(path: string) {
+  loading.value = true
+  error.value = null
+  try {
+    const res = await api(`/api/path?path=${encodeURIComponent(path)}`)
+    if (res.ok) {
+      entries.value = await res.json()
+    } else {
+      error.value = 'Could not read directory'
+      entries.value = []
+    }
+  } catch {
+    error.value = 'Could not connect'
+    entries.value = []
+  } finally {
+    loading.value = false
+  }
+}
+
+watch(currentPath, (p) => loadEntries(p), { immediate: true })
+
+function selectCurrent() {
+  emit('select', currentPath.value)
+}
+
+function selectEntry(entry: DirEntry) {
+  emit('select', entry.path)
+}
+</script>
+
+<template>
+  <Teleport to="body">
+    <div class="fixed inset-0 z-[80] flex items-center justify-center p-4">
+      <div class="absolute inset-0 bg-black/50 backdrop-blur-[2px]" @click="emit('close')" />
+
+      <div class="relative flex flex-col w-full max-w-lg bg-background rounded-xl shadow-2xl border border-border overflow-hidden" style="height: min(80vh, 560px)">
+        <!-- Header -->
+        <div class="flex items-center justify-between px-4 py-3 border-b border-border shrink-0">
+          <div class="flex items-center gap-2">
+            <HardDrive :size="15" class="text-primary" />
+            <span class="text-sm font-semibold text-foreground">Browse folders</span>
+          </div>
+          <button class="flex items-center justify-center w-7 h-7 rounded text-muted-foreground hover:text-foreground hover:bg-muted transition-colors" @click="emit('close')">
+            <X :size="14" />
+          </button>
+        </div>
+
+        <!-- Breadcrumb -->
+        <div class="flex items-center gap-1 px-4 py-2 border-b border-border bg-muted/30 shrink-0 overflow-x-auto">
+          <button v-if="canGoUp" class="flex items-center justify-center w-6 h-6 rounded text-muted-foreground hover:text-foreground hover:bg-muted transition-colors shrink-0 mr-1" :title="'Go up'" @click="goUp">
+            <ChevronUp :size="13" />
+          </button>
+          <template v-for="(crumb, i) in breadcrumbs" :key="crumb.path">
+            <ChevronRight v-if="i > 0" :size="12" class="text-muted-foreground/50 shrink-0" />
+            <button
+              class="text-xs px-1 py-0.5 rounded transition-colors shrink-0 whitespace-nowrap"
+              :class="i === breadcrumbs.length - 1 ? 'text-foreground font-medium' : 'text-muted-foreground hover:text-foreground hover:bg-muted'"
+              @click="navigate(crumb.path)"
+            >
+              {{ crumb.label }}
+            </button>
+          </template>
+        </div>
+
+        <!-- Search -->
+        <div class="flex items-center gap-2 px-3 py-2 border-b border-border shrink-0">
+          <Search :size="13" class="text-muted-foreground shrink-0" />
+          <input v-model="search" type="text" placeholder="Filter folders…" class="flex-1 bg-transparent text-xs text-foreground placeholder:text-muted-foreground/50 focus:outline-none" />
+          <button v-if="search" class="text-muted-foreground hover:text-foreground" @click="search = ''">
+            <X :size="12" />
+          </button>
+        </div>
+
+        <!-- Directory list -->
+        <div class="flex-1 overflow-y-auto">
+          <div v-if="loading" class="flex items-center justify-center h-full">
+            <Loader2 :size="20" class="animate-spin text-muted-foreground" />
+          </div>
+
+          <div v-else-if="error" class="flex items-center justify-center h-full">
+            <p class="text-sm text-muted-foreground">{{ error }}</p>
+          </div>
+
+          <div v-else-if="filteredEntries.length === 0" class="flex items-center justify-center h-full">
+            <p class="text-sm text-muted-foreground">No folders found</p>
+          </div>
+
+          <div v-else class="py-1">
+            <button
+              v-for="entry in filteredEntries"
+              :key="entry.path"
+              class="w-full flex items-center gap-3 px-4 py-2.5 hover:bg-muted/60 transition-colors group"
+              @click="navigate(entry.path)"
+            >
+              <Folder :size="15" class="text-primary/70 shrink-0 group-hover:hidden" />
+              <FolderOpen :size="15" class="text-primary shrink-0 hidden group-hover:block" />
+              <span class="flex-1 text-sm text-foreground text-left truncate">{{ entry.name }}</span>
+              <ChevronRight :size="13" class="text-muted-foreground/40 shrink-0" />
+            </button>
+          </div>
+        </div>
+
+        <!-- Footer -->
+        <div class="shrink-0 border-t border-border px-4 py-3 flex items-center justify-between gap-3 bg-muted/20">
+          <p class="text-xs text-muted-foreground font-mono truncate">{{ currentPath }}</p>
+          <div class="flex items-center gap-2 shrink-0">
+            <button class="px-3 py-1.5 rounded-md border border-border text-xs font-medium text-muted-foreground hover:text-foreground hover:bg-muted transition-colors" @click="emit('close')">
+              Cancel
+            </button>
+            <button class="flex items-center gap-1.5 px-3 py-1.5 rounded-md bg-primary text-primary-foreground text-xs font-medium hover:opacity-90 transition-opacity" @click="selectCurrent">
+              <Check :size="12" />
+              Select this folder
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>
diff --git a/client/src/features/library/components/LibraryCreatorAccess.vue b/client/src/features/library/components/LibraryCreatorAccess.vue
new file mode 100644
index 000000000..619332d04
--- /dev/null
+++ b/client/src/features/library/components/LibraryCreatorAccess.vue
@@ -0,0 +1,155 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { UserPlus, Trash2 } from 'lucide-vue-next'
+import { api } from '@/lib/api'
+import type { LibraryAccessEntry } from '@projectx/types'
+
+const props = defineProps<{
+  libraryId: number | null
+}>()
+
+interface UserOption {
+  id: number
+  username: string
+  name: string
+}
+
+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)
+
+async function loadAccess() {
+  if (!props.libraryId) return
+  loading.value = true
+  try {
+    const [accessRes, usersRes] = await Promise.all([api(`/api/libraries/${props.libraryId}/access`), api('/api/users')])
+    if (accessRes.ok) 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))
+    }
+  } finally {
+    loading.value = false
+  }
+}
+
+async function grant() {
+  if (!props.libraryId || !grantUserId.value) return
+  await api(`/api/libraries/${props.libraryId}/access`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ userId: grantUserId.value, accessLevel: grantLevel.value }),
+  })
+  grantUserId.value = null
+  await loadAccess()
+}
+
+async function changeLevel(userId: number, accessLevel: 'viewer' | 'editor' | 'owner') {
+  if (!props.libraryId) return
+  await api(`/api/libraries/${props.libraryId}/access/${userId}`, {
+    method: 'PATCH',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ accessLevel }),
+  })
+  await loadAccess()
+}
+
+async function revoke(userId: number) {
+  if (!props.libraryId) return
+  await api(`/api/libraries/${props.libraryId}/access/${userId}`, { method: 'DELETE' })
+  await loadAccess()
+}
+
+const ACCESS_LEVEL_LABELS = { viewer: 'Viewer', editor: 'Editor', owner: 'Owner' }
+
+onMounted(loadAccess)
+</script>
+
+<template>
+  <div class="px-6 py-6 space-y-5">
+    <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/30 mx-auto mb-2" />
+      <p class="text-sm text-muted-foreground">Access can be configured after the library is created.</p>
+    </div>
+
+    <template v-else>
+      <div>
+        <h3 class="text-sm font-semibold text-foreground mb-1">Access control</h3>
+        <p class="text-xs text-muted-foreground mb-4">Superusers always have access. Non-superusers must be granted access explicitly.</p>
+
+        <!-- Grant access row -->
+        <div class="flex gap-2 mb-4">
+          <select
+            v-model="grantUserId"
+            class="flex-1 rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-ring"
+          >
+            <option :value="null" disabled>Select a user…</option>
+            <option v-for="u in availableUsers" :key="u.id" :value="u.id">{{ u.name }} ({{ u.username }})</option>
+          </select>
+          <select
+            v-model="grantLevel"
+            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"
+          >
+            <option value="viewer">Viewer</option>
+            <option value="editor">Editor</option>
+            <option value="owner">Owner</option>
+          </select>
+          <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"
+            @click="grant"
+          >
+            <UserPlus :size="14" />
+            Grant
+          </button>
+        </div>
+
+        <!-- Access list -->
+        <div class="rounded-lg border border-border overflow-hidden">
+          <table class="w-full text-sm">
+            <thead class="bg-muted/50">
+              <tr>
+                <th class="px-4 py-3 text-left font-medium text-muted-foreground text-xs">User</th>
+                <th class="px-4 py-3 text-left font-medium text-muted-foreground text-xs">Access level</th>
+                <th class="px-4 py-3 w-10" />
+              </tr>
+            </thead>
+            <tbody class="divide-y divide-border">
+              <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"
+                    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">Viewer</option>
+                    <option value="editor">Editor</option>
+                    <option value="owner">Owner</option>
+                  </select>
+                </td>
+                <td class="px-4 py-3">
+                  <button
+                    class="p-1.5 rounded text-muted-foreground hover:text-destructive hover:bg-destructive/10 transition-colors"
+                    @click="revoke(entry.userId)"
+                  >
+                    <Trash2 :size="13" />
+                  </button>
+                </td>
+              </tr>
+              <tr v-if="accessList.length === 0">
+                <td colspan="3" class="px-4 py-6 text-center text-xs text-muted-foreground">No users have been granted access yet.</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
diff --git a/client/src/features/library/components/LibraryCreatorDetails.vue b/client/src/features/library/components/LibraryCreatorDetails.vue
new file mode 100644
index 000000000..bdb9603fd
--- /dev/null
+++ b/client/src/features/library/components/LibraryCreatorDetails.vue
@@ -0,0 +1,129 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import * as LucideIcons from 'lucide-vue-next'
+import { Library, Search, X } from 'lucide-vue-next'
+import { RecycleScroller } from 'vue-virtual-scroller'
+
+const props = defineProps<{
+  name: string
+  icon: string | null
+}>()
+
+const emit = defineEmits<{
+  'update:name': [value: string]
+  'update:icon': [value: string | null]
+}>()
+
+// ── Icon grid ──────────────────────────────────────────────────────────────
+
+const ALL_ICONS: string[] = Object.keys(LucideIcons)
+  .filter((k) => /^[A-Z]/.test(k) && !k.endsWith('Icon') && !k.startsWith('Lucide'))
+  .sort()
+
+function getIconComponent(name: string) {
+  return (LucideIcons as Record<string, unknown>)[name]
+}
+
+const COLS = 10
+const ROW_HEIGHT = 44
+
+const search = ref('')
+
+const filteredIcons = computed(() => {
+  const q = search.value.trim().toLowerCase()
+  return q ? ALL_ICONS.filter((n) => n.toLowerCase().includes(q)) : ALL_ICONS
+})
+
+interface IconRow {
+  id: number
+  icons: string[]
+}
+
+const rows = computed<IconRow[]>(() => {
+  const result: IconRow[] = []
+  const list = filteredIcons.value
+  for (let i = 0; i < list.length; i += COLS) {
+    result.push({ id: i, icons: list.slice(i, i + COLS) })
+  }
+  return result
+})
+
+const selectedIconComponent = computed(() => (props.icon ? (LucideIcons as Record<string, unknown>)[props.icon] : null) ?? Library)
+</script>
+
+<template>
+  <div class="px-6 py-6 flex flex-col gap-4 h-full min-h-0">
+    <!-- Name row with inline icon preview -->
+    <div>
+      <label class="block text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-2">Library name</label>
+      <div class="flex items-center gap-3">
+        <!-- Icon preview -->
+        <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary/10">
+          <component :is="selectedIconComponent" :size="18" class="text-primary" />
+        </div>
+        <!-- Name input -->
+        <input
+          type="text"
+          :value="name"
+          placeholder="My Library"
+          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/40 focus:outline-none focus:ring-2 focus:ring-ring"
+          @input="emit('update:name', ($event.target as HTMLInputElement).value)"
+        />
+      </div>
+    </div>
+
+    <!-- Icon picker (fills remaining height) -->
+    <div class="flex-1 flex flex-col min-h-0">
+      <div class="flex items-center justify-between mb-2">
+        <label class="text-xs font-semibold text-muted-foreground uppercase tracking-wider">Icon</label>
+        <div class="flex items-center gap-3">
+          <span v-if="icon" class="text-xs text-muted-foreground">
+            <span class="font-medium text-foreground">{{ icon }}</span>
+            <button class="ml-1.5 text-muted-foreground hover:text-foreground underline" @click="emit('update:icon', null)">clear</button>
+          </span>
+          <span class="text-xs text-muted-foreground">{{ filteredIcons.length.toLocaleString() }} icons</span>
+        </div>
+      </div>
+
+      <div class="flex flex-col rounded-lg border border-border bg-card overflow-hidden flex-1 min-h-0">
+        <!-- Search -->
+        <div class="flex items-center gap-2 px-3 py-2 border-b border-border shrink-0">
+          <Search :size="13" class="text-muted-foreground shrink-0" />
+          <input
+            v-model="search"
+            type="text"
+            placeholder="Search icons…"
+            class="flex-1 bg-transparent text-xs text-foreground placeholder:text-muted-foreground/50 focus:outline-none"
+          />
+          <button v-if="search" class="text-muted-foreground hover:text-foreground" @click="search = ''">
+            <X :size="12" />
+          </button>
+        </div>
+
+        <!-- Grid -->
+        <RecycleScroller class="flex-1 overflow-y-auto px-2 py-1" :items="rows" :item-size="ROW_HEIGHT" key-field="id">
+          <template #default="{ item }">
+            <div class="flex gap-0.5">
+              <button
+                v-for="iconName in item.icons"
+                :key="iconName"
+                class="flex items-center justify-center rounded-md transition-colors"
+                style="width: calc(100% / 10); aspect-ratio: 1"
+                :class="icon === iconName ? 'bg-primary text-primary-foreground' : 'text-muted-foreground hover:bg-muted hover:text-foreground'"
+                :title="iconName"
+                @click="emit('update:icon', icon === iconName ? null : iconName)"
+              >
+                <component :is="getIconComponent(iconName)" :size="16" />
+              </button>
+            </div>
+          </template>
+        </RecycleScroller>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+@import 'vue-virtual-scroller/dist/vue-virtual-scroller.css';
+</style>
diff --git a/client/src/features/library/components/LibraryCreatorFolders.vue b/client/src/features/library/components/LibraryCreatorFolders.vue
new file mode 100644
index 000000000..5176a5a69
--- /dev/null
+++ b/client/src/features/library/components/LibraryCreatorFolders.vue
@@ -0,0 +1,196 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Plus, Trash2, RefreshCw, FolderOpen, AlertTriangle, CheckCircle2, XCircle, Loader2 } from 'lucide-vue-next'
+import type { PrescanResult } from '@projectx/types'
+import { api } from '@/lib/api'
+import FolderPickerModal from './FolderPickerModal.vue'
+
+const props = defineProps<{
+  folders: string[]
+  prescanResult: PrescanResult | null
+  prescanLoading: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:folders': [value: string[]]
+  prescan: []
+}>()
+
+const pickerOpen = ref(false)
+const manualPath = ref('')
+const testLoading = ref(false)
+const testResult = ref<'ok' | 'error' | null>(null)
+
+function onFolderSelected(path: string) {
+  pickerOpen.value = false
+  if (!path || props.folders.includes(path)) return
+  emit('update:folders', [...props.folders, path])
+}
+
+function removeFolder(index: number) {
+  const updated = [...props.folders]
+  updated.splice(index, 1)
+  emit('update:folders', updated)
+}
+
+function prescanStatusFor(path: string) {
+  return props.prescanResult?.paths.find((p) => p.path === path) ?? null
+}
+
+function onManualInput() {
+  testResult.value = null
+}
+
+async function testPath() {
+  const trimmed = manualPath.value.trim()
+  if (!trimmed) return
+  testLoading.value = true
+  testResult.value = null
+  try {
+    const res = await api('/api/libraries/prescan', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ paths: [trimmed] }),
+    })
+    if (res.ok) {
+      const data: PrescanResult = await res.json()
+      testResult.value = data.paths[0]?.accessible ? 'ok' : 'error'
+    } else {
+      testResult.value = 'error'
+    }
+  } catch {
+    testResult.value = 'error'
+  } finally {
+    testLoading.value = false
+  }
+}
+
+function addManual() {
+  const trimmed = manualPath.value.trim()
+  if (!trimmed || props.folders.includes(trimmed)) return
+  emit('update:folders', [...props.folders, trimmed])
+  manualPath.value = ''
+  testResult.value = null
+}
+
+function onManualKeydown(e: KeyboardEvent) {
+  if (e.key === 'Enter') { e.preventDefault(); addManual() }
+}
+</script>
+
+<template>
+  <div class="px-6 py-6 space-y-5">
+    <div>
+      <h3 class="text-sm font-semibold text-foreground mb-1">Folders</h3>
+      <p class="text-xs text-muted-foreground mb-4">Add one or more directories to scan for books.</p>
+
+      <!-- Browse button -->
+      <button
+        class="flex items-center gap-2 w-full rounded-lg border border-dashed border-border px-4 py-3 text-sm text-muted-foreground hover:text-foreground hover:border-primary/50 hover:bg-muted/40 transition-colors"
+        @click="pickerOpen = true"
+      >
+        <Plus :size="15" class="shrink-0" />
+        Browse and add a folder
+      </button>
+
+      <!-- Manual entry -->
+      <div class="mt-3">
+        <p class="text-xs text-muted-foreground mb-2">Or enter a path manually:</p>
+        <div class="flex gap-2">
+          <div class="relative flex-1">
+            <input
+              v-model="manualPath"
+              type="text"
+              placeholder="/path/to/books"
+              class="w-full rounded-md border bg-background px-3 py-2 text-sm text-foreground font-mono placeholder:text-muted-foreground/40 placeholder:font-sans focus:outline-none focus:ring-2 focus:ring-ring transition-colors"
+              :class="testResult === 'ok' ? 'border-emerald-500' : testResult === 'error' ? 'border-destructive' : 'border-border'"
+              @input="onManualInput"
+              @keydown="onManualKeydown"
+            />
+            <span v-if="testResult === 'ok'" class="absolute right-2.5 top-1/2 -translate-y-1/2">
+              <CheckCircle2 :size="14" class="text-emerald-500" />
+            </span>
+            <span v-else-if="testResult === 'error'" class="absolute right-2.5 top-1/2 -translate-y-1/2">
+              <XCircle :size="14" class="text-destructive" />
+            </span>
+          </div>
+          <button
+            class="flex items-center gap-1.5 px-3 py-2 rounded-md border border-border text-xs font-medium text-muted-foreground hover:text-foreground hover:bg-muted transition-colors shrink-0 disabled:opacity-50"
+            :disabled="!manualPath.trim() || testLoading"
+            @click="testPath"
+          >
+            <Loader2 v-if="testLoading" :size="12" class="animate-spin" />
+            Test
+          </button>
+          <button
+            class="flex items-center gap-1.5 px-3 py-2 rounded-md bg-primary text-primary-foreground text-xs font-medium hover:opacity-90 transition-opacity shrink-0 disabled:opacity-50"
+            :disabled="!manualPath.trim()"
+            @click="addManual"
+          >
+            <Plus :size="12" />
+            Add
+          </button>
+        </div>
+        <p v-if="testResult === 'error'" class="mt-1.5 text-xs text-destructive">Path is not accessible on the server.</p>
+        <p v-else-if="testResult === 'ok'" class="mt-1.5 text-xs text-emerald-600 dark:text-emerald-400">Path is accessible.</p>
+      </div>
+
+      <!-- Folder list -->
+      <div class="mt-4 space-y-2">
+        <div v-for="(folder, index) in folders" :key="folder" class="rounded-lg border border-border bg-card px-4 py-3">
+          <div class="flex items-start gap-3">
+            <FolderOpen :size="15" class="text-muted-foreground shrink-0 mt-0.5" />
+            <span class="flex-1 text-sm text-foreground font-mono break-all">{{ folder }}</span>
+            <button
+              class="p-1 rounded text-muted-foreground hover:text-destructive hover:bg-destructive/10 transition-colors shrink-0"
+              @click="removeFolder(index)"
+            >
+              <Trash2 :size="13" />
+            </button>
+          </div>
+
+          <!-- Prescan result for this path -->
+          <div v-if="prescanStatusFor(folder)" class="mt-2 ml-6">
+            <div v-if="!prescanStatusFor(folder)!.accessible" class="flex items-center gap-1.5 text-xs text-destructive">
+              <XCircle :size="12" />
+              Path is not accessible
+            </div>
+            <div v-else class="flex items-center gap-3 text-xs text-muted-foreground">
+              <span class="flex items-center gap-1 text-emerald-600 dark:text-emerald-400">
+                <CheckCircle2 :size="12" />
+                {{ prescanStatusFor(folder)!.fileCount }} book file{{ prescanStatusFor(folder)!.fileCount === 1 ? '' : 's' }} found
+              </span>
+              <span v-if="prescanStatusFor(folder)!.overlapLibrary" class="flex items-center gap-1 text-amber-600 dark:text-amber-400">
+                <AlertTriangle :size="12" />
+                Overlaps with "{{ prescanStatusFor(folder)!.overlapLibrary }}"
+              </span>
+            </div>
+          </div>
+        </div>
+
+        <div v-if="folders.length === 0" class="rounded-lg border border-dashed border-border px-4 py-6 text-center">
+          <FolderOpen :size="22" class="text-muted-foreground/30 mx-auto mb-2" />
+          <p class="text-xs text-muted-foreground">No folders added yet</p>
+        </div>
+      </div>
+
+      <!-- Prescan button -->
+      <div class="flex items-center justify-between mt-4 pt-4 border-t border-border">
+        <div v-if="prescanResult" class="text-xs text-muted-foreground">
+          {{ prescanResult.totalFiles }} total book file{{ prescanResult.totalFiles === 1 ? '' : 's' }} found across all folders
+        </div>
+        <div v-else class="text-xs text-muted-foreground">Run a prescan to validate paths before saving.</div>
+        <button
+          class="flex items-center gap-1.5 px-3 py-1.5 rounded-md border border-border text-xs font-medium text-muted-foreground hover:text-foreground hover:bg-muted transition-colors disabled:opacity-50"
+          :disabled="folders.length === 0 || prescanLoading"
+          @click="emit('prescan')"
+        >
+          <RefreshCw :size="12" :class="prescanLoading ? 'animate-spin' : ''" />
+          {{ prescanLoading ? 'Scanning…' : 'Prescan' }}
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <FolderPickerModal v-if="pickerOpen" @select="onFolderSelected" @close="pickerOpen = false" />
+</template>
diff --git a/client/src/features/library/components/LibraryCreatorModal.vue b/client/src/features/library/components/LibraryCreatorModal.vue
new file mode 100644
index 000000000..51d485f37
--- /dev/null
+++ b/client/src/features/library/components/LibraryCreatorModal.vue
@@ -0,0 +1,432 @@
+<script setup lang="ts">
+import { ref, shallowRef, onMounted, onUnmounted, computed } from 'vue'
+import { X, ChevronLeft, ChevronRight, Check, Info, FolderOpen, ScanLine, Clock, Users } from 'lucide-vue-next'
+import type { Library } from '@projectx/types'
+import { useLibraryCreator } from '../composables/useLibraryCreator'
+import LibraryCreatorDetails from './LibraryCreatorDetails.vue'
+import LibraryCreatorFolders from './LibraryCreatorFolders.vue'
+import LibraryCreatorScanner from './LibraryCreatorScanner.vue'
+import LibraryCreatorSchedule from './LibraryCreatorSchedule.vue'
+import LibraryCreatorAccess from './LibraryCreatorAccess.vue'
+
+const props = defineProps<{
+  library?: Library | null
+}>()
+
+const emit = defineEmits<{
+  close: []
+  saved: [library: Library]
+}>()
+
+const creator = useLibraryCreator()
+const { form, mode, editingLibraryId, loading, prescanLoading, prescanResult, error } = creator
+
+type SectionId = 'details' | 'folders' | 'scanner' | 'schedule' | 'access'
+
+const ALL_SECTIONS: { id: SectionId; label: string; icon: unknown; component: unknown }[] = [
+  { id: 'details', label: 'Details', icon: Info, component: LibraryCreatorDetails },
+  { id: 'folders', label: 'Folders', icon: FolderOpen, component: LibraryCreatorFolders },
+  { id: 'scanner', label: 'Scanner', icon: ScanLine, component: LibraryCreatorScanner },
+  { id: 'schedule', label: 'Schedule', icon: Clock, component: LibraryCreatorSchedule },
+  { id: 'access', label: 'Access', icon: Users, component: LibraryCreatorAccess },
+]
+
+// Access is only meaningful after a library exists
+const sections = computed(() => (mode.value === 'create' ? ALL_SECTIONS.slice(0, 4) : ALL_SECTIONS))
+
+// ── Stepper state ──────────────────────────────────────────────────────────
+
+const stepIndex = ref(0)
+const visitedUpTo = ref(0) // highest step reached in create mode
+
+const activeSection = computed(() => sections.value[stepIndex.value])
+const ActiveComponent = computed(() => activeSection.value?.component)
+const activeId = computed(() => activeSection.value?.id ?? 'details')
+
+const isFirstStep = computed(() => stepIndex.value === 0)
+const isLastStep = computed(() => stepIndex.value === sections.value.length - 1)
+
+function goTo(index: number) {
+  if (index < 0 || index >= sections.value.length) return
+  // In create mode, can only jump to visited steps (not ahead)
+  if (mode.value === 'create' && index > visitedUpTo.value) return
+  stepIndex.value = index
+  mobileView.value = 'content'
+}
+
+function next() {
+  if (isLastStep.value) return
+  stepIndex.value++
+  if (stepIndex.value > visitedUpTo.value) visitedUpTo.value = stepIndex.value
+  mobileView.value = 'content'
+}
+
+function back() {
+  if (isFirstStep.value) {
+    emit('close')
+    return
+  }
+  stepIndex.value--
+  mobileView.value = 'content'
+}
+
+// ── Mobile ─────────────────────────────────────────────────────────────────
+
+const mobileView = ref<'nav' | 'content'>('nav')
+
+// ── Init ───────────────────────────────────────────────────────────────────
+
+onMounted(() => {
+  if (props.library) {
+    creator.initEdit(props.library)
+    visitedUpTo.value = ALL_SECTIONS.length - 1 // all unlocked in edit
+  } else {
+    creator.initCreate()
+    visitedUpTo.value = 0
+  }
+  stepIndex.value = 0
+  mobileView.value = mode.value === 'create' ? 'content' : 'nav'
+})
+
+// ── Save ───────────────────────────────────────────────────────────────────
+
+async function handleSave() {
+  const saved = await creator.save()
+  if (saved) emit('saved', saved)
+}
+
+// ── Keyboard ───────────────────────────────────────────────────────────────
+
+function onKeydown(e: KeyboardEvent) {
+  if (e.key === 'Escape') emit('close')
+}
+onMounted(() => document.addEventListener('keydown', onKeydown))
+onUnmounted(() => document.removeEventListener('keydown', onKeydown))
+
+// ── Section props / events ─────────────────────────────────────────────────
+
+const title = computed(() => (props.library ? `Edit: ${props.library.name}` : 'Create Library'))
+
+const sectionProps = computed(() => ({
+  details: { name: form.name, icon: form.icon },
+  folders: { folders: form.folders, prescanResult: prescanResult.value, prescanLoading: prescanLoading.value },
+  scanner: {
+    metadataPrecedence: form.metadataPrecedence,
+    formatPriority: form.formatPriority,
+    allowedFormats: form.allowedFormats,
+    excludePatterns: form.excludePatterns,
+  },
+  schedule: { watch: form.watch, autoScanCronExpression: form.autoScanCronExpression },
+  access: { libraryId: editingLibraryId.value },
+}))
+
+function getSectionProps(id: SectionId) {
+  return sectionProps.value[id]
+}
+
+function onSectionEvent(id: SectionId, event: string, value: unknown) {
+  if (event === 'update:name') form.name = value as string
+  else if (event === 'update:icon') form.icon = value as string | null
+  else if (event === 'update:folders') form.folders = value as string[]
+  else if (event === 'prescan') creator.runPrescan()
+  else if (event === 'update:metadataPrecedence') form.metadataPrecedence = value as string[]
+  else if (event === 'update:formatPriority') form.formatPriority = value as string[]
+  else if (event === 'update:allowedFormats') form.allowedFormats = value as string[]
+  else if (event === 'update:excludePatterns') form.excludePatterns = value as string[]
+  else if (event === 'update:watch') form.watch = value as boolean
+  else if (event === 'update:autoScanCronExpression') form.autoScanCronExpression = value as string | null
+}
+</script>
+
+<template>
+  <Teleport to="body">
+    <div class="fixed inset-0 z-[70] flex items-center justify-center p-4">
+      <div class="absolute inset-0 bg-black/50 backdrop-blur-[2px]" @click="emit('close')" />
+
+      <div
+        class="relative flex flex-col w-full max-w-3xl bg-background rounded-xl shadow-2xl overflow-hidden border border-border"
+        style="height: min(90vh, 680px)"
+      >
+        <!-- ── MOBILE: Nav list (edit mode only — create goes straight to content) ── -->
+        <Transition name="mobile-nav">
+          <div v-if="mobileView === 'nav'" class="md:hidden absolute inset-0 flex flex-col bg-background z-10">
+            <div class="flex items-center justify-between px-4 h-14 border-b border-border shrink-0">
+              <span class="text-base font-semibold text-foreground font-serif">{{ title }}</span>
+              <button
+                class="flex items-center justify-center w-8 h-8 rounded-lg text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
+                @click="emit('close')"
+              >
+                <X :size="16" />
+              </button>
+            </div>
+            <div class="flex-1 overflow-y-auto">
+              <button
+                v-for="(section, i) in sections"
+                :key="section.id"
+                class="w-full flex items-center gap-3 px-4 py-4 border-b border-border/60 hover:bg-muted/50 transition-colors"
+                @click="goTo(i)"
+              >
+                <div class="flex items-center justify-center w-8 h-8 rounded-lg bg-primary/10 shrink-0">
+                  <component :is="section.icon" :size="15" class="text-primary" />
+                </div>
+                <span class="flex-1 text-sm font-medium text-foreground text-left">{{ section.label }}</span>
+              </button>
+            </div>
+            <div class="px-4 py-4 border-t border-border flex gap-3 justify-end">
+              <button
+                class="px-4 py-2 rounded-md border border-border text-sm font-medium text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
+                @click="emit('close')"
+              >
+                Cancel
+              </button>
+              <button
+                class="px-4 py-2 rounded-md bg-primary text-primary-foreground text-sm font-medium hover:opacity-90 transition-opacity disabled:opacity-50"
+                :disabled="loading"
+                @click="handleSave"
+              >
+                {{ loading ? 'Saving…' : 'Save changes' }}
+              </button>
+            </div>
+          </div>
+        </Transition>
+
+        <!-- ── MOBILE: Content ───────────────────────── -->
+        <Transition name="mobile-content">
+          <div v-if="mobileView === 'content'" class="md:hidden absolute inset-0 flex flex-col bg-background z-10">
+            <div class="flex items-center gap-1 px-2 h-14 border-b border-border shrink-0">
+              <button
+                v-if="mode === 'edit'"
+                class="flex items-center gap-1 px-2 py-1.5 rounded-lg text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
+                @click="mobileView = 'nav'"
+              >
+                <ChevronLeft :size="18" />
+                <span class="text-sm">Back</span>
+              </button>
+              <span class="flex-1 text-sm font-medium text-foreground text-center" :class="mode === 'edit' ? 'pr-16' : ''">
+                {{ activeSection?.label }}
+              </span>
+              <button
+                v-if="mode === 'create'"
+                class="flex items-center justify-center w-8 h-8 rounded-lg text-muted-foreground hover:text-foreground hover:bg-muted transition-colors ml-auto"
+                @click="emit('close')"
+              >
+                <X :size="16" />
+              </button>
+            </div>
+            <div class="flex-1 overflow-y-auto">
+              <component
+                :is="ActiveComponent"
+                v-bind="getSectionProps(activeId)"
+                @update:name="onSectionEvent(activeId, 'update:name', $event)"
+                @update:icon="onSectionEvent(activeId, 'update:icon', $event)"
+                @update:folders="onSectionEvent(activeId, 'update:folders', $event)"
+                @prescan="onSectionEvent(activeId, 'prescan', null)"
+                @update:metadataPrecedence="onSectionEvent(activeId, 'update:metadataPrecedence', $event)"
+                @update:formatPriority="onSectionEvent(activeId, 'update:formatPriority', $event)"
+                @update:allowedFormats="onSectionEvent(activeId, 'update:allowedFormats', $event)"
+                @update:excludePatterns="onSectionEvent(activeId, 'update:excludePatterns', $event)"
+                @update:watch="onSectionEvent(activeId, 'update:watch', $event)"
+                @update:autoScanCronExpression="onSectionEvent(activeId, 'update:autoScanCronExpression', $event)"
+              />
+            </div>
+            <div class="shrink-0 px-4 py-4 border-t border-border">
+              <p v-if="error" class="text-xs text-destructive mb-3">{{ error }}</p>
+              <div class="flex gap-3" :class="mode === 'create' ? 'justify-between' : 'justify-end'">
+                <!-- Create mode: Back / Next or Create -->
+                <template v-if="mode === 'create'">
+                  <button
+                    class="flex items-center gap-1.5 px-4 py-2 rounded-md border border-border text-sm font-medium text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
+                    @click="back"
+                  >
+                    <ChevronLeft v-if="!isFirstStep" :size="14" />
+                    {{ isFirstStep ? 'Cancel' : 'Back' }}
+                  </button>
+                  <button
+                    v-if="!isLastStep"
+                    class="flex items-center gap-1.5 px-4 py-2 rounded-md bg-primary text-primary-foreground text-sm font-medium hover:opacity-90 transition-opacity"
+                    @click="next"
+                  >
+                    Next
+                    <ChevronRight :size="14" />
+                  </button>
+                  <button
+                    v-else
+                    class="px-4 py-2 rounded-md bg-primary text-primary-foreground text-sm font-medium hover:opacity-90 transition-opacity disabled:opacity-50"
+                    :disabled="loading"
+                    @click="handleSave"
+                  >
+                    {{ loading ? 'Creating…' : 'Create library' }}
+                  </button>
+                </template>
+                <!-- Edit mode: Cancel / Save -->
+                <template v-else>
+                  <button
+                    class="px-4 py-2 rounded-md border border-border text-sm font-medium text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
+                    @click="emit('close')"
+                  >
+                    Cancel
+                  </button>
+                  <button
+                    class="px-4 py-2 rounded-md bg-primary text-primary-foreground text-sm font-medium hover:opacity-90 transition-opacity disabled:opacity-50"
+                    :disabled="loading"
+                    @click="handleSave"
+                  >
+                    {{ loading ? 'Saving…' : 'Save changes' }}
+                  </button>
+                </template>
+              </div>
+            </div>
+          </div>
+        </Transition>
+
+        <!-- ── DESKTOP: Two-column ───────────────────── -->
+        <div class="hidden md:flex flex-1 min-h-0">
+          <!-- Left sidebar -->
+          <nav class="flex flex-col w-48 shrink-0 bg-muted/40 border-r border-border">
+            <div class="px-4 pt-5 pb-4 border-b border-border flex items-center justify-between shrink-0">
+              <span class="text-sm font-semibold text-foreground font-serif truncate">{{ title }}</span>
+              <button
+                class="flex items-center justify-center w-6 h-6 rounded text-muted-foreground hover:text-foreground hover:bg-muted transition-colors shrink-0 ml-1"
+                @click="emit('close')"
+              >
+                <X :size="14" />
+              </button>
+            </div>
+
+            <div class="flex-1 overflow-y-auto py-3 px-2">
+              <button
+                v-for="(section, i) in sections"
+                :key="section.id"
+                class="w-full flex items-center gap-2.5 px-2.5 py-2 rounded-lg text-sm transition-colors relative"
+                :class="[
+                  stepIndex === i
+                    ? 'bg-background text-foreground font-medium shadow-sm'
+                    : mode === 'create' && i > visitedUpTo
+                      ? 'text-muted-foreground/40 cursor-not-allowed'
+                      : 'text-muted-foreground hover:text-foreground hover:bg-muted/60 cursor-pointer',
+                ]"
+                :disabled="mode === 'create' && i > visitedUpTo"
+                @click="goTo(i)"
+              >
+                <!-- Step indicator: number / check / icon -->
+                <span
+                  v-if="mode === 'create'"
+                  class="flex items-center justify-center w-5 h-5 rounded-full text-[10px] font-bold shrink-0 transition-colors"
+                  :class="
+                    i < stepIndex
+                      ? 'bg-primary text-primary-foreground'
+                      : stepIndex === i
+                        ? 'bg-primary/15 text-primary ring-1 ring-primary'
+                        : 'bg-muted-foreground/15 text-muted-foreground/40'
+                  "
+                >
+                  <Check v-if="i < stepIndex" :size="10" />
+                  <template v-else>{{ i + 1 }}</template>
+                </span>
+                <component v-else :is="section.icon" :size="14" :class="stepIndex === i ? 'text-primary' : 'text-muted-foreground/70'" />
+
+                {{ section.label }}
+                <div v-if="stepIndex === i" class="absolute left-0 top-1/2 -translate-y-1/2 w-0.5 h-5 rounded-r bg-primary" />
+              </button>
+            </div>
+          </nav>
+
+          <!-- Right content -->
+          <div class="flex flex-col flex-1 min-w-0">
+            <div class="flex-1 overflow-y-auto">
+              <component
+                :is="ActiveComponent"
+                v-bind="getSectionProps(activeId)"
+                @update:name="onSectionEvent(activeId, 'update:name', $event)"
+                @update:icon="onSectionEvent(activeId, 'update:icon', $event)"
+                @update:folders="onSectionEvent(activeId, 'update:folders', $event)"
+                @prescan="onSectionEvent(activeId, 'prescan', null)"
+                @update:metadataPrecedence="onSectionEvent(activeId, 'update:metadataPrecedence', $event)"
+                @update:formatPriority="onSectionEvent(activeId, 'update:formatPriority', $event)"
+                @update:allowedFormats="onSectionEvent(activeId, 'update:allowedFormats', $event)"
+                @update:excludePatterns="onSectionEvent(activeId, 'update:excludePatterns', $event)"
+                @update:watch="onSectionEvent(activeId, 'update:watch', $event)"
+                @update:autoScanCronExpression="onSectionEvent(activeId, 'update:autoScanCronExpression', $event)"
+              />
+            </div>
+
+            <!-- Footer -->
+            <div class="shrink-0 border-t border-border px-6 py-4">
+              <p v-if="error" class="text-xs text-destructive mb-3">{{ error }}</p>
+
+              <!-- Create mode: stepper nav -->
+              <div v-if="mode === 'create'" class="flex items-center justify-between">
+                <button
+                  class="flex items-center gap-1.5 px-4 py-2 rounded-md border border-border text-sm font-medium text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
+                  @click="back"
+                >
+                  <ChevronLeft :size="14" />
+                  {{ isFirstStep ? 'Cancel' : 'Back' }}
+                </button>
+
+                <span class="text-xs text-muted-foreground"> Step {{ stepIndex + 1 }} of {{ sections.length }} </span>
+
+                <button
+                  v-if="!isLastStep"
+                  class="flex items-center gap-1.5 px-5 py-2 rounded-md bg-primary text-primary-foreground text-sm font-medium hover:opacity-90 transition-opacity"
+                  @click="next"
+                >
+                  Next
+                  <ChevronRight :size="14" />
+                </button>
+                <button
+                  v-else
+                  class="px-5 py-2 rounded-md bg-primary text-primary-foreground text-sm font-medium hover:opacity-90 transition-opacity disabled:opacity-50"
+                  :disabled="loading"
+                  @click="handleSave"
+                >
+                  {{ loading ? 'Creating…' : 'Create library' }}
+                </button>
+              </div>
+
+              <!-- Edit mode: cancel + save -->
+              <div v-else class="flex items-center justify-end gap-3">
+                <button
+                  class="px-4 py-2 rounded-md border border-border text-sm font-medium text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
+                  @click="emit('close')"
+                >
+                  Cancel
+                </button>
+                <button
+                  class="px-5 py-2 rounded-md bg-primary text-primary-foreground text-sm font-medium hover:opacity-90 transition-opacity disabled:opacity-50"
+                  :disabled="loading"
+                  @click="handleSave"
+                >
+                  {{ loading ? 'Saving…' : 'Save changes' }}
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<style scoped>
+.mobile-nav-enter-active,
+.mobile-nav-leave-active,
+.mobile-content-enter-active,
+.mobile-content-leave-active {
+  transition:
+    transform 0.2s ease,
+    opacity 0.15s ease;
+}
+.mobile-nav-enter-from {
+  transform: translateX(-100%);
+}
+.mobile-nav-leave-to {
+  transform: translateX(-100%);
+}
+.mobile-content-enter-from {
+  transform: translateX(100%);
+}
+.mobile-content-leave-to {
+  transform: translateX(100%);
+}
+</style>
diff --git a/client/src/features/library/components/LibraryCreatorScanner.vue b/client/src/features/library/components/LibraryCreatorScanner.vue
new file mode 100644
index 000000000..02b1570da
--- /dev/null
+++ b/client/src/features/library/components/LibraryCreatorScanner.vue
@@ -0,0 +1,212 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { GripVertical, Plus, X } from 'lucide-vue-next'
+import { METADATA_LABELS, FORMAT_LABELS } from '../composables/useLibraryCreator'
+
+const props = defineProps<{
+  metadataPrecedence: string[]
+  formatPriority: string[]
+  allowedFormats: string[]
+  excludePatterns: string[]
+}>()
+
+const emit = defineEmits<{
+  'update:metadataPrecedence': [value: string[]]
+  'update:formatPriority': [value: string[]]
+  'update:allowedFormats': [value: string[]]
+  'update:excludePatterns': [value: string[]]
+}>()
+
+// ── Drag-and-drop for reorderable lists ──────────────────────────────────────
+
+function useDragList(getList: () => string[], onUpdate: (v: string[]) => void) {
+  const dragFrom = ref<number | null>(null)
+  const dragOver = ref<number | 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)
+    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 }
+}
+
+const metaDrag = useDragList(
+  () => props.metadataPrecedence,
+  (v) => emit('update:metadataPrecedence', v),
+)
+const fmtDrag = useDragList(
+  () => props.formatPriority,
+  (v) => emit('update:formatPriority', v),
+)
+
+// ── Allowed formats ──────────────────────────────────────────────────────────
+
+const ALL_FORMATS = Object.keys(FORMAT_LABELS)
+
+function toggleAllowedFormat(fmt: string) {
+  const current = [...props.allowedFormats]
+  const idx = current.indexOf(fmt)
+  if (idx === -1) {
+    current.push(fmt)
+  } else {
+    current.splice(idx, 1)
+  }
+  emit('update:allowedFormats', current)
+}
+
+// ── 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">
+    <!-- Metadata precedence -->
+    <div>
+      <h3 class="text-sm font-semibold text-foreground mb-1">Metadata precedence</h3>
+      <p class="text-xs text-muted-foreground mb-3">Drag to reorder. The source higher in the list is preferred when both are present.</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-4 py-3 bg-card cursor-grab active:cursor-grabbing select-none transition-colors"
+          :class="metaDrag.dragOver.value === index ? 'bg-primary/5' : ''"
+          @dragstart="metaDrag.onDragStart(index)"
+          @dragenter.prevent="metaDrag.onDragEnter(index)"
+          @dragover.prevent
+          @drop="metaDrag.onDrop()"
+          @dragend="metaDrag.onDragEnd()"
+        >
+          <GripVertical :size="14" class="text-muted-foreground/40 shrink-0" />
+          <span class="flex items-center justify-center w-5 h-5 rounded-full bg-primary/10 text-primary text-[10px] font-bold shrink-0">
+            {{ index + 1 }}
+          </span>
+          <span class="flex-1 text-sm text-foreground">{{ METADATA_LABELS[key] ?? key }}</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- Format priority -->
+    <div>
+      <h3 class="text-sm font-semibold text-foreground mb-1">Format priority</h3>
+      <p class="text-xs text-muted-foreground mb-3">When a book has multiple formats, prefer the format highest in the list.</p>
+      <div class="rounded-lg border border-border overflow-hidden divide-y divide-border">
+        <div
+          v-for="(fmt, index) in formatPriority"
+          :key="fmt"
+          draggable="true"
+          class="flex items-center gap-3 px-4 py-2.5 bg-card cursor-grab active:cursor-grabbing select-none transition-colors"
+          :class="fmtDrag.dragOver.value === index ? 'bg-primary/5' : ''"
+          @dragstart="fmtDrag.onDragStart(index)"
+          @dragenter.prevent="fmtDrag.onDragEnter(index)"
+          @dragover.prevent
+          @drop="fmtDrag.onDrop()"
+          @dragend="fmtDrag.onDragEnd()"
+        >
+          <GripVertical :size="14" class="text-muted-foreground/40 shrink-0" />
+          <span class="flex-1 text-sm font-mono text-foreground uppercase">{{ fmt }}</span>
+          <span class="text-xs text-muted-foreground">{{ FORMAT_LABELS[fmt] ?? fmt }}</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- Allowed formats -->
+    <div>
+      <h3 class="text-sm font-semibold text-foreground mb-1">Allowed formats</h3>
+      <p class="text-xs text-muted-foreground mb-3">
+        {{ allowedFormats.length === 0 ? 'All formats are allowed.' : 'Only the selected formats will be imported.' }}
+      </p>
+      <div class="flex flex-wrap gap-2">
+        <button
+          v-for="fmt in ALL_FORMATS"
+          :key="fmt"
+          class="px-3 py-1 rounded-full text-xs 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'
+          "
+          @click="toggleAllowedFormat(fmt)"
+        >
+          {{ fmt.toUpperCase() }}
+        </button>
+      </div>
+      <p v-if="allowedFormats.length > 0" class="mt-2 text-xs text-amber-600 dark:text-amber-400">
+        Books in other formats already in the library will be marked as missing on the next scan.
+      </p>
+    </div>
+
+    <!-- Exclude patterns -->
+    <div>
+      <h3 class="text-sm font-semibold text-foreground mb-1">Exclude patterns</h3>
+      <p class="text-xs text-muted-foreground mb-3">
+        Glob patterns to skip during scanning (e.g. <code class="font-mono bg-muted px-1 rounded">**/samples/**</code>).
+      </p>
+      <div class="flex gap-2 mb-3">
+        <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/50 focus:outline-none focus:ring-2 focus:ring-ring"
+          @keydown="onPatternKeydown"
+        />
+        <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"
+          @click="addPattern"
+        >
+          <Plus :size="14" />
+          Add
+        </button>
+      </div>
+      <div class="flex flex-wrap gap-2">
+        <span
+          v-for="(pattern, i) in excludePatterns"
+          :key="pattern"
+          class="flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-muted border border-border text-xs font-mono text-foreground"
+        >
+          {{ pattern }}
+          <button class="text-muted-foreground hover:text-destructive transition-colors" @click="removePattern(i)">
+            <X :size="11" />
+          </button>
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/client/src/features/library/components/LibraryCreatorSchedule.vue b/client/src/features/library/components/LibraryCreatorSchedule.vue
new file mode 100644
index 000000000..c26d356fa
--- /dev/null
+++ b/client/src/features/library/components/LibraryCreatorSchedule.vue
@@ -0,0 +1,123 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Eye } from 'lucide-vue-next'
+
+const props = defineProps<{
+  watch: boolean
+  autoScanCronExpression: string | null
+}>()
+
+const emit = defineEmits<{
+  'update:watch': [value: boolean]
+  'update:autoScanCronExpression': [value: string | null]
+}>()
+
+const PRESETS = [
+  { label: 'Never', value: null },
+  { label: 'Every hour', value: '0 * * * *' },
+  { label: 'Every 6 hours', value: '0 */6 * * *' },
+  { label: 'Every 12 hours', value: '0 */12 * * *' },
+  { label: 'Daily', value: '0 0 * * *' },
+  { label: 'Weekly', value: '0 0 * * 1' },
+  { label: 'Custom', value: '__custom__' },
+]
+
+const isCustom = computed(() => {
+  if (props.autoScanCronExpression === null) return false
+  return !PRESETS.some((p) => p.value === props.autoScanCronExpression)
+})
+
+const selectedPreset = computed(() => {
+  if (props.autoScanCronExpression === null) return null
+  if (isCustom.value) return '__custom__'
+  return props.autoScanCronExpression
+})
+
+function selectPreset(value: string | null) {
+  if (value === '__custom__') {
+    emit('update:autoScanCronExpression', '0 0 * * *')
+  } else {
+    emit('update:autoScanCronExpression', value)
+  }
+}
+
+function humanReadableCron(cron: string | null): string {
+  if (!cron) return 'Auto-scan disabled'
+  const map: Record<string, string> = {
+    '0 * * * *': 'Every hour',
+    '0 */6 * * *': 'Every 6 hours',
+    '0 */12 * * *': 'Every 12 hours',
+    '0 0 * * *': 'Daily at midnight',
+    '0 0 * * 1': 'Weekly on Monday at midnight',
+  }
+  return map[cron] ?? `Cron: ${cron}`
+}
+</script>
+
+<template>
+  <div class="px-6 py-6 space-y-6">
+    <!-- Watch folders -->
+    <div>
+      <h3 class="text-sm font-semibold text-foreground mb-3">File watching</h3>
+      <div class="rounded-lg border border-border overflow-hidden divide-y divide-border">
+        <label class="flex items-center justify-between px-5 py-4 bg-card cursor-pointer">
+          <div>
+            <p class="text-sm font-medium text-foreground">Watch folders</p>
+            <p class="text-xs text-muted-foreground mt-0.5">Automatically detect new files added to library folders.</p>
+          </div>
+          <button
+            role="switch"
+            :aria-checked="watch"
+            class="relative inline-flex h-5 w-9 shrink-0 rounded-full border-2 border-transparent transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
+            :class="watch ? 'bg-primary' : 'bg-muted-foreground/30'"
+            @click="emit('update:watch', !watch)"
+          >
+            <span
+              class="pointer-events-none inline-block h-4 w-4 transform rounded-full bg-white shadow-lg ring-0 transition duration-200 ease-in-out"
+              :class="watch ? 'translate-x-4' : 'translate-x-0'"
+            />
+          </button>
+        </label>
+      </div>
+    </div>
+
+    <!-- Auto-scan schedule -->
+    <div>
+      <h3 class="text-sm font-semibold text-foreground mb-3">Auto-scan schedule</h3>
+      <div class="grid grid-cols-3 gap-2 mb-4">
+        <button
+          v-for="preset in PRESETS"
+          :key="String(preset.value)"
+          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 class="block text-xs font-medium text-muted-foreground mb-1.5">Cron expression</label>
+        <input
+          type="text"
+          :value="autoScanCronExpression ?? ''"
+          placeholder="0 0 * * *"
+          class="w-full rounded-md border border-border bg-background px-3 py-2 text-sm font-mono text-foreground placeholder:text-muted-foreground/50 focus:outline-none focus:ring-2 focus:ring-ring"
+          @input="emit('update:autoScanCronExpression', ($event.target as HTMLInputElement).value || null)"
+        />
+        <p class="mt-1 text-xs text-muted-foreground">Format: minute hour day month weekday</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>
+</template>
diff --git a/client/src/features/library/composables/useLibraryCreator.ts b/client/src/features/library/composables/useLibraryCreator.ts
new file mode 100644
index 000000000..2251a6790
--- /dev/null
+++ b/client/src/features/library/composables/useLibraryCreator.ts
@@ -0,0 +1,147 @@
+import { reactive, ref } from 'vue'
+import { api } from '@/lib/api'
+import type { Library, OrganizationMode, PrescanResult } from '@projectx/types'
+
+export const DEFAULT_METADATA_PRECEDENCE = ['embedded', 'opfFile']
+export const DEFAULT_FORMAT_PRIORITY = ['epub', 'pdf', 'cbz', 'cbr', 'mobi', 'azw3', 'fb2']
+
+export const METADATA_LABELS: Record<string, string> = {
+  embedded: 'Embedded metadata',
+  opfFile: 'OPF files',
+}
+
+export const FORMAT_LABELS: Record<string, string> = {
+  epub: 'EPUB',
+  pdf: 'PDF',
+  cbz: 'CBZ',
+  cbr: 'CBR',
+  mobi: 'MOBI',
+  azw3: 'AZW3',
+  fb2: 'FB2',
+}
+
+function blankForm() {
+  return {
+    name: '',
+    icon: null as string | null,
+    displayOrder: 0,
+    folders: [] as string[],
+    watch: false,
+    autoScanCronExpression: null as string | null,
+    metadataPrecedence: [...DEFAULT_METADATA_PRECEDENCE],
+    formatPriority: [...DEFAULT_FORMAT_PRIORITY],
+    allowedFormats: [] as string[],
+    organizationMode: 'auto' as OrganizationMode,
+    excludePatterns: [] as string[],
+    markAsFinishedSecondsRemaining: null as number | null,
+    markAsFinishedPercentComplete: null as number | null,
+  }
+}
+
+export function useLibraryCreator() {
+  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 error = ref<string | null>(null)
+
+  function initCreate() {
+    Object.assign(form, blankForm())
+    mode.value = 'create'
+    editingLibraryId.value = null
+    prescanResult.value = null
+    error.value = null
+  }
+
+  function initEdit(library: Library) {
+    form.name = library.name
+    form.icon = library.icon ?? null
+    form.displayOrder = library.displayOrder
+    form.folders = library.folders.map((f) => f.path)
+    form.watch = library.watch
+    form.autoScanCronExpression = library.autoScanCronExpression ?? null
+    form.metadataPrecedence = [...library.metadataPrecedence]
+    form.formatPriority = [...library.formatPriority]
+    form.allowedFormats = [...library.allowedFormats]
+    form.organizationMode = library.organizationMode
+    form.excludePatterns = [...library.excludePatterns]
+    form.markAsFinishedSecondsRemaining = library.markAsFinishedSecondsRemaining ?? null
+    form.markAsFinishedPercentComplete = library.markAsFinishedPercentComplete ?? null
+    mode.value = 'edit'
+    editingLibraryId.value = library.id
+    prescanResult.value = null
+    error.value = null
+  }
+
+  async function runPrescan() {
+    if (form.folders.length === 0) return
+    prescanLoading.value = true
+    prescanResult.value = null
+    try {
+      const res = await api('/api/libraries/prescan', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ paths: form.folders }),
+      })
+      if (res.ok) {
+        prescanResult.value = await res.json()
+      }
+    } finally {
+      prescanLoading.value = false
+    }
+  }
+
+  async function save(): Promise<Library | null> {
+    if (!form.name.trim()) {
+      error.value = 'Library name is required'
+      return null
+    }
+    if (form.folders.length === 0) {
+      error.value = 'At least one folder is required'
+      return null
+    }
+    error.value = null
+    loading.value = true
+    try {
+      const payload = { ...form }
+      let res: Response
+      if (mode.value === 'create') {
+        res = await api('/api/libraries', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(payload),
+        })
+      } else {
+        res = await api(`/api/libraries/${editingLibraryId.value}`, {
+          method: 'PATCH',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(payload),
+        })
+      }
+      if (!res.ok) {
+        const body = await res.json().catch(() => ({}))
+        error.value = body?.message ?? 'Failed to save library'
+        return null
+      }
+      return await res.json()
+    } finally {
+      loading.value = false
+    }
+  }
+
+  return {
+    form,
+    mode,
+    editingLibraryId,
+    loading,
+    prescanLoading,
+    prescanResult,
+    error,
+    initCreate,
+    initEdit,
+    runPrescan,
+    save,
+  }
+}
diff --git a/client/src/features/settings/LibrariesSettings.vue b/client/src/features/settings/LibrariesSettings.vue
index 78ee218cb..bad8dbde9 100644
--- a/client/src/features/settings/LibrariesSettings.vue
+++ b/client/src/features/settings/LibrariesSettings.vue
@@ -1,24 +1,37 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
-import { FolderOpen, Plus, RefreshCw } from 'lucide-vue-next'
+import { FolderOpen, Plus, RefreshCw, Pencil, Library } from 'lucide-vue-next'
 import { api } from '@/lib/api'
+import type { Library as LibraryType, LibraryStats } from '@projectx/types'
+import LibraryCreatorModal from '@/features/library/components/LibraryCreatorModal.vue'
 
-interface Library {
-  id: number
-  name: string
-  createdAt: string
-}
-
-const libraries = ref<Library[]>([])
+const libraries = ref<LibraryType[]>([])
+const stats = ref<Record<number, LibraryStats>>({})
 const scanning = ref<Record<number, boolean>>({})
 const scanningAll = ref(false)
+const creatorOpen = ref(false)
+const editingLibrary = ref<LibraryType | null>(null)
 
-onMounted(async () => {
+async function loadLibraries() {
   const res = await api('/api/libraries')
-  if (res.ok) libraries.value = await res.json()
-})
+  if (res.ok) {
+    libraries.value = await res.json()
+    loadAllStats()
+  }
+}
 
-async function scan(lib: Library) {
+async function loadAllStats() {
+  await Promise.all(
+    libraries.value.map(async (lib) => {
+      const res = await api(`/api/libraries/${lib.id}/stats`)
+      if (res.ok) stats.value[lib.id] = await res.json()
+    }),
+  )
+}
+
+onMounted(loadLibraries)
+
+async function scan(lib: LibraryType) {
   scanning.value[lib.id] = true
   try {
     await api(`/api/scanner/libraries/${lib.id}/scan`, { method: 'POST' })
@@ -35,6 +48,35 @@ async function scanAll() {
     scanningAll.value = false
   }
 }
+
+function openCreate() {
+  editingLibrary.value = null
+  creatorOpen.value = true
+}
+
+function openEdit(lib: LibraryType) {
+  editingLibrary.value = lib
+  creatorOpen.value = true
+}
+
+async function onSaved(library: LibraryType) {
+  creatorOpen.value = false
+  editingLibrary.value = null
+  await loadLibraries()
+}
+
+function formatBytes(bytes: number): string {
+  if (bytes === 0) return '0 B'
+  const k = 1024
+  const sizes = ['B', 'KB', 'MB', 'GB', 'TB']
+  const i = Math.floor(Math.log(bytes) / Math.log(k))
+  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(1))} ${sizes[i]}`
+}
+
+function iconComponent(iconName: string | null | undefined) {
+  // Dynamic Lucide icon lookup via pre-imported default
+  return iconName ? null : Library
+}
 </script>
 
 <template>
@@ -55,9 +97,8 @@ async function scanAll() {
           {{ scanningAll ? 'Scanning…' : 'Scan All' }}
         </button>
         <button
-          class="flex items-center gap-1.5 text-xs font-medium px-3 py-1.5 rounded-md bg-primary text-primary-foreground hover:opacity-90 transition-opacity opacity-50 cursor-not-allowed"
-          disabled
-          title="Coming soon"
+          class="flex items-center gap-1.5 text-xs font-medium px-3 py-1.5 rounded-md bg-primary text-primary-foreground hover:opacity-90 transition-opacity"
+          @click="openCreate"
         >
           <Plus :size="12" />
           Add Library
@@ -73,37 +114,51 @@ async function scanAll() {
             <FolderOpen :size="17" class="text-primary" />
           </div>
           <div class="flex-1 min-w-0">
-            <div class="flex items-center gap-2">
-              <p class="text-sm font-medium text-foreground truncate">{{ lib.name }}</p>
+            <p class="text-sm font-medium text-foreground truncate">{{ lib.name }}</p>
+            <div class="flex items-center gap-3 mt-0.5">
+              <span v-if="stats[lib.id]" class="text-xs text-muted-foreground">
+                {{ stats[lib.id].totalBooks }} book{{ stats[lib.id].totalBooks === 1 ? '' : 's' }}
+                <span v-if="stats[lib.id].totalSizeBytes > 0"> &middot; {{ formatBytes(stats[lib.id].totalSizeBytes) }}</span>
+              </span>
+              <span v-else class="text-xs text-muted-foreground">
+                Added {{ new Date(lib.createdAt).toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' }) }}
+              </span>
+              <span v-if="lib.watch" class="text-xs text-primary/70">Watching</span>
             </div>
-            <p class="text-xs text-muted-foreground mt-0.5">
-              Added {{ new Date(lib.createdAt).toLocaleDateString(undefined, { year: 'numeric', month: 'long', day: 'numeric' }) }}
-            </p>
           </div>
-          <button
-            class="flex items-center gap-1.5 text-xs font-medium px-3 py-1.5 rounded-md border border-border hover:bg-muted transition-colors text-muted-foreground hover:text-foreground disabled:opacity-50 shrink-0"
-            :disabled="scanning[lib.id]"
-            @click="scan(lib)"
-          >
-            <RefreshCw :size="12" :class="scanning[lib.id] ? 'animate-spin' : ''" />
-            {{ scanning[lib.id] ? 'Scanning…' : 'Scan' }}
-          </button>
+          <div class="flex items-center gap-1.5 shrink-0">
+            <button
+              class="p-1.5 rounded text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
+              title="Edit library"
+              @click="openEdit(lib)"
+            >
+              <Pencil :size="13" />
+            </button>
+            <button
+              class="flex items-center gap-1.5 text-xs font-medium px-3 py-1.5 rounded-md border border-border hover:bg-muted transition-colors text-muted-foreground hover:text-foreground disabled:opacity-50"
+              :disabled="scanning[lib.id]"
+              @click="scan(lib)"
+            >
+              <RefreshCw :size="12" :class="scanning[lib.id] ? 'animate-spin' : ''" />
+              {{ scanning[lib.id] ? 'Scanning…' : 'Scan' }}
+            </button>
+          </div>
         </div>
       </div>
 
       <div v-if="libraries.length === 0" class="bg-card px-5 py-12 text-center">
         <FolderOpen :size="28" class="text-muted-foreground/30 mx-auto mb-3" />
-        <p class="text-sm text-muted-foreground">No libraries configured yet.</p>
+        <p class="text-sm text-muted-foreground">No libraries yet.</p>
+        <button class="mt-3 text-xs text-primary hover:underline" @click="openCreate">Create your first library</button>
       </div>
     </div>
 
-    <!-- Info note -->
-    <div class="mt-6 rounded-lg border border-border bg-muted/40 px-5 py-4">
-      <p class="text-xs font-medium text-foreground mb-1">Library folders</p>
-      <p class="text-xs text-muted-foreground leading-relaxed">
-        Libraries are configured via the server environment and database. Folder path management and adding new libraries from the UI will be
-        available in a future update.
-      </p>
-    </div>
+    <!-- Library creator/editor modal -->
+    <LibraryCreatorModal
+      v-if="creatorOpen"
+      :library="editingLibrary"
+      @close="creatorOpen = false; editingLibrary = null"
+      @saved="onSaved"
+    />
   </div>
 </template>
diff --git a/docker-compose.yml b/docker-compose.yml
index 29263059c..e6ebb6cc4 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -8,6 +8,7 @@ services:
       POSTGRES_USER: ${POSTGRES_USER:-projectx}
       POSTGRES_PASSWORD: ${POSTGRES_PASSWORD:-projectx}
       POSTGRES_DB: ${POSTGRES_DB:-projectx}
+      POSTGRES_HOST_AUTH_METHOD: trust
     ports:
       - "5432:5432"
     volumes:
diff --git a/packages/types/src/index.ts b/packages/types/src/index.ts
index f140b2ec7..efbef2b91 100644
--- a/packages/types/src/index.ts
+++ b/packages/types/src/index.ts
@@ -1 +1,2 @@
-export * from './auth'
+export * from './auth';
+export * from './library';
diff --git a/packages/types/src/library.ts b/packages/types/src/library.ts
new file mode 100644
index 000000000..a9ec05dce
--- /dev/null
+++ b/packages/types/src/library.ts
@@ -0,0 +1,52 @@
+export type OrganizationMode = 'auto' | 'book_per_file' | 'book_per_folder';
+export type AccessLevel = 'viewer' | 'editor' | 'owner';
+
+export interface LibraryFolder {
+  id: number;
+  path: string;
+  createdAt: string;
+}
+
+export interface Library {
+  id: number;
+  name: string;
+  icon?: string | null;
+  displayOrder: number;
+  watch: boolean;
+  autoScanCronExpression?: string | null;
+  metadataPrecedence: string[];
+  formatPriority: string[];
+  allowedFormats: string[];
+  organizationMode: OrganizationMode;
+  excludePatterns: string[];
+  markAsFinishedSecondsRemaining?: number | null;
+  markAsFinishedPercentComplete?: number | null;
+  folders: LibraryFolder[];
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface LibraryStats {
+  totalBooks: number;
+  totalSizeBytes: number;
+  formatCounts: Record<string, number>;
+}
+
+export interface PrescanPathResult {
+  path: string;
+  accessible: boolean;
+  fileCount: number;
+  overlapLibrary?: string;
+}
+
+export interface PrescanResult {
+  paths: PrescanPathResult[];
+  totalFiles: number;
+}
+
+export interface LibraryAccessEntry {
+  userId: number;
+  username: string;
+  name: string;
+  accessLevel: AccessLevel;
+}
diff --git a/server/src/app.module.ts b/server/src/app.module.ts
index 80efafcc6..86bd18450 100644
--- a/server/src/app.module.ts
+++ b/server/src/app.module.ts
@@ -17,6 +17,7 @@ import { BookmarkModule } from './modules/bookmark/bookmark.module';
 import { BookModule } from './modules/book/book.module';
 import { KoboModule } from './modules/kobo/kobo.module';
 import { LibraryModule } from './modules/library/library.module';
+import { PathModule } from './modules/path/path.module';
 import { MetadataModule } from './modules/metadata/metadata.module';
 import { RoleModule } from './modules/role/role.module';
 import { ScannerModule } from './modules/scanner/scanner.module';
@@ -38,6 +39,7 @@ import { UserModule } from './modules/user/user.module';
     UserModule,
     RoleModule,
     LibraryModule,
+    PathModule,
     BookModule,
     ScannerModule,
     MetadataModule,
diff --git a/server/src/db/migrations/0000_add_oidc_schema.sql b/server/src/db/migrations/0000_baseline.sql
similarity index 95%
rename from server/src/db/migrations/0000_add_oidc_schema.sql
rename to server/src/db/migrations/0000_baseline.sql
index 72a6e5a74..c681f37fd 100644
--- a/server/src/db/migrations/0000_add_oidc_schema.sql
+++ b/server/src/db/migrations/0000_baseline.sql
@@ -115,6 +115,16 @@ CREATE TABLE "libraries" (
 	"id" serial PRIMARY KEY NOT NULL,
 	"name" varchar(255) NOT NULL,
 	"icon" varchar(100),
+	"display_order" integer DEFAULT 0 NOT NULL,
+	"watch" boolean DEFAULT false NOT NULL,
+	"auto_scan_cron_expression" text,
+	"metadata_precedence" jsonb DEFAULT '["folderStructure","embedded","nfoFile","opfFile","sidecar"]'::jsonb NOT NULL,
+	"format_priority" jsonb DEFAULT '["epub","pdf","cbz","cbr","mobi","azw3","fb2"]'::jsonb NOT NULL,
+	"allowed_formats" jsonb DEFAULT '[]'::jsonb NOT NULL,
+	"organization_mode" varchar(20) DEFAULT 'auto' NOT NULL,
+	"exclude_patterns" jsonb DEFAULT '[]'::jsonb NOT NULL,
+	"mark_as_finished_seconds_remaining" integer,
+	"mark_as_finished_percent_complete" integer,
 	"scan_mode" varchar(20) DEFAULT 'auto' NOT NULL,
 	"poll_interval_seconds" integer DEFAULT 300,
 	"created_at" timestamp DEFAULT now() NOT NULL,
diff --git a/server/src/db/migrations/meta/0000_snapshot.json b/server/src/db/migrations/meta/0000_snapshot.json
index 2b58ec4c9..ff90de0a4 100644
--- a/server/src/db/migrations/meta/0000_snapshot.json
+++ b/server/src/db/migrations/meta/0000_snapshot.json
@@ -1,5 +1,5 @@
 {
-  "id": "8b1e1a78-207d-4b60-8237-1d13069c26e0",
+  "id": "05501c4f-0a30-4fac-961f-d84a298725a2",
   "prevId": "00000000-0000-0000-0000-000000000000",
   "version": "7",
   "dialect": "postgresql",
@@ -880,6 +880,73 @@
           "primaryKey": false,
           "notNull": false
         },
+        "display_order": {
+          "name": "display_order",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "default": 0
+        },
+        "watch": {
+          "name": "watch",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": true,
+          "default": false
+        },
+        "auto_scan_cron_expression": {
+          "name": "auto_scan_cron_expression",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "metadata_precedence": {
+          "name": "metadata_precedence",
+          "type": "jsonb",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "'[\"folderStructure\",\"embedded\",\"nfoFile\",\"opfFile\",\"sidecar\"]'::jsonb"
+        },
+        "format_priority": {
+          "name": "format_priority",
+          "type": "jsonb",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "'[\"epub\",\"pdf\",\"cbz\",\"cbr\",\"mobi\",\"azw3\",\"fb2\"]'::jsonb"
+        },
+        "allowed_formats": {
+          "name": "allowed_formats",
+          "type": "jsonb",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "'[]'::jsonb"
+        },
+        "organization_mode": {
+          "name": "organization_mode",
+          "type": "varchar(20)",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "'auto'"
+        },
+        "exclude_patterns": {
+          "name": "exclude_patterns",
+          "type": "jsonb",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "'[]'::jsonb"
+        },
+        "mark_as_finished_seconds_remaining": {
+          "name": "mark_as_finished_seconds_remaining",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "mark_as_finished_percent_complete": {
+          "name": "mark_as_finished_percent_complete",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false
+        },
         "scan_mode": {
           "name": "scan_mode",
           "type": "varchar(20)",
diff --git a/server/src/db/migrations/meta/_journal.json b/server/src/db/migrations/meta/_journal.json
index 7b792b283..a7a1d4797 100644
--- a/server/src/db/migrations/meta/_journal.json
+++ b/server/src/db/migrations/meta/_journal.json
@@ -5,8 +5,8 @@
     {
       "idx": 0,
       "version": "7",
-      "when": 1768382694329,
-      "tag": "0000_add_oidc_schema",
+      "when": 1768464558856,
+      "tag": "0000_baseline",
       "breakpoints": true
     }
   ]
diff --git a/server/src/db/schema/libraries.ts b/server/src/db/schema/libraries.ts
index 6dd2a7c40..ad5629ce9 100644
--- a/server/src/db/schema/libraries.ts
+++ b/server/src/db/schema/libraries.ts
@@ -1,11 +1,33 @@
-import { integer, pgTable, serial, timestamp, varchar } from 'drizzle-orm/pg-core';
+import { boolean, integer, jsonb, pgTable, serial, text, timestamp, varchar } from 'drizzle-orm/pg-core';
 
 export const libraries = pgTable('libraries', {
   id: serial('id').primaryKey(),
   name: varchar('name', { length: 255 }).notNull(),
   icon: varchar('icon', { length: 100 }),
+  displayOrder: integer('display_order').notNull().default(0),
+
+  // File watching & scheduling
+  watch: boolean('watch').notNull().default(false),
+  autoScanCronExpression: text('auto_scan_cron_expression'),
+
+  // Scanner behaviour
+  metadataPrecedence: jsonb('metadata_precedence')
+    .$type<string[]>()
+    .notNull()
+    .default(['folderStructure', 'embedded', 'nfoFile', 'opfFile', 'sidecar']),
+  formatPriority: jsonb('format_priority').$type<string[]>().notNull().default(['epub', 'pdf', 'cbz', 'cbr', 'mobi', 'azw3', 'fb2']),
+  allowedFormats: jsonb('allowed_formats').$type<string[]>().notNull().default([]),
+  organizationMode: varchar('organization_mode', { length: 20 }).notNull().default('auto'),
+  excludePatterns: jsonb('exclude_patterns').$type<string[]>().notNull().default([]),
+
+  // Reading progress thresholds
+  markAsFinishedSecondsRemaining: integer('mark_as_finished_seconds_remaining'),
+  markAsFinishedPercentComplete: integer('mark_as_finished_percent_complete'),
+
+  // Legacy — kept for scanner compatibility
   scanMode: varchar('scan_mode', { length: 20 }).notNull().default('auto'),
   pollInterval: integer('poll_interval_seconds').default(300),
+
   createdAt: timestamp('created_at').defaultNow().notNull(),
   updatedAt: timestamp('updated_at').defaultNow().notNull(),
 });
diff --git a/server/src/modules/library/dto/create-library.dto.ts b/server/src/modules/library/dto/create-library.dto.ts
new file mode 100644
index 000000000..530b0616c
--- /dev/null
+++ b/server/src/modules/library/dto/create-library.dto.ts
@@ -0,0 +1,67 @@
+import { ArrayMinSize, IsArray, IsBoolean, IsIn, IsInt, IsNotEmpty, IsOptional, IsString, Max, MaxLength, Min } from 'class-validator';
+
+export class CreateLibraryDto {
+  @IsString()
+  @IsNotEmpty()
+  @MaxLength(255)
+  name: string;
+
+  @IsOptional()
+  @IsString()
+  @MaxLength(100)
+  icon?: string;
+
+  @IsOptional()
+  @IsInt()
+  @Min(0)
+  displayOrder?: number;
+
+  @IsArray()
+  @ArrayMinSize(1)
+  @IsString({ each: true })
+  @IsNotEmpty({ each: true })
+  folders: string[];
+
+  @IsOptional()
+  @IsBoolean()
+  watch?: boolean;
+
+  @IsOptional()
+  @IsString()
+  autoScanCronExpression?: string | null;
+
+  @IsOptional()
+  @IsArray()
+  @IsString({ each: true })
+  metadataPrecedence?: string[];
+
+  @IsOptional()
+  @IsArray()
+  @IsString({ each: true })
+  formatPriority?: string[];
+
+  @IsOptional()
+  @IsArray()
+  @IsString({ each: true })
+  allowedFormats?: string[];
+
+  @IsOptional()
+  @IsIn(['auto', 'book_per_file', 'book_per_folder'])
+  organizationMode?: string;
+
+  @IsOptional()
+  @IsArray()
+  @IsString({ each: true })
+  excludePatterns?: string[];
+
+  @IsOptional()
+  @IsInt()
+  @Min(0)
+  markAsFinishedSecondsRemaining?: number | null;
+
+  @IsOptional()
+  @IsInt()
+  @Min(0)
+  @Max(100)
+  markAsFinishedPercentComplete?: number | null;
+}
diff --git a/server/src/modules/library/dto/prescan-library.dto.ts b/server/src/modules/library/dto/prescan-library.dto.ts
new file mode 100644
index 000000000..0e25d9257
--- /dev/null
+++ b/server/src/modules/library/dto/prescan-library.dto.ts
@@ -0,0 +1,9 @@
+import { ArrayMinSize, IsArray, IsNotEmpty, IsString } from 'class-validator';
+
+export class PrescanLibraryDto {
+  @IsArray()
+  @ArrayMinSize(1)
+  @IsString({ each: true })
+  @IsNotEmpty({ each: true })
+  paths: string[];
+}
diff --git a/server/src/modules/library/dto/reorder-libraries.dto.ts b/server/src/modules/library/dto/reorder-libraries.dto.ts
new file mode 100644
index 000000000..f185167dc
--- /dev/null
+++ b/server/src/modules/library/dto/reorder-libraries.dto.ts
@@ -0,0 +1,19 @@
+import { Type } from 'class-transformer';
+import { IsArray, IsInt, Min, ValidateNested } from 'class-validator';
+
+class LibraryOrderItem {
+  @IsInt()
+  @Min(1)
+  id: number;
+
+  @IsInt()
+  @Min(0)
+  displayOrder: number;
+}
+
+export class ReorderLibrariesDto {
+  @IsArray()
+  @ValidateNested({ each: true })
+  @Type(() => LibraryOrderItem)
+  order: LibraryOrderItem[];
+}
diff --git a/server/src/modules/library/dto/update-library.dto.ts b/server/src/modules/library/dto/update-library.dto.ts
new file mode 100644
index 000000000..8450865db
--- /dev/null
+++ b/server/src/modules/library/dto/update-library.dto.ts
@@ -0,0 +1,69 @@
+import { ArrayMinSize, IsArray, IsBoolean, IsIn, IsInt, IsNotEmpty, IsOptional, IsString, Max, MaxLength, Min } from 'class-validator';
+
+export class UpdateLibraryDto {
+  @IsOptional()
+  @IsString()
+  @IsNotEmpty()
+  @MaxLength(255)
+  name?: string;
+
+  @IsOptional()
+  @IsString()
+  @MaxLength(100)
+  icon?: string | null;
+
+  @IsOptional()
+  @IsInt()
+  @Min(0)
+  displayOrder?: number;
+
+  @IsOptional()
+  @IsArray()
+  @ArrayMinSize(1)
+  @IsString({ each: true })
+  @IsNotEmpty({ each: true })
+  folders?: string[];
+
+  @IsOptional()
+  @IsBoolean()
+  watch?: boolean;
+
+  @IsOptional()
+  @IsString()
+  autoScanCronExpression?: string | null;
+
+  @IsOptional()
+  @IsArray()
+  @IsString({ each: true })
+  metadataPrecedence?: string[];
+
+  @IsOptional()
+  @IsArray()
+  @IsString({ each: true })
+  formatPriority?: string[];
+
+  @IsOptional()
+  @IsArray()
+  @IsString({ each: true })
+  allowedFormats?: string[];
+
+  @IsOptional()
+  @IsIn(['auto', 'book_per_file', 'book_per_folder'])
+  organizationMode?: string;
+
+  @IsOptional()
+  @IsArray()
+  @IsString({ each: true })
+  excludePatterns?: string[];
+
+  @IsOptional()
+  @IsInt()
+  @Min(0)
+  markAsFinishedSecondsRemaining?: number | null;
+
+  @IsOptional()
+  @IsInt()
+  @Min(0)
+  @Max(100)
+  markAsFinishedPercentComplete?: number | null;
+}
diff --git a/server/src/modules/library/library.controller.ts b/server/src/modules/library/library.controller.ts
index e54a84606..b022d772f 100644
--- a/server/src/modules/library/library.controller.ts
+++ b/server/src/modules/library/library.controller.ts
@@ -3,8 +3,12 @@ import { Body, Controller, Delete, Get, HttpCode, HttpStatus, Param, ParseIntPip
 import { CurrentUser } from '../../common/decorators/current-user.decorator';
 import { RequirePermission } from '../../common/decorators/require-permission.decorator';
 import type { RequestUser } from '../../common/types/request-user';
+import { CreateLibraryDto } from './dto/create-library.dto';
 import { GrantLibraryAccessDto } from './dto/grant-library-access.dto';
+import { PrescanLibraryDto } from './dto/prescan-library.dto';
+import { ReorderLibrariesDto } from './dto/reorder-libraries.dto';
 import { UpdateLibraryAccessDto } from './dto/update-library-access.dto';
+import { UpdateLibraryDto } from './dto/update-library.dto';
 import { LibraryService } from './library.service';
 
 @Controller('libraries')
@@ -16,6 +20,50 @@ export class LibraryController {
     return this.libraryService.findAll(user);
   }
 
+  @Get(':id')
+  findOne(@Param('id', ParseIntPipe) id: number, @CurrentUser() user: RequestUser) {
+    const isSuperuser = user.roles.some((r) => r.isSuperuser);
+    return this.libraryService.verifyUserAccess(user.id, id, isSuperuser).then(() => this.libraryService.findOne(id));
+  }
+
+  @Post()
+  @RequirePermission('manage_libraries')
+  create(@Body() dto: CreateLibraryDto) {
+    return this.libraryService.create(dto);
+  }
+
+  @Patch(':id')
+  @RequirePermission('manage_libraries')
+  update(@Param('id', ParseIntPipe) id: number, @Body() dto: UpdateLibraryDto) {
+    return this.libraryService.update(id, dto);
+  }
+
+  @Delete(':id')
+  @HttpCode(HttpStatus.NO_CONTENT)
+  @RequirePermission('manage_libraries')
+  remove(@Param('id', ParseIntPipe) id: number) {
+    return this.libraryService.remove(id);
+  }
+
+  @Post('prescan')
+  @RequirePermission('manage_libraries')
+  prescan(@Body() dto: PrescanLibraryDto) {
+    return this.libraryService.prescan(dto);
+  }
+
+  @Post('reorder')
+  @HttpCode(HttpStatus.NO_CONTENT)
+  @RequirePermission('manage_libraries')
+  reorder(@Body() dto: ReorderLibrariesDto) {
+    return this.libraryService.reorder(dto);
+  }
+
+  @Get(':id/stats')
+  getStats(@Param('id', ParseIntPipe) id: number, @CurrentUser() user: RequestUser) {
+    const isSuperuser = user.roles.some((r) => r.isSuperuser);
+    return this.libraryService.verifyUserAccess(user.id, id, isSuperuser).then(() => this.libraryService.getStats(id));
+  }
+
   // ── Library access management ─────────────────────────────────────────────
 
   @Get(':libraryId/access')
diff --git a/server/src/modules/library/library.repository.ts b/server/src/modules/library/library.repository.ts
index ec80e3f01..da4de1b0d 100644
--- a/server/src/modules/library/library.repository.ts
+++ b/server/src/modules/library/library.repository.ts
@@ -1,10 +1,10 @@
 import { Inject, Injectable } from '@nestjs/common';
-import { and, eq } from 'drizzle-orm';
+import { and, eq, inArray, sql } from 'drizzle-orm';
 import { NodePgDatabase } from 'drizzle-orm/node-postgres';
 
 import { DB } from '../../db';
 import * as schema from '../../db/schema';
-import { libraryFolders, libraries } from '../../db/schema';
+import { bookFiles, books, libraryFolders, libraries } from '../../db/schema';
 
 type Db = NodePgDatabase<typeof schema>;
 
@@ -13,29 +13,64 @@ export class LibraryRepository {
   constructor(@Inject(DB) private readonly db: Db) {}
 
   findAll() {
-    return this.db.select().from(libraries).orderBy(libraries.name);
+    return this.db.select().from(libraries).orderBy(libraries.displayOrder, libraries.name);
   }
 
   findAllForUser(userId: number) {
     return this.db
-      .select({ id: libraries.id, name: libraries.name, icon: libraries.icon, scanMode: libraries.scanMode })
+      .select({
+        id: libraries.id,
+        name: libraries.name,
+        icon: libraries.icon,
+        displayOrder: libraries.displayOrder,
+        scanMode: libraries.scanMode,
+        createdAt: libraries.createdAt,
+        updatedAt: libraries.updatedAt,
+      })
       .from(libraries)
       .innerJoin(schema.userLibraryAccess, and(eq(schema.userLibraryAccess.libraryId, libraries.id), eq(schema.userLibraryAccess.userId, userId)))
-      .orderBy(libraries.name);
+      .orderBy(libraries.displayOrder, libraries.name);
   }
 
   findById(id: number) {
     return this.db.select().from(libraries).where(eq(libraries.id, id)).limit(1);
   }
 
+  findByName(name: string, excludeId?: number) {
+    return this.db
+      .select({ id: libraries.id })
+      .from(libraries)
+      .where(
+        excludeId
+          ? and(eq(sql`lower(${libraries.name})`, name.toLowerCase()), sql`${libraries.id} != ${excludeId}`)
+          : eq(sql`lower(${libraries.name})`, name.toLowerCase()),
+      )
+      .limit(1);
+  }
+
   findFoldersByLibrary(libraryId: number) {
     return this.db.select().from(libraryFolders).where(eq(libraryFolders.libraryId, libraryId));
   }
 
+  findAllFolderPaths() {
+    return this.db
+      .select({ libraryId: libraryFolders.libraryId, path: libraryFolders.path, libraryName: libraries.name })
+      .from(libraryFolders)
+      .innerJoin(libraries, eq(libraries.id, libraryFolders.libraryId));
+  }
+
   insert(data: typeof libraries.$inferInsert) {
     return this.db.insert(libraries).values(data).returning();
   }
 
+  update(id: number, data: Partial<typeof libraries.$inferInsert>) {
+    return this.db
+      .update(libraries)
+      .set({ ...data, updatedAt: new Date() })
+      .where(eq(libraries.id, id))
+      .returning();
+  }
+
   insertFolder(data: typeof libraryFolders.$inferInsert) {
     return this.db.insert(libraryFolders).values(data).returning();
   }
@@ -48,6 +83,47 @@ export class LibraryRepository {
     return this.db.delete(libraryFolders).where(eq(libraryFolders.id, id));
   }
 
+  deleteFoldersByLibrary(libraryId: number) {
+    return this.db.delete(libraryFolders).where(eq(libraryFolders.libraryId, libraryId));
+  }
+
+  async updateDisplayOrders(order: { id: number; displayOrder: number }[]) {
+    for (const item of order) {
+      await this.db.update(libraries).set({ displayOrder: item.displayOrder }).where(eq(libraries.id, item.id));
+    }
+  }
+
+  async getStats(libraryId: number) {
+    const [countRow] = await this.db
+      .select({ count: sql<number>`count(*)::int` })
+      .from(books)
+      .where(and(eq(books.libraryId, libraryId), eq(books.status, 'present')));
+
+    const formatRows = await this.db
+      .select({
+        format: bookFiles.format,
+        count: sql<number>`count(*)::int`,
+        totalSize: sql<number>`coalesce(sum(${bookFiles.sizeBytes}), 0)::bigint`,
+      })
+      .from(bookFiles)
+      .innerJoin(books, eq(books.id, bookFiles.bookId))
+      .where(and(eq(books.libraryId, libraryId), eq(books.status, 'present'), eq(bookFiles.role, 'primary')))
+      .groupBy(bookFiles.format);
+
+    const formatCounts: Record<string, number> = {};
+    let totalSizeBytes = 0;
+    for (const row of formatRows) {
+      if (row.format) formatCounts[row.format] = row.count;
+      totalSizeBytes += Number(row.totalSize);
+    }
+
+    return {
+      totalBooks: countRow?.count ?? 0,
+      totalSizeBytes,
+      formatCounts,
+    };
+  }
+
   async hasUserAccess(userId: number, libraryId: number): Promise<boolean> {
     const row = await this.db.query.userLibraryAccess.findFirst({
       where: and(eq(schema.userLibraryAccess.userId, userId), eq(schema.userLibraryAccess.libraryId, libraryId)),
@@ -83,4 +159,29 @@ export class LibraryRepository {
       .delete(schema.userLibraryAccess)
       .where(and(eq(schema.userLibraryAccess.libraryId, libraryId), eq(schema.userLibraryAccess.userId, userId)));
   }
+
+  getUsersNotInLibrary(libraryId: number) {
+    const subquery = this.db
+      .select({ userId: schema.userLibraryAccess.userId })
+      .from(schema.userLibraryAccess)
+      .where(eq(schema.userLibraryAccess.libraryId, libraryId));
+
+    return this.db
+      .select({ id: schema.users.id, username: schema.users.username, name: schema.users.name })
+      .from(schema.users)
+      .where(and(eq(schema.users.active, true), sql`${schema.users.id} not in (${subquery})`));
+  }
+
+  getAccessWithUsers(libraryId: number) {
+    return this.db
+      .select({
+        userId: schema.userLibraryAccess.userId,
+        accessLevel: schema.userLibraryAccess.accessLevel,
+        username: schema.users.username,
+        name: schema.users.name,
+      })
+      .from(schema.userLibraryAccess)
+      .innerJoin(schema.users, eq(schema.users.id, schema.userLibraryAccess.userId))
+      .where(eq(schema.userLibraryAccess.libraryId, libraryId));
+  }
 }
diff --git a/server/src/modules/library/library.service.ts b/server/src/modules/library/library.service.ts
index f7c3f5850..95d70b2e8 100644
--- a/server/src/modules/library/library.service.ts
+++ b/server/src/modules/library/library.service.ts
@@ -1,7 +1,14 @@
-import { ForbiddenException, Injectable } from '@nestjs/common';
+import { BadRequestException, ConflictException, ForbiddenException, Injectable, NotFoundException } from '@nestjs/common';
+import { access, readdir, stat } from 'fs/promises';
+import { join } from 'path';
 
 import type { RequestUser } from '../../common/types/request-user';
+import { isPrimaryFormat } from '../scanner/lib/classify';
+import { CreateLibraryDto } from './dto/create-library.dto';
 import { GrantLibraryAccessDto } from './dto/grant-library-access.dto';
+import { PrescanLibraryDto } from './dto/prescan-library.dto';
+import { ReorderLibrariesDto } from './dto/reorder-libraries.dto';
+import { UpdateLibraryDto } from './dto/update-library.dto';
 import { LibraryRepository } from './library.repository';
 
 @Injectable()
@@ -19,8 +26,113 @@ export class LibraryService {
     return isSuperuser ? this.libraryRepo.findAll() : this.libraryRepo.findAllForUser(user.id);
   }
 
+  async findOne(id: number) {
+    const [library] = await this.libraryRepo.findById(id);
+    if (!library) throw new NotFoundException('Library not found');
+    const folders = await this.libraryRepo.findFoldersByLibrary(id);
+    return { ...library, folders };
+  }
+
+  async create(dto: CreateLibraryDto) {
+    await this.assertNameAvailable(dto.name);
+
+    const [library] = await this.libraryRepo.insert({
+      name: dto.name,
+      icon: dto.icon ?? null,
+      displayOrder: dto.displayOrder ?? 0,
+      watch: dto.watch ?? false,
+      autoScanCronExpression: dto.autoScanCronExpression ?? null,
+      metadataPrecedence: dto.metadataPrecedence ?? ['folderStructure', 'embedded', 'nfoFile', 'opfFile', 'sidecar'],
+      formatPriority: dto.formatPriority ?? ['epub', 'pdf', 'cbz', 'cbr', 'mobi', 'azw3', 'fb2'],
+      allowedFormats: dto.allowedFormats ?? [],
+      organizationMode: dto.organizationMode ?? 'auto',
+      excludePatterns: dto.excludePatterns ?? [],
+      markAsFinishedSecondsRemaining: dto.markAsFinishedSecondsRemaining ?? null,
+      markAsFinishedPercentComplete: dto.markAsFinishedPercentComplete ?? null,
+    });
+
+    const folders = await Promise.all(dto.folders.map((path) => this.libraryRepo.insertFolder({ libraryId: library.id, path })));
+
+    return { ...library, folders: folders.map(([f]) => f) };
+  }
+
+  async update(id: number, dto: UpdateLibraryDto) {
+    const [existing] = await this.libraryRepo.findById(id);
+    if (!existing) throw new NotFoundException('Library not found');
+
+    if (dto.name && dto.name !== existing.name) {
+      await this.assertNameAvailable(dto.name, id);
+    }
+
+    const { folders: folderPaths, ...fields } = dto;
+
+    const [updated] = await this.libraryRepo.update(id, fields);
+
+    if (folderPaths !== undefined) {
+      // Replace all folders: delete existing, insert new ones
+      await this.libraryRepo.deleteFoldersByLibrary(id);
+      await Promise.all(folderPaths.map((path) => this.libraryRepo.insertFolder({ libraryId: id, path })));
+    }
+
+    const folders = await this.libraryRepo.findFoldersByLibrary(id);
+    return { ...updated, folders };
+  }
+
+  async remove(id: number) {
+    const [existing] = await this.libraryRepo.findById(id);
+    if (!existing) throw new NotFoundException('Library not found');
+    await this.libraryRepo.delete(id);
+  }
+
+  async prescan(dto: PrescanLibraryDto) {
+    const allFolderPaths = await this.libraryRepo.findAllFolderPaths();
+
+    const results = await Promise.all(
+      dto.paths.map(async (inputPath) => {
+        let accessible = false;
+        let fileCount = 0;
+        let overlapLibrary: string | undefined;
+
+        try {
+          await access(inputPath);
+          const s = await stat(inputPath);
+          if (!s.isDirectory()) {
+            return { path: inputPath, accessible: false, fileCount: 0, error: 'Not a directory' };
+          }
+          accessible = true;
+          fileCount = await countPrimaryFiles(inputPath);
+        } catch {
+          accessible = false;
+        }
+
+        // Check if this path overlaps an existing library folder
+        for (const existing of allFolderPaths) {
+          if (pathsOverlap(inputPath, existing.path)) {
+            overlapLibrary = existing.libraryName;
+            break;
+          }
+        }
+
+        return { path: inputPath, accessible, fileCount, overlapLibrary };
+      }),
+    );
+
+    const totalFiles = results.reduce((sum, r) => sum + r.fileCount, 0);
+    return { paths: results, totalFiles };
+  }
+
+  async getStats(libraryId: number) {
+    const [existing] = await this.libraryRepo.findById(libraryId);
+    if (!existing) throw new NotFoundException('Library not found');
+    return this.libraryRepo.getStats(libraryId);
+  }
+
+  async reorder(dto: ReorderLibrariesDto) {
+    await this.libraryRepo.updateDisplayOrders(dto.order);
+  }
+
   getAccess(libraryId: number) {
-    return this.libraryRepo.getAccess(libraryId);
+    return this.libraryRepo.getAccessWithUsers(libraryId);
   }
 
   grantAccess(libraryId: number, dto: GrantLibraryAccessDto) {
@@ -34,4 +146,37 @@ export class LibraryService {
   revokeAccess(libraryId: number, userId: number) {
     return this.libraryRepo.revokeAccess(libraryId, userId);
   }
+
+  private async assertNameAvailable(name: string, excludeId?: number) {
+    const existing = await this.libraryRepo.findByName(name, excludeId);
+    if (existing.length > 0) throw new ConflictException('A library with this name already exists');
+  }
+}
+
+// Count primary-format files recursively in a directory (non-throwing)
+async function countPrimaryFiles(dir: string): Promise<number> {
+  let count = 0;
+  try {
+    const entries = await readdir(dir, { withFileTypes: true });
+    for (const entry of entries) {
+      if (entry.name.startsWith('.')) continue;
+      const full = join(dir, entry.name);
+      if (entry.isDirectory()) {
+        count += await countPrimaryFiles(full);
+      } else if (entry.isFile() && isPrimaryFormat(full)) {
+        count++;
+      }
+    }
+  } catch {
+    // Unreadable sub-directory — skip
+  }
+  return count;
+}
+
+// True if one path is a prefix of the other (i.e. they overlap in the file tree)
+function pathsOverlap(a: string, b: string): boolean {
+  const normalize = (p: string) => (p.endsWith('/') ? p : p + '/');
+  const na = normalize(a);
+  const nb = normalize(b);
+  return na.startsWith(nb) || nb.startsWith(na);
 }
diff --git a/server/src/modules/metadata/metadata.service.ts b/server/src/modules/metadata/metadata.service.ts
index ee2f1f651..03616865e 100644
--- a/server/src/modules/metadata/metadata.service.ts
+++ b/server/src/modules/metadata/metadata.service.ts
@@ -197,10 +197,13 @@ export class MetadataService {
   private async saveAuthors(bookId: number, parsedAuthors: { name: string; sortName: string | null }[]) {
     if (parsedAuthors.length === 0) return;
 
+    // Deduplicate by name to avoid inserting the same author twice for one book
+    const unique = parsedAuthors.filter((a, i, arr) => arr.findIndex((b) => b.name === a.name) === i);
+
     await this.db.delete(bookAuthors).where(eq(bookAuthors.bookId, bookId));
 
-    for (let i = 0; i < parsedAuthors.length; i++) {
-      const { name, sortName } = parsedAuthors[i]!;
+    for (let i = 0; i < unique.length; i++) {
+      const { name, sortName } = unique[i]!;
 
       let [author] = await this.db.select().from(authors).where(eq(authors.name, name)).limit(1);
 
@@ -208,7 +211,7 @@ export class MetadataService {
         [author] = await this.db.insert(authors).values({ name, sortName }).returning();
       }
 
-      await this.db.insert(bookAuthors).values({ bookId, authorId: author!.id, displayOrder: i });
+      await this.db.insert(bookAuthors).values({ bookId, authorId: author!.id, displayOrder: i }).onConflictDoNothing();
     }
   }
 
@@ -227,7 +230,7 @@ export class MetadataService {
         [tag] = await this.db.insert(tags).values({ name }).returning();
       }
 
-      await this.db.insert(bookTags).values({ bookId, tagId: tag!.id });
+      await this.db.insert(bookTags).values({ bookId, tagId: tag!.id }).onConflictDoNothing();
     }
   }
 }
diff --git a/server/src/modules/path/path.controller.ts b/server/src/modules/path/path.controller.ts
new file mode 100644
index 000000000..bb73fb754
--- /dev/null
+++ b/server/src/modules/path/path.controller.ts
@@ -0,0 +1,15 @@
+import { Controller, Get, Query } from '@nestjs/common';
+
+import { RequirePermission } from '../../common/decorators/require-permission.decorator';
+import { PathService } from './path.service';
+
+@Controller('path')
+export class PathController {
+  constructor(private readonly pathService: PathService) {}
+
+  @Get()
+  @RequirePermission('manage_libraries')
+  listDirectories(@Query('path') path: string) {
+    return this.pathService.listDirectories(path || '/');
+  }
+}
diff --git a/server/src/modules/path/path.module.ts b/server/src/modules/path/path.module.ts
new file mode 100644
index 000000000..f260a8114
--- /dev/null
+++ b/server/src/modules/path/path.module.ts
@@ -0,0 +1,10 @@
+import { Module } from '@nestjs/common';
+
+import { PathController } from './path.controller';
+import { PathService } from './path.service';
+
+@Module({
+  controllers: [PathController],
+  providers: [PathService],
+})
+export class PathModule {}
diff --git a/server/src/modules/path/path.service.ts b/server/src/modules/path/path.service.ts
new file mode 100644
index 000000000..70451df6d
--- /dev/null
+++ b/server/src/modules/path/path.service.ts
@@ -0,0 +1,33 @@
+import { Injectable } from '@nestjs/common';
+import { readdir, stat } from 'fs/promises';
+import { join, resolve, sep } from 'path';
+
+const BLOCKED = ['/proc', '/sys', '/dev', '/run', '/var/run'];
+
+@Injectable()
+export class PathService {
+  async listDirectories(rawPath: string): Promise<{ name: string; path: string }[]> {
+    const resolved = resolve(rawPath || '/');
+    if (BLOCKED.some((b) => resolved === b || resolved.startsWith(b + sep))) {
+      return [];
+    }
+    try {
+      const entries = await readdir(resolved, { withFileTypes: true });
+      const dirs: { name: string; path: string }[] = [];
+      for (const entry of entries) {
+        if (!entry.isDirectory() && !entry.isSymbolicLink()) continue;
+        if (entry.name.startsWith('.')) continue;
+        const full = join(resolved, entry.name);
+        try {
+          const s = await stat(full);
+          if (s.isDirectory()) dirs.push({ name: entry.name, path: full });
+        } catch {
+          // skip inaccessible entries
+        }
+      }
+      return dirs.sort((a, b) => a.name.localeCompare(b.name));
+    } catch {
+      return [];
+    }
+  }
+}