rita-workspace 0.2.0 → 0.3.0

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

@@ -98,6 +98,11 @@ declare function DrawingListItem({ drawing, isActive, onSelect, onRename, onDele
  */
 
 interface WorkspaceMenuItemsProps {
+    /**
+     * Language code (e.g., 'sv', 'en', 'sv-SE')
+     * Falls back to English if not supported
+     */
+    lang?: string;
     /**
      * Called when a drawing is selected from the submenu
      */
@@ -137,6 +142,7 @@ interface WorkspaceMenuItemsProps {
  *   <MainMenu.DefaultItems.SaveToActiveFile />
  *   <MainMenu.Separator />
  *   <WorkspaceMenuItems
+ *     lang="sv"
  *     renderMenuItem={(props) => <MainMenu.Item {...props} />}
  *     renderSubMenu={(props) => <MainMenu.Sub>{props.children}</MainMenu.Sub>}
  *     renderSeparator={() => <MainMenu.Separator />}
@@ -166,6 +172,11 @@ interface DrawingsDialogProps {
      * Called when a drawing is selected
      */
     onDrawingSelect?: (drawing: Drawing) => void;
+    /**
+     * Language code (e.g., 'sv', 'en', 'sv-SE')
+     * Falls back to English if not supported
+     */
+    lang?: string;
 }
 /**
  * DrawingsDialog - modal for managing workspace drawings
@@ -201,6 +212,40 @@ declare function useExcalidrawBridge({ excalidrawAPI, autoSaveInterval, }: UseEx
     scheduleSave: () => void;
 };
 
+/**
+ * Rita Workspace Translations
+ *
+ * Supports Swedish (sv) and English (en)
+ */
+type SupportedLanguage = 'sv' | 'en';
+interface Translations {
+    drawings: string;
+    newDrawing: string;
+    manageDrawings: string;
+    dialogTitle: string;
+    close: string;
+    open: string;
+    rename: string;
+    delete: string;
+    save: string;
+    cancel: string;
+    confirm: string;
+    noDrawingsYet: string;
+    clickNewToStart: string;
+    modified: string;
+    confirmDelete: string;
+    shortcutNewDrawing: string;
+}
+/**
+ * Get translations for a language code
+ * Falls back to English if language is not supported
+ */
+declare function getTranslations(langCode?: string): Translations;
+/**
+ * Check if a language is supported
+ */
+declare function isLanguageSupported(langCode?: string): boolean;
+
 interface WorkspacePluginProps {
     children: ReactNode;
     defaultSidebarOpen?: boolean;
@@ -224,4 +269,4 @@ interface WorkspacePluginProps {
  */
 declare function WorkspacePlugin(props: WorkspacePluginProps): react_jsx_runtime.JSX.Element;
 
-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 };
+export { type Drawing, DrawingList, DrawingListItem, DrawingsDialog, type DrawingsDialogProps, Sidebar, type SupportedLanguage, type Translations, type Workspace, type WorkspaceContextValue, WorkspaceMenuItems, type WorkspaceMenuItemsProps, WorkspacePlugin, WorkspaceProvider, addDrawingToWorkspace, closeDB, createDrawing, deleteDrawing, duplicateDrawing, getAllDrawings, getDB, getDrawing, getOrCreateDefaultWorkspace, getTranslations, getWorkspace, isLanguageSupported, removeDrawingFromWorkspace, setActiveDrawing, updateDrawing, updateWorkspace, useExcalidrawBridge, useWorkspace };

package/dist/index.d.ts

@@ -98,6 +98,11 @@ declare function DrawingListItem({ drawing, isActive, onSelect, onRename, onDele
  */
 
 interface WorkspaceMenuItemsProps {
+    /**
+     * Language code (e.g., 'sv', 'en', 'sv-SE')
+     * Falls back to English if not supported
+     */
+    lang?: string;
     /**
      * Called when a drawing is selected from the submenu
      */
@@ -137,6 +142,7 @@ interface WorkspaceMenuItemsProps {
  *   <MainMenu.DefaultItems.SaveToActiveFile />
  *   <MainMenu.Separator />
  *   <WorkspaceMenuItems
+ *     lang="sv"
  *     renderMenuItem={(props) => <MainMenu.Item {...props} />}
  *     renderSubMenu={(props) => <MainMenu.Sub>{props.children}</MainMenu.Sub>}
  *     renderSeparator={() => <MainMenu.Separator />}
@@ -166,6 +172,11 @@ interface DrawingsDialogProps {
      * Called when a drawing is selected
      */
     onDrawingSelect?: (drawing: Drawing) => void;
+    /**
+     * Language code (e.g., 'sv', 'en', 'sv-SE')
+     * Falls back to English if not supported
+     */
+    lang?: string;
 }
 /**
  * DrawingsDialog - modal for managing workspace drawings
@@ -201,6 +212,40 @@ declare function useExcalidrawBridge({ excalidrawAPI, autoSaveInterval, }: UseEx
     scheduleSave: () => void;
 };
 
+/**
+ * Rita Workspace Translations
+ *
+ * Supports Swedish (sv) and English (en)
+ */
+type SupportedLanguage = 'sv' | 'en';
+interface Translations {
+    drawings: string;
+    newDrawing: string;
+    manageDrawings: string;
+    dialogTitle: string;
+    close: string;
+    open: string;
+    rename: string;
+    delete: string;
+    save: string;
+    cancel: string;
+    confirm: string;
+    noDrawingsYet: string;
+    clickNewToStart: string;
+    modified: string;
+    confirmDelete: string;
+    shortcutNewDrawing: string;
+}
+/**
+ * Get translations for a language code
+ * Falls back to English if language is not supported
+ */
+declare function getTranslations(langCode?: string): Translations;
+/**
+ * Check if a language is supported
+ */
+declare function isLanguageSupported(langCode?: string): boolean;
+
 interface WorkspacePluginProps {
     children: ReactNode;
     defaultSidebarOpen?: boolean;
@@ -224,4 +269,4 @@ interface WorkspacePluginProps {
  */
 declare function WorkspacePlugin(props: WorkspacePluginProps): react_jsx_runtime.JSX.Element;
 
-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 };
+export { type Drawing, DrawingList, DrawingListItem, DrawingsDialog, type DrawingsDialogProps, Sidebar, type SupportedLanguage, type Translations, type Workspace, type WorkspaceContextValue, WorkspaceMenuItems, type WorkspaceMenuItemsProps, WorkspacePlugin, WorkspaceProvider, addDrawingToWorkspace, closeDB, createDrawing, deleteDrawing, duplicateDrawing, getAllDrawings, getDB, getDrawing, getOrCreateDefaultWorkspace, getTranslations, getWorkspace, isLanguageSupported, removeDrawingFromWorkspace, setActiveDrawing, updateDrawing, updateWorkspace, useExcalidrawBridge, useWorkspace };

package/dist/index.js

@@ -46,7 +46,9 @@ __export(index_exports, {
   getDB: () => getDB,
   getDrawing: () => getDrawing,
   getOrCreateDefaultWorkspace: () => getOrCreateDefaultWorkspace,
+  getTranslations: () => getTranslations,
   getWorkspace: () => getWorkspace,
+  isLanguageSupported: () => isLanguageSupported,
   removeDrawingFromWorkspace: () => removeDrawingFromWorkspace,
   setActiveDrawing: () => setActiveDrawing,
   updateDrawing: () => updateDrawing,
@@ -543,6 +545,71 @@ function Sidebar({ isOpen = true, onToggle, width = 250 }) {
 
 // src/ui/Menu/WorkspaceMenuItems.tsx
 var import_react4 = __toESM(require("react"));
+
+// src/i18n/translations.ts
+var sv = {
+  // Menu
+  drawings: "Ritningar",
+  newDrawing: "Ny ritning",
+  manageDrawings: "Hantera ritningar...",
+  // Dialog
+  dialogTitle: "Ritningar",
+  close: "St\xE4ng",
+  open: "\xD6ppna",
+  rename: "Byt namn",
+  delete: "Ta bort",
+  save: "Spara",
+  cancel: "Avbryt",
+  confirm: "Bekr\xE4fta",
+  // Messages
+  noDrawingsYet: "Inga ritningar \xE4nnu.",
+  clickNewToStart: 'Klicka "Ny ritning" f\xF6r att b\xF6rja.',
+  modified: "\xC4ndrad",
+  confirmDelete: "Vill du ta bort denna ritning?",
+  // Shortcuts
+  shortcutNewDrawing: "Ctrl+Alt+N"
+};
+var en = {
+  // Menu
+  drawings: "Drawings",
+  newDrawing: "New drawing",
+  manageDrawings: "Manage drawings...",
+  // Dialog
+  dialogTitle: "Drawings",
+  close: "Close",
+  open: "Open",
+  rename: "Rename",
+  delete: "Delete",
+  save: "Save",
+  cancel: "Cancel",
+  confirm: "Confirm",
+  // Messages
+  noDrawingsYet: "No drawings yet.",
+  clickNewToStart: 'Click "New drawing" to start.',
+  modified: "Modified",
+  confirmDelete: "Do you want to delete this drawing?",
+  // Shortcuts
+  shortcutNewDrawing: "Ctrl+Alt+N"
+};
+var translations = {
+  sv,
+  en
+};
+function getTranslations(langCode) {
+  if (!langCode) return en;
+  const lang = langCode.split("-")[0].toLowerCase();
+  if (lang in translations) {
+    return translations[lang];
+  }
+  return en;
+}
+function isLanguageSupported(langCode) {
+  if (!langCode) return false;
+  const lang = langCode.split("-")[0].toLowerCase();
+  return lang in translations;
+}
+
+// src/ui/Menu/WorkspaceMenuItems.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var DrawingsIcon = /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
   /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("rect", { x: "3", y: "3", width: "7", height: "7", rx: "1" }),
@@ -579,6 +646,7 @@ var DefaultMenuItem = ({ icon, children, onSelect, shortcut }) => /* @__PURE__ *
   }
 );
 var WorkspaceMenuItems = ({
+  lang,
   onDrawingSelect,
   onManageDrawings,
   renderMenuItem,
@@ -586,6 +654,7 @@ var WorkspaceMenuItems = ({
   renderSeparator
 }) => {
   const { drawings, activeDrawing, switchDrawing, createNewDrawing } = useWorkspace();
+  const t = getTranslations(lang);
   const MenuItem = renderMenuItem || ((props) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DefaultMenuItem, { ...props }));
   const Separator = renderSeparator || (() => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("hr", { style: { margin: "4px 0", border: "none", borderTop: "1px solid #ccc" } }));
   const handleDrawingSelect = async (drawing) => {
@@ -600,7 +669,8 @@ var WorkspaceMenuItems = ({
       trigger: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
         DrawingsIcon,
         /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { children: [
-          "Ritningar (",
+          t.drawings,
+          " (",
           drawings.length,
           ")"
         ] })
@@ -614,13 +684,13 @@ var WorkspaceMenuItems = ({
         drawings.length > 0 && Separator(),
         MenuItem({
           icon: PlusIcon,
-          children: "Ny ritning",
+          children: t.newDrawing,
           onSelect: handleNewDrawing,
-          shortcut: "Ctrl+Alt+N"
+          shortcut: t.shortcutNewDrawing
         }),
         onManageDrawings && MenuItem({
           icon: DrawingsIcon,
-          children: "Hantera ritningar...",
+          children: t.manageDrawings,
           onSelect: onManageDrawings
         })
       ] })
@@ -629,9 +699,9 @@ var WorkspaceMenuItems = ({
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
     MenuItem({
       icon: PlusIcon,
-      children: "Ny ritning",
+      children: t.newDrawing,
       onSelect: handleNewDrawing,
-      shortcut: "Ctrl+Alt+N"
+      shortcut: t.shortcutNewDrawing
     }),
     drawings.slice(0, 5).map((drawing) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react4.default.Fragment, { children: MenuItem({
       icon: activeDrawing?.id === drawing.id ? "\u2713" : DrawingsIcon,
@@ -642,7 +712,7 @@ var WorkspaceMenuItems = ({
       Separator(),
       MenuItem({
         icon: DrawingsIcon,
-        children: `Alla ritningar (${drawings.length})...`,
+        children: `${t.drawings} (${drawings.length})...`,
         onSelect: onManageDrawings
       })
     ] })
@@ -655,7 +725,8 @@ var import_jsx_runtime6 = require("react/jsx-runtime");
 var DrawingsDialog = ({
   open,
   onClose,
-  onDrawingSelect
+  onDrawingSelect,
+  lang
 }) => {
   const {
     drawings,
@@ -665,6 +736,7 @@ var DrawingsDialog = ({
     renameDrawing,
     removeDrawing
   } = useWorkspace();
+  const t = getTranslations(lang);
   const [editingId, setEditingId] = (0, import_react5.useState)(null);
   const [editName, setEditName] = (0, import_react5.useState)("");
   const [confirmDeleteId, setConfirmDeleteId] = (0, import_react5.useState)(null);
@@ -699,8 +771,14 @@ var DrawingsDialog = ({
     await removeDrawing(id);
     setConfirmDeleteId(null);
   }, [removeDrawing]);
+  const getLocale = () => {
+    if (!lang) return "en-US";
+    const baseLang = lang.split("-")[0].toLowerCase();
+    if (baseLang === "sv") return "sv-SE";
+    return "en-US";
+  };
   const formatDate = (timestamp) => {
-    return new Date(timestamp).toLocaleString("sv-SE", {
+    return new Date(timestamp).toLocaleString(getLocale(), {
       year: "numeric",
       month: "short",
       day: "numeric",
@@ -756,7 +834,8 @@ var DrawingsDialog = ({
                 },
                 children: [
                   /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("h2", { style: { margin: 0, fontSize: "18px", fontWeight: 600 }, children: [
-                    "Ritningar (",
+                    t.dialogTitle,
+                    " (",
                     drawings.length,
                     ")"
                   ] }),
@@ -773,7 +852,7 @@ var DrawingsDialog = ({
                         lineHeight: 1,
                         color: "inherit"
                       },
-                      "aria-label": "St\xE4ng",
+                      "aria-label": t.close,
                       children: "\xD7"
                     }
                   )
@@ -797,8 +876,8 @@ var DrawingsDialog = ({
                       color: "var(--text-secondary-color, #666)"
                     },
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { children: "Inga ritningar \xE4nnu." }),
-                      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { children: 'Klicka "Ny ritning" f\xF6r att b\xF6rja.' })
+                      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { children: t.noDrawingsYet }),
+                      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { children: t.clickNewToStart })
                     ]
                   }
                 ) : drawings.map((drawing) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
@@ -860,7 +939,8 @@ var DrawingsDialog = ({
                               marginTop: "2px"
                             },
                             children: [
-                              "\xC4ndrad: ",
+                              t.modified,
+                              ": ",
                               formatDate(drawing.updatedAt)
                             ]
                           }
@@ -880,7 +960,7 @@ var DrawingsDialog = ({
                               borderRadius: "4px",
                               cursor: "pointer"
                             },
-                            children: "Spara"
+                            children: t.save
                           }
                         ),
                         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
@@ -896,7 +976,7 @@ var DrawingsDialog = ({
                               cursor: "pointer",
                               color: "inherit"
                             },
-                            children: "Avbryt"
+                            children: t.cancel
                           }
                         )
                       ] }) : confirmDeleteId === drawing.id ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
@@ -913,7 +993,7 @@ var DrawingsDialog = ({
                               borderRadius: "4px",
                               cursor: "pointer"
                             },
-                            children: "Ta bort"
+                            children: t.delete
                           }
                         ),
                         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
@@ -929,7 +1009,7 @@ var DrawingsDialog = ({
                               cursor: "pointer",
                               color: "inherit"
                             },
-                            children: "Avbryt"
+                            children: t.cancel
                           }
                         )
                       ] }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
@@ -947,7 +1027,7 @@ var DrawingsDialog = ({
                               cursor: "pointer"
                             },
                             disabled: activeDrawing?.id === drawing.id,
-                            children: "\xD6ppna"
+                            children: t.open
                           }
                         ),
                         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
@@ -963,7 +1043,7 @@ var DrawingsDialog = ({
                               cursor: "pointer",
                               color: "inherit"
                             },
-                            title: "Byt namn",
+                            title: t.rename,
                             children: "\u270F\uFE0F"
                           }
                         ),
@@ -980,7 +1060,7 @@ var DrawingsDialog = ({
                               cursor: "pointer",
                               color: "inherit"
                             },
-                            title: "Ta bort",
+                            title: t.delete,
                             disabled: drawings.length <= 1,
                             children: "\u{1F5D1}\uFE0F"
                           }
@@ -1003,7 +1083,7 @@ var DrawingsDialog = ({
                   alignItems: "center"
                 },
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
                     "button",
                     {
                       onClick: handleCreate,
@@ -1017,7 +1097,10 @@ var DrawingsDialog = ({
                         cursor: "pointer",
                         fontWeight: 500
                       },
-                      children: "+ Ny ritning"
+                      children: [
+                        "+ ",
+                        t.newDrawing
+                      ]
                     }
                   ),
                   /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
@@ -1033,7 +1116,7 @@ var DrawingsDialog = ({
                         cursor: "pointer",
                         color: "inherit"
                       },
-                      children: "St\xE4ng"
+                      children: t.close
                     }
                   )
                 ]
@@ -1166,7 +1249,9 @@ function WorkspacePlugin(props) {
   getDB,
   getDrawing,
   getOrCreateDefaultWorkspace,
+  getTranslations,
   getWorkspace,
+  isLanguageSupported,
   removeDrawingFromWorkspace,
   setActiveDrawing,
   updateDrawing,

package/dist/index.mjs

@@ -485,6 +485,71 @@ function Sidebar({ isOpen = true, onToggle, width = 250 }) {
 
 // src/ui/Menu/WorkspaceMenuItems.tsx
 import React4 from "react";
+
+// src/i18n/translations.ts
+var sv = {
+  // Menu
+  drawings: "Ritningar",
+  newDrawing: "Ny ritning",
+  manageDrawings: "Hantera ritningar...",
+  // Dialog
+  dialogTitle: "Ritningar",
+  close: "St\xE4ng",
+  open: "\xD6ppna",
+  rename: "Byt namn",
+  delete: "Ta bort",
+  save: "Spara",
+  cancel: "Avbryt",
+  confirm: "Bekr\xE4fta",
+  // Messages
+  noDrawingsYet: "Inga ritningar \xE4nnu.",
+  clickNewToStart: 'Klicka "Ny ritning" f\xF6r att b\xF6rja.',
+  modified: "\xC4ndrad",
+  confirmDelete: "Vill du ta bort denna ritning?",
+  // Shortcuts
+  shortcutNewDrawing: "Ctrl+Alt+N"
+};
+var en = {
+  // Menu
+  drawings: "Drawings",
+  newDrawing: "New drawing",
+  manageDrawings: "Manage drawings...",
+  // Dialog
+  dialogTitle: "Drawings",
+  close: "Close",
+  open: "Open",
+  rename: "Rename",
+  delete: "Delete",
+  save: "Save",
+  cancel: "Cancel",
+  confirm: "Confirm",
+  // Messages
+  noDrawingsYet: "No drawings yet.",
+  clickNewToStart: 'Click "New drawing" to start.',
+  modified: "Modified",
+  confirmDelete: "Do you want to delete this drawing?",
+  // Shortcuts
+  shortcutNewDrawing: "Ctrl+Alt+N"
+};
+var translations = {
+  sv,
+  en
+};
+function getTranslations(langCode) {
+  if (!langCode) return en;
+  const lang = langCode.split("-")[0].toLowerCase();
+  if (lang in translations) {
+    return translations[lang];
+  }
+  return en;
+}
+function isLanguageSupported(langCode) {
+  if (!langCode) return false;
+  const lang = langCode.split("-")[0].toLowerCase();
+  return lang in translations;
+}
+
+// src/ui/Menu/WorkspaceMenuItems.tsx
 import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 var DrawingsIcon = /* @__PURE__ */ jsxs3("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
   /* @__PURE__ */ jsx5("rect", { x: "3", y: "3", width: "7", height: "7", rx: "1" }),
@@ -521,6 +586,7 @@ var DefaultMenuItem = ({ icon, children, onSelect, shortcut }) => /* @__PURE__ *
   }
 );
 var WorkspaceMenuItems = ({
+  lang,
   onDrawingSelect,
   onManageDrawings,
   renderMenuItem,
@@ -528,6 +594,7 @@ var WorkspaceMenuItems = ({
   renderSeparator
 }) => {
   const { drawings, activeDrawing, switchDrawing, createNewDrawing } = useWorkspace();
+  const t = getTranslations(lang);
   const MenuItem = renderMenuItem || ((props) => /* @__PURE__ */ jsx5(DefaultMenuItem, { ...props }));
   const Separator = renderSeparator || (() => /* @__PURE__ */ jsx5("hr", { style: { margin: "4px 0", border: "none", borderTop: "1px solid #ccc" } }));
   const handleDrawingSelect = async (drawing) => {
@@ -542,7 +609,8 @@ var WorkspaceMenuItems = ({
       trigger: /* @__PURE__ */ jsxs3(Fragment2, { children: [
         DrawingsIcon,
         /* @__PURE__ */ jsxs3("span", { children: [
-          "Ritningar (",
+          t.drawings,
+          " (",
           drawings.length,
           ")"
         ] })
@@ -556,13 +624,13 @@ var WorkspaceMenuItems = ({
         drawings.length > 0 && Separator(),
         MenuItem({
           icon: PlusIcon,
-          children: "Ny ritning",
+          children: t.newDrawing,
           onSelect: handleNewDrawing,
-          shortcut: "Ctrl+Alt+N"
+          shortcut: t.shortcutNewDrawing
         }),
         onManageDrawings && MenuItem({
           icon: DrawingsIcon,
-          children: "Hantera ritningar...",
+          children: t.manageDrawings,
           onSelect: onManageDrawings
         })
       ] })
@@ -571,9 +639,9 @@ var WorkspaceMenuItems = ({
   return /* @__PURE__ */ jsxs3(Fragment2, { children: [
     MenuItem({
       icon: PlusIcon,
-      children: "Ny ritning",
+      children: t.newDrawing,
       onSelect: handleNewDrawing,
-      shortcut: "Ctrl+Alt+N"
+      shortcut: t.shortcutNewDrawing
     }),
     drawings.slice(0, 5).map((drawing) => /* @__PURE__ */ jsx5(React4.Fragment, { children: MenuItem({
       icon: activeDrawing?.id === drawing.id ? "\u2713" : DrawingsIcon,
@@ -584,7 +652,7 @@ var WorkspaceMenuItems = ({
       Separator(),
       MenuItem({
         icon: DrawingsIcon,
-        children: `Alla ritningar (${drawings.length})...`,
+        children: `${t.drawings} (${drawings.length})...`,
         onSelect: onManageDrawings
       })
     ] })
@@ -592,12 +660,13 @@ var WorkspaceMenuItems = ({
 };
 
 // src/ui/Dialog/DrawingsDialog.tsx
-import { useState as useState5, useCallback as useCallback2 } from "react";
+import { useState as useState4, useCallback as useCallback2 } from "react";
 import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 var DrawingsDialog = ({
   open,
   onClose,
-  onDrawingSelect
+  onDrawingSelect,
+  lang
 }) => {
   const {
     drawings,
@@ -607,9 +676,10 @@ var DrawingsDialog = ({
     renameDrawing,
     removeDrawing
   } = useWorkspace();
-  const [editingId, setEditingId] = useState5(null);
-  const [editName, setEditName] = useState5("");
-  const [confirmDeleteId, setConfirmDeleteId] = useState5(null);
+  const t = getTranslations(lang);
+  const [editingId, setEditingId] = useState4(null);
+  const [editName, setEditName] = useState4("");
+  const [confirmDeleteId, setConfirmDeleteId] = useState4(null);
   const handleSelect = useCallback2(async (drawing) => {
     await switchDrawing(drawing.id);
     onDrawingSelect?.(drawing);
@@ -641,8 +711,14 @@ var DrawingsDialog = ({
     await removeDrawing(id);
     setConfirmDeleteId(null);
   }, [removeDrawing]);
+  const getLocale = () => {
+    if (!lang) return "en-US";
+    const baseLang = lang.split("-")[0].toLowerCase();
+    if (baseLang === "sv") return "sv-SE";
+    return "en-US";
+  };
   const formatDate = (timestamp) => {
-    return new Date(timestamp).toLocaleString("sv-SE", {
+    return new Date(timestamp).toLocaleString(getLocale(), {
       year: "numeric",
       month: "short",
       day: "numeric",
@@ -698,7 +774,8 @@ var DrawingsDialog = ({
                 },
                 children: [
                   /* @__PURE__ */ jsxs4("h2", { style: { margin: 0, fontSize: "18px", fontWeight: 600 }, children: [
-                    "Ritningar (",
+                    t.dialogTitle,
+                    " (",
                     drawings.length,
                     ")"
                   ] }),
@@ -715,7 +792,7 @@ var DrawingsDialog = ({
                         lineHeight: 1,
                         color: "inherit"
                       },
-                      "aria-label": "St\xE4ng",
+                      "aria-label": t.close,
                       children: "\xD7"
                     }
                   )
@@ -739,8 +816,8 @@ var DrawingsDialog = ({
                       color: "var(--text-secondary-color, #666)"
                     },
                     children: [
-                      /* @__PURE__ */ jsx6("p", { children: "Inga ritningar \xE4nnu." }),
-                      /* @__PURE__ */ jsx6("p", { children: 'Klicka "Ny ritning" f\xF6r att b\xF6rja.' })
+                      /* @__PURE__ */ jsx6("p", { children: t.noDrawingsYet }),
+                      /* @__PURE__ */ jsx6("p", { children: t.clickNewToStart })
                     ]
                   }
                 ) : drawings.map((drawing) => /* @__PURE__ */ jsxs4(
@@ -802,7 +879,8 @@ var DrawingsDialog = ({
                               marginTop: "2px"
                             },
                             children: [
-                              "\xC4ndrad: ",
+                              t.modified,
+                              ": ",
                               formatDate(drawing.updatedAt)
                             ]
                           }
@@ -822,7 +900,7 @@ var DrawingsDialog = ({
                               borderRadius: "4px",
                               cursor: "pointer"
                             },
-                            children: "Spara"
+                            children: t.save
                           }
                         ),
                         /* @__PURE__ */ jsx6(
@@ -838,7 +916,7 @@ var DrawingsDialog = ({
                               cursor: "pointer",
                               color: "inherit"
                             },
-                            children: "Avbryt"
+                            children: t.cancel
                           }
                         )
                       ] }) : confirmDeleteId === drawing.id ? /* @__PURE__ */ jsxs4(Fragment3, { children: [
@@ -855,7 +933,7 @@ var DrawingsDialog = ({
                               borderRadius: "4px",
                               cursor: "pointer"
                             },
-                            children: "Ta bort"
+                            children: t.delete
                           }
                         ),
                         /* @__PURE__ */ jsx6(
@@ -871,7 +949,7 @@ var DrawingsDialog = ({
                               cursor: "pointer",
                               color: "inherit"
                             },
-                            children: "Avbryt"
+                            children: t.cancel
                           }
                         )
                       ] }) : /* @__PURE__ */ jsxs4(Fragment3, { children: [
@@ -889,7 +967,7 @@ var DrawingsDialog = ({
                               cursor: "pointer"
                             },
                             disabled: activeDrawing?.id === drawing.id,
-                            children: "\xD6ppna"
+                            children: t.open
                           }
                         ),
                         /* @__PURE__ */ jsx6(
@@ -905,7 +983,7 @@ var DrawingsDialog = ({
                               cursor: "pointer",
                               color: "inherit"
                             },
-                            title: "Byt namn",
+                            title: t.rename,
                             children: "\u270F\uFE0F"
                           }
                         ),
@@ -922,7 +1000,7 @@ var DrawingsDialog = ({
                               cursor: "pointer",
                               color: "inherit"
                             },
-                            title: "Ta bort",
+                            title: t.delete,
                             disabled: drawings.length <= 1,
                             children: "\u{1F5D1}\uFE0F"
                           }
@@ -945,7 +1023,7 @@ var DrawingsDialog = ({
                   alignItems: "center"
                 },
                 children: [
-                  /* @__PURE__ */ jsx6(
+                  /* @__PURE__ */ jsxs4(
                     "button",
                     {
                       onClick: handleCreate,
@@ -959,7 +1037,10 @@ var DrawingsDialog = ({
                         cursor: "pointer",
                         fontWeight: 500
                       },
-                      children: "+ Ny ritning"
+                      children: [
+                        "+ ",
+                        t.newDrawing
+                      ]
                     }
                   ),
                   /* @__PURE__ */ jsx6(
@@ -975,7 +1056,7 @@ var DrawingsDialog = ({
                         cursor: "pointer",
                         color: "inherit"
                       },
-                      children: "St\xE4ng"
+                      children: t.close
                     }
                   )
                 ]
@@ -1030,14 +1111,14 @@ function useExcalidrawBridge({
 }
 
 // src/WorkspacePlugin.tsx
-import { useState as useState6, useEffect as useEffect4, useCallback as useCallback4 } from "react";
+import { useState as useState5, useEffect as useEffect4, useCallback as useCallback4 } from "react";
 import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 function WorkspacePluginInner({
   children,
   defaultSidebarOpen = true,
   sidebarWidth = 250
 }) {
-  const [sidebarOpen, setSidebarOpen] = useState6(defaultSidebarOpen);
+  const [sidebarOpen, setSidebarOpen] = useState5(defaultSidebarOpen);
   const { activeDrawing } = useWorkspace();
   useEffect4(() => {
     const handleKeyDown = (e) => {
@@ -1107,7 +1188,9 @@ export {
   getDB,
   getDrawing,
   getOrCreateDefaultWorkspace,
+  getTranslations,
   getWorkspace,
+  isLanguageSupported,
   removeDrawingFromWorkspace,
   setActiveDrawing,
   updateDrawing,

package/package.json

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