rita-workspace 0.1.1 → 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/dist/index.d.mts

@@ -1,6 +1,6 @@
 import { IDBPDatabase, DBSchema } from 'idb';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 
 interface Drawing {
     id: string;
@@ -90,6 +90,88 @@ interface DrawingListItemProps {
 }
 declare function DrawingListItem({ drawing, isActive, onSelect, onRename, onDelete, canDelete, }: DrawingListItemProps): react_jsx_runtime.JSX.Element;
 
+/**
+ * Workspace Menu Items
+ *
+ * These components can be inserted into Excalidraw's main menu
+ * to provide workspace/multi-drawing functionality.
+ */
+
+interface WorkspaceMenuItemsProps {
+    /**
+     * Called when a drawing is selected from the submenu
+     */
+    onDrawingSelect?: (drawing: Drawing) => void;
+    /**
+     * Called when "Manage Drawings" is clicked
+     */
+    onManageDrawings?: () => void;
+    /**
+     * Render function for menu item - allows integration with Excalidraw's DropdownMenuItem
+     */
+    renderMenuItem?: (props: {
+        icon: React.ReactNode;
+        children: React.ReactNode;
+        onSelect: () => void;
+        shortcut?: string;
+    }) => React.ReactNode;
+    /**
+     * Render function for submenu - allows integration with Excalidraw's DropdownMenuSub
+     */
+    renderSubMenu?: (props: {
+        trigger: React.ReactNode;
+        children: React.ReactNode;
+    }) => React.ReactNode;
+    /**
+     * Render function for separator
+     */
+    renderSeparator?: () => React.ReactNode;
+}
+/**
+ * WorkspaceMenuItems - provides menu items for workspace functionality
+ *
+ * Usage with Excalidraw's menu system:
+ * ```tsx
+ * <MainMenu>
+ *   <MainMenu.DefaultItems.LoadScene />
+ *   <MainMenu.DefaultItems.SaveToActiveFile />
+ *   <MainMenu.Separator />
+ *   <WorkspaceMenuItems
+ *     renderMenuItem={(props) => <MainMenu.Item {...props} />}
+ *     renderSubMenu={(props) => <MainMenu.Sub>{props.children}</MainMenu.Sub>}
+ *     renderSeparator={() => <MainMenu.Separator />}
+ *   />
+ * </MainMenu>
+ * ```
+ */
+declare const WorkspaceMenuItems: React.FC<WorkspaceMenuItemsProps>;
+
+/**
+ * Drawings Dialog
+ *
+ * A modal dialog for managing all drawings in the workspace.
+ * Provides full CRUD operations: view, rename, delete, create new.
+ */
+
+interface DrawingsDialogProps {
+    /**
+     * Whether the dialog is open
+     */
+    open: boolean;
+    /**
+     * Called when the dialog should close
+     */
+    onClose: () => void;
+    /**
+     * Called when a drawing is selected
+     */
+    onDrawingSelect?: (drawing: Drawing) => void;
+}
+/**
+ * DrawingsDialog - modal for managing workspace drawings
+ */
+declare const DrawingsDialog: React.FC<DrawingsDialogProps>;
+
 interface ExcalidrawAPI {
     getSceneElements: () => unknown[];
     getAppState: () => Record<string, unknown>;
@@ -142,4 +224,4 @@ interface WorkspacePluginProps {
  */
 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 };
+export { type Drawing, DrawingList, DrawingListItem, DrawingsDialog, type DrawingsDialogProps, Sidebar, type Workspace, type WorkspaceContextValue, WorkspaceMenuItems, type WorkspaceMenuItemsProps, WorkspacePlugin, WorkspaceProvider, addDrawingToWorkspace, closeDB, createDrawing, deleteDrawing, duplicateDrawing, getAllDrawings, getDB, getDrawing, getOrCreateDefaultWorkspace, getWorkspace, removeDrawingFromWorkspace, setActiveDrawing, updateDrawing, updateWorkspace, useExcalidrawBridge, useWorkspace };

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import { IDBPDatabase, DBSchema } from 'idb';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 
 interface Drawing {
     id: string;
@@ -90,6 +90,88 @@ interface DrawingListItemProps {
 }
 declare function DrawingListItem({ drawing, isActive, onSelect, onRename, onDelete, canDelete, }: DrawingListItemProps): react_jsx_runtime.JSX.Element;
 
+/**
+ * Workspace Menu Items
+ *
+ * These components can be inserted into Excalidraw's main menu
+ * to provide workspace/multi-drawing functionality.
+ */
+
+interface WorkspaceMenuItemsProps {
+    /**
+     * Called when a drawing is selected from the submenu
+     */
+    onDrawingSelect?: (drawing: Drawing) => void;
+    /**
+     * Called when "Manage Drawings" is clicked
+     */
+    onManageDrawings?: () => void;
+    /**
+     * Render function for menu item - allows integration with Excalidraw's DropdownMenuItem
+     */
+    renderMenuItem?: (props: {
+        icon: React.ReactNode;
+        children: React.ReactNode;
+        onSelect: () => void;
+        shortcut?: string;
+    }) => React.ReactNode;
+    /**
+     * Render function for submenu - allows integration with Excalidraw's DropdownMenuSub
+     */
+    renderSubMenu?: (props: {
+        trigger: React.ReactNode;
+        children: React.ReactNode;
+    }) => React.ReactNode;
+    /**
+     * Render function for separator
+     */
+    renderSeparator?: () => React.ReactNode;
+}
+/**
+ * WorkspaceMenuItems - provides menu items for workspace functionality
+ *
+ * Usage with Excalidraw's menu system:
+ * ```tsx
+ * <MainMenu>
+ *   <MainMenu.DefaultItems.LoadScene />
+ *   <MainMenu.DefaultItems.SaveToActiveFile />
+ *   <MainMenu.Separator />
+ *   <WorkspaceMenuItems
+ *     renderMenuItem={(props) => <MainMenu.Item {...props} />}
+ *     renderSubMenu={(props) => <MainMenu.Sub>{props.children}</MainMenu.Sub>}
+ *     renderSeparator={() => <MainMenu.Separator />}
+ *   />
+ * </MainMenu>
+ * ```
+ */
+declare const WorkspaceMenuItems: React.FC<WorkspaceMenuItemsProps>;
+
+/**
+ * Drawings Dialog
+ *
+ * A modal dialog for managing all drawings in the workspace.
+ * Provides full CRUD operations: view, rename, delete, create new.
+ */
+
+interface DrawingsDialogProps {
+    /**
+     * Whether the dialog is open
+     */
+    open: boolean;
+    /**
+     * Called when the dialog should close
+     */
+    onClose: () => void;
+    /**
+     * Called when a drawing is selected
+     */
+    onDrawingSelect?: (drawing: Drawing) => void;
+}
+/**
+ * DrawingsDialog - modal for managing workspace drawings
+ */
+declare const DrawingsDialog: React.FC<DrawingsDialogProps>;
+
 interface ExcalidrawAPI {
     getSceneElements: () => unknown[];
     getAppState: () => Record<string, unknown>;
@@ -142,4 +224,4 @@ interface WorkspacePluginProps {
  */
 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 };
+export { type Drawing, DrawingList, DrawingListItem, DrawingsDialog, type DrawingsDialogProps, Sidebar, type Workspace, type WorkspaceContextValue, WorkspaceMenuItems, type WorkspaceMenuItemsProps, WorkspacePlugin, WorkspaceProvider, addDrawingToWorkspace, closeDB, createDrawing, deleteDrawing, duplicateDrawing, getAllDrawings, getDB, getDrawing, getOrCreateDefaultWorkspace, getWorkspace, removeDrawingFromWorkspace, setActiveDrawing, updateDrawing, updateWorkspace, useExcalidrawBridge, useWorkspace };