sketchmark 1.1.1 → 1.1.3

package/dist/sketchmark.iife.js

@@ -9249,11 +9249,13 @@ var AIDiagram = (function (exports) {
             this._config = _config;
             this._step = -1;
             this._pendingStepTimers = new Set();
+            this._pendingNarrationTimers = new Set();
             this._transforms = new Map();
             this._listeners = [];
             // ── Narration caption ──
             this._captionEl = null;
             this._captionTextEl = null;
+            this._narrationRunId = 0;
             // ── Annotations ──
             this._annotationLayer = null;
             this._annotations = [];
@@ -9516,20 +9518,30 @@ var AIDiagram = (function (exports) {
             }
             this.emit("step-change");
         }
+        _clearTimerBucket(bucket) {
+            bucket.forEach((id) => window.clearTimeout(id));
+            bucket.clear();
+        }
         _clearPendingStepTimers() {
-            this._pendingStepTimers.forEach((id) => window.clearTimeout(id));
-            this._pendingStepTimers.clear();
+            this._clearTimerBucket(this._pendingStepTimers);
         }
-        _scheduleStep(fn, delayMs) {
+        _cancelNarrationTyping() {
+            this._narrationRunId += 1;
+            this._clearTimerBucket(this._pendingNarrationTimers);
+        }
+        _scheduleTimer(fn, delayMs, bucket = this._pendingStepTimers) {
             if (delayMs <= 0) {
                 fn();
                 return;
             }
             const id = window.setTimeout(() => {
-                this._pendingStepTimers.delete(id);
+                bucket.delete(id);
                 fn();
             }, delayMs);
-            this._pendingStepTimers.add(id);
+            bucket.add(id);
+        }
+        _scheduleStep(fn, delayMs) {
+            this._scheduleTimer(fn, delayMs, this._pendingStepTimers);
         }
         _stepWaitMs(step, fallbackMs) {
             const delay = Math.max(0, step.delay ?? 0);
@@ -9573,6 +9585,7 @@ var AIDiagram = (function (exports) {
         }
         _clearAll() {
             this._clearPendingStepTimers();
+            this._cancelNarrationTyping();
             this._cancelSpeech();
             this._transforms.clear();
             // Nodes
@@ -10127,6 +10140,7 @@ var AIDiagram = (function (exports) {
         _doNarrate(text, silent) {
             if (!this._captionEl || !this._captionTextEl)
                 return;
+            this._cancelNarrationTyping();
             this._captionEl.style.opacity = "1";
             if (silent || !text) {
                 this._captionTextEl.textContent = text;
@@ -10137,12 +10151,16 @@ var AIDiagram = (function (exports) {
                 this._speak(text);
             // Typing effect
             this._captionTextEl.textContent = "";
+            const narrationRunId = this._narrationRunId;
             let charIdx = 0;
             const typeNext = () => {
+                if (this._narrationRunId !== narrationRunId || !this._captionTextEl)
+                    return;
                 if (charIdx < text.length) {
                     this._captionTextEl.textContent += text[charIdx++];
-                    const id = window.setTimeout(typeNext, ANIMATION.narrationTypeMs);
-                    this._pendingStepTimers.add(id);
+                    if (charIdx < text.length) {
+                        this._scheduleTimer(typeNext, ANIMATION.narrationTypeMs, this._pendingNarrationTimers);
+                    }
                 }
             };
             typeNext();
@@ -10252,12 +10270,11 @@ var AIDiagram = (function (exports) {
                     requestAnimationFrame(animate);
                 }
                 // After guide finishes: reveal rough.js element, remove guide
-                const id = window.setTimeout(() => {
+                this._scheduleTimer(() => {
                     roughEl.style.transition = `opacity 120ms ease`;
                     roughEl.style.opacity = "1";
                     guide.remove();
                 }, dur + 30);
-                this._pendingStepTimers.add(id);
             }));
         }
         _doAnnotationCircle(target, silent) {
@@ -10568,13 +10585,13 @@ var AIDiagram = (function (exports) {
 </head>
 <body>
   <div class="diagram">${svgStr}</div>
-  <details class="dsl"><summary style="cursor:pointer;color:#f0c96a">DSL source</summary><pre>${escapeHtml(dslSource)}</pre></details>
+  <details class="dsl"><summary style="cursor:pointer;color:#f0c96a">DSL source</summary><pre>${escapeHtml$1(dslSource)}</pre></details>
 </body>
 </html>`;
         const blob = new Blob([html], { type: 'text/html;charset=utf-8' });
         download(blob, opts.filename ?? 'diagram.html');
     }
-    function escapeHtml(s) {
+    function escapeHtml$1(s) {
         return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
     }
     // ── GIF stub (requires gifshot or gif.js at runtime) ──────
@@ -10800,7 +10817,7 @@ var AIDiagram = (function (exports) {
 .skm-canvas__viewport.is-panning{cursor:grabbing}
 .skm-canvas--dark .skm-canvas__viewport{background:#12100a}
 .skm-canvas__grid{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
-.skm-canvas__world{position:absolute;top:0;left:0;transform-origin:0 0;will-change:transform}
+.skm-canvas__world{position:absolute;top:0;left:0;transform-origin:0 0;}
 .skm-canvas__controls{position:absolute;right:14px;bottom:14px;display:flex;flex-direction:column;align-items:center;gap:4px;z-index:2}
 .skm-canvas__zoom{min-width:40px;text-align:center;color:#8a6040;font-size:10px}
 .skm-canvas__minimap{position:absolute;left:14px;bottom:14px;width:120px;height:80px;background:rgba(255,248,234,.94);border:1px solid #caba98;border-radius:6px;overflow:hidden;z-index:2}
@@ -11450,20 +11467,44 @@ var AIDiagram = (function (exports) {
   color: #fff;
 }
 
-.skm-editor__input {
+.skm-editor__surface {
+  position: relative;
   flex: 1;
-  width: 100%;
   min-height: 0;
-  border: 0;
-  outline: 0;
-  resize: none;
   background: #1c1608;
-  color: #e0c898;
+  overflow: hidden;
+}
+
+.skm-editor__highlight,
+.skm-editor__input {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
   padding: 12px 14px;
   font: inherit;
   font-size: 12px;
   line-height: 1.7;
   tab-size: 2;
+  white-space: pre-wrap;
+  overflow: auto;
+}
+
+.skm-editor__highlight {
+  margin: 0;
+  border: 0;
+  background: #1c1608;
+  color: #e0c898;
+  pointer-events: none;
+  word-break: break-word;
+}
+
+.skm-editor__input {
+  border: 0;
+  outline: 0;
+  resize: none;
+  background: transparent;
+  color: transparent;
   caret-color: #f0c96a;
 }
 
@@ -11471,6 +11512,40 @@ var AIDiagram = (function (exports) {
   color: #80633b;
 }
 
+.skm-editor__input::selection {
+  background: rgba(240, 201, 106, 0.22);
+}
+
+.skm-editor__token--keyword {
+  color: #e07040;
+}
+
+.skm-editor__token--property {
+  color: #70a8d0;
+}
+
+.skm-editor__token--string {
+  color: #8db870;
+}
+
+.skm-editor__token--number {
+  color: #d4a020;
+}
+
+.skm-editor__token--comment {
+  color: #6a5a3a;
+}
+
+.skm-editor__token--connector {
+  color: #c8b070;
+}
+
+.skm-editor__token--color {
+  color: var(--skm-editor-color, #f0c96a);
+  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.08);
+  font-weight: 600;
+}
+
 .skm-editor__error {
   display: none;
   flex-shrink: 0;
@@ -11487,12 +11562,112 @@ var AIDiagram = (function (exports) {
   display: block;
 }
 `;
+    const CONNECTORS = ["<-->", "<->", "-->", "<--", "---", "--", "->", "<-"];
+    const HEX_COLOR_RE = /#(?:[0-9a-fA-F]{3}|[0-9a-fA-F]{6})\b/g;
     function defaultFormatter(value) {
         return normalizeNewlines(value)
             .split("\n")
             .map((line) => line.replace(/[ \t]+$/g, ""))
             .join("\n");
     }
+    function escapeHtml(value) {
+        return value
+            .replace(/&/g, "&amp;")
+            .replace(/</g, "&lt;")
+            .replace(/>/g, "&gt;")
+            .replace(/"/g, "&quot;");
+    }
+    function wrapToken(kind, value) {
+        return `<span class="skm-editor__token skm-editor__token--${kind}">${escapeHtml(value)}</span>`;
+    }
+    function renderColorLiteral(value) {
+        return `<span class="skm-editor__token skm-editor__token--color" style="--skm-editor-color:${value}">${escapeHtml(value)}</span>`;
+    }
+    function renderStringToken(value) {
+        HEX_COLOR_RE.lastIndex = 0;
+        if (!HEX_COLOR_RE.test(value)) {
+            return wrapToken("string", value);
+        }
+        HEX_COLOR_RE.lastIndex = 0;
+        let html = "";
+        let lastIndex = 0;
+        let match = null;
+        while ((match = HEX_COLOR_RE.exec(value))) {
+            if (match.index > lastIndex) {
+                html += wrapToken("string", value.slice(lastIndex, match.index));
+            }
+            html += renderColorLiteral(match[0]);
+            lastIndex = match.index + match[0].length;
+        }
+        if (lastIndex < value.length) {
+            html += wrapToken("string", value.slice(lastIndex));
+        }
+        return html;
+    }
+    function renderPlainToken(value, nextChar) {
+        if (/^-?\d/.test(value)) {
+            return wrapToken("number", value);
+        }
+        if (nextChar === "=") {
+            return wrapToken("property", value);
+        }
+        if (KEYWORDS.has(value)) {
+            return wrapToken("keyword", value);
+        }
+        return escapeHtml(value);
+    }
+    function highlightLine(line) {
+        let html = "";
+        let index = 0;
+        while (index < line.length) {
+            const rest = line.slice(index);
+            if (rest.startsWith("//") || rest.startsWith("#")) {
+                html += wrapToken("comment", rest);
+                break;
+            }
+            if (line[index] === "\"") {
+                let end = index + 1;
+                while (end < line.length) {
+                    if (line[end] === "\"" && line[end - 1] !== "\\") {
+                        end += 1;
+                        break;
+                    }
+                    end += 1;
+                }
+                html += renderStringToken(line.slice(index, end));
+                index = end;
+                continue;
+            }
+            const connector = CONNECTORS.find((candidate) => line.startsWith(candidate, index));
+            if (connector) {
+                html += wrapToken("connector", connector);
+                index += connector.length;
+                continue;
+            }
+            const wordMatch = /^[A-Za-z_][A-Za-z0-9_-]*/.exec(rest);
+            if (wordMatch) {
+                const word = wordMatch[0];
+                const nextChar = line[index + word.length] ?? "";
+                html += renderPlainToken(word, nextChar);
+                index += word.length;
+                continue;
+            }
+            const numberMatch = /^-?\d+(?:\.\d+)?/.exec(rest);
+            if (numberMatch) {
+                html += wrapToken("number", numberMatch[0]);
+                index += numberMatch[0].length;
+                continue;
+            }
+            html += escapeHtml(line[index]);
+            index += 1;
+        }
+        return html;
+    }
+    function renderHighlightedValue(value) {
+        const normalized = normalizeNewlines(value);
+        const html = normalized.split("\n").map(highlightLine).join("\n");
+        return html || " ";
+    }
     class SketchmarkEditor {
         constructor(options) {
             this.emitter = new EventEmitter();
@@ -11529,16 +11704,23 @@ var AIDiagram = (function (exports) {
             if (options.showClearButton !== false)
                 this.toolbar.appendChild(clearButton);
             this.toolbar.appendChild(hint);
+            this.surface = document.createElement("div");
+            this.surface.className = "skm-editor__surface";
+            this.highlightElement = document.createElement("pre");
+            this.highlightElement.className = "skm-editor__highlight";
+            this.highlightElement.setAttribute("aria-hidden", "true");
             this.textarea = document.createElement("textarea");
             this.textarea.className = "skm-editor__input";
             this.textarea.spellcheck = false;
             this.textarea.placeholder = options.placeholder ?? "diagram\nbox a label=\"Hello\"\nend";
             this.textarea.value = normalizeNewlines(options.value ?? DEFAULT_CLEAR_VALUE);
             this.textarea.addEventListener("input", () => {
+                this.syncHighlight();
                 const payload = { value: this.getValue(), editor: this };
                 options.onChange?.(payload.value, this);
                 this.emitter.emit("change", payload);
             });
+            this.textarea.addEventListener("scroll", () => this.syncScroll());
             this.textarea.addEventListener("keydown", (event) => {
                 if ((event.ctrlKey || event.metaKey) && event.key === "Enter") {
                     event.preventDefault();
@@ -11550,9 +11732,12 @@ var AIDiagram = (function (exports) {
             if (options.showToolbar !== false) {
                 this.root.appendChild(this.toolbar);
             }
-            this.root.appendChild(this.textarea);
+            this.surface.appendChild(this.highlightElement);
+            this.surface.appendChild(this.textarea);
+            this.root.appendChild(this.surface);
             this.root.appendChild(this.errorElement);
             host.appendChild(this.root);
+            this.syncHighlight();
             if (options.autoFocus) {
                 this.focus();
             }
@@ -11562,6 +11747,7 @@ var AIDiagram = (function (exports) {
         }
         setValue(value, emitChange = false) {
             this.textarea.value = normalizeNewlines(value);
+            this.syncHighlight();
             if (emitChange) {
                 const payload = { value: this.getValue(), editor: this };
                 this.options.onChange?.(payload.value, this);
@@ -11603,6 +11789,14 @@ var AIDiagram = (function (exports) {
         destroy() {
             this.root.remove();
         }
+        syncHighlight() {
+            this.highlightElement.innerHTML = renderHighlightedValue(this.textarea.value);
+            this.syncScroll();
+        }
+        syncScroll() {
+            this.highlightElement.scrollTop = this.textarea.scrollTop;
+            this.highlightElement.scrollLeft = this.textarea.scrollLeft;
+        }
     }
 
     const EMBED_STYLE_ID = "sketchmark-embed-ui";

package/dist/ui/editor.d.ts

@@ -29,6 +29,8 @@ export interface SketchmarkEditorEvents extends Record<string, unknown> {
 export declare class SketchmarkEditor {
     readonly root: HTMLDivElement;
     readonly toolbar: HTMLDivElement;
+    readonly surface: HTMLDivElement;
+    readonly highlightElement: HTMLPreElement;
     readonly textarea: HTMLTextAreaElement;
     readonly errorElement: HTMLDivElement;
     private readonly emitter;
@@ -44,5 +46,7 @@ export declare class SketchmarkEditor {
     clearError(): void;
     on<K extends keyof SketchmarkEditorEvents>(event: K, listener: (payload: SketchmarkEditorEvents[K]) => void): () => void;
     destroy(): void;
+    private syncHighlight;
+    private syncScroll;
 }
 //# sourceMappingURL=editor.d.ts.map

package/dist/ui/editor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"editor.d.ts","sourceRoot":"","sources":["../../src/ui/editor.ts"],"names":[],"mappings":"AACA,OAAO,EAIL,KAAK,eAAe,EACrB,MAAM,UAAU,CAAC;AAuGlB,MAAM,WAAW,uBAAuB;IACtC,SAAS,EAAE,eAAe,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACtC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAC7D,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAC;CAC3D;AAED,MAAM,WAAW,4BAA4B;IAC3C,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,gBAAgB,CAAC;CAC1B;AAED,MAAM,WAAW,sBAAuB,SAAQ,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IACrE,MAAM,EAAE,4BAA4B,CAAC;IACrC,GAAG,EAAE,4BAA4B,CAAC;IAClC,KAAK,EAAE,4BAA4B,CAAC;IACpC,MAAM,EAAE,4BAA4B,CAAC;CACtC;AASD,qBAAa,gBAAgB;IAC3B,QAAQ,CAAC,IAAI,EAAE,cAAc,CAAC;IAC9B,QAAQ,CAAC,OAAO,EAAE,cAAc,CAAC;IACjC,QAAQ,CAAC,QAAQ,EAAE,mBAAmB,CAAC;IACvC,QAAQ,CAAC,YAAY,EAAE,cAAc,CAAC;IAEtC,OAAO,CAAC,QAAQ,CAAC,OAAO,CAA8C;IACtE,OAAO,CAAC,QAAQ,CAAC,OAAO,CAA0B;gBAEtC,OAAO,EAAE,uBAAuB;IAyE5C,QAAQ,IAAI,MAAM;IAIlB,QAAQ,CAAC,KAAK,EAAE,MAAM,EAAE,UAAU,UAAQ,GAAG,IAAI;IASjD,KAAK,IAAI,IAAI;IAIb,MAAM,IAAI,IAAI;IAOd,KAAK,IAAI,IAAI;IAOb,GAAG,IAAI,IAAI;IAMX,SAAS,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI;IAKhC,UAAU,IAAI,IAAI;IAKlB,EAAE,CAAC,CAAC,SAAS,MAAM,sBAAsB,EACvC,KAAK,EAAE,CAAC,EACR,QAAQ,EAAE,CAAC,OAAO,EAAE,sBAAsB,CAAC,CAAC,CAAC,KAAK,IAAI,GACrD,MAAM,IAAI;IAKb,OAAO,IAAI,IAAI;CAGhB"}
+{"version":3,"file":"editor.d.ts","sourceRoot":"","sources":["../../src/ui/editor.ts"],"names":[],"mappings":"AAEA,OAAO,EAIL,KAAK,eAAe,EACrB,MAAM,UAAU,CAAC;AAiKlB,MAAM,WAAW,uBAAuB;IACtC,SAAS,EAAE,eAAe,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACtC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAC7D,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAC;CAC3D;AAED,MAAM,WAAW,4BAA4B;IAC3C,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,gBAAgB,CAAC;CAC1B;AAED,MAAM,WAAW,sBAAuB,SAAQ,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IACrE,MAAM,EAAE,4BAA4B,CAAC;IACrC,GAAG,EAAE,4BAA4B,CAAC;IAClC,KAAK,EAAE,4BAA4B,CAAC;IACpC,MAAM,EAAE,4BAA4B,CAAC;CACtC;AAiID,qBAAa,gBAAgB;IAC3B,QAAQ,CAAC,IAAI,EAAE,cAAc,CAAC;IAC9B,QAAQ,CAAC,OAAO,EAAE,cAAc,CAAC;IACjC,QAAQ,CAAC,OAAO,EAAE,cAAc,CAAC;IACjC,QAAQ,CAAC,gBAAgB,EAAE,cAAc,CAAC;IAC1C,QAAQ,CAAC,QAAQ,EAAE,mBAAmB,CAAC;IACvC,QAAQ,CAAC,YAAY,EAAE,cAAc,CAAC;IAEtC,OAAO,CAAC,QAAQ,CAAC,OAAO,CAA8C;IACtE,OAAO,CAAC,QAAQ,CAAC,OAAO,CAA0B;gBAEtC,OAAO,EAAE,uBAAuB;IAsF5C,QAAQ,IAAI,MAAM;IAIlB,QAAQ,CAAC,KAAK,EAAE,MAAM,EAAE,UAAU,UAAQ,GAAG,IAAI;IAUjD,KAAK,IAAI,IAAI;IAIb,MAAM,IAAI,IAAI;IAOd,KAAK,IAAI,IAAI;IAOb,GAAG,IAAI,IAAI;IAMX,SAAS,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI;IAKhC,UAAU,IAAI,IAAI;IAKlB,EAAE,CAAC,CAAC,SAAS,MAAM,sBAAsB,EACvC,KAAK,EAAE,CAAC,EACR,QAAQ,EAAE,CAAC,OAAO,EAAE,sBAAsB,CAAC,CAAC,CAAC,KAAK,IAAI,GACrD,MAAM,IAAI;IAKb,OAAO,IAAI,IAAI;IAIf,OAAO,CAAC,aAAa;IAKrB,OAAO,CAAC,UAAU;CAInB"}

package/package.json

@@ -1,72 +1,71 @@
-{
-  "name": "sketchmark",
-  "version": "1.1.1",
-  "description": "A plain-text DSL for hand-drawn diagrams. Write boxes, edges, and groups as code — renders sketchy SVG/Canvas via rough.js with a built-in step-by-step animation system.",
-  "keywords": [
-    "diagram",
-    "dsl",
-    "rough.js",
-    "hand-drawn",
-    "ai",
-    "llm",
-    "visualization",
-    "animation",
-    "svg"
-  ],
-  "author": "sketchmark contributors",
-  "license": "MIT",
-  "type": "module",
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "exports": {
-    ".": {
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs",
-      "types": "./dist/index.d.ts"
-    }
-  },
-  "files": [
-    "dist",
-    "README.md",
-    "LICENSE"
-  ],
-  "scripts": {
-    "build": "rollup -c rollup.config.js",
-    "build:watch": "rollup -c rollup.config.js --watch",
-    "typecheck": "tsc --noEmit",
-    "lint": "eslint src --ext .ts",
-    "prepublishOnly": "npm run typecheck && npm run build",
-    "deploy": "wrangler deploy",
-    "preview": "wrangler dev"
-  },
-  "dependencies": {
-    "@chenglou/pretext": "^0.0.4"
-  },
-  "peerDependencies": {
-    "roughjs": "^4.6.0"
-  },
-  "devDependencies": {
-    "@rollup/plugin-node-resolve": "^15.2.3",
-    "@rollup/plugin-typescript": "^11.1.6",
-    "@types/node": "^20.0.0",
-    "@typescript-eslint/eslint-plugin": "^7.0.0",
-    "@typescript-eslint/parser": "^7.0.0",
-    "eslint": "^8.56.0",
-    "happy-dom": "^13.6.0",
-    "rollup": "^4.9.0",
-    "tslib": "^2.6.2",
-    "typescript": "^5.3.3",
-    "vitest": "^1.2.0",
-    "wrangler": "^4.76.0"
-  },
-  "sideEffects": false,
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/anmism/sketchmark"
-  },
-  "bugs": {
-    "url": "https://github.com/anmism/sketchmark/issues"
-  },
-  "homepage": "https://github.com/anmism/sketchmark#readme"
-}
+{
+  "name": "sketchmark",
+  "version": "1.1.3",
+  "description": "A plain-text DSL for hand-drawn diagrams. Write boxes, edges, and groups as code — renders sketchy SVG/Canvas via rough.js with a built-in step-by-step animation system.",
+  "keywords": [
+    "diagram",
+    "dsl",
+    "rough.js",
+    "hand-drawn",
+    "ai",
+    "llm",
+    "visualization",
+    "animation",
+    "svg"
+  ],
+  "author": "sketchmark contributors",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "rollup -c rollup.config.js",
+    "build:watch": "rollup -c rollup.config.js --watch",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint src --ext .ts",
+    "prepublishOnly": "npm run typecheck && npm run build",
+    "deploy": "wrangler deploy",
+    "preview": "wrangler dev"
+  },
+  "dependencies": {
+    "@chenglou/pretext": "^0.0.4"
+  },
+  "peerDependencies": {
+    "roughjs": "^4.6.0"
+  },
+  "devDependencies": {
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-typescript": "^11.1.6",
+    "@types/node": "^20.0.0",
+    "@typescript-eslint/eslint-plugin": "^7.0.0",
+    "@typescript-eslint/parser": "^7.0.0",
+    "eslint": "^8.56.0",
+    "happy-dom": "^13.6.0",
+    "rollup": "^4.9.0",
+    "tslib": "^2.6.2",
+    "typescript": "^5.3.3",
+    "vitest": "^1.2.0"
+  },
+  "sideEffects": false,
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/anmism/sketchmark"
+  },
+  "bugs": {
+    "url": "https://github.com/anmism/sketchmark/issues"
+  },
+  "homepage": "https://github.com/anmism/sketchmark#readme"
+}