rita-workspace 0.1.1

package/README.md

@@ -0,0 +1,104 @@
+# Rita Workspace
+
+Multi-drawing workspace feature for Rita (Excalidraw fork based on B310-digital/excalidraw).
+
+## Problem
+
+Currently Rita only supports one active drawing at a time. Users need to manually export/import drawings to switch between them.
+
+## Solution
+
+Add a workspace feature that allows users to:
+- Create multiple drawings within a single workspace
+- Switch between drawings with a simple sidebar/tab GUI
+- Store all drawings locally in the browser (IndexedDB/localStorage)
+- Name and organize drawings
+
+## Features
+
+### MVP (v1.0)
+- [ ] Sidebar with list of drawings
+- [ ] Create new drawing button
+- [ ] Switch between drawings (preserves state)
+- [ ] Rename drawings
+- [ ] Delete drawings
+- [ ] Auto-save to browser storage (IndexedDB)
+- [ ] Import existing .excalidraw files into workspace
+
+### Future (v2.0+)
+- [ ] Folders/categories for drawings
+- [ ] Search drawings
+- [ ] Thumbnail previews
+- [ ] Export entire workspace
+- [ ] Cloud sync (optional)
+- [ ] Link/reference between drawings
+
+## Technical Approach
+
+### Storage
+- Use IndexedDB for persistent storage (better than localStorage for binary data)
+- Each drawing stored as separate entry with metadata
+- Workspace metadata stored separately
+
+### Data Structure
+```typescript
+interface Drawing {
+  id: string;
+  name: string;
+  createdAt: Date;
+  updatedAt: Date;
+  elements: ExcalidrawElement[];
+  appState: Partial<AppState>;
+  files: BinaryFiles;
+}
+
+interface Workspace {
+  id: string;
+  name: string;
+  drawings: string[]; // Drawing IDs
+  activeDrawingId: string;
+  createdAt: Date;
+  updatedAt: Date;
+}
+```
+
+### UI Components
+- `WorkspaceSidebar` - Collapsible sidebar showing drawing list
+- `DrawingListItem` - Individual drawing entry with actions
+- `NewDrawingButton` - Creates new blank drawing
+- `WorkspaceProvider` - React context for workspace state
+
+## Integration with B310 Fork
+
+This feature will be implemented as a modular addition that can be:
+1. Merged into the main B310 fork as a PR
+2. Maintained as a separate layer/plugin for Rita
+
+## Development
+
+### Prerequisites
+- Node.js 18+
+- Yarn
+- B310 Excalidraw fork cloned locally
+
+### Setup
+```bash
+# Clone B310 fork
+git clone https://github.com/b310-digital/excalidraw.git rita
+cd rita
+
+# Apply workspace patches
+git remote add workspace https://github.com/farapholch/rita-workspace.git
+git fetch workspace
+git merge workspace/main
+```
+
+## Links
+
+- **B310 Excalidraw Fork:** https://github.com/b310-digital/excalidraw
+- **Original Excalidraw:** https://github.com/excalidraw/excalidraw
+- **Rita:** Your local Rita deployment
+
+## License
+
+MIT (same as Excalidraw)

package/dist/index.css

@@ -0,0 +1,168 @@
+/* src/ui/DrawingList/DrawingList.module.css */
+.list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.empty {
+  padding: 24px 16px;
+  text-align: center;
+  color: #868e96;
+  font-size: 14px;
+}
+.item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 16px;
+  cursor: pointer;
+  border-left: 3px solid transparent;
+  transition: background 0.1s, border-color 0.1s;
+}
+.item:hover {
+  background: #e9ecef;
+}
+.item.active {
+  background: #e7f5ff;
+  border-left-color: #228be6;
+}
+.itemContent {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.name {
+  font-size: 14px;
+  font-weight: 500;
+  color: #212529;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.date {
+  font-size: 11px;
+  color: #868e96;
+}
+.editInput {
+  font-size: 14px;
+  font-weight: 500;
+  padding: 2px 6px;
+  border: 1px solid #228be6;
+  border-radius: 4px;
+  outline: none;
+  width: 100%;
+}
+.actions {
+  display: flex;
+  gap: 4px;
+  opacity: 0;
+  transition: opacity 0.1s;
+}
+.item:hover .actions {
+  opacity: 1;
+}
+.actionButton {
+  background: none;
+  border: none;
+  padding: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  border-radius: 4px;
+  line-height: 1;
+}
+.actionButton:hover {
+  background: #dee2e6;
+}
+
+/* src/ui/Sidebar/Sidebar.module.css */
+.sidebar {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background: #f8f9fa;
+  border-right: 1px solid #dee2e6;
+  font-family:
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    sans-serif;
+}
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  border-bottom: 1px solid #dee2e6;
+}
+.title {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 600;
+  color: #495057;
+}
+.closeButton {
+  background: none;
+  border: none;
+  font-size: 16px;
+  color: #6c757d;
+  cursor: pointer;
+  padding: 4px 8px;
+  border-radius: 4px;
+}
+.closeButton:hover {
+  background: #e9ecef;
+  color: #495057;
+}
+.content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 8px 0;
+}
+.loading {
+  padding: 16px;
+  text-align: center;
+  color: #6c757d;
+  font-size: 14px;
+}
+.footer {
+  padding: 12px;
+  border-top: 1px solid #dee2e6;
+}
+.newButton {
+  width: 100%;
+  padding: 10px 16px;
+  background: #228be6;
+  color: white;
+  border: none;
+  border-radius: 6px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+.newButton:hover:not(:disabled) {
+  background: #1c7ed6;
+}
+.newButton:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+.toggleButton {
+  position: fixed;
+  top: 12px;
+  left: 12px;
+  z-index: 100;
+  padding: 8px 12px;
+  background: #f8f9fa;
+  border: 1px solid #dee2e6;
+  border-radius: 6px;
+  font-size: 16px;
+  cursor: pointer;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+.toggleButton:hover {
+  background: #e9ecef;
+}

package/dist/index.d.mts

@@ -0,0 +1,145 @@
+import { IDBPDatabase, DBSchema } from 'idb';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+interface Drawing {
+    id: string;
+    name: string;
+    elements: unknown[];
+    appState: Record<string, unknown>;
+    files: Record<string, unknown>;
+    createdAt: number;
+    updatedAt: number;
+}
+interface Workspace {
+    id: string;
+    name: string;
+    drawingIds: string[];
+    activeDrawingId: string | null;
+    createdAt: number;
+    updatedAt: number;
+}
+interface RitaWorkspaceDB extends DBSchema {
+    workspaces: {
+        key: string;
+        value: Workspace;
+        indexes: {
+            'by-updated': number;
+        };
+    };
+    drawings: {
+        key: string;
+        value: Drawing;
+        indexes: {
+            'by-updated': number;
+        };
+    };
+}
+declare function getDB(): Promise<IDBPDatabase<RitaWorkspaceDB>>;
+declare function closeDB(): Promise<void>;
+
+declare function createDrawing(name?: string, elements?: unknown[], appState?: Record<string, unknown>): Promise<Drawing>;
+declare function getDrawing(id: string): Promise<Drawing | undefined>;
+declare function getAllDrawings(): Promise<Drawing[]>;
+declare function updateDrawing(id: string, updates: Partial<Omit<Drawing, 'id' | 'createdAt'>>): Promise<Drawing | undefined>;
+declare function deleteDrawing(id: string): Promise<boolean>;
+declare function duplicateDrawing(id: string, newName?: string): Promise<Drawing | undefined>;
+
+declare function getOrCreateDefaultWorkspace(): Promise<Workspace>;
+declare function getWorkspace(id: string): Promise<Workspace | undefined>;
+declare function updateWorkspace(id: string, updates: Partial<Omit<Workspace, 'id' | 'createdAt'>>): Promise<Workspace | undefined>;
+declare function addDrawingToWorkspace(workspaceId: string, drawingId: string): Promise<Workspace | undefined>;
+declare function removeDrawingFromWorkspace(workspaceId: string, drawingId: string): Promise<Workspace | undefined>;
+declare function setActiveDrawing(workspaceId: string, drawingId: string): Promise<Workspace | undefined>;
+
+interface WorkspaceContextValue {
+    workspace: Workspace | null;
+    drawings: Drawing[];
+    activeDrawing: Drawing | null;
+    isLoading: boolean;
+    error: string | null;
+    createNewDrawing: (name?: string) => Promise<Drawing | null>;
+    switchDrawing: (id: string) => Promise<void>;
+    renameDrawing: (id: string, name: string) => Promise<void>;
+    removeDrawing: (id: string) => Promise<void>;
+    duplicateCurrentDrawing: () => Promise<Drawing | null>;
+    saveCurrentDrawing: (elements: unknown[], appState: Record<string, unknown>) => Promise<void>;
+}
+declare function useWorkspace(): WorkspaceContextValue;
+interface WorkspaceProviderProps {
+    children: ReactNode;
+}
+declare function WorkspaceProvider({ children }: WorkspaceProviderProps): react_jsx_runtime.JSX.Element;
+
+interface SidebarProps {
+    isOpen?: boolean;
+    onToggle?: () => void;
+    width?: number;
+}
+declare function Sidebar({ isOpen, onToggle, width }: SidebarProps): react_jsx_runtime.JSX.Element;
+
+declare function DrawingList(): react_jsx_runtime.JSX.Element;
+
+interface DrawingListItemProps {
+    drawing: Drawing;
+    isActive: boolean;
+    onSelect: () => void;
+    onRename: (name: string) => void;
+    onDelete: () => void;
+    canDelete: boolean;
+}
+declare function DrawingListItem({ drawing, isActive, onSelect, onRename, onDelete, canDelete, }: DrawingListItemProps): react_jsx_runtime.JSX.Element;
+
+interface ExcalidrawAPI {
+    getSceneElements: () => unknown[];
+    getAppState: () => Record<string, unknown>;
+    updateScene: (scene: {
+        elements?: unknown[];
+        appState?: Record<string, unknown>;
+    }) => void;
+    resetScene: () => void;
+}
+interface UseExcalidrawBridgeOptions {
+    excalidrawAPI: ExcalidrawAPI | null;
+    autoSaveInterval?: number;
+}
+/**
+ * Hook to bridge workspace state with Excalidraw API
+ *
+ * @example
+ * ```tsx
+ * const [excalidrawAPI, setExcalidrawAPI] = useState(null);
+ *
+ * useExcalidrawBridge({ excalidrawAPI });
+ *
+ * return <Excalidraw excalidrawAPI={setExcalidrawAPI} />;
+ * ```
+ */
+declare function useExcalidrawBridge({ excalidrawAPI, autoSaveInterval, }: UseExcalidrawBridgeOptions): {
+    scheduleSave: () => void;
+};
+
+interface WorkspacePluginProps {
+    children: ReactNode;
+    defaultSidebarOpen?: boolean;
+    sidebarWidth?: number;
+}
+/**
+ * WorkspacePlugin - Wraps Excalidraw to add multi-drawing workspace support
+ *
+ * @example
+ * ```tsx
+ * import { WorkspacePlugin } from '@rita/workspace';
+ *
+ * function App() {
+ *   return (
+ *     <WorkspacePlugin>
+ *       <Excalidraw />
+ *     </WorkspacePlugin>
+ *   );
+ * }
+ * ```
+ */
+declare function WorkspacePlugin(props: WorkspacePluginProps): react_jsx_runtime.JSX.Element;
+
+export { type Drawing, DrawingList, DrawingListItem, Sidebar, type Workspace, type WorkspaceContextValue, WorkspacePlugin, WorkspaceProvider, addDrawingToWorkspace, closeDB, createDrawing, deleteDrawing, duplicateDrawing, getAllDrawings, getDB, getDrawing, getOrCreateDefaultWorkspace, getWorkspace, removeDrawingFromWorkspace, setActiveDrawing, updateDrawing, updateWorkspace, useExcalidrawBridge, useWorkspace };

package/dist/index.d.ts

@@ -0,0 +1,145 @@
+import { IDBPDatabase, DBSchema } from 'idb';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+interface Drawing {
+    id: string;
+    name: string;
+    elements: unknown[];
+    appState: Record<string, unknown>;
+    files: Record<string, unknown>;
+    createdAt: number;
+    updatedAt: number;
+}
+interface Workspace {
+    id: string;
+    name: string;
+    drawingIds: string[];
+    activeDrawingId: string | null;
+    createdAt: number;
+    updatedAt: number;
+}
+interface RitaWorkspaceDB extends DBSchema {
+    workspaces: {
+        key: string;
+        value: Workspace;
+        indexes: {
+            'by-updated': number;
+        };
+    };
+    drawings: {
+        key: string;
+        value: Drawing;
+        indexes: {
+            'by-updated': number;
+        };
+    };
+}
+declare function getDB(): Promise<IDBPDatabase<RitaWorkspaceDB>>;
+declare function closeDB(): Promise<void>;
+
+declare function createDrawing(name?: string, elements?: unknown[], appState?: Record<string, unknown>): Promise<Drawing>;
+declare function getDrawing(id: string): Promise<Drawing | undefined>;
+declare function getAllDrawings(): Promise<Drawing[]>;
+declare function updateDrawing(id: string, updates: Partial<Omit<Drawing, 'id' | 'createdAt'>>): Promise<Drawing | undefined>;
+declare function deleteDrawing(id: string): Promise<boolean>;
+declare function duplicateDrawing(id: string, newName?: string): Promise<Drawing | undefined>;
+
+declare function getOrCreateDefaultWorkspace(): Promise<Workspace>;
+declare function getWorkspace(id: string): Promise<Workspace | undefined>;
+declare function updateWorkspace(id: string, updates: Partial<Omit<Workspace, 'id' | 'createdAt'>>): Promise<Workspace | undefined>;
+declare function addDrawingToWorkspace(workspaceId: string, drawingId: string): Promise<Workspace | undefined>;
+declare function removeDrawingFromWorkspace(workspaceId: string, drawingId: string): Promise<Workspace | undefined>;
+declare function setActiveDrawing(workspaceId: string, drawingId: string): Promise<Workspace | undefined>;
+
+interface WorkspaceContextValue {
+    workspace: Workspace | null;
+    drawings: Drawing[];
+    activeDrawing: Drawing | null;
+    isLoading: boolean;
+    error: string | null;
+    createNewDrawing: (name?: string) => Promise<Drawing | null>;
+    switchDrawing: (id: string) => Promise<void>;
+    renameDrawing: (id: string, name: string) => Promise<void>;
+    removeDrawing: (id: string) => Promise<void>;
+    duplicateCurrentDrawing: () => Promise<Drawing | null>;
+    saveCurrentDrawing: (elements: unknown[], appState: Record<string, unknown>) => Promise<void>;
+}
+declare function useWorkspace(): WorkspaceContextValue;
+interface WorkspaceProviderProps {
+    children: ReactNode;
+}
+declare function WorkspaceProvider({ children }: WorkspaceProviderProps): react_jsx_runtime.JSX.Element;
+
+interface SidebarProps {
+    isOpen?: boolean;
+    onToggle?: () => void;
+    width?: number;
+}
+declare function Sidebar({ isOpen, onToggle, width }: SidebarProps): react_jsx_runtime.JSX.Element;
+
+declare function DrawingList(): react_jsx_runtime.JSX.Element;
+
+interface DrawingListItemProps {
+    drawing: Drawing;
+    isActive: boolean;
+    onSelect: () => void;
+    onRename: (name: string) => void;
+    onDelete: () => void;
+    canDelete: boolean;
+}
+declare function DrawingListItem({ drawing, isActive, onSelect, onRename, onDelete, canDelete, }: DrawingListItemProps): react_jsx_runtime.JSX.Element;
+
+interface ExcalidrawAPI {
+    getSceneElements: () => unknown[];
+    getAppState: () => Record<string, unknown>;
+    updateScene: (scene: {
+        elements?: unknown[];
+        appState?: Record<string, unknown>;
+    }) => void;
+    resetScene: () => void;
+}
+interface UseExcalidrawBridgeOptions {
+    excalidrawAPI: ExcalidrawAPI | null;
+    autoSaveInterval?: number;
+}
+/**
+ * Hook to bridge workspace state with Excalidraw API
+ *
+ * @example
+ * ```tsx
+ * const [excalidrawAPI, setExcalidrawAPI] = useState(null);
+ *
+ * useExcalidrawBridge({ excalidrawAPI });
+ *
+ * return <Excalidraw excalidrawAPI={setExcalidrawAPI} />;
+ * ```
+ */
+declare function useExcalidrawBridge({ excalidrawAPI, autoSaveInterval, }: UseExcalidrawBridgeOptions): {
+    scheduleSave: () => void;
+};
+
+interface WorkspacePluginProps {
+    children: ReactNode;
+    defaultSidebarOpen?: boolean;
+    sidebarWidth?: number;
+}
+/**
+ * WorkspacePlugin - Wraps Excalidraw to add multi-drawing workspace support
+ *
+ * @example
+ * ```tsx
+ * import { WorkspacePlugin } from '@rita/workspace';
+ *
+ * function App() {
+ *   return (
+ *     <WorkspacePlugin>
+ *       <Excalidraw />
+ *     </WorkspacePlugin>
+ *   );
+ * }
+ * ```
+ */
+declare function WorkspacePlugin(props: WorkspacePluginProps): react_jsx_runtime.JSX.Element;
+
+export { type Drawing, DrawingList, DrawingListItem, Sidebar, type Workspace, type WorkspaceContextValue, WorkspacePlugin, WorkspaceProvider, addDrawingToWorkspace, closeDB, createDrawing, deleteDrawing, duplicateDrawing, getAllDrawings, getDB, getDrawing, getOrCreateDefaultWorkspace, getWorkspace, removeDrawingFromWorkspace, setActiveDrawing, updateDrawing, updateWorkspace, useExcalidrawBridge, useWorkspace };