drafted 1.7.16 → 1.7.18

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "drafted",
-  "version": "1.7.16",
+  "version": "1.7.18",
   "description": "Drafted — visual thinking surface for humans and AI agents. Renders HTML, markdown, images, and code as frames on a zoomable canvas, with MCP tools for AI agents and real-time sync for humans.",
   "type": "module",
   "files": [
     "cli/",
     "mcp/",
     "src/shared/",
+    "agent-instructions/",
     "install-mcp.sh"
   ],
   "bin": {
@@ -15,7 +16,7 @@
   },
   "scripts": {
     "dev": "./dev.sh",
-    "dev:server": "tsx watch server/server.mjs",
+    "dev:server": "tsx watch --import ./server/instrument.mjs server/server.mjs",
     "dev:local": "node server/server-local.mjs",
     "install-global": "npm install -g .",
     "db:migrate": "psql $DATABASE_URL -f drizzle/migrate.sql",
@@ -28,7 +29,9 @@
     "test:watch": "vitest",
     "version": "node scripts/sync-versions.mjs && git add plugin/.claude-plugin/plugin.json .claude-plugin/marketplace.json",
     "version:check": "node scripts/sync-versions.mjs",
-    "postpublish": "bash scripts/sync-plugin.sh \"chore: sync plugin to v$npm_package_version\""
+    "postpublish": "bash scripts/sync-plugin.sh \"chore: sync plugin to v$npm_package_version\"",
+    "deploy:check:google": "node scripts/check-google-drive-deploy.mjs",
+    "build:excalidraw": "node scripts/build-excalidraw-editor.mjs"
   },
   "dependencies": {
     "@aws-sdk/client-s3": "^3.1007.0",
@@ -36,13 +39,20 @@
     "@clerk/backend": "^3.2.12",
     "@clerk/express": "^2.1.4",
     "@clerk/mcp-tools": "^0.3.1",
+    "@excalidraw/excalidraw": "^0.18.1",
+    "@excalidraw/mermaid-to-excalidraw": "^2.2.2",
     "@modelcontextprotocol/ext-apps": "^1.6.0",
     "@modelcontextprotocol/sdk": "^1.27.1",
+    "@sentry/browser": "^10.53.1",
+    "@sentry/node": "^10.53.1",
     "commander": "^11.1.0",
     "dagre": "^0.8.5",
     "dotenv": "^17.3.1",
     "drizzle-orm": "^0.45.1",
+    "esbuild": "^0.28.0",
     "express": "^4.18.2",
+    "jsdom": "^27.0.1",
+    "lucide": "^1.16.0",
     "mdast-util-from-markdown": "^2.0.3",
     "multer": "^2.1.1",
     "nodemailer": "^8.0.2",
@@ -50,6 +60,8 @@
     "playwright": "^1.58.2",
     "puppeteer": "^24.37.5",
     "qrcode-terminal": "^0.12.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "sharp": "^0.34.5",
     "ws": "^8.16.0",
     "zod": "^4.3.6"

package/src/shared/constants.mjs

@@ -12,22 +12,24 @@ import { extname } from 'path';
 // Layer definitions — default creative pipeline for projects without templates.
 // research → requirements → plans → drafts → designs → reviews
 export const LAYERS = {
-  'research': { label: 'Research', type: 'document', width: 800, height: 1000 },
-  'requirements': { label: 'Requirements', type: 'document', width: 800, height: 1000 },
-  'plans': { label: 'Plans', type: 'document', width: 800, height: 1000 },
+  'research': { label: 'Research', type: 'document', width: 794, height: 1123 },
+  'requirements': { label: 'Requirements', type: 'document', width: 794, height: 1123 },
+  'plans': { label: 'Plans', type: 'document', width: 794, height: 1123 },
   'drafts': { label: 'Drafts', type: 'wireframe', width: 1200, height: 800 },
   'designs': { label: 'Designs', type: 'design', width: 1440, height: 900 },
-  'reviews': { label: 'Reviews', type: 'document', width: 800, height: 1000 },
+  'reviews': { label: 'Reviews', type: 'document', width: 794, height: 1123 },
 };
 
 // File extensions recognized per layer
 export const DESIGN_EXTENSIONS = new Set(['.html', '.htm']);
 export const DOC_EXTENSIONS = new Set(['.md', '.txt']);
-export const ASSET_EXTENSIONS = new Set(['.png', '.jpg', '.jpeg', '.gif', '.webp', '.svg', '.pdf']);
+export const EXCALIDRAW_EXTENSIONS = new Set(['.excalidraw']);
+export const ASSET_EXTENSIONS = new Set(['.png', '.jpg', '.jpeg', '.gif', '.webp', '.svg', '.pdf', '.mp4', '.webm', '.mov', '.m4v']);
 
 export function getFileType(filePath, layer) {
   const ext = extname(filePath).toLowerCase();
   if (ASSET_EXTENSIONS.has(ext) || layer === 'brand-assets') return 'asset';
   if (DOC_EXTENSIONS.has(ext)) return 'document';
+  if (EXCALIDRAW_EXTENSIONS.has(ext)) return 'excalidraw';
   return LAYERS[layer]?.type || 'design';
 }

package/src/shared/excalidraw.mjs

@@ -0,0 +1,101 @@
+export const EXCALIDRAW_MIME = 'application/vnd.excalidraw+json';
+
+export function emptyExcalidrawScene() {
+  return {
+    type: 'excalidraw',
+    version: 2,
+    source: 'https://drafted.live',
+    elements: [],
+    appState: {},
+    files: {},
+  };
+}
+
+export function normalizeExcalidrawScene(input) {
+  const scene = typeof input === 'string' ? JSON.parse(input) : input;
+  if (!scene || typeof scene !== 'object' || Array.isArray(scene)) {
+    throw new Error('Excalidraw data must be an object');
+  }
+  if (!Array.isArray(scene.elements)) {
+    throw new Error('Excalidraw data must include elements array');
+  }
+  const appState = scene.appState && typeof scene.appState === 'object' && !Array.isArray(scene.appState)
+    ? scene.appState
+    : {};
+  const files = scene.files && typeof scene.files === 'object' && !Array.isArray(scene.files)
+    ? scene.files
+    : {};
+  return {
+    type: scene.type || 'excalidraw',
+    version: scene.version || 2,
+    source: scene.source || 'https://drafted.live',
+    elements: scene.elements,
+    appState,
+    files,
+  };
+}
+
+export function stringifyExcalidrawScene(input) {
+  return JSON.stringify(normalizeExcalidrawScene(input), null, 2);
+}
+
+function restoreMermaidDom(previous, dom) {
+  for (const [key, value] of Object.entries(previous)) {
+    if (value === undefined) {
+      try { delete globalThis[key]; } catch {}
+    } else if (key === 'navigator') {
+      Object.defineProperty(globalThis, 'navigator', { value, configurable: true });
+    } else {
+      globalThis[key] = value;
+    }
+  }
+  if (dom) dom.window.close();
+}
+
+export async function excalidrawSceneFromMermaid(mermaid) {
+  let dom;
+  const previous = {
+    window: globalThis.window,
+    document: globalThis.document,
+    DOMParser: globalThis.DOMParser,
+    XMLSerializer: globalThis.XMLSerializer,
+    Element: globalThis.Element,
+    SVGElement: globalThis.SVGElement,
+    navigator: globalThis.navigator,
+    CSSStyleSheet: globalThis.CSSStyleSheet,
+  };
+  try {
+    if (typeof document === 'undefined') {
+      const { JSDOM } = await import('jsdom');
+      dom = new JSDOM('<!doctype html><html><body></body></html>');
+      globalThis.window = dom.window;
+      globalThis.document = dom.window.document;
+      globalThis.DOMParser = dom.window.DOMParser;
+      globalThis.XMLSerializer = dom.window.XMLSerializer;
+      globalThis.Element = dom.window.Element;
+      globalThis.SVGElement = dom.window.SVGElement;
+      if (globalThis.SVGElement && !globalThis.SVGElement.prototype.getBBox) {
+        globalThis.SVGElement.prototype.getBBox = function () {
+          const text = this.textContent || '';
+          return { x: 0, y: 0, width: Math.max(24, text.length * 8), height: 20 };
+        };
+      }
+      Object.defineProperty(globalThis, 'navigator', { value: dom.window.navigator, configurable: true });
+      globalThis.CSSStyleSheet = class {
+        constructor() { this.cssRules = []; }
+        replaceSync() { this.cssRules = []; }
+        insertRule(rule) { this.cssRules.push({ cssText: rule }); }
+      };
+    }
+    const { parseMermaidToExcalidraw } = await import('@excalidraw/mermaid-to-excalidraw');
+    const result = await parseMermaidToExcalidraw(mermaid);
+    return {
+      ...emptyExcalidrawScene(),
+      elements: result.elements || [],
+      files: result.files || {},
+      appState: { viewBackgroundColor: '#ffffff' },
+    };
+  } finally {
+    if (dom) restoreMermaidDom(previous, dom);
+  }
+}