{"_id":"@barocss/collaboration-liveblocks","_rev":"3-6d8d59bfba22526f78bf7814d55893cf","name":"@barocss/collaboration-liveblocks","dist-tags":{"latest":"0.1.2"},"versions":{"0.1.0":{"name":"@barocss/collaboration-liveblocks","version":"0.1.0","keywords":["collaboration","liveblocks","crdt","realtime","editor"],"author":{"name":"Barocss Team"},"license":"MIT","_id":"@barocss/collaboration-liveblocks@0.1.0","maintainers":[{"name":"easylogic","email":"cyberuls@gmail.com"}],"dist":{"shasum":"58b09c91e9f6abbceb4554b6ce558d4e87eb76f4","tarball":"https://registry.npmjs.org/@barocss/collaboration-liveblocks/-/collaboration-liveblocks-0.1.0.tgz","fileCount":5,"integrity":"sha512-czWZKz5XysBz6FhyW1jAoPRVmbHsn6gt6PEcnVGz+8bgeGrsf8JZmeNoqaFbTDTu7VsIb/VTMnB+zC9n+oUvFA==","signatures":[{"sig":"MEQCIDTeWeju3kfddCRJ3pziqFuPP8uBs8NuZ0MGyERGmM3GAiBD+OjF6ljV0TQKzYcPE8xiG8iWzKlLXLleDdKKtxMoYA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":17090},"main":"./dist/index.js","type":"module","_from":"file:barocss-collaboration-liveblocks-0.1.0.tgz","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"}},"scripts":{"dev":"vite build --watch","test":"vitest","build":"vite build","clean":"rm -rf dist","test:run":"vitest run","type-check":"tsc --noEmit"},"_npmUser":{"name":"easylogic","email":"cyberuls@gmail.com"},"_resolved":"/tmp/de53211c8858a39a2511be3f49a85594/barocss-collaboration-liveblocks-0.1.0.tgz","_integrity":"sha512-czWZKz5XysBz6FhyW1jAoPRVmbHsn6gt6PEcnVGz+8bgeGrsf8JZmeNoqaFbTDTu7VsIb/VTMnB+zC9n+oUvFA==","_npmVersion":"10.8.2","description":"Liveblocks adapter for Barocss Editor collaborative editing","directories":{},"_nodeVersion":"20.20.0","dependencies":{"@barocss/datastore":"0.1.0","@barocss/collaboration":"0.1.0"},"publishConfig":{"files":["dist"]},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.4.21","vitest":"^3.2.4","typescript":"^5.9.3","vite-plugin-dts":"^4.5.4"},"peerDependencies":{"@liveblocks/client":"^1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/collaboration-liveblocks_0.1.0_1770043574372_0.4201803314064938","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@barocss/collaboration-liveblocks","version":"0.1.1","keywords":["collaboration","liveblocks","crdt","realtime","editor"],"author":{"name":"Barocss Team"},"license":"MIT","_id":"@barocss/collaboration-liveblocks@0.1.1","maintainers":[{"name":"easylogic","email":"cyberuls@gmail.com"}],"dist":{"shasum":"95234abc3ed159ef5590a02a8bcfbc1cd7c6ada4","tarball":"https://registry.npmjs.org/@barocss/collaboration-liveblocks/-/collaboration-liveblocks-0.1.1.tgz","fileCount":5,"integrity":"sha512-ioRlMti81jlXmuqkM05AZAAbPS3wHTLQLZOvECDcU61Zcea+GKfoPluINbLht+v5Ktsseu03wbAH1nh8njtRjA==","signatures":[{"sig":"MEQCIHbMG9djsKfYoa9bL/vL9KMf8iJyhXy0HGXflWk3g8usAiAKhUDCyOJBCK9BQVSLRhAVWJTe9OKA7qjqupWzNOQ8OA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":17090},"main":"./dist/index.js","type":"module","_from":"file:barocss-collaboration-liveblocks-0.1.1.tgz","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"}},"scripts":{"dev":"vite build --watch","test":"vitest","build":"vite build","clean":"rm -rf dist","test:run":"vitest run","type-check":"tsc --noEmit"},"_npmUser":{"name":"easylogic","email":"cyberuls@gmail.com"},"_resolved":"/tmp/6ba2af28b849b053d109899d39fbb734/barocss-collaboration-liveblocks-0.1.1.tgz","_integrity":"sha512-ioRlMti81jlXmuqkM05AZAAbPS3wHTLQLZOvECDcU61Zcea+GKfoPluINbLht+v5Ktsseu03wbAH1nh8njtRjA==","_npmVersion":"10.8.2","description":"Liveblocks adapter for Barocss Editor collaborative editing","directories":{},"_nodeVersion":"20.20.0","dependencies":{"@barocss/datastore":"0.1.1","@barocss/collaboration":"0.1.1"},"publishConfig":{"files":["dist"]},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.4.21","vitest":"^3.2.4","typescript":"^5.9.3","vite-plugin-dts":"^4.5.4"},"peerDependencies":{"@liveblocks/client":"^1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/collaboration-liveblocks_0.1.1_1771600455928_0.7197192923079971","host":"s3://npm-registry-packages-npm-production"}},"0.1.2":{"name":"@barocss/collaboration-liveblocks","version":"0.1.2","description":"Liveblocks adapter for Barocss Editor collaborative editing","type":"module","main":"./dist/index.js","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","default":"./dist/index.js"}},"dependencies":{"@barocss/collaboration":"0.1.2","@barocss/datastore":"0.1.2"},"peerDependencies":{"@liveblocks/client":"^1.0.0"},"devDependencies":{"typescript":"^5.9.3","vite":"^5.4.21","vite-plugin-dts":"^4.5.4","vitest":"^3.2.4"},"publishConfig":{"files":["dist"]},"keywords":["collaboration","liveblocks","crdt","realtime","editor"],"author":{"name":"Barocss Team"},"license":"MIT","scripts":{"build":"vite build","dev":"vite build --watch","type-check":"tsc --noEmit","clean":"rm -rf dist","test":"vitest","test:run":"vitest run"},"_id":"@barocss/collaboration-liveblocks@0.1.2","_integrity":"sha512-7JLkoWUf6BF6IC3gNoux9kTMSJc3IxNtn5qBtpMopMS2Yw2lqql9D1qUUaV3YYS7tkENzEauJTtrixGnynerQw==","_resolved":"/tmp/922bec4a844419b1488fcdf5079b960f/barocss-collaboration-liveblocks-0.1.2.tgz","_from":"file:barocss-collaboration-liveblocks-0.1.2.tgz","_nodeVersion":"20.20.0","_npmVersion":"10.8.2","dist":{"integrity":"sha512-7JLkoWUf6BF6IC3gNoux9kTMSJc3IxNtn5qBtpMopMS2Yw2lqql9D1qUUaV3YYS7tkENzEauJTtrixGnynerQw==","shasum":"b53700c32467da96cc96228843cf9bfe9f633afb","tarball":"https://registry.npmjs.org/@barocss/collaboration-liveblocks/-/collaboration-liveblocks-0.1.2.tgz","fileCount":5,"unpackedSize":18913,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIE8WOdhYQqp5nrrbpqedwk0/1ft/aBE05BnA6DCWyPU6AiBqadrNbIxigK5pTsnBneaTQYkHLHN9m+lGQr8+FmgCcA=="}]},"_npmUser":{"name":"easylogic","email":"cyberuls@gmail.com"},"directories":{},"maintainers":[{"name":"easylogic","email":"cyberuls@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/collaboration-liveblocks_0.1.2_1771692409761_0.27207047052070266"},"_hasShrinkwrap":false}},"time":{"created":"2026-02-02T14:46:14.285Z","modified":"2026-02-21T16:46:50.059Z","0.1.0":"2026-02-02T14:46:14.498Z","0.1.1":"2026-02-20T15:14:16.099Z","0.1.2":"2026-02-21T16:46:49.927Z"},"author":{"name":"Barocss Team"},"license":"MIT","keywords":["collaboration","liveblocks","crdt","realtime","editor"],"description":"Liveblocks adapter for Barocss Editor collaborative editing","maintainers":[{"name":"easylogic","email":"cyberuls@gmail.com"}],"readme":"# @barocss/collaboration-liveblocks\n\nLiveblocks adapter for Barocss Editor collaborative editing. Integrates Barocss DataStore with Liveblocks for managed collaborative editing infrastructure.\n\n## Architecture\n\n```mermaid\ngraph TB\n    subgraph \"Barocss Editor\"\n        A[\"DataStore<br/>emitOperation/onOperation\"]\n        B[\"AtomicOperation<br/>create|update|delete|move\"]\n    end\n    \n    subgraph \"LiveblocksAdapter\"\n        C[\"BaseAdapter<br/>Common Logic\"]\n        D[\"LiveblocksAdapter<br/>Room Integration\"]\n    end\n    \n    subgraph \"Liveblocks\"\n        E[\"Liveblocks Client<br/>Connection Manager\"]\n        F[\"Liveblocks Room<br/>Shared State\"]\n        G[\"Liveblocks Server<br/>Managed Infrastructure\"]\n    end\n    \n    A --> B\n    B --> C\n    C --> D\n    D --> E\n    E --> F\n    F --> G\n    \n    G --> H[\"Other Clients\"]\n    \n    style A fill:#e1f5ff\n    style D fill:#fff4e1\n    style E fill:#e8f5e9\n    style F fill:#f3e5f5\n    style G fill:#fce4ec\n```\n\n## Installation\n\n```bash\npnpm add @barocss/collaboration-liveblocks @liveblocks/client\n```\n\n## Quick Start\n\n```typescript\nimport { DataStore } from '@barocss/datastore';\nimport { LiveblocksAdapter } from '@barocss/collaboration-liveblocks';\nimport { createClient } from '@liveblocks/client';\n\n// Create Liveblocks client\nconst client = createClient({\n  publicApiKey: 'your-api-key'\n});\n\n// Enter room\nconst room = client.enter('my-room');\n\n// Create adapter\nconst adapter = new LiveblocksAdapter({\n  room,\n  config: {\n    clientId: 'user-1',\n    user: {\n      id: 'user-1',\n      name: 'John Doe'\n    },\n    debug: true\n  }\n});\n\n// Connect to DataStore\nconst dataStore = new DataStore();\nawait adapter.connect(dataStore);\n```\n\n## Usage\n\n### Basic Setup\n\n```typescript\nimport { DataStore } from '@barocss/datastore';\nimport { LiveblocksAdapter } from '@barocss/collaboration-liveblocks';\nimport { createClient } from '@liveblocks/client';\n\n// 1. Create Liveblocks client\nconst client = createClient({\n  publicApiKey: 'pk_live_...',  // Public API key from Liveblocks dashboard\n  // For authentication, use:\n  // authEndpoint: '/api/liveblocks-auth'\n});\n\n// 2. Enter a room\nconst room = client.enter('document-id');\n\n// 3. Create adapter\nconst adapter = new LiveblocksAdapter({\n  room,\n  config: {\n    clientId: 'user-1',\n    user: {\n      id: 'user-1',\n      name: 'John Doe',\n      color: '#ff0000',\n      avatar: 'https://avatar.url'\n    },\n    debug: true\n  }\n});\n\n// 4. Connect to DataStore\nconst dataStore = new DataStore();\nawait adapter.connect(dataStore);\n```\n\n### Authentication\n\n```typescript\nimport { createClient } from '@liveblocks/client';\n\n// With authentication endpoint\nconst client = createClient({\n  authEndpoint: '/api/liveblocks-auth',\n  // The auth endpoint should return:\n  // { token: '...' }\n});\n\nconst room = client.enter('document-id');\n```\n\n### Room Events\n\n```typescript\n// Listen to room connection status\nroom.subscribe('connection', (status) => {\n  console.log('Connection status:', status);\n  // 'open' | 'closed' | 'unavailable'\n});\n\n// Listen to room errors\nroom.subscribe('error', (error) => {\n  console.error('Room error:', error);\n});\n\n// Listen to other users\nroom.subscribe('others', (others) => {\n  console.log('Other users in room:', others);\n});\n```\n\n### Presence\n\nLiveblocks provides built-in presence for cursor positions and user information:\n\n```typescript\n// Update local presence\nroom.updatePresence({\n  cursor: { x: 100, y: 200 },\n  selection: { start: 0, end: 10 }\n});\n\n// Listen to other users' presence\nroom.subscribe('others', (others) => {\n  others.forEach((other) => {\n    console.log('User:', other.presence);\n    console.log('Cursor:', other.presence?.cursor);\n  });\n});\n```\n\n## API Reference\n\n### LiveblocksAdapterOptions\n\n```typescript\ninterface LiveblocksAdapterOptions {\n  /**\n   * Liveblocks Room instance\n   * Required: The room that manages shared state\n   * Created via client.enter(roomId)\n   */\n  room: Room;\n\n  /**\n   * Adapter configuration\n   * See AdapterConfig in @barocss/collaboration\n   */\n  config?: AdapterConfig;\n}\n```\n\n### LiveblocksAdapter Methods\n\n```typescript\nclass LiveblocksAdapter extends BaseAdapter {\n  /**\n   * Connect adapter to DataStore\n   * Sets up room subscriptions and loads initial state\n   */\n  connect(dataStore: DataStore): Promise<void>;\n\n  /**\n   * Disconnect adapter from DataStore\n   * Removes room subscriptions\n   */\n  disconnect(): Promise<void>;\n\n  /**\n   * Check if adapter is connected\n   */\n  isConnected(): boolean;\n}\n```\n\n## Advanced Usage\n\n### Custom Storage Structure\n\nLiveblocks uses a storage structure. Customize how operations are stored:\n\n```typescript\n// Operations are stored in room storage\nroom.update((root) => {\n  if (!root.operations) {\n    root.operations = [];\n  }\n  \n  root.operations.push({\n    type: 'create',\n    nodeId: 'node-1',\n    data: { /* ... */ }\n  });\n});\n```\n\n### Storage Events\n\n```typescript\n// Listen to storage changes\nroom.subscribe('storage', (storage) => {\n  console.log('Storage updated:', storage);\n  \n  // Access operations\n  const operations = storage.root.get('operations');\n  console.log('Operations:', operations);\n});\n```\n\n### Broadcast Events\n\nUse Liveblocks broadcast for custom events:\n\n```typescript\n// Broadcast custom event\nroom.broadcastEvent({\n  type: 'custom-event',\n  data: { message: 'Hello' }\n});\n\n// Listen to broadcast events\nroom.subscribe('event', (event) => {\n  if (event.type === 'custom-event') {\n    console.log('Received:', event.data);\n  }\n});\n```\n\n### History and Undo\n\nLiveblocks provides history for undo/redo:\n\n```typescript\n// Get history\nconst history = room.getHistory();\n\n// Undo last operation\nroom.history.undo();\n\n// Redo last operation\nroom.history.redo();\n```\n\n### Error Handling\n\n```typescript\n// Handle connection errors\nroom.subscribe('error', (error) => {\n  console.error('Room error:', error);\n  \n  if (error.type === 'CONNECTION_ERROR') {\n    // Handle reconnection\n    setTimeout(() => {\n      room.reconnect();\n    }, 1000);\n  }\n});\n\n// Handle storage errors\ntry {\n  room.update((root) => {\n    root.operations.push(operation);\n  });\n} catch (error) {\n  console.error('Storage error:', error);\n}\n```\n\n## Configuration Options\n\n### AdapterConfig\n\n```typescript\ninterface AdapterConfig {\n  /**\n   * Unique client identifier\n   */\n  clientId?: string;\n\n  /**\n   * User information for presence\n   */\n  user?: {\n    id: string;\n    name?: string;\n    color?: string;\n    avatar?: string;\n  };\n\n  /**\n   * Enable debug logging\n   */\n  debug?: boolean;\n\n  /**\n   * Transform operations before applying\n   */\n  transformOperation?: (op: AtomicOperation) => AtomicOperation;\n}\n```\n\n## Troubleshooting\n\n### Connection Issues\n\n1. **Check API key**: Ensure public API key is correct\n   ```typescript\n   const client = createClient({\n     publicApiKey: 'pk_live_...'\n   });\n   ```\n\n2. **Verify authentication**: If using auth, check auth endpoint\n   ```typescript\n   const client = createClient({\n     authEndpoint: '/api/liveblocks-auth'\n   });\n   ```\n\n3. **Check room ID**: Ensure room ID is valid\n   ```typescript\n   const room = client.enter('valid-room-id');\n   ```\n\n### Storage Not Updating\n\n1. **Check room connection**: Ensure room is connected\n   ```typescript\n   room.subscribe('connection', (status) => {\n     console.log('Connection:', status); // Should be 'open'\n   });\n   ```\n\n2. **Verify storage structure**: Check storage structure\n   ```typescript\n   room.subscribe('storage', (storage) => {\n     console.log('Storage:', storage.root.toJSON());\n   });\n   ```\n\n3. **Check adapter connection**: Verify adapter is connected\n   ```typescript\n   console.log('Adapter connected:', adapter.isConnected());\n   ```\n\n### Operations Not Syncing\n\n1. **Check room subscriptions**: Ensure subscriptions are active\n   ```typescript\n   room.subscribe('storage', (storage) => {\n     // This should be called when storage changes\n   });\n   ```\n\n2. **Verify operation format**: Ensure operations match expected format\n   ```typescript\n   room.update((root) => {\n     const operations = root.get('operations');\n     console.log('Operations:', operations.toJSON());\n   });\n   ```\n\n## Best Practices\n\n1. **Use Authentication**: Always use authentication for production\n2. **Handle Disconnections**: Implement reconnection logic\n3. **Use Presence**: Leverage Liveblocks presence for cursors\n4. **Monitor Connection**: Track connection status\n5. **Error Handling**: Implement comprehensive error handling\n6. **Clean Up**: Leave rooms when done\n\n## Example: Full Integration\n\n```typescript\nimport { Editor } from '@barocss/editor-core';\nimport { DataStore } from '@barocss/datastore';\nimport { LiveblocksAdapter } from '@barocss/collaboration-liveblocks';\nimport { createClient } from '@liveblocks/client';\n\nclass CollaborativeEditor {\n  private client: ReturnType<typeof createClient>;\n  private room: any;\n  private adapter: LiveblocksAdapter;\n  private dataStore: DataStore;\n  private editor: Editor;\n\n  constructor(roomId: string, userId: string, apiKey: string) {\n    // Initialize Liveblocks client\n    this.client = createClient({\n      publicApiKey: apiKey,\n      authEndpoint: '/api/liveblocks-auth'\n    });\n\n    // Enter room\n    this.room = this.client.enter(roomId);\n\n    // Initialize DataStore\n    this.dataStore = new DataStore();\n\n    // Create adapter\n    this.adapter = new LiveblocksAdapter({\n      room: this.room,\n      config: {\n        clientId: userId,\n        user: {\n          id: userId,\n          name: `User ${userId}`\n        },\n        debug: true\n      }\n    });\n\n    // Initialize editor\n    this.editor = new Editor({\n      dataStore: this.dataStore\n    });\n  }\n\n  async connect() {\n    // Connect adapter\n    await this.adapter.connect(this.dataStore);\n\n    // Set up event handlers\n    this.room.subscribe('connection', (status) => {\n      console.log('Connection status:', status);\n    });\n\n    this.room.subscribe('others', (others) => {\n      console.log('Other users:', others);\n    });\n\n    // Update presence\n    this.room.updatePresence({\n      cursor: { x: 0, y: 0 }\n    });\n  }\n\n  async disconnect() {\n    await this.adapter.disconnect();\n    this.client.leave(this.room.id);\n  }\n}\n```\n\n## Liveblocks Setup\n\n### Getting API Key\n\n1. Sign up at [liveblocks.io](https://liveblocks.io)\n2. Create a project\n3. Get your public API key from dashboard\n\n### Authentication Setup\n\nCreate an auth endpoint:\n\n```typescript\n// /api/liveblocks-auth\nexport default async function handler(req, res) {\n  // Verify user authentication\n  const user = await verifyUser(req);\n  \n  // Generate Liveblocks token\n  const token = await generateToken(user.id);\n  \n  res.json({ token });\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"README.md"}