sketchmark 1.1.2 → 1.1.4

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);
@@ -9249,11 +9270,13 @@ var AIDiagram = (function (exports) {
             this._config = _config;
             this._step = -1;
             this._pendingStepTimers = new Set();
+            this._pendingNarrationTimers = new Set();
             this._transforms = new Map();
             this._listeners = [];
             // ── Narration caption ──
             this._captionEl = null;
             this._captionTextEl = null;
+            this._narrationRunId = 0;
             // ── Annotations ──
             this._annotationLayer = null;
             this._annotations = [];
@@ -9516,20 +9539,30 @@ var AIDiagram = (function (exports) {
             }
             this.emit("step-change");
         }
+        _clearTimerBucket(bucket) {
+            bucket.forEach((id) => window.clearTimeout(id));
+            bucket.clear();
+        }
         _clearPendingStepTimers() {
-            this._pendingStepTimers.forEach((id) => window.clearTimeout(id));
-            this._pendingStepTimers.clear();
+            this._clearTimerBucket(this._pendingStepTimers);
         }
-        _scheduleStep(fn, delayMs) {
+        _cancelNarrationTyping() {
+            this._narrationRunId += 1;
+            this._clearTimerBucket(this._pendingNarrationTimers);
+        }
+        _scheduleTimer(fn, delayMs, bucket = this._pendingStepTimers) {
             if (delayMs <= 0) {
                 fn();
                 return;
             }
             const id = window.setTimeout(() => {
-                this._pendingStepTimers.delete(id);
+                bucket.delete(id);
                 fn();
             }, delayMs);
-            this._pendingStepTimers.add(id);
+            bucket.add(id);
+        }
+        _scheduleStep(fn, delayMs) {
+            this._scheduleTimer(fn, delayMs, this._pendingStepTimers);
         }
         _stepWaitMs(step, fallbackMs) {
             const delay = Math.max(0, step.delay ?? 0);
@@ -9573,6 +9606,7 @@ var AIDiagram = (function (exports) {
         }
         _clearAll() {
             this._clearPendingStepTimers();
+            this._cancelNarrationTyping();
             this._cancelSpeech();
             this._transforms.clear();
             // Nodes
@@ -10037,7 +10071,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 ─────────────────────────────────────────────────
@@ -10127,6 +10161,7 @@ var AIDiagram = (function (exports) {
         _doNarrate(text, silent) {
             if (!this._captionEl || !this._captionTextEl)
                 return;
+            this._cancelNarrationTyping();
             this._captionEl.style.opacity = "1";
             if (silent || !text) {
                 this._captionTextEl.textContent = text;
@@ -10137,12 +10172,16 @@ var AIDiagram = (function (exports) {
                 this._speak(text);
             // Typing effect
             this._captionTextEl.textContent = "";
+            const narrationRunId = this._narrationRunId;
             let charIdx = 0;
             const typeNext = () => {
+                if (this._narrationRunId !== narrationRunId || !this._captionTextEl)
+                    return;
                 if (charIdx < text.length) {
                     this._captionTextEl.textContent += text[charIdx++];
-                    const id = window.setTimeout(typeNext, ANIMATION.narrationTypeMs);
-                    this._pendingStepTimers.add(id);
+                    if (charIdx < text.length) {
+                        this._scheduleTimer(typeNext, ANIMATION.narrationTypeMs, this._pendingNarrationTimers);
+                    }
                 }
             };
             typeNext();
@@ -10252,12 +10291,11 @@ var AIDiagram = (function (exports) {
                     requestAnimationFrame(animate);
                 }
                 // After guide finishes: reveal rough.js element, remove guide
-                const id = window.setTimeout(() => {
+                this._scheduleTimer(() => {
                     roughEl.style.transition = `opacity 120ms ease`;
                     roughEl.style.opacity = "1";
                     guide.remove();
                 }, dur + 30);
-                this._pendingStepTimers.add(id);
             }));
         }
         _doAnnotationCircle(target, silent) {
@@ -11834,6 +11872,7 @@ var AIDiagram = (function (exports) {
 
 .skm-embed__controls {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   gap: 8px;
   padding: 10px 12px;
@@ -11851,6 +11890,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 +11932,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;
@@ -11904,8 +11961,10 @@ var AIDiagram = (function (exports) {
             this.emitter = new EventEmitter();
             this.animUnsub = null;
             this.playInFlight = false;
+            this.zoom = 1;
             this.offsetX = 0;
             this.offsetY = 0;
+            this.autoFitEnabled = true;
             this.motionFrame = null;
             this.resizeObserver = null;
             this.options = options;
@@ -11926,10 +11985,18 @@ 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>
         <span class="skm-embed__step">No steps</span>
       </div>
     `;
@@ -11939,12 +12006,19 @@ 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.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", () => {
@@ -11990,7 +12064,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,
@@ -12071,6 +12150,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);
         }
@@ -12093,10 +12187,14 @@ var AIDiagram = (function (exports) {
             return typeof value === "number" ? `${value}px` : value;
         }
         syncControls() {
+            this.syncAnimationControls();
+            this.syncViewControls();
+        }
+        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;
@@ -12104,56 +12202,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);
         }
@@ -12185,7 +12296,78 @@ 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();
+        }
+        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;

package/dist/ui/embed.d.ts

@@ -12,6 +12,9 @@ export interface SketchmarkEmbedOptions {
     theme?: EmbedTheme;
     showControls?: boolean;
     playStepDelay?: number;
+    fitPadding?: number;
+    zoomMin?: number;
+    zoomMax?: number;
     focusPadding?: number;
     focusDuration?: number;
     autoFocus?: boolean;
@@ -43,19 +46,25 @@ export declare class SketchmarkEmbed {
     readonly errorElement: HTMLDivElement;
     readonly controlsElement: HTMLDivElement;
     readonly stepInfoElement: HTMLSpanElement;
+    readonly zoomInfoElement: HTMLSpanElement;
     instance: DiagramInstance | null;
     private readonly emitter;
     private readonly options;
-    private readonly btnReset;
+    private readonly btnRestart;
     private readonly btnPrev;
     private readonly btnNext;
     private readonly btnPlay;
+    private readonly btnFit;
+    private readonly btnZoomIn;
+    private readonly btnZoomOut;
     private animUnsub;
     private playInFlight;
     private dsl;
     private theme;
+    private zoom;
     private offsetX;
     private offsetY;
+    private autoFitEnabled;
     private motionFrame;
     private resizeObserver;
     constructor(options: SketchmarkEmbedOptions);
@@ -69,15 +78,29 @@ export declare class SketchmarkEmbed {
     nextStep(): void;
     prevStep(): void;
     resetAnimation(): void;
+    fitToViewport(animated?: boolean): void;
+    resetView(animated?: boolean): void;
+    zoomIn(): void;
+    zoomOut(): void;
     exportSVG(filename?: string): void;
     exportPNG(filename?: string): Promise<void>;
     destroy(): void;
     private applySize;
     private formatSize;
     private syncControls;
+    private syncAnimationControls;
+    private syncViewControls;
     private positionViewport;
     private animateTo;
     private applyTransform;
+    private getContentSize;
+    private getFitZoom;
+    private getFitPadding;
+    private getZoomMin;
+    private getZoomMax;
+    private zoomAroundViewportCenter;
+    private zoomTo;
+    private getTargetBox;
     private getFocusTarget;
     private findTargetElement;
     private getStepTarget;

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

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