Platphorm Network

┌─────────────────────────────────────────────────────────────────────────┐
│                        PLATPHORM NEWS NETWORK                            │
│                          discovered PlatPhormNews sites                            │
├─────────────────────────────────────────────────────────────────────────┤
│                                                                          │
│  ┌────────────────┐      ┌────────────────┐      ┌────────────────┐    │
│  │     SVG        │      │     DESIGN     │      │     DOCS       │    │
│  │   Service      │◀────▶│   (You are     │◀────▶│   Service      │    │
│  │                │      │    here)       │      │                │    │
│  └────────────────┘      └───────┬────────┘      └────────────────┘    │
│                                  │                                      │
│  ┌────────────────┐      ┌───────┴────────┐      ┌────────────────┐    │
│  │    SHEETS      │◀────▶│  Shared Auth   │◀────▶│    EMOJI       │    │
│  │   Service      │      │  & API Layer   │      │   Service      │    │
│  └────────────────┘      └───────┬────────┘      └────────────────┘    │
│                                  │                                      │
│  ┌────────────────┐      ┌───────┴────────┐      ┌────────────────┐    │
│  │    CODEX       │◀────▶│   MCP Server   │◀────▶│    PHORM       │    │
│  │   Service      │      │  (AI Agents)   │      │  Share Form    │    │
│  └────────────────┘      └────────────────┘      └────────────────┘    │
│                                                                          │
└─────────────────────────────────────────────────────────────────────────┘

// Connection methods:
// - REST API: Direct HTTP requests to each service
// - MCP: AI agent interface for programmatic access
// - Webhooks: Real-time event notifications
// - Shared auth: Single sign-on across services

// The IntegrationsPanel component provides UI access to all services

import { IntegrationsPanel } from '@/components/design/integrations-panel'

function Editor() {
  return (
    <div className="flex">
      <Canvas />
      <aside>
        <IntegrationsPanel
          onImport={(item) => {
            // Handle imported item from any service
            canvas.addElement(item)
          }}
          services={['svg', 'emoji', 'sheets', 'docs']}
        />
      </aside>
    </div>
  )
}

// Panel features:
// - Tabbed interface for each service
// - Search functionality
// - Drag to import
// - Recent items
// - Favorites

// All services share a consistent API pattern

// Base URLs
const SERVICES = {
  svg: 'https://svg.platphormnews.com/api/v1',
  docs: 'https://docs.platphormnews.com/api/v1',
  sheets: 'https://sheets.platphormnews.com/api/v1',
  emoji: 'https://emoji.platphormnews.com/api/v1',
  phorm: 'https://phorm.platphormnews.com/api/v1',
}

// Shared authentication
const headers = {
  'Content-Type': 'application/json',
  'X-PlatPhorm-API-Key': process.env.PLATPHORM_API_KEY,
  'X-Source': 'platphorm-design',
}

// Example: Search SVGs
const svgs = await fetch(`${SERVICES.svg}/search?q=arrow&limit=20`, {
  headers
}).then(r => r.json())

// Example: Get sheet data
const data = await fetch(`${SERVICES.sheets}/sheets/sheet_123/data`, {
  headers
}).then(r => r.json())

// Example: Submit to docs
const doc = await fetch(`${SERVICES.docs}/designs`, {
  method: 'POST',
  headers,
  body: JSON.stringify({ design, context })
}).then(r => r.json())

// Network services expose MCP tools

// SVG Service MCP Tools
await mcp.call('svg_search', { query: 'arrow', limit: 10 })
await mcp.call('svg_import', { svgId: 'svg_123', designId: 'design_456' })

// Sheets Service MCP Tools
await mcp.call('data_fetch', { sheetId: 'sheet_123', range: 'A1:D10' })
await mcp.call('data_bind', { 
  designId: 'design_456',
  elementId: 'text_789',
  sheetId: 'sheet_123',
  cell: 'B2'
})

// Docs Service MCP Tools
await mcp.call('doc_create', { design, name: 'My Design' })
await mcp.call('doc_publish', { docId: 'doc_123', visibility: 'public' })

// Emoji Service MCP Tools
await mcp.call('emoji_search', { query: 'smile' })
await mcp.call('emoji_insert', { emoji: '😀', designId: 'design_456' })

// Subscribe to events from other services

// When a design is published to Docs
{
  "type": "docs.design.published",
  "data": {
    "docId": "doc_123",
    "designId": "design_456",
    "url": "https://docs.platphormnews.com/submissions/doc_123"
  }
}

// When sheet data changes (for bound elements)
{
  "type": "sheets.data.updated",
  "data": {
    "sheetId": "sheet_123",
    "range": "B2",
    "newValue": "Updated Title",
    "boundElements": ["text_789"]
  }
}

// When an SVG is favorited
{
  "type": "svg.favorited",
  "data": {
    "svgId": "svg_123",
    "userId": "user_456"
  }
}