sketchmark 1.1.3 → 1.1.5

package/dist/index.js

@@ -8805,6 +8805,7 @@ function clearDashOverridesAfter(el, delayMs) {
     }, 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",
@@ -8933,6 +8934,7 @@ function clearNodeDrawStyles(el) {
     });
     const text = nodeText(el);
     if (text) {
+        clearTextReveal(text);
         text.style.opacity = text.style.transition = "";
     }
 }
@@ -8978,55 +8980,74 @@ function revealNodeInstant(el) {
     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);
@@ -9420,8 +9441,17 @@ class AnimationController {
     }
     /** 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;
     }
@@ -10047,7 +10077,7 @@ class AnimationController {
             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 ─────────────────────────────────────────────────
@@ -10700,7 +10730,7 @@ class EventEmitter {
 }
 
 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";
@@ -10749,6 +10779,9 @@ function render(options) {
         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,
@@ -10800,13 +10833,14 @@ function toError(error) {
 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}
@@ -10828,6 +10862,8 @@ class SketchmarkCanvas {
         this.instance = null;
         this.emitter = new EventEmitter();
         this.dsl = "";
+        this.showCaption = true;
+        this.ttsOverride = null;
         this.panX = 60;
         this.panY = 60;
         this.zoom = 1;
@@ -10915,6 +10951,8 @@ class SketchmarkCanvas {
         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);
@@ -10933,6 +10971,8 @@ class SketchmarkCanvas {
         <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>
@@ -10967,6 +11007,8 @@ class SketchmarkCanvas {
         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());
@@ -10977,6 +11019,8 @@ class SketchmarkCanvas {
         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);
@@ -10998,6 +11042,16 @@ class SketchmarkCanvas {
         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;
@@ -11042,6 +11096,8 @@ class SketchmarkCanvas {
                 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) => {
@@ -11174,6 +11230,37 @@ class SketchmarkCanvas {
         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;
@@ -11184,6 +11271,7 @@ class SketchmarkCanvas {
             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}`;
@@ -11192,6 +11280,7 @@ class SketchmarkCanvas {
         this.nextButton.disabled = !anim.canNext;
         this.resetButton.disabled = false;
         this.playButton.disabled = this.playInFlight || !anim.canNext;
+        this.syncToggleUi();
     }
     getStepTarget(stepItem) {
         if (!stepItem)
@@ -11848,6 +11937,7 @@ const EMBED_CSS = `
 
 .skm-embed__controls {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   gap: 8px;
   padding: 10px 12px;
@@ -11865,6 +11955,13 @@ const EMBED_CSS = `
   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;
@@ -11883,6 +11980,12 @@ const EMBED_CSS = `
   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;
@@ -11900,6 +12003,17 @@ const EMBED_CSS = `
   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;
@@ -11918,13 +12032,19 @@ class SketchmarkEmbed {
         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 = "";
@@ -11940,10 +12060,22 @@ class SketchmarkEmbed {
       </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>
     `;
@@ -11953,17 +12085,28 @@ class SketchmarkEmbed {
         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);
@@ -11981,6 +12124,16 @@ class SketchmarkEmbed {
         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);
@@ -12004,7 +12157,12 @@ class SketchmarkEmbed {
         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,
@@ -12020,6 +12178,8 @@ class SketchmarkEmbed {
                 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") {
@@ -12085,6 +12245,21 @@ class SketchmarkEmbed {
         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);
     }
@@ -12107,10 +12282,15 @@ class SketchmarkEmbed {
         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;
@@ -12118,56 +12298,69 @@ class SketchmarkEmbed {
         }
         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);
     }
@@ -12199,7 +12392,109 @@ class SketchmarkEmbed {
         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;