interactive-drawer 0.4.0

package/dist/index.js

@@ -0,0 +1,1606 @@
+#!/usr/bin/env node
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __esm = (fn, res) => function __init() {
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+
+// src/shared.ts
+import crypto from "node:crypto";
+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);
+}
+var MAX_INPUT_BYTES, RECALL_CHEAT_SHEET, PSEUDO_TYPES;
+var init_shared = __esm({
+  "src/shared.ts"() {
+    "use strict";
+    MAX_INPUT_BYTES = 5 * 1024 * 1024;
+    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.
+`;
+    PSEUDO_TYPES = /* @__PURE__ */ new Set(["cameraUpdate", "delete", "restoreCheckpoint"]);
+  }
+});
+
+// src/svg-renderer.ts
+var svg_renderer_exports = {};
+__export(svg_renderer_exports, {
+  renderSvg: () => renderSvg
+});
+async function ensureInitialized() {
+  if (initialized) return;
+  const { JSDOM } = await import("jsdom");
+  const dom = new JSDOM("<!DOCTYPE html><html><body></body></html>", {
+    url: "http://localhost",
+    pretendToBeVisual: true
+  });
+  const g = globalThis;
+  if (!g.window) g.window = dom.window;
+  if (!g.document) g.document = dom.window.document;
+  if (!g.navigator) g.navigator = dom.window.navigator;
+  if (!g.HTMLElement) g.HTMLElement = dom.window.HTMLElement;
+  if (!g.SVGElement) g.SVGElement = dom.window.SVGElement;
+  if (!g.Element) g.Element = dom.window.Element;
+  if (!g.DOMParser) g.DOMParser = dom.window.DOMParser;
+  if (!g.XMLSerializer) g.XMLSerializer = dom.window.XMLSerializer;
+  if (!g.FontFace) {
+    g.FontFace = class FontFace {
+      family;
+      constructor(family, _source) {
+        this.family = family;
+      }
+      async load() {
+        return this;
+      }
+    };
+  }
+  if (!g.document.fonts) {
+    g.document.fonts = {
+      add: () => {
+      },
+      check: () => true,
+      load: async () => [],
+      ready: Promise.resolve(),
+      forEach: () => {
+      }
+    };
+  }
+  try {
+    const excalidraw = await import("@excalidraw/excalidraw");
+    exportToSvgFn = excalidraw.exportToSvg;
+    convertToExcalidrawElementsFn = excalidraw.convertToExcalidrawElements;
+    initialized = true;
+  } catch (err) {
+    console.error("Failed to initialize Excalidraw for server-side rendering:", err);
+    initialized = true;
+  }
+}
+function extractViewport(elements) {
+  let viewport = null;
+  for (const el of elements) {
+    if (el.type === "cameraUpdate") {
+      viewport = { x: el.x, y: el.y, width: el.width, height: el.height };
+    }
+  }
+  return viewport;
+}
+function computeSceneBounds(elements) {
+  let minX = Infinity;
+  let minY = Infinity;
+  for (const el of elements) {
+    if (el.x != null) {
+      minX = Math.min(minX, el.x);
+      minY = Math.min(minY, el.y);
+      if (el.points && Array.isArray(el.points)) {
+        for (const pt of el.points) {
+          minX = Math.min(minX, el.x + pt[0]);
+          minY = Math.min(minY, el.y + pt[1]);
+        }
+      }
+    }
+  }
+  return { minX: isFinite(minX) ? minX : 0, minY: isFinite(minY) ? minY : 0 };
+}
+async function renderSvg(elements) {
+  await ensureInitialized();
+  const viewport = extractViewport(elements);
+  const realElements = elements.filter((el) => !PSEUDO_TYPES.has(el.type));
+  if (realElements.length === 0) {
+    return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 300"><text x="200" y="150" text-anchor="middle" fill="#999">Empty diagram</text></svg>';
+  }
+  if (!exportToSvgFn || !convertToExcalidrawElementsFn) {
+    return generateFallbackSvg(realElements, viewport);
+  }
+  try {
+    const withDefaults = realElements.map(
+      (el) => el.label ? { ...el, label: { textAlign: "center", verticalAlign: "middle", ...el.label } } : el
+    );
+    const converted = convertToExcalidrawElementsFn(withDefaults, {
+      regenerateIds: false
+    }).map((el) => el.type === "text" ? { ...el, fontFamily: 1 } : el);
+    const svg = await exportToSvgFn({
+      elements: converted,
+      appState: {
+        viewBackgroundColor: "#ffffff",
+        exportBackground: true
+      },
+      files: null,
+      exportPadding: EXPORT_PADDING,
+      skipInliningFonts: true
+    });
+    if (!svg) {
+      return generateFallbackSvg(realElements, viewport);
+    }
+    if (viewport) {
+      const { minX, minY } = computeSceneBounds(converted);
+      const vbX = viewport.x - minX + EXPORT_PADDING;
+      const vbY = viewport.y - minY + EXPORT_PADDING;
+      svg.setAttribute("viewBox", `${vbX} ${vbY} ${viewport.width} ${viewport.height}`);
+    }
+    return svg.outerHTML;
+  } catch (err) {
+    console.error("exportToSvg failed, using fallback:", err);
+    return generateFallbackSvg(realElements, viewport);
+  }
+}
+function generateFallbackSvg(elements, viewport) {
+  const vp = viewport ?? { x: 0, y: 0, width: 800, height: 600 };
+  const parts = [];
+  parts.push(
+    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="${vp.x} ${vp.y} ${vp.width} ${vp.height}">`
+  );
+  parts.push(`<rect x="${vp.x}" y="${vp.y}" width="${vp.width}" height="${vp.height}" fill="#ffffff"/>`);
+  for (const el of elements) {
+    const fill = el.backgroundColor && el.backgroundColor !== "transparent" ? el.backgroundColor : "none";
+    const stroke = el.strokeColor ?? "#1e1e1e";
+    const sw = el.strokeWidth ?? 2;
+    switch (el.type) {
+      case "rectangle":
+        parts.push(
+          `<rect x="${el.x}" y="${el.y}" width="${el.width}" height="${el.height}" fill="${fill}" stroke="${stroke}" stroke-width="${sw}" rx="${el.roundness ? 8 : 0}"/>`
+        );
+        if (el.label?.text) {
+          const cx = el.x + el.width / 2;
+          const cy = el.y + el.height / 2;
+          const fs3 = el.label.fontSize ?? 16;
+          parts.push(
+            `<text x="${cx}" y="${cy}" text-anchor="middle" dominant-baseline="central" font-size="${fs3}" fill="${stroke}">${escapeXml(el.label.text)}</text>`
+          );
+        }
+        break;
+      case "ellipse":
+        parts.push(
+          `<ellipse cx="${el.x + el.width / 2}" cy="${el.y + el.height / 2}" rx="${el.width / 2}" ry="${el.height / 2}" fill="${fill}" stroke="${stroke}" stroke-width="${sw}"/>`
+        );
+        break;
+      case "diamond": {
+        const cx = el.x + el.width / 2;
+        const cy = el.y + el.height / 2;
+        parts.push(
+          `<polygon points="${cx},${el.y} ${el.x + el.width},${cy} ${cx},${el.y + el.height} ${el.x},${cy}" fill="${fill}" stroke="${stroke}" stroke-width="${sw}"/>`
+        );
+        break;
+      }
+      case "text":
+        parts.push(
+          `<text x="${el.x}" y="${el.y + (el.fontSize ?? 16)}" font-size="${el.fontSize ?? 16}" fill="${stroke}">${escapeXml(el.text ?? "")}</text>`
+        );
+        break;
+      case "arrow":
+        if (el.points && el.points.length >= 2) {
+          const pts = el.points.map((p) => `${el.x + p[0]},${el.y + p[1]}`).join(" ");
+          parts.push(
+            `<polyline points="${pts}" fill="none" stroke="${stroke}" stroke-width="${sw}" marker-end="${el.endArrowhead ? "url(#arrow)" : ""}"/>`
+          );
+        }
+        break;
+    }
+  }
+  parts.push('<defs><marker id="arrow" viewBox="0 0 10 10" refX="10" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse"><path d="M 0 0 L 10 5 L 0 10 z" fill="#1e1e1e"/></marker></defs>');
+  parts.push("</svg>");
+  return parts.join("\n");
+}
+function escapeXml(str) {
+  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+var EXPORT_PADDING, initialized, exportToSvgFn, convertToExcalidrawElementsFn;
+var init_svg_renderer = __esm({
+  "src/svg-renderer.ts"() {
+    "use strict";
+    init_shared();
+    EXPORT_PADDING = 20;
+    initialized = false;
+    exportToSvgFn = null;
+    convertToExcalidrawElementsFn = null;
+  }
+});
+
+// src/main.ts
+import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
+import { existsSync } from "node:fs";
+import { dirname, resolve as resolve2 } from "node:path";
+import { fileURLToPath as fileURLToPath2 } from "node:url";
+
+// src/checkpoint-store.ts
+import fs from "node:fs";
+import path from "node:path";
+import os from "node:os";
+var MAX_CHECKPOINT_BYTES = 5 * 1024 * 1024;
+var MAX_FILE_CHECKPOINTS = 100;
+function validateCheckpointId(id) {
+  if (!/^[a-zA-Z0-9_-]+$/.test(id)) {
+    throw new Error(`Invalid checkpoint id: must be alphanumeric, hyphens, or underscores`);
+  }
+  if (id.length > 64) {
+    throw new Error(`Invalid checkpoint id: exceeds 64 character limit`);
+  }
+}
+var FileCheckpointStore = class {
+  dir;
+  constructor() {
+    this.dir = path.join(os.tmpdir(), "excalidraw-mcp-checkpoints");
+    fs.mkdirSync(this.dir, { recursive: true });
+  }
+  async save(id, data) {
+    validateCheckpointId(id);
+    const serialized = JSON.stringify(data);
+    if (serialized.length > MAX_CHECKPOINT_BYTES) {
+      throw new Error(`Checkpoint data exceeds ${MAX_CHECKPOINT_BYTES} byte limit`);
+    }
+    const filePath = path.join(this.dir, `${id}.json`);
+    if (!path.resolve(filePath).startsWith(path.resolve(this.dir) + path.sep)) {
+      throw new Error("Invalid checkpoint path");
+    }
+    await fs.promises.writeFile(filePath, serialized);
+    await this.pruneOldCheckpoints();
+  }
+  async load(id) {
+    validateCheckpointId(id);
+    const filePath = path.join(this.dir, `${id}.json`);
+    if (!path.resolve(filePath).startsWith(path.resolve(this.dir) + path.sep)) {
+      throw new Error("Invalid checkpoint path");
+    }
+    try {
+      const raw = await fs.promises.readFile(filePath, "utf-8");
+      return JSON.parse(raw);
+    } catch {
+      return null;
+    }
+  }
+  /** Remove oldest checkpoints when count exceeds the limit. */
+  async pruneOldCheckpoints() {
+    try {
+      const entries = await fs.promises.readdir(this.dir);
+      const jsonFiles = entries.filter((f) => f.endsWith(".json"));
+      if (jsonFiles.length <= MAX_FILE_CHECKPOINTS) return;
+      const stats = await Promise.all(
+        jsonFiles.map(async (f) => ({
+          name: f,
+          mtime: (await fs.promises.stat(path.join(this.dir, f))).mtimeMs
+        }))
+      );
+      stats.sort((a, b) => a.mtime - b.mtime);
+      const toRemove = stats.slice(0, stats.length - MAX_FILE_CHECKPOINTS);
+      await Promise.all(
+        toRemove.map((f) => fs.promises.unlink(path.join(this.dir, f.name)).catch(() => {
+        }))
+      );
+    } catch {
+    }
+  }
+};
+var REDIS_TTL_SECONDS = 30 * 24 * 60 * 60;
+
+// src/cli.ts
+function parseCliArgs(argv) {
+  const args = {
+    stdio: false,
+    port: parseInt(process.env.PORT ?? "3001", 10),
+    help: false,
+    version: false
+  };
+  for (let i = 0; i < argv.length; i++) {
+    switch (argv[i]) {
+      case "--stdio":
+        args.stdio = true;
+        break;
+      case "--port":
+        args.port = parseInt(argv[++i], 10);
+        break;
+      case "--base-url":
+        args.baseUrl = argv[++i]?.replace(/\/+$/, "");
+        break;
+      case "--help":
+        args.help = true;
+        break;
+      case "--version":
+        args.version = true;
+        break;
+    }
+  }
+  return args;
+}
+
+// src/http-app.ts
+import { hostHeaderValidation } from "@modelcontextprotocol/sdk/server/middleware/hostHeaderValidation.js";
+import { StreamableHTTPServerTransport } from "@modelcontextprotocol/sdk/server/streamableHttp.js";
+import cors from "cors";
+import express from "express";
+import { resolve } from "node:path";
+function renderLandingPage(baseUrl) {
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Excalidraw Sidecar MCP</title>
+<style>
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+         background: #fafafa; color: #1e1e1e; min-height: 100vh;
+         display: flex; align-items: center; justify-content: center; }
+  .container { max-width: 640px; padding: 40px; }
+  h1 { font-size: 28px; margin-bottom: 8px; }
+  .subtitle { color: #6b7280; font-size: 16px; margin-bottom: 32px; }
+  .status { display: flex; align-items: center; gap: 8px; margin-bottom: 24px;
+            padding: 12px 16px; background: #ecfdf5; border-radius: 8px; border: 1px solid #d1fae5; }
+  .dot { width: 10px; height: 10px; border-radius: 50%; background: #22c55e; }
+  .status span { color: #15803d; font-size: 14px; font-weight: 500; }
+  .section { margin-bottom: 24px; }
+  .section h2 { font-size: 16px; color: #374151; margin-bottom: 12px; }
+  .endpoint { display: flex; justify-content: space-between; align-items: center;
+              padding: 10px 14px; background: #fff; border: 1px solid #e5e7eb;
+              border-radius: 6px; margin-bottom: 8px; font-size: 14px; }
+  .endpoint .path { font-family: 'SF Mono', Monaco, monospace; color: #4a9eed; font-weight: 500; }
+  .endpoint .desc { color: #6b7280; }
+  .config { background: #1e1e1e; color: #e5e7eb; padding: 16px; border-radius: 8px;
+            font-family: 'SF Mono', Monaco, monospace; font-size: 13px;
+            line-height: 1.6; overflow-x: auto; white-space: pre; }
+  .config .key { color: #7dd3fc; }
+  .config .str { color: #86efac; }
+  a { color: #4a9eed; text-decoration: none; }
+  a:hover { text-decoration: underline; }
+  .footer { margin-top: 32px; color: #9ca3af; font-size: 13px; text-align: center; }
+</style>
+</head>
+<body>
+<div class="container">
+  <h1>Excalidraw Sidecar MCP</h1>
+  <p class="subtitle">Remote MCP server for diagram creation by external LLMs</p>
+
+  <div class="status"><div class="dot"></div><span>Server running</span></div>
+
+  <div class="section">
+    <h2>Endpoints</h2>
+    <div class="endpoint"><span class="path">POST /mcp</span><span class="desc">MCP Streamable HTTP</span></div>
+    <div class="endpoint"><span class="path">GET /api/sessions/:key</span><span class="desc">Session metadata</span></div>
+    <div class="endpoint"><span class="path">GET /api/sessions/:key/elements</span><span class="desc">Elements JSON</span></div>
+    <div class="endpoint"><span class="path">PUT /api/sessions/:key/elements</span><span class="desc">Update elements</span></div>
+    <div class="endpoint"><span class="path">GET /api/sessions/:key/svg</span><span class="desc">Rendered SVG</span></div>
+    <div class="endpoint"><span class="path">/view/:key</span><span class="desc">Viewer + editor page</span></div>
+  </div>
+
+  <div class="section">
+    <h2>Connect from Claude Desktop</h2>
+    <div class="config">{
+  <span class="key">"mcpServers"</span>: {
+    <span class="key">"excalidraw"</span>: {
+      <span class="key">"url"</span>: <span class="str">"${baseUrl}/mcp"</span>
+    }
+  }
+}</div>
+  </div>
+
+  <div class="section">
+    <h2>Connect via CLI</h2>
+    <div class="config">node mcp-client.mjs --server ${baseUrl} create-session</div>
+  </div>
+
+  <div class="footer">
+    <a href="https://github.com/anyin233/excalidraw-sidecar-mcp">GitHub</a>
+    &nbsp;&middot;&nbsp; No LLM configuration needed &mdash; this server provides tools, external LLMs connect to it.
+  </div>
+</div>
+</body>
+</html>`;
+}
+function detectBaseUrl(req, fallbackPort) {
+  if (process.env.BASE_URL) return process.env.BASE_URL;
+  const fwdHost = req.headers["x-forwarded-host"];
+  const host = (Array.isArray(fwdHost) ? fwdHost[0] : fwdHost) ?? req.headers.host;
+  if (host) {
+    const fwdProto = req.headers["x-forwarded-proto"];
+    const proto = (Array.isArray(fwdProto) ? fwdProto[0] : fwdProto) ?? "http";
+    return `${proto}://${host}`;
+  }
+  return `http://localhost:${fallbackPort}`;
+}
+function createApp(createServerFn, sessionStore, viewerDir, port = 3001) {
+  const app = express();
+  app.use(express.json());
+  const allowedHosts = ["localhost", "127.0.0.1", "::1"];
+  if (process.env.BASE_URL) {
+    try {
+      allowedHosts.push(new URL(process.env.BASE_URL).hostname);
+    } catch {
+    }
+    app.use(hostHeaderValidation(allowedHosts));
+  }
+  app.use(cors());
+  app.use("/api/sessions", express.json({ limit: "5mb" }));
+  app.all("/mcp", async (req, res) => {
+    const server = createServerFn(detectBaseUrl(req, port));
+    const transport = new StreamableHTTPServerTransport({
+      sessionIdGenerator: void 0
+    });
+    res.on("close", () => {
+      transport.close().catch(() => {
+      });
+      server.close().catch(() => {
+      });
+    });
+    try {
+      await server.connect(transport);
+      await transport.handleRequest(req, res, req.body);
+    } catch (error) {
+      console.error("MCP error:", error);
+      if (!res.headersSent) {
+        res.status(500).json({
+          jsonrpc: "2.0",
+          error: { code: -32603, message: "Internal server error" },
+          id: null
+        });
+      }
+    }
+  });
+  const UUID_RE = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
+  function getKey(req, res) {
+    const k = Array.isArray(req.params.key) ? req.params.key[0] : req.params.key;
+    if (!UUID_RE.test(k)) {
+      res.status(400).json({ error: "Invalid session key format" });
+      return null;
+    }
+    return k;
+  }
+  app.get("/api/sessions/:key", (req, res) => {
+    const key = getKey(req, res);
+    if (!key) return;
+    const session = sessionStore.getSession(key);
+    if (!session) {
+      res.status(404).json({ error: "Session not found or expired" });
+      return;
+    }
+    res.json({
+      sessionKey: session.sessionKey,
+      expiresAt: session.expiresAt.toISOString(),
+      hasElements: session.elements.length > 0
+    });
+  });
+  app.get("/api/sessions/:key/elements", (req, res) => {
+    const key = getKey(req, res);
+    if (!key) return;
+    const session = sessionStore.getSession(key);
+    if (!session) {
+      res.status(404).json({ error: "Session not found or expired" });
+      return;
+    }
+    res.json({ elements: session.elements });
+  });
+  app.put("/api/sessions/:key/elements", (req, res) => {
+    const key = getKey(req, res);
+    if (!key) return;
+    const { elements } = req.body;
+    if (!Array.isArray(elements)) {
+      res.status(400).json({ error: "Request body must contain an 'elements' array" });
+      return;
+    }
+    const updated = sessionStore.updateElements(key, elements);
+    if (!updated) {
+      res.status(404).json({ error: "Session not found or expired" });
+      return;
+    }
+    res.json({ ok: true });
+  });
+  app.get("/api/sessions/:key/svg", async (req, res) => {
+    const key = getKey(req, res);
+    if (!key) return;
+    const session = sessionStore.getSession(key);
+    if (!session) {
+      res.status(404).json({ error: "Session not found or expired" });
+      return;
+    }
+    if (session.elements.length === 0) {
+      res.status(404).json({ error: "Session has no diagram yet" });
+      return;
+    }
+    let svg = session.svgCache;
+    if (!svg) {
+      try {
+        const { renderSvg: renderSvg2 } = await Promise.resolve().then(() => (init_svg_renderer(), svg_renderer_exports));
+        svg = await renderSvg2(session.elements);
+        sessionStore.updateSvgCache(key, svg);
+      } catch (err) {
+        console.error("SVG rendering error:", err);
+        res.status(500).json({ error: "SVG rendering failed" });
+        return;
+      }
+    }
+    res.setHeader("Content-Type", "image/svg+xml");
+    res.send(svg);
+  });
+  app.get("/", (_req, res) => {
+    const baseUrl = process.env.BASE_URL ?? `http://localhost:${port}`;
+    res.setHeader("Content-Type", "text/html; charset=utf-8");
+    res.send(renderLandingPage(baseUrl));
+  });
+  if (viewerDir) {
+    const absDir = resolve(viewerDir);
+    app.use(express.static(absDir, { index: false }));
+    app.get("/{*path}", (_req, res) => {
+      res.sendFile("index.html", { root: absDir });
+    });
+  }
+  return app;
+}
+
+// src/remote-server.ts
+init_shared();
+init_svg_renderer();
+import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
+import { z } from "zod/v4";
+function createRemoteServer(sessionStore, checkpointStore, baseUrl) {
+  const server = new McpServer({
+    name: "Interactive Drawer Remote",
+    version: "1.0.0"
+  });
+  server.registerTool(
+    "create_session",
+    {
+      description: "Create a new drawing session. Returns a session key and viewer URL. Sessions expire after 24 hours.",
+      annotations: { readOnlyHint: false }
+    },
+    async () => {
+      const session = sessionStore.createSession();
+      const viewerUrl = `${baseUrl}/view/${session.sessionKey}`;
+      return {
+        content: [
+          {
+            type: "text",
+            text: `Session created!
+Session key: "${session.sessionKey}"
+Viewer URL: ${viewerUrl}
+Expires at: ${session.expiresAt.toISOString()}
+
+Use this session key with create_view to draw diagrams. Share the viewer URL so users can see and edit the diagram in their browser.`
+          }
+        ]
+      };
+    }
+  );
+  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 () => {
+      const preamble = `**Server base URL: ${baseUrl}**
+All viewer links in this session use this base URL. When you call create_session, the returned viewer URL will start with ${baseUrl}/view/...
+
+`;
+      return { content: [{ type: "text", text: preamble + RECALL_CHEAT_SHEET }] };
+    }
+  );
+  server.registerTool(
+    "create_view",
+    {
+      description: `Renders a diagram using Excalidraw elements and returns an SVG image + viewer link.
+Call read_me first to learn the element format. Requires a session_key from create_session.`,
+      inputSchema: {
+        session_key: z.string().describe("Session key from create_session."),
+        elements: z.string().describe(
+          "JSON array string of Excalidraw elements. Must be valid JSON \u2014 no comments, no trailing commas. Call read_me first for format reference."
+        )
+      },
+      annotations: { readOnlyHint: false }
+    },
+    async ({ session_key, elements }) => {
+      const session = sessionStore.getSession(session_key);
+      if (!session) {
+        return {
+          content: [
+            {
+              type: "text",
+              text: "Session not found or expired. Create a new session with create_session."
+            }
+          ],
+          isError: true
+        };
+      }
+      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, checkpointStore);
+      if (!result.ok) {
+        return { content: [{ type: "text", text: result.error }], isError: true };
+      }
+      const { resolvedElements, ratioHint } = result;
+      sessionStore.updateElements(session_key, resolvedElements);
+      const checkpointId = generateCheckpointId();
+      await checkpointStore.save(checkpointId, { elements: resolvedElements });
+      let svgString;
+      try {
+        svgString = await renderSvg(resolvedElements);
+      } catch (err) {
+        svgString = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 300"><text x="200" y="150" text-anchor="middle" fill="#999">SVG rendering failed</text></svg>';
+        console.error("SVG rendering error:", err);
+      }
+      sessionStore.updateSvgCache(session_key, svgString);
+      const viewerUrl = `${baseUrl}/view/${session_key}`;
+      const svgBase64 = Buffer.from(svgString).toString("base64");
+      return {
+        content: [
+          {
+            type: "text",
+            text: `Diagram rendered! Checkpoint id: "${checkpointId}".
+Viewer URL: ${viewerUrl}
+
+To edit this diagram, use restoreCheckpoint:
+  [{"type":"restoreCheckpoint","id":"${checkpointId}"}, ...your new elements...]
+
+To remove elements: {"type":"delete","ids":"<id1>,<id2>"}${ratioHint}`
+          },
+          {
+            type: "image",
+            data: svgBase64,
+            mimeType: "image/svg+xml"
+          }
+        ]
+      };
+    }
+  );
+  server.registerTool(
+    "get_current_view",
+    {
+      description: "Get the current diagram view for a session. Returns the latest SVG (including any user edits made via the viewer page).",
+      inputSchema: {
+        session_key: z.string().describe("Session key from create_session.")
+      },
+      annotations: { readOnlyHint: true }
+    },
+    async ({ session_key }) => {
+      const session = sessionStore.getSession(session_key);
+      if (!session) {
+        return {
+          content: [
+            {
+              type: "text",
+              text: "Session not found or expired. Create a new session with create_session."
+            }
+          ],
+          isError: true
+        };
+      }
+      if (session.elements.length === 0) {
+        return {
+          content: [
+            {
+              type: "text",
+              text: "Session has no diagram yet. Use create_view to draw one first."
+            }
+          ],
+          isError: true
+        };
+      }
+      let svgString = session.svgCache;
+      if (!svgString) {
+        try {
+          svgString = await renderSvg(session.elements);
+          sessionStore.updateSvgCache(session_key, svgString);
+        } catch (err) {
+          svgString = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 300"><text x="200" y="150" text-anchor="middle" fill="#999">SVG rendering failed</text></svg>';
+          console.error("SVG rendering error:", err);
+        }
+      }
+      const viewerUrl = `${baseUrl}/view/${session_key}`;
+      const svgBase64 = Buffer.from(svgString).toString("base64");
+      return {
+        content: [
+          {
+            type: "text",
+            text: `Current diagram view.
+Viewer URL: ${viewerUrl}`
+          },
+          {
+            type: "image",
+            data: svgBase64,
+            mimeType: "image/svg+xml"
+          }
+        ]
+      };
+    }
+  );
+  return server;
+}
+
+// src/server.ts
+init_shared();
+import { registerAppResource, registerAppTool, RESOURCE_MIME_TYPE } from "@modelcontextprotocol/ext-apps/server";
+import { McpServer as McpServer2 } from "@modelcontextprotocol/sdk/server/mcp.js";
+import fs2 from "node:fs/promises";
+import path2 from "node:path";
+import { fileURLToPath } from "node:url";
+import { deflateSync } from "node:zlib";
+import { z as z2 } from "zod/v4";
+var __filename = fileURLToPath(import.meta.url);
+var __dirname = path2.dirname(__filename);
+var DIST_DIR = __filename.endsWith(".ts") ? path2.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: z2.object({
+        elements: z2.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: z2.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: z2.string(), data: z2.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: z2.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 fs2.readFile(path2.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 McpServer2({
+    name: "Excalidraw",
+    version: "1.0.0"
+  });
+  registerTools(server, DIST_DIR, store);
+  return server;
+}
+
+// src/session-store.ts
+import crypto2 from "node:crypto";
+var SESSION_TTL_MS = 24 * 60 * 60 * 1e3;
+var CLEANUP_INTERVAL_MS = 10 * 60 * 1e3;
+var MAX_SESSIONS = 100;
+var SessionStore = class {
+  sessions = /* @__PURE__ */ new Map();
+  cleanupTimer;
+  constructor() {
+    this.cleanupTimer = setInterval(() => this.cleanup(), CLEANUP_INTERVAL_MS);
+  }
+  /**
+   * Create a new drawing session with 24h TTL.
+   *
+   * @returns The newly created session.
+   */
+  createSession() {
+    if (this.sessions.size >= MAX_SESSIONS) {
+      let oldestKey = null;
+      let oldestTime = Infinity;
+      for (const [key, session2] of this.sessions) {
+        if (session2.createdAt.getTime() < oldestTime) {
+          oldestTime = session2.createdAt.getTime();
+          oldestKey = key;
+        }
+      }
+      if (oldestKey) this.sessions.delete(oldestKey);
+    }
+    const sessionKey = crypto2.randomUUID();
+    const now = /* @__PURE__ */ new Date();
+    const session = {
+      sessionKey,
+      elements: [],
+      svgCache: null,
+      createdAt: now,
+      expiresAt: new Date(now.getTime() + SESSION_TTL_MS)
+    };
+    this.sessions.set(sessionKey, session);
+    return session;
+  }
+  /**
+   * Retrieve a session by key. Returns null if not found or expired.
+   *
+   * @param key - Session UUID.
+   * @returns The session, or null if not found/expired.
+   */
+  getSession(key) {
+    const session = this.sessions.get(key);
+    if (!session) return null;
+    if (/* @__PURE__ */ new Date() > session.expiresAt) {
+      this.sessions.delete(key);
+      return null;
+    }
+    return session;
+  }
+  /**
+   * Update the elements for a session. Invalidates SVG cache.
+   *
+   * @param key - Session UUID.
+   * @param elements - New resolved elements array.
+   * @returns True if the session was found and updated.
+   */
+  updateElements(key, elements) {
+    const session = this.getSession(key);
+    if (!session) return false;
+    session.elements = elements;
+    session.svgCache = null;
+    return true;
+  }
+  /**
+   * Cache rendered SVG for a session.
+   *
+   * @param key - Session UUID.
+   * @param svg - SVG string to cache.
+   * @returns True if the session was found and updated.
+   */
+  updateSvgCache(key, svg) {
+    const session = this.getSession(key);
+    if (!session) return false;
+    session.svgCache = svg;
+    return true;
+  }
+  /** Remove all expired sessions. Called periodically by setInterval. */
+  cleanup() {
+    const now = /* @__PURE__ */ new Date();
+    for (const [key, session] of this.sessions) {
+      if (now > session.expiresAt) {
+        this.sessions.delete(key);
+      }
+    }
+  }
+  /** Stop the cleanup timer. Call on shutdown. */
+  destroy() {
+    clearInterval(this.cleanupTimer);
+  }
+};
+
+// src/main.ts
+async function startStdioServer(createServerFn) {
+  await createServerFn().connect(new StdioServerTransport());
+}
+async function startStreamableHTTPServer(createServerFn, sessionStore, viewerDir, port = 3001) {
+  const app = createApp(createServerFn, sessionStore, viewerDir, port);
+  const httpServer = app.listen(port, (err) => {
+    if (err) {
+      console.error("Failed to start server:", err);
+      process.exit(1);
+    }
+    console.log(`MCP server listening on http://localhost:${port}/mcp`);
+    console.log(`Session API available at http://localhost:${port}/api/sessions/`);
+    if (viewerDir) {
+      console.log(`Viewer available at http://localhost:${port}/`);
+    }
+    if (process.env.BASE_URL) {
+      console.log(`Viewer links will use base URL: ${process.env.BASE_URL}`);
+    }
+  });
+  const shutdown = () => {
+    console.log("\nShutting down...");
+    sessionStore.destroy();
+    httpServer.close(() => process.exit(0));
+  };
+  process.on("SIGINT", shutdown);
+  process.on("SIGTERM", shutdown);
+}
+async function main() {
+  const args = parseCliArgs(process.argv.slice(2));
+  if (args.help) {
+    console.log(`Usage: interactive-drawer [options]
+
+Options:
+  --stdio          Studio mode (stdin/stdout MCP transport)
+  --port <number>  HTTP server port (default: 3001, web mode only)
+  --base-url <url> Public URL for viewer links (web mode only)
+  --help           Show this help
+  --version        Show version
+
+Environment Variables:
+  PORT             Same as --port
+  BASE_URL         Same as --base-url`);
+    process.exit(0);
+  }
+  if (args.version) {
+    console.log("0.4.0");
+    process.exit(0);
+  }
+  const checkpointStore = new FileCheckpointStore();
+  if (args.stdio) {
+    const factory = () => createServer(checkpointStore);
+    await startStdioServer(factory);
+  } else {
+    const sessionStore = new SessionStore();
+    if (args.baseUrl) process.env.BASE_URL = args.baseUrl;
+    const __dirname2 = dirname(fileURLToPath2(import.meta.url));
+    const viewerDir = resolve2(__dirname2, "viewer");
+    const hasViewer = existsSync(resolve2(viewerDir, "index.html"));
+    if (!process.env.BASE_URL && hasViewer) {
+      process.env.BASE_URL = `http://localhost:${args.port}`;
+    }
+    const factory = (baseUrl) => createRemoteServer(sessionStore, checkpointStore, baseUrl);
+    await startStreamableHTTPServer(factory, sessionStore, hasViewer ? viewerDir : void 0, args.port);
+  }
+}
+main().catch((e) => {
+  console.error(e);
+  process.exit(1);
+});
+export {
+  startStdioServer,
+  startStreamableHTTPServer
+};