interactive-drawer 0.4.0

package/dist/server.js

@@ -0,0 +1,698 @@
+// src/server.ts
+import { registerAppResource, registerAppTool, RESOURCE_MIME_TYPE } from "@modelcontextprotocol/ext-apps/server";
+import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
+import fs from "node:fs/promises";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import { deflateSync } from "node:zlib";
+import { z } from "zod/v4";
+
+// src/shared.ts
+import crypto from "node:crypto";
+var MAX_INPUT_BYTES = 5 * 1024 * 1024;
+var RECALL_CHEAT_SHEET = `# Excalidraw Element Format
+
+Thanks for calling read_me! Do NOT call it again in this conversation \u2014 you will not see anything new. Now use create_view to draw.
+
+## Basic Workflow
+
+Follow these steps in order:
+
+1. **create_session** \u2014 Call this first. You will get a session key and a viewer URL (using the server base URL shown above).
+   **IMPORTANT: Tell the user to open the viewer URL in their browser NOW**, before you start drawing. This way they can watch the diagram appear in real time.
+   Always use the exact viewer URL returned by create_session \u2014 never guess or construct URLs yourself.
+
+2. **read_me** \u2014 You already called this (you're reading it now). No need to call again.
+
+3. **create_view** \u2014 Send elements JSON with the session key to draw the diagram. The viewer page updates automatically.
+   You can call create_view multiple times to update the diagram (use restoreCheckpoint for incremental edits).
+
+## Drawing Style (ASK BEFORE DRAWING)
+
+Before your first create_view call, **ask the user** which font and sloppiness (roughness) they prefer. Present the combinations below and let them choose. If they have no preference, use the defaults (Excalifont + Artist).
+
+### Fonts (fontFamily)
+| Value | Name | Style |
+|-------|------|-------|
+| \`1\` | **Excalifont** (default) | Hand-drawn, casual \u2014 matches Excalidraw's sketchy aesthetic |
+| \`2\` | **Nunito** | Clean, rounded sans-serif \u2014 polished and modern |
+| \`3\` | **Comic Shanns** | Comic/playful \u2014 informal and fun |
+
+Set \`fontFamily\` on text elements and in \`label\` objects: \`"fontFamily": 2\`
+
+### Sloppiness (roughness)
+| Value | Name | Style |
+|-------|------|-------|
+| \`0\` | **Architect** | Precise, clean lines \u2014 technical / formal |
+| \`1\` | **Artist** (default) | Slightly rough \u2014 natural hand-drawn feel |
+| \`2\` | **Cartoonist** | Very rough, wobbly \u2014 playful / sketch-like |
+
+Set \`roughness\` on shape and arrow elements: \`"roughness": 0\`
+
+### Recommended Combinations
+| Combination | Font | Roughness | Best For |
+|-------------|------|-----------|----------|
+| **Sketch** (default) | Excalifont (1) | Artist (1) | General diagrams, brainstorming |
+| **Clean** | Nunito (2) | Architect (0) | Technical docs, presentations |
+| **Playful** | Comic Shanns (3) | Cartoonist (2) | Informal, fun, comics |
+| **Hand-drawn formal** | Excalifont (1) | Architect (0) | Hand-written notes, precise sketches |
+| **Polished casual** | Nunito (2) | Artist (1) | Blog posts, explainers |
+| **Comic precise** | Comic Shanns (3) | Architect (0) | Clean comic panels, game design |
+
+Once the user picks a style, apply the chosen \`fontFamily\` and \`roughness\` **consistently to all elements** throughout the diagram. Do not mix styles unless the user explicitly requests it.
+
+## Color Palette (use consistently across all tools)
+
+### Primary Colors
+| Name | Hex | Use |
+|------|-----|-----|
+| Blue | \`#4a9eed\` | Primary actions, links, data series 1 |
+| Amber | \`#f59e0b\` | Warnings, highlights, data series 2 |
+| Green | \`#22c55e\` | Success, positive, data series 3 |
+| Red | \`#ef4444\` | Errors, negative, data series 4 |
+| Purple | \`#8b5cf6\` | Accents, special items, data series 5 |
+| Pink | \`#ec4899\` | Decorative, data series 6 |
+| Cyan | \`#06b6d4\` | Info, secondary, data series 7 |
+| Lime | \`#84cc16\` | Extra, data series 8 |
+
+### Excalidraw Fills (pastel, for shape backgrounds)
+| Color | Hex | Good For |
+|-------|-----|----------|
+| Light Blue | \`#a5d8ff\` | Input, sources, primary nodes |
+| Light Green | \`#b2f2bb\` | Success, output, completed |
+| Light Orange | \`#ffd8a8\` | Warning, pending, external |
+| Light Purple | \`#d0bfff\` | Processing, middleware, special |
+| Light Red | \`#ffc9c9\` | Error, critical, alerts |
+| Light Yellow | \`#fff3bf\` | Notes, decisions, planning |
+| Light Teal | \`#c3fae8\` | Storage, data, memory |
+| Light Pink | \`#eebefa\` | Analytics, metrics |
+
+### Background Zones (use with opacity: 30 for layered diagrams)
+| Color | Hex | Good For |
+|-------|-----|----------|
+| Blue zone | \`#dbe4ff\` | UI / frontend layer |
+| Purple zone | \`#e5dbff\` | Logic / agent layer |
+| Green zone | \`#d3f9d8\` | Data / tool layer |
+
+---
+
+## Excalidraw Elements
+
+### Required Fields (all elements)
+\`type\`, \`id\` (unique string), \`x\`, \`y\`, \`width\`, \`height\`
+
+### Defaults (skip these)
+strokeColor="#1e1e1e", backgroundColor="transparent", fillStyle="solid", strokeWidth=2, roughness=1, opacity=100
+Canvas background is white.
+
+### Element Types
+
+**Rectangle**: \`{ "type": "rectangle", "id": "r1", "x": 100, "y": 100, "width": 200, "height": 100 }\`
+- \`roundness: { type: 3 }\` for rounded corners
+- \`backgroundColor: "#a5d8ff"\`, \`fillStyle: "solid"\` for filled
+
+**Ellipse**: \`{ "type": "ellipse", "id": "e1", "x": 100, "y": 100, "width": 150, "height": 150 }\`
+
+**Diamond**: \`{ "type": "diamond", "id": "d1", "x": 100, "y": 100, "width": 150, "height": 150 }\`
+
+**Labeled shape (PREFERRED)**: Add \`label\` to any shape for auto-centered text. No separate text element needed.
+\`{ "type": "rectangle", "id": "r1", "x": 100, "y": 100, "width": 200, "height": 80, "label": { "text": "Hello", "fontSize": 20 } }\`
+- Works on rectangle, ellipse, diamond
+- Text auto-centers and container auto-resizes to fit
+- Saves tokens vs separate text elements
+
+**Labeled arrow**: \`"label": { "text": "connects" }\` on an arrow element.
+
+**Standalone text** (titles, annotations only):
+\`{ "type": "text", "id": "t1", "x": 150, "y": 138, "text": "Hello", "fontSize": 20 }\`
+- x is the LEFT edge of the text. To center text at position cx: set x = cx - estimatedWidth/2
+- estimatedWidth \u2248 text.length \xD7 fontSize \xD7 0.5
+- Do NOT rely on textAlign or width for positioning \u2014 they only affect multi-line wrapping
+
+**Arrow**: \`{ "type": "arrow", "id": "a1", "x": 300, "y": 150, "width": 200, "height": 0, "points": [[0,0],[200,0]], "endArrowhead": "arrow" }\`
+- points: [dx, dy] offsets from element x,y
+- endArrowhead: null | "arrow" | "bar" | "dot" | "triangle"
+
+### Arrow Bindings
+Arrow: \`"startBinding": { "elementId": "r1", "fixedPoint": [1, 0.5] }\`
+fixedPoint: top=[0.5,0], bottom=[0.5,1], left=[0,0.5], right=[1,0.5]
+
+**cameraUpdate** (pseudo-element \u2014 controls the viewport, not drawn):
+\`{ "type": "cameraUpdate", "width": 800, "height": 600, "x": 0, "y": 0 }\`
+- x, y: top-left corner of the visible area (scene coordinates)
+- width, height: size of the visible area \u2014 MUST be 4:3 ratio (400\xD7300, 600\xD7450, 800\xD7600, 1200\xD7900, 1600\xD71200)
+- Animates smoothly between positions \u2014 use multiple cameraUpdates to guide attention as you draw
+- No \`id\` needed \u2014 this is not a drawn element
+
+**delete** (pseudo-element \u2014 removes elements by id):
+\`{ "type": "delete", "ids": "b2,a1,t3" }\`
+- Comma-separated list of element ids to remove
+- Also removes bound text elements (matching \`containerId\`)
+- Place AFTER the elements you want to remove
+- Never reuse a deleted id \u2014 always assign new ids to replacements
+
+### Drawing Order (CRITICAL for streaming)
+- Array order = z-order (first = back, last = front)
+- **Emit progressively**: background \u2192 shape \u2192 its label \u2192 its arrows \u2192 next shape
+- BAD: all rectangles \u2192 all texts \u2192 all arrows
+- GOOD: bg_shape \u2192 shape1 \u2192 text1 \u2192 arrow1 \u2192 shape2 \u2192 text2 \u2192 ...
+
+### Example: Two connected labeled boxes
+\`\`\`json
+[
+  { "type": "cameraUpdate", "width": 800, "height": 600, "x": 50, "y": 50 },
+  { "type": "rectangle", "id": "b1", "x": 100, "y": 100, "width": 200, "height": 100, "roundness": { "type": 3 }, "backgroundColor": "#a5d8ff", "fillStyle": "solid", "label": { "text": "Start", "fontSize": 20 } },
+  { "type": "rectangle", "id": "b2", "x": 450, "y": 100, "width": 200, "height": 100, "roundness": { "type": 3 }, "backgroundColor": "#b2f2bb", "fillStyle": "solid", "label": { "text": "End", "fontSize": 20 } },
+  { "type": "arrow", "id": "a1", "x": 300, "y": 150, "width": 150, "height": 0, "points": [[0,0],[150,0]], "endArrowhead": "arrow", "startBinding": { "elementId": "b1", "fixedPoint": [1, 0.5] }, "endBinding": { "elementId": "b2", "fixedPoint": [0, 0.5] } }
+]
+\`\`\`
+
+### Camera & Sizing (CRITICAL for readability)
+
+The diagram displays inline at ~700px width. Design for this constraint.
+
+**Recommended camera sizes (4:3 aspect ratio ONLY):**
+- Camera **S**: width 400, height 300 \u2014 close-up on a small group (2-3 elements)
+- Camera **M**: width 600, height 450 \u2014 medium view, a section of a diagram
+- Camera **L**: width 800, height 600 \u2014 standard full diagram (DEFAULT)
+- Camera **XL**: width 1200, height 900 \u2014 large diagram overview. WARNING: font size smaller than 18 is unreadable
+- Camera **XXL**: width 1600, height 1200 \u2014 panorama / final overview of complex diagrams. WARNING: minimum readable font size is 21
+
+ALWAYS use one of these exact sizes. Non-4:3 viewports cause distortion.
+
+**Font size rules:**
+- Minimum fontSize: **16** for body text, labels, descriptions
+- Minimum fontSize: **20** for titles and headings
+- Minimum fontSize: **14** for secondary annotations only (sparingly)
+- NEVER use fontSize below 14 \u2014 it becomes unreadable at display scale
+
+**Element sizing rules:**
+- Minimum shape size: 120\xD760 for labeled rectangles/ellipses
+- Leave 20-30px gaps between elements minimum
+- Prefer fewer, larger elements over many tiny ones
+
+ALWAYS start with a \`cameraUpdate\` as the FIRST element. For example:
+\`{ "type": "cameraUpdate", "width": 800, "height": 600, "x": 0, "y": 0 }\`
+
+- x, y: top-left corner of visible area (scene coordinates)
+- ALWAYS emit the cameraUpdate BEFORE drawing the elements it frames \u2014 camera moves first, then content appears
+- The camera animates smoothly between positions
+- Leave padding: don't match camera size to content size exactly (e.g., 500px content in 800x600 camera)
+
+Examples:
+\`{ "type": "cameraUpdate", "width": 800, "height": 600, "x": 0, "y": 0 }\` \u2014 standard view
+\`{ "type": "cameraUpdate", "width": 400, "height": 300, "x": 200, "y": 100 }\` \u2014 zoom into a detail
+\`{ "type": "cameraUpdate", "width": 1600, "height": 1200, "x": -50, "y": -50 }\` \u2014 panorama overview
+
+Tip: For large diagrams, emit a cameraUpdate to focus on each section as you draw it.
+
+## Diagram Example
+
+Example prompt: "Explain how photosynthesis works"
+
+Uses 2 camera positions: start zoomed in (M) for title, then zoom out (L) to reveal the full diagram. Sun art drawn last as a finishing touch.
+
+- **Camera 1** (400x300): Draw the title "Photosynthesis" and formula subtitle zoomed in
+- **Camera 2** (800x600): Zoom out \u2014 draw the leaf zone, process flow (Light Reactions \u2192 Calvin Cycle), inputs (Sunlight, Water, CO2), outputs (O2, Glucose), and finally a cute 8-ray sun
+
+\`\`\`json
+[
+  {"type":"cameraUpdate","width":400,"height":300,"x":200,"y":-20},
+  {"type":"text","id":"ti","x":280,"y":10,"text":"Photosynthesis","fontSize":28,"strokeColor":"#1e1e1e"},
+  {"type":"text","id":"fo","x":245,"y":48,"text":"6CO2 + 6H2O --> C6H12O6 + 6O2","fontSize":16,"strokeColor":"#757575"},
+  {"type":"cameraUpdate","width":800,"height":600,"x":0,"y":-20},
+  {"type":"rectangle","id":"lf","x":150,"y":90,"width":520,"height":380,"backgroundColor":"#d3f9d8","fillStyle":"solid","roundness":{"type":3},"strokeColor":"#22c55e","strokeWidth":1,"opacity":35},
+  {"type":"text","id":"lfl","x":170,"y":96,"text":"Inside the Leaf","fontSize":16,"strokeColor":"#15803d"},
+  {"type":"rectangle","id":"lr","x":190,"y":190,"width":160,"height":70,"backgroundColor":"#fff3bf","fillStyle":"solid","roundness":{"type":3},"strokeColor":"#f59e0b","label":{"text":"Light Reactions","fontSize":16}},
+  {"type":"arrow","id":"a1","x":350,"y":225,"width":120,"height":0,"points":[[0,0],[120,0]],"strokeColor":"#1e1e1e","strokeWidth":2,"endArrowhead":"arrow","label":{"text":"ATP","fontSize":14}},
+  {"type":"rectangle","id":"cc","x":470,"y":190,"width":160,"height":70,"backgroundColor":"#d0bfff","fillStyle":"solid","roundness":{"type":3},"strokeColor":"#8b5cf6","label":{"text":"Calvin Cycle","fontSize":16}},
+  {"type":"rectangle","id":"sl","x":10,"y":200,"width":120,"height":50,"backgroundColor":"#fff3bf","fillStyle":"solid","roundness":{"type":3},"strokeColor":"#f59e0b","label":{"text":"Sunlight","fontSize":16}},
+  {"type":"arrow","id":"a2","x":130,"y":225,"width":60,"height":0,"points":[[0,0],[60,0]],"strokeColor":"#f59e0b","strokeWidth":2,"endArrowhead":"arrow"},
+  {"type":"rectangle","id":"wa","x":200,"y":360,"width":140,"height":50,"backgroundColor":"#a5d8ff","fillStyle":"solid","roundness":{"type":3},"strokeColor":"#4a9eed","label":{"text":"Water (H2O)","fontSize":16}},
+  {"type":"arrow","id":"a3","x":270,"y":360,"width":0,"height":-100,"points":[[0,0],[0,-100]],"strokeColor":"#4a9eed","strokeWidth":2,"endArrowhead":"arrow"},
+  {"type":"rectangle","id":"co","x":480,"y":360,"width":130,"height":50,"backgroundColor":"#ffd8a8","fillStyle":"solid","roundness":{"type":3},"strokeColor":"#f59e0b","label":{"text":"CO2","fontSize":16}},
+  {"type":"arrow","id":"a4","x":545,"y":360,"width":0,"height":-100,"points":[[0,0],[0,-100]],"strokeColor":"#f59e0b","strokeWidth":2,"endArrowhead":"arrow"},
+  {"type":"rectangle","id":"ox","x":540,"y":100,"width":100,"height":40,"backgroundColor":"#ffc9c9","fillStyle":"solid","roundness":{"type":3},"strokeColor":"#ef4444","label":{"text":"O2","fontSize":16}},
+  {"type":"arrow","id":"a5","x":310,"y":190,"width":230,"height":-50,"points":[[0,0],[230,-50]],"strokeColor":"#ef4444","strokeWidth":2,"endArrowhead":"arrow"},
+  {"type":"rectangle","id":"gl","x":690,"y":195,"width":120,"height":60,"backgroundColor":"#c3fae8","fillStyle":"solid","roundness":{"type":3},"strokeColor":"#22c55e","label":{"text":"Glucose","fontSize":18}},
+  {"type":"arrow","id":"a6","x":630,"y":225,"width":60,"height":0,"points":[[0,0],[60,0]],"strokeColor":"#22c55e","strokeWidth":2,"endArrowhead":"arrow"},
+  {"type":"ellipse","id":"sun","x":30,"y":110,"width":50,"height":50,"backgroundColor":"#fff3bf","fillStyle":"solid","strokeColor":"#f59e0b","strokeWidth":2},
+  {"type":"arrow","id":"r1","x":55,"y":108,"width":0,"height":-14,"points":[[0,0],[0,-14]],"strokeColor":"#f59e0b","strokeWidth":2,"endArrowhead":null,"startArrowhead":null},
+  {"type":"arrow","id":"r2","x":55,"y":162,"width":0,"height":14,"points":[[0,0],[0,14]],"strokeColor":"#f59e0b","strokeWidth":2,"endArrowhead":null,"startArrowhead":null},
+  {"type":"arrow","id":"r3","x":28,"y":135,"width":-14,"height":0,"points":[[0,0],[-14,0]],"strokeColor":"#f59e0b","strokeWidth":2,"endArrowhead":null,"startArrowhead":null},
+  {"type":"arrow","id":"r4","x":82,"y":135,"width":14,"height":0,"points":[[0,0],[14,0]],"strokeColor":"#f59e0b","strokeWidth":2,"endArrowhead":null,"startArrowhead":null},
+  {"type":"arrow","id":"r5","x":73,"y":117,"width":10,"height":-10,"points":[[0,0],[10,-10]],"strokeColor":"#f59e0b","strokeWidth":2,"endArrowhead":null,"startArrowhead":null},
+  {"type":"arrow","id":"r6","x":37,"y":117,"width":-10,"height":-10,"points":[[0,0],[-10,-10]],"strokeColor":"#f59e0b","strokeWidth":2,"endArrowhead":null,"startArrowhead":null},
+  {"type":"arrow","id":"r7","x":73,"y":153,"width":10,"height":10,"points":[[0,0],[10,10]],"strokeColor":"#f59e0b","strokeWidth":2,"endArrowhead":null,"startArrowhead":null},
+  {"type":"arrow","id":"r8","x":37,"y":153,"width":-10,"height":10,"points":[[0,0],[-10,10]],"strokeColor":"#f59e0b","strokeWidth":2,"endArrowhead":null,"startArrowhead":null}
+]
+\`\`\`
+
+Common mistakes to avoid:
+- **Camera size must match content with padding** \u2014 if your content is 500px tall, use 800x600 camera, not 500px. No padding = truncated edges
+- **Center titles relative to the diagram below** \u2014 estimate the diagram's total width and center the title text over it, not over the canvas
+- **Arrow labels need space** \u2014 long labels like "ATP + NADPH" overflow short arrows. Keep labels short or make arrows wider
+- **Elements overlap when y-coordinates are close** \u2014 always check that text, boxes, and labels don't stack on top of each other (e.g., an output box overlapping a zone label)
+- **Draw art/illustrations LAST** \u2014 cute decorations (sun, stars, icons) should appear as the final drawing step so they don't distract from the main content being built
+
+## Sequence flow Diagram Example
+
+Example prompt: "show a sequence diagram explaining MCP Apps"
+
+This demonstrates a UML-style sequence diagram with 4 actors (User, Agent, App iframe, MCP Server), dashed lifelines, and labeled arrows showing the full MCP Apps request/response flow. Camera pans progressively across the diagram:
+
+- **Camera 1** (600x450): Title "MCP Apps \u2014 Sequence Flow"
+- **Cameras 2\u20135** (400x300 each): Zoom into each actor column right-to-left \u2014 draw header box + dashed lifeline for Server, App, Agent, User. Right-to-left so the camera snakes smoothly: pan left across actors, then pan right following the first message arrows
+- **Camera 6** (400x300): Zoom into User \u2014 draw stick figure (head + body)
+- **Camera 7** (600x450): Zoom out \u2014 draw first message arrows: user prompt \u2192 agent, agent tools/call \u2192 server, tool result back, result forwarded to app iframe
+- **Camera 8** (600x450): Pan down \u2014 draw user interaction with app, app requesting tools/call back to agent
+- **Camera 9** (600x450): Pan further down \u2014 agent forwards to server, fresh data flows back through the chain, context update from app to agent
+- **Camera 10** (800x600): Final zoom-out showing the complete sequence
+
+\`\`\`json
+[
+  {"type":"cameraUpdate","width":600,"height":450,"x":80,"y":-10},
+  {"type":"text","id":"title","x":200,"y":15,"text":"MCP Apps \u2014 Sequence Flow","fontSize":24,"strokeColor":"#1e1e1e"},
+
+  {"type":"cameraUpdate","width":400,"height":300,"x":450,"y":-5},
+  {"type":"rectangle","id":"sHead","x":600,"y":60,"width":130,"height":40,"backgroundColor":"#ffd8a8","fillStyle":"solid","roundness":{"type":3},"strokeColor":"#f59e0b","strokeWidth":2,"label":{"text":"MCP Server","fontSize":16}},
+  {"type":"arrow","id":"sLine","x":665,"y":100,"width":0,"height":490,"points":[[0,0],[0,490]],"strokeColor":"#b0b0b0","strokeWidth":1,"strokeStyle":"dashed","endArrowhead":null},
+
+  {"type":"cameraUpdate","width":400,"height":300,"x":250,"y":-5},
+  {"type":"rectangle","id":"appHead","x":400,"y":60,"width":130,"height":40,"backgroundColor":"#b2f2bb","fillStyle":"solid","roundness":{"type":3},"strokeColor":"#22c55e","strokeWidth":2,"label":{"text":"App iframe","fontSize":16}},
+  {"type":"arrow","id":"appLine","x":465,"y":100,"width":0,"height":490,"points":[[0,0],[0,490]],"strokeColor":"#b0b0b0","strokeWidth":1,"strokeStyle":"dashed","endArrowhead":null},
+
+  {"type":"cameraUpdate","width":400,"height":300,"x":80,"y":-5},
+  {"type":"rectangle","id":"aHead","x":230,"y":60,"width":100,"height":40,"backgroundColor":"#d0bfff","fillStyle":"solid","roundness":{"type":3},"strokeColor":"#8b5cf6","strokeWidth":2,"label":{"text":"Agent","fontSize":16}},
+  {"type":"arrow","id":"aLine","x":280,"y":100,"width":0,"height":490,"points":[[0,0],[0,490]],"strokeColor":"#b0b0b0","strokeWidth":1,"strokeStyle":"dashed","endArrowhead":null},
+
+  {"type":"cameraUpdate","width":400,"height":300,"x":-10,"y":-5},
+  {"type":"rectangle","id":"uHead","x":60,"y":60,"width":100,"height":40,"backgroundColor":"#a5d8ff","fillStyle":"solid","roundness":{"type":3},"strokeColor":"#4a9eed","strokeWidth":2,"label":{"text":"User","fontSize":16}},
+  {"type":"arrow","id":"uLine","x":110,"y":100,"width":0,"height":490,"points":[[0,0],[0,490]],"strokeColor":"#b0b0b0","strokeWidth":1,"strokeStyle":"dashed","endArrowhead":null},
+
+  {"type":"cameraUpdate","width":400,"height":300,"x":-40,"y":50},
+  {"type":"ellipse","id":"uh","x":58,"y":110,"width":20,"height":20,"backgroundColor":"#a5d8ff","fillStyle":"solid","strokeColor":"#4a9eed","strokeWidth":2},
+  {"type":"rectangle","id":"ub","x":57,"y":132,"width":22,"height":26,"backgroundColor":"#a5d8ff","fillStyle":"solid","roundness":{"type":3},"strokeColor":"#4a9eed","strokeWidth":2},
+
+  {"type":"cameraUpdate","width":600,"height":450,"x":-20,"y":-30},
+  {"type":"arrow","id":"m1","x":110,"y":135,"width":170,"height":0,"points":[[0,0],[170,0]],"strokeColor":"#1e1e1e","strokeWidth":2,"endArrowhead":"arrow","label":{"text":"display a chart","fontSize":14}},
+  {"type":"rectangle","id":"note1","x":130,"y":162,"width":310,"height":26,"backgroundColor":"#fff3bf","fillStyle":"solid","roundness":{"type":3},"strokeColor":"#f59e0b","strokeWidth":1,"opacity":50,"label":{"text":"Interactive app rendered in chat","fontSize":14}},
+
+  {"type":"cameraUpdate","width":600,"height":450,"x":170,"y":25},
+  {"type":"arrow","id":"m2","x":280,"y":210,"width":385,"height":0,"points":[[0,0],[385,0]],"strokeColor":"#8b5cf6","strokeWidth":2,"endArrowhead":"arrow","label":{"text":"tools/call","fontSize":16}},
+  {"type":"arrow","id":"m3","x":665,"y":250,"width":-385,"height":0,"points":[[0,0],[-385,0]],"strokeColor":"#f59e0b","strokeWidth":2,"endArrowhead":"arrow","strokeStyle":"dashed","label":{"text":"tool input/result","fontSize":16}},
+  {"type":"arrow","id":"m4","x":280,"y":290,"width":185,"height":0,"points":[[0,0],[185,0]],"strokeColor":"#8b5cf6","strokeWidth":2,"endArrowhead":"arrow","strokeStyle":"dashed","label":{"text":"result \u2192 app","fontSize":16}},
+
+  {"type":"cameraUpdate","width":600,"height":450,"x":-10,"y":135},
+  {"type":"arrow","id":"m5","x":110,"y":340,"width":355,"height":0,"points":[[0,0],[355,0]],"strokeColor":"#4a9eed","strokeWidth":2,"endArrowhead":"arrow","label":{"text":"user interacts","fontSize":16}},
+  {"type":"arrow","id":"m6","x":465,"y":380,"width":-185,"height":0,"points":[[0,0],[-185,0]],"strokeColor":"#22c55e","strokeWidth":2,"endArrowhead":"arrow","label":{"text":"tools/call request","fontSize":16}},
+
+  {"type":"cameraUpdate","width":600,"height":450,"x":170,"y":235},
+  {"type":"arrow","id":"m7","x":280,"y":420,"width":385,"height":0,"points":[[0,0],[385,0]],"strokeColor":"#8b5cf6","strokeWidth":2,"endArrowhead":"arrow","label":{"text":"tools/call (forwarded)","fontSize":16}},
+  {"type":"arrow","id":"m8","x":665,"y":460,"width":-385,"height":0,"points":[[0,0],[-385,0]],"strokeColor":"#f59e0b","strokeWidth":2,"endArrowhead":"arrow","strokeStyle":"dashed","label":{"text":"fresh data","fontSize":16}},
+  {"type":"arrow","id":"m9","x":280,"y":500,"width":185,"height":0,"points":[[0,0],[185,0]],"strokeColor":"#8b5cf6","strokeWidth":2,"endArrowhead":"arrow","strokeStyle":"dashed","label":{"text":"fresh data","fontSize":16}},
+
+  {"type":"cameraUpdate","width":600,"height":450,"x":50,"y":327},
+  {"type":"rectangle","id":"note2","x":130,"y":522,"width":310,"height":26,"backgroundColor":"#d3f9d8","fillStyle":"solid","roundness":{"type":3},"strokeColor":"#22c55e","strokeWidth":1,"opacity":50,"label":{"text":"App updates with new data","fontSize":14}},
+  {"type":"arrow","id":"m10","x":465,"y":570,"width":-185,"height":0,"points":[[0,0],[-185,0]],"strokeColor":"#22c55e","strokeWidth":2,"endArrowhead":"arrow","strokeStyle":"dashed","label":{"text":"context update","fontSize":16}},
+
+  {"type":"cameraUpdate","width":800,"height":600,"x":-5,"y":2}
+]
+\`\`\`
+
+## Checkpoints (restoring previous state)
+
+Every create_view call returns a \`checkpointId\` in its response. To continue from a previous diagram state, start your elements array with a restoreCheckpoint element:
+
+\`[{"type":"restoreCheckpoint","id":"<checkpointId>"}, ...additional new elements...]\`
+
+The saved state (including any user edits made in fullscreen) is loaded from the client, and your new elements are appended on top. This saves tokens \u2014 you don't need to re-send the entire diagram.
+
+## Deleting Elements
+
+Remove elements by id using the \`delete\` pseudo-element:
+
+\`{"type":"delete","ids":"b2,a1,t3"}\`
+
+Works in two modes:
+- **With restoreCheckpoint**: restore a saved state, then surgically remove specific elements before adding new ones
+- **Inline (animation mode)**: draw elements, then delete and replace them later in the same array to create transformation effects
+
+Place delete entries AFTER the elements you want to remove. The final render filters them out.
+
+**IMPORTANT**: Every element id must be unique. Never reuse an id after deleting it \u2014 always assign a new id to replacement elements.
+
+## Animation Mode \u2014 Transform in Place
+
+Instead of building left-to-right and panning away, you can animate by DELETING elements and replacing them at the same position. Combined with slight camera moves, this creates smooth visual transformations during streaming.
+
+Pattern:
+1. Draw initial elements
+2. cameraUpdate (shift/zoom slightly)
+3. \`{"type":"delete","ids":"old1,old2"}\`
+4. Draw replacements at same coordinates (different color/content)
+5. Repeat
+
+Example prompt: "Pixel snake eats apple"
+
+Snake moves right by adding a head segment and deleting the tail. On eating the apple, tail is NOT deleted (snake grows). Camera nudges between frames add subtle motion.
+
+\`\`\`json
+[
+  {"type":"cameraUpdate","width":400,"height":300,"x":0,"y":0},
+  {"type":"ellipse","id":"ap","x":260,"y":78,"width":20,"height":20,"backgroundColor":"#ef4444","fillStyle":"solid","strokeColor":"#ef4444"},
+  {"type":"rectangle","id":"s0","x":60,"y":130,"width":28,"height":28,"backgroundColor":"#22c55e","fillStyle":"solid","strokeColor":"#15803d","strokeWidth":1},
+  {"type":"rectangle","id":"s1","x":88,"y":130,"width":28,"height":28,"backgroundColor":"#22c55e","fillStyle":"solid","strokeColor":"#15803d","strokeWidth":1},
+  {"type":"rectangle","id":"s2","x":116,"y":130,"width":28,"height":28,"backgroundColor":"#22c55e","fillStyle":"solid","strokeColor":"#15803d","strokeWidth":1},
+  {"type":"rectangle","id":"s3","x":144,"y":130,"width":28,"height":28,"backgroundColor":"#22c55e","fillStyle":"solid","strokeColor":"#15803d","strokeWidth":1},
+  {"type":"cameraUpdate","width":400,"height":300,"x":1,"y":0},
+  {"type":"rectangle","id":"s4","x":172,"y":130,"width":28,"height":28,"backgroundColor":"#22c55e","fillStyle":"solid","strokeColor":"#15803d","strokeWidth":1},
+  {"type":"delete","ids":"s0"},
+  {"type":"cameraUpdate","width":400,"height":300,"x":0,"y":1},
+  {"type":"rectangle","id":"s5","x":200,"y":130,"width":28,"height":28,"backgroundColor":"#22c55e","fillStyle":"solid","strokeColor":"#15803d","strokeWidth":1},
+  {"type":"delete","ids":"s1"},
+  {"type":"cameraUpdate","width":400,"height":300,"x":1,"y":0},
+  {"type":"rectangle","id":"s6","x":228,"y":130,"width":28,"height":28,"backgroundColor":"#22c55e","fillStyle":"solid","strokeColor":"#15803d","strokeWidth":1},
+  {"type":"delete","ids":"s2"},
+  {"type":"cameraUpdate","width":400,"height":300,"x":0,"y":0},
+  {"type":"rectangle","id":"s7","x":256,"y":130,"width":28,"height":28,"backgroundColor":"#22c55e","fillStyle":"solid","strokeColor":"#15803d","strokeWidth":1},
+  {"type":"delete","ids":"s3"},
+  {"type":"cameraUpdate","width":400,"height":300,"x":1,"y":1},
+  {"type":"rectangle","id":"s8","x":256,"y":102,"width":28,"height":28,"backgroundColor":"#22c55e","fillStyle":"solid","strokeColor":"#15803d","strokeWidth":1},
+  {"type":"delete","ids":"s4"},
+  {"type":"cameraUpdate","width":400,"height":300,"x":0,"y":0},
+  {"type":"rectangle","id":"s9","x":256,"y":74,"width":28,"height":28,"backgroundColor":"#22c55e","fillStyle":"solid","strokeColor":"#15803d","strokeWidth":1},
+  {"type":"delete","ids":"ap"},
+  {"type":"cameraUpdate","width":400,"height":300,"x":1,"y":0},
+  {"type":"rectangle","id":"s10","x":256,"y":46,"width":28,"height":28,"backgroundColor":"#22c55e","fillStyle":"solid","strokeColor":"#15803d","strokeWidth":1},
+  {"type":"delete","ids":"s5"}
+]
+\`\`\`
+
+Key techniques:
+- Add head + delete tail each frame = snake movement illusion
+- On eat: delete apple instead of tail = snake grows by one
+- Post-eat frame resumes normal add-head/delete-tail, proving the snake is now longer
+- Camera nudges (0,0 \u2192 1,0 \u2192 0,1 \u2192 ...) add subtle motion between frames
+- Always use NEW ids for added segments (s0\u2192s4\u2192s5\u2192...); never reuse deleted ids
+
+## Dark Mode
+
+If the user asks for a dark theme/mode diagram, use a massive dark background rectangle as the FIRST element (before cameraUpdate). Make it 10x the camera size so it covers the entire viewport even when panning:
+
+\`{"type":"rectangle","id":"darkbg","x":-4000,"y":-3000,"width":10000,"height":7500,"backgroundColor":"#1e1e2e","fillStyle":"solid","strokeColor":"transparent","strokeWidth":0}\`
+
+Then use these colors on the dark background:
+
+**Text colors (on dark):**
+| Color | Hex | Use |
+|-------|-----|-----|
+| White | \`#e5e5e5\` | Primary text, titles |
+| Muted | \`#a0a0a0\` | Secondary text, annotations |
+| NEVER | \`#555\` or darker | Invisible on dark bg! |
+
+**Shape fills (on dark):**
+| Color | Hex | Good For |
+|-------|-----|----------|
+| Dark Blue | \`#1e3a5f\` | Primary nodes |
+| Dark Green | \`#1a4d2e\` | Success, output |
+| Dark Purple | \`#2d1b69\` | Processing, special |
+| Dark Orange | \`#5c3d1a\` | Warning, pending |
+| Dark Red | \`#5c1a1a\` | Error, critical |
+| Dark Teal | \`#1a4d4d\` | Storage, data |
+
+**Stroke/arrow colors (on dark):**
+Use the Primary Colors from above \u2014 they're bright enough on dark backgrounds. For shape borders, use slightly lighter variants or \`#555555\` for subtle outlines.
+
+## Tips
+- Do NOT call read_me again \u2014 you already have everything you need
+- Use the color palette consistently
+- **Text contrast is CRITICAL** \u2014 never use light gray (#b0b0b0, #999) on white backgrounds. Minimum text color on white: #757575. For colored text on light fills, use dark variants (#15803d not #22c55e, #2563eb not #4a9eed). White text needs dark backgrounds (#9a5030 not #c4795b)
+- Do NOT use emoji in text \u2014 they don't render in Excalidraw's font
+- cameraUpdate is MAGICAL and users love it! please use it a lot to guide the user's attention as you draw. It makes a huge difference in readability and engagement.
+`;
+async function resolveElements(parsed, store) {
+  const restoreEl = parsed.find((el) => el.type === "restoreCheckpoint");
+  let resolvedElements;
+  if (restoreEl?.id) {
+    const base = await store.load(restoreEl.id);
+    if (!base) {
+      return {
+        ok: false,
+        error: `Checkpoint "${restoreEl.id}" not found \u2014 it may have expired or never existed. Please recreate the diagram from scratch.`
+      };
+    }
+    const deleteIds = /* @__PURE__ */ new Set();
+    for (const el of parsed) {
+      if (el.type === "delete") {
+        for (const id of String(el.ids ?? el.id).split(",")) deleteIds.add(id.trim());
+      }
+    }
+    const baseFiltered = base.elements.filter(
+      (el) => !deleteIds.has(el.id) && !deleteIds.has(el.containerId)
+    );
+    const newEls = parsed.filter(
+      (el) => el.type !== "restoreCheckpoint" && el.type !== "delete"
+    );
+    resolvedElements = [...baseFiltered, ...newEls];
+  } else {
+    resolvedElements = parsed.filter((el) => el.type !== "delete");
+  }
+  const cameras = parsed.filter((el) => el.type === "cameraUpdate");
+  const badRatio = cameras.find((c) => {
+    if (!c.width || !c.height) return false;
+    const ratio = c.width / c.height;
+    return Math.abs(ratio - 4 / 3) > 0.15;
+  });
+  const ratioHint = badRatio ? `
+Tip: your cameraUpdate used ${badRatio.width}x${badRatio.height} \u2014 try to stick with 4:3 aspect ratio (e.g. 400x300, 800x600) in future.` : "";
+  return { ok: true, resolvedElements, ratioHint };
+}
+function generateCheckpointId() {
+  return crypto.randomUUID().replace(/-/g, "").slice(0, 18);
+}
+
+// src/server.ts
+var __filename = fileURLToPath(import.meta.url);
+var __dirname = path.dirname(__filename);
+var DIST_DIR = __filename.endsWith(".ts") ? path.join(__dirname, "..", "dist") : __dirname;
+function registerTools(server, distDir, store) {
+  const resourceUri = "ui://excalidraw/mcp-app.html";
+  server.registerTool(
+    "read_me",
+    {
+      description: "Returns the Excalidraw element format reference with color palettes, examples, and tips. Call this BEFORE using create_view for the first time.",
+      annotations: { readOnlyHint: true }
+    },
+    async () => {
+      return { content: [{ type: "text", text: RECALL_CHEAT_SHEET }] };
+    }
+  );
+  registerAppTool(
+    server,
+    "create_view",
+    {
+      title: "Draw Diagram",
+      description: `Renders a hand-drawn diagram using Excalidraw elements.
+Elements stream in one by one with draw-on animations.
+Call read_me first to learn the element format.`,
+      inputSchema: z.object({
+        elements: z.string().describe(
+          "JSON array string of Excalidraw elements. Must be valid JSON \u2014 no comments, no trailing commas. Keep compact. Call read_me first for format reference."
+        )
+      }),
+      annotations: { readOnlyHint: true },
+      _meta: { ui: { resourceUri } }
+    },
+    async ({ elements }) => {
+      if (elements.length > MAX_INPUT_BYTES) {
+        return {
+          content: [{ type: "text", text: `Elements input exceeds ${MAX_INPUT_BYTES} byte limit. Reduce the number of elements or use checkpoints to build incrementally.` }],
+          isError: true
+        };
+      }
+      let parsed;
+      try {
+        parsed = JSON.parse(elements);
+      } catch (e) {
+        return {
+          content: [{ type: "text", text: `Invalid JSON in elements: ${e.message}. Ensure no comments, no trailing commas, and proper quoting.` }],
+          isError: true
+        };
+      }
+      const result = await resolveElements(parsed, store);
+      if (!result.ok) {
+        return { content: [{ type: "text", text: result.error }], isError: true };
+      }
+      const { resolvedElements, ratioHint } = result;
+      const checkpointId = generateCheckpointId();
+      await store.save(checkpointId, { elements: resolvedElements });
+      return {
+        content: [{ type: "text", text: `Diagram displayed! Checkpoint id: "${checkpointId}".
+If user asks to create a new diagram - simply create a new one from scratch.
+However, if the user wants to edit something on this diagram "${checkpointId}", take these steps:
+1) read widget context (using read_widget_context tool) to check if user made any manual edits first
+2) decide whether you want to make new diagram from scratch OR - use this one as starting checkpoint:
+  simply start from the first element [{"type":"restoreCheckpoint","id":"${checkpointId}"}, ...your new elements...]
+  this will use same diagram state as the user currently sees, including any manual edits they made in fullscreen, allowing you to add elements on top.
+  To remove elements, use: {"type":"delete","ids":"<id1>,<id2>"}${ratioHint}` }],
+        structuredContent: { checkpointId }
+      };
+    }
+  );
+  registerAppTool(
+    server,
+    "export_to_excalidraw",
+    {
+      description: "Upload diagram to excalidraw.com and return shareable URL.",
+      inputSchema: { json: z.string().describe("Serialized Excalidraw JSON") },
+      _meta: { ui: { visibility: ["app"] } }
+    },
+    async ({ json }) => {
+      if (json.length > MAX_INPUT_BYTES) {
+        return {
+          content: [{ type: "text", text: `Export data exceeds ${MAX_INPUT_BYTES} byte limit.` }],
+          isError: true
+        };
+      }
+      try {
+        const remappedJson = json;
+        const concatBuffers = (...bufs) => {
+          let total = 4;
+          for (const b of bufs) total += 4 + b.length;
+          const out = new Uint8Array(total);
+          const dv = new DataView(out.buffer);
+          dv.setUint32(0, 1);
+          let off = 4;
+          for (const b of bufs) {
+            dv.setUint32(off, b.length);
+            off += 4;
+            out.set(b, off);
+            off += b.length;
+          }
+          return out;
+        };
+        const te = new TextEncoder();
+        const fileMetadata = te.encode(JSON.stringify({}));
+        const dataBytes = te.encode(remappedJson);
+        const innerPayload = concatBuffers(fileMetadata, dataBytes);
+        const compressed = deflateSync(Buffer.from(innerPayload));
+        const cryptoKey = await globalThis.crypto.subtle.generateKey(
+          { name: "AES-GCM", length: 128 },
+          true,
+          ["encrypt"]
+        );
+        const iv = globalThis.crypto.getRandomValues(new Uint8Array(12));
+        const encrypted = await globalThis.crypto.subtle.encrypt(
+          { name: "AES-GCM", iv },
+          cryptoKey,
+          compressed
+        );
+        const encodingMeta = te.encode(JSON.stringify({
+          version: 2,
+          compression: "pako@1",
+          encryption: "AES-GCM"
+        }));
+        const payload = Buffer.from(concatBuffers(encodingMeta, iv, new Uint8Array(encrypted)));
+        const res = await fetch("https://json.excalidraw.com/api/v2/post/", {
+          method: "POST",
+          body: payload
+        });
+        if (!res.ok) throw new Error(`Upload failed: ${res.status}`);
+        const { id } = await res.json();
+        const jwk = await globalThis.crypto.subtle.exportKey("jwk", cryptoKey);
+        const url = `https://excalidraw.com/#json=${id},${jwk.k}`;
+        return { content: [{ type: "text", text: url }] };
+      } catch (err) {
+        return {
+          content: [{ type: "text", text: `Export failed: ${err.message}` }],
+          isError: true
+        };
+      }
+    }
+  );
+  registerAppTool(
+    server,
+    "save_checkpoint",
+    {
+      description: "Update checkpoint with user-edited state.",
+      inputSchema: { id: z.string(), data: z.string() },
+      _meta: { ui: { visibility: ["app"] } }
+    },
+    async ({ id, data }) => {
+      if (data.length > MAX_INPUT_BYTES) {
+        return {
+          content: [{ type: "text", text: `Checkpoint data exceeds ${MAX_INPUT_BYTES} byte limit.` }],
+          isError: true
+        };
+      }
+      try {
+        await store.save(id, JSON.parse(data));
+        return { content: [{ type: "text", text: "ok" }] };
+      } catch (err) {
+        return { content: [{ type: "text", text: `save failed: ${err.message}` }], isError: true };
+      }
+    }
+  );
+  registerAppTool(
+    server,
+    "read_checkpoint",
+    {
+      description: "Read checkpoint state for restore.",
+      inputSchema: { id: z.string() },
+      _meta: { ui: { visibility: ["app"] } }
+    },
+    async ({ id }) => {
+      try {
+        const data = await store.load(id);
+        if (!data) return { content: [{ type: "text", text: "" }] };
+        return { content: [{ type: "text", text: JSON.stringify(data) }] };
+      } catch (err) {
+        return { content: [{ type: "text", text: `read failed: ${err.message}` }], isError: true };
+      }
+    }
+  );
+  const cspMeta = {
+    ui: {
+      csp: {
+        resourceDomains: ["https://esm.sh"],
+        connectDomains: ["https://esm.sh"]
+      }
+    }
+  };
+  registerAppResource(
+    server,
+    resourceUri,
+    resourceUri,
+    { mimeType: RESOURCE_MIME_TYPE },
+    async () => {
+      const html = await fs.readFile(path.join(distDir, "mcp-app.html"), "utf-8");
+      return {
+        contents: [{
+          uri: resourceUri,
+          mimeType: RESOURCE_MIME_TYPE,
+          text: html,
+          _meta: {
+            ui: {
+              ...cspMeta.ui,
+              prefersBorder: true,
+              permissions: { clipboardWrite: {} }
+            }
+          }
+        }]
+      };
+    }
+  );
+}
+function createServer(store) {
+  const server = new McpServer({
+    name: "Excalidraw",
+    version: "1.0.0"
+  });
+  registerTools(server, DIST_DIR, store);
+  return server;
+}
+export {
+  createServer,
+  registerTools
+};