diff --git a/src/App.css b/src/App.css
index 75e21dd..0cf7a01 100644
--- a/src/App.css
+++ b/src/App.css
@@ -39,6 +39,153 @@
   margin: 0;
 }
 
+.topbar-project-name {
+  min-width: 0;
+  width: clamp(120px, 18vw, 240px);
+  padding: 4px 8px;
+  font: inherit;
+  font-size: 13px;
+  color: var(--text-h);
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  text-overflow: ellipsis;
+}
+
+.topbar-project-name:hover,
+.topbar-project-name:focus {
+  border-color: var(--border);
+  background: var(--bg);
+  outline: none;
+}
+
+.modal-projects {
+  width: min(560px, calc(100vw - 32px));
+  max-height: min(680px, calc(100vh - 48px));
+}
+
+.project-library-body {
+  overflow-y: auto;
+}
+
+.project-library-empty {
+  margin: 0;
+  font: 13px var(--mono);
+  color: var(--text);
+}
+
+.project-library-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.project-library-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+}
+
+.project-library-item.is-current {
+  border-color: var(--accent);
+}
+
+.project-library-open {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  gap: 12px;
+  min-width: 0;
+  padding: 0;
+  font: inherit;
+  color: inherit;
+  text-align: left;
+  background: none;
+  border: 0;
+  cursor: pointer;
+}
+
+.project-library-thumb {
+  flex-shrink: 0;
+  width: 64px;
+  height: 48px;
+  overflow: hidden;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+}
+
+.project-library-thumb img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.project-library-text {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.project-library-name {
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1.3;
+  color: var(--text-h);
+  overflow-wrap: anywhere;
+}
+
+.project-library-badge {
+  display: inline-block;
+  margin-left: 6px;
+  padding: 1px 6px;
+  font-size: 11px;
+  font-weight: 500;
+  vertical-align: middle;
+  color: #fff;
+  background: var(--accent);
+  border-radius: 999px;
+}
+
+.project-library-meta {
+  font-size: 12px;
+  color: var(--text);
+}
+
+.project-library-rename {
+  flex: 1;
+  min-width: 0;
+}
+
+.project-library-rename input {
+  width: 100%;
+  padding: 6px 8px;
+  font: inherit;
+  color: var(--text-h);
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+}
+
+.project-library-actions {
+  display: flex;
+  flex-shrink: 0;
+  gap: 4px;
+}
+
+.button-danger {
+  color: #b91c1c;
+  border-color: rgba(225, 29, 72, 0.35);
+}
+
 .topbar-actions {
   display: flex;
   align-items: center;
diff --git a/src/App.tsx b/src/App.tsx
index 24e7ae4..f049891 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -8,17 +8,13 @@ import BottomToolBar from './components/BottomToolBar'
 import TouchHints from './components/TouchHints'
 import ToastBanner from './components/ToastBanner'
 import PwaUpdateBanner from './components/PwaUpdateBanner'
-import ReplaceProjectModal from './components/ReplaceProjectModal'
 import { useLayoutMode } from './hooks/useLayoutMode'
 import { useEffect, useRef } from 'react'
 import { useAppStore } from './store'
-import { currentProjectHasContent, runProjectOpen } from './utils/project'
 
 function App() {
   const layoutMode = useLayoutMode()
   const setActiveTool = useAppStore((s) => s.setActiveTool)
-  const pendingProjectOpen = useAppStore((s) => s.pendingProjectOpen)
-  const setPendingProjectOpen = useAppStore((s) => s.setPendingProjectOpen)
   const prevLayoutRef = useRef(layoutMode)
 
   useEffect(() => {
@@ -49,21 +45,6 @@ function App() {
       </div>
       {layoutMode === 'touch' && <BottomToolBar />}
       <StatusBar layoutMode={layoutMode} />
-      {pendingProjectOpen && (
-        <ReplaceProjectModal
-          layoutMode={layoutMode}
-          title="Open another project?"
-          description="Opening a project replaces your current work. Save it first if you want to keep a copy."
-          confirmLabel="Open project"
-          canSave={currentProjectHasContent()}
-          onConfirm={() => {
-            const request = pendingProjectOpen
-            setPendingProjectOpen(null)
-            void runProjectOpen(request)
-          }}
-          onClose={() => setPendingProjectOpen(null)}
-        />
-      )}
     </div>
   )
 }
diff --git a/src/components/CanvasArea.tsx b/src/components/CanvasArea.tsx
index 56b112c..568766c 100644
--- a/src/components/CanvasArea.tsx
+++ b/src/components/CanvasArea.tsx
@@ -7,7 +7,7 @@ import { useAppStore } from '../store'
 import { stageRef } from '../stageRef'
 import { simplifyPath } from '../utils/geometry'
 import { importDroppedFiles, importImageFile } from '../utils/files'
-import { requestOpenProject } from '../utils/project'
+import { openSampleProject } from '../utils/project'
 import type { LayoutMode } from '../hooks/useLayoutMode'
 import { usePinchZoom } from '../hooks/usePinchZoom'
 import MapImageLayer from './canvas/MapImageLayer'
@@ -517,7 +517,7 @@ export default function CanvasArea({
   const handleLoadSample = useCallback(async () => {
     setLoadingSample(true)
     try {
-      await requestOpenProject({ kind: 'sample' })
+      await openSampleProject()
     } finally {
       setLoadingSample(false)
     }
diff --git a/src/components/ProjectLibraryModal.tsx b/src/components/ProjectLibraryModal.tsx
new file mode 100644
index 0000000..e978f80
--- /dev/null
+++ b/src/components/ProjectLibraryModal.tsx
@@ -0,0 +1,296 @@
+import { useEffect, useState } from 'react'
+import { FilePlus, Pencil, Trash2, X } from 'lucide-react'
+import { useAppStore } from '../store'
+import { useEscapeKey } from '../hooks/useEscapeKey'
+import type { LayoutMode } from '../hooks/useLayoutMode'
+import {
+  listProjectMetas,
+  readThumbnail,
+  type ProjectMeta,
+} from '../persistence/library'
+import { flushProjectSaves } from '../persistence/projectStorage'
+import {
+  createProject,
+  deleteLibraryProject,
+  openLibraryProject,
+  renameLibraryProject,
+} from '../projectLibrary'
+import { useSaveState } from '../saveStatus'
+
+export default function ProjectLibraryModal({
+  layoutMode,
+  onClose,
+}: {
+  layoutMode: LayoutMode
+  onClose: () => void
+}) {
+  const currentId = useAppStore((s) => s.projectId)
+  const saveState = useSaveState()
+  const [metas, setMetas] = useState<ProjectMeta[] | null>(null)
+  const [thumbs, setThumbs] = useState<Record<string, string>>({})
+  const [busy, setBusy] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [editingId, setEditingId] = useState<string | null>(null)
+  const [draftName, setDraftName] = useState('')
+  const [confirmDeleteId, setConfirmDeleteId] = useState<string | null>(null)
+
+  useEscapeKey(onClose)
+
+  // Refresh after the current project's autosave lands, so names and times stay current
+  useEffect(() => {
+    let cancelled = false
+    void (async () => {
+      await flushProjectSaves()
+      const list = await listProjectMetas()
+      if (!cancelled) setMetas(list)
+    })()
+    return () => {
+      cancelled = true
+    }
+  }, [currentId, saveState.savedAt])
+
+  useEffect(() => {
+    if (!metas) return
+    let cancelled = false
+    const urls: string[] = []
+    void (async () => {
+      const next: Record<string, string> = {}
+      for (const meta of metas) {
+        if (cancelled) break
+        const blob = await readThumbnail(meta.id)
+        if (blob) {
+          const url = URL.createObjectURL(blob)
+          urls.push(url)
+          next[meta.id] = url
+        }
+      }
+      if (!cancelled) setThumbs(next)
+    })()
+    return () => {
+      cancelled = true
+      urls.forEach((url) => URL.revokeObjectURL(url))
+    }
+  }, [metas])
+
+  const refresh = async () => setMetas(await listProjectMetas())
+
+  const run = async (action: () => Promise<void>) => {
+    setBusy(true)
+    setError(null)
+    try {
+      await action()
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Something went wrong')
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  const open = (meta: ProjectMeta) =>
+    run(async () => {
+      await openLibraryProject(meta.id)
+      onClose()
+    })
+
+  const startNew = () =>
+    run(async () => {
+      await createProject()
+      onClose()
+    })
+
+  const commitRename = (meta: ProjectMeta) =>
+    run(async () => {
+      if (editingId !== meta.id) return
+      setEditingId(null)
+      if (draftName.trim() !== meta.name) {
+        await renameLibraryProject(meta.id, draftName)
+      }
+      await refresh()
+    })
+
+  const remove = (meta: ProjectMeta) => {
+    if (confirmDeleteId !== meta.id) {
+      setConfirmDeleteId(meta.id)
+      return
+    }
+    void run(async () => {
+      setConfirmDeleteId(null)
+      await deleteLibraryProject(meta.id)
+      if (meta.id === currentId) onClose()
+      else await refresh()
+    })
+  }
+
+  return (
+    <div className="modal-backdrop" onClick={onClose}>
+      <div
+        className={`modal modal-projects${layoutMode === 'touch' ? ' modal-projects-touch' : ''}`}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="project-library-title"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="modal-header">
+          <h2 id="project-library-title">Projects</h2>
+          <button
+            type="button"
+            className="modal-close"
+            aria-label="Close"
+            onClick={onClose}
+          >
+            <X size={16} aria-hidden />
+          </button>
+        </div>
+
+        <div className="modal-body project-library-body">
+          {error && (
+            <p className="export-status export-status-error" role="alert">
+              {error}
+            </p>
+          )}
+
+          {metas === null && <p className="project-library-empty">Loading…</p>}
+
+          {metas?.length === 0 && (
+            <p className="project-library-empty">
+              No saved projects yet. Import a map to start one.
+            </p>
+          )}
+
+          {metas && metas.length > 0 && (
+            <ul className="project-library-list">
+              {metas.map((meta) => {
+                const isCurrent = meta.id === currentId
+                const isEditing = editingId === meta.id
+                const isConfirming = confirmDeleteId === meta.id
+                return (
+                  <li
+                    key={meta.id}
+                    className={`project-library-item${isCurrent ? ' is-current' : ''}`}
+                  >
+                    {isEditing ? (
+                      <form
+                        className="project-library-rename"
+                        onSubmit={(e) => {
+                          e.preventDefault()
+                          void commitRename(meta)
+                        }}
+                      >
+                        <input
+                          type="text"
+                          autoFocus
+                          value={draftName}
+                          maxLength={80}
+                          aria-label="Project name"
+                          onChange={(e) => setDraftName(e.target.value)}
+                          onBlur={() => void commitRename(meta)}
+                          onKeyDown={(e) => {
+                            if (e.key === 'Escape') {
+                              e.stopPropagation()
+                              setEditingId(null)
+                            }
+                          }}
+                        />
+                      </form>
+                    ) : (
+                      <button
+                        type="button"
+                        className="project-library-open"
+                        disabled={busy}
+                        onClick={() => void open(meta)}
+                      >
+                        <span className="project-library-thumb">
+                          {thumbs[meta.id] ? (
+                            <img src={thumbs[meta.id]} alt="" />
+                          ) : null}
+                        </span>
+                        <span className="project-library-text">
+                          <span className="project-library-name">
+                            {meta.name}
+                            {isCurrent && (
+                              <span className="project-library-badge">Open</span>
+                            )}
+                          </span>
+                          <span className="project-library-meta">
+                            {meta.mapName ?? 'No map yet'} · Updated{' '}
+                            {new Date(meta.updatedAt).toLocaleString([], {
+                              dateStyle: 'medium',
+                              timeStyle: 'short',
+                            })}
+                          </span>
+                        </span>
+                      </button>
+                    )}
+
+                    <div className="project-library-actions">
+                      {isConfirming ? (
+                        <>
+                          <button
+                            type="button"
+                            className="button"
+                            onClick={() => setConfirmDeleteId(null)}
+                          >
+                            Cancel
+                          </button>
+                          <button
+                            type="button"
+                            className="button button-danger"
+                            disabled={busy}
+                            onClick={() => remove(meta)}
+                          >
+                            Delete
+                          </button>
+                        </>
+                      ) : (
+                        <>
+                          <button
+                            type="button"
+                            className="button button-icon-only"
+                            aria-label={`Rename ${meta.name}`}
+                            title="Rename"
+                            disabled={busy || isEditing}
+                            onClick={() => {
+                              setEditingId(meta.id)
+                              setDraftName(meta.name)
+                            }}
+                          >
+                            <Pencil size={14} aria-hidden />
+                          </button>
+                          <button
+                            type="button"
+                            className="button button-icon-only"
+                            aria-label={`Delete ${meta.name}`}
+                            title="Delete"
+                            disabled={busy}
+                            onClick={() => remove(meta)}
+                          >
+                            <Trash2 size={14} aria-hidden />
+                          </button>
+                        </>
+                      )}
+                    </div>
+                  </li>
+                )
+              })}
+            </ul>
+          )}
+        </div>
+
+        <div className="modal-actions">
+          <button type="button" className="button" onClick={onClose}>
+            Close
+          </button>
+          <button
+            type="button"
+            className="button button-primary"
+            disabled={busy}
+            onClick={() => void startNew()}
+          >
+            <FilePlus size={14} aria-hidden />
+            New project
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/ReplaceProjectModal.tsx b/src/components/ReplaceProjectModal.tsx
deleted file mode 100644
index 65b6c77..0000000
--- a/src/components/ReplaceProjectModal.tsx
+++ /dev/null
@@ -1,122 +0,0 @@
-import { Save, X } from 'lucide-react'
-import { saveProjectFile, PROJECT_FILE_EXTENSION } from '../utils/project'
-import type { LayoutMode } from '../hooks/useLayoutMode'
-import Tooltip from './Tooltip'
-import { useEscapeKey } from '../hooks/useEscapeKey'
-
-/** Confirms before the current project is replaced by a new or opened one. */
-export default function ReplaceProjectModal({
-  layoutMode,
-  title,
-  description,
-  confirmLabel,
-  canSave,
-  onConfirm,
-  onClose,
-  onExport,
-}: {
-  layoutMode: LayoutMode
-  title: string
-  description: string
-  confirmLabel: string
-  canSave: boolean
-  onConfirm: () => void
-  onClose: () => void
-  /** Omit to hide the Export shortcut */
-  onExport?: () => void
-}) {
-  const isTouch = layoutMode === 'touch'
-
-  useEscapeKey(onClose)
-
-  const confirm = () => {
-    onConfirm()
-    onClose()
-  }
-
-  const saveButton = (
-    <button
-      type="button"
-      className="button"
-      disabled={!canSave}
-      onClick={saveProjectFile}
-    >
-      <Save size={14} aria-hidden />
-      Save
-    </button>
-  )
-
-  const exportButton = onExport && (
-    <button type="button" className="button" onClick={onExport}>
-      Export
-    </button>
-  )
-
-  return (
-    <div className="modal-backdrop" onClick={onClose}>
-      <div
-        className="modal"
-        role="dialog"
-        aria-modal="true"
-        aria-labelledby="replace-project-modal-title"
-        onClick={(e) => e.stopPropagation()}
-      >
-        <div className="modal-header">
-          <h2 id="replace-project-modal-title">{title}</h2>
-          <button
-            type="button"
-            className="modal-close"
-            aria-label="Close"
-            onClick={onClose}
-          >
-            <X size={16} aria-hidden />
-          </button>
-        </div>
-
-        <p className="modal-body">{description}</p>
-
-        <div
-          className={`modal-actions${isTouch ? ' modal-actions-touch' : ' modal-actions-split'}`}
-        >
-          <div className="modal-actions-group">
-            {isTouch ? (
-              <>
-                {saveButton}
-                {exportButton}
-              </>
-            ) : (
-              <>
-                <Tooltip
-                  content={
-                    canSave
-                      ? `Save project as ${PROJECT_FILE_EXTENSION}`
-                      : 'Nothing to save — import a map or add content first'
-                  }
-                >
-                  {saveButton}
-                </Tooltip>
-                {exportButton && (
-                  <Tooltip content="Download annotated map">
-                    {exportButton}
-                  </Tooltip>
-                )}
-              </>
-            )}
-          </div>
-          <div className="modal-actions-group">
-            <button type="button" className="button" onClick={onClose}>
-              Cancel
-            </button>
-            <button
-              type="button"
-              className="button button-primary"
-              onClick={confirm}
-            >
-              {confirmLabel}
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
diff --git a/src/components/TopBar.tsx b/src/components/TopBar.tsx
index 10c47a8..13d5d36 100644
--- a/src/components/TopBar.tsx
+++ b/src/components/TopBar.tsx
@@ -6,6 +6,7 @@ import {
   FilePlus,
   FolderOpen,
   Image,
+  Library,
   Redo2,
   RefreshCw,
   Route,
@@ -15,13 +16,14 @@ import {
 } from 'lucide-react'
 import { useAppStore } from '../store'
 import { importGpxFile, importImageFile } from '../utils/files'
-import { requestOpenProject, saveProjectFile, PROJECT_FILE_EXTENSION } from '../utils/project'
+import { openProjectFile, saveProjectFile, PROJECT_FILE_EXTENSION } from '../utils/project'
+import { createProject, renameCurrentProject } from '../projectLibrary'
+import ProjectLibraryModal from './ProjectLibraryModal'
 import { usePwaInstall } from '../hooks/usePwaInstall'
 import { usePwaUpdate } from '../hooks/usePwaUpdate'
 import type { LayoutMode } from '../hooks/useLayoutMode'
 import EditGpxModal from './EditGpxModal'
 import ExportModal from './ExportModal'
-import ReplaceProjectModal from './ReplaceProjectModal'
 import Tooltip from './Tooltip'
 import TopBarMenu from './TopBarMenu'
 import { buildOverflowActions } from './overflowActions'
@@ -43,14 +45,15 @@ export default function TopBar({
   const canRedo = useAppStore((s) => s.future.length > 0)
   const undo = useAppStore((s) => s.undo)
   const redo = useAppStore((s) => s.redo)
-  const newProject = useAppStore((s) => s.newProject)
+  const projectName = useAppStore((s) => s.projectName)
+  const setProjectName = useAppStore((s) => s.setProjectName)
 
   const imageInputRef = useRef<HTMLInputElement>(null)
   const gpxInputRef = useRef<HTMLInputElement>(null)
   const projectInputRef = useRef<HTMLInputElement>(null)
   const [gpxModalOpen, setGpxModalOpen] = useState(false)
   const [exportModalOpen, setExportModalOpen] = useState(false)
-  const [newProjectModalOpen, setNewProjectModalOpen] = useState(false)
+  const [libraryOpen, setLibraryOpen] = useState(false)
   const { canInstall, install } = usePwaInstall()
   const { updateAvailable, applyUpdate } = usePwaUpdate()
 
@@ -58,13 +61,7 @@ export default function TopBar({
   const isCompact = layoutMode === 'compact'
   const showOverflow = isTouch || isCompact
 
-  const handleNewProject = () => {
-    if (!canSave) {
-      newProject()
-      return
-    }
-    setNewProjectModalOpen(true)
-  }
+  const handleNewProject = () => void createProject()
 
   const overflowActions = buildOverflowActions({
     mapImage: mapImage !== null,
@@ -76,6 +73,7 @@ export default function TopBar({
     onImportGpx: () => gpxInputRef.current?.click(),
     onEditGpx: () => setGpxModalOpen(true),
     onNew: handleNewProject,
+    onProjects: () => setLibraryOpen(true),
     onOpen: () => projectInputRef.current?.click(),
     onSave: saveProjectFile,
     onExport: () => setExportModalOpen(true),
@@ -112,6 +110,18 @@ export default function TopBar({
           height={20}
         />
         {!isTouch && <h1>O-Analysis</h1>}
+        {!isTouch && (
+          <input
+            className="topbar-project-name"
+            type="text"
+            value={projectName}
+            maxLength={80}
+            aria-label="Project name"
+            title="Project name"
+            onChange={(e) => setProjectName(e.target.value)}
+            onBlur={(e) => renameCurrentProject(e.target.value)}
+          />
+        )}
       </div>
 
       {importError && !isTouch && errorBanner}
@@ -146,7 +156,7 @@ export default function TopBar({
           hidden
           onChange={(e) => {
             const file = e.target.files?.[0]
-            if (file) void requestOpenProject({ kind: 'file', file, source: 'file_picker' })
+            if (file) void openProjectFile(file, 'file_picker')
             e.target.value = ''
           }}
         />
@@ -223,6 +233,16 @@ export default function TopBar({
                 <span className="button-label">New</span>
               </button>
             </Tooltip>
+            <Tooltip content="Switch between saved projects">
+              <button
+                type="button"
+                className="button"
+                onClick={() => setLibraryOpen(true)}
+              >
+                <Library size={16} aria-hidden />
+                <span className="button-label">Projects</span>
+              </button>
+            </Tooltip>
             <Tooltip content={`Open a saved project (${PROJECT_FILE_EXTENSION})`}>
               <button
                 type="button"
@@ -314,23 +334,10 @@ export default function TopBar({
         />
       )}
 
-      {newProjectModalOpen && (
-        <ReplaceProjectModal
+      {libraryOpen && (
+        <ProjectLibraryModal
           layoutMode={layoutMode}
-          title="Start a new project?"
-          description="Your current work will be cleared when you start a new project. Save or export it first if you want to keep a copy."
-          confirmLabel="Start new"
-          canSave={canSave}
-          onConfirm={newProject}
-          onClose={() => setNewProjectModalOpen(false)}
-          onExport={
-            mapImage !== null
-              ? () => {
-                  setNewProjectModalOpen(false)
-                  setExportModalOpen(true)
-                }
-              : undefined
-          }
+          onClose={() => setLibraryOpen(false)}
         />
       )}
     </header>
diff --git a/src/components/overflowActions.tsx b/src/components/overflowActions.tsx
index 7437515..d54fe34 100644
--- a/src/components/overflowActions.tsx
+++ b/src/components/overflowActions.tsx
@@ -4,6 +4,7 @@ import {
   FolderOpen,
   HardDriveDownload,
   Image,
+  Library,
   RefreshCw,
   Route,
   Save,
@@ -29,6 +30,7 @@ export function buildOverflowActions(opts: {
   onImportGpx: () => void
   onEditGpx: () => void
   onNew: () => void
+  onProjects: () => void
   onOpen: () => void
   onSave: () => void
   onExport: () => void
@@ -62,6 +64,12 @@ export function buildOverflowActions(opts: {
       icon: <FilePlus size={16} aria-hidden />,
       onClick: opts.onNew,
     },
+    {
+      id: 'projects',
+      label: 'Projects',
+      icon: <Library size={16} aria-hidden />,
+      onClick: opts.onProjects,
+    },
     {
       id: 'open',
       label: 'Open Project',
diff --git a/src/persistence/library.test.ts b/src/persistence/library.test.ts
new file mode 100644
index 0000000..e85b4c4
--- /dev/null
+++ b/src/persistence/library.test.ts
@@ -0,0 +1,17 @@
+import { describe, expect, it } from 'vitest'
+import { defaultProjectName, DEFAULT_PROJECT_NAME } from './library'
+
+describe('defaultProjectName', () => {
+  it('uses the map name without its extension', () => {
+    expect(defaultProjectName('Vyssi Brod 2026.png')).toBe('Vyssi Brod 2026')
+  })
+
+  it('falls back to the default when there is no map', () => {
+    expect(defaultProjectName(null)).toBe(DEFAULT_PROJECT_NAME)
+    expect(defaultProjectName(undefined)).toBe(DEFAULT_PROJECT_NAME)
+  })
+
+  it('falls back when the map name is only an extension', () => {
+    expect(defaultProjectName('.png')).toBe(DEFAULT_PROJECT_NAME)
+  })
+})
diff --git a/src/persistence/library.ts b/src/persistence/library.ts
new file mode 100644
index 0000000..fb99791
--- /dev/null
+++ b/src/persistence/library.ts
@@ -0,0 +1,193 @@
+import {
+  createStore,
+  del,
+  get,
+  keys,
+  set,
+  del as delLegacy,
+  get as getLegacy,
+} from 'idb-keyval'
+import type {
+  Annotation,
+  DrawnPath,
+  GpxTrack,
+  MapImage,
+  MarkerDisplayMode,
+} from '../types'
+
+export const DEFAULT_PROJECT_NAME = 'Untitled project'
+
+/** Name for a project that has none: the map's name, or the default. */
+export function defaultProjectName(mapImageName: string | null | undefined): string {
+  const base = mapImageName?.replace(/\.[^.]+$/, '').trim()
+  return base || DEFAULT_PROJECT_NAME
+}
+
+/** Everything saved for one project. Pointer and pan/zoom are intentionally absent. */
+export interface PersistedProject {
+  projectId: string
+  projectName: string
+  mapImage: MapImage | null
+  tracks: GpxTrack[]
+  paths: DrawnPath[]
+  annotations: Annotation[]
+  strokeWidth: number
+  strokeColor: string
+  strokeOpacity: number
+  markerDisplayMode: MarkerDisplayMode
+  annotationTextScalePct: number
+  rotation: number
+}
+
+/** Library listing entry, kept separate from the heavy project records. */
+export interface ProjectMeta {
+  id: string
+  name: string
+  /** Name of the map image, if one has been imported */
+  mapName: string | null
+  createdAt: number
+  updatedAt: number
+}
+
+const libraryStore = createStore('o-analysis-library', 'projects')
+
+const ACTIVE_KEY = 'active'
+const metaKey = (id: string) => `meta:${id}`
+const stateKey = (id: string) => `state:${id}`
+const imageKey = (id: string) => `image:${id}`
+const thumbKey = (id: string) => `thumb:${id}`
+
+/** Keys written by the single-project storage that predates the library. */
+const LEGACY_KEY = 'map-analysis'
+
+export function newProjectId(): string {
+  return `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 10)}`
+}
+
+export async function getActiveProjectId(): Promise<string | null> {
+  return (await get<string>(ACTIVE_KEY, libraryStore)) ?? null
+}
+
+export async function setActiveProjectId(id: string): Promise<void> {
+  await set(ACTIVE_KEY, id, libraryStore)
+}
+
+export async function readMeta(id: string): Promise<ProjectMeta | null> {
+  return (await get<ProjectMeta>(metaKey(id), libraryStore)) ?? null
+}
+
+export async function writeMeta(meta: ProjectMeta): Promise<void> {
+  await set(metaKey(meta.id), meta, libraryStore)
+}
+
+/** All saved projects, most recently changed first. */
+export async function listProjectMetas(): Promise<ProjectMeta[]> {
+  const allKeys = await keys(libraryStore)
+  const metaKeys = allKeys.filter(
+    (k): k is string => typeof k === 'string' && k.startsWith('meta:'),
+  )
+  const metas = await Promise.all(
+    metaKeys.map((k) => get<ProjectMeta>(k, libraryStore)),
+  )
+  return metas
+    .filter((m): m is ProjectMeta => m !== undefined)
+    .sort((a, b) => b.updatedAt - a.updatedAt)
+}
+
+/** Reads a project, restoring the map image from its blob. Null if it was never saved. */
+export async function readProjectState(
+  id: string,
+): Promise<PersistedProject | null> {
+  const raw = await get<string>(stateKey(id), libraryStore)
+  if (!raw) return null
+  const state = JSON.parse(raw) as PersistedProject
+  if (state.mapImage && !state.mapImage.src) {
+    const blob = await get<Blob>(imageKey(id), libraryStore)
+    state.mapImage = blob
+      ? { ...state.mapImage, src: await blobToDataUrl(blob) }
+      : null
+  }
+  return state
+}
+
+/** Writes project JSON with the map image replaced by a placeholder. */
+export async function writeProjectState(
+  state: PersistedProject,
+): Promise<void> {
+  const withPlaceholder: PersistedProject = {
+    ...state,
+    mapImage: state.mapImage ? { ...state.mapImage, src: '' } : null,
+  }
+  await set(stateKey(state.projectId), JSON.stringify(withPlaceholder), libraryStore)
+}
+
+export async function writeProjectImage(
+  id: string,
+  image: Blob | null,
+  thumbnail: Blob | null,
+): Promise<void> {
+  if (image) await set(imageKey(id), image, libraryStore)
+  else await del(imageKey(id), libraryStore)
+  if (thumbnail) await set(thumbKey(id), thumbnail, libraryStore)
+  else await del(thumbKey(id), libraryStore)
+}
+
+export async function readThumbnail(id: string): Promise<Blob | null> {
+  return (await get<Blob>(thumbKey(id), libraryStore)) ?? null
+}
+
+export async function deleteProjectRecords(id: string): Promise<void> {
+  await del(stateKey(id), libraryStore)
+  await del(imageKey(id), libraryStore)
+  await del(thumbKey(id), libraryStore)
+  await del(metaKey(id), libraryStore)
+  if ((await getActiveProjectId()) === id) {
+    await del(ACTIVE_KEY, libraryStore)
+  }
+}
+
+/**
+ * Moves the single project saved by the previous storage format into the
+ * library. Returns the migrated project, or null when there is nothing to move.
+ */
+export async function takeLegacyProject(): Promise<PersistedProject | null> {
+  const raw = await getLegacy<string>(LEGACY_KEY)
+  if (!raw) return null
+  const parsed = JSON.parse(raw) as { state: Omit<PersistedProject, 'projectId' | 'projectName'> }
+  const legacy = parsed.state
+  const id = newProjectId()
+
+  let mapImage = legacy.mapImage
+  if (mapImage && !mapImage.src) {
+    const blob = await getLegacy<Blob>(`${LEGACY_KEY}:image`)
+    mapImage = blob ? { ...mapImage, src: await blobToDataUrl(blob) } : null
+  }
+
+  const state: PersistedProject = {
+    ...legacy,
+    mapImage,
+    projectId: id,
+    projectName: mapImage?.name.replace(/\.[^.]+$/, '') || DEFAULT_PROJECT_NAME,
+  }
+  return state
+}
+
+/** Removes the legacy keys once their contents are in the library. */
+export async function deleteLegacyProject(): Promise<void> {
+  await delLegacy(LEGACY_KEY)
+  await delLegacy(`${LEGACY_KEY}:image`)
+}
+
+export async function dataUrlToBlob(dataUrl: string): Promise<Blob> {
+  const response = await fetch(dataUrl)
+  return response.blob()
+}
+
+export function blobToDataUrl(blob: Blob): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+    reader.onload = () => resolve(reader.result as string)
+    reader.onerror = () => reject(reader.error)
+    reader.readAsDataURL(blob)
+  })
+}
diff --git a/src/persistence/projectStorage.ts b/src/persistence/projectStorage.ts
new file mode 100644
index 0000000..fbd2431
--- /dev/null
+++ b/src/persistence/projectStorage.ts
@@ -0,0 +1,216 @@
+import type { PersistStorage, StorageValue } from 'zustand/middleware'
+import { hasUnsavedEdits, setSaveState } from '../saveStatus'
+import type { MapImage } from '../types'
+import {
+  dataUrlToBlob,
+  deleteLegacyProject,
+  getActiveProjectId,
+  readMeta,
+  readProjectState,
+  setActiveProjectId,
+  takeLegacyProject,
+  writeMeta,
+  writeProjectImage,
+  writeProjectState,
+  type PersistedProject,
+} from './library'
+
+const PERSIST_DEBOUNCE_MS = 400
+const THUMBNAIL_MAX_PX = 240
+
+/** Ids of projects that have a record in the library */
+const recorded = new Set<string>()
+/** The project and map image most recently written, or adopted from storage */
+let storedProjectId: string | null = null
+let storedImage: MapImage | null = null
+/** The last state handed to zustand, used to skip no-op writes */
+let last: PersistedProject | null = null
+
+let timer: ReturnType<typeof setTimeout> | null = null
+let pending: PersistedProject | null = null
+/** Serializes writes so a slow write cannot land after a newer one */
+let writes: Promise<void> = Promise.resolve()
+
+function samePersisted(a: PersistedProject, b: PersistedProject): boolean {
+  return (
+    a.projectId === b.projectId &&
+    a.projectName === b.projectName &&
+    a.mapImage === b.mapImage &&
+    a.tracks === b.tracks &&
+    a.paths === b.paths &&
+    a.annotations === b.annotations &&
+    a.strokeWidth === b.strokeWidth &&
+    a.strokeColor === b.strokeColor &&
+    a.strokeOpacity === b.strokeOpacity &&
+    a.markerDisplayMode === b.markerDisplayMode &&
+    a.annotationTextScalePct === b.annotationTextScalePct &&
+    a.rotation === b.rotation
+  )
+}
+
+function hasContent(state: PersistedProject): boolean {
+  return (
+    state.mapImage !== null ||
+    state.tracks.length > 0 ||
+    state.paths.length > 0 ||
+    state.annotations.length > 0
+  )
+}
+
+/** Downscaled JPEG for the library list. Null if the image cannot be decoded. */
+async function makeThumbnail(dataUrl: string): Promise<Blob | null> {
+  try {
+    const img = await new Promise<HTMLImageElement>((resolve, reject) => {
+      const el = new Image()
+      el.onload = () => resolve(el)
+      el.onerror = () => reject(new Error('Could not decode map image'))
+      el.src = dataUrl
+    })
+    const scale = Math.min(1, THUMBNAIL_MAX_PX / Math.max(img.width, img.height))
+    const canvas = document.createElement('canvas')
+    canvas.width = Math.max(1, Math.round(img.width * scale))
+    canvas.height = Math.max(1, Math.round(img.height * scale))
+    const ctx = canvas.getContext('2d')
+    if (!ctx) return null
+    ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
+    return await new Promise<Blob | null>((resolve) =>
+      canvas.toBlob((blob) => resolve(blob), 'image/jpeg', 0.8),
+    )
+  } catch {
+    return null
+  }
+}
+
+/** Writes one project's record, image, thumbnail and library entry. */
+async function persistState(state: PersistedProject): Promise<void> {
+  const id = state.projectId
+  // Skip brand-new empty projects so creating one does not add a blank library entry
+  if (!hasContent(state) && !recorded.has(id)) return
+
+  if (id !== storedProjectId || state.mapImage !== storedImage) {
+    if (state.mapImage) {
+      const image = await dataUrlToBlob(state.mapImage.src)
+      const thumbnail = await makeThumbnail(state.mapImage.src)
+      await writeProjectImage(id, image, thumbnail)
+    } else {
+      await writeProjectImage(id, null, null)
+    }
+    storedImage = state.mapImage
+  }
+
+  await writeProjectState(state)
+  const existing = await readMeta(id)
+  const now = Date.now()
+  await writeMeta({
+    id,
+    name: state.projectName,
+    mapName: state.mapImage?.name ?? null,
+    createdAt: existing?.createdAt ?? now,
+    updatedAt: now,
+  })
+  await setActiveProjectId(id)
+  storedProjectId = id
+  recorded.add(id)
+}
+
+function clearPending(): void {
+  if (timer !== null) {
+    clearTimeout(timer)
+    timer = null
+  }
+  pending = null
+}
+
+function flushNow(): void {
+  if (timer !== null) {
+    clearTimeout(timer)
+    timer = null
+  }
+  const job = pending
+  pending = null
+  if (!job) return
+  setSaveState({ status: 'saving', savedAt: null })
+  writes = writes
+    .then(() => persistState(job))
+    .then(() => {
+      // A newer edit may have arrived while this write was in flight
+      if (!pending) setSaveState({ status: 'saved', savedAt: Date.now() })
+    })
+    .catch((error: unknown) => {
+      console.error('Autosave failed', error)
+      setSaveState({ status: 'error', savedAt: null })
+    })
+}
+
+/** Writes any pending edit now and resolves once every queued write has finished. */
+export function flushProjectSaves(): Promise<void> {
+  flushNow()
+  return writes
+}
+
+/**
+ * Records that `state` is what storage already holds for its project, so the
+ * next autosave only writes what changed. Call after loading a project.
+ */
+export function adoptProjectState(state: PersistedProject): void {
+  clearPending()
+  last = state
+  storedProjectId = state.projectId
+  storedImage = state.mapImage
+  if (hasContent(state)) recorded.add(state.projectId)
+}
+
+/** Writes a project immediately, bypassing the debounce. Used for imports. */
+export function saveProjectNow(state: PersistedProject): Promise<void> {
+  clearPending()
+  writes = writes.then(() => persistState(state))
+  return writes
+}
+
+export function createProjectStorage(): PersistStorage<PersistedProject> {
+  if (typeof window !== 'undefined') {
+    window.addEventListener('pagehide', flushNow)
+    // Warn only when an edit would be lost; a normal save in progress needs no prompt
+    window.addEventListener('beforeunload', (event) => {
+      const unsaved = hasUnsavedEdits()
+      flushNow()
+      if (unsaved) {
+        event.preventDefault()
+        event.returnValue = ''
+      }
+    })
+  }
+
+  return {
+    getItem: async () => {
+      const activeId = await getActiveProjectId()
+      let state = activeId ? await readProjectState(activeId) : null
+      if (!state) {
+        // Projects saved before the library existed move into it once
+        const legacy = await takeLegacyProject()
+        if (legacy) {
+          await saveProjectNow(legacy)
+          await deleteLegacyProject()
+          state = legacy
+        }
+      }
+      if (!state) return null
+      adoptProjectState(state)
+      return { state, version: 1 } as StorageValue<PersistedProject>
+    },
+    setItem: (_name, value) => {
+      const next = value.state
+      if (last && samePersisted(last, next)) return
+      last = next
+      pending = next
+      setSaveState({ status: 'pending', savedAt: null })
+      if (timer !== null) clearTimeout(timer)
+      timer = setTimeout(flushNow, PERSIST_DEBOUNCE_MS)
+    },
+    removeItem: async () => {
+      clearPending()
+      last = null
+      await writes
+    },
+  }
+}
diff --git a/src/projectLibrary.ts b/src/projectLibrary.ts
new file mode 100644
index 0000000..fe2d90c
--- /dev/null
+++ b/src/projectLibrary.ts
@@ -0,0 +1,119 @@
+import { useAppStore, type ProjectData } from './store'
+import {
+  DEFAULT_PROJECT_NAME,
+  defaultProjectName,
+  deleteProjectRecords,
+  listProjectMetas,
+  newProjectId,
+  readMeta,
+  readProjectState,
+  setActiveProjectId,
+  writeMeta,
+  writeProjectState,
+  type PersistedProject,
+} from './persistence/library'
+import {
+  adoptProjectState,
+  flushProjectSaves,
+  saveProjectNow,
+} from './persistence/projectStorage'
+
+/** The per-project settings that stay put when switching projects. */
+function sessionSettings(): Omit<
+  PersistedProject,
+  'projectId' | 'projectName' | 'mapImage' | 'tracks' | 'paths' | 'annotations' | 'rotation'
+> {
+  const s = useAppStore.getState()
+  return {
+    strokeWidth: s.strokeWidth,
+    strokeColor: s.strokeColor,
+    strokeOpacity: s.strokeOpacity,
+    markerDisplayMode: s.markerDisplayMode,
+    annotationTextScalePct: s.annotationTextScalePct,
+  }
+}
+
+/** Starts an empty project and makes it the current one. */
+export async function createProject(): Promise<void> {
+  await flushProjectSaves()
+  const id = newProjectId()
+  adoptProjectState({
+    ...sessionSettings(),
+    projectId: id,
+    projectName: DEFAULT_PROJECT_NAME,
+    mapImage: null,
+    tracks: [],
+    paths: [],
+    annotations: [],
+    rotation: 0,
+  })
+  useAppStore.getState().newProject({ id, name: DEFAULT_PROJECT_NAME })
+}
+
+/** Makes a saved library project the current one. */
+export async function openLibraryProject(id: string): Promise<void> {
+  if (id === useAppStore.getState().projectId) return
+  await flushProjectSaves()
+  const state = await readProjectState(id)
+  if (!state) throw new Error('That project could not be found')
+  adoptProjectState(state)
+  await setActiveProjectId(id)
+  useAppStore.getState().loadProject(state)
+}
+
+/** Adds project data (from a file or the sample) to the library as a new project and opens it. */
+export async function importProject(
+  data: ProjectData,
+  name?: string,
+): Promise<void> {
+  await flushProjectSaves()
+  const id = newProjectId()
+  const state: PersistedProject = {
+    ...sessionSettings(),
+    projectId: id,
+    projectName: name?.trim() || defaultProjectName(data.mapImage?.name),
+    mapImage: data.mapImage,
+    tracks: data.tracks,
+    paths: data.paths,
+    annotations: data.annotations,
+    rotation: data.rotation ?? 0,
+  }
+  await saveProjectNow(state)
+  adoptProjectState(state)
+  await setActiveProjectId(id)
+  useAppStore.getState().loadProject(state)
+}
+
+/** Renames the current project. Empty names fall back to the default. */
+export function renameCurrentProject(name: string): void {
+  useAppStore.getState().setProjectName(name.trim() || DEFAULT_PROJECT_NAME)
+}
+
+/** Removes a project from the library. Opens another project if the current one is removed. */
+export async function deleteLibraryProject(id: string): Promise<void> {
+  await flushProjectSaves()
+  const wasCurrent = id === useAppStore.getState().projectId
+  await deleteProjectRecords(id)
+  if (!wasCurrent) return
+
+  const next = (await listProjectMetas()).find((m) => m.id !== id)
+  if (next) {
+    await openLibraryProject(next.id)
+  } else {
+    await createProject()
+  }
+}
+
+/** Renames any library project. The current project is renamed in place. */
+export async function renameLibraryProject(id: string, name: string): Promise<void> {
+  if (id === useAppStore.getState().projectId) {
+    renameCurrentProject(name)
+    return
+  }
+  const clean = name.trim() || DEFAULT_PROJECT_NAME
+  const state = await readProjectState(id)
+  if (!state) return
+  await writeProjectState({ ...state, projectName: clean })
+  const meta = await readMeta(id)
+  if (meta) await writeMeta({ ...meta, name: clean })
+}
diff --git a/src/store.ts b/src/store.ts
index 99dd253..a0d1244 100644
--- a/src/store.ts
+++ b/src/store.ts
@@ -1,10 +1,5 @@
 import { create } from 'zustand'
-import {
-  persist,
-  type PersistStorage,
-  type StorageValue,
-} from 'zustand/middleware'
-import { del, get, set as idbSet } from 'idb-keyval'
+import { persist } from 'zustand/middleware'
 import { AnalyticsEvents, trackEvent } from './analytics'
 import type {
   Annotation,
@@ -12,17 +7,21 @@ import type {
   GpxTrack,
   MapImage,
   MarkerDisplayMode,
-  PendingProjectOpen,
   Point,
   Tool,
   Viewport,
 } from './types'
+import {
+  DEFAULT_PROJECT_NAME,
+  newProjectId,
+  type PersistedProject,
+} from './persistence/library'
+import { createProjectStorage } from './persistence/projectStorage'
 import {
   ANNOTATION_TEXT_SCALE_DEFAULT,
   clampAnnotationTextScalePct,
 } from './utils/annotationTextScale'
 import { clampViewport, DEFAULT_VIEWPORT } from './utils/viewport'
-import { hasUnsavedEdits, setSaveState } from './saveStatus'
 
 /** The undoable part of the state: the analysis content and the map it sits on. */
 interface Snapshot {
@@ -38,173 +37,12 @@ export interface ProjectData extends Snapshot {
   rotation?: number
 }
 
-/** Fields written to IndexedDB. Pointer and pan/zoom are intentionally absent. */
-interface PersistedProject {
-  mapImage: MapImage | null
-  tracks: GpxTrack[]
-  paths: DrawnPath[]
-  annotations: Annotation[]
-  strokeWidth: number
-  strokeColor: string
-  strokeOpacity: number
-  markerDisplayMode: MarkerDisplayMode
-  annotationTextScalePct: number
-  rotation: number
-}
-
-const PERSIST_DEBOUNCE_MS = 400
-
-function samePersisted(a: PersistedProject, b: PersistedProject): boolean {
-  return (
-    a.mapImage === b.mapImage &&
-    a.tracks === b.tracks &&
-    a.paths === b.paths &&
-    a.annotations === b.annotations &&
-    a.strokeWidth === b.strokeWidth &&
-    a.strokeColor === b.strokeColor &&
-    a.strokeOpacity === b.strokeOpacity &&
-    a.markerDisplayMode === b.markerDisplayMode &&
-    a.annotationTextScalePct === b.annotationTextScalePct &&
-    a.rotation === b.rotation
-  )
-}
-
-/** IndexedDB key suffix for the map image, stored as a Blob beside the project JSON */
-const IMAGE_KEY_SUFFIX = ':image'
-
-async function dataUrlToBlob(dataUrl: string): Promise<Blob> {
-  const response = await fetch(dataUrl)
-  return response.blob()
-}
-
-function blobToDataUrl(blob: Blob): Promise<string> {
-  return new Promise((resolve, reject) => {
-    const reader = new FileReader()
-    reader.onload = () => resolve(reader.result as string)
-    reader.onerror = () => reject(reader.error)
-    reader.readAsDataURL(blob)
-  })
-}
-
-/**
- * IndexedDB storage that skips pointer/viewport churn and collapses bursts of
- * real edits (typing, sliders) into one write.
- *
- * The map image is written as a Blob only when it changes, and the project
- * JSON keeps a placeholder (`src: ''`) instead of the base64 data URL. That
- * keeps every autosave from re-encoding tens of megabytes. Projects saved by
- * older builds still carry the image inline and are migrated on their next save.
- */
-function createProjectStorage(): PersistStorage<PersistedProject> {
-  let last: PersistedProject | null = null
-  /** The map image object currently written to IndexedDB, by reference */
-  let storedImage: MapImage | null = null
-  let timer: ReturnType<typeof setTimeout> | null = null
-  let pending: { name: string; value: StorageValue<PersistedProject> } | null =
-    null
-  /** Serializes writes so a slow image write cannot land after a newer project write */
-  let writes: Promise<void> = Promise.resolve()
-
-  const persist = async (name: string, value: StorageValue<PersistedProject>) => {
-    const image = value.state.mapImage
-    if (image !== storedImage) {
-      if (image) {
-        await idbSet(name + IMAGE_KEY_SUFFIX, await dataUrlToBlob(image.src))
-      } else {
-        await del(name + IMAGE_KEY_SUFFIX)
-      }
-      storedImage = image
-    }
-    const withPlaceholder: StorageValue<PersistedProject> = {
-      ...value,
-      state: {
-        ...value.state,
-        mapImage: image ? { ...image, src: '' } : null,
-      },
-    }
-    await idbSet(name, JSON.stringify(withPlaceholder))
-  }
-
-  const flush = () => {
-    if (timer !== null) {
-      clearTimeout(timer)
-      timer = null
-    }
-    const job = pending
-    pending = null
-    if (!job) return
-    setSaveState({ status: 'saving', savedAt: null })
-    writes = writes
-      .then(() => persist(job.name, job.value))
-      .then(() => {
-        // A newer edit may have arrived while this write was in flight
-        if (!pending) setSaveState({ status: 'saved', savedAt: Date.now() })
-      })
-      .catch((error: unknown) => {
-        console.error('Autosave failed', error)
-        setSaveState({ status: 'error', savedAt: null })
-      })
-  }
-
-  if (typeof window !== 'undefined') {
-    window.addEventListener('pagehide', flush)
-    // Warn only when an edit would be lost; a normal save in progress needs no prompt
-    window.addEventListener('beforeunload', (event) => {
-      const unsaved = hasUnsavedEdits()
-      flush()
-      if (unsaved) {
-        event.preventDefault()
-        event.returnValue = ''
-      }
-    })
-  }
-
-  return {
-    getItem: async (name) => {
-      const raw = await get<string>(name)
-      if (!raw) return null
-      const parsed = JSON.parse(raw) as StorageValue<PersistedProject>
-      const state = parsed.state
-      if (state.mapImage && !state.mapImage.src) {
-        const blob = await get<Blob>(name + IMAGE_KEY_SUFFIX)
-        state.mapImage = blob
-          ? { ...state.mapImage, src: await blobToDataUrl(blob) }
-          : null
-        storedImage = state.mapImage
-      } else {
-        // Legacy save with the image inline: force a migration on the next write
-        storedImage = null
-      }
-      last = state
-      return parsed
-    },
-    setItem: (name, value) => {
-      const next = value.state
-      if (last && samePersisted(last, next)) return
-      last = next
-      pending = { name, value }
-      setSaveState({ status: 'pending', savedAt: null })
-      if (timer !== null) clearTimeout(timer)
-      timer = setTimeout(flush, PERSIST_DEBOUNCE_MS)
-    },
-    removeItem: async (name) => {
-      last = null
-      storedImage = null
-      pending = null
-      if (timer !== null) {
-        clearTimeout(timer)
-        timer = null
-      }
-      await writes
-      await del(name)
-      await del(name + IMAGE_KEY_SUFFIX)
-    },
-  }
-}
-
 const HISTORY_LIMIT = 100
 
 interface AppState extends Snapshot {
+  /** Identifies this project in the library; changes when another project is opened */
+  projectId: string
+  projectName: string
   activeTool: Tool
   mapImage: MapImage | null
   strokeWidth: number
@@ -218,8 +56,6 @@ interface AppState extends Snapshot {
   markerDisplayMode: MarkerDisplayMode
   annotationTextScalePct: number
   toastMessage: string | null
-  /** Project open awaiting confirmation because it would replace current work */
-  pendingProjectOpen: PendingProjectOpen | null
 
   past: Snapshot[]
   future: Snapshot[]
@@ -241,7 +77,7 @@ interface AppState extends Snapshot {
   setMarkerDisplayMode: (mode: MarkerDisplayMode) => void
   setAnnotationTextScalePct: (percent: number) => void
   setToastMessage: (message: string | null) => void
-  setPendingProjectOpen: (pending: PendingProjectOpen | null) => void
+  setProjectName: (name: string) => void
 
   addTrack: (track: GpxTrack) => void
   /** Pass a coalesceKey to merge rapid consecutive edits (e.g. slider drags) into one undo step */
@@ -260,11 +96,11 @@ interface AppState extends Snapshot {
   updateAnnotation: (id: string, patch: Partial<Annotation>) => void
   removeAnnotation: (id: string) => void
 
-  /** Replaces the current project content (e.g. when opening a saved project file). */
-  loadProject: (data: ProjectData) => void
+  /** Replaces the current project with another one (opened from the library or a file). */
+  loadProject: (data: ProjectData & { projectId: string; projectName: string }) => void
 
-  /** Clears all project content and returns the app to its initial state. */
-  newProject: () => void
+  /** Starts an empty project under the given library id. */
+  newProject: (project: { id: string; name: string }) => void
 
   undo: () => void
   redo: () => void
@@ -314,6 +150,8 @@ function reconcileSelection(
 export const useAppStore = create<AppState>()(
   persist(
     (set) => ({
+      projectId: newProjectId(),
+      projectName: DEFAULT_PROJECT_NAME,
       activeTool: 'select',
   mapImage: null,
   tracks: [],
@@ -330,7 +168,6 @@ export const useAppStore = create<AppState>()(
   markerDisplayMode: 'labels',
   annotationTextScalePct: ANNOTATION_TEXT_SCALE_DEFAULT,
   toastMessage: null,
-  pendingProjectOpen: null,
 
   past: [],
   future: [],
@@ -353,7 +190,7 @@ export const useAppStore = create<AppState>()(
   setAnnotationTextScalePct: (percent) =>
     set({ annotationTextScalePct: clampAnnotationTextScalePct(percent) }),
   setToastMessage: (message) => set({ toastMessage: message }),
-  setPendingProjectOpen: (pending) => set({ pendingProjectOpen: pending }),
+  setProjectName: (name) => set({ projectName: name }),
 
   addTrack: (track) =>
     set((s) => ({ ...record(s, null), tracks: [...s.tracks, track] })),
@@ -402,6 +239,8 @@ export const useAppStore = create<AppState>()(
 
   loadProject: (data) =>
     set({
+      projectId: data.projectId,
+      projectName: data.projectName,
       mapImage: data.mapImage,
       tracks: data.tracks,
       paths: data.paths,
@@ -419,9 +258,11 @@ export const useAppStore = create<AppState>()(
       importError: null,
     }),
 
-  newProject: () => {
+  newProject: (project) => {
     trackEvent(AnalyticsEvents.NEW_PROJECT)
     set({
+      projectId: project.id,
+      projectName: project.name,
       activeTool: 'select',
       mapImage: null,
       tracks: [],
@@ -466,7 +307,9 @@ export const useAppStore = create<AppState>()(
       name: 'map-analysis',
       version: 1,
       storage: createProjectStorage(),
-      partialize: (s) => ({
+      partialize: (s): PersistedProject => ({
+        projectId: s.projectId,
+        projectName: s.projectName,
         mapImage: s.mapImage,
         tracks: s.tracks,
         paths: s.paths,
diff --git a/src/types.ts b/src/types.ts
index f50b317..e89692c 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -80,8 +80,3 @@ export interface MapImage {
   height: number
   name: string
 }
-
-/** A project open that is waiting on confirmation because it would replace current work */
-export type PendingProjectOpen =
-  | { kind: 'file'; file: File; source: 'file_picker' | 'drop' }
-  | { kind: 'sample' }
diff --git a/src/utils/files.ts b/src/utils/files.ts
index 0b86bd9..9163c5a 100644
--- a/src/utils/files.ts
+++ b/src/utils/files.ts
@@ -1,7 +1,7 @@
 import { useAppStore } from '../store'
 import { AnalyticsEvents, trackEvent } from '../analytics'
 import { buildTrack, parseGpx } from './gpx'
-import { isProjectFile, requestOpenProject } from './project'
+import { isProjectFile, openProjectFile } from './project'
 
 export const MAX_IMAGE_BYTES = 20 * 1024 * 1024
 
@@ -99,7 +99,7 @@ export async function importGpxFile(
 export async function importDroppedFiles(files: FileList): Promise<void> {
   for (const file of Array.from(files)) {
     if (isProjectFile(file)) {
-      await requestOpenProject({ kind: 'file', file, source: 'drop' })
+      await openProjectFile(file, 'drop')
     } else if (file.name.toLowerCase().endsWith('.gpx')) {
       await importGpxFile(file, 'drop')
     } else if (file.type.startsWith('image/')) {
diff --git a/src/utils/project.ts b/src/utils/project.ts
index 1347b4b..a78c254 100644
--- a/src/utils/project.ts
+++ b/src/utils/project.ts
@@ -1,7 +1,6 @@
 import { useAppStore, type ProjectData } from '../store'
 import { AnalyticsEvents, trackEvent } from '../analytics'
-import type { PendingProjectOpen } from '../types'
-
+import { importProject } from '../projectLibrary'
 import { PROJECT_FORMAT, PROJECT_VERSION, validateProjectFile, type ProjectFile } from './projectValidation'
 
 export const PROJECT_FILE_EXTENSION = '.anal'
@@ -15,38 +14,13 @@ export function hasProjectContent(data: ProjectData): boolean {
   )
 }
 
-/** True when opening a project would discard content that is currently on screen. */
-export function currentProjectHasContent(): boolean {
-  const { mapImage, tracks, paths, annotations } = useAppStore.getState()
-  return hasProjectContent({ mapImage, tracks, paths, annotations })
-}
-
-/**
- * Entry point for every project open (picker, drop, sample). Opens right away
- * when there is nothing to lose; otherwise parks the request until the user
- * confirms in ReplaceProjectModal.
- */
-export function requestOpenProject(request: PendingProjectOpen): Promise<void> {
-  if (currentProjectHasContent()) {
-    useAppStore.getState().setPendingProjectOpen(request)
-    return Promise.resolve()
-  }
-  return runProjectOpen(request)
-}
-
-/** Performs a project open that has already been confirmed (or needs no confirmation). */
-export function runProjectOpen(request: PendingProjectOpen): Promise<void> {
-  if (request.kind === 'sample') return openSampleProject()
-  return openProjectFile(request.file, request.source)
-}
-
 export function isProjectFile(file: File): boolean {
   return file.name.toLowerCase().endsWith(PROJECT_FILE_EXTENSION)
 }
 
-/** Downloads the current project as a .anal file. */
+/** Downloads the current project as a .anal file, named after the project. */
 export function saveProjectFile(): void {
-  const { mapImage, tracks, paths, annotations, setImportError } =
+  const { mapImage, tracks, paths, annotations, projectName, setImportError } =
     useAppStore.getState()
 
   const project: ProjectData = {
@@ -66,13 +40,14 @@ export function saveProjectFile(): void {
   const file: ProjectFile = {
     format: PROJECT_FORMAT,
     version: PROJECT_VERSION,
+    name: projectName,
     ...project,
   }
 
   const blob = new Blob([JSON.stringify(file)], { type: 'application/json' })
   const url = URL.createObjectURL(blob)
   const anchor = document.createElement('a')
-  const baseName = mapImage?.name.replace(/\.[^.]+$/, '') || 'project'
+  const baseName = projectName.replace(/[\\/:*?"<>|]+/g, '-').trim() || 'project'
   anchor.href = url
   anchor.download = `${baseName}${PROJECT_FILE_EXTENSION}`
   anchor.click()
@@ -85,20 +60,7 @@ export function saveProjectFile(): void {
   })
 }
 
-/** Loads project data parsed from JSON text. */
-function loadProjectFromText(text: string): void {
-  const { loadProject } = useAppStore.getState()
-  const parsed = validateProjectFile(JSON.parse(text))
-  loadProject({
-    mapImage: parsed.mapImage,
-    tracks: parsed.tracks,
-    paths: parsed.paths,
-    annotations: parsed.annotations,
-    rotation: parsed.rotation,
-  })
-}
-
-/** Loads the bundled sample project from /public/sample.anal. */
+/** Adds the bundled sample project to the library and opens it. */
 export async function openSampleProject(): Promise<void> {
   const { setImportError } = useAppStore.getState()
   setImportError(null)
@@ -108,7 +70,8 @@ export async function openSampleProject(): Promise<void> {
     if (!response.ok) {
       throw new Error('Sample project not found')
     }
-    loadProjectFromText(await response.text())
+    const parsed = validateProjectFile(JSON.parse(await response.text()))
+    await importProject(parsed, parsed.name)
     trackEvent(AnalyticsEvents.OPEN_SAMPLE_PROJECT)
   } catch (error) {
     setImportError(
@@ -117,7 +80,7 @@ export async function openSampleProject(): Promise<void> {
   }
 }
 
-/** Loads a project from a .anal file. */
+/** Adds a .anal file to the library as a new project and opens it. */
 export async function openProjectFile(
   file: File,
   source: 'file_picker' | 'drop' = 'file_picker',
@@ -131,7 +94,8 @@ export async function openProjectFile(
   }
 
   try {
-    loadProjectFromText(await file.text())
+    const parsed = validateProjectFile(JSON.parse(await file.text()))
+    await importProject(parsed, parsed.name)
     const { mapImage, tracks, annotations } = useAppStore.getState()
     trackEvent(AnalyticsEvents.OPEN_PROJECT, {
       source,
diff --git a/src/utils/projectValidation.ts b/src/utils/projectValidation.ts
index 0f23426..9063131 100644
--- a/src/utils/projectValidation.ts
+++ b/src/utils/projectValidation.ts
@@ -6,6 +6,8 @@ export const PROJECT_VERSION = 1
 export interface ProjectFile extends ProjectData {
   format: typeof PROJECT_FORMAT
   version: typeof PROJECT_VERSION
+  /** Project name; omitted in files saved before named projects */
+  name?: string
 }
 
 type Rec = Record<string, unknown>
@@ -103,6 +105,9 @@ export function validateProjectFile(raw: unknown): ProjectFile {
   if (raw.mapImage !== null && !isValidMapImage(raw.mapImage)) {
     throw new Error('Invalid map image in project file')
   }
+  if (raw.name !== undefined && typeof raw.name !== 'string') {
+    throw new Error('Invalid project name in project file')
+  }
   if (raw.rotation !== undefined && !isFiniteNumber(raw.rotation)) {
     throw new Error('Invalid rotation in project file')
   }