drafted 1.1.2 → 1.1.3

package/mcp/widgets/canvas-overview.html

@@ -0,0 +1,213 @@
+<style>
+  :root {
+    --bg: #fafafa;
+    --card: #fff;
+    --border: #e5e7eb;
+    --muted: #6b7280;
+    --text: #1a1a2e;
+    --accent: #533afd;
+    --accent-light: #ede9fe;
+  }
+  * { box-sizing: border-box; margin: 0; padding: 0; }
+  html, body { height: 100%; }
+  body {
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    background: var(--bg);
+    color: var(--text);
+    padding: 16px 18px;
+  }
+  .header {
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+    margin-bottom: 14px;
+  }
+  .header .title { font-size: 14px; font-weight: 600; }
+  .header .meta { font-size: 12px; color: var(--muted); }
+  .header a {
+    color: var(--accent);
+    text-decoration: none;
+    font-weight: 500;
+    font-size: 12px;
+    margin-left: 12px;
+  }
+  .header a:hover { text-decoration: underline; }
+
+  .layer {
+    background: var(--card);
+    border: 1px solid var(--border);
+    border-radius: 10px;
+    padding: 12px 14px;
+    margin-bottom: 10px;
+  }
+  .layer h3 {
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--muted);
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    margin-bottom: 8px;
+    display: flex;
+    justify-content: space-between;
+  }
+  .layer h3 .count {
+    background: var(--accent-light);
+    color: var(--accent);
+    padding: 1px 8px;
+    border-radius: 999px;
+    font-size: 10px;
+  }
+  .frames {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+  }
+  .frame {
+    background: var(--bg);
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    padding: 6px 10px;
+    font-size: 12px;
+    color: var(--text);
+    text-decoration: none;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    transition: border-color 0.15s, color 0.15s;
+  }
+  .frame:hover {
+    border-color: var(--accent);
+    color: var(--accent);
+  }
+  .frame .lane {
+    color: var(--muted);
+    font-size: 11px;
+  }
+  .empty {
+    text-align: center;
+    color: var(--muted);
+    font-size: 13px;
+    padding: 32px;
+  }
+  .project {
+    background: var(--card);
+    border: 1px solid var(--border);
+    border-radius: 10px;
+    padding: 12px 14px;
+    margin-bottom: 8px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    text-decoration: none;
+    color: inherit;
+    transition: border-color 0.15s;
+  }
+  .project:hover { border-color: var(--accent); }
+  .project .name { font-weight: 500; font-size: 14px; }
+  .project .desc { font-size: 12px; color: var(--muted); margin-top: 2px; }
+  .project .badge {
+    font-size: 11px;
+    background: var(--accent-light);
+    color: var(--accent);
+    padding: 2px 8px;
+    border-radius: 999px;
+  }
+</style>
+
+<div class="header">
+  <div>
+    <div class="title" id="title">Loading…</div>
+    <div class="meta" id="subtitle"></div>
+  </div>
+  <a id="open" href="#" target="_blank" rel="noopener" hidden>Open in canvas →</a>
+</div>
+<div id="root"></div>
+
+<script>
+  function escapeHtml(s) {
+    return String(s).replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
+  }
+
+  function renderProjects(projects, activeId) {
+    if (!projects?.length) return '<div class="empty">No projects yet. Use project(action="create") to start one.</div>';
+    return projects.slice(0, 30).map(p => {
+      const isActive = p.id === activeId;
+      const url = p.slug ? `https://drafted.live/project/${escapeHtml(p.slug)}` : '#';
+      return `
+        <a class="project" href="${url}" target="_blank" rel="noopener">
+          <div>
+            <div class="name">${escapeHtml(p.name || p.slug || 'Untitled')}</div>
+            ${p.description ? `<div class="desc">${escapeHtml(p.description)}</div>` : ''}
+          </div>
+          ${isActive ? '<span class="badge">active</span>' : ''}
+        </a>
+      `;
+    }).join('');
+  }
+
+  function renderLayers(byLayer) {
+    if (!byLayer || !Object.keys(byLayer).length) return '<div class="empty">No frames in this view.</div>';
+    return Object.entries(byLayer).map(([layer, frames]) => `
+      <div class="layer">
+        <h3>${escapeHtml(layer)} <span class="count">${frames.length}</span></h3>
+        <div class="frames">
+          ${frames.slice(0, 24).map(f => `
+            <a class="frame" href="${escapeHtml(f.frameUrl || '#')}" target="_blank" rel="noopener">
+              <span>${escapeHtml(f.label || f.filename || f.path || '?')}</span>
+              ${f.lane && f.lane !== 'default' ? `<span class="lane">${escapeHtml(f.lane)}</span>` : ''}
+            </a>
+          `).join('')}
+        </div>
+      </div>
+    `).join('');
+  }
+
+  function render(payload) {
+    const sc = payload?.structuredContent || {};
+    const root = document.getElementById('root');
+
+    // project(action="list") shape
+    if (Array.isArray(sc.projects)) {
+      document.getElementById('title').textContent = `${sc.projects.length} project${sc.projects.length === 1 ? '' : 's'}`;
+      document.getElementById('subtitle').textContent = sc.activeProject ? 'One active' : 'None active — use project(action="open") to switch';
+      root.innerHTML = renderProjects(sc.projects, sc.activeProject);
+      return;
+    }
+
+    // ls shape
+    if (sc.byLayer || sc.entries) {
+      const byLayer = sc.byLayer || groupByLayer(sc.entries || []);
+      const total = Object.values(byLayer).reduce((sum, arr) => sum + arr.length, 0);
+      document.getElementById('title').textContent = sc.project || 'Project canvas';
+      document.getElementById('subtitle').textContent = `${total} frame${total === 1 ? '' : 's'} · ${Object.keys(byLayer).length} layer${Object.keys(byLayer).length === 1 ? '' : 's'}`;
+      if (sc.canvasUrl) {
+        const link = document.getElementById('open');
+        link.href = sc.canvasUrl;
+        link.hidden = false;
+      }
+      root.innerHTML = renderLayers(byLayer);
+      return;
+    }
+
+    root.innerHTML = '<div class="empty">No data to display.</div>';
+  }
+
+  function groupByLayer(entries) {
+    const out = {};
+    for (const e of entries) {
+      const layer = e.layer || 'unsorted';
+      (out[layer] ??= []).push(e);
+    }
+    return out;
+  }
+
+  window.addEventListener('message', (event) => {
+    const msg = event.data;
+    if (!msg || typeof msg !== 'object') return;
+    if (msg.method === 'ui/notifications/tool-result' && msg.params?.result) {
+      render(msg.params.result);
+    }
+  });
+
+  if (window.openai?.toolResult) render(window.openai.toolResult);
+</script>

package/mcp/widgets/frame-preview.html

@@ -0,0 +1,162 @@
+<style>
+  :root {
+    --bg: #fafafa;
+    --card: #fff;
+    --border: #e5e7eb;
+    --muted: #6b7280;
+    --text: #1a1a2e;
+    --accent: #533afd;
+  }
+  * { box-sizing: border-box; margin: 0; padding: 0; }
+  html, body { height: 100%; }
+  body {
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    background: var(--bg);
+    color: var(--text);
+    display: flex;
+    flex-direction: column;
+  }
+  .header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px 14px;
+    border-bottom: 1px solid var(--border);
+    background: var(--card);
+    font-size: 13px;
+  }
+  .header .path {
+    font-family: 'SF Mono', 'Menlo', monospace;
+    color: var(--muted);
+    font-size: 12px;
+  }
+  .header .meta {
+    color: var(--muted);
+    font-size: 11px;
+  }
+  .header a {
+    color: var(--accent);
+    text-decoration: none;
+    font-weight: 500;
+    margin-left: 12px;
+  }
+  .header a:hover { text-decoration: underline; }
+  .stage {
+    flex: 1;
+    overflow: auto;
+    background: var(--card);
+  }
+  iframe {
+    width: 100%;
+    min-height: 480px;
+    border: 0;
+    display: block;
+  }
+  img.preview {
+    max-width: 100%;
+    height: auto;
+    display: block;
+    margin: 0 auto;
+  }
+  .empty {
+    padding: 40px;
+    text-align: center;
+    color: var(--muted);
+    font-size: 13px;
+  }
+  .markdown-body {
+    padding: 24px 32px;
+    max-width: 760px;
+    margin: 0 auto;
+    line-height: 1.6;
+  }
+  .markdown-body pre {
+    background: #f3f4f6;
+    padding: 12px 16px;
+    border-radius: 6px;
+    overflow-x: auto;
+    font-size: 13px;
+  }
+</style>
+
+<div class="header">
+  <span class="path" id="path">Loading frame…</span>
+  <span>
+    <span class="meta" id="meta"></span>
+    <a id="open" href="#" target="_blank" rel="noopener" hidden>Open in canvas →</a>
+  </span>
+</div>
+<div class="stage" id="stage">
+  <div class="empty">Waiting for frame data…</div>
+</div>
+
+<script>
+  function escapeHtml(s) {
+    return String(s).replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
+  }
+
+  function render(payload) {
+    const sc = payload?.structuredContent || {};
+    const meta = payload?._meta || {};
+    const path = sc.path || sc.frameId || sc.id || 'Frame';
+    const sizeBits = [];
+    if (sc.width && sc.height) sizeBits.push(`${sc.width}×${sc.height}`);
+    if (sc.contentType) sizeBits.push(sc.contentType.split('/').pop());
+    if (sc.layer) sizeBits.push(sc.layer);
+
+    document.getElementById('path').textContent = path;
+    document.getElementById('meta').textContent = sizeBits.join(' · ');
+    const openLink = document.getElementById('open');
+    if (sc.frameUrl) {
+      openLink.href = sc.frameUrl;
+      openLink.hidden = false;
+    }
+
+    const stage = document.getElementById('stage');
+    stage.innerHTML = '';
+
+    // Image (PNG screenshot, asset)
+    if (sc.imageUrl || meta.imageUrl) {
+      const img = document.createElement('img');
+      img.className = 'preview';
+      img.src = sc.imageUrl || meta.imageUrl;
+      img.alt = path;
+      stage.appendChild(img);
+      return;
+    }
+
+    // HTML frame — render in sandboxed srcdoc iframe
+    const html = meta.frameHtml || sc.content;
+    const ctype = (sc.contentType || '').toLowerCase();
+    if (html) {
+      if (ctype.includes('markdown') || path.toLowerCase().endsWith('.md')) {
+        // Render markdown as preformatted text — keeps it readable without a parser dep
+        const div = document.createElement('div');
+        div.className = 'markdown-body';
+        div.innerHTML = '<pre>' + escapeHtml(html) + '</pre>';
+        stage.appendChild(div);
+      } else {
+        const iframe = document.createElement('iframe');
+        iframe.setAttribute('sandbox', 'allow-same-origin');
+        iframe.srcdoc = html;
+        if (sc.height && Number(sc.height) > 480) iframe.style.minHeight = sc.height + 'px';
+        stage.appendChild(iframe);
+      }
+      return;
+    }
+
+    stage.innerHTML = '<div class="empty">No content to preview. The tool result did not include frame HTML.</div>';
+  }
+
+  // MCP Apps bridge: listen for ui/notifications/tool-result
+  window.addEventListener('message', (event) => {
+    const msg = event.data;
+    if (!msg || typeof msg !== 'object') return;
+    if (msg.method === 'ui/notifications/tool-result' && msg.params?.result) {
+      render(msg.params.result);
+    }
+  });
+
+  // Some hosts send the initial payload synchronously — try reading it now too
+  if (window.openai?.toolResult) render(window.openai.toolResult);
+</script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "drafted",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "description": "Drafted CLI - Design preview server for Claude agents",
   "type": "module",
   "files": [
@@ -30,6 +30,10 @@
   "dependencies": {
     "@aws-sdk/client-s3": "^3.1007.0",
     "@aws-sdk/s3-request-presigner": "^3.1008.0",
+    "@clerk/backend": "^3.2.12",
+    "@clerk/express": "^2.1.4",
+    "@clerk/mcp-tools": "^0.3.1",
+    "@modelcontextprotocol/ext-apps": "^1.6.0",
     "@modelcontextprotocol/sdk": "^1.27.1",
     "commander": "^11.1.0",
     "dagre": "^0.8.5",