@sebastianwessel/isostate 0.4.0 → 0.5.0

package/dist/chunks/{index-C3qcXbPI.js → index-CB6XEsbY.js}

@@ -1,5 +1,5 @@
-import { o as getResolvedViewBox, k as getCurrentElementBounds, m as getGridAreaBounds, t as updateElementTransforms, b as applySceneViewBox, l as getElementState, u as unhideElementOnReadd, p as hideElementAfterExit, j as getConnectorState, a as animateElement, d as buildSceneDOM, s as resolveTheme } from './rendering-engine-BUUV3Qq-.js';
-import { C as ControllerError, R as RenderError } from './errors-DyqEkrm5.js';
+import { A as AnimationError, C as ControllerError, R as RenderError } from './errors-DyqEkrm5.js';
+import { a as getResolvedViewBox, b as getCurrentElementBounds, c as getElementState, q as getGridAreaBounds, e as updateElementTransforms, g as getResolvedProjectionLayout, f as projectToScreen, l as calculateVisualSize, s as applySceneViewBox, u as unhideElementOnReadd, h as hideElementAfterExit, d as getConnectorState, t as animateElement, j as buildSceneDOM, r as resolveTheme } from './rendering-engine-nkqYx0qc.js';
 import { s as sha256 } from './sha256-4JuurR-b.js';
 
 /**
@@ -55,6 +55,9 @@ class AnimationEngine {
     }
     /** Set current scroll progress (0-1) and compute frame update. */
     setProgress(progress) {
+        if (!Number.isFinite(progress)) {
+            throw new AnimationError("INVALID_PROGRESS", "setProgress() requires a finite progress value");
+        }
         const clamped = Math.max(0, Math.min(1, progress));
         if (this._paused)
             return;
@@ -234,7 +237,7 @@ function interpolateElement(id, prevStop, nextStop, t) {
         pos: interpolatePos(prev.pos, next.pos, t),
         size: prev.size + (next.size - prev.size) * t,
         lifecycle,
-        ambient: cloneAmbient(next.ambient),
+        ambient: cloneAmbient(t < 1 ? prev.ambient : next.ambient),
         layer: t < 1 ? prev.layer : next.layer,
         entry: next.enter ?? prev.enter,
         exit: next.exit ?? prev.exit,
@@ -261,10 +264,10 @@ function interpolateConnector(id, prevStop, nextStop, t) {
         layer: t < 1 ? prev.layer : next.layer,
         lifecycle,
         style: cloneConnectorStyle(t < 1 ? prev.style : next.style),
-        start: next.start,
-        end: next.end,
-        direction: next.direction,
-        ambient: cloneAmbient(next.ambient),
+        start: t < 1 ? prev.start : next.start,
+        end: t < 1 ? prev.end : next.end,
+        direction: t < 1 ? prev.direction : next.direction,
+        ambient: cloneAmbient(t < 1 ? prev.ambient : next.ambient),
         entry: next.enter ?? prev.enter,
         exit: next.exit ?? prev.exit,
     };
@@ -570,8 +573,8 @@ class AnimationController {
     // Scroll tracking state
     _minScroll = 0;
     _maxScroll = 0;
-    _touchStartY = 0;
-    _touchStartX = 0;
+    _lastTouchY = 0;
+    _lastTouchX = 0;
     _isDragging = false;
     // Transition animation state
     _transitionAnim = null;
@@ -715,6 +718,11 @@ class AnimationController {
         }
         const elementBounds = getCurrentElementBounds(svg, id);
         if (!elementBounds) {
+            if (getElementState(svg, id)) {
+                throw new ControllerError("CAMERA_TARGET_NOT_VISIBLE", `Camera target element "${id}" is currently removed`, {
+                    elementId: id,
+                });
+            }
             throw new ControllerError("CAMERA_TARGET_NOT_FOUND", `Camera target element "${id}" was not found`, {
                 elementId: id,
             });
@@ -865,8 +873,8 @@ class AnimationController {
         const { previous, next } = surroundingStops(sceneStops, progress);
         const previousCamera = this._effectiveCameraAt(previous.index);
         const nextCamera = this._effectiveCameraAt(next.index);
-        const previousViewBox = this._resolveCameraViewBox(previousCamera);
-        const nextViewBox = this._resolveCameraViewBox(nextCamera);
+        const previousViewBox = this._resolveCameraViewBox(previousCamera, { forInterpolation: true });
+        const nextViewBox = this._resolveCameraViewBox(nextCamera, { forInterpolation: true });
         const range = next.scene.progress - previous.scene.progress;
         const rawT = range <= 0 ? 0 : (progress - previous.scene.progress) / range;
         const t = resolveCameraEasing(nextCamera.easing)(Math.max(0, Math.min(1, rawT)));
@@ -888,7 +896,7 @@ class AnimationController {
         }
         return { target: { type: "reset" } };
     }
-    _resolveCameraViewBox(camera) {
+    _resolveCameraViewBox(camera, options = {}) {
         if (!this._bundle)
             throw new ControllerError("CAMERA_NOT_INITIALIZED", "Camera requires an initialized bundle");
         if (camera.target.type === "reset")
@@ -899,7 +907,9 @@ class AnimationController {
         const svg = this._getSceneSvg();
         if (!svg)
             throw new ControllerError("CAMERA_NOT_INITIALIZED", "Camera requires an initialized scene SVG");
-        const bounds = getCurrentElementBounds(svg, camera.target.id);
+        const bounds = options.forInterpolation
+            ? this._resolveElementBoundsForInterpolation(svg, camera.target.id)
+            : getCurrentElementBounds(svg, camera.target.id);
         if (!bounds) {
             throw new ControllerError("CAMERA_TARGET_NOT_FOUND", `Camera target element "${camera.target.id}" was not found`, {
                 elementId: camera.target.id,
@@ -907,6 +917,37 @@ class AnimationController {
         }
         return expandViewBox(bounds, camera.padding ?? 32);
     }
+    /**
+     * Resolve element bounds for scroll/setProgress camera interpolation.
+     *
+     * Unlike `getCurrentElementBounds()`, this tolerates an element whose
+     * resolved presence is transiently "removed" because progress has not yet
+     * reached the stop that introduces it (the engine still carries valid
+     * authored geometry for it via nearest-geometry fallback). It falls back to
+     * that geometry instead of reporting the target as missing so a scene that
+     * both adds an element and focuses the camera on it in the same stop can be
+     * interpolated into smoothly. A genuinely unknown element id still resolves
+     * to `undefined` so callers can throw `CAMERA_TARGET_NOT_FOUND`.
+     */
+    _resolveElementBoundsForInterpolation(svg, id) {
+        const direct = getCurrentElementBounds(svg, id);
+        if (direct)
+            return direct;
+        const state = getElementState(svg, id);
+        if (!state || !this._bundle)
+            return undefined;
+        const layout = getResolvedProjectionLayout(this._bundle);
+        const element = state.current;
+        const screen = projectToScreen(element.pos[0] + element.size, element.pos[1] + element.size, layout.cellSize, layout.selectedBounds.minX, layout.selectedBounds.minY, layout.padding.x, layout.padding.y);
+        const visualSize = calculateVisualSize(element.size, layout.cellSize);
+        const [anchorX, anchorY] = state.anchor;
+        return {
+            minX: roundCameraNumber(screen.screenX - visualSize * anchorX),
+            minY: roundCameraNumber(screen.screenY - visualSize * anchorY),
+            width: roundCameraNumber(Math.max(1, visualSize)),
+            height: roundCameraNumber(Math.max(1, visualSize)),
+        };
+    }
     _applyCameraDestination(viewBox, target, options) {
         const svg = this._getSceneSvg();
         if (!svg)
@@ -1104,19 +1145,20 @@ class AnimationController {
     // ── Scene transitions ──────────────────────────────────────────────────
     _transitionToScene(index) {
         this._cancelTransition();
-        if (index === this._sceneIndex)
-            return;
-        this._sceneIndex = index;
-        this._emit("scene-change", index);
         const stop = this.scenes[index];
         const from = this._progress;
         const to = stop.progress;
+        if (index === this._sceneIndex && from === to)
+            return;
+        this._sceneIndex = index;
+        this._emit("scene-change", index);
         const duration = this._config.transitionDuration;
         if (duration > 0 && from !== to) {
             this._animateProgress(from, to, duration);
             return;
         }
         this._progress = to;
+        this._cancelCameraAnimation();
         this._scheduleProgressForward(to);
     }
     _animateProgress(from, to, duration) {
@@ -1155,6 +1197,9 @@ class AnimationController {
     }
     // ── Scroll binding ─────────────────────────────────────────────────────
     _bindScroll() {
+        if (this._config.keyboardControls) {
+            document.addEventListener("keydown", this._onKeyDown);
+        }
         const container = this._config.container;
         if (!container)
             return;
@@ -1162,9 +1207,6 @@ class AnimationController {
         this._calculateScrollBounds();
         container.addEventListener("scroll", this._onScroll, { passive: true });
         window.addEventListener("resize", this._onResize, { passive: true });
-        if (this._config.keyboardControls) {
-            document.addEventListener("keydown", this._onKeyDown);
-        }
         if (this._config.touchControls) {
             container.addEventListener("touchstart", this._onTouchStart, {
                 passive: true,
@@ -1176,12 +1218,12 @@ class AnimationController {
         }
     }
     _unbindScroll() {
+        document.removeEventListener("keydown", this._onKeyDown);
         const container = this._config.container;
         if (!container)
             return;
         container.removeEventListener("scroll", this._onScroll);
         window.removeEventListener("resize", this._onResize);
-        document.removeEventListener("keydown", this._onKeyDown);
         container.removeEventListener("touchstart", this._onTouchStart);
         container.removeEventListener("touchmove", this._onTouchMove);
         container.removeEventListener("touchend", this._onTouchEnd);
@@ -1210,10 +1252,11 @@ class AnimationController {
         if (range <= 0)
             return;
         const rawProgress = (currentScroll - this._minScroll) / range;
-        const clampedProgress = Math.max(this._config.minProgress ?? 0, Math.min(this._config.maxProgress ?? 1, rawProgress));
         const sensitivity = this._config.scrollSensitivity ?? 1;
+        const scaledProgress = rawProgress * sensitivity;
+        const clampedProgress = Math.max(this._config.minProgress ?? 0, Math.min(this._config.maxProgress ?? 1, scaledProgress));
         if (clampedProgress !== this._progress) {
-            this.setProgress(clampedProgress * sensitivity);
+            this.setProgress(clampedProgress);
         }
     };
     _onResize = () => {
@@ -1239,10 +1282,10 @@ class AnimationController {
         this._isDragging = true;
         const touch = e.touches[0];
         if (this._config.scrollDirection === "horizontal") {
-            this._touchStartX = touch.clientX;
+            this._lastTouchX = touch.clientX;
         }
         else {
-            this._touchStartY = touch.clientY;
+            this._lastTouchY = touch.clientY;
         }
     };
     _onTouchMove = (e) => {
@@ -1251,9 +1294,14 @@ class AnimationController {
         if (!this._isDragging)
             return;
         const touch = e.touches[0];
-        const delta = this._config.scrollDirection === "horizontal"
-            ? this._touchStartX - touch.clientX
-            : this._touchStartY - touch.clientY;
+        const isHorizontal = this._config.scrollDirection === "horizontal";
+        const delta = isHorizontal ? this._lastTouchX - touch.clientX : this._lastTouchY - touch.clientY;
+        if (isHorizontal) {
+            this._lastTouchX = touch.clientX;
+        }
+        else {
+            this._lastTouchY = touch.clientY;
+        }
         const sensitivity = this._config.scrollSensitivity ?? 1.0;
         const progressDelta = (delta / 300) * sensitivity;
         const newProgress = Math.max(0, Math.min(1, this._progress + progressDelta));
@@ -1266,10 +1314,7 @@ class AnimationController {
     };
     // ── Pause state ────────────────────────────────────────────────────────
     _applyPauseState(pause) {
-        const container = this._config.container;
-        if (!container)
-            return;
-        const svg = container.querySelector("svg");
+        const svg = this._getSceneSvg();
         if (!svg)
             return;
         const playState = pause ? "paused" : "running";
@@ -1399,8 +1444,136 @@ function roundCameraNumber(value) {
     return Math.round(value * 1000) / 1000;
 }
 
+const CSS_CLASS_INTERACTIVE_ROOT = "iso-interactive";
+const CSS_CLASS_HOVER = "iso-hover";
+/**
+ * Owns delegated pointer listeners and event subscriptions for one mounted
+ * scene. Created unconditionally by `mountScene()`; the three DOM listeners
+ * are only attached when `interactive: true`.
+ */
+class SceneInteractivity {
+    svg;
+    listeners = new Map();
+    destroyed = false;
+    attached = false;
+    onClick = (event) => this.handleClick(event);
+    onPointerOver = (event) => this.handlePointerOver(event);
+    onPointerOut = (event) => this.handlePointerOut(event);
+    constructor(svg, interactive) {
+        this.svg = svg;
+        if (interactive) {
+            svg.classList.add(CSS_CLASS_INTERACTIVE_ROOT);
+            svg.addEventListener("click", this.onClick);
+            svg.addEventListener("pointerover", this.onPointerOver);
+            svg.addEventListener("pointerout", this.onPointerOut);
+            this.attached = true;
+        }
+    }
+    /** Subscribe to interactivity events. Returns an unsubscribe function. */
+    on(event, listener) {
+        if (this.destroyed) {
+            throw new RenderError("MOUNT_DESTROYED", "Cannot call on() after destroy()");
+        }
+        const set = this.listeners.get(event) ?? new Set();
+        set.add(listener);
+        this.listeners.set(event, set);
+        return () => {
+            set.delete(listener);
+        };
+    }
+    /** Remove the three delegated listeners and all subscriptions. Safe to call more than once. */
+    destroy() {
+        if (this.destroyed)
+            return;
+        this.destroyed = true;
+        if (this.attached) {
+            this.svg.removeEventListener("click", this.onClick);
+            this.svg.removeEventListener("pointerover", this.onPointerOver);
+            this.svg.removeEventListener("pointerout", this.onPointerOut);
+            this.attached = false;
+        }
+        this.listeners.clear();
+    }
+    handleClick(event) {
+        const id = this.resolveVisibleElementId(event.target);
+        if (!id)
+            return;
+        this.emit("element-click", { id, originalEvent: event });
+    }
+    handlePointerOver(event) {
+        const enteredId = this.resolveVisibleElementId(event.target);
+        if (!enteredId)
+            return;
+        const previousId = this.resolveVisibleElementId(event.relatedTarget);
+        if (enteredId === previousId)
+            return;
+        this.toggleHoverClass(enteredId, true);
+        this.emit("element-enter", { id: enteredId, originalEvent: event });
+    }
+    handlePointerOut(event) {
+        const leftId = this.resolveVisibleElementId(event.target);
+        if (!leftId)
+            return;
+        const nextId = this.resolveVisibleElementId(event.relatedTarget);
+        if (leftId === nextId)
+            return;
+        this.toggleHoverClass(leftId, false);
+        this.emit("element-leave", { id: leftId, originalEvent: event });
+    }
+    toggleHoverClass(id, hovered) {
+        const state = getElementState(this.svg, id);
+        if (!state)
+            return;
+        state.node.classList.toggle(CSS_CLASS_HOVER, hovered);
+    }
+    /**
+     * Resolve the scene element id for a pointer event target: walk up
+     * `parentNode` from the event target until the root SVG, looking for the
+     * first ancestor `<g>` that is a member of the engine's element state map
+     * (connector groups also carry `data-id` but are never members of this
+     * map, and floor/defs/diagnostics nodes carry no `data-id` at all). An
+     * element whose current presence is `removed` never resolves.
+     */
+    resolveVisibleElementId(target) {
+        let node = target;
+        while (node && node !== this.svg) {
+            const id = node.getAttribute?.("data-id");
+            if (id) {
+                const state = getElementState(this.svg, id);
+                if (state && state.current.presence !== "removed")
+                    return id;
+                return undefined;
+            }
+            node = node.parentNode;
+        }
+        return undefined;
+    }
+    /**
+     * Invoke every listener for `event`. Exceptions are not caught: consistent
+     * with `AnimationController`'s event system, a throwing listener is
+     * rethrown asynchronously (via `queueMicrotask`) rather than swallowed, so
+     * it surfaces as an unhandled error without breaking delivery to sibling
+     * listeners in the same `Set`.
+     */
+    emit(event, payload) {
+        const set = this.listeners.get(event);
+        if (!set)
+            return;
+        for (const listener of set) {
+            try {
+                listener(payload);
+            }
+            catch (error) {
+                queueMicrotask(() => {
+                    throw error;
+                });
+            }
+        }
+    }
+}
+
 const RUNTIME_BUNDLE_FORMAT = "isostate-runtime-bundle";
-const RUNTIME_VERSION = "0.4.0";
+const RUNTIME_VERSION = "0.5.0";
 const HEX_DIGEST_PATTERN = /^[a-f0-9]{64}$/;
 /** Mount a compiled runtime bundle into an HTML element. */
 function mountScene(target, bundle, options = {}) {
@@ -1424,17 +1597,20 @@ function mountScene(target, bundle, options = {}) {
             sceneElement: svg,
         });
     }
+    const interactivity = new SceneInteractivity(svg, options.interactive === true);
     let destroyed = false;
     return {
         svg,
         engine,
         controller,
-        getResolvedConfig: () => getResolvedConfig(bundle, options),
+        getResolvedConfig: () => getResolvedConfig(bundle, options, controller),
+        on: (event, listener) => interactivity.on(event, listener),
         destroy: () => {
             if (destroyed)
                 return;
             destroyed = true;
-            controller?.destroy();
+            interactivity.destroy();
+            destroyControllerSafely(controller);
             engine.destroy();
             if (svg.parentNode === target) {
                 target.removeChild(svg);
@@ -1445,6 +1621,24 @@ function mountScene(target, bundle, options = {}) {
         },
     };
 }
+/**
+ * Destroy the controller, tolerating a controller that was already destroyed
+ * independently (e.g. by application code calling `controller.destroy()`
+ * before `mountScene().destroy()`). Keeps `mountScene().destroy()` idempotent
+ * and defensive so engine cleanup and SVG removal always run.
+ */
+function destroyControllerSafely(controller) {
+    if (!controller)
+        return;
+    try {
+        controller.destroy();
+    }
+    catch (error) {
+        if (error instanceof ControllerError && error.code === "CONTROLLER_DESTROYED")
+            return;
+        throw error;
+    }
+}
 function assertMountTarget(target) {
     if (!target || typeof target.appendChild !== "function" || typeof target.removeChild !== "function") {
         throw new RenderError("INVALID_MOUNT_TARGET", "mountScene() requires a DOM HTMLElement target");
@@ -1480,20 +1674,17 @@ function validateRuntimeBundle(bundle) {
         });
     }
 }
-function getResolvedConfig(bundle, options = {}) {
+function getResolvedConfig(bundle, options = {}, controller) {
     return {
         grid: { cellSize: bundle.grid.cellSize },
-        floor: { ...bundle.floor },
+        floor: { ...bundle.floor, size: [...bundle.floor.size], origin: [...bundle.floor.origin] },
         layout: {
             ...bundle.layout,
             padding: { ...bundle.layout.padding },
             align: [...bundle.layout.align],
         },
         viewBox: getResolvedViewBox(bundle),
-        camera: {
-            viewBox: getResolvedViewBox(bundle),
-            isZoomed: false,
-        },
+        camera: resolveCameraState(bundle, controller),
         theme: bundle.theme,
         themeVars: getResolvedThemeVars(bundle, options.themeVars),
         scenes: bundle.scenes.map((scene) => ({
@@ -1502,9 +1693,32 @@ function getResolvedConfig(bundle, options = {}) {
         })),
         layerOrder: bundle.layers
             .map((layer) => ({ name: layer.name, order: layer.order }))
-            .sort((a, b) => a.order - b.order || a.name.localeCompare(b.name)),
+            .sort((a, b) => a.order - b.order || compareCodePointOrder(a.name, b.name)),
     };
 }
+/**
+ * Live camera state from the controller when one is attached and alive;
+ * otherwise the static bundle-derived default.
+ */
+function resolveCameraState(bundle, controller) {
+    if (controller) {
+        try {
+            return controller.getCameraState();
+        }
+        catch (error) {
+            if (!(error instanceof ControllerError))
+                throw error;
+        }
+    }
+    return {
+        viewBox: getResolvedViewBox(bundle),
+        isZoomed: false,
+    };
+}
+/** Locale-independent string comparator so tie-break order is byte-deterministic across hosts. */
+function compareCodePointOrder(a, b) {
+    return a < b ? -1 : a > b ? 1 : 0;
+}
 function getResolvedThemeVars(bundle, overrides = {}) {
     return {
         ...(resolveTheme(bundle.theme) ?? {}),
@@ -1539,4 +1753,4 @@ function isPlainObject(value) {
 }
 
 export { AnimationController as A, AnimationEngine as a, easeInOutCubic as b, easeOutCubic as c, easeInCubic as e, linear as l, mountScene as m, resolveEasing as r };
-//# sourceMappingURL=index-C3qcXbPI.js.map
+//# sourceMappingURL=index-CB6XEsbY.js.map