Merge pull request #9 from ZimengXiong/pre-release

v0.1.6 Add export button, store library in database

VERSION

@@ -1 +1 @@
-0.1.5
+0.1.6

backend/docker-entrypoint.sh

@@ -5,6 +5,12 @@ set -e
 if [ ! -f "/app/prisma/schema.prisma" ]; then
     echo "Mount is empty. Hydrating /app/prisma..."
     cp -R /app/prisma_template/. /app/prisma/
+else
+    # Volume exists but may be missing new migrations from an upgrade
+    # Always sync schema and migrations from template to ensure upgrades work
+    echo "Syncing schema and migrations from template..."
+    cp /app/prisma_template/schema.prisma /app/prisma/schema.prisma
+    cp -R /app/prisma_template/migrations/. /app/prisma/migrations/
 fi
 
 # 2. Fix permissions unconditionally (Running as root)

backend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "backend",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "",
   "main": "index.js",
   "scripts": {

backend/prisma/migrations/20251124220546_add_library_model/migration.sql

@@ -0,0 +1,7 @@
+-- CreateTable
+CREATE TABLE "Library" (
+    "id" TEXT NOT NULL PRIMARY KEY DEFAULT 'default',
+    "items" TEXT NOT NULL DEFAULT '[]',
+    "createdAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" DATETIME NOT NULL
+);

backend/prisma/schema.prisma

@@ -33,3 +33,10 @@ model Drawing {
   createdAt    DateTime    @default(now())
   updatedAt    DateTime    @updatedAt
 }
+
+model Library {
+  id        String   @id @default("default") // Singleton pattern - use "default" ID
+  items     String   @default("[]") // Stored as JSON string array of library items
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+}

backend/src/generated/client/index-browser.js

@@ -139,6 +139,13 @@ exports.Prisma.DrawingScalarFieldEnum = {
   updatedAt: 'updatedAt'
 };
 
+exports.Prisma.LibraryScalarFieldEnum = {
+  id: 'id',
+  items: 'items',
+  createdAt: 'createdAt',
+  updatedAt: 'updatedAt'
+};
+
 exports.Prisma.SortOrder = {
   asc: 'asc',
   desc: 'desc'
@@ -152,7 +159,8 @@ exports.Prisma.NullsOrder = {
 
 exports.Prisma.ModelName = {
   Collection: 'Collection',
-  Drawing: 'Drawing'
+  Drawing: 'Drawing',
+  Library: 'Library'
 };
 
 /**

backend/src/generated/client/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "prisma-client-6afe3d9baa793154c8d01c79f8418d91423e5ccaec794547bf848a451459cf53",
+  "name": "prisma-client-8eed3ee5004eaec649fc60571177778f25acb4a3cdc2c238bbb8e70dd820d0ff",
   "main": "index.js",
   "types": "index.d.ts",
   "browser": "index-browser.js",

backend/src/generated/client/schema.prisma

@@ -33,3 +33,10 @@ model Drawing {
   createdAt    DateTime    @default(now())
   updatedAt    DateTime    @updatedAt
 }
+
+model Library {
+  id        String   @id @default("default") // Singleton pattern - use "default" ID
+  items     String   @default("[]") // Stored as JSON string array of library items
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+}

backend/src/generated/client/wasm.js

@@ -139,6 +139,13 @@ exports.Prisma.DrawingScalarFieldEnum = {
   updatedAt: 'updatedAt'
 };
 
+exports.Prisma.LibraryScalarFieldEnum = {
+  id: 'id',
+  items: 'items',
+  createdAt: 'createdAt',
+  updatedAt: 'updatedAt'
+};
+
 exports.Prisma.SortOrder = {
   asc: 'asc',
   desc: 'desc'
@@ -152,7 +159,8 @@ exports.Prisma.NullsOrder = {
 
 exports.Prisma.ModelName = {
   Collection: 'Collection',
-  Drawing: 'Drawing'
+  Drawing: 'Drawing',
+  Library: 'Library'
 };
 
 /**

backend/src/index.ts

@@ -801,6 +801,58 @@ app.delete("/collections/:id", async (req, res) => {
   }
 });
 
+// --- Library ---
+
+// GET /library - Fetch stored library items
+app.get("/library", async (req, res) => {
+  try {
+    const library = await prisma.library.findUnique({
+      where: { id: "default" },
+    });
+
+    if (!library) {
+      // Return empty array if no library exists yet
+      return res.json({ items: [] });
+    }
+
+    res.json({
+      items: JSON.parse(library.items),
+    });
+  } catch (error) {
+    console.error("Failed to fetch library:", error);
+    res.status(500).json({ error: "Failed to fetch library" });
+  }
+});
+
+// PUT /library - Update/create library items
+app.put("/library", async (req, res) => {
+  try {
+    const { items } = req.body;
+
+    if (!Array.isArray(items)) {
+      return res.status(400).json({ error: "Items must be an array" });
+    }
+
+    const library = await prisma.library.upsert({
+      where: { id: "default" },
+      update: {
+        items: JSON.stringify(items),
+      },
+      create: {
+        id: "default",
+        items: JSON.stringify(items),
+      },
+    });
+
+    res.json({
+      items: JSON.parse(library.items),
+    });
+  } catch (error) {
+    console.error("Failed to update library:", error);
+    res.status(500).json({ error: "Failed to update library" });
+  }
+});
+
 // --- Export/Import Endpoints ---
 
 // GET /export - Export SQLite database (supports .sqlite and .db extensions)

frontend/package.json

@@ -1,7 +1,7 @@
 {
   "name": "frontend",
   "private": true,
-  "version": "0.1.5",
+  "version": "0.1.6",
   "type": "module",
   "scripts": {
     "dev": "vite",

frontend/src/api/index.ts

@@ -84,3 +84,15 @@ export const deleteCollection = async (id: string) => {
   const response = await api.delete<{ success: true }>(`/collections/${id}`);
   return response.data;
 };
+
+// --- Library ---
+
+export const getLibrary = async () => {
+  const response = await api.get<{ items: any[] }>("/library");
+  return response.data.items;
+};
+
+export const updateLibrary = async (items: any[]) => {
+  const response = await api.put<{ items: any[] }>("/library", { items });
+  return response.data.items;
+};

frontend/src/components/DrawingCard.tsx

@@ -1,11 +1,12 @@
 
 import React, { useState, useEffect } from 'react';
 import { createPortal } from 'react-dom';
-import { PenTool, Trash2, FolderInput, ArrowRight, Check, Clock, Copy } from 'lucide-react';
+import { PenTool, Trash2, FolderInput, ArrowRight, Check, Clock, Copy, Download } from 'lucide-react';
 import type { Drawing, Collection } from '../types';
 import { formatDistanceToNow } from 'date-fns';
 import clsx from 'clsx';
 import { exportToSvg } from "@excalidraw/excalidraw";
+import { exportDrawingToFile } from '../utils/exportUtils';
 
 import * as api from '../api';
 
@@ -325,6 +326,16 @@ export const DrawingCard: React.FC<DrawingCardProps> = ({
                 <Copy size={14} /> Duplicate
               </button>
 
+              <button
+                onClick={() => {
+                  exportDrawingToFile(drawing);
+                  setContextMenu(null);
+                }}
+                className="w-full px-3 py-2 text-sm text-left text-slate-600 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800 hover:text-neutral-900 dark:hover:text-white flex items-center gap-2"
+              >
+                <Download size={14} /> Export
+              </button>
+
               <div className="border-t border-slate-50 dark:border-slate-700 my-1"></div>
 
               <button

frontend/src/pages/Editor.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useState, useRef } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
-import { ArrowLeft } from 'lucide-react';
+import { ArrowLeft, Download } from 'lucide-react';
 import { Excalidraw, exportToSvg } from '@excalidraw/excalidraw';
 import '@excalidraw/excalidraw/index.css';
 import debounce from 'lodash/debounce';
@@ -9,6 +9,7 @@ import { Toaster, toast } from 'sonner';
 import { io, Socket } from 'socket.io-client';
 import { getUserIdentity } from '../utils/identity';
 import { reconcileElements } from '../utils/sync';
+import { exportFromEditor } from '../utils/exportUtils';
 import type { UserIdentity } from '../utils/identity';
 import * as api from '../api';
 import { useTheme } from '../context/ThemeContext';
@@ -241,6 +242,59 @@ export const Editor: React.FC = () => {
     setIsReady(true);
   }, []);
 
+  // Handle #addLibrary URL hash parameter for importing libraries from links
+  useEffect(() => {
+    if (!isReady || !excalidrawAPI.current) return;
+
+    const hash = window.location.hash;
+    if (!hash.includes('addLibrary=')) return;
+
+    const params = new URLSearchParams(hash.slice(1)); // Remove the leading #
+    const libraryUrl = params.get('addLibrary');
+    
+    if (!libraryUrl) return;
+
+    const importLibraryFromUrl = async () => {
+      try {
+        console.log('[Editor] Importing library from URL:', libraryUrl);
+        toast.loading('Importing library...', { id: 'library-import' });
+
+        const response = await fetch(libraryUrl);
+        if (!response.ok) {
+          throw new Error(`Failed to fetch library: ${response.statusText}`);
+        }
+
+        const blob = await response.blob();
+        
+        // Use Excalidraw's updateLibrary API with proper settings:
+        // - defaultStatus: "published" puts items in "Excalidraw library" section
+        // - merge: true preserves existing library items
+        // - openLibraryMenu: true shows the library sidebar after import
+        await excalidrawAPI.current.updateLibrary({
+          libraryItems: blob,
+          merge: true,
+          defaultStatus: "published",
+          openLibraryMenu: true,
+        });
+
+        // Get the updated library items and persist to server
+        const updatedItems = excalidrawAPI.current.getAppState().libraryItems || [];
+        await api.updateLibrary([...updatedItems]);
+
+        toast.success('Library imported successfully', { id: 'library-import' });
+        console.log('[Editor] Library import complete');
+
+        // Clear the hash to prevent re-importing on refresh
+        window.history.replaceState(null, '', window.location.pathname + window.location.search);
+      } catch (err) {
+        console.error('[Editor] Failed to import library:', err);
+        toast.error('Failed to import library', { id: 'library-import' });
+      }
+    };
+
+    importLibraryFromUrl();
+  }, [isReady]);
+
   const buildEmptyScene = useCallback(() => ({
     elements: [],
     appState: {
@@ -259,6 +313,7 @@ export const Editor: React.FC = () => {
   // ------------------------------------------------------------------
   const saveDataRef = useRef<((elements: readonly any[], appState: any) => Promise<void>) | null>(null);
   const savePreviewRef = useRef<((elements: readonly any[], appState: any, files: any) => Promise<void>) | null>(null);
+  const saveLibraryRef = useRef<((items: any[]) => Promise<void>) | null>(null);
 
   // Update the ref on every render to ensure it has access to the latest props/state
   saveDataRef.current = async (elements: readonly any[], appState: any) => {
@@ -326,6 +381,17 @@ export const Editor: React.FC = () => {
     }
   };
 
+  saveLibraryRef.current = async (items: any[]) => {
+    try {
+      console.log("[Editor] Saving library", { itemCount: items.length });
+      await api.updateLibrary(items);
+      console.log("[Editor] Library save complete");
+    } catch (err) {
+      console.error('Failed to save library', err);
+      toast.error("Failed to save library");
+    }
+  };
+
   // Create the debounced function ONLY ONCE.
   // It simply calls whatever is currently in saveDataRef.current
   const debouncedSave = useCallback(
@@ -346,6 +412,15 @@ export const Editor: React.FC = () => {
     []
   );
 
+  const debouncedSaveLibrary = useCallback(
+    debounce((items: any[]) => {
+      if (saveLibraryRef.current) {
+        saveLibraryRef.current(items);
+      }
+    }, 1000),
+    []
+  );
+
   const broadcastChanges = useCallback(
     throttle((elements: readonly any[]) => {
       if (!socketRef.current || !id) return;
@@ -391,7 +466,14 @@ export const Editor: React.FC = () => {
         return;
       }
       try {
-        const data = await api.getDrawing(id);
+        // Fetch drawing and library in parallel
+        const [data, libraryItems] = await Promise.all([
+          api.getDrawing(id),
+          api.getLibrary().catch((err) => {
+            console.warn('Failed to load library, using empty:', err);
+            return [];
+          })
+        ]);
         setDrawingName(data.name);
         
         // Use elements directly without converting - they're already normalized during import
@@ -417,6 +499,7 @@ export const Editor: React.FC = () => {
           appState: hydratedAppState,
           files,
           scrollToContent: true,
+          libraryItems,
         });
       } catch (err) {
         console.error('Failed to load drawing', err);
@@ -537,6 +620,12 @@ export const Editor: React.FC = () => {
     }
   };
 
+  // Handle library changes and persist to server
+  const handleLibraryChange = useCallback((items: readonly any[]) => {
+    console.log("[Editor] Library changed", { itemCount: items.length });
+    debouncedSaveLibrary([...items]);
+  }, [debouncedSaveLibrary]);
+
   // Disable native Excalidraw save dialogs
   // UIOptions is now defined outside the component
 
@@ -594,6 +683,25 @@ export const Editor: React.FC = () => {
         </div>
         
         <div className="flex items-center gap-3">
+          {/* Download Button */}
+          <button
+            onClick={() => {
+              if (excalidrawAPI.current) {
+                const elements = excalidrawAPI.current.getSceneElementsIncludingDeleted();
+                const appState = excalidrawAPI.current.getAppState();
+                const files = excalidrawAPI.current.getFiles() || {};
+                exportFromEditor(drawingName, elements, appState, files);
+                toast.success('Drawing exported');
+              }
+            }}
+            className="p-2 hover:bg-gray-100 dark:hover:bg-neutral-800 rounded-lg text-gray-600 dark:text-gray-300 transition-colors"
+            title="Export drawing"
+          >
+            <Download size={20} />
+          </button>
+
+          <div className="h-6 w-px bg-gray-300 dark:bg-gray-700" />
+
           <div className="flex items-center">
             <div className="relative group">
               <div 
@@ -639,6 +747,7 @@ export const Editor: React.FC = () => {
             initialData={initialData}
             onChange={handleCanvasChange}
             onPointerUpdate={onPointerUpdate}
+            onLibraryChange={handleLibraryChange}
             excalidrawAPI={setExcalidrawAPI}
             UIOptions={UIOptions}
           />

frontend/src/utils/exportUtils.ts

@@ -0,0 +1,78 @@
+import type { Drawing } from "../types";
+
+export interface ExportData {
+  type: "excalidraw";
+  version: 2;
+  source: string;
+  elements: any[];
+  appState: any;
+  files: Record<string, any>;
+}
+
+/**
+ * Export a drawing to a .excalidraw file and trigger download
+ */
+export const exportDrawingToFile = (
+  drawing: Drawing,
+  filename?: string
+): void => {
+  const exportData: ExportData = {
+    type: "excalidraw",
+    version: 2,
+    source: window.location.origin,
+    elements: drawing.elements || [],
+    appState: {
+      gridSize: drawing.appState?.gridSize ?? null,
+      viewBackgroundColor: drawing.appState?.viewBackgroundColor ?? "#ffffff",
+    },
+    files: drawing.files || {},
+  };
+
+  const blob = new Blob([JSON.stringify(exportData, null, 2)], {
+    type: "application/json",
+  });
+
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement("a");
+  link.href = url;
+  link.download = filename || `${drawing.name}.excalidraw`;
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+  URL.revokeObjectURL(url);
+};
+
+/**
+ * Export drawing from Editor with current state
+ */
+export const exportFromEditor = (
+  name: string,
+  elements: readonly any[],
+  appState: any,
+  files: Record<string, any>
+): void => {
+  const exportData: ExportData = {
+    type: "excalidraw",
+    version: 2,
+    source: window.location.origin,
+    elements: Array.from(elements),
+    appState: {
+      gridSize: appState?.gridSize ?? null,
+      viewBackgroundColor: appState?.viewBackgroundColor ?? "#ffffff",
+    },
+    files: files || {},
+  };
+
+  const blob = new Blob([JSON.stringify(exportData, null, 2)], {
+    type: "application/json",
+  });
+
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement("a");
+  link.href = url;
+  link.download = `${name}.excalidraw`;
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+  URL.revokeObjectURL(url);
+};