rita-workspace 0.2.0 → 0.2.1

package/README.md

@@ -2,103 +2,170 @@
 
 Multi-drawing workspace feature for Rita (Excalidraw fork based on B310-digital/excalidraw).
 
-## Problem
+## Features
 
-Currently Rita only supports one active drawing at a time. Users need to manually export/import drawings to switch between them.
+- **Multiple drawings** - Create and manage multiple drawings in one workspace
+- **Menu integration** - Seamlessly integrates with Excalidraw's hamburger menu
+- **Auto-save** - All drawings saved locally in IndexedDB
+- **Rename & delete** - Full drawing management via dialog
 
-## Solution
+## Installation
 
-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
+```bash
+npm install rita-workspace
+# or
+yarn add rita-workspace
+```
 
-## Features
+## Integration Guide
 
-### 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;
-}
+Two files need to be modified in the B310/Excalidraw fork:
 
-interface Workspace {
-  id: string;
-  name: string;
-  drawings: string[]; // Drawing IDs
-  activeDrawingId: string;
-  createdAt: Date;
-  updatedAt: Date;
-}
+### 1. `excalidraw-app/App.tsx`
+
+**Add import** (at the top with other imports):
+
+```tsx
+import { WorkspaceProvider } from "rita-workspace";
+```
+
+**Wrap with WorkspaceProvider** (in the `ExcalidrawApp` component):
+
+```tsx
+const ExcalidrawApp = () => {
+  // ...
+  return (
+    <TopErrorBoundary>
+      <Provider store={appJotaiStore}>
+        <WorkspaceProvider>          {/* <-- Add this */}
+          <ExcalidrawWrapper />
+        </WorkspaceProvider>          {/* <-- And this */}
+      </Provider>
+    </TopErrorBoundary>
+  );
+};
 ```
 
-### 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
+### 2. `excalidraw-app/components/AppMainMenu.tsx`
 
-## Integration with B310 Fork
+**Add imports** (at the top):
 
-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
+```tsx
+import React, { useState } from "react";  // Add useState
 
-## Development
+// Add after other imports:
+import { WorkspaceMenuItems, DrawingsDialog } from "rita-workspace";
+```
 
-### Prerequisites
-- Node.js 18+
-- Yarn
-- B310 Excalidraw fork cloned locally
+**Add state and menu items** (inside the component):
+
+```tsx
+export const AppMainMenu: React.FC<{...}> = React.memo((props) => {
+  const [showDrawingsDialog, setShowDrawingsDialog] = useState(false);  // Add this
+
+  return (
+    <>                                          {/* Add fragment */}
+    <MainMenu>
+      <MainMenu.DefaultItems.LoadScene />
+      <MainMenu.DefaultItems.SaveToActiveFile />
+
+      {/* === RITA WORKSPACE: Add this block === */}
+      <MainMenu.Sub>
+        <MainMenu.Sub.Trigger>📄 Ritningar</MainMenu.Sub.Trigger>
+        <MainMenu.Sub.Content>
+          <WorkspaceMenuItems
+            onManageDrawings={() => setShowDrawingsDialog(true)}
+          />
+        </MainMenu.Sub.Content>
+      </MainMenu.Sub>
+      {/* === END RITA WORKSPACE === */}
+
+      <MainMenu.DefaultItems.Export />
+      {/* ... rest of menu items ... */}
+    </MainMenu>
+
+    {/* === RITA WORKSPACE: Add dialog === */}
+    <DrawingsDialog
+      open={showDrawingsDialog}
+      onClose={() => setShowDrawingsDialog(false)}
+    />
+    </>                                         {/* Close fragment */}
+  );
+});
+```
 
-### 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
+## Result
+
+After integration, a "📄 Ritningar" submenu appears in the hamburger menu:
+
+```
+┌─────────────────────────┐
+│ 📂 Open                 │
+│ 💾 Save                 │
+│ 📄 Ritningar        ▶  │──┐
+│ 📤 Export               │  │  ┌─────────────────────┐
+│ ...                     │  └──│ ✓ Current drawing   │
+└─────────────────────────┘     │   Sketch 2          │
+                                │   Project X         │
+                                │ ─────────────────── │
+                                │ + Ny ritning        │
+                                │ 📄 Hantera...       │
+                                └─────────────────────┘
+```
+
+## API Reference
+
+### Components
+
+| Component | Description |
+|-----------|-------------|
+| `WorkspaceProvider` | React context provider - wrap your app with this |
+| `WorkspaceMenuItems` | Menu items for Excalidraw's MainMenu |
+| `DrawingsDialog` | Modal dialog for managing all drawings |
+
+### Hooks
+
+| Hook | Description |
+|------|-------------|
+| `useWorkspace()` | Access workspace state and actions |
+
+### useWorkspace() returns
+
+```tsx
+const {
+  drawings,           // Drawing[] - all drawings
+  activeDrawing,      // Drawing | null - currently active
+  isLoading,          // boolean
+  createNewDrawing,   // () => Promise<Drawing>
+  switchDrawing,      // (id: string) => Promise<void>
+  renameDrawing,      // (id: string, name: string) => Promise<void>
+  removeDrawing,      // (id: string) => Promise<void>
+  saveCurrentDrawing, // (elements, appState, files?) => Promise<void>
+} = useWorkspace();
+```
+
+## Data Storage
+
+Drawings are stored in IndexedDB with the following structure:
+
+```typescript
+interface Drawing {
+  id: string;
+  name: string;
+  elements: ExcalidrawElement[];
+  appState: Record<string, unknown>;
+  files: Record<string, unknown>;
+  createdAt: number;
+  updatedAt: number;
+}
 ```
 
 ## Links
 
+- **npm:** https://www.npmjs.com/package/rita-workspace
 - **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)
+MIT

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rita-workspace",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Multi-drawing workspace feature for Rita (Excalidraw fork)",
   "main": "dist/index.js",
   "module": "dist/index.mjs",