@sebastianwessel/isostate 0.1.0 → 0.2.0

package/dist/browser-runtime.d.ts

@@ -0,0 +1,5 @@
+import { mountScene } from "./runtime/mount-scene.ts";
+import { projectToScreen as projectGridToScreen } from "./utils/projection.ts";
+export { mountScene };
+export declare function projectToScreen(x: number, y: number, cellSize: number, offsetX?: number, offsetY?: number, paddingX?: number, paddingY?: number): ReturnType<typeof projectGridToScreen>;
+//# sourceMappingURL=browser-runtime.d.ts.map

package/dist/browser-runtime.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"browser-runtime.d.ts","sourceRoot":"","sources":["../src/browser-runtime.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,eAAe,IAAI,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAE/E,OAAO,EAAE,UAAU,EAAE,CAAC;AAEtB,wBAAgB,eAAe,CAC9B,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,EACT,QAAQ,EAAE,MAAM,EAChB,OAAO,CAAC,EAAE,MAAM,EAChB,OAAO,CAAC,EAAE,MAAM,EAChB,QAAQ,CAAC,EAAE,MAAM,EACjB,QAAQ,CAAC,EAAE,MAAM,GACf,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAExC"}

package/dist/chunks/{index-CDQt8CfR.js → index-DoyWxJDm.js}

@@ -258,7 +258,7 @@ function interpolateConnector(id, prevStop, nextStop, t) {
         route: interpolateRoute(prev.route, next.route, t),
         layer: t < 1 ? prev.layer : next.layer,
         lifecycle,
-        style: cloneConnectorStyle(next.style),
+        style: cloneConnectorStyle(t < 1 ? prev.style : next.style),
         start: next.start,
         end: next.end,
         direction: next.direction,
@@ -908,6 +908,7 @@ function buildSceneDOM(container, bundle, config) {
             presence: "removed",
         };
         const instance = createElementInstance(initial, layout, assetResolver);
+        instance.anchor = assetAnchorForBounds(bundle, initial);
         instance.node.classList.add(`iso-layer-${def.layer}`);
         instance.node.setAttribute("data-layer", def.layer);
         if (initial.presence === "removed") {
@@ -936,6 +937,7 @@ function updateElementTransforms(svg, elements, connectors = []) {
             const state = map.get(def.id);
             if (!state)
                 continue;
+            state.current = def;
             updateGeneratedElementContent(state.node, def, layout);
             applyElementTransform(state.node, def, layout);
             applyAmbientClasses(state, def.ambient ?? []);
@@ -962,6 +964,32 @@ function getConnectorState(svg, id) {
 function getResolvedViewBox(bundle) {
     return resolveSceneLayout(bundle).viewBox;
 }
+function getCurrentElementBounds(svg, id) {
+    const layout = svg._layout;
+    const state = svg._elementMap?.get(id);
+    if (!layout || !state || state.current.presence === "removed")
+        return undefined;
+    return boundsToViewBox(calculateElementBounds(state.current, layout, state.anchor));
+}
+function getGridAreaBounds(bundle, area) {
+    const layout = resolveSceneLayout(bundle);
+    const [x, y] = area.at;
+    const [width, height] = area.size;
+    let bounds = emptyBounds();
+    for (const point of [
+        [x, y],
+        [x + width, y],
+        [x, y + height],
+        [x + width, y + height],
+    ]) {
+        const screen = projectToScreen(point[0], point[1], layout.cellSize, layout.selectedBounds.minX, layout.selectedBounds.minY, layout.padding.x, layout.padding.y);
+        bounds = includePoint(bounds, screen.screenX, screen.screenY);
+    }
+    return boundsToViewBox(bounds);
+}
+function applySceneViewBox(svg, viewBox) {
+    svg.setAttribute("viewBox", `${viewBox.minX} ${viewBox.minY} ${viewBox.width} ${viewBox.height}`);
+}
 // ── Lifecycle helpers ─────────────────────────────────────────────────────
 /** Hide an element after its exit animation completes. */
 function hideElementAfterExit(node) {
@@ -1003,15 +1031,7 @@ function calculateContentBounds(bundle, cellSize) {
         for (const element of stop.elements ?? []) {
             if (element.presence === "removed")
                 continue;
-            const { rawX, rawY } = projectToRaw(element.pos[0] + element.size, element.pos[1] + element.size, cellSize);
-            const visualSize = calculateVisualSize(element.size, cellSize);
-            const [anchorX, anchorY] = assetAnchorForBounds(bundle, element);
-            bounds = includeBounds(bounds, {
-                minX: rawX - visualSize * anchorX,
-                minY: rawY - visualSize * anchorY,
-                maxX: rawX + visualSize * (1 - anchorX),
-                maxY: rawY + visualSize * (1 - anchorY),
-            });
+            bounds = includeBounds(bounds, calculateRawElementBounds(bundle, element, cellSize));
         }
         for (const connector of stop.connectors ?? []) {
             if (connector.presence === "removed")
@@ -1021,6 +1041,27 @@ function calculateContentBounds(bundle, cellSize) {
     }
     return normalizeBounds(bounds, cellSize);
 }
+function calculateRawElementBounds(bundle, element, cellSize) {
+    const { rawX, rawY } = projectToRaw(element.pos[0] + element.size, element.pos[1] + element.size, cellSize);
+    const visualSize = calculateVisualSize(element.size, cellSize);
+    const [anchorX, anchorY] = assetAnchorForBounds(bundle, element);
+    return {
+        minX: rawX - visualSize * anchorX,
+        minY: rawY - visualSize * anchorY,
+        maxX: rawX + visualSize * (1 - anchorX),
+        maxY: rawY + visualSize * (1 - anchorY),
+    };
+}
+function calculateElementBounds(element, layout, anchor) {
+    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);
+    return {
+        minX: screen.screenX - visualSize * anchor[0],
+        minY: screen.screenY - visualSize * anchor[1],
+        maxX: screen.screenX + visualSize * (1 - anchor[0]),
+        maxY: screen.screenY + visualSize * (1 - anchor[1]),
+    };
+}
 function assetAnchorForBounds(bundle, element) {
     return bundle.assets?.[element.asset]?.anchor ?? [0.5, 1];
 }
@@ -1076,6 +1117,18 @@ function normalizeBounds(bounds, cellSize) {
         return bounds;
     return { minX: 0, minY: 0, maxX: cellSize, maxY: cellSize };
 }
+function boundsToViewBox(bounds) {
+    const centerX = (bounds.minX + bounds.maxX) / 2;
+    const centerY = (bounds.minY + bounds.maxY) / 2;
+    const width = Math.max(1, bounds.maxX - bounds.minX);
+    const height = Math.max(1, bounds.maxY - bounds.minY);
+    return {
+        minX: roundDimension(centerX - width / 2),
+        minY: roundDimension(centerY - height / 2),
+        width: roundDimension(width),
+        height: roundDimension(height),
+    };
+}
 function includePoint(bounds, x, y) {
     return {
         minX: Math.min(bounds.minX, x),
@@ -1242,9 +1295,9 @@ function createElementInstance(def, layout, resolveAsset) {
         node.addEventListener("animationend", () => {
             node.style.animation = "";
         }, { once: true });
-        return { node, isHidden: false, entryKey: entryAnim, ambient: new Set() };
+        return { node, current: def, anchor: [0.5, 1], isHidden: false, entryKey: entryAnim, ambient: new Set() };
     }
-    return { node, isHidden: false, ambient: new Set() };
+    return { node, current: def, anchor: [0.5, 1], isHidden: false, ambient: new Set() };
 }
 function isTextAsset(assetId) {
     return assetId === BUILT_IN_TEXT_ASSET_ID;
@@ -1502,8 +1555,7 @@ function applyConnectorAmbientClasses(state, ambient) {
             state.shaft.classList.remove(`iso-ambient-${name}`);
     }
     for (const name of next) {
-        if (!state.ambient.has(name))
-            state.shaft.classList.add(`iso-ambient-${name}`);
+        state.shaft.classList.add(`iso-ambient-${name}`);
     }
     state.ambient = next;
 }
@@ -1587,6 +1639,8 @@ class AnimationController {
     _pendingProgress = null;
     _destroyed = false;
     _listeners = new Map();
+    _cameraAnim = null;
+    _cameraState = null;
     // Scroll tracking state
     _minScroll = 0;
     _maxScroll = 0;
@@ -1638,6 +1692,11 @@ class AnimationController {
         this._paused = false;
         this._config = { ...DEFAULT_CONFIG, ...config };
         this._sceneElement = runtime.sceneElement ?? config.sceneElement ?? null;
+        this._cameraState = {
+            viewBox: getResolvedViewBox(bundle),
+            target: { type: "reset" },
+            isZoomed: false,
+        };
         this._engine.init(bundle);
         this._bindScroll();
     }
@@ -1654,6 +1713,7 @@ class AnimationController {
             return;
         }
         this._progress = clamped;
+        this._cancelCameraAnimation();
         if (this._paused)
             return;
         this._scheduleProgressForward(clamped);
@@ -1721,6 +1781,47 @@ class AnimationController {
         this._assertNotDestroyed();
         return this._paused;
     }
+    zoomToElement(id, options = {}) {
+        this._assertNotDestroyed();
+        const svg = this._getSceneSvg();
+        if (!this._bundle || !svg) {
+            throw new ControllerError("CAMERA_NOT_INITIALIZED", "zoomToElement() requires an initialized scene SVG");
+        }
+        const elementBounds = getCurrentElementBounds(svg, id);
+        if (!elementBounds) {
+            throw new ControllerError("CAMERA_TARGET_NOT_FOUND", `Camera target element "${id}" was not found`, {
+                elementId: id,
+            });
+        }
+        this._applyCameraDestination(expandViewBox(elementBounds, this._resolveCameraPadding(options)), { type: "element", id }, options);
+    }
+    zoomToArea(area, options = {}) {
+        this._assertNotDestroyed();
+        if (!this._bundle || !this._getSceneSvg()) {
+            throw new ControllerError("CAMERA_NOT_INITIALIZED", "zoomToArea() requires an initialized scene SVG");
+        }
+        this._assertValidCameraArea(area);
+        const bounds = getGridAreaBounds(this._bundle, area);
+        this._applyCameraDestination(expandViewBox(bounds, this._resolveCameraPadding(options)), {
+            type: "area",
+            at: [...area.at],
+            size: [...area.size],
+        }, options);
+    }
+    resetZoom(options = {}) {
+        this._assertNotDestroyed();
+        if (!this._bundle || !this._getSceneSvg()) {
+            throw new ControllerError("CAMERA_NOT_INITIALIZED", "resetZoom() requires an initialized scene SVG");
+        }
+        this._applyCameraDestination(getResolvedViewBox(this._bundle), { type: "reset" }, options);
+    }
+    getCameraState() {
+        this._assertNotDestroyed();
+        if (!this._cameraState) {
+            throw new ControllerError("CAMERA_NOT_INITIALIZED", "Camera state is not initialized");
+        }
+        return copyCameraState(this._cameraState);
+    }
     /**
      * Destroy controller and clean up all listeners and resources.
      */
@@ -1729,12 +1830,14 @@ class AnimationController {
         this._unbindScroll();
         this._cancelFrame();
         this._cancelTransition();
+        this._cancelCameraAnimation();
         if (this._ownsEngine)
             this._engine.destroy();
         this._listeners.clear();
         this._bundle = null;
         this._container = null;
         this._pendingProgress = null;
+        this._cameraState = null;
         this._destroyed = true;
     }
     // ── Event system ───────────────────────────────────────────────────────
@@ -1824,6 +1927,121 @@ class AnimationController {
         updateElementTransforms(svg, updates, connectors);
         this._applyLifecycleChanges(updates);
         this._applyConnectorLifecycleChanges(connectors);
+        this._applyCameraForProgress(this._progress);
+    }
+    _applyCameraForProgress(progress) {
+        const svg = this._getSceneSvg();
+        if (!this._bundle || !svg)
+            return;
+        const sceneStops = this.scenes;
+        if (sceneStops.length === 0)
+            return;
+        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 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)));
+        const viewBox = lerpViewBox(previousViewBox, nextViewBox, t);
+        const target = t < 1 ? previousCamera.target : nextCamera.target;
+        this._setCameraViewBox(svg, viewBox, target);
+    }
+    _effectiveCameraAt(index) {
+        for (let i = index; i >= 0; i--) {
+            const camera = this.scenes[i]?.camera;
+            if (camera) {
+                return {
+                    target: camera.target,
+                    padding: camera.padding,
+                    duration: camera.duration,
+                    easing: camera.easing,
+                };
+            }
+        }
+        return { target: { type: "reset" } };
+    }
+    _resolveCameraViewBox(camera) {
+        if (!this._bundle)
+            throw new ControllerError("CAMERA_NOT_INITIALIZED", "Camera requires an initialized bundle");
+        if (camera.target.type === "reset")
+            return getResolvedViewBox(this._bundle);
+        if (camera.target.type === "area") {
+            return expandViewBox(getGridAreaBounds(this._bundle, { at: camera.target.at, size: camera.target.size }), camera.padding ?? 32);
+        }
+        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);
+        if (!bounds) {
+            throw new ControllerError("CAMERA_TARGET_NOT_FOUND", `Camera target element "${camera.target.id}" was not found`, {
+                elementId: camera.target.id,
+            });
+        }
+        return expandViewBox(bounds, camera.padding ?? 32);
+    }
+    _applyCameraDestination(viewBox, target, options) {
+        const svg = this._getSceneSvg();
+        if (!svg)
+            throw new ControllerError("CAMERA_NOT_INITIALIZED", "Camera requires an initialized scene SVG");
+        this._cancelCameraAnimation();
+        const duration = this._resolveCameraDuration(options);
+        if (duration === 0) {
+            this._setCameraViewBox(svg, viewBox, target);
+            return;
+        }
+        const from = currentSvgViewBox(svg) ?? this._cameraState?.viewBox ?? viewBox;
+        const easing = resolveCameraEasing(options.easing ?? this._config.transitionEasing);
+        const start = performance.now();
+        const step = (now) => {
+            const t = Math.min((now - start) / duration, 1);
+            this._setCameraViewBox(svg, lerpViewBox(from, viewBox, easing(t)), target);
+            if (t < 1) {
+                this._cameraAnim = requestAnimationFrame(step);
+            }
+            else {
+                this._cameraAnim = null;
+            }
+        };
+        this._cameraAnim = requestAnimationFrame(step);
+    }
+    _setCameraViewBox(svg, viewBox, target) {
+        applySceneViewBox(svg, viewBox);
+        const full = this._bundle ? getResolvedViewBox(this._bundle) : viewBox;
+        this._cameraState = {
+            viewBox,
+            target,
+            isZoomed: !sameViewBox(viewBox, full),
+        };
+        this._emit("camera-change", this.getCameraState());
+    }
+    _getSceneSvg() {
+        return (this._sceneElement ?? this._container?.querySelector("svg") ?? null);
+    }
+    _resolveCameraPadding(options) {
+        const padding = options.padding ?? 32;
+        if (!Number.isFinite(padding) || padding < 0 || padding > 2048) {
+            throw new ControllerError("INVALID_CAMERA_OPTIONS", "Camera padding must be between 0 and 2048");
+        }
+        return padding;
+    }
+    _resolveCameraDuration(options) {
+        const duration = options.duration ?? this._config.transitionDuration;
+        if (!Number.isInteger(duration) || duration < 0 || duration > 10000) {
+            throw new ControllerError("INVALID_CAMERA_OPTIONS", "Camera duration must be an integer from 0 to 10000");
+        }
+        return duration;
+    }
+    _assertValidCameraArea(area) {
+        if (!Array.isArray(area.at) ||
+            area.at.length !== 2 ||
+            !area.at.every((value) => Number.isFinite(value) && value >= 0) ||
+            !Array.isArray(area.size) ||
+            area.size.length !== 2 ||
+            !area.size.every((value) => Number.isFinite(value) && value > 0)) {
+            throw new ControllerError("INVALID_CAMERA_OPTIONS", "Camera area must use non-negative at and positive size");
+        }
     }
     _applyLifecycleChanges(elements) {
         for (const elDef of elements) {
@@ -1910,8 +2128,11 @@ class AnimationController {
         if (entryAnim === "none")
             return;
         animateElement(state.node, `iso-anim-${entryAnim}`, "enter");
+        const expectedAnimation = state.node.style.animation;
         state.node.addEventListener("animationend", () => {
-            state.node.style.animation = "";
+            if (state.node.style.animation === expectedAnimation) {
+                state.node.style.animation = "";
+            }
         }, { once: true });
     }
     _applyExitAnimation(elDef, state) {
@@ -1921,8 +2142,11 @@ class AnimationController {
             return;
         }
         animateElement(state.node, `iso-anim-${exitAnim}`, "exit");
+        const expectedAnimation = state.node.style.animation;
         state.node.addEventListener("animationend", () => {
-            hideElementAfterExit(state.node);
+            if (state.node.style.animation === expectedAnimation) {
+                hideElementAfterExit(state.node);
+            }
         }, { once: true });
     }
     _applyConnectorEntryAnimation(connectorDef, state) {
@@ -1930,8 +2154,11 @@ class AnimationController {
         if (entryAnim === "none")
             return;
         animateElement(state.node, `iso-anim-${entryAnim}`, "enter");
+        const expectedAnimation = state.node.style.animation;
         state.node.addEventListener("animationend", () => {
-            state.node.style.animation = "";
+            if (state.node.style.animation === expectedAnimation) {
+                state.node.style.animation = "";
+            }
         }, { once: true });
     }
     _applyConnectorExitAnimation(connectorDef, state) {
@@ -1941,8 +2168,11 @@ class AnimationController {
             return;
         }
         animateElement(state.node, `iso-anim-${exitAnim}`, "exit");
+        const expectedAnimation = state.node.style.animation;
         state.node.addEventListener("animationend", () => {
-            hideElementAfterExit(state.node);
+            if (state.node.style.animation === expectedAnimation) {
+                hideElementAfterExit(state.node);
+            }
         }, { once: true });
     }
     // ── Scene transitions ──────────────────────────────────────────────────
@@ -1991,6 +2221,12 @@ class AnimationController {
             this._transitionAnim = null;
         }
     }
+    _cancelCameraAnimation() {
+        if (this._cameraAnim !== null) {
+            cancelAnimationFrame(this._cameraAnim);
+            this._cameraAnim = null;
+        }
+    }
     // ── Scroll binding ─────────────────────────────────────────────────────
     _bindScroll() {
         const container = this._config.container;
@@ -2175,9 +2411,70 @@ function oppositeEntryAnimation(exit) {
             return "none";
     }
 }
+function surroundingStops(scenes, progress) {
+    let previousIndex = 0;
+    let nextIndex = scenes.length - 1;
+    for (let i = 0; i < scenes.length; i++) {
+        if (scenes[i].progress <= progress)
+            previousIndex = i;
+        if (scenes[i].progress >= progress) {
+            nextIndex = i;
+            break;
+        }
+    }
+    return {
+        previous: { scene: scenes[previousIndex], index: previousIndex },
+        next: { scene: scenes[nextIndex], index: nextIndex },
+    };
+}
+function expandViewBox(viewBox, padding) {
+    return {
+        minX: roundCameraNumber(viewBox.minX - padding),
+        minY: roundCameraNumber(viewBox.minY - padding),
+        width: roundCameraNumber(Math.max(1, viewBox.width + padding * 2)),
+        height: roundCameraNumber(Math.max(1, viewBox.height + padding * 2)),
+    };
+}
+function lerpViewBox(from, to, t) {
+    return {
+        minX: roundCameraNumber(from.minX + (to.minX - from.minX) * t),
+        minY: roundCameraNumber(from.minY + (to.minY - from.minY) * t),
+        width: roundCameraNumber(from.width + (to.width - from.width) * t),
+        height: roundCameraNumber(from.height + (to.height - from.height) * t),
+    };
+}
+function sameViewBox(a, b) {
+    return a.minX === b.minX && a.minY === b.minY && a.width === b.width && a.height === b.height;
+}
+function currentSvgViewBox(svg) {
+    const raw = svg.getAttribute("viewBox");
+    if (!raw)
+        return undefined;
+    const parts = raw.trim().split(/\s+/).map(Number);
+    if (parts.length !== 4 || parts.some((part) => !Number.isFinite(part)))
+        return undefined;
+    return { minX: parts[0], minY: parts[1], width: parts[2], height: parts[3] };
+}
+function resolveCameraEasing(easing) {
+    return resolveEasing(easing === "ease-in-out" ? "easeInOutCubic" : easing === "ease-out" ? "easeOutCubic" : "linear");
+}
+function copyCameraState(state) {
+    return {
+        viewBox: { ...state.viewBox },
+        target: state.target?.type === "area"
+            ? { type: "area", at: [...state.target.at], size: [...state.target.size] }
+            : state.target
+                ? { ...state.target }
+                : undefined,
+        isZoomed: state.isZoomed,
+    };
+}
+function roundCameraNumber(value) {
+    return Math.round(value * 1000) / 1000;
+}
 
 const RUNTIME_BUNDLE_FORMAT = "isostate-runtime-bundle";
-const RUNTIME_VERSION = "0.1.0";
+const RUNTIME_VERSION = "0.2.0";
 const HEX_DIGEST_PATTERN = /^[a-f0-9]{64}$/;
 /** Mount a compiled runtime bundle into an HTML element. */
 function mountScene(target, bundle, options = {}) {
@@ -2267,6 +2564,10 @@ function getResolvedConfig(bundle, options = {}) {
             align: [...bundle.layout.align],
         },
         viewBox: getResolvedViewBox(bundle),
+        camera: {
+            viewBox: getResolvedViewBox(bundle),
+            isZoomed: false,
+        },
         theme: bundle.theme,
         themeVars: getResolvedThemeVars(bundle, options.themeVars),
         scenes: bundle.scenes.map((scene) => ({
@@ -2377,4 +2678,4 @@ function rotr(value, bits) {
 }
 
 export { AnimationController as A, DEFAULT_CELL_SIZE as D, AnimationEngine as a, AssetRegistryImpl as b, applyThemeToElement as c, buildSceneDOM as d, calculateTransform as e, calculateVisualSize as f, composeTheme as g, createAssetRegistry as h, createDefaultRegistry as i, easeInCubic as j, easeInOutCubic as k, easeOutCubic as l, linear as m, mountScene as n, resolveTheme as o, projectToScreen as p, resolveEasing as r };
-//# sourceMappingURL=index-CDQt8CfR.js.map
+//# sourceMappingURL=index-DoyWxJDm.js.map