@abraca/mcp 1.0.21 → 1.0.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abraca/mcp",
-  "version": "1.0.21",
+  "version": "1.0.25",
   "description": "MCP server for Abracadabra — AI agent collaboration on CRDT documents",
   "license": "MIT",
   "type": "module",

package/src/converters/markdownToYjs.ts

@@ -248,6 +248,7 @@ type Block =
   | { type: 'fieldGroup'; fields: Block[] }
   | { type: 'image'; src: string; alt: string; width?: string; height?: string }
   | { type: 'docEmbed'; docId: string }
+  | { type: 'svgEmbed'; svg: string; title: string }
 
 function parseTableRow(line: string): string[] {
   const parts = line.split('|')
@@ -359,7 +360,12 @@ function parseBlocks(markdown: string): Block[] {
         i++
       }
       i++
-      blocks.push({ type: 'codeBlock', lang, code: codeLines.join('\n') })
+      if (lang === 'svg' || lang.startsWith('svg ')) {
+        const svgTitle = lang === 'svg' ? '' : lang.slice(4).trim()
+        blocks.push({ type: 'svgEmbed', svg: codeLines.join('\n'), title: svgTitle })
+      } else {
+        blocks.push({ type: 'codeBlock', lang, code: codeLines.join('\n') })
+      }
       continue
     }
 
@@ -635,6 +641,7 @@ function blockElName(b: Block): string {
     case 'fieldGroup': return 'fieldGroup'
     case 'image': return 'image'
     case 'docEmbed': return 'docEmbed'
+    case 'svgEmbed': return 'svgEmbed'
   }
 }
 
@@ -832,6 +839,11 @@ function fillBlock(el: Y.XmlElement, block: Block): void {
       el.setAttribute('docId', block.docId)
       break
     }
+    case 'svgEmbed': {
+      el.setAttribute('svg', block.svg)
+      if (block.title) el.setAttribute('title', block.title)
+      break
+    }
   }
 }
 
@@ -888,6 +900,7 @@ export function populateYDocFromMarkdown(
         case 'fieldGroup': return new Y.XmlElement('fieldGroup')
         case 'image': return new Y.XmlElement('image')
         case 'docEmbed': return new Y.XmlElement('docEmbed')
+        case 'svgEmbed': return new Y.XmlElement('svgEmbed')
       }
     })
 

package/src/converters/yjsToMarkdown.ts

@@ -100,6 +100,13 @@ function serializeElement(el: Y.XmlElement, indent = ''): string {
       return docId ? `![[${docId}]]` : ''
     }
 
+    case 'svgEmbed': {
+      const svg = el.getAttribute('svg') || ''
+      const svgTitle = el.getAttribute('title') || ''
+      if (!svg) return ''
+      return `\`\`\`svg${svgTitle ? ` ${svgTitle}` : ''}\n${svg}\n\`\`\``
+    }
+
     case 'image': {
       const src = el.getAttribute('src') || ''
       const alt = el.getAttribute('alt') || ''

package/src/index.ts

@@ -18,6 +18,7 @@ import { registerMetaTools } from './tools/meta.ts'
 import { registerFileTools } from './tools/files.ts'
 import { registerAwarenessTools } from './tools/awareness.ts'
 import { registerChannelTools } from './tools/channel.ts'
+import { registerSvgTools } from './tools/svg.ts'
 import { registerAgentGuide } from './resources/agent-guide.ts'
 import { registerTreeResource } from './resources/tree-resource.ts'
 import { registerServerInfoResource } from './resources/server-info.ts'
@@ -91,6 +92,7 @@ Read the resource at abracadabra://agent-guide for the complete guide covering p
   registerFileTools(mcp, server)
   registerAwarenessTools(mcp, server)
   registerChannelTools(mcp, server)
+  registerSvgTools(mcp, server)
 
   // Register resources
   registerAgentGuide(mcp)

package/src/tools/svg.ts

@@ -0,0 +1,83 @@
+/**
+ * SVG tools — insert SVG diagrams/images into documents via Y.js.
+ */
+import * as Y from 'yjs'
+import type { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js'
+import { z } from 'zod'
+import type { AbracadabraMCPServer } from '../server.ts'
+import { sanitizeSvg } from '../utils/sanitizeSvg.ts'
+
+/**
+ * Find the insertion index after documentHeader and documentMeta elements.
+ */
+function findContentStart(fragment: Y.XmlFragment): number {
+  let idx = 0
+  for (let i = 0; i < fragment.length; i++) {
+    const child = fragment.get(i)
+    if (child instanceof Y.XmlElement) {
+      const name = child.nodeName
+      if (name === 'documentHeader' || name === 'documentMeta') {
+        idx = i + 1
+      } else {
+        break
+      }
+    }
+  }
+  return idx
+}
+
+export function registerSvgTools(mcp: McpServer, server: AbracadabraMCPServer) {
+  mcp.tool(
+    'write_svg',
+    'Insert an SVG diagram or image into a document. Creates an svgEmbed block node containing the SVG markup. Use this for diagrams, charts, flowcharts, illustrations, icons, or any visual content expressed as SVG. The SVG is sanitized server-side before writing.',
+    {
+      docId: z.string().describe('Document ID to write SVG into.'),
+      svg: z.string().describe('Raw SVG markup string (the full <svg>...</svg> element). Will be sanitized.'),
+      title: z.string().optional().describe('Optional title/caption displayed above the SVG.'),
+      position: z.enum(['append', 'prepend']).optional().describe('Where to insert the SVG block. "append" adds at the end (default), "prepend" adds at the start of content.'),
+    },
+    async ({ docId, svg, title, position }) => {
+      try {
+        server.setAutoStatus('writing', docId)
+        server.setActiveToolCall({ name: 'write_svg', target: docId })
+
+        const cleanSvg = sanitizeSvg(svg)
+        if (!cleanSvg) {
+          server.setActiveToolCall(null)
+          return {
+            content: [{ type: 'text', text: 'Error: SVG markup was empty or entirely stripped by sanitizer.' }],
+            isError: true,
+          }
+        }
+
+        const provider = await server.getChildProvider(docId)
+        const doc = provider.document
+        const fragment = doc.getXmlFragment('default')
+
+        doc.transact(() => {
+          const el = new Y.XmlElement('svgEmbed')
+          el.setAttribute('svg', cleanSvg)
+          if (title) el.setAttribute('title', title)
+
+          const insertPos = position === 'prepend'
+            ? findContentStart(fragment)
+            : fragment.length
+          fragment.insert(insertPos, [el])
+        })
+
+        server.setFocusedDoc(docId)
+        server.setActiveToolCall(null)
+
+        return {
+          content: [{ type: 'text', text: `SVG inserted into document ${docId}${title ? ` ("${title}")` : ''}` }],
+        }
+      } catch (error: any) {
+        server.setActiveToolCall(null)
+        return {
+          content: [{ type: 'text', text: `Error writing SVG: ${error.message}` }],
+          isError: true,
+        }
+      }
+    }
+  )
+}

package/src/utils/sanitizeSvg.ts

@@ -0,0 +1,71 @@
+/**
+ * Lightweight SVG sanitizer for server-side use (no DOM dependency).
+ * Strips dangerous elements and attributes from SVG markup using allowlists.
+ */
+
+const ALLOWED_ELEMENTS = new Set([
+  'svg', 'g', 'path', 'circle', 'ellipse', 'rect', 'line', 'polyline',
+  'polygon', 'text', 'tspan', 'textPath', 'defs', 'use', 'symbol',
+  'clipPath', 'mask', 'pattern', 'linearGradient', 'radialGradient', 'stop',
+  'marker', 'image', 'title', 'desc', 'metadata',
+  'animate', 'animateTransform', 'animateMotion', 'set',
+  'filter', 'feGaussianBlur', 'feOffset', 'feMerge', 'feMergeNode',
+  'feFlood', 'feComposite', 'feBlend', 'feColorMatrix', 'feComponentTransfer',
+  'feFuncR', 'feFuncG', 'feFuncB', 'feFuncA', 'feConvolveMatrix',
+  'feDiffuseLighting', 'feDisplacementMap', 'feDropShadow', 'feImage',
+  'feMorphology', 'fePointLight', 'feSpecularLighting', 'feSpotLight',
+  'feTile', 'feTurbulence',
+])
+
+const FORBIDDEN_ELEMENTS = new Set([
+  'script', 'foreignObject', 'iframe', 'object', 'embed', 'applet',
+])
+
+/** Matches event handler attributes: on* */
+const EVENT_HANDLER_RE = /\bon\w+\s*=/gi
+
+/** Matches javascript: URLs in href/xlink:href */
+const JS_URL_RE = /(href\s*=\s*["'])\s*javascript:/gi
+
+/** Matches a full element tag (opening or self-closing) */
+const TAG_RE = /<\/?([a-zA-Z][a-zA-Z0-9-]*)((?:\s[^>]*)?)>/g
+
+/** Matches complete forbidden element blocks including content */
+function stripForbiddenBlocks(svg: string): string {
+  for (const tag of FORBIDDEN_ELEMENTS) {
+    // Strip both <tag>...</tag> and self-closing <tag ... />
+    const blockRe = new RegExp(`<${tag}[\\s>][\\s\\S]*?</${tag}>`, 'gi')
+    svg = svg.replace(blockRe, '')
+    const selfCloseRe = new RegExp(`<${tag}[\\s/][^>]*/?>`, 'gi')
+    svg = svg.replace(selfCloseRe, '')
+  }
+  return svg
+}
+
+/**
+ * Sanitize SVG markup by removing dangerous elements and attributes.
+ * Uses an allowlist approach — only known-safe SVG elements are kept.
+ */
+export function sanitizeSvg(svg: string): string {
+  if (!svg) return ''
+
+  // 1. Strip forbidden element blocks (script, foreignObject, etc.)
+  let clean = stripForbiddenBlocks(svg)
+
+  // 2. Strip event handler attributes
+  clean = clean.replace(EVENT_HANDLER_RE, '')
+
+  // 3. Strip javascript: URLs
+  clean = clean.replace(JS_URL_RE, '$1')
+
+  // 4. Remove any elements not in the allowlist
+  clean = clean.replace(TAG_RE, (match, tagName: string) => {
+    const lower = tagName.toLowerCase()
+    if (ALLOWED_ELEMENTS.has(lower) || ALLOWED_ELEMENTS.has(tagName)) {
+      return match
+    }
+    return ''
+  })
+
+  return clean.trim()
+}