sketchmark 1.1.3 → 1.1.5

package/dist/sketchmark.iife.js

@@ -8808,6 +8808,7 @@ var AIDiagram = (function (exports) {
         }, delayMs);
     }
     const NODE_DRAW_GUIDE_ATTR = "data-node-draw-guide";
+    const TEXT_REVEAL_CLIP_ATTR = "data-text-reveal-clip-id";
     const GUIDED_NODE_SHAPES = new Set([
         "box",
         "circle",
@@ -8936,6 +8937,7 @@ var AIDiagram = (function (exports) {
         });
         const text = nodeText(el);
         if (text) {
+            clearTextReveal(text);
             text.style.opacity = text.style.transition = "";
         }
     }
@@ -8981,55 +8983,74 @@ var AIDiagram = (function (exports) {
         clearNodeDrawStyles(el);
     }
     // ── Text writing reveal (clipPath) ───────────────────────
+    function clearTextReveal(textEl, clipId) {
+        const activeClipId = textEl.getAttribute(TEXT_REVEAL_CLIP_ATTR);
+        const shouldClearCurrentClip = !clipId || activeClipId === clipId;
+        if (shouldClearCurrentClip) {
+            textEl.removeAttribute("clip-path");
+            textEl.removeAttribute(TEXT_REVEAL_CLIP_ATTR);
+        }
+        const clipIdToRemove = clipId ?? activeClipId;
+        if (clipIdToRemove) {
+            textEl.ownerSVGElement?.querySelector(`#${clipIdToRemove}`)?.remove();
+        }
+    }
     function animateTextReveal(textEl, delayMs, durationMs = ANIMATION.textRevealMs) {
         const ownerSvg = textEl.ownerSVGElement;
+        clearTextReveal(textEl);
         if (!ownerSvg) {
             // fallback: just fade
             textEl.style.transition = `opacity ${ANIMATION.textFade}ms ease ${delayMs}ms`;
             textEl.style.opacity = "1";
             return;
         }
-        // Make text visible but clipped to zero width
+        const bbox = textEl.getBBox?.();
+        if (!bbox || bbox.width === 0) {
+            // fallback if can't measure
+            textEl.style.transition = `opacity ${ANIMATION.textFade}ms ease ${delayMs}ms`;
+            textEl.style.opacity = "1";
+            return;
+        }
+        let defs = ownerSvg.querySelector("defs");
+        if (!defs) {
+            defs = document.createElementNS(SVG_NS$1, "defs");
+            ownerSvg.insertBefore(defs, ownerSvg.firstChild);
+        }
+        const clipId = `skm-clip-${Date.now()}-${Math.random().toString(36).slice(2, 6)}`;
+        const clipPath = document.createElementNS(SVG_NS$1, "clipPath");
+        clipPath.setAttribute("id", clipId);
+        const rect = document.createElementNS(SVG_NS$1, "rect");
+        rect.setAttribute("x", String(bbox.x - 2));
+        rect.setAttribute("y", String(bbox.y - 2));
+        rect.setAttribute("width", "0");
+        rect.setAttribute("height", String(bbox.height + 4));
+        clipPath.appendChild(rect);
+        defs.appendChild(clipPath);
+        textEl.setAttribute("clip-path", `url(#${clipId})`);
+        textEl.setAttribute(TEXT_REVEAL_CLIP_ATTR, clipId);
         textEl.style.opacity = "1";
-        // We need to wait for text to be visible before we can measure it
+        requestAnimationFrame(() => requestAnimationFrame(() => {
+            rect.style.transition = `width ${durationMs}ms cubic-bezier(.4,0,.2,1) ${delayMs}ms`;
+            rect.setAttribute("width", String(bbox.width + 4));
+        }));
+        // Cleanup after animation
         setTimeout(() => {
-            const bbox = textEl.getBBox?.();
-            if (!bbox || bbox.width === 0) {
-                // fallback if can't measure
-                return;
-            }
-            let defs = ownerSvg.querySelector("defs");
-            if (!defs) {
-                defs = document.createElementNS(SVG_NS$1, "defs");
-                ownerSvg.insertBefore(defs, ownerSvg.firstChild);
-            }
-            const clipId = `skm-clip-${Date.now()}-${Math.random().toString(36).slice(2, 6)}`;
-            const clipPath = document.createElementNS(SVG_NS$1, "clipPath");
-            clipPath.setAttribute("id", clipId);
-            const rect = document.createElementNS(SVG_NS$1, "rect");
-            rect.setAttribute("x", String(bbox.x - 2));
-            rect.setAttribute("y", String(bbox.y - 2));
-            rect.setAttribute("width", "0");
-            rect.setAttribute("height", String(bbox.height + 4));
-            clipPath.appendChild(rect);
-            defs.appendChild(clipPath);
-            textEl.setAttribute("clip-path", `url(#${clipId})`);
-            requestAnimationFrame(() => requestAnimationFrame(() => {
-                rect.style.transition = `width ${durationMs}ms cubic-bezier(.4,0,.2,1)`;
-                rect.setAttribute("width", String(bbox.width + 4));
-            }));
-            // Cleanup after animation
-            setTimeout(() => {
-                textEl.removeAttribute("clip-path");
-                clipPath.remove();
-            }, durationMs + 50);
-        }, delayMs);
+            clearTextReveal(textEl, clipId);
+        }, delayMs + durationMs + 50);
     }
-    function animateNodeDraw(el, strokeDur = ANIMATION.nodeStrokeDur) {
+    function animateNodeDraw(el, strokeDur = ANIMATION.nodeStrokeDur, textOnlyDur = ANIMATION.textRevealMs) {
         showDrawEl(el);
         const guide = nodeGuidePathEl(el);
         if (!guide) {
             const firstPath = el.querySelector("path");
+            const text = nodeText(el);
+            if (!firstPath && el.dataset.nodeShape === "text" && text) {
+                animateTextReveal(text, 0, textOnlyDur);
+                setTimeout(() => {
+                    clearNodeDrawStyles(el);
+                }, textOnlyDur + 80);
+                return;
+            }
             if (!firstPath?.style.strokeDasharray)
                 prepareForDraw(el);
             animateShapeDraw(el, strokeDur, ANIMATION.nodeStagger);
@@ -9423,8 +9444,17 @@ var AIDiagram = (function (exports) {
         }
         /** Enable/disable browser text-to-speech for narrate steps */
         get tts() { return this._tts; }
-        set tts(on) { this._tts = on; if (!on)
-            this._cancelSpeech(); }
+        set tts(on) {
+            const next = !!on;
+            const changed = next !== this._tts;
+            this._tts = next;
+            if (!next) {
+                this._cancelSpeech();
+                return;
+            }
+            if (changed)
+                this._warmUpSpeech();
+        }
         get currentStep() {
             return this._step;
         }
@@ -10050,7 +10080,7 @@ var AIDiagram = (function (exports) {
                 if (!nodeGuidePathEl(nodeEl) && !nodeEl.querySelector("path")?.style.strokeDasharray) {
                     prepareNodeForDraw(nodeEl);
                 }
-                animateNodeDraw(nodeEl, step.duration ?? ANIMATION.nodeStrokeDur);
+                animateNodeDraw(nodeEl, step.duration ?? ANIMATION.nodeStrokeDur, step.duration ?? ANIMATION.textRevealMs);
             }
         }
         // ── erase ─────────────────────────────────────────────────
@@ -10703,7 +10733,7 @@ var AIDiagram = (function (exports) {
     }
 
     function render(options) {
-        const { container: rawContainer, dsl, renderer = "svg", injectCSS = true, svgOptions = {}, canvasOptions = {}, onNodeClick, onReady, } = options;
+        const { container: rawContainer, dsl, renderer = "svg", injectCSS = true, tts, svgOptions = {}, canvasOptions = {}, onNodeClick, onReady, } = options;
         if (injectCSS && !document.getElementById("ai-diagram-css")) {
             const style = document.createElement("style");
             style.id = "ai-diagram-css";
@@ -10752,6 +10782,9 @@ var AIDiagram = (function (exports) {
             const containerEl = el instanceof SVGSVGElement ? undefined : el;
             anim = new AnimationController(svg, ast.steps, containerEl, rc, ast.config);
         }
+        if (typeof tts === "boolean") {
+            anim.tts = tts;
+        }
         onReady?.(anim, svg);
         return {
             scene,
@@ -10803,13 +10836,14 @@ var AIDiagram = (function (exports) {
     const CANVAS_STYLE_ID = "sketchmark-canvas-ui";
     const CANVAS_CSS = `
 .skm-canvas{display:flex;flex-direction:column;width:100%;height:100%;min-height:320px;overflow:hidden;border:1px solid #caba98;border-radius:10px;background:#f8f4ea;color:#3a2010;font-family:"Courier New",monospace}
-.skm-canvas__animbar{display:flex;align-items:center;gap:6px;padding:6px 10px;background:#eee7d8;border-bottom:1px solid #caba98;flex-shrink:0}
+.skm-canvas__animbar{display:flex;align-items:center;gap:6px;padding:6px 10px;background:#eee7d8;border-bottom:1px solid #caba98;flex-shrink:0;flex-wrap:wrap}
 .skm-canvas__status{min-width:96px;text-align:center;color:#6a4820;font-size:11px}
 .skm-canvas__label{color:#8a6040;font-size:11px;font-style:italic}
 .skm-canvas__spacer{flex:1}
 .skm-canvas__stats{color:#9a7848;font-size:10px}
 .skm-canvas__button{border:1px solid #caba98;background:#f5eedd;color:#3a2010;border-radius:6px;padding:4px 9px;font:inherit;font-size:11px;cursor:pointer;transition:background .12s ease,border-color .12s ease,color .12s ease}
 .skm-canvas__button:hover:not(:disabled){background:#c8a060;border-color:#c8a060;color:#fff}
+.skm-canvas__button.is-active{background:#c8a060;border-color:#c8a060;color:#fff}
 .skm-canvas__button:disabled{opacity:.45;cursor:default}
 .skm-canvas__error{display:none;padding:8px 12px;background:#280a0a;border-bottom:1px solid #5a1818;color:#f07070;font-size:11px;line-height:1.4;white-space:pre-wrap;flex-shrink:0}
 .skm-canvas__error.is-visible{display:block}
@@ -10831,6 +10865,8 @@ var AIDiagram = (function (exports) {
             this.instance = null;
             this.emitter = new EventEmitter();
             this.dsl = "";
+            this.showCaption = true;
+            this.ttsOverride = null;
             this.panX = 60;
             this.panY = 60;
             this.zoom = 1;
@@ -10918,6 +10954,8 @@ var AIDiagram = (function (exports) {
             this.options = options;
             this.renderer = options.renderer ?? "svg";
             this.theme = options.theme ?? "light";
+            this.showCaption = options.showCaption !== false;
+            this.ttsOverride = typeof options.tts === "boolean" ? options.tts : null;
             this.dsl = normalizeNewlines(options.dsl ?? "");
             injectStyleOnce(CANVAS_STYLE_ID, CANVAS_CSS);
             const host = resolveContainer(options.container);
@@ -10936,6 +10974,8 @@ var AIDiagram = (function (exports) {
         <span class="skm-canvas__status">No steps</span>
         <button type="button" class="skm-canvas__button" data-action="next">Next</button>
         <button type="button" class="skm-canvas__button" data-action="play">Play</button>
+        <button type="button" class="skm-canvas__button" data-action="toggle-caption">Caption On</button>
+        <button type="button" class="skm-canvas__button" data-action="toggle-tts">TTS Off</button>
         <span class="skm-canvas__label"></span>
         <span class="skm-canvas__spacer"></span>
         <span class="skm-canvas__stats"></span>
@@ -10970,6 +11010,8 @@ var AIDiagram = (function (exports) {
             this.prevButton = this.root.querySelector('[data-action="prev"]');
             this.nextButton = this.root.querySelector('[data-action="next"]');
             this.resetButton = this.root.querySelector('[data-action="reset"]');
+            this.captionButton = this.root.querySelector('[data-action="toggle-caption"]');
+            this.ttsButton = this.root.querySelector('[data-action="toggle-tts"]');
             this.gridPattern = this.root.querySelector(`#${patternId}`);
             this.gridDot = this.gridPattern.querySelector("circle");
             this.root.querySelector('[data-action="fit"]')?.addEventListener("click", () => this.fitContent());
@@ -10980,6 +11022,8 @@ var AIDiagram = (function (exports) {
             this.prevButton.addEventListener("click", () => this.prevStep());
             this.nextButton.addEventListener("click", () => this.nextStep());
             this.playButton.addEventListener("click", () => void this.play());
+            this.captionButton.addEventListener("click", () => this.setCaptionVisible(!this.showCaption));
+            this.ttsButton.addEventListener("click", () => this.setTtsEnabled(!this.getTtsEnabled()));
             this.viewport.addEventListener("pointerdown", this.onPointerDown);
             this.viewport.addEventListener("pointermove", this.onPointerMove);
             this.viewport.addEventListener("pointerup", this.onStopPanning);
@@ -11001,6 +11045,16 @@ var AIDiagram = (function (exports) {
             if (renderNow)
                 this.render();
         }
+        setCaptionVisible(visible) {
+            this.showCaption = visible;
+            this.applyCaptionVisibility(this.instance);
+            this.syncToggleUi();
+        }
+        setTtsEnabled(enabled) {
+            this.ttsOverride = enabled;
+            this.applyTtsSetting(this.instance);
+            this.syncToggleUi();
+        }
         bindEditor(editor, options = {}) {
             this.editorCleanup?.();
             const renderOnRun = options.renderOnRun !== false;
@@ -11045,6 +11099,8 @@ var AIDiagram = (function (exports) {
                     onNodeClick: this.options.onNodeClick,
                 });
                 this.instance = instance;
+                this.applyCaptionVisibility(instance);
+                this.applyTtsSetting(instance);
                 this.statsLabel.textContent = `${instance.scene.nodes.length}n / ${instance.scene.edges.length}e / ${instance.scene.groups.length}g`;
                 if (this.renderer === "svg") {
                     this.animUnsub = instance.anim.on((event) => {
@@ -11177,6 +11233,37 @@ var AIDiagram = (function (exports) {
             this.zoom = clampedZoom;
             this.applyTransform();
         }
+        applyCaptionVisibility(instance) {
+            const caption = instance?.anim.captionElement;
+            if (!caption)
+                return;
+            caption.style.display = this.showCaption ? "" : "none";
+            caption.setAttribute("aria-hidden", this.showCaption ? "false" : "true");
+        }
+        applyTtsSetting(instance) {
+            if (!instance || this.ttsOverride === null)
+                return;
+            instance.anim.tts = this.ttsOverride;
+        }
+        getTtsEnabled() {
+            if (this.ttsOverride !== null)
+                return this.ttsOverride;
+            return !!this.instance?.anim.tts;
+        }
+        syncToggleUi() {
+            const canToggleCaption = this.renderer === "svg" && !!this.instance;
+            const canToggleTts = canToggleCaption &&
+                typeof speechSynthesis !== "undefined";
+            const ttsEnabled = this.getTtsEnabled();
+            this.captionButton.textContent = this.showCaption ? "Caption On" : "Caption Off";
+            this.captionButton.classList.toggle("is-active", this.showCaption);
+            this.captionButton.setAttribute("aria-pressed", this.showCaption ? "true" : "false");
+            this.captionButton.disabled = !canToggleCaption;
+            this.ttsButton.textContent = ttsEnabled ? "TTS On" : "TTS Off";
+            this.ttsButton.classList.toggle("is-active", ttsEnabled);
+            this.ttsButton.setAttribute("aria-pressed", ttsEnabled ? "true" : "false");
+            this.ttsButton.disabled = !canToggleTts;
+        }
         syncAnimationUi() {
             const anim = this.instance?.anim;
             const canAnimate = this.renderer === "svg" && !!anim && anim.total > 0;
@@ -11187,6 +11274,7 @@ var AIDiagram = (function (exports) {
                 this.nextButton.disabled = true;
                 this.resetButton.disabled = true;
                 this.playButton.disabled = true;
+                this.syncToggleUi();
                 return;
             }
             this.stepDisplay.textContent = anim.currentStep < 0 ? `${anim.total} steps` : `${anim.currentStep + 1} / ${anim.total}`;
@@ -11195,6 +11283,7 @@ var AIDiagram = (function (exports) {
             this.nextButton.disabled = !anim.canNext;
             this.resetButton.disabled = false;
             this.playButton.disabled = this.playInFlight || !anim.canNext;
+            this.syncToggleUi();
         }
         getStepTarget(stepItem) {
             if (!stepItem)
@@ -11851,6 +11940,7 @@ var AIDiagram = (function (exports) {
 
 .skm-embed__controls {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   gap: 8px;
   padding: 10px 12px;
@@ -11868,6 +11958,13 @@ var AIDiagram = (function (exports) {
   display: none;
 }
 
+.skm-embed__controls-group {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
 .skm-embed__button {
   border: 1px solid #caba98;
   background: #f5eedd;
@@ -11886,6 +11983,12 @@ var AIDiagram = (function (exports) {
   color: #fff;
 }
 
+.skm-embed__button.is-active {
+  background: #c8a060;
+  border-color: #c8a060;
+  color: #fff;
+}
+
 .skm-embed--dark .skm-embed__button {
   border-color: #4a3520;
   background: #22190e;
@@ -11903,6 +12006,17 @@ var AIDiagram = (function (exports) {
   cursor: default;
 }
 
+.skm-embed__zoom {
+  min-width: 48px;
+  text-align: center;
+  color: #8a6040;
+  font-size: 11px;
+}
+
+.skm-embed--dark .skm-embed__zoom {
+  color: #d0b176;
+}
+
 .skm-embed__step {
   margin-left: auto;
   min-width: 96px;
@@ -11921,13 +12035,19 @@ var AIDiagram = (function (exports) {
             this.emitter = new EventEmitter();
             this.animUnsub = null;
             this.playInFlight = false;
+            this.showCaption = true;
+            this.ttsOverride = null;
+            this.zoom = 1;
             this.offsetX = 0;
             this.offsetY = 0;
+            this.autoFitEnabled = true;
             this.motionFrame = null;
             this.resizeObserver = null;
             this.options = options;
             this.dsl = normalizeNewlines(options.dsl);
             this.theme = options.theme ?? "light";
+            this.showCaption = options.showCaption !== false;
+            this.ttsOverride = typeof options.tts === "boolean" ? options.tts : null;
             injectStyleOnce(EMBED_STYLE_ID, EMBED_CSS);
             const host = resolveContainer(options.container);
             host.innerHTML = "";
@@ -11943,10 +12063,22 @@ var AIDiagram = (function (exports) {
       </div>
       <div class="skm-embed__error"></div>
       <div class="skm-embed__controls">
-        <button type="button" class="skm-embed__button" data-action="reset">Reset</button>
-        <button type="button" class="skm-embed__button" data-action="prev">Prev</button>
-        <button type="button" class="skm-embed__button" data-action="next">Next</button>
-        <button type="button" class="skm-embed__button" data-action="play">Play</button>
+        <div class="skm-embed__controls-group">
+          <button type="button" class="skm-embed__button" data-action="zoom-out">-</button>
+          <span class="skm-embed__zoom">100%</span>
+          <button type="button" class="skm-embed__button" data-action="zoom-in">+</button>
+          <button type="button" class="skm-embed__button" data-action="fit">Reset</button>
+        </div>
+        <div class="skm-embed__controls-group">
+          <button type="button" class="skm-embed__button" data-action="restart">Restart</button>
+          <button type="button" class="skm-embed__button" data-action="prev">Prev</button>
+          <button type="button" class="skm-embed__button" data-action="next">Next</button>
+          <button type="button" class="skm-embed__button" data-action="play">Play</button>
+        </div>
+        <div class="skm-embed__controls-group">
+          <button type="button" class="skm-embed__button" data-action="toggle-caption">Caption On</button>
+          <button type="button" class="skm-embed__button" data-action="toggle-tts">TTS Off</button>
+        </div>
         <span class="skm-embed__step">No steps</span>
       </div>
     `;
@@ -11956,17 +12088,28 @@ var AIDiagram = (function (exports) {
             this.errorElement = this.root.querySelector(".skm-embed__error");
             this.controlsElement = this.root.querySelector(".skm-embed__controls");
             this.stepInfoElement = this.root.querySelector(".skm-embed__step");
-            this.btnReset = this.root.querySelector('[data-action="reset"]');
+            this.zoomInfoElement = this.root.querySelector(".skm-embed__zoom");
+            this.btnFit = this.root.querySelector('[data-action="fit"]');
+            this.btnZoomIn = this.root.querySelector('[data-action="zoom-in"]');
+            this.btnZoomOut = this.root.querySelector('[data-action="zoom-out"]');
+            this.btnRestart = this.root.querySelector('[data-action="restart"]');
             this.btnPrev = this.root.querySelector('[data-action="prev"]');
             this.btnNext = this.root.querySelector('[data-action="next"]');
             this.btnPlay = this.root.querySelector('[data-action="play"]');
+            this.btnCaption = this.root.querySelector('[data-action="toggle-caption"]');
+            this.btnTts = this.root.querySelector('[data-action="toggle-tts"]');
             this.controlsElement.classList.toggle("is-hidden", options.showControls === false);
-            this.btnReset.addEventListener("click", () => this.resetAnimation());
+            this.btnFit.addEventListener("click", () => this.resetView());
+            this.btnZoomIn.addEventListener("click", () => this.zoomIn());
+            this.btnZoomOut.addEventListener("click", () => this.zoomOut());
+            this.btnRestart.addEventListener("click", () => this.resetAnimation());
             this.btnPrev.addEventListener("click", () => this.prevStep());
             this.btnNext.addEventListener("click", () => this.nextStep());
             this.btnPlay.addEventListener("click", () => {
                 void this.play();
             });
+            this.btnCaption.addEventListener("click", () => this.setCaptionVisible(!this.showCaption));
+            this.btnTts.addEventListener("click", () => this.setTtsEnabled(!this.getTtsEnabled()));
             if (typeof ResizeObserver !== "undefined") {
                 this.resizeObserver = new ResizeObserver(() => {
                     this.positionViewport(false);
@@ -11984,6 +12127,16 @@ var AIDiagram = (function (exports) {
             if (renderNow)
                 this.render();
         }
+        setCaptionVisible(visible) {
+            this.showCaption = visible;
+            this.applyCaptionVisibility(this.instance);
+            this.syncToggleControls();
+        }
+        setTtsEnabled(enabled) {
+            this.ttsOverride = enabled;
+            this.applyTtsSetting(this.instance);
+            this.syncToggleControls();
+        }
         setSize(width, height) {
             this.applySize(width, height);
             this.positionViewport(false);
@@ -12007,7 +12160,12 @@ var AIDiagram = (function (exports) {
             this.animUnsub = null;
             this.instance?.anim?.destroy();
             this.instance = null;
+            this.autoFitEnabled = true;
+            this.zoom = 1;
+            this.offsetX = 0;
+            this.offsetY = 0;
             this.diagramWrap.innerHTML = "";
+            this.applyTransform();
             try {
                 const instance = render({
                     container: this.diagramWrap,
@@ -12023,6 +12181,8 @@ var AIDiagram = (function (exports) {
                     onNodeClick: this.options.onNodeClick,
                 });
                 this.instance = instance;
+                this.applyCaptionVisibility(instance);
+                this.applyTtsSetting(instance);
                 this.animUnsub = instance.anim.on((event) => {
                     this.syncControls();
                     if (event.type === "step-change") {
@@ -12088,6 +12248,21 @@ var AIDiagram = (function (exports) {
             this.syncControls();
             this.positionViewport(true);
         }
+        fitToViewport(animated = false) {
+            if (!this.instance?.svg)
+                return;
+            this.autoFitEnabled = true;
+            this.positionViewport(animated);
+        }
+        resetView(animated = false) {
+            this.fitToViewport(animated);
+        }
+        zoomIn() {
+            this.zoomAroundViewportCenter(1.2);
+        }
+        zoomOut() {
+            this.zoomAroundViewportCenter(0.8);
+        }
         exportSVG(filename) {
             this.instance?.exportSVG(filename);
         }
@@ -12110,10 +12285,15 @@ var AIDiagram = (function (exports) {
             return typeof value === "number" ? `${value}px` : value;
         }
         syncControls() {
+            this.syncAnimationControls();
+            this.syncViewControls();
+            this.syncToggleControls();
+        }
+        syncAnimationControls() {
             const anim = this.instance?.anim;
             if (!anim || !anim.total) {
                 this.stepInfoElement.textContent = "No steps";
-                this.btnReset.disabled = true;
+                this.btnRestart.disabled = true;
                 this.btnPrev.disabled = true;
                 this.btnNext.disabled = true;
                 this.btnPlay.disabled = true;
@@ -12121,56 +12301,69 @@ var AIDiagram = (function (exports) {
             }
             this.stepInfoElement.textContent =
                 anim.currentStep < 0 ? `${anim.total} steps` : `${anim.currentStep + 1} / ${anim.total}`;
-            this.btnReset.disabled = false;
+            this.btnRestart.disabled = false;
             this.btnPrev.disabled = !anim.canPrev;
             this.btnNext.disabled = !anim.canNext;
             this.btnPlay.disabled = this.playInFlight || !anim.canNext;
         }
+        syncViewControls() {
+            const hasView = !!this.instance?.svg;
+            const zoomMin = this.getZoomMin();
+            const zoomMax = this.getZoomMax();
+            this.zoomInfoElement.textContent = `${Math.round(this.zoom * 100)}%`;
+            this.btnFit.disabled = !hasView;
+            this.btnZoomOut.disabled = !hasView || this.zoom <= zoomMin + 0.001;
+            this.btnZoomIn.disabled = !hasView || this.zoom >= zoomMax - 0.001;
+        }
         positionViewport(animated) {
-            if (!this.instance?.svg)
-                return;
-            const svg = this.instance.svg;
-            const svgWidth = parseFloat(svg.getAttribute("width") || "0");
-            const svgHeight = parseFloat(svg.getAttribute("height") || "0");
-            if (!svgWidth || !svgHeight)
+            const size = this.getContentSize();
+            if (!size)
                 return;
+            const { width: svgWidth, height: svgHeight } = size;
             const viewportRect = this.viewport.getBoundingClientRect();
             const viewWidth = viewportRect.width || this.viewport.clientWidth;
             const viewHeight = viewportRect.height || this.viewport.clientHeight;
             if (!viewWidth || !viewHeight)
                 return;
-            const sceneIsLarge = svgWidth > viewWidth || svgHeight > viewHeight;
+            if (this.autoFitEnabled) {
+                this.zoom = this.getFitZoom(svgWidth, svgHeight, viewWidth, viewHeight);
+            }
+            this.syncViewControls();
+            const scaledWidth = svgWidth * this.zoom;
+            const scaledHeight = svgHeight * this.zoom;
+            const focusTarget = this.getFocusTarget();
+            const sceneIsLarge = scaledWidth > viewWidth || scaledHeight > viewHeight;
             const shouldFocus = sceneIsLarge &&
                 this.options.autoFocus !== false &&
-                !!this.getFocusTarget();
+                !!focusTarget;
             if (!shouldFocus) {
-                this.animateTo(svgWidth <= viewWidth ? (viewWidth - svgWidth) / 2 : 0, svgHeight <= viewHeight ? (viewHeight - svgHeight) / 2 : 0, animated);
+                this.animateTo(scaledWidth <= viewWidth ? (viewWidth - scaledWidth) / 2 : 0, scaledHeight <= viewHeight ? (viewHeight - scaledHeight) / 2 : 0, animated);
                 return;
             }
-            const target = this.findTargetElement(this.getFocusTarget());
+            const target = this.findTargetElement(focusTarget);
             if (!target) {
                 this.animateTo(0, 0, animated);
                 return;
             }
-            const currentRect = target.getBoundingClientRect();
-            const sceneX = currentRect.left - viewportRect.left - this.offsetX;
-            const sceneY = currentRect.top - viewportRect.top - this.offsetY;
-            const targetCenterX = sceneX + currentRect.width / 2;
-            const targetCenterY = sceneY + currentRect.height / 2;
-            let nextX = viewWidth / 2 - targetCenterX;
-            let nextY = viewHeight / 2 - targetCenterY;
+            const targetBox = this.getTargetBox(target, viewportRect);
+            if (!targetBox) {
+                this.animateTo(0, 0, animated);
+                return;
+            }
+            let nextX = viewWidth / 2 - targetBox.centerX;
+            let nextY = viewHeight / 2 - targetBox.centerY;
             const padding = this.options.focusPadding ?? 24;
-            if (svgWidth <= viewWidth) {
-                nextX = (viewWidth - svgWidth) / 2;
+            if (scaledWidth <= viewWidth) {
+                nextX = (viewWidth - scaledWidth) / 2;
             }
             else {
-                nextX = clamp(nextX, viewWidth - svgWidth - padding, padding);
+                nextX = clamp(nextX, viewWidth - scaledWidth - padding, padding);
             }
-            if (svgHeight <= viewHeight) {
-                nextY = (viewHeight - svgHeight) / 2;
+            if (scaledHeight <= viewHeight) {
+                nextY = (viewHeight - scaledHeight) / 2;
             }
             else {
-                nextY = clamp(nextY, viewHeight - svgHeight - padding, padding);
+                nextY = clamp(nextY, viewHeight - scaledHeight - padding, padding);
             }
             this.animateTo(nextX, nextY, animated);
         }
@@ -12202,7 +12395,109 @@ var AIDiagram = (function (exports) {
             this.motionFrame = requestAnimationFrame(frame);
         }
         applyTransform() {
-            this.world.style.transform = `translate(${this.offsetX}px, ${this.offsetY}px)`;
+            this.world.style.transform = `translate(${this.offsetX}px, ${this.offsetY}px) scale(${this.zoom})`;
+            this.zoomInfoElement.textContent = `${Math.round(this.zoom * 100)}%`;
+        }
+        getContentSize() {
+            if (!this.instance?.svg)
+                return null;
+            const svg = this.instance.svg;
+            const width = parseFloat(svg.getAttribute("width") || "0");
+            const height = parseFloat(svg.getAttribute("height") || "0");
+            if (!width || !height)
+                return null;
+            return { width, height };
+        }
+        getFitZoom(svgWidth, svgHeight, viewWidth, viewHeight) {
+            const padding = this.getFitPadding(viewWidth, viewHeight);
+            const availableWidth = Math.max(viewWidth - padding * 2, 1);
+            const availableHeight = Math.max(viewHeight - padding * 2, 1);
+            const nextZoom = Math.min(availableWidth / svgWidth, availableHeight / svgHeight, 1);
+            return clamp(nextZoom || 1, this.getZoomMin(), this.getZoomMax());
+        }
+        getFitPadding(viewWidth, viewHeight) {
+            if (typeof this.options.fitPadding === "number") {
+                return Math.max(0, this.options.fitPadding);
+            }
+            return Math.max(16, Math.min(40, Math.round(Math.min(viewWidth, viewHeight) * 0.08)));
+        }
+        getZoomMin() {
+            return this.options.zoomMin ?? 0.08;
+        }
+        getZoomMax() {
+            return this.options.zoomMax ?? 4;
+        }
+        zoomAroundViewportCenter(factor) {
+            if (!this.instance?.svg)
+                return;
+            const pivotX = this.viewport.clientWidth / 2;
+            const pivotY = this.viewport.clientHeight / 2;
+            this.zoomTo(this.zoom * factor, pivotX, pivotY);
+        }
+        zoomTo(nextZoom, pivotX, pivotY) {
+            const clampedZoom = clamp(nextZoom, this.getZoomMin(), this.getZoomMax());
+            const ratio = clampedZoom / this.zoom;
+            if (!Number.isFinite(ratio) || ratio === 1) {
+                this.syncViewControls();
+                return;
+            }
+            this.stopMotion();
+            this.autoFitEnabled = false;
+            this.offsetX = pivotX - (pivotX - this.offsetX) * ratio;
+            this.offsetY = pivotY - (pivotY - this.offsetY) * ratio;
+            this.zoom = clampedZoom;
+            this.applyTransform();
+            this.syncViewControls();
+        }
+        applyCaptionVisibility(instance) {
+            const caption = instance?.anim.captionElement;
+            if (!caption)
+                return;
+            caption.style.display = this.showCaption ? "" : "none";
+            caption.setAttribute("aria-hidden", this.showCaption ? "false" : "true");
+        }
+        applyTtsSetting(instance) {
+            if (!instance || this.ttsOverride === null)
+                return;
+            instance.anim.tts = this.ttsOverride;
+        }
+        getTtsEnabled() {
+            if (this.ttsOverride !== null)
+                return this.ttsOverride;
+            return !!this.instance?.anim.tts;
+        }
+        syncToggleControls() {
+            const hasView = !!this.instance?.svg;
+            const canToggleTts = hasView &&
+                typeof speechSynthesis !== "undefined";
+            const ttsEnabled = this.getTtsEnabled();
+            this.btnCaption.textContent = this.showCaption ? "Caption On" : "Caption Off";
+            this.btnCaption.classList.toggle("is-active", this.showCaption);
+            this.btnCaption.setAttribute("aria-pressed", this.showCaption ? "true" : "false");
+            this.btnCaption.disabled = !hasView;
+            this.btnTts.textContent = ttsEnabled ? "TTS On" : "TTS Off";
+            this.btnTts.classList.toggle("is-active", ttsEnabled);
+            this.btnTts.setAttribute("aria-pressed", ttsEnabled ? "true" : "false");
+            this.btnTts.disabled = !canToggleTts;
+        }
+        getTargetBox(target, viewportRect) {
+            if (target instanceof SVGGraphicsElement) {
+                try {
+                    const bounds = target.getBBox();
+                    return {
+                        centerX: (bounds.x + bounds.width / 2) * this.zoom,
+                        centerY: (bounds.y + bounds.height / 2) * this.zoom,
+                    };
+                }
+                catch {
+                    // Ignore and fall back to layout-based bounds below.
+                }
+            }
+            const currentRect = target.getBoundingClientRect();
+            return {
+                centerX: currentRect.left - viewportRect.left - this.offsetX + currentRect.width / 2,
+                centerY: currentRect.top - viewportRect.top - this.offsetY + currentRect.height / 2,
+            };
         }
         getFocusTarget() {
             const anim = this.instance?.anim;