@plures/runebook 0.4.0

package/src/lib/utils/storage.ts

@@ -0,0 +1,326 @@
+// Storage utility for RuneBook canvases
+// Integrated with PluresDB for persistent storage
+
+import type { Canvas } from '../types/canvas';
+
+export interface StorageAdapter {
+  save(canvas: Canvas): Promise<void>;
+  load(id: string): Promise<Canvas | null>;
+  list(): Promise<{ id: string; name: string; timestamp: number }[]>;
+  delete(id: string): Promise<void>;
+}
+
+/**
+ * LocalStorage adapter for browser-based storage
+ * Fallback option when PluresDB is not available
+ */
+export class LocalStorageAdapter implements StorageAdapter {
+  private readonly prefix = 'runebook_canvas_';
+
+  private validateCanvas(data: any): data is { canvas: Canvas; timestamp: number } {
+    return (
+      data &&
+      typeof data === 'object' &&
+      'canvas' in data &&
+      'timestamp' in data &&
+      typeof data.timestamp === 'number' &&
+      data.canvas &&
+      typeof data.canvas === 'object' &&
+      'id' in data.canvas &&
+      'name' in data.canvas &&
+      'nodes' in data.canvas &&
+      Array.isArray(data.canvas.nodes)
+    );
+  }
+
+  async save(canvas: Canvas): Promise<void> {
+    const key = this.prefix + canvas.id;
+    const data = {
+      canvas,
+      timestamp: Date.now(),
+    };
+    localStorage.setItem(key, JSON.stringify(data));
+  }
+
+  async load(id: string): Promise<Canvas | null> {
+    const key = this.prefix + id;
+    const item = localStorage.getItem(key);
+    if (!item) return null;
+
+    try {
+      const data = JSON.parse(item);
+      if (!this.validateCanvas(data)) {
+        console.error('Invalid canvas data structure');
+        return null;
+      }
+      return data.canvas;
+    } catch (e) {
+      console.error('Failed to parse canvas data:', e);
+      return null;
+    }
+  }
+
+  async list(): Promise<{ id: string; name: string; timestamp: number }[]> {
+    const canvases: { id: string; name: string; timestamp: number }[] = [];
+    
+    for (let i = 0; i < localStorage.length; i++) {
+      const key = localStorage.key(i);
+      if (key && key.startsWith(this.prefix)) {
+        try {
+          const item = localStorage.getItem(key);
+          if (item) {
+            const data = JSON.parse(item);
+            if (this.validateCanvas(data)) {
+              canvases.push({
+                id: data.canvas.id,
+                name: data.canvas.name,
+                timestamp: data.timestamp,
+              });
+            }
+          }
+        } catch (e) {
+          console.error('Failed to parse canvas metadata:', e);
+        }
+      }
+    }
+
+    return canvases.sort((a, b) => b.timestamp - a.timestamp);
+  }
+
+  async delete(id: string): Promise<void> {
+    const key = this.prefix + id;
+    localStorage.removeItem(key);
+  }
+}
+
+/**
+ * PluresDB adapter for persistent, P2P-enabled storage
+ * Uses PluresDB's key-value API for storing canvas data
+ */
+export class PluresDBAdapter implements StorageAdapter {
+  private db: any = null;
+  private readonly prefix = 'runebook:canvas:';
+  private readonly metaPrefix = 'runebook:meta:';
+  private initialized = false;
+  private config: {
+    port?: number;
+    host?: string;
+    dataDir?: string;
+  };
+
+  constructor(config?: { port?: number; host?: string; dataDir?: string }) {
+    // Configuration can be provided or will use defaults
+    this.config = {
+      port: config?.port ?? 34567,
+      host: config?.host ?? 'localhost',
+      dataDir: config?.dataDir ?? './pluresdb-data',
+    };
+  }
+
+  private async ensureInitialized(): Promise<void> {
+    if (this.initialized && this.db) {
+      return;
+    }
+
+    try {
+      // Dynamic import to avoid bundling issues
+      const { SQLiteCompatibleAPI } = await import('pluresdb');
+      
+      this.db = new SQLiteCompatibleAPI({
+        config: this.config,
+        autoStart: true,
+      });
+
+      // Wait for initialization
+      await this.db.start();
+      this.initialized = true;
+      console.log('PluresDB initialized successfully with config:', this.config);
+    } catch (error) {
+      console.error('Failed to initialize PluresDB:', error);
+      throw new Error('PluresDB initialization failed. Make sure PluresDB server is running or use LocalStorageAdapter as fallback.');
+    }
+  }
+
+  private validateCanvas(data: any): data is { canvas: Canvas; timestamp: number } {
+    return (
+      data &&
+      typeof data === 'object' &&
+      'canvas' in data &&
+      'timestamp' in data &&
+      typeof data.timestamp === 'number' &&
+      data.canvas &&
+      typeof data.canvas === 'object' &&
+      'id' in data.canvas &&
+      'name' in data.canvas &&
+      'nodes' in data.canvas &&
+      Array.isArray(data.canvas.nodes)
+    );
+  }
+
+  async save(canvas: Canvas): Promise<void> {
+    await this.ensureInitialized();
+
+    const key = this.prefix + canvas.id;
+    const metaKey = this.metaPrefix + canvas.id;
+    const timestamp = Date.now();
+    
+    const data = {
+      canvas,
+      timestamp,
+    };
+
+    // Save the full canvas data
+    await this.db.put(key, data);
+
+    // Save metadata for efficient listing
+    await this.db.put(metaKey, {
+      id: canvas.id,
+      name: canvas.name,
+      timestamp,
+    });
+  }
+
+  async load(id: string): Promise<Canvas | null> {
+    await this.ensureInitialized();
+
+    const key = this.prefix + id;
+    
+    try {
+      const data = await this.db.getValue(key);
+      
+      if (!data) {
+        return null;
+      }
+
+      if (!this.validateCanvas(data)) {
+        console.error('Invalid canvas data structure in PluresDB');
+        return null;
+      }
+
+      return data.canvas;
+    } catch (error) {
+      console.error('Failed to load canvas from PluresDB:', error);
+      return null;
+    }
+  }
+
+  async list(): Promise<{ id: string; name: string; timestamp: number }[]> {
+    await this.ensureInitialized();
+
+    try {
+      // Get all metadata keys
+      const keys = await this.db.list(this.metaPrefix);
+      const canvases: { id: string; name: string; timestamp: number }[] = [];
+
+      // Fetch each metadata entry
+      for (const key of keys) {
+        try {
+          const meta = await this.db.getValue(key);
+          if (meta && meta.id && meta.name && typeof meta.timestamp === 'number') {
+            canvases.push({
+              id: meta.id,
+              name: meta.name,
+              timestamp: meta.timestamp,
+            });
+          }
+        } catch (error) {
+          console.error('Failed to load canvas metadata:', error);
+        }
+      }
+
+      // Sort by timestamp, newest first
+      return canvases.sort((a, b) => b.timestamp - a.timestamp);
+    } catch (error) {
+      console.error('Failed to list canvases from PluresDB:', error);
+      return [];
+    }
+  }
+
+  async delete(id: string): Promise<void> {
+    await this.ensureInitialized();
+
+    const key = this.prefix + id;
+    const metaKey = this.metaPrefix + id;
+
+    try {
+      // Delete both the canvas data and metadata
+      await this.db.delete(key);
+      await this.db.delete(metaKey);
+    } catch (error) {
+      console.error('Failed to delete canvas from PluresDB:', error);
+      throw error;
+    }
+  }
+
+  /**
+   * Stop the PluresDB server (cleanup)
+   */
+  async stop(): Promise<void> {
+    if (this.db && this.initialized) {
+      try {
+        await this.db.stop();
+        this.initialized = false;
+        console.log('PluresDB stopped');
+      } catch (error) {
+        console.error('Failed to stop PluresDB:', error);
+      }
+    }
+  }
+}
+
+// Default storage adapter - use LocalStorage for browser compatibility
+// Users can switch to PluresDBAdapter if they have PluresDB server running
+export const storage: StorageAdapter = new LocalStorageAdapter();
+
+// Storage adapter management
+let currentAdapter: StorageAdapter = storage;
+
+/**
+ * Switch to LocalStorage adapter
+ */
+export function useLocalStorage(): void {
+  currentAdapter = new LocalStorageAdapter();
+}
+
+/**
+ * Switch to PluresDB adapter
+ * @param config Optional PluresDB configuration
+ */
+export function usePluresDB(config?: { port?: number; host?: string; dataDir?: string }): void {
+  currentAdapter = new PluresDBAdapter(config);
+}
+
+/**
+ * Get the current storage adapter
+ */
+export function getCurrentAdapter(): StorageAdapter {
+  return currentAdapter;
+}
+
+/**
+ * Save canvas to persistent storage
+ */
+export async function saveCanvas(canvas: Canvas): Promise<void> {
+  await currentAdapter.save(canvas);
+}
+
+/**
+ * Load canvas from persistent storage
+ */
+export async function loadCanvas(id: string): Promise<Canvas | null> {
+  return await currentAdapter.load(id);
+}
+
+/**
+ * List all saved canvases
+ */
+export async function listCanvases(): Promise<{ id: string; name: string; timestamp: number }[]> {
+  return await currentAdapter.list();
+}
+
+/**
+ * Delete a saved canvas
+ */
+export async function deleteCanvas(id: string): Promise<void> {
+  await currentAdapter.delete(id);
+}

package/src/lib/utils/yaml-loader.ts

@@ -0,0 +1,52 @@
+import yaml from 'js-yaml';
+import type { Canvas } from '../types/canvas';
+
+export async function loadCanvasFromYAML(yamlContent: string): Promise<Canvas> {
+  try {
+    const data = yaml.load(yamlContent) as any;
+    
+    // Validate required fields
+    if (!data.id || !data.name || !data.nodes || !data.connections) {
+      throw new Error('Invalid canvas YAML: missing required fields');
+    }
+
+    return {
+      id: data.id,
+      name: data.name,
+      description: data.description || '',
+      nodes: data.nodes || [],
+      connections: data.connections || [],
+      version: data.version || '1.0.0'
+    };
+  } catch (error) {
+    console.error('Error parsing canvas YAML:', error);
+    throw error;
+  }
+}
+
+export function saveCanvasToYAML(canvas: Canvas): string {
+  try {
+    return yaml.dump(canvas, {
+      indent: 2,
+      lineWidth: 120,
+      noRefs: true
+    });
+  } catch (error) {
+    console.error('Error serializing canvas to YAML:', error);
+    throw error;
+  }
+}
+
+export async function loadCanvasFromFile(filePath: string): Promise<Canvas> {
+  try {
+    const response = await fetch(filePath);
+    if (!response.ok) {
+      throw new Error(`Failed to load canvas file: ${response.statusText}`);
+    }
+    const yamlContent = await response.text();
+    return loadCanvasFromYAML(yamlContent);
+  } catch (error) {
+    console.error('Error loading canvas file:', error);
+    throw error;
+  }
+}

package/src/routes/+layout.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+  import "@plures/design-dojo/tokens.css";
+</script>
+
+<slot />

package/src/routes/+layout.ts

@@ -0,0 +1,5 @@
+// Tauri doesn't have a Node.js server to do proper SSR
+// so we use adapter-static with a fallback to index.html to put the site in SPA mode
+// See: https://svelte.dev/docs/kit/single-page-apps
+// See: https://v2.tauri.app/start/frontend/sveltekit/ for more info
+export const ssr = false;

package/src/routes/+page.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import Canvas from '$lib/components/Canvas.svelte';
+  import Toolbar from '$lib/components/Toolbar.svelte';
+
+  const tui = false;
+</script>
+
+<div class="app">
+  <Toolbar {tui} />
+  <div class="canvas-wrapper">
+    <Canvas {tui} />
+  </div>
+</div>
+
+<style>
+  :global(body) {
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+  }
+
+  .app {
+    display: flex;
+    height: 100vh;
+    width: 100vw;
+  }
+
+  .canvas-wrapper {
+    flex: 1;
+    margin-left: 200px;
+  }
+</style>