feat: restructure into XFlow monorepo with Nuxt 4, Modular Onion Monolith, Android client, and Desktop CLI

apps/web/app/composables/useCanvas.ts

@@ -0,0 +1,116 @@
+import MarkdownIt from 'markdown-it'
+
+export interface CanvasNode {
+  id: string
+  type: string
+  x: number
+  y: number
+  width: number
+  height: number
+  text?: string
+  file?: string
+  frontmatter?: Record<string, any>
+  state?: 'pending' | 'in_progress' | 'completed'
+  style?: Record<string, string>
+}
+
+export interface CanvasEdge {
+  id: string
+  fromNode: string
+  fromSide: string
+  toNode: string
+  toSide: string
+}
+
+export interface CanvasData {
+  id?: string
+  name?: string
+  nodes: CanvasNode[]
+  edges: CanvasEdge[]
+}
+
+export const useCanvas = () => {
+  const md = new MarkdownIt({
+    html: false,
+    linkify: true,
+    typographer: true
+  })
+
+  const renderMarkdown = (text: string): string => {
+    return md.render(text || '')
+  }
+
+  const parseCanvasJson = (json: any): CanvasData => {
+    if (!json) return { nodes: [], edges: [] }
+    const nodes = (json.nodes || []).map((n: any) => ({
+      id: n.id,
+      type: n.type,
+      x: n.x,
+      y: n.y,
+      width: n.width || 300,
+      height: n.height || 200,
+      text: n.text,
+      label: n.label,
+      file: n.file,
+      frontmatter: n.frontmatter,
+      state: n.state || 'pending',
+      priority: n.priority,
+      assigned_to: n.assigned_to,
+      alarm: n.alarm,
+      script_id: n.script_id,
+      prompt: n.prompt,
+      url: n.url,
+      method: n.method,
+      repo: n.repo,
+      branch: n.branch,
+      message: n.message,
+      style: n.style || {}
+    }))
+
+    const edges = (json.edges || []).map((e: any) => ({
+      id: e.id,
+      fromNode: e.fromNode || e.source,
+      fromSide: e.fromSide || 'right',
+      toNode: e.toNode || e.target,
+      toSide: e.toSide || 'left'
+    }))
+
+    return { 
+      id: json.id,
+      name: json.name,
+      nodes, 
+      edges 
+    }
+  }
+
+  const getAuthHeaders = (): Record<string, string> => {
+    const auth = useAuth()
+    const token = auth.token?.value
+    return token ? { Authorization: `Bearer ${token}` } : {}
+  }
+
+  const loadCanvas = async (id: string): Promise<{ canvas: CanvasData, role: string }> => {
+    const data = await $fetch<{ canvas: any, role: string }>(`/api/canvas/${id}`, {
+      headers: getAuthHeaders()
+    })
+    return {
+      canvas: parseCanvasJson(data.canvas),
+      role: data.role
+    }
+  }
+
+  const updateNodeState = async (nodeId: string, state: string) => {
+    return await $fetch(`/api/nodes/${nodeId}`, {
+      method: 'PUT',
+      headers: getAuthHeaders(),
+      body: { state }
+    })
+  }
+
+  return {
+    renderMarkdown,
+    parseCanvasJson,
+    loadCanvas,
+    updateNodeState
+  }
+}