@sebastianwessel/isostate 0.1.0 → 0.1.2

package/README.md

@@ -0,0 +1,62 @@
+# @sebastianwessel/isostate
+
+Scroll-driven animated isometric scenes for product storytelling, technical
+docs, and visual explainers.
+
+Isostate renders compiled scene bundles as lightweight SVG. YAML parsing,
+validation, and compilation happen at build time; browsers only receive the
+runtime, compiled scene data, and referenced assets.
+
+## Links
+
+- Website: https://sebastianwessel.github.io/isostate
+- Repository: https://github.com/sebastianwessel/isostate
+- Issues: https://github.com/sebastianwessel/isostate/issues
+- Documentation: https://sebastianwessel.github.io/isostate/docs/getting-started.md/
+
+## Install
+
+```bash
+npm install @sebastianwessel/isostate
+```
+
+The browser runtime has no production dependencies. The optional `yaml` peer is
+only needed when you use the dev-time DSL APIs from `@sebastianwessel/isostate/dsl`.
+
+## Runtime Usage
+
+```ts
+import { mountScene, type RuntimeBundle } from '@sebastianwessel/isostate';
+import sceneBundle from './scene.isostate.js';
+
+const target = document.querySelector<HTMLElement>('#scene');
+if (!target) throw new Error('Missing #scene');
+
+const mounted = mountScene(target, sceneBundle as RuntimeBundle, {
+	label: 'Product story',
+	controller: false
+});
+
+mounted.engine.setProgress(0.5);
+```
+
+## Dev-Time DSL Usage
+
+```ts
+import {
+	compileScene,
+	parseScene,
+	toJs,
+	validateScene
+} from '@sebastianwessel/isostate/dsl';
+
+const document = parseScene(yamlText);
+const report = validateScene(document);
+if (!report.isValid) throw new Error(report.errors[0]?.message);
+
+const bundle = compileScene(document);
+const jsModule = toJs(bundle);
+```
+
+For CLI validation, compilation, and static bundles, use
+`@sebastianwessel/isostate-cli`.

package/dist/animation/controller.d.ts.map

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

package/dist/browser/isostate.runtime.js

@@ -256,7 +256,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,
@@ -1527,8 +1527,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;
 }
@@ -1935,8 +1934,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) {
@@ -1946,8 +1948,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) {
@@ -1955,8 +1960,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) {
@@ -1966,8 +1974,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 ──────────────────────────────────────────────────
@@ -2202,7 +2213,7 @@ function oppositeEntryAnimation(exit) {
 }
 
 const RUNTIME_BUNDLE_FORMAT = "isostate-runtime-bundle";
-const RUNTIME_VERSION = "0.1.0";
+const RUNTIME_VERSION = "0.1.2";
 const HEX_DIGEST_PATTERN = /^[a-f0-9]{64}$/;
 /** Mount a compiled runtime bundle into an HTML element. */
 function mountScene(target, bundle, options = {}) {