sketchmark 1.1.1 → 1.1.3

package/dist/animation/index.d.ts

@@ -20,6 +20,7 @@ export declare class AnimationController {
     private _config?;
     private _step;
     private _pendingStepTimers;
+    private _pendingNarrationTimers;
     private _transforms;
     private _listeners;
     readonly drawTargetEdges: Set<string>;
@@ -34,6 +35,7 @@ export declare class AnimationController {
     private readonly _groupDescendantIds;
     private _captionEl;
     private _captionTextEl;
+    private _narrationRunId;
     private _annotationLayer;
     private _annotations;
     private _pointerEl;
@@ -67,7 +69,10 @@ export declare class AnimationController {
     prev(): boolean;
     play(msPerStep?: number): Promise<void>;
     goTo(index: number): void;
+    private _clearTimerBucket;
     private _clearPendingStepTimers;
+    private _cancelNarrationTyping;
+    private _scheduleTimer;
     private _scheduleStep;
     private _stepWaitMs;
     private _playbackWaitMs;

package/dist/animation/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/animation/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/animation/index.ts"],"names":[],"mappings":"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"}

package/dist/index.cjs

@@ -9248,11 +9248,13 @@ class AnimationController {
         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 = [];
@@ -9515,20 +9517,30 @@ class AnimationController {
         }
         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);
@@ -9572,6 +9584,7 @@ class AnimationController {
     }
     _clearAll() {
         this._clearPendingStepTimers();
+        this._cancelNarrationTyping();
         this._cancelSpeech();
         this._transforms.clear();
         // Nodes
@@ -10126,6 +10139,7 @@ class AnimationController {
     _doNarrate(text, silent) {
         if (!this._captionEl || !this._captionTextEl)
             return;
+        this._cancelNarrationTyping();
         this._captionEl.style.opacity = "1";
         if (silent || !text) {
             this._captionTextEl.textContent = text;
@@ -10136,12 +10150,16 @@ class AnimationController {
             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();
@@ -10251,12 +10269,11 @@ class AnimationController {
                 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) {
@@ -10567,13 +10584,13 @@ function exportHTML(svg, dslSource, opts = {}) {
 </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) ──────
@@ -10799,7 +10816,7 @@ const CANVAS_CSS = `
 .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}
@@ -11449,20 +11466,44 @@ const EDITOR_CSS = `
   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;
 }
 
@@ -11470,6 +11511,40 @@ const EDITOR_CSS = `
   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;
@@ -11486,12 +11561,112 @@ const EDITOR_CSS = `
   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();
@@ -11528,16 +11703,23 @@ class SketchmarkEditor {
         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();
@@ -11549,9 +11731,12 @@ class SketchmarkEditor {
         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();
         }
@@ -11561,6 +11746,7 @@ class SketchmarkEditor {
     }
     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);
@@ -11602,6 +11788,14 @@ class SketchmarkEditor {
     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";