Add a project library with named projects stored in IndexedDB

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;

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>
   )
 }

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)
     }