drafted 1.1.0 → 1.1.1

package/install-mcp.sh

@@ -0,0 +1,192 @@
+#!/bin/bash
+set -e
+
+# Drafted — Design workspace for AI agents
+# This script installs the Drafted MCP server and CLI globally via npm,
+# then registers it with Claude Desktop, Claude Code, and Cursor.
+#
+# Run with:
+#   curl -fsSL https://drafted.live/install.sh | bash
+
+SERVER="https://drafted.live"
+
+BOLD="\033[1m"
+DIM="\033[2m"
+GREEN="\033[32m"
+YELLOW="\033[33m"
+RED="\033[31m"
+CYAN="\033[36m"
+RESET="\033[0m"
+
+step=0
+step() {
+  step=$((step + 1))
+  echo ""
+  echo -e "${CYAN}[$step]${RESET} ${BOLD}$1${RESET}"
+}
+
+ok() {
+  echo -e "    ${GREEN}✓${RESET} $1"
+}
+
+fail() {
+  echo -e "    ${RED}✗${RESET} $1"
+}
+
+# ── Welcome ───────────────────────────────────────────────────────
+
+echo ""
+echo -e "${BOLD}Welcome to Drafted${RESET}"
+echo -e "This will set up Drafted so Claude can create designs for you."
+echo -e "It only takes a minute."
+
+# ── Prerequisites ─────────────────────────────────────────────────
+
+step "Checking your system"
+
+# Node.js
+if command -v node &>/dev/null; then
+  NODE_VERSION=$(node -v | sed 's/v//' | cut -d. -f1)
+  if [ "$NODE_VERSION" -lt 22 ]; then
+    fail "Node.js is too old (found $(node -v), need 22+)."
+    echo ""
+    echo -e "    Update it by running:  ${BOLD}brew upgrade node${RESET}"
+    echo -e "    Then re-run this installer."
+    exit 1
+  fi
+  ok "Node.js $(node -v)"
+else
+  fail "Node.js is not installed."
+  echo ""
+  if command -v brew &>/dev/null; then
+    echo -e "    Install it by running:  ${BOLD}brew install node${RESET}"
+  else
+    echo -e "    Download it from:  ${BOLD}https://nodejs.org${RESET}"
+  fi
+  echo -e "    Then re-run this installer."
+  exit 1
+fi
+
+# ── Install ───────────────────────────────────────────────────────
+
+step "Installing Drafted"
+
+npm install -g drafted@latest --silent 2>/dev/null
+ok "Installed $(drafted --version 2>/dev/null || echo 'drafted') via npm"
+
+# ── Configure ─────────────────────────────────────────────────────
+
+step "Connecting to your tools"
+
+# Write server URL config
+mkdir -p "$HOME/.drafted"
+echo "{\"server\":\"$SERVER\"}" > "$HOME/.drafted/config.json"
+ok "Server: $SERVER"
+
+# Resolve the installed binary path for MCP configs
+DRAFTED_MCP_BIN="$(which drafted-mcp 2>/dev/null || echo "drafted-mcp")"
+
+configure_mcp() {
+  local config_path="$1"
+  local label="$2"
+  local config_dir
+  config_dir="$(dirname "$config_path")"
+  mkdir -p "$config_dir"
+
+  node -e "
+    const fs = require('fs');
+    const p = process.argv[1];
+    let c = {};
+    try { c = JSON.parse(fs.readFileSync(p, 'utf8')); } catch {}
+    if (!c.mcpServers) c.mcpServers = {};
+    c.mcpServers.drafted = {
+      command: 'drafted-mcp',
+      args: []
+    };
+    fs.writeFileSync(p, JSON.stringify(c, null, 2) + '\n');
+  " "$config_path"
+  ok "$label"
+}
+
+CLAUDE_DESKTOP_CONFIG="$HOME/Library/Application Support/Claude/claude_desktop_config.json"
+CLAUDE_CODE_CONFIG="$HOME/.claude.json"
+CURSOR_CONFIG="$HOME/.cursor/mcp.json"
+
+CONFIGURED=false
+
+# Claude Desktop
+if [ -d "/Applications/Claude.app" ] || [ -d "$HOME/Applications/Claude.app" ]; then
+  configure_mcp "$CLAUDE_DESKTOP_CONFIG" "Claude Desktop"
+  CONFIGURED=true
+fi
+
+# Claude Code
+if command -v claude &>/dev/null; then
+  configure_mcp "$CLAUDE_CODE_CONFIG" "Claude Code"
+  CONFIGURED=true
+fi
+
+# Cursor
+if [ -d "/Applications/Cursor.app" ] || [ -d "$HOME/Applications/Cursor.app" ] || command -v cursor &>/dev/null; then
+  configure_mcp "$CURSOR_CONFIG" "Cursor"
+  CONFIGURED=true
+fi
+
+# If nothing detected, pre-configure all
+if [ "$CONFIGURED" = false ]; then
+  echo -e "    ${YELLOW}No supported editors detected — pre-configuring all.${RESET}"
+  configure_mcp "$CLAUDE_DESKTOP_CONFIG" "Claude Desktop (pre-configured)"
+  configure_mcp "$CLAUDE_CODE_CONFIG" "Claude Code (pre-configured)"
+  configure_mcp "$CURSOR_CONFIG" "Cursor (pre-configured)"
+fi
+
+# ── Skills ───────────────────────────────────────────────────────
+
+step "Installing skills"
+
+# Find the installed package's skills directory
+DRAFTED_PKG_DIR="$(node -e "try { console.log(require.resolve('drafted/package.json').replace('/package.json','')) } catch { process.exit(1) }" 2>/dev/null)" || true
+
+if [ -n "$DRAFTED_PKG_DIR" ] && [ -d "$DRAFTED_PKG_DIR/skills" ]; then
+  SKILLS_DIR="$HOME/.claude/skills"
+  mkdir -p "$SKILLS_DIR"
+  INSTALLED=0
+  # Copy individual skill files
+  for f in "$DRAFTED_PKG_DIR/skills/"*.md; do
+    [ -f "$f" ] || continue
+    cp "$f" "$SKILLS_DIR/"
+    INSTALLED=$((INSTALLED + 1))
+  done
+  # Copy skill directories
+  for d in "$DRAFTED_PKG_DIR/skills/"*/; do
+    [ -d "$d" ] || continue
+    DIRNAME="$(basename "$d")"
+    rm -rf "$SKILLS_DIR/$DIRNAME"
+    cp -r "$d" "$SKILLS_DIR/$DIRNAME"
+    INSTALLED=$((INSTALLED + 1))
+  done
+  ok "Installed $INSTALLED skills to $SKILLS_DIR"
+else
+  echo -e "    ${YELLOW}Skills directory not found in package — skipping.${RESET}"
+fi
+
+# ── Done ─────────────────────────────────────────────────────────
+
+echo ""
+echo ""
+echo -e "${GREEN}${BOLD}You're all set!${RESET}"
+echo ""
+echo -e "  ${DIM}View your designs at:${RESET}  ${BOLD}https://drafted.live${RESET}"
+echo -e "  ${DIM}To update:${RESET}     npm install -g drafted@latest"
+echo -e "  ${DIM}To uninstall:${RESET}  npm uninstall -g drafted && rm -rf ~/.drafted"
+echo ""
+echo -e "${YELLOW}${BOLD}"
+echo "  ┌─────────────────────────────────────────────────────────┐"
+echo "  │                                                         │"
+echo "  │   >>>  RESTART YOUR EDITOR TO ACTIVATE DRAFTED  <<<     │"
+echo "  │                                                         │"
+echo "  │   Close and reopen Claude Desktop, Claude Code,         │"
+echo "  │   or Cursor so it picks up the new MCP server.          │"
+echo "  │                                                         │"
+echo "  └─────────────────────────────────────────────────────────┘"
+echo -e "${RESET}"

package/mcp/server.mjs

@@ -14,18 +14,18 @@ import { join, dirname, basename, extname, resolve } from 'path';
 import { homedir } from 'os';
 import { fileURLToPath } from 'url';
 import { z } from 'zod';
-import { LAYERS } from '../shared/constants.mjs';
+import { LAYERS } from '../src/shared/constants.mjs';
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 
 const server = new McpServer({
   name: 'drafted',
-  version: '2.3.0',
+  version: '2.4.0',
   description: `Multi-tenant design workspace. Structure: Organization → Projects → Layers → Lanes → Frames.
 
 An org contains projects. Each project has a zoomable canvas with frames (HTML files) organized as /{layer}/{lane}/{filename}. Layers are predefined categories (wireframes, designs, brand-assets, etc.), lanes are groups within a layer, and frames are the individual design files.
 
-WORKFLOW: list_projects → open_project → ls / → read/write/edit. Every response includes a "project" field showing which project you're operating on — always verify it matches your intent before writing.
+WORKFLOW: list_projects → open_project → ls / → read/write/edit. Projects span all orgs -- open_project auto-switches org context. Every response includes a "project" field showing which project you're operating on -- always verify it matches your intent before writing.
 
 IMPORTANT: Any URL containing /f/{uuid} is a Drafted frame link — ALWAYS use read(path=URL) to get frame content, focus(target=URL) to pan the canvas to it. Never curl or WebFetch Drafted URLs.`,
 });
@@ -95,6 +95,16 @@ async function ensureSession() {
   await cloneSession();
 }
 
+const MIME_MAP = {
+  '.css': 'text/css', '.js': 'application/javascript', '.mjs': 'application/javascript',
+  '.json': 'application/json', '.html': 'text/html', '.htm': 'text/html',
+  '.svg': 'image/svg+xml', '.png': 'image/png', '.jpg': 'image/jpeg', '.jpeg': 'image/jpeg',
+  '.gif': 'image/gif', '.webp': 'image/webp', '.ico': 'image/x-icon',
+  '.woff': 'font/woff', '.woff2': 'font/woff2', '.ttf': 'font/ttf', '.otf': 'font/otf', '.eot': 'application/vnd.ms-fontobject',
+  '.pdf': 'application/pdf', '.mp4': 'video/mp4', '.webm': 'video/webm',
+};
+function mimeFromExt(ext) { return MIME_MAP[ext?.toLowerCase()] || 'application/octet-stream'; }
+
 async function api(method, path, body, _retried) {
   await ensureSession();
   const pid = agentActiveProjectId;
@@ -370,7 +380,7 @@ server.tool('login', 'Authenticate with Drafted. Opens a browser for the user to
 
 // ── Project management tools (direct HTTP) ────────────────────────
 
-server.tool('list_projects', 'START HERE. Lists all projects in the org. Use this first to find the project you need, then open_project to switch to it.', {}, async () => {
+server.tool('list_projects', 'START HERE. Lists all projects across all orgs. Use this first to find the project you need, then open_project to switch to it (org switches automatically).', {}, async () => {
   try {
     const data = await api('GET', '/api/projects');
     data.agentProject = agentActiveProjectId || null;
@@ -460,10 +470,19 @@ server.tool('open_project', 'Switch active project. REQUIRED before reading or w
       if (proj?.slug) projectSlug = proj.slug;
     } catch { /* fall back to projectId */ }
     const url = `${base}/project/${projectSlug}`;
-    const { exec } = await import('child_process');
-    const cmd = process.platform === 'darwin' ? 'open' : process.platform === 'win32' ? 'start' : 'xdg-open';
-    exec(`${cmd} ${JSON.stringify(url)}`);
-    return ok({ ...result, url, opened: true });
+    // Navigate existing browser tabs instead of opening new ones
+    let navigated = 0;
+    try {
+      const nav = await api('POST', '/api/project/navigate', { projectId });
+      navigated = nav.navigated || 0;
+    } catch { /* server may not support navigate yet */ }
+    // Only open a new tab if no browser tabs were reached
+    if (navigated === 0) {
+      const { exec } = await import('child_process');
+      const cmd = process.platform === 'darwin' ? 'open' : process.platform === 'win32' ? 'start' : 'xdg-open';
+      exec(`${cmd} ${JSON.stringify(url)}`);
+    }
+    return ok({ ...result, url, opened: true, navigated });
   } catch (error) { return err(error); }
 });
 
@@ -733,13 +752,20 @@ server.tool('write', 'Write a frame to the ACTIVE PROJECT. Check the "project" f
 
     let body;
     if (file_path) {
-      // Binary upload: read file from disk, send as base64
       const resolved = resolve(file_path);
       if (!existsSync(resolved)) throw new Error(`File not found: ${resolved}`);
-      const buffer = readFileSync(resolved);
       const ext = extname(resolved).toLowerCase();
-      const MIME = { '.png': 'image/png', '.jpg': 'image/jpeg', '.jpeg': 'image/jpeg', '.gif': 'image/gif', '.webp': 'image/webp', '.svg': 'image/svg+xml', '.pdf': 'application/pdf' };
-      body = { base64: buffer.toString('base64'), contentType: MIME[ext] || 'application/octet-stream' };
+      const TEXT_EXTS = ['.html', '.htm', '.svg', '.md', '.markdown', '.txt', '.css', '.js', '.mjs', '.json', '.xml'];
+      if (TEXT_EXTS.includes(ext)) {
+        // Text file: read as content so it's stored inline (enables base tag injection for HTML)
+        body = { content: readFileSync(resolved, 'utf8') };
+        if (autoSize) body.autoSize = true;
+      } else {
+        // Binary upload: read file from disk, send as base64
+        const buffer = readFileSync(resolved);
+        const MIME = { '.png': 'image/png', '.jpg': 'image/jpeg', '.jpeg': 'image/jpeg', '.gif': 'image/gif', '.webp': 'image/webp', '.pdf': 'application/pdf' };
+        body = { base64: buffer.toString('base64'), contentType: MIME[ext] || 'application/octet-stream' };
+      }
     } else {
       body = { content };
       if (autoSize) body.autoSize = true;
@@ -853,10 +879,10 @@ server.tool('mv', 'Move/rename a frame within the ACTIVE PROJECT. Response inclu
 
 server.tool('batch', 'Batch operations on the ACTIVE PROJECT. Response includes "project" field. Use open_project first if needed.', {
   operations: z.array(z.object({
-    tool: z.enum(['write', 'rm', 'mv', 'edit']).describe('Tool to execute'),
+    tool: z.enum(['write', 'rm', 'mv', 'edit', 'upload_asset']).describe('Tool to execute'),
     path: z.string().optional().describe('Path (for write, rm, edit)'),
     content: z.string().optional().describe('Content (for write). Mutually exclusive with file_path.'),
-    file_path: z.string().optional().describe('Absolute path to a local file to upload (for write). Mutually exclusive with content.'),
+    file_path: z.string().optional().describe('Absolute path to a local file to upload (for write, upload_asset). Mutually exclusive with content.'),
     color: z.string().optional().describe('CSS color for frame border (for write)'),
     from: z.string().optional().describe('Source path (for mv)'),
     to: z.string().optional().describe('Destination path (for mv)'),
@@ -865,6 +891,9 @@ server.tool('batch', 'Batch operations on the ACTIVE PROJECT. Response includes
       lineHash: z.string(),
       newContent: z.string().optional(),
     })).optional().describe('Edit operations (for edit). Always include lineNum.'),
+    asset_path: z.string().optional().describe('Relative asset path (for upload_asset, e.g., "css/styles.css")'),
+    content_type: z.string().optional().describe('MIME type (for upload_asset, auto-detected if omitted)'),
+    frame_id: z.string().optional().describe('Frame ID to associate asset with (for upload_asset)'),
   })).describe('ALWAYS use batch instead of multiple individual tool calls. Applies the same change to many files, writes multiple frames, or combines writes+edits+deletes. One canvas refresh instead of many. Example: editing 5 wireframes to remove a section = one batch with 5 edit operations.'),
 }, async ({ operations }) => {
   try {
@@ -881,20 +910,121 @@ server.tool('batch', 'Batch operations on the ACTIVE PROJECT. Response includes
     }
 
     // Resolve file_path → base64 for write operations before sending to server
-    const resolvedOps = operations.map(op => {
-      if (op.tool === 'write' && op.file_path) {
-        const resolved = resolve(op.file_path);
-        if (!existsSync(resolved)) throw new Error(`File not found: ${resolved}`);
-        const buffer = readFileSync(resolved);
-        const ext = extname(resolved).toLowerCase();
-        const MIME = { '.png': 'image/png', '.jpg': 'image/jpeg', '.jpeg': 'image/jpeg', '.gif': 'image/gif', '.webp': 'image/webp', '.svg': 'image/svg+xml', '.pdf': 'application/pdf' };
-        const { file_path: _, ...rest } = op;
-        return { ...rest, base64: buffer.toString('base64'), contentType: MIME[ext] || 'application/octet-stream' };
+    // Separate asset uploads from frame operations
+    const assetOps = operations.filter(op => op.tool === 'upload_asset');
+    const frameOps = operations.filter(op => op.tool !== 'upload_asset');
+
+    const results = [];
+
+    // Handle asset uploads via the asset API
+    for (const op of assetOps) {
+      try {
+        if (!op.asset_path) throw new Error('asset_path is required for upload_asset');
+        if (op.asset_path.includes('..')) throw new Error('asset_path must not contain ".."');
+
+        let b64, ct;
+        if (op.file_path) {
+          const resolved = resolve(op.file_path);
+          if (!existsSync(resolved)) throw new Error(`File not found: ${resolved}`);
+          const buffer = readFileSync(resolved);
+          b64 = buffer.toString('base64');
+          ct = op.content_type || mimeFromExt(extname(resolved));
+        } else if (op.content != null) {
+          b64 = Buffer.from(op.content).toString('base64');
+          ct = op.content_type || mimeFromExt(extname(op.asset_path));
+        } else {
+          throw new Error('upload_asset requires file_path or content');
+        }
+
+        const body = { base64: b64, contentType: ct };
+        if (op.frame_id) body.frameId = op.frame_id;
+
+        const projectId = agentActiveProjectId;
+        if (!projectId) throw new Error('No active project. Call open_project first.');
+        const r = await api('PUT', `/api/projects/${projectId}/assets/${op.asset_path}`, body);
+        results.push({ ok: true, tool: 'upload_asset', asset_path: op.asset_path, ...r });
+      } catch (e) {
+        results.push({ ok: false, tool: 'upload_asset', asset_path: op.asset_path, error: e.message });
       }
-      return op;
-    });
+    }
 
-    const result = await api('POST', '/api/fs/batch', { operations: resolvedOps });
+    // Handle frame operations via the batch API
+    if (frameOps.length > 0) {
+      const TEXT_EXTS = ['.html', '.htm', '.svg', '.md', '.markdown', '.txt', '.css', '.js', '.mjs', '.json', '.xml'];
+      const resolvedOps = frameOps.map(op => {
+        if (op.tool === 'write' && op.file_path) {
+          const resolved = resolve(op.file_path);
+          if (!existsSync(resolved)) throw new Error(`File not found: ${resolved}`);
+          const ext = extname(resolved).toLowerCase();
+          const { file_path: _, ...rest } = op;
+          if (TEXT_EXTS.includes(ext)) {
+            return { ...rest, content: readFileSync(resolved, 'utf8') };
+          }
+          const buffer = readFileSync(resolved);
+          const MIME = { '.png': 'image/png', '.jpg': 'image/jpeg', '.jpeg': 'image/jpeg', '.gif': 'image/gif', '.webp': 'image/webp', '.svg': 'image/svg+xml', '.pdf': 'application/pdf' };
+          return { ...rest, base64: buffer.toString('base64'), contentType: MIME[ext] || 'application/octet-stream' };
+        }
+        return op;
+      });
+
+      const batchResult = await api('POST', '/api/fs/batch', { operations: resolvedOps });
+      if (batchResult.results) results.push(...batchResult.results);
+    }
+
+    return ok({ ok: true, results });
+  } catch (error) { return err(error); }
+});
+
+// ── Asset tools ──────────────────────────────────────────────────
+
+server.tool('upload_asset', 'Upload a supporting file (CSS, JS, image, font) to the ACTIVE PROJECT. Assets are referenced by frames via relative paths — e.g., if your HTML has <link href="css/styles.css">, upload the asset with asset_path="css/styles.css". Assets are NOT frames — they don\'t appear on the canvas. Use batch with upload_asset operations for bulk uploads.', {
+  asset_path: z.string().describe('Relative path for the asset (e.g., "css/styles.css", "js/app.js", "img/logo.png"). This must match the path used in HTML references.'),
+  file_path: z.string().optional().describe('Absolute path to a local file to upload. Mutually exclusive with content/base64.'),
+  content: z.string().optional().describe('Text content (for CSS/JS files). Mutually exclusive with file_path.'),
+  base64: z.string().optional().describe('Base64-encoded binary content. Mutually exclusive with file_path and content.'),
+  content_type: z.string().optional().describe('MIME type (auto-detected from extension if omitted)'),
+  frame_id: z.string().optional().describe('Frame ID to associate this asset with (for cleanup when the frame is deleted). Get this from the write tool response.'),
+}, async ({ asset_path, file_path, content, base64: rawBase64, content_type, frame_id }) => {
+  try {
+    if (!asset_path) throw new Error('asset_path is required');
+    if (asset_path.includes('..')) throw new Error('asset_path must not contain ".."');
+
+    let b64, ct;
+    if (file_path) {
+      const resolved = resolve(file_path);
+      if (!existsSync(resolved)) throw new Error(`File not found: ${resolved}`);
+      const buffer = readFileSync(resolved);
+      b64 = buffer.toString('base64');
+      ct = content_type || mimeFromExt(extname(resolved));
+    } else if (content != null) {
+      b64 = Buffer.from(content).toString('base64');
+      ct = content_type || mimeFromExt(extname(asset_path));
+    } else if (rawBase64) {
+      b64 = rawBase64;
+      ct = content_type || mimeFromExt(extname(asset_path));
+    } else {
+      throw new Error('Provide file_path, content, or base64');
+    }
+
+    const body = { base64: b64, contentType: ct };
+    if (frame_id) body.frameId = frame_id;
+
+    const projectId = agentActiveProjectId;
+    if (!projectId) throw new Error('No active project. Call open_project first.');
+
+    const result = await api('PUT', `/api/projects/${projectId}/assets/${asset_path}`, body);
+    return ok(result);
+  } catch (error) { return err(error); }
+});
+
+server.tool('list_assets', 'List all assets in the ACTIVE PROJECT, optionally filtered by frame.', {
+  frame_id: z.string().optional().describe('Filter assets by frame ID'),
+}, async ({ frame_id }) => {
+  try {
+    const projectId = agentActiveProjectId;
+    if (!projectId) throw new Error('No active project. Call open_project first.');
+    const query = frame_id ? `?frameId=${frame_id}` : '';
+    const result = await api('GET', `/api/projects/${projectId}/assets${query}`);
     return ok(result);
   } catch (error) { return err(error); }
 });

package/package.json

@@ -1,38 +1,72 @@
 {
   "name": "drafted",
-  "version": "1.1.0",
-  "description": "Design workspace for AI agents — MCP server and CLI",
+  "version": "1.1.1",
+  "description": "Drafted CLI - Design preview server for Claude agents",
   "type": "module",
+  "files": [
+    "cli/",
+    "mcp/",
+    "src/shared/",
+    "install-mcp.sh"
+  ],
   "bin": {
     "drafted": "./cli/drafted.mjs",
     "drafted-mcp": "./mcp/server.mjs"
   },
-  "files": [
-    "mcp/",
-    "cli/",
-    "shared/",
-    "skills/",
-    "README.md"
-  ],
+  "scripts": {
+    "dev": "./dev.sh",
+    "dev:server": "tsx watch server/server.mjs",
+    "dev:local": "node server/server-local.mjs",
+    "install-global": "npm install -g .",
+    "db:migrate": "psql $DATABASE_URL -f drizzle/migrate.sql",
+    "db:push": "drizzle-kit push",
+    "db:studio": "drizzle-kit studio",
+    "migrate-fs": "tsx server/migrate-fs.ts",
+    "db:clean-sessions": "tsx src/auth/cleanup.ts",
+    "import:legacy": "tsx scripts/import-legacy.mts",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
   "dependencies": {
+    "@aws-sdk/client-s3": "^3.1007.0",
+    "@aws-sdk/s3-request-presigner": "^3.1008.0",
     "@modelcontextprotocol/sdk": "^1.27.1",
     "commander": "^11.1.0",
+    "dagre": "^0.8.5",
+    "dotenv": "^17.3.1",
+    "drizzle-orm": "^0.45.1",
+    "express": "^4.18.2",
+    "multer": "^2.1.1",
+    "nodemailer": "^8.0.2",
+    "pg": "^8.20.0",
+    "playwright": "^1.58.2",
+    "puppeteer": "^24.37.5",
     "qrcode-terminal": "^0.12.0",
+    "sharp": "^0.34.5",
     "ws": "^8.16.0",
     "zod": "^4.3.6"
   },
   "keywords": [
-    "drafted",
     "design",
-    "mcp",
-    "claude",
-    "ai",
-    "canvas"
+    "canvas",
+    "preview",
+    "html",
+    "claude"
   ],
   "author": "ddfourtwo",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/ddfourtwo/drafted.git"
   },
-  "license": "MIT"
+  "license": "MIT",
+  "devDependencies": {
+    "@types/express": "^5.0.6",
+    "@types/nodemailer": "^7.0.11",
+    "@types/pg": "^8.18.0",
+    "drizzle-kit": "^0.31.9",
+    "tsx": "^4.19.0",
+    "typescript": "^5.9.3",
+    "vitest": "^3.2.4",
+    "yaml": "^2.8.3"
+  }
 }

package/README.md

@@ -1,32 +0,0 @@
-# Drafted
-
-Design workspace for AI agents. MCP server and CLI for creating and managing designs on a collaborative surface.
-
-## Install
-
-```bash
-npm install -g drafted
-```
-
-## Usage
-
-### As an MCP server (for Claude Desktop, Claude Code, Cursor)
-
-The MCP server is automatically available after install:
-
-```bash
-drafted-mcp
-```
-
-### As a CLI
-
-```bash
-drafted login
-drafted ls
-drafted write designs/default/hero.html < design.html
-```
-
-## Links
-
-- **App**: https://drafted.live
-- **Docs**: https://drafted.live

package/skills/import-website-to-drafted.md

@@ -1,317 +0,0 @@
----
-description: Import an existing website into Drafted as a design frame. Renders the page in a headless browser to capture the full DOM (including SPA content), downloads all assets, rewrites paths, then uploads via MCP tools.
-argument-hint: "[URL or local path, e.g., 'https://example.com' or './dist']"
----
-# /import-website-to-drafted
-
-Import a website into Drafted as a fully rendered frame with all its assets.
-
-## How it works
-
-Drafted frames render in iframes. The server injects a `<base>` tag so relative paths like `<link href="css/styles.css">` resolve to the frame's assets in R2 storage. You upload the HTML as a frame via `write`, and all referenced files (CSS, JS, images, fonts) as assets via `upload_asset` or `batch`.
-
-**Most modern sites are SPAs** (React, Framer, Webflow, Next.js) where the HTML source is just a shell and the real content is rendered by JavaScript. A simple HTTP fetch won't capture the content. This skill uses Puppeteer to render the page fully before capturing.
-
-## Step 1: Create/open a project
-
-```
-create_project({ name: "My Import" })
-open_project({ projectId: "..." })
-```
-
-## Step 2: Ensure Puppeteer is available
-
-```bash
-npm ls puppeteer 2>/dev/null || npm install puppeteer
-```
-
-## Step 3: Render, capture, and download assets
-
-Run this script locally. It launches a headless browser, renders the page fully (including SPA content), captures the complete DOM, then downloads all external assets and rewrites URLs to relative paths.
-
-**Adapt `SITE_URL` as needed:**
-
-```bash
-node -e "
-const puppeteer = require('puppeteer');
-const https = require('https');
-const http = require('http');
-const fs = require('fs');
-const path = require('path');
-const { URL } = require('url');
-
-const SITE_URL = 'https://example.com';  // ← CHANGE THIS
-const OUT_DIR = '/tmp/site-import';
-
-// ── Helpers ──────────────────────────────────────────────────────
-
-function download(url) {
-  return new Promise((resolve, reject) => {
-    const mod = url.startsWith('https') ? https : http;
-    mod.get(url, { headers: { 'User-Agent': 'Mozilla/5.0' } }, res => {
-      if (res.statusCode >= 300 && res.statusCode < 400 && res.headers.location) {
-        return download(res.headers.location).then(resolve, reject);
-      }
-      if (res.statusCode >= 400) return reject(new Error('HTTP ' + res.statusCode));
-      const chunks = [];
-      res.on('data', c => chunks.push(c));
-      res.on('end', () => resolve(Buffer.concat(chunks)));
-      res.on('error', reject);
-    }).on('error', reject);
-  });
-}
-
-function urlToAssetPath(urlStr) {
-  try {
-    const u = new URL(urlStr);
-    const domain = u.hostname.replace(/[^a-z0-9.-]/g, '_');
-    let p = u.pathname.replace(/[?#].*/, '');
-    if (!p || p === '/') p = '/index';
-    if (!path.extname(p)) {
-      // Guess extension from common patterns
-      if (urlStr.includes('font') || urlStr.includes('woff')) p += '.woff2';
-      else if (urlStr.includes('css') || urlStr.includes('stylesheet')) p += '.css';
-      else p += '.bin';
-    }
-    return 'assets/' + domain + p;
-  } catch { return null; }
-}
-
-const MIME_BY_EXT = {
-  '.css': 'text/css', '.js': 'application/javascript', '.mjs': 'application/javascript',
-  '.png': 'image/png', '.jpg': 'image/jpeg', '.jpeg': 'image/jpeg', '.gif': 'image/gif',
-  '.webp': 'image/webp', '.svg': 'image/svg+xml', '.ico': 'image/x-icon',
-  '.woff': 'font/woff', '.woff2': 'font/woff2', '.ttf': 'font/ttf', '.otf': 'font/otf',
-  '.json': 'application/json', '.pdf': 'application/pdf',
-};
-
-// ── Main ─────────────────────────────────────────────────────────
-
-(async () => {
-  fs.mkdirSync(OUT_DIR, { recursive: true });
-
-  // 1. Render the page in a real browser
-  console.log('Launching browser...');
-  const browser = await puppeteer.launch({
-    headless: true,
-    args: ['--no-sandbox', '--disable-setuid-sandbox'],
-  });
-  const page = await browser.newPage();
-  await page.setViewport({ width: 1440, height: 900 });
-
-  console.log('Navigating to', SITE_URL);
-  await page.goto(SITE_URL, { waitUntil: 'networkidle0', timeout: 30000 });
-
-  // Scroll to bottom to trigger lazy-loaded content
-  await page.evaluate(async () => {
-    await new Promise(resolve => {
-      let total = 0;
-      const timer = setInterval(() => {
-        window.scrollBy(0, 400);
-        total += 400;
-        if (total >= document.body.scrollHeight) { clearInterval(timer); resolve(); }
-      }, 100);
-      setTimeout(() => { clearInterval(timer); resolve(); }, 5000);
-    });
-    window.scrollTo(0, 0);
-  });
-  await new Promise(r => setTimeout(r, 1000)); // let lazy content settle
-
-  // 2. Capture the fully rendered DOM
-  let html = await page.content();
-  const pageHeight = await page.evaluate(() => document.documentElement.scrollHeight);
-  console.log('Captured rendered DOM (' + (html.length / 1024).toFixed(0) + ' KB, page height: ' + pageHeight + 'px)');
-
-  // 3. Capture computed styles and inline them (prevents style loss)
-  const inlineStyles = await page.evaluate(() => {
-    const styles = [];
-    for (const sheet of document.styleSheets) {
-      try {
-        const rules = Array.from(sheet.cssRules || []).map(r => r.cssText).join('\\n');
-        if (rules) styles.push(rules);
-      } catch { /* cross-origin stylesheet, skip */ }
-    }
-    return styles.join('\\n');
-  });
-
-  await browser.close();
-
-  // 4. Find all external URLs in the rendered HTML + inline styles
-  const combined = html + '\\n' + inlineStyles;
-  const urlPattern = /(?:src|href|srcset)=[\"']?(https?:\\/\\/[^\"'\\s,>]+)[\"']?|url\\([\"']?(https?:\\/\\/[^\"')]+)[\"']?\\)/g;
-  const skipDomains = ['google-analytics.com', 'googletagmanager.com', 'segment.com', 'hotjar.com', 'facebook.net', 'events.framer.com'];
-  const assetExtensions = /\\.(css|js|mjs|json|png|jpe?g|gif|webp|svg|ico|woff2?|ttf|otf|eot|mp4|webm|pdf)(\\?|$)/i;
-
-  const assets = new Map();
-  let match;
-  while ((match = urlPattern.exec(combined)) !== null) {
-    const url = (match[1] || match[2] || '').split(/[\\s,]/)[0]; // handle srcset
-    if (!url || assets.has(url)) continue;
-    try { if (skipDomains.some(d => url.includes(d))) continue; } catch {}
-    if (!assetExtensions.test(url) && !url.includes('font') && !url.includes('woff')) continue;
-    const assetPath = urlToAssetPath(url);
-    if (assetPath) assets.set(url, assetPath);
-  }
-
-  console.log('Found', assets.size, 'assets to download');
-
-  // 5. Download each asset
-  let downloaded = 0, failed = 0;
-  for (const [url, relPath] of assets) {
-    const outPath = path.join(OUT_DIR, relPath);
-    fs.mkdirSync(path.dirname(outPath), { recursive: true });
-    try {
-      const data = await download(url);
-      fs.writeFileSync(outPath, data);
-      downloaded++;
-    } catch (e) {
-      console.error('  FAILED:', url.substring(0, 80), e.message);
-      failed++;
-      assets.delete(url); // remove so we don't rewrite to a missing file
-    }
-  }
-  console.log('Downloaded:', downloaded, '| Failed:', failed);
-
-  // 6. Rewrite URLs in HTML AND in downloaded text files (CSS, JS, MJS)
-  const rewriteTargets = [{ content: html, path: path.join(OUT_DIR, 'index.html') }];
-  for (const [, relPath] of assets) {
-    const ext = path.extname(relPath).toLowerCase();
-    if (['.css', '.js', '.mjs', '.json', '.svg'].includes(ext)) {
-      const filePath = path.join(OUT_DIR, relPath);
-      if (fs.existsSync(filePath)) {
-        rewriteTargets.push({ content: fs.readFileSync(filePath, 'utf8'), path: filePath });
-      }
-    }
-  }
-
-  for (const target of rewriteTargets) {
-    let content = target.content;
-    for (const [url, relPath] of assets) {
-      // In the main HTML, use relative paths directly
-      // In asset files, compute the relative path from the asset to the referenced asset
-      if (target.path.endsWith('index.html')) {
-        content = content.split(url).join(relPath);
-      } else {
-        const fromDir = path.dirname(target.path.replace(OUT_DIR + '/', ''));
-        const toPath = relPath;
-        const rel = path.relative(fromDir, toPath);
-        content = content.split(url).join(rel);
-      }
-    }
-    if (target.path.endsWith('index.html')) html = content;
-    fs.writeFileSync(target.path, content);
-  }
-
-  // 7. Inject captured styles into the HTML (ensures styles survive without external sheets)
-  if (inlineStyles) {
-    const styleTag = '<style id=\"captured-styles\">' + inlineStyles + '</style>';
-    if (html.includes('</head>')) {
-      html = html.replace('</head>', styleTag + '</head>');
-    } else {
-      html = styleTag + html;
-    }
-  }
-
-  // 8. Clean up HTML
-  html = html.replace(/<base[^>]*>/gi, '');
-  html = html.replace(/<meta[^>]*Content-Security-Policy[^>]*>/gi, '');
-  html = html.replace(/<script[^>]*(?:analytics|gtag|segment|hotjar|events\\.framer)[^>]*>.*?<\\/script>/gis, '');
-  html = html.replace(/navigator\\.serviceWorker\\.register\\([^)]*\\)/g, '');
-  html = html.replace(/\\/\\/# sourceMappingURL=[^\\n]*/g, '');
-
-  // 9. Write final HTML
-  fs.writeFileSync(path.join(OUT_DIR, 'index.html'), html);
-
-  // 10. Write manifest
-  const manifest = Array.from(assets.entries()).map(([url, relPath]) => ({
-    asset_path: relPath,
-    file_path: path.join(OUT_DIR, relPath),
-    exists: fs.existsSync(path.join(OUT_DIR, relPath)),
-  })).filter(a => a.exists);
-  fs.writeFileSync(path.join(OUT_DIR, 'manifest.json'), JSON.stringify(manifest, null, 2));
-
-  console.log('\\nOutput:', OUT_DIR);
-  console.log('HTML:', path.join(OUT_DIR, 'index.html'), '(' + (html.length / 1024).toFixed(0) + ' KB)');
-  console.log('Page height:', pageHeight, 'px (use this for frame height)');
-  console.log('Manifest:', manifest.length, 'assets ready to upload');
-})().catch(e => { console.error(e); process.exit(1); });
-"
-```
-
-This outputs:
-- `/tmp/site-import/index.html` — fully rendered HTML with relative paths and captured styles
-- `/tmp/site-import/assets/...` — all downloaded assets (with URLs rewritten inside CSS/JS files too)
-- `/tmp/site-import/manifest.json` — asset list for the upload step
-- The page height in pixels (use this for the frame height)
-
-**Key improvements over a plain HTTP fetch:**
-- Renders the page in a real browser — captures SPA content (React, Framer, Webflow, etc.)
-- Scrolls to trigger lazy-loaded images and content
-- Captures computed CSS and inlines it — styles survive even if external sheets fail
-- Rewrites URLs inside CSS and JS files, not just HTML
-- Handles `srcset` attributes
-
-## Step 4: Write the frame
-
-Use `file_path` to write the HTML directly from disk — this handles large files that won't fit in a `content` parameter:
-
-```
-write({
-  path: "/designs/my-site/homepage.html",
-  file_path: "/tmp/site-import/index.html",
-  width: 1440,
-  height: <page-height-from-script-output>
-})
-```
-
-The `write` tool reads `.html` files as inline content (not binary), so the frame gets proper base tag injection and all relative asset paths will resolve. Note the frame ID in the response — you'll use it in the next step.
-
-**Use the page height from the script output** as the frame height so the full page is visible without scrolling within the frame.
-
-## Step 5: Upload assets
-
-Read `manifest.json` and batch upload all assets:
-
-```
-batch({
-  operations: [
-    { tool: "upload_asset", asset_path: "assets/fonts.gstatic.com/s/outfit/v14/abc.woff2", file_path: "/tmp/site-import/assets/fonts.gstatic.com/s/outfit/v14/abc.woff2", frame_id: "<frame-id>" },
-    { tool: "upload_asset", asset_path: "assets/cdn.example.com/img/hero.png", file_path: "/tmp/site-import/assets/cdn.example.com/img/hero.png", frame_id: "<frame-id>" },
-    // ... one entry per asset from manifest.json
-  ]
-})
-```
-
-Associate assets with the frame via `frame_id` so they're cleaned up if the frame is deleted.
-
-**For large manifests (30+ assets):** Split into batches of 20-30 operations to avoid timeouts.
-
-## Step 6: Verify
-
-```
-screenshot({ target: "/designs/my-site/homepage.html", fullPage: true })
-```
-
-Check for missing images, broken styles, or layout issues. If assets are missing, check `list_assets({ frame_id: "..." })` against the manifest.
-
-## For local build directories
-
-If importing from a local build output (e.g., `./dist` from Vite, `./build` from CRA):
-
-1. Skip the Puppeteer step — read `index.html` directly
-2. Find all asset references in the HTML
-3. Copy assets to `/tmp/site-import/assets/` preserving relative paths
-4. `write` the HTML + `batch upload_asset` the assets
-
-The Puppeteer approach is only needed for live URLs where JS rendering matters.
-
-## Common issues
-
-| Problem | Cause | Fix |
-|---------|-------|-----|
-| Blank frame | CSP meta tag not stripped | Check the cleanup regex caught it |
-| Missing images | `srcset` or `<picture>` not captured | Add patterns for these to the URL regex |
-| Broken layout | Computed styles not captured | Check the inlined `<style id="captured-styles">` tag |
-| 404 on assets | URL rewriting missed some references | Check downloaded CSS/JS files for un-rewritten absolute URLs |
-| Frame too short | Used default height instead of page height | Use the page height from script output |
-| Puppeteer not found | Not installed | Run `npm install puppeteer` first |