Upload folder using huggingface_hub

.claude/settings.local.json

@@ -0,0 +1,7 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(npx wrangler deploy:*)"
+    ]
+  }
+}

capacitor.config.ts

@@ -4,6 +4,7 @@ const getServerUrl = () => {
   const env = process.env.CAPACITOR_SERVER_IP_ENV
   if (env === 'local') return 'http://192.168.0.169:5173'
   if (env === 'hf') return 'https://jaimodiji-my-multiplayer-app.hf.space'
+  if (env === 'cloudflare') return 'https://multiplayer-template.bossemail.workers.dev'
   return 'http://tshonq.duckdns.org:5173'
 }
 
@@ -11,6 +12,7 @@ const getAllowNavigation = () => {
   const env = process.env.CAPACITOR_SERVER_IP_ENV
   if (env === 'local') return '192.168.0.169'
   if (env === 'hf') return 'jaimodiji-my-multiplayer-app.hf.space'
+  if (env === 'cloudflare') return 'multiplayer-template.bossemail.workers.dev'
   return 'tshonq.duckdns.org'
 }
 

client/components/BackupControl.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useState, useRef, ChangeEvent } from 'react'
 import { useEditor, TldrawUiMenuItem } from 'tldraw'
 import { useAuth } from '../hooks/useAuth'
 import { useBackups } from '../hooks/useBackups'
@@ -57,3 +57,97 @@ export function BackupMenuItem({ roomId }: { roomId: string }) {
         />
     )
 }
+
+export function DownloadMenuItem({ roomId }: { roomId: string }) {
+    const editor = useEditor()
+
+    const handleDownload = () => {
+        try {
+            const snapshot = editor.getSnapshot()
+            const jsonStr = JSON.stringify({
+                snapshot,
+                roomId,
+                timestamp: Date.now(),
+                source: 'tldraw-multiplayer'
+            }, null, 2)
+
+            const blob = new Blob([jsonStr], { type: 'application/json' })
+            const url = URL.createObjectURL(blob)
+            const link = document.createElement('a')
+            link.href = url
+            link.download = `tldraw-room-${roomId}-${new Date().toISOString().slice(0,10)}.json`
+            document.body.appendChild(link)
+            link.click()
+            document.body.removeChild(link)
+            URL.revokeObjectURL(url)
+        } catch (e: any) {
+            console.error('Failed to download backup', e)
+            alert('Failed to download backup: ' + e.message)
+        }
+    }
+
+    return (
+        <TldrawUiMenuItem
+            id="download-json"
+            label="Download File"
+            icon="download"
+            readonlyOk
+            onSelect={handleDownload}
+        />
+    )
+}
+
+export function RestoreMenuItem() {
+    const editor = useEditor()
+    const inputRef = useRef<HTMLInputElement>(null)
+
+    const handleRestoreClick = () => {
+        inputRef.current?.click()
+    }
+
+    const handleFileChange = (e: ChangeEvent<HTMLInputElement>) => {
+        const file = e.target.files?.[0]
+        if (!file) return
+
+        const reader = new FileReader()
+        reader.onload = (event) => {
+            try {
+                const jsonStr = event.target?.result as string
+                const data = JSON.parse(jsonStr)
+
+                // Handle both raw snapshot or our wrapped format
+                const snapshot = data.snapshot || data
+
+                if (window.confirm('This will replace the current board content. Are you sure?')) {
+                    editor.loadSnapshot(snapshot)
+                }
+            } catch (e: any) {
+                console.error('Failed to parse backup file', e)
+                alert('Failed to restore backup: Invalid file format')
+            } finally {
+                // Reset input
+                if (inputRef.current) inputRef.current.value = ''
+            }
+        }
+        reader.readAsText(file)
+    }
+
+    return (
+        <>
+            <TldrawUiMenuItem
+                id="restore-json"
+                label="Restore from File"
+                icon="external-link"
+                readonlyOk
+                onSelect={handleRestoreClick}
+            />
+            <input
+                ref={inputRef}
+                type="file"
+                accept=".json"
+                style={{ display: 'none' }}
+                onChange={handleFileChange}
+            />
+        </>
+    )
+}

client/pages/RoomPage.tsx

@@ -33,7 +33,7 @@ import { BrushManager } from '../components/BrushManager'
 import { EquationRenderer } from '../components/EquationRendererSimple'
 import { getEraserSettings } from '../utils/eraserUtils'
 import { EquationShapeUtil } from '../shapes/EquationShapeUtil'
-import { BackupMenuItem } from '../components/BackupControl'
+import { BackupMenuItem, DownloadMenuItem, RestoreMenuItem } from '../components/BackupControl'
 
 const customShapeUtils = [
     ...defaultShapeUtils.filter(u => u.type !== 'geo'),
@@ -238,6 +238,10 @@ export function RoomPage() {
                         onSelect={() => navigate('/')}
                     />
                 </TldrawUiMenuGroup>
+                <TldrawUiMenuGroup id="file">
+                    <DownloadMenuItem roomId={roomId} />
+                    <RestoreMenuItem />
+                </TldrawUiMenuGroup>
                 <TldrawUiMenuGroup id="share">
                     <TldrawUiMenuItem
                         id="share-link"

public/scripts/CommonPdfImport.js

@@ -0,0 +1,120 @@
+import { PDFLibrary } from './PDFLibrary.js';
+
+/**
+ * CommonPdfImport - Bridge between PDFLibrary and ColorRM apps
+ * Handles PDF selection/import for both main and split view apps
+ */
+export const CommonPdfImport = {
+    target: null, // 'main' | 'split'
+    app: null,
+    splitViewApp: null,
+
+    /**
+     * Show PDF library for target app
+     * @param {'main'|'split'} target - Which app to import into
+     */
+    showLibrary(target = 'main') {
+        this.target = target;
+
+        PDFLibrary.show(async (pdf) => {
+            await this.importPdf(pdf);
+        });
+    },
+
+    /**
+     * Import selected PDF into target app
+     */
+    async importPdf(pdf) {
+        if (!pdf || !pdf.blob) {
+            console.error('CommonPdfImport: Invalid PDF entry');
+            return;
+        }
+
+        // Create a File object from the blob for handleImport
+        const file = new File([pdf.blob], pdf.name + '.pdf', { type: 'application/pdf' });
+
+        if (this.target === 'split') {
+            // Import into split view
+            const splitApp = this.splitViewApp || window.SplitView?.app;
+            if (splitApp) {
+                await this.importIntoApp(splitApp, file, pdf.name);
+            } else {
+                console.warn('CommonPdfImport: Split view app not available');
+                alert('Split View is not ready.');
+            }
+        } else {
+            // Import into main app
+            const mainApp = this.app || window.App;
+            if (mainApp && mainApp.handleImport) {
+                await mainApp.handleImport({ target: { files: [file] } }, false);
+            } else {
+                console.warn('CommonPdfImport: Main app not available');
+                alert('Main app is not ready.');
+            }
+        }
+    },
+
+    /**
+     * Import PDF into a specific ColorRmApp instance
+     */
+    async importIntoApp(app, file, name) {
+        if (!app) return;
+
+        try {
+            // Create a new session for this PDF
+            const projectId = `sv_${Date.now()}`;
+
+            // Create session in app's database
+            await app.dbPut('sessions', {
+                id: projectId,
+                name: name,
+                pageCount: 0,
+                lastMod: Date.now(),
+                ownerId: 'local',
+                idx: 0,
+                bookmarks: [],
+                clipboardBox: [],
+                state: null
+            });
+
+            // Set as current session
+            app.state.sessionId = projectId;
+            app.state.projectName = name;
+
+            // Import the PDF
+            await app.importBaseFile(file);
+
+            console.log('CommonPdfImport: Imported into app:', name);
+        } catch (error) {
+            console.error('CommonPdfImport: Import failed:', error);
+            alert('Import failed: ' + error.message);
+        }
+    },
+
+    /**
+     * Initialize with app references
+     */
+    init(mainApp) {
+        if (mainApp) {
+            this.app = mainApp;
+        }
+        window.CommonPdfImport = this;
+        window.PDFLibrary = PDFLibrary;
+    },
+
+    /**
+     * Set split view app reference
+     */
+    setSplitViewApp(app) {
+        this.splitViewApp = app;
+    },
+
+    // Legacy methods for backwards compatibility
+    show() {
+        this.showLibrary('main');
+    },
+
+    pick(target) {
+        this.showLibrary(target);
+    }
+};

public/scripts/LiveSync.js

@@ -0,0 +1,325 @@
+
+import { createClient, LiveObject, LiveMap, LiveList } from 'https://cdn.jsdelivr.net/npm/@liveblocks/client@3.12.1/+esm';
+
+export class LiveSyncClient {
+    constructor(appInstance) {
+        this.app = appInstance;
+        this.client = null;
+        this.room = null;
+        this.userId = localStorage.getItem('color_rm_user_id');
+        this.ownerId = null;
+        this.projectId = null;
+        this.unsubscribes = [];
+        this.isInitializing = true;
+        this.root = null;
+    }
+
+    async init(ownerId, projectId) {
+        // We need Registry to be available globally or passed in.
+        // Assuming window.Registry is still global for now or we import it.
+        const regUser = window.Registry?.getUsername();
+        if (regUser) this.userId = regUser;
+
+        if (!this.userId) {
+            this.userId = `user_${Math.random().toString(36).substring(2, 9)}`;
+            localStorage.setItem('color_rm_user_id', this.userId);
+        }
+
+        const roomId = `room_${ownerId}`;
+        this.ownerId = ownerId;
+        this.projectId = projectId;
+
+        // Update URL only if this is the main app (hacky check? or let the app handle it)
+        // For now, only update hash if this sync client is attached to the main app.
+        // We can check this via a config flag on the app.
+        if (this.app.config.isMain) {
+            window.location.hash = `/color_rm/${ownerId}/${projectId}`;
+        }
+
+        if (this.room && this.room.id === roomId) {
+            console.log(`Liveblocks: Switching Project sub-key to ${projectId} in existing room.`);
+            await this.setupProjectSync(projectId);
+            return;
+        }
+
+        if (this.room) this.leave();
+
+        this.app.ui.setSyncStatus('syncing');
+        console.log(`Liveblocks: Connecting to Owner Room: ${roomId}`);
+
+        if (!this.client) {
+            this.client = createClient({
+                authEndpoint: "/api/liveblocks-auth",
+            });
+        }
+
+        const { room, leave } = this.client.enterRoom(roomId, {
+            initialStorage: {
+                projects: new LiveMap()
+            }
+        });
+
+        this.room = room;
+        this.leave = leave;
+
+        room.subscribe("status", (status) => {
+            if (status === "connected") this.app.ui.setSyncStatus('saved');
+            else if (status === "disconnected") this.app.ui.setSyncStatus('offline');
+            if (this.app.renderDebug) this.app.renderDebug();
+        });
+
+        const { root } = await room.getStorage();
+        this.root = root;
+
+        await this.setupProjectSync(projectId);
+
+        this.isInitializing = false;
+        console.log("Liveblocks: Room Ready.");
+    }
+
+    async setupProjectSync(projectId) {
+        if (!this.root) {
+            const { root } = await this.room.getStorage();
+            this.root = root;
+        }
+        const projects = this.root.get("projects");
+
+        // Ensure the project structure exists
+        if (!projects.has(projectId)) {
+            projects.set(projectId, new LiveObject({
+                metadata: new LiveObject({
+                    name: this.app.state.projectName || "Untitled",
+                    baseFileName: this.app.state.baseFileName || null,
+                    idx: 0,
+                    pageCount: 0,
+                    pageLocked: false,
+                    ownerId: this.ownerId
+                }),
+                pagesHistory: new LiveMap(),
+                bookmarks: new LiveList([]),
+                colors: new LiveList([])
+            }));
+        }
+
+        this.syncStorageToLocal();
+
+        // Refresh project-specific subscription
+        this.unsubscribes.forEach(unsub => unsub());
+        this.unsubscribes = [
+            this.room.subscribe(projects.get(projectId), () => {
+                this.syncProjectData();
+                if (this.app.renderDebug) this.app.renderDebug();
+            }, { isDeep: true }),
+            // Subscribe to Presence (Others)
+            this.room.subscribe("others", () => {
+                this.renderUsers();
+                this.renderCursors();
+            })
+        ];
+
+        // Initialize presence for self
+        this.room.updatePresence({
+            userId: this.userId,
+            userName: "User " + this.userId.slice(-4),
+            cursor: null,
+            pageIdx: this.app.state.idx
+        });
+
+        this.renderUsers();
+    }
+
+    updateCursor(pt) {
+        if (!this.room) return;
+        this.room.updatePresence({
+            cursor: pt,
+            pageIdx: this.app.state.idx
+        });
+    }
+
+    renderCursors() {
+        const container = this.app.getElement('cursorLayer');
+        if (!container) return;
+
+        // Clear old cursors
+        container.innerHTML = '';
+
+        if (!this.app.state.showCursors) return;
+
+        if (!this.room) return;
+
+        const others = this.room.getOthers();
+        const canvas = this.app.getElement('canvas');
+        const viewport = this.app.getElement('viewport');
+        if (!canvas || !viewport) return;
+
+        const rect = canvas.getBoundingClientRect();
+        const viewRect = viewport.getBoundingClientRect();
+
+        others.forEach(user => {
+            const presence = user.presence;
+            if (!presence || !presence.cursor || presence.pageIdx !== this.app.state.idx) return;
+
+            const div = document.createElement('div');
+            div.className = 'remote-cursor';
+
+            // Map canvas coordinates to screen coordinates
+            const x = (presence.cursor.x * this.app.state.zoom + this.app.state.pan.x) * (rect.width / this.app.state.viewW) + rect.left - viewRect.left;
+            const y = (presence.cursor.y * this.app.state.zoom + this.app.state.pan.y) * (rect.height / this.app.state.viewH) + rect.top - viewRect.top;
+
+            div.style.left = `${x}px`;
+            div.style.top = `${y}px`;
+            div.style.borderColor = 'var(--accent)';
+
+            div.innerHTML = `
+                <div class="cursor-pointer"></div>
+                <div class="cursor-label">${presence.userName || 'User'}</div>
+            `;
+            container.appendChild(div);
+        });
+    }
+
+    renderUsers() {
+        const el = this.app.getElement('userList');
+        if (!el) return;
+
+        const others = this.room.getOthers();
+        let html = `
+            <div class="user-item self">
+                <div class="user-dot" style="background:var(--primary)"></div>
+                <span>You (${this.userId.slice(-4)})</span>
+            </div>
+        `;
+
+        others.forEach(user => {
+            const info = user.presence;
+            if (!info || !info.userId) return;
+            html += `
+                <div class="user-item">
+                    <div class="user-dot" style="background:var(--accent)"></div>
+                    <span>Collaborator (${info.userId.slice(-4)})</span>
+                </div>
+            `;
+        });
+
+        el.innerHTML = html;
+    }
+
+    getProject() {
+        if (!this.root || !this.projectId) return null;
+        return this.root.get("projects").get(this.projectId);
+    }
+
+    syncStorageToLocal() {
+        const project = this.getProject();
+        if (!project) return;
+
+        const metadata = project.get("metadata").toObject();
+        this.app.state.projectName = metadata.name;
+        this.app.state.idx = metadata.idx;
+        this.app.state.pageLocked = metadata.pageLocked;
+        this.app.state.ownerId = metadata.ownerId;
+
+        const titleEl = this.app.getElement('headerTitle');
+        if(titleEl) titleEl.innerText = metadata.name;
+
+        this.app.state.bookmarks = project.get("bookmarks").toArray();
+        this.app.renderBookmarks();
+
+        this.app.state.colors = project.get("colors").toArray();
+        this.app.renderSwatches();
+
+        this.syncHistory();
+        this.app.loadPage(this.app.state.idx, false);
+    }
+
+    syncProjectData() {
+        const project = this.getProject();
+        if (!project || this.isInitializing) return;
+
+        const metadata = project.get("metadata").toObject();
+        console.log(`Liveblocks Sync: Remote PageCount=${metadata.pageCount}, Local PageCount=${this.app.state.images.length}`);
+
+        this.app.state.projectName = metadata.name;
+        this.app.state.baseFileName = metadata.baseFileName || null;
+        this.app.state.pageLocked = metadata.pageLocked;
+        this.app.state.ownerId = metadata.ownerId;
+
+        const titleEl = this.app.getElement('headerTitle');
+        if(titleEl) titleEl.innerText = metadata.name;
+
+        if (this.app.state.idx !== metadata.idx) {
+            this.app.loadPage(metadata.idx, false);
+        }
+
+        // AUTO-RETRY base file fetch if remote has pages but we don't
+        if (metadata.pageCount > 0 && this.app.state.images.length === 0) {
+            console.log("Liveblocks: Remote has content but local is empty. Triggering fetch...");
+            this.app.retryBaseFetch();
+        }
+
+        this.syncHistory();
+        this.app.updateLockUI();
+    }
+
+    syncHistory() {
+        const project = this.getProject();
+        if (!project || this.isInitializing) return;
+
+        const pagesHistory = project.get("pagesHistory");
+        let currentIdxChanged = false;
+
+        // Priority: Update current page immediately
+        const currentRemote = pagesHistory.get(this.app.state.idx.toString());
+        if (currentRemote) {
+            const newHist = currentRemote.toArray();
+            const localImg = this.app.state.images[this.app.state.idx];
+            if (localImg) {
+                localImg.history = newHist;
+                currentIdxChanged = true;
+            }
+        }
+
+        // Background sync all other pages
+        this.app.state.images.forEach((img, idx) => {
+            if (idx === this.app.state.idx) return; // Already handled
+            const remote = pagesHistory.get(idx.toString());
+            if (remote) img.history = remote.toArray();
+        });
+
+        if (currentIdxChanged) this.app.render();
+    }
+
+    // --- Local -> Remote Updates ---
+    updateMetadata(updates) {
+        const project = this.getProject();
+        if (project) project.get("metadata").update(updates);
+    }
+
+    addStroke(pageIdx, stroke) {
+        const project = this.getProject();
+        if (!project) return;
+        const pagesHistory = project.get("pagesHistory");
+        const key = pageIdx.toString();
+        if (!pagesHistory.has(key)) {
+            pagesHistory.set(key, new LiveList([]));
+        }
+        pagesHistory.get(key).push(stroke);
+    }
+
+    setHistory(pageIdx, history) {
+        const project = this.getProject();
+        if (!project) return;
+        const pagesHistory = project.get("pagesHistory");
+        pagesHistory.set(pageIdx.toString(), new LiveList(history || []));
+    }
+
+    updateBookmarks(bookmarks) {
+        const project = this.getProject();
+        if (project) project.set("bookmarks", new LiveList(bookmarks || []));
+    }
+
+    updateColors(colors) {
+        const project = this.getProject();
+        if (project) project.set("colors", new LiveList(colors || []));
+    }
+}

public/scripts/PDFLibrary.js

@@ -0,0 +1,340 @@
+/**
+ * PDFLibrary - Shared PDF storage for ColorRM apps
+ * Both main (collaborative) and split view (local) apps can access this library
+ */
+
+export const PDFLibrary = {
+    DB_NAME: 'ColorRM_PDFLibrary',
+    DB_VERSION: 1,
+    STORE_NAME: 'pdfs',
+
+    db: null,
+    modal: null,
+    onSelect: null, // Callback when PDF is selected
+
+    /**
+     * Initialize the PDF library database
+     */
+    async init() {
+        return new Promise((resolve, reject) => {
+            const request = indexedDB.open(this.DB_NAME, this.DB_VERSION);
+
+            request.onerror = () => reject(request.error);
+            request.onsuccess = () => {
+                this.db = request.result;
+                console.log('PDFLibrary: Database initialized');
+                resolve();
+            };
+
+            request.onupgradeneeded = (event) => {
+                const db = event.target.result;
+                if (!db.objectStoreNames.contains(this.STORE_NAME)) {
+                    const store = db.createObjectStore(this.STORE_NAME, { keyPath: 'id' });
+                    store.createIndex('name', 'name', { unique: false });
+                    store.createIndex('timestamp', 'timestamp', { unique: false });
+                }
+            };
+        });
+    },
+
+    /**
+     * Upload a PDF to the library
+     */
+    async upload(file) {
+        if (!this.db) await this.init();
+        if (!file || !file.type.includes('pdf')) {
+            throw new Error('Invalid file type. Please select a PDF.');
+        }
+
+        const id = `pdf_${Date.now()}_${Math.random().toString(36).substring(2, 7)}`;
+        const name = file.name.replace('.pdf', '').replace('.PDF', '');
+
+        const entry = {
+            id,
+            name,
+            blob: file,
+            size: file.size,
+            timestamp: Date.now()
+        };
+
+        return new Promise((resolve, reject) => {
+            const tx = this.db.transaction([this.STORE_NAME], 'readwrite');
+            const store = tx.objectStore(this.STORE_NAME);
+            const req = store.put(entry);
+
+            req.onsuccess = () => {
+                console.log('PDFLibrary: Uploaded', name);
+                resolve(entry);
+            };
+            req.onerror = () => reject(req.error);
+        });
+    },
+
+    /**
+     * Get all PDFs in the library
+     */
+    async getAll() {
+        if (!this.db) await this.init();
+
+        return new Promise((resolve, reject) => {
+            const tx = this.db.transaction([this.STORE_NAME], 'readonly');
+            const store = tx.objectStore(this.STORE_NAME);
+            const req = store.getAll();
+
+            req.onsuccess = () => {
+                const results = req.result || [];
+                results.sort((a, b) => b.timestamp - a.timestamp);
+                resolve(results);
+            };
+            req.onerror = () => reject(req.error);
+        });
+    },
+
+    /**
+     * Get a specific PDF by ID
+     */
+    async get(id) {
+        if (!this.db) await this.init();
+
+        return new Promise((resolve, reject) => {
+            const tx = this.db.transaction([this.STORE_NAME], 'readonly');
+            const store = tx.objectStore(this.STORE_NAME);
+            const req = store.get(id);
+
+            req.onsuccess = () => resolve(req.result);
+            req.onerror = () => reject(req.error);
+        });
+    },
+
+    /**
+     * Delete a PDF from the library
+     */
+    async delete(id) {
+        if (!this.db) await this.init();
+
+        return new Promise((resolve, reject) => {
+            const tx = this.db.transaction([this.STORE_NAME], 'readwrite');
+            const store = tx.objectStore(this.STORE_NAME);
+            const req = store.delete(id);
+
+            req.onsuccess = () => {
+                console.log('PDFLibrary: Deleted', id);
+                resolve();
+            };
+            req.onerror = () => reject(req.error);
+        });
+    },
+
+    /**
+     * Format file size for display
+     */
+    formatSize(bytes) {
+        if (bytes < 1024) return bytes + ' B';
+        if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
+        return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
+    },
+
+    /**
+     * Create and inject the modal HTML
+     */
+    createModal() {
+        if (document.getElementById('pdfLibraryModal')) return;
+
+        const modal = document.createElement('div');
+        modal.id = 'pdfLibraryModal';
+        modal.className = 'overlay';
+        modal.style.cssText = 'display:none; position:fixed; inset:0; background:rgba(0,0,0,0.85); z-index:10000; align-items:center; justify-content:center;';
+
+        modal.innerHTML = `
+            <div class="card" style="width:90%; max-width:600px; max-height:85vh; display:flex; flex-direction:column;">
+                <!-- Header -->
+                <div style="display:flex; justify-content:space-between; align-items:center; padding:20px; border-bottom:1px solid var(--border);">
+                    <div>
+                        <h3 style="margin:0; font-size:1.2rem;">PDF Library</h3>
+                        <p style="margin:4px 0 0; font-size:0.75rem; color:#666;">Select a PDF to open or upload a new one</p>
+                    </div>
+                    <button id="pdfLibraryClose" class="btn btn-icon" style="background:none; border:none;">
+                        <i class="bi bi-x-lg"></i>
+                    </button>
+                </div>
+
+                <!-- Upload Area -->
+                <div id="pdfLibraryDropzone" style="margin:16px; padding:24px; border:2px dashed #333; border-radius:8px; text-align:center; cursor:pointer; transition:all 0.2s;">
+                    <i class="bi bi-cloud-arrow-up" style="font-size:2rem; color:#666;"></i>
+                    <p style="margin:8px 0 0; color:#888; font-size:0.85rem;">Click or drag PDF here to upload</p>
+                    <input type="file" id="pdfLibraryInput" accept=".pdf" style="display:none;">
+                </div>
+
+                <!-- PDF List -->
+                <div style="flex:1; overflow-y:auto; padding:0 16px 16px;">
+                    <div id="pdfLibraryList"></div>
+                </div>
+
+                <!-- Footer -->
+                <div style="padding:16px; border-top:1px solid var(--border); display:flex; gap:12px;">
+                    <button id="pdfLibraryCancel" class="btn" style="flex:1; justify-content:center;">
+                        Cancel
+                    </button>
+                </div>
+            </div>
+        `;
+
+        document.body.appendChild(modal);
+        this.modal = modal;
+        this.bindModalEvents();
+    },
+
+    /**
+     * Bind modal event handlers
+     */
+    bindModalEvents() {
+        const modal = this.modal;
+        if (!modal) return;
+
+        // Close buttons
+        modal.querySelector('#pdfLibraryClose').onclick = () => this.hide();
+        modal.querySelector('#pdfLibraryCancel').onclick = () => this.hide();
+
+        // Click outside to close
+        modal.onclick = (e) => {
+            if (e.target === modal) this.hide();
+        };
+
+        // Dropzone
+        const dropzone = modal.querySelector('#pdfLibraryDropzone');
+        const input = modal.querySelector('#pdfLibraryInput');
+
+        dropzone.onclick = () => input.click();
+
+        dropzone.ondragover = (e) => {
+            e.preventDefault();
+            dropzone.style.borderColor = 'var(--primary)';
+            dropzone.style.background = 'rgba(59, 130, 246, 0.1)';
+        };
+
+        dropzone.ondragleave = () => {
+            dropzone.style.borderColor = '#333';
+            dropzone.style.background = 'transparent';
+        };
+
+        dropzone.ondrop = async (e) => {
+            e.preventDefault();
+            dropzone.style.borderColor = '#333';
+            dropzone.style.background = 'transparent';
+
+            const file = e.dataTransfer.files[0];
+            if (file) await this.handleUpload(file);
+        };
+
+        input.onchange = async (e) => {
+            const file = e.target.files[0];
+            if (file) await this.handleUpload(file);
+            input.value = '';
+        };
+    },
+
+    /**
+     * Handle file upload
+     */
+    async handleUpload(file) {
+        try {
+            await this.upload(file);
+            await this.refreshList();
+        } catch (err) {
+            alert('Upload failed: ' + err.message);
+        }
+    },
+
+    /**
+     * Refresh the PDF list
+     */
+    async refreshList() {
+        const container = document.getElementById('pdfLibraryList');
+        if (!container) return;
+
+        const pdfs = await this.getAll();
+
+        if (pdfs.length === 0) {
+            container.innerHTML = `
+                <div style="text-align:center; padding:40px; color:#666;">
+                    <i class="bi bi-file-earmark-pdf" style="font-size:3rem; opacity:0.3;"></i>
+                    <p style="margin-top:12px;">No PDFs in library</p>
+                </div>
+            `;
+            return;
+        }
+
+        container.innerHTML = '';
+
+        pdfs.forEach(pdf => {
+            const date = new Date(pdf.timestamp).toLocaleDateString();
+            const item = document.createElement('div');
+            item.className = 'bm-item';
+            item.style.cssText = 'display:flex; align-items:center; gap:12px; padding:14px; margin-bottom:8px; cursor:pointer;';
+
+            item.innerHTML = `
+                <i class="bi bi-file-earmark-pdf" style="font-size:1.5rem; color:#ef4444;"></i>
+                <div style="flex:1; min-width:0;">
+                    <div style="font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">${pdf.name}</div>
+                    <div style="font-size:0.75rem; color:#666;">${this.formatSize(pdf.size)} &bull; ${date}</div>
+                </div>
+                <button class="pdf-delete-btn bm-del" data-id="${pdf.id}" title="Delete" style="opacity:0.5;">
+                    <i class="bi bi-trash3"></i>
+                </button>
+            `;
+
+            // Select PDF
+            item.onclick = (e) => {
+                if (e.target.closest('.pdf-delete-btn')) return;
+                this.selectPdf(pdf);
+            };
+
+            // Delete button
+            item.querySelector('.pdf-delete-btn').onclick = async (e) => {
+                e.stopPropagation();
+                if (confirm(`Delete "${pdf.name}"?`)) {
+                    await this.delete(pdf.id);
+                    await this.refreshList();
+                }
+            };
+
+            container.appendChild(item);
+        });
+    },
+
+    /**
+     * Handle PDF selection
+     */
+    selectPdf(pdf) {
+        this.hide();
+        if (this.onSelect) {
+            this.onSelect(pdf);
+        }
+    },
+
+    /**
+     * Show the library modal
+     * @param {Function} callback - Called with selected PDF entry
+     */
+    async show(callback) {
+        this.createModal();
+        this.onSelect = callback;
+
+        if (this.modal) {
+            this.modal.style.display = 'flex';
+            await this.refreshList();
+        }
+    },
+
+    /**
+     * Hide the library modal
+     */
+    hide() {
+        if (this.modal) {
+            this.modal.style.display = 'none';
+        }
+    }
+};
+
+// Auto-initialize
+PDFLibrary.init().catch(console.error);

public/scripts/Registry.js

@@ -0,0 +1,178 @@
+
+export const Registry = {
+    // App instance reference - set by the main app during initialization
+    app: null,
+
+    setApp(appInstance) {
+        this.app = appInstance;
+    },
+
+    getApp() {
+        // Fallback to window.App for backwards compatibility
+        return this.app || window.App;
+    },
+
+    getToken() { return localStorage.getItem('tldraw_auth_token'); },
+    getUsername() { return localStorage.getItem('tldraw_auth_username'); },
+
+    async sync() {
+        const token = this.getToken();
+        if (!token) return; // Anonymous users don't sync registry
+
+        try {
+            // 1. Fetch Cloud Registry
+            const res = await fetch('/api/color_rm/registry', {
+                headers: { 'Authorization': `Bearer ${token}` }
+            });
+            if (!res.ok) {
+                if (res.status === 401) {
+                    console.warn("Registry: Auth token invalid/expired, skipping sync.");
+                    return; // Silent fail for expired tokens
+                }
+                throw new Error("Registry fetch failed");
+            }
+            const data = await res.json();
+            console.log('Registry Sync Data:', data);
+            const cloudProjects = data.projects || [];
+            console.log('Cloud Projects:', cloudProjects);
+            const cloudIds = new Set(cloudProjects.map(p => p.id));
+
+            // 2. Merge into Local DB
+            const app = this.getApp();
+            if (!app || !app.db) {
+                console.warn("Registry: App DB not ready.");
+                return;
+            }
+
+            const tx = app.db.transaction('sessions', 'readwrite');
+            const store = tx.objectStore('sessions');
+
+            // Get all local first to compare
+            const localRequest = await new Promise((resolve) => {
+                const r = store.getAll();
+                r.onsuccess = () => resolve(r.result);
+            });
+
+            const localMap = new Map(localRequest.map(p => [p.id, p]));
+
+            for (const cp of cloudProjects) {
+                const local = localMap.get(cp.id);
+
+                if (!local) {
+                    // New project from cloud (metadata only)
+                    await app.dbPut('sessions', {
+                        id: cp.id,
+                        name: cp.name,
+                        pageCount: cp.pageCount,
+                        lastMod: cp.lastMod,
+                        ownerId: cp.ownerId,
+                        baseFileName: cp.baseFileName,
+                        idx: 0,
+                        bookmarks: [],
+                        clipboardBox: [],
+                        state: null,
+                        isCloudBackedUp: true
+                    });
+                } else {
+                    // Update existing
+                    let changed = false;
+                    if (cp.lastMod > (local.lastMod || 0)) {
+                        local.name = cp.name;
+                        local.pageCount = cp.pageCount;
+                        local.lastMod = cp.lastMod;
+                        local.ownerId = cp.ownerId;
+                        changed = true;
+                    }
+                    // Mark as backed up
+                    if (!local.isCloudBackedUp) {
+                        local.isCloudBackedUp = true;
+                        changed = true;
+                    }
+
+                    if (changed) await app.dbPut('sessions', local);
+                }
+            }
+
+            // Optional: Mark locals as NOT backed up if they are missing from cloud list?
+            // Only do this if we are sure the list is complete.
+            const userId = localStorage.getItem('color_rm_user_id') || (app.liveSync && app.liveSync.userId);
+
+            for (const [id, local] of localMap) {
+                if (local.isCloudBackedUp && !cloudIds.has(id)) {
+                     // Verify ownership before unmarking
+                     if (local.ownerId === userId) {
+                         local.isCloudBackedUp = false;
+                         await app.dbPut('sessions', local);
+                     }
+                }
+            }
+
+        } catch (e) {
+            console.warn("Registry sync error:", e);
+        }
+    },
+
+    async upsert(project) {
+        const token = this.getToken();
+        if (!token) return;
+
+        // Prepare lightweight metadata object
+        const payload = {
+            id: project.id,
+            name: project.name,
+            pageCount: project.pageCount,
+            lastMod: project.lastMod,
+            ownerId: project.ownerId,
+            baseFileName: project.baseFileName
+        };
+
+        fetch('/api/color_rm/registry', {
+            method: 'POST',
+            headers: {
+                'Authorization': `Bearer ${token}`,
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({ project: payload })
+        })
+        .then(res => {
+            if (res.status === 401) {
+                console.warn("Registry: Auth token expired on upsert.");
+                return;
+            }
+            if (res.ok) {
+                // Mark as backed up locally
+                const app = this.getApp();
+                if (app && app.dbGet) {
+                    app.dbGet('sessions', project.id).then(s => {
+                        if (s) {
+                            s.isCloudBackedUp = true;
+                            app.dbPut('sessions', s).then(() => {
+                                // Refresh list if dashboard is open
+                                if(document.getElementById('dashboardModal') && document.getElementById('dashboardModal').style.display === 'flex') {
+                                    app.loadSessionList();
+                                }
+                            });
+                        }
+                    });
+                }
+            }
+        })
+        .catch(e => console.warn("Registry upsert failed:", e));
+    },
+
+    async delete(projectId) {
+        const token = this.getToken();
+        if (!token) return;
+
+        fetch(`/api/color_rm/registry/${projectId}`, {
+            method: 'DELETE',
+            headers: { 'Authorization': `Bearer ${token}` }
+        })
+        .then(res => {
+            if (res.status === 401) {
+                console.warn("Registry: Auth token expired on delete.");
+            }
+        })
+        .catch(e => console.warn("Registry delete failed:", e));
+    }
+};

public/scripts/SplitView.js

@@ -0,0 +1,828 @@
+import { ColorRmApp } from './ColorRmApp.js';
+import { CommonPdfImport } from './CommonPdfImport.js';
+import { PDFLibrary } from './PDFLibrary.js';
+
+/**
+ * Split View - Full-featured local drawing viewer
+ * Uses a second ColorRmApp instance in non-collaborative mode
+ */
+
+// Minimal UI stub for split view (no dashboard, toasts are optional)
+const SplitViewUI = {
+    showDashboard() {},
+    hideDashboard() {},
+    showToast(msg) { console.log('SplitView:', msg); },
+    showInput(title, placeholder, callback) {
+        const text = prompt(title);
+        if (text) callback(text);
+    },
+    showExportModal() {},
+    showLoader() {},
+    hideLoader() {},
+    toggleLoader(show, msg) {
+        // Simple console feedback for split view
+        if (show) console.log('SplitView Loading:', msg || '...');
+        else console.log('SplitView: Loading complete');
+    },
+    updateProgress(percent, msg) {
+        console.log(`SplitView Progress: ${Math.round(percent)}% - ${msg || ''}`);
+    },
+    setSyncStatus(status) {}
+};
+
+export const SplitView = {
+    isEnabled: false,
+    app: null, // ColorRmApp instance for split view
+
+    // IndexedDB for project list (separate from main app)
+    rightDB: null,
+    DB_NAME: 'ColorRMSplitViewFull',
+    DB_VERSION: 1,
+    STORE_NAME: 'projects',
+
+    /**
+     * Initialize DB for project metadata
+     */
+    async initDB() {
+        return new Promise((resolve, reject) => {
+            const request = indexedDB.open(this.DB_NAME, this.DB_VERSION);
+
+            request.onerror = () => reject(request.error);
+            request.onsuccess = () => {
+                this.rightDB = request.result;
+                resolve();
+            };
+
+            request.onupgradeneeded = (event) => {
+                const db = event.target.result;
+                if (!db.objectStoreNames.contains(this.STORE_NAME)) {
+                    db.createObjectStore(this.STORE_NAME, { keyPath: 'id' });
+                }
+            };
+        });
+    },
+
+    /**
+     * Toggle split view
+     */
+    async toggle() {
+        if (!this.rightDB) await this.initDB();
+
+        this.isEnabled = !this.isEnabled;
+
+        if (this.isEnabled) {
+            await this.enable();
+        } else {
+            this.disable();
+        }
+    },
+
+    /**
+     * Enable split view
+     */
+    async enable() {
+        const viewport = document.querySelector('.viewport');
+        const workspace = document.querySelector('.workspace');
+        const sidebar = document.querySelector('.sidebar');
+
+        if (!viewport || !workspace) return;
+
+        // Create container
+        let container = document.getElementById('splitViewContainer');
+        if (!container) {
+            container = document.createElement('div');
+            container.id = 'splitViewContainer';
+            container.className = 'split-view-container';
+            container.innerHTML = this.getHTML();
+            workspace.appendChild(container);
+        }
+
+        container.style.display = 'flex';
+
+        // Move main viewport to left panel
+        const leftPanel = document.getElementById('leftPanel');
+        if (leftPanel) {
+            viewport.dataset.originalParent = 'workspace';
+            leftPanel.appendChild(viewport);
+        }
+
+        // Keep main sidebar visible
+        if (sidebar) sidebar.style.display = 'flex';
+
+        // Initialize the split view app
+        await this.initApp();
+
+        // Bind events
+        this.bindEvents();
+
+        // Load last project if available
+        await this.loadLastProject();
+
+        console.log('Split view enabled (full drawing mode)');
+    },
+
+    /**
+     * Get HTML for split view panel
+     */
+    getHTML() {
+        return `
+        <!-- Panels Container -->
+        <div style="display:flex; flex:1; overflow:hidden; gap:1px;">
+          <!-- Left: Main Canvas -->
+          <div class="split-view-panel" id="leftPanel" style="flex:1;"></div>
+
+          <!-- Right: Full Drawing App -->
+          <div id="rightAppContainer" style="display:flex; flex:1; overflow:hidden; position:relative;">
+
+            <!-- Right Sidebar -->
+            <div id="svSidebar" class="sidebar" style="width:200px; border-left:none; border-right:1px solid var(--border); display:flex; flex-direction:column; z-index:40;">
+
+              <!-- Sidebar Tabs -->
+              <div class="sb-tabs">
+                <div class="sb-tab active" id="svTabTools" data-tab="tools">Tools</div>
+                <div class="sb-tab" id="svTabPages" data-tab="pages">Pages</div>
+                <div class="sb-tab" id="svHideSidebar" style="flex:0; padding:14px; min-width:40px; cursor:pointer;" title="Hide sidebar"><i class="bi bi-chevron-left"></i></div>
+              </div>
+
+              <!-- Tools Panel -->
+              <div class="sidebar-content" id="svPanelTools" style="padding:16px;">
+                <div class="control-section">
+                  <h4>Instruments</h4>
+                  <div class="tool-row">
+                    <button class="btn tool-btn" id="svToolNone" data-tool="none"><i class="bi bi-cursor"></i> Move</button>
+                    <button class="btn tool-btn" id="svToolHand" data-tool="hand"><i class="bi bi-hand-index-thumb"></i> Hand</button>
+                  </div>
+                  <div class="tool-row">
+                    <button class="btn tool-btn" id="svToolPen" data-tool="pen"><i class="bi bi-pen"></i> Pen</button>
+                    <button class="btn tool-btn" id="svToolEraser" data-tool="eraser"><i class="bi bi-eraser"></i> Erase</button>
+                  </div>
+                  <div class="tool-row">
+                    <button class="btn tool-btn" id="svToolShape" data-tool="shape"><i class="bi bi-square"></i> Shape</button>
+                    <button class="btn tool-btn" id="svToolLasso" data-tool="lasso"><i class="bi bi-bounding-box-circles"></i> Lasso</button>
+                  </div>
+                </div>
+
+                <!-- Tool Settings -->
+                <div class="control-section" id="svToolSettings" style="margin-top:16px;">
+                  <h4>Settings</h4>
+
+                  <!-- Pen Colors -->
+                  <div id="svPenColors" style="display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px;">
+                    <div class="color-dot" style="background:#ef4444" data-color="#ef4444"></div>
+                    <div class="color-dot" style="background:#3b82f6" data-color="#3b82f6"></div>
+                    <div class="color-dot" style="background:#22c55e" data-color="#22c55e"></div>
+                    <div class="color-dot" style="background:#eab308" data-color="#eab308"></div>
+                    <div class="color-dot" style="background:#000000" data-color="#000000"></div>
+                    <div class="color-dot" style="background:#ffffff; border-color:#666;" data-color="#ffffff"></div>
+                  </div>
+
+                  <!-- Size Slider -->
+                  <div style="display:flex; align-items:center; gap:8px;">
+                    <span style="font-size:0.7rem; color:#888;">Size</span>
+                    <input type="range" id="svBrushSize" min="1" max="50" value="3" class="slider" style="flex:1">
+                  </div>
+
+                  <!-- Shape Options (shown when shape tool selected) -->
+                  <div id="svShapeOptions" style="display:none; margin-top:12px;">
+                    <div class="shape-grid" style="grid-template-columns: repeat(4, 1fr);">
+                      <div class="shape-btn" data-shape="rectangle"><i class="bi bi-square"></i></div>
+                      <div class="shape-btn" data-shape="circle"><i class="bi bi-circle"></i></div>
+                      <div class="shape-btn" data-shape="line"><i class="bi bi-dash-lg"></i></div>
+                      <div class="shape-btn" data-shape="arrow"><i class="bi bi-arrow-right"></i></div>
+                    </div>
+                  </div>
+
+                  <!-- Eraser Options -->
+                  <div id="svEraserOptions" style="display:none; margin-top:12px;">
+                    <div style="display:flex; justify-content:space-between; align-items:center;">
+                      <span style="font-size:0.8rem; color:#aaa">Stroke Eraser</span>
+                      <label class="switch" style="transform:scale(0.8)">
+                        <input type="checkbox" id="svStrokeEraser">
+                        <span class="slider-switch"></span>
+                      </label>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Preview Toggle -->
+                <div class="control-section" style="margin-top:16px;">
+                  <div style="display:flex; align-items:center; justify-content:space-between; padding:10px; border:1px solid #222; border-radius:6px; background:#0a0a0a;">
+                    <span style="font-size:0.75rem; color:#888; font-weight:600; text-transform:uppercase;">Preview</span>
+                    <label class="switch">
+                      <input type="checkbox" id="svPreviewToggle">
+                      <span class="slider-switch"></span>
+                    </label>
+                  </div>
+                </div>
+
+                <!-- Import Button -->
+                <div class="control-section" style="margin-top:auto; padding-top:16px;">
+                  <button class="btn btn-primary" id="svImportBtn" style="width:100%; justify-content:center;">
+                    <i class="bi bi-folder-plus"></i> PDF Library
+                  </button>
+                  <button class="btn" id="svProjectsBtn" style="width:100%; justify-content:center; margin-top:8px; border-color:#444;">
+                    <i class="bi bi-folder"></i> My Projects
+                  </button>
+                </div>
+              </div>
+
+              <!-- Pages Panel -->
+              <div class="sidebar-content" id="svPanelPages" style="display:none; padding:16px;">
+                <div id="svPageList" class="sb-page-grid" style="grid-template-columns: 1fr; gap:10px;"></div>
+              </div>
+            </div>
+
+            <!-- Right Viewport (Canvas Area) -->
+            <div id="viewport" class="viewport" style="position:relative; background:#000; flex:1; display:flex; align-items:center; justify-content:center; overflow:hidden;">
+
+              <!-- Floating Sidebar Toggle -->
+              <button id="svSidebarToggle" class="btn btn-icon"
+                      style="position:absolute; top:12px; left:12px; z-index:100; display:none; background:var(--bg-panel); border:1px solid var(--border);"
+                      title="Show Sidebar">
+                <i class="bi bi-layout-sidebar"></i>
+              </button>
+
+              <!-- Canvas -->
+              <canvas id="canvas" oncontextmenu="return false;"></canvas>
+
+              <!-- Context Toolbar for selections -->
+              <div id="contextToolbar" class="context-toolbar">
+                <button class="ctx-btn" title="Delete" id="svDeleteBtn"><i class="bi bi-trash3"></i></button>
+              </div>
+
+              <!-- Navigation Island -->
+              <div class="nav-island">
+                <button class="btn btn-icon" id="svPrevPage" style="background:transparent; border:none; border-radius:4px;"><i class="bi bi-chevron-left"></i></button>
+
+                <div style="display:flex; align-items:center; gap:4px; font-family:monospace; font-size:0.8rem; font-weight:700;">
+                  <input type="number" id="svPageInput" style="background:transparent; border:none; color:white; width:32px; text-align:right; padding:2px;" min="1" value="1">
+                  <span id="svPageTotal" style="color:#555;">/ --</span>
+                </div>
+
+                <button class="btn btn-icon" id="svNextPage" style="background:transparent; border:none; border-radius:4px;"><i class="bi bi-chevron-right"></i></button>
+
+                <div style="width:1px; height:16px; background:#333;"></div>
+
+                <button id="svZoomReset" class="btn btn-sm" style="background:transparent; border:none; font-family:monospace; font-size:0.75rem; min-width:50px; color:#888;">100%</button>
+
+                <div style="width:1px; height:16px; background:#333;"></div>
+
+                <button class="btn btn-icon" id="svUndo" style="background:transparent; border:none; border-radius:4px;"><i class="bi bi-arrow-counterclockwise" style="font-size:0.8rem"></i></button>
+              </div>
+
+              <!-- Status Badge -->
+              <div style="position:absolute; top:12px; right:12px; display:flex; gap:8px;">
+                <div class="badge" style="background:rgba(255,255,255,0.05); color:#888; font-size:0.6rem; padding:4px 8px;">LOCAL</div>
+              </div>
+            </div>
+          </div>
+        </div>
+        `;
+    },
+
+    /**
+     * Initialize ColorRmApp for split view
+     */
+    async initApp() {
+        const container = document.getElementById('rightAppContainer');
+        if (!container) return;
+
+        // Create the split view app instance
+        this.app = new ColorRmApp({
+            isMain: false,
+            container: container,
+            collaborative: false, // No LiveSync
+            dbName: 'ColorRM_SplitView_V1' // Separate database
+        });
+
+        // Initialize with minimal UI (no registry sync, no LiveSync)
+        await this.app.init(SplitViewUI, null, null);
+
+        // Expose for debugging
+        window.SplitViewApp = this.app;
+
+        // Register with CommonPdfImport
+        CommonPdfImport.setSplitViewApp(this.app);
+
+        console.log('SplitView ColorRmApp initialized');
+    },
+
+    /**
+     * Bind all event handlers
+     */
+    bindEvents() {
+        // Sidebar toggle
+        const hideSidebar = document.getElementById('svHideSidebar');
+        const showSidebar = document.getElementById('svSidebarToggle');
+        const svSidebar = document.getElementById('svSidebar');
+
+        if (hideSidebar) {
+            hideSidebar.onclick = () => {
+                svSidebar.style.display = 'none';
+                showSidebar.style.display = 'flex';
+            };
+        }
+        if (showSidebar) {
+            showSidebar.onclick = () => {
+                svSidebar.style.display = 'flex';
+                showSidebar.style.display = 'none';
+            };
+        }
+
+        // Sidebar tabs
+        document.getElementById('svTabTools')?.addEventListener('click', () => this.switchTab('tools'));
+        document.getElementById('svTabPages')?.addEventListener('click', () => this.switchTab('pages'));
+
+        // Tool buttons
+        document.querySelectorAll('#svSidebar [data-tool]').forEach(btn => {
+            btn.addEventListener('click', () => {
+                const tool = btn.dataset.tool;
+                this.setTool(tool);
+            });
+        });
+
+        // Color dots
+        document.querySelectorAll('#svPenColors .color-dot').forEach(dot => {
+            dot.addEventListener('click', () => {
+                if (this.app) {
+                    this.app.state.penColor = dot.dataset.color;
+                    this.app.state.shapeBorder = dot.dataset.color;
+                }
+            });
+        });
+
+        // Brush size slider
+        const sizeSlider = document.getElementById('svBrushSize');
+        if (sizeSlider) {
+            sizeSlider.addEventListener('input', (e) => {
+                if (this.app) {
+                    const val = parseInt(e.target.value);
+                    this.app.state.penSize = val;
+                    this.app.state.eraserSize = val;
+                    this.app.state.shapeWidth = val;
+                }
+            });
+        }
+
+        // Shape buttons
+        document.querySelectorAll('#svShapeOptions [data-shape]').forEach(btn => {
+            btn.addEventListener('click', () => {
+                if (this.app) {
+                    document.querySelectorAll('#svShapeOptions [data-shape]').forEach(b => b.classList.remove('active'));
+                    btn.classList.add('active');
+                    this.app.state.shapeType = btn.dataset.shape;
+                }
+            });
+        });
+
+        // Stroke eraser toggle
+        const strokeEraser = document.getElementById('svStrokeEraser');
+        if (strokeEraser) {
+            strokeEraser.addEventListener('change', (e) => {
+                if (this.app) {
+                    this.app.state.eraserType = e.target.checked ? 'stroke' : 'pixel';
+                }
+            });
+        }
+
+        // Preview toggle
+        const previewToggle = document.getElementById('svPreviewToggle');
+        if (previewToggle) {
+            previewToggle.addEventListener('change', (e) => {
+                if (this.app) {
+                    this.app.state.previewOn = e.target.checked;
+                    this.app.render();
+                }
+            });
+        }
+
+        // Navigation
+        document.getElementById('svPrevPage')?.addEventListener('click', () => this.app?.loadPage(this.app.state.idx - 1));
+        document.getElementById('svNextPage')?.addEventListener('click', () => this.app?.loadPage(this.app.state.idx + 1));
+        document.getElementById('svUndo')?.addEventListener('click', () => this.app?.undo());
+        document.getElementById('svZoomReset')?.addEventListener('click', () => {
+            if (this.app) {
+                this.app.state.zoom = 1;
+                this.app.state.pan = { x: 0, y: 0 };
+                this.app.render();
+                this.updateZoomDisplay();
+            }
+        });
+
+        // Page input
+        const pageInput = document.getElementById('svPageInput');
+        if (pageInput) {
+            pageInput.addEventListener('change', (e) => {
+                const page = parseInt(e.target.value) - 1;
+                this.app?.loadPage(page);
+            });
+        }
+
+        // Import button - show PDF library
+        document.getElementById('svImportBtn')?.addEventListener('click', () => {
+            CommonPdfImport.showLibrary('split');
+        });
+
+        // Projects button
+        document.getElementById('svProjectsBtn')?.addEventListener('click', () => this.showProjectManager());
+
+        // Delete button
+        document.getElementById('svDeleteBtn')?.addEventListener('click', () => this.app?.deleteSelected());
+
+        // Hook into app's render to update page info
+        if (this.app) {
+            const originalLoadPage = this.app.loadPage.bind(this.app);
+            this.app.loadPage = async (i, broadcast) => {
+                await originalLoadPage(i, broadcast);
+                this.updatePageInfo();
+                this.updateZoomDisplay();
+            };
+
+            // Also update on render for zoom changes
+            const originalRender = this.app.render.bind(this.app);
+            this.app.render = () => {
+                originalRender();
+                this.updateZoomDisplay();
+            };
+        }
+    },
+
+    /**
+     * Switch sidebar tab
+     */
+    switchTab(tab) {
+        document.getElementById('svTabTools')?.classList.toggle('active', tab === 'tools');
+        document.getElementById('svTabPages')?.classList.toggle('active', tab === 'pages');
+        document.getElementById('svPanelTools').style.display = tab === 'tools' ? 'flex' : 'none';
+        document.getElementById('svPanelPages').style.display = tab === 'pages' ? 'block' : 'none';
+
+        if (tab === 'pages') {
+            this.renderPageThumbnails();
+        }
+    },
+
+    /**
+     * Set active tool
+     */
+    setTool(tool) {
+        if (!this.app) return;
+
+        this.app.setTool(tool);
+
+        // Update button states
+        document.querySelectorAll('#svSidebar [data-tool]').forEach(btn => {
+            btn.classList.toggle('active', btn.dataset.tool === tool);
+        });
+
+        // Show/hide tool-specific options
+        document.getElementById('svShapeOptions').style.display = tool === 'shape' ? 'block' : 'none';
+        document.getElementById('svEraserOptions').style.display = tool === 'eraser' ? 'block' : 'none';
+    },
+
+    /**
+     * Update page info display
+     */
+    updatePageInfo() {
+        if (!this.app) return;
+        const pageInput = document.getElementById('svPageInput');
+        const pageTotal = document.getElementById('svPageTotal');
+
+        if (pageInput) pageInput.value = this.app.state.idx + 1;
+        if (pageTotal) pageTotal.textContent = `/ ${this.app.state.images.length}`;
+    },
+
+    /**
+     * Update zoom display
+     */
+    updateZoomDisplay() {
+        if (!this.app) return;
+        const zoomBtn = document.getElementById('svZoomReset');
+        if (zoomBtn) {
+            zoomBtn.textContent = Math.round(this.app.state.zoom * 100) + '%';
+        }
+    },
+
+    /**
+     * Render page thumbnails in sidebar
+     */
+    renderPageThumbnails() {
+        if (!this.app) return;
+        const container = document.getElementById('svPageList');
+        if (!container) return;
+
+        container.innerHTML = '';
+
+        this.app.state.images.forEach((img, idx) => {
+            const item = document.createElement('div');
+            item.className = 'sb-page-item';
+            item.style.cssText = 'aspect-ratio: auto; cursor: pointer; position: relative;';
+            if (idx === this.app.state.idx) item.classList.add('active');
+
+            const imgEl = document.createElement('img');
+            imgEl.style.cssText = 'width:100%; display:block; border-radius:4px; border:1px solid #333;';
+
+            // Create thumbnail from blob
+            if (img.blob) {
+                const url = URL.createObjectURL(img.blob);
+                imgEl.src = url;
+                imgEl.onload = () => URL.revokeObjectURL(url);
+            }
+
+            const num = document.createElement('div');
+            num.className = 'sb-page-num';
+            num.textContent = idx + 1;
+
+            item.appendChild(imgEl);
+            item.appendChild(num);
+            item.onclick = () => {
+                this.app.loadPage(idx);
+                this.renderPageThumbnails(); // Refresh to update active state
+            };
+
+            container.appendChild(item);
+        });
+    },
+
+    /**
+     * Disable split view
+     */
+    disable() {
+        const viewport = document.querySelector('.viewport');
+        const workspace = document.querySelector('.workspace');
+        const sidebar = document.querySelector('.sidebar');
+        const container = document.getElementById('splitViewContainer');
+        const leftPanel = document.getElementById('leftPanel');
+
+        if (!viewport || !workspace) return;
+
+        console.log('Disabling split view...');
+
+        if (container) container.style.display = 'none';
+
+        if (leftPanel && leftPanel.contains(viewport)) {
+            leftPanel.removeChild(viewport);
+        }
+
+        if (viewport.parentNode === workspace) workspace.removeChild(viewport);
+        if (sidebar && sidebar.parentNode === workspace) workspace.removeChild(sidebar);
+        if (container && container.parentNode === workspace) workspace.removeChild(container);
+
+        if (sidebar) {
+            workspace.appendChild(sidebar);
+            sidebar.style.display = 'flex';
+        }
+        workspace.appendChild(viewport);
+        viewport.style.display = 'flex';
+
+        if (container) workspace.appendChild(container);
+
+        console.log('Split view disabled');
+    },
+
+    /**
+     * Handle PDF import for split view (called by CommonPdfImport)
+     * This is now a simpler wrapper since CommonPdfImport handles most logic
+     */
+    async handlePdfImport(file) {
+        if (!this.app || !file) return;
+
+        try {
+            console.log('SplitView: Importing PDF:', file.name);
+
+            const projectName = file.name.replace(/\.pdf$/i, '');
+
+            // Let CommonPdfImport handle the actual import
+            await CommonPdfImport.importIntoApp(this.app, file, projectName);
+
+            // Update page info
+            this.updatePageInfo();
+            this.renderPageThumbnails();
+
+            // Save to project list
+            await this.saveProjectMeta(this.app.state.sessionId, projectName);
+
+            console.log('SplitView: PDF imported successfully');
+
+        } catch (error) {
+            console.error('SplitView: Error importing PDF:', error);
+            alert('Error importing PDF: ' + error.message);
+        }
+    },
+
+    /**
+     * Save project metadata
+     */
+    async saveProjectMeta(id, name) {
+        if (!this.rightDB) return;
+
+        const tx = this.rightDB.transaction([this.STORE_NAME], 'readwrite');
+        const store = tx.objectStore(this.STORE_NAME);
+
+        await new Promise((resolve, reject) => {
+            const req = store.put({
+                id: id,
+                name: name,
+                timestamp: Date.now()
+            });
+            req.onsuccess = () => resolve();
+            req.onerror = () => reject(req.error);
+        });
+    },
+
+    /**
+     * Get all projects
+     */
+    async getAllProjects() {
+        if (!this.rightDB) return [];
+
+        const tx = this.rightDB.transaction([this.STORE_NAME], 'readonly');
+        const store = tx.objectStore(this.STORE_NAME);
+
+        return new Promise((resolve, reject) => {
+            const req = store.getAll();
+            req.onsuccess = () => resolve(req.result || []);
+            req.onerror = () => reject(req.error);
+        });
+    },
+
+    /**
+     * Load last project
+     */
+    async loadLastProject() {
+        try {
+            const projects = await this.getAllProjects();
+            if (projects.length > 0) {
+                projects.sort((a, b) => b.timestamp - a.timestamp);
+                const lastProject = projects[0];
+
+                // Try to open the session
+                await this.app.openSession(lastProject.id);
+                this.updatePageInfo();
+                this.renderPageThumbnails();
+            }
+        } catch (error) {
+            console.log('SplitView: No previous project to load');
+        }
+    },
+
+    /**
+     * Show project manager
+     */
+    async showProjectManager() {
+        let modal = document.getElementById('svProjectModal');
+        if (!modal) {
+            modal = document.createElement('div');
+            modal.id = 'svProjectModal';
+            modal.className = 'overlay';
+            modal.style.cssText = 'display:none; position:fixed; inset:0; background:rgba(0,0,0,0.8); z-index:9999; align-items:center; justify-content:center;';
+            modal.innerHTML = `
+                <div class="card" style="width:90%; max-width:500px; max-height:80vh; display:flex; flex-direction:column;">
+                    <div style="display:flex; justify-content:space-between; align-items:center; padding:20px; border-bottom:1px solid var(--border);">
+                        <h3 style="margin:0;">Local Projects</h3>
+                        <button id="svCloseProjectModal" style="background:none; border:none; color:#888; cursor:pointer; font-size:1.2rem;">
+                            <i class="bi bi-x-lg"></i>
+                        </button>
+                    </div>
+                    <div id="svProjectList" style="flex:1; overflow-y:auto; padding:20px;"></div>
+                    <div style="padding:20px; border-top:1px solid var(--border);">
+                        <button class="btn btn-primary" id="svImportNewBtn" style="width:100%;">
+                            <i class="bi bi-folder-plus"></i> Open PDF Library
+                        </button>
+                    </div>
+                </div>
+            `;
+            document.body.appendChild(modal);
+
+            document.getElementById('svCloseProjectModal').onclick = () => modal.style.display = 'none';
+            document.getElementById('svImportNewBtn').onclick = () => {
+                modal.style.display = 'none';
+                CommonPdfImport.showLibrary('split');
+            };
+        }
+
+        // Populate list
+        await this.refreshProjectList();
+        modal.style.display = 'flex';
+    },
+
+    /**
+     * Refresh project list
+     */
+    async refreshProjectList() {
+        const container = document.getElementById('svProjectList');
+        if (!container) return;
+
+        const projects = await this.getAllProjects();
+
+        if (projects.length === 0) {
+            container.innerHTML = `
+                <div style="text-align:center; padding:40px; color:#666;">
+                    <i class="bi bi-folder-x" style="font-size:3rem; margin-bottom:10px;"></i>
+                    <p>No projects yet</p>
+                </div>
+            `;
+            return;
+        }
+
+        projects.sort((a, b) => b.timestamp - a.timestamp);
+
+        container.innerHTML = '';
+        projects.forEach(project => {
+            const isActive = this.app && this.app.state.sessionId === project.id;
+            const date = new Date(project.timestamp).toLocaleDateString();
+
+            const item = document.createElement('div');
+            item.className = 'bm-item';
+            item.style.cssText = `display:flex; justify-content:space-between; align-items:center; padding:15px; margin-bottom:8px; ${isActive ? 'border-color:#fff;' : ''}`;
+
+            item.innerHTML = `
+                <div style="flex:1; cursor:pointer;" class="proj-name">
+                    <div style="font-weight:600; margin-bottom:5px;">${project.name}</div>
+                    <div style="font-size:0.8rem; color:#888;">${date}</div>
+                </div>
+                <div style="display:flex; gap:8px; align-items:center;">
+                    ${isActive ? '<span style="color:#0f0; font-size:0.8rem;">● Active</span>' : ''}
+                    <button class="bm-del proj-del" title="Delete"><i class="bi bi-trash3"></i></button>
+                </div>
+            `;
+
+            item.querySelector('.proj-name').onclick = async () => {
+                await this.app.openSession(project.id);
+                this.updatePageInfo();
+                this.renderPageThumbnails();
+                document.getElementById('svProjectModal').style.display = 'none';
+            };
+
+            item.querySelector('.proj-del').onclick = async (e) => {
+                e.stopPropagation();
+                await this.deleteProject(project.id);
+            };
+
+            container.appendChild(item);
+        });
+    },
+
+    /**
+     * Delete project
+     */
+    async deleteProject(projectId) {
+        if (!confirm('Delete this project?')) return;
+
+        // Delete from project list DB
+        if (this.rightDB) {
+            const tx = this.rightDB.transaction([this.STORE_NAME], 'readwrite');
+            await new Promise(resolve => {
+                const req = tx.objectStore(this.STORE_NAME).delete(projectId);
+                req.onsuccess = resolve;
+            });
+        }
+
+        // Delete pages and session from app's DB
+        if (this.app && this.app.db) {
+            // Delete pages
+            const tx = this.app.db.transaction(['pages', 'sessions'], 'readwrite');
+            const pagesStore = tx.objectStore('pages');
+            const sessionsStore = tx.objectStore('sessions');
+
+            const pages = await new Promise(resolve => {
+                const req = pagesStore.index('sessionId').getAll(projectId);
+                req.onsuccess = () => resolve(req.result);
+            });
+
+            for (const page of pages) {
+                pagesStore.delete(page.id);
+            }
+            sessionsStore.delete(projectId);
+        }
+
+        // If this was the active project, clear the view
+        if (this.app && this.app.state.sessionId === projectId) {
+            this.app.state.images = [];
+            this.app.state.sessionId = null;
+            this.app.render();
+            this.updatePageInfo();
+        }
+
+        await this.refreshProjectList();
+    },
+
+    /**
+     * Initialize
+     */
+    async init() {
+        try {
+            if (typeof pdfjsLib !== 'undefined') {
+                pdfjsLib.GlobalWorkerOptions.workerSrc =
+                    'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';
+            }
+
+            await this.initDB();
+            console.log('Split View (Full) initialized');
+
+            // Expose for CommonPdfImport
+            window.SplitView = this;
+        } catch (error) {
+            console.error('SplitView init error:', error);
+        }
+    }
+};

public/scripts/UI.js

@@ -0,0 +1,83 @@
+export const UI = {
+    showDashboard: () => {
+        const db = document.getElementById('dashboardModal');
+        if (db) db.style.display='flex';
+        if (window.App && window.App.loadSessionList) window.App.loadSessionList();
+    },
+    hideDashboard: () => {
+        const db = document.getElementById('dashboardModal');
+        if (db) db.style.display='none';
+    },
+    showExportModal: () => {
+        const em = document.getElementById('exportModal');
+        if (em) em.style.display='flex';
+        if (window.App && window.App.renderDlGrid) window.App.renderDlGrid();
+    },
+    toggleLoader: (show, text) => {
+        const loader = document.getElementById('loader');
+        if (loader) loader.style.display = show ? 'grid' : 'none';
+        if(text) {
+            const lt = document.getElementById('loadText');
+            if (lt) lt.innerText = text;
+        }
+        if(show) {
+            const pb = document.getElementById('progBar');
+            if (pb) pb.style.width='0%';
+            const pd = document.getElementById('progDetail');
+            if (pd) pd.innerText='';
+        }
+    },
+    updateProgress: (pct, msg) => {
+        const pb = document.getElementById('progBar');
+        if (pb) pb.style.width = pct + '%';
+        const pd = document.getElementById('progDetail');
+        if (msg && pd) pd.innerText = msg;
+    },
+    showInput: (title, placeholder, callback) => {
+        const m = document.getElementById('inputModal');
+        const i = document.getElementById('inputField');
+        const b = document.getElementById('inputConfirmBtn');
+        const t = document.getElementById('inputTitle');
+
+        if (!m || !i || !b) return;
+
+        if (t) t.innerText = title;
+        i.value = '';
+        i.placeholder = placeholder;
+        m.style.display = 'flex';
+        i.focus();
+
+        const confirm = () => {
+            const val = i.value.trim();
+            if(val) {
+                m.style.display = 'none';
+                callback(val);
+            }
+        };
+        b.onclick = confirm;
+        i.onkeydown = (e) => { if(e.key==='Enter') confirm(); };
+    },
+    showToast: (msg) => {
+        const t = document.getElementById('toast');
+        if (!t) return;
+        t.innerText = msg;
+        t.classList.add('show');
+        setTimeout(() => t.classList.remove('show'), 2000);
+    },
+    setSyncStatus: (status) => {
+        const el = document.getElementById('syncStatus');
+        if (!el) return;
+
+        if (status === 'saved') {
+            el.innerHTML = '<span style="color:#fff">●</span> Synced';
+            setTimeout(() => { if(el.innerText.includes('Synced')) el.innerHTML = ''; }, 3000);
+        } else if (status === 'syncing') {
+            el.innerHTML = '<span style="color:#888">○</span> Saving';
+        } else if (status === 'offline') {
+            el.innerHTML = '<span style="color:#ff4d4d">●</span> Offline';
+        } else if (status === 'new') {
+            el.innerHTML = '<span style="color:#fff">●</span> New Project';
+            setTimeout(() => el.innerHTML = '', 5000);
+        }
+    }
+};

public/scripts/main.js

@@ -0,0 +1,52 @@
+import { ColorRmApp } from './ColorRmApp.js';
+import { UI } from './UI.js';
+import { Registry } from './Registry.js';
+import { LiveSyncClient } from './LiveSync.js';
+import { CommonPdfImport } from './CommonPdfImport.js';
+import { SplitView } from './SplitView.js';
+import { PDFLibrary } from './PDFLibrary.js';
+
+// Expose globals for compatibility and debugging
+window.UI = UI;
+window.Registry = Registry;
+window.CommonPdfImport = CommonPdfImport;
+window.PDFLibrary = PDFLibrary;
+
+// Initialize the main application instance
+const app = new ColorRmApp({ isMain: true });
+
+// Register app with Registry for proper instance binding
+Registry.setApp(app);
+
+// Add SplitView integration
+app.toggleSplitView = function() {
+    SplitView.toggle();
+    const btn = document.getElementById('splitViewToggle');
+    if (btn) {
+        if (SplitView.isEnabled) {
+            btn.classList.add('active');
+        } else {
+            btn.classList.remove('active');
+        }
+    }
+};
+
+window.App = app;
+
+// Initialize when DOM is ready
+document.addEventListener('DOMContentLoaded', async () => {
+    console.log("Initializing ColorRM ESM...");
+
+    // Initialize common modules
+    CommonPdfImport.init(app);
+    await SplitView.init();
+
+    // Initialize App with dependencies
+    // Note: LiveSyncClient class is passed, App will instantiate it
+    await app.init(UI, Registry, LiveSyncClient);
+
+    // Expose LiveSync for debugging
+    window.LiveSync = app.liveSync;
+
+    console.log("ColorRM Initialized.");
+});

public/scripts/spen_engine.js

@@ -0,0 +1,84 @@
+
+export function initializeSPen(canvasElement) {
+    let isPen = false
+    let lastEvent = null
+
+    // S-Pen uses button ID 5
+    const SPEN_BUTTON_ID = 5
+
+    const handlePointerDown = (e) => {
+        // CRITICAL: Only dispatch if the event target is the canvas or inside it
+        if (e.target !== canvasElement && !canvasElement.contains(e.target)) {
+            return
+        }
+
+        if (e.button === SPEN_BUTTON_ID) {
+            isPen = true
+            // Dispatch a synthetic 'touchstart' or 'pointerdown' event
+            const newEvent = new PointerEvent('pointerdown', {
+                ...e,
+                button: 0, // Pretend it's a left-click/touch
+                isPrimary: true,
+                bubbles: true,
+                cancelable: true
+            })
+            lastEvent = newEvent
+            // Dispatch specifically to the canvas
+            canvasElement.dispatchEvent(newEvent)
+            e.preventDefault()
+        }
+    }
+
+    const handlePointerMove = (e) => {
+        // If we are dragging, we might be outside the canvas, but we still want to track it
+        // IF we started inside. But for S-Pen hover/move, we generally want it scoped.
+        // However, standard pointer capture should handle drags.
+
+        // For simple robust behavior: if isPen is true, we keep dispatching.
+        // If isPen is false, we check target.
+
+        if (!isPen && (e.target !== canvasElement && !canvasElement.contains(e.target))) {
+            return
+        }
+
+        if (isPen) {
+            const newEvent = new PointerEvent('pointermove', {
+                ...e,
+                button: 0,
+                isPrimary: true,
+                bubbles: true,
+                cancelable: true
+            })
+            lastEvent = newEvent
+            canvasElement.dispatchEvent(newEvent)
+            e.preventDefault()
+        }
+    }
+
+    const handlePointerUp = (e) => {
+        if (isPen) {
+            isPen = false
+            const newEvent = new PointerEvent('pointerup', {
+                ...e,
+                button: 0,
+                isPrimary: true,
+                bubbles: true,
+                cancelable: true
+            })
+            canvasElement.dispatchEvent(newEvent)
+            e.preventDefault()
+        }
+    }
+
+    // We still listen on window to catch events that bubble up or happen globally (like up outside)
+    // but we added target checks in Down and Move to prevent cross-talk.
+    window.addEventListener('pointerdown', handlePointerDown)
+    window.addEventListener('pointermove', handlePointerMove)
+    window.addEventListener('pointerup', handlePointerUp)
+
+    return () => {
+        window.removeEventListener('pointerdown', handlePointerDown)
+        window.removeEventListener('pointermove', handlePointerMove)
+        window.removeEventListener('pointerup', handlePointerUp)
+    }
+}

worker/worker.ts

@@ -140,7 +140,7 @@ const router = AutoRouter<IRequest, [env: Env, ctx: ExecutionContext]>({
 		if (!env.LIVEBLOCKS_SECRET_KEY) {
 			return new Response('Missing LIVEBLOCKS_SECRET_KEY', { status: 500 })
 		}
-		
+
 		const liveblocks = new Liveblocks({
 			secret: env.LIVEBLOCKS_SECRET_KEY,
 		})

wrangler.toml

@@ -23,11 +23,11 @@ bindings = [
 # Durable objects require migrations to create/modify/delete them
 [[migrations]]
 tag = "v1"
-new_classes = ["TldrawDurableObject"]
+new_sqlite_classes = ["TldrawDurableObject"]
 
 [[migrations]]
 tag = "v2"
-new_classes = ["ColorRmDurableObject"]
+new_sqlite_classes = ["ColorRmDurableObject"]
 
 # We store rooms and asset uploads in an R2 bucket
 [[r2_buckets]]
@@ -38,8 +38,8 @@ preview_bucket_name = 'tldraw-shubh'
 # KV Namespace for User Authentication
 [[kv_namespaces]]
 binding = "TLDRAW_USERS_KV"
-id = "2d0c648825224097839356393437651a" # Placeholder - replace with actual ID from `npx wrangler kv:namespace create TLDRAW_USERS_KV`
-preview_id = "2d0c648825224097839356393437651a"
+id = "d0faab9b5c524d23abeec7f62190bacd" # Placeholder - replace with actual ID from `npx wrangler kv:namespace create TLDRAW_USERS_KV`
+preview_id = "d0faab9b5c524d23abeec7f62190bacd"
 
 [env.preview]
 durable_objects.bindings = [