Merge branch 'copilot/refactor-playground-for-evaluation' of https://github.com/objectstack-ai/objectui into copilot/refactor-playground-for-evaluation

Author: hotlong

apps/playground/package.json

@@ -16,13 +16,14 @@
     "@object-ui/designer": "workspace:*",
     "@object-ui/plugin-charts": "workspace:*",
     "@object-ui/plugin-editor": "workspace:*",
+    "@object-ui/plugin-kanban": "workspace:*",
+    "@object-ui/plugin-markdown": "workspace:*",
     "@object-ui/react": "workspace:*",
     "lucide-react": "^0.469.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^7.12.0",
-    "@object-ui/plugin-markdown": "workspace:*",
-    "@object-ui/plugin-kanban": "workspace:*"
+    "sonner": "^2.0.7"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.1",

apps/playground/src/App.tsx

@@ -1,4 +1,5 @@
 import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
+import { Toaster } from 'sonner';
 import { Home } from './pages/Home';
 import { Studio } from './pages/Studio';
 import { MyDesigns } from './pages/MyDesigns';
@@ -16,6 +17,7 @@ import './index.css';
 export default function App() {
   return (
     <Router>
+      <Toaster position="top-right" richColors />
       <Routes>
         <Route path="/" element={<Home />} />
         <Route path="/my-designs" element={<MyDesigns />} />

apps/playground/src/pages/MyDesigns.tsx

@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
+import { toast } from 'sonner';
 import { designStorage, Design } from '../services/designStorage';
 import { 
   Plus, 
@@ -25,50 +26,68 @@ export const MyDesigns = () => {
   const [showImportModal, setShowImportModal] = useState(false);
   const [importJson, setImportJson] = useState('');
   const [importName, setImportName] = useState('');
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+  const [deleteTargetId, setDeleteTargetId] = useState<string | null>(null);
+  const [deleteTargetName, setDeleteTargetName] = useState<string>('');
 
   const loadDesigns = () => {
     setDesigns(designStorage.getAllDesigns());
   };
 
-  const handleDelete = (id: string) => {
-    if (confirm('Are you sure you want to delete this design?')) {
-      designStorage.deleteDesign(id);
+  const handleDelete = (id: string, name: string) => {
+    setDeleteTargetId(id);
+    setDeleteTargetName(name);
+    setShowDeleteConfirm(true);
+  };
+
+  const confirmDelete = () => {
+    if (deleteTargetId) {
+      designStorage.deleteDesign(deleteTargetId);
       loadDesigns();
+      toast.success('Design deleted successfully');
+      setShowDeleteConfirm(false);
+      setDeleteTargetId(null);
+      setDeleteTargetName('');
     }
   };
 
   const handleClone = (id: string) => {
     try {
       const cloned = designStorage.cloneDesign(id);
       loadDesigns();
+      toast.success('Design cloned successfully');
       navigate(`/studio/${cloned.id}`);
     } catch (error) {
-      alert('Error cloning design: ' + (error as Error).message);
+      const message = error instanceof Error ? error.message : 'Unknown error';
+      toast.error(`Failed to clone design: ${message}`);
     }
   };
 
   const handleShare = (id: string) => {
     try {
       const shareUrl = designStorage.shareDesign(id);
       navigator.clipboard.writeText(shareUrl);
-      alert('Share link copied to clipboard!');
+      toast.success('Share link copied to clipboard!');
     } catch (error) {
-      alert('Error sharing design: ' + (error as Error).message);
+      const message = error instanceof Error ? error.message : 'Unknown error';
+      toast.error(`Failed to share design: ${message}`);
     }
   };
 
   const handleExport = (id: string) => {
     try {
-      const json = designStorage.exportDesign(id);
+      const { json, filename } = designStorage.exportDesign(id);
       const blob = new Blob([json], { type: 'application/json' });
       const url = URL.createObjectURL(blob);
       const a = document.createElement('a');
       a.href = url;
-      a.download = `design-${id}.json`;
+      a.download = filename;
       a.click();
       URL.revokeObjectURL(url);
+      toast.success('Design exported successfully');
     } catch (error) {
-      alert('Error exporting design: ' + (error as Error).message);
+      const message = error instanceof Error ? error.message : 'Unknown error';
+      toast.error(`Failed to export design: ${message}`);
     }
   };
 
@@ -79,9 +98,11 @@ export const MyDesigns = () => {
       setImportJson('');
       setImportName('');
       loadDesigns();
+      toast.success('Design imported successfully');
       navigate(`/studio/${imported.id}`);
     } catch (error) {
-      alert('Error importing design: ' + (error as Error).message);
+      const message = error instanceof Error ? error.message : 'Unknown error';
+      toast.error(`Failed to import design: ${message}`);
     }
   };
 
@@ -258,7 +279,7 @@ export const MyDesigns = () => {
                   <button
                     onClick={(e) => {
                       e.stopPropagation();
-                      handleDelete(design.id);
+                      handleDelete(design.id, design.name);
                     }}
                     className="p-2 text-gray-600 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors"
                     title="Delete"
@@ -331,7 +352,7 @@ export const MyDesigns = () => {
                   <button
                     onClick={(e) => {
                       e.stopPropagation();
-                      handleDelete(design.id);
+                      handleDelete(design.id, design.name);
                     }}
                     className="p-2 text-gray-600 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors"
                     title="Delete"
@@ -400,6 +421,41 @@ export const MyDesigns = () => {
           </div>
         </div>
       )}
+
+      {/* Delete Confirmation Modal */}
+      {showDeleteConfirm && (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
+          <div className="bg-white rounded-2xl shadow-2xl max-w-md w-full">
+            <div className="p-6 border-b border-gray-200">
+              <h2 className="text-2xl font-bold text-gray-900">Delete Design</h2>
+              <p className="text-sm text-gray-600 mt-1">This action cannot be undone</p>
+            </div>
+            <div className="p-6">
+              <p className="text-gray-700">
+                Are you sure you want to delete <strong className="text-gray-900">"{deleteTargetName}"</strong>? This will permanently remove the design and cannot be recovered.
+              </p>
+            </div>
+            <div className="p-6 border-t border-gray-200 flex items-center justify-end gap-3">
+              <button
+                onClick={() => {
+                  setShowDeleteConfirm(false);
+                  setDeleteTargetId(null);
+                  setDeleteTargetName('');
+                }}
+                className="px-4 py-2 text-sm font-semibold text-gray-700 bg-white hover:bg-gray-50 border-2 border-gray-200 rounded-xl transition-all"
+              >
+                Cancel
+              </button>
+              <button
+                onClick={confirmDelete}
+                className="px-4 py-2 text-sm font-bold text-white bg-gradient-to-r from-red-600 to-pink-600 hover:from-red-700 hover:to-pink-700 rounded-xl shadow-lg shadow-red-300/50 transition-all"
+              >
+                Delete Design
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
 };

apps/playground/src/pages/Studio.tsx

@@ -18,10 +18,18 @@ import {
     Save,
     Share2
 } from 'lucide-react';
+import { toast } from 'sonner';
 import '@object-ui/components';
 import { examples, ExampleKey } from '../data/examples';
 import { designStorage } from '../services/designStorage';
 
+// Helper function to format design titles
+function formatDesignTitle(exampleId: string): string {
+  if (exampleId === 'new') return 'New Design';
+  if (typeof exampleId !== 'string') return 'Untitled';
+  return exampleId.split('-').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ');
+}
+
 type ViewportSize = 'desktop' | 'tablet' | 'mobile';
 type ViewMode = 'code' | 'design' | 'preview';
 
@@ -92,14 +100,19 @@ const StudioToolbarContext = ({
   };
 
   const handleExport = () => {
-    const json = JSON.stringify(schema, null, 2);
-    const blob = new Blob([json], { type: 'application/json' });
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement('a');
-    a.href = url;
-    a.download = 'schema.json';
-    a.click();
-    URL.revokeObjectURL(url);
+    try {
+      const { json, filename } = designStorage.exportDesign(schema.id || 'temp');
+      const blob = new Blob([json], { type: 'application/json' });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = filename;
+      a.click();
+      URL.revokeObjectURL(url);
+      toast.success('Design exported successfully');
+    } catch (error) {
+      toast.error('Failed to export design');
+    }
   };
 
   return (
@@ -310,8 +323,10 @@ const StudioEditor = ({ exampleId, initialJson, isUserDesign, currentDesignId }:
         designStorage.updateDesign(currentDesignId, {
           schema: JSON.parse(code)
         });
+        toast.success('Design saved successfully');
       } catch (error) {
-        alert('Error saving design: ' + (error as Error).message);
+        const message = error instanceof Error ? error.message : 'Unknown error';
+        toast.error(`Failed to save design: ${message}`);
       }
     } else {
       // Show save modal for new design
@@ -330,9 +345,11 @@ const StudioEditor = ({ exampleId, initialJson, isUserDesign, currentDesignId }:
       setShowSaveModal(false);
       setSaveName('');
       setSaveDescription('');
+      toast.success('Design saved successfully');
       navigate(`/studio/${saved.id}`);
     } catch (error) {
-      alert('Error saving design: ' + (error as Error).message);
+      const message = error instanceof Error ? error.message : 'Unknown error';
+      toast.error(`Failed to save design: ${message}`);
     }
   };
 
@@ -341,12 +358,15 @@ const StudioEditor = ({ exampleId, initialJson, isUserDesign, currentDesignId }:
       try {
         const shareUrl = designStorage.shareDesign(currentDesignId);
         navigator.clipboard.writeText(shareUrl);
-        alert('Share link copied to clipboard!');
+        toast.success('Share link copied to clipboard!');
       } catch (error) {
-        alert('Error sharing design: ' + (error as Error).message);
+        const message = error instanceof Error ? error.message : 'Unknown error';
+        toast.error(`Failed to share design: ${message}`);
       }
     } else {
-      alert('Please save the design first before sharing.');
+      // Automatically trigger save modal instead of showing alert
+      setShowSaveModal(true);
+      toast.info('Please save the design first before sharing');
     }
   };
 
@@ -361,7 +381,7 @@ const StudioEditor = ({ exampleId, initialJson, isUserDesign, currentDesignId }:
       <div className="flex h-screen w-screen bg-background text-foreground flex-col">
         {/* Top Header injected into Designer Context */}
         <StudioToolbarContext 
-           exampleTitle={exampleId === 'new' ? 'New Design' : (typeof exampleId === 'string' ? exampleId.split('-').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ') : 'Untitled')}
+           exampleTitle={formatDesignTitle(exampleId)}
            jsonError={jsonError}
            viewMode={viewMode}
            setViewMode={setViewMode}

apps/playground/src/services/designStorage.ts

@@ -4,11 +4,21 @@
  * Currently uses localStorage, can be extended to use cloud storage
  */
 
+/**
+ * Sanitize a filename by removing invalid characters
+ */
+function sanitizeFilename(name: string): string {
+  return name
+    .replace(/[^a-zA-Z0-9-_\s]/g, '') // Remove invalid characters
+    .replace(/\s+/g, '-') // Replace spaces with hyphens
+    .substring(0, 100); // Limit length
+}
+
 export interface Design {
   id: string;
   name: string;
   description?: string;
-  schema: Record<string, unknown>;
+  schema: unknown;
   createdAt: string;
   updatedAt: string;
   isTemplate?: boolean;
@@ -131,12 +141,14 @@ class DesignStorageService {
   }
 
   /**
-   * Export a design as JSON
+   * Export a design as JSON with user-friendly filename
    */
-  exportDesign(id: string): string {
+  exportDesign(id: string): { json: string; filename: string } {
     const design = this.getDesign(id);
     if (!design) throw new Error('Design not found');
-    return JSON.stringify(design.schema, null, 2);
+    const json = JSON.stringify(design.schema, null, 2);
+    const filename = `${sanitizeFilename(design.name) || 'design'}.json`;
+    return { json, filename };
   }
 
   /**
@@ -155,12 +167,46 @@ class DesignStorageService {
   }
 
   // Private helper methods
+  private generateUUID(): string {
+    // Prefer native crypto.randomUUID when available
+    if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {
+      return crypto.randomUUID();
+    }
+
+    // Fallback: generate RFC4122 v4 UUID using crypto.getRandomValues
+    if (typeof crypto !== 'undefined' && typeof crypto.getRandomValues === 'function') {
+      const bytes = new Uint8Array(16);
+      crypto.getRandomValues(bytes);
+
+      // Per RFC4122 section 4.4
+      bytes[6] = (bytes[6] & 0x0f) | 0x40; // version 4
+      bytes[8] = (bytes[8] & 0x3f) | 0x80; // variant 10
+
+      const toHex = (n: number) => n.toString(16).padStart(2, '0');
+      const segments = [
+        Array.from(bytes.slice(0, 4)).map(toHex).join(''),
+        Array.from(bytes.slice(4, 6)).map(toHex).join(''),
+        Array.from(bytes.slice(6, 8)).map(toHex).join(''),
+        Array.from(bytes.slice(8, 10)).map(toHex).join(''),
+        Array.from(bytes.slice(10, 16)).map(toHex).join(''),
+      ];
+
+      return segments.join('-');
+    }
+
+    // Last-resort fallback for environments without Web Crypto
+    return `fallback_${Date.now()}_${Math.random().toString(36).substring(2, 11)}`;
+  }
+
   private generateId(): string {
-    return `design_${Date.now()}_${Math.random().toString(36).substring(2, 11)}`;
+    return `design_${this.generateUUID()}`;
   }
 
   private generateShareId(): string {
-    return Math.random().toString(36).substring(2, 14);
+    // Generate a compact share ID derived from a UUID for security
+    const uuid = this.generateUUID();
+    // Remove hyphens and take first 12 characters for a shorter share link
+    return uuid.replace(/-/g, '').substring(0, 12);
   }
 
   private getSharedDesigns(): Record<string, Design> {