npm - sketchmark - Versions diffs - 1.1.1 → 1.1.3 - Mend

sketchmark 1.1.1 → 1.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Potentially problematic release.

This version of sketchmark might be problematic. Click here for more details.

Files changed (10) hide show

package/dist/animation/index.d.ts +5 -0
package/dist/animation/index.d.ts.map +1 -1
package/dist/index.cjs +213 -19
package/dist/index.cjs.map +1 -1
package/dist/index.js +213 -19
package/dist/index.js.map +1 -1
package/dist/sketchmark.iife.js +213 -19
package/dist/ui/editor.d.ts +4 -0
package/dist/ui/editor.d.ts.map +1 -1
package/package.json +71 -72

package/dist/index.js CHANGED Viewed

@@ -9246,11 +9246,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 = [];
@@ -9513,20 +9515,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);
@@ -9570,6 +9582,7 @@ class AnimationController {
     }
     _clearAll() {
         this._clearPendingStepTimers();
+        this._cancelNarrationTyping();
         this._cancelSpeech();
         this._transforms.clear();
         // Nodes
@@ -10124,6 +10137,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;
@@ -10134,12 +10148,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();
@@ -10249,12 +10267,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) {
@@ -10565,13 +10582,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) ──────
@@ -10797,7 +10814,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}
@@ -11447,20 +11464,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;
 }
@@ -11468,6 +11509,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;
@@ -11484,12 +11559,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();
@@ -11526,16 +11701,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();
@@ -11547,9 +11729,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();
         }
@@ -11559,6 +11744,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);
@@ -11600,6 +11786,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";