@kieransimkin/dancemoves 3.1.16 → 3.1.18

package/lib/index.cjs

@@ -2331,7 +2331,10 @@ function install2(__dmScope) {
       function tick(now) {
         if (!running)
           return;
-        if (document2.hidden || state.reduced.matches || state.forced.matches) {
+        var preferenceBlocked = state.reduced.matches || state.forced.matches;
+        if (preferenceBlocked !== preferenceLimited)
+          preference();
+        if (document2.hidden || preferenceBlocked) {
           resetWindow(now);
           frame = window2.requestAnimationFrame(tick);
           return;
@@ -3221,6 +3224,7 @@ function install5(__dmScope) {
     if (!Core || !harnessMode && (!Core.isMobileDevice(window) || !Core.sensorSupported(window)))
       return;
     const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)");
+    const forcedColours = window.matchMedia("(forced-colors: active)");
     const perceptualAxis = (value) => {
       const bounded = Core.clamp(value, -1, 1);
       return Math.sign(bounded) * Math.sqrt(Math.abs(bounded));
@@ -3549,6 +3553,10 @@ function install5(__dmScope) {
       let destroyed = false;
       let controlFeedback = null;
       const phonePreference = Core.createOrientationPreference(window);
+      const subscribers = /* @__PURE__ */ new Set();
+      let suspended = false;
+      const qualityLimited = () => ["minimal", "static"].includes(adapter.root.dataset.danceMovesQuality) || adapter.root.dataset.danceMovesPerformance === "minimal" || document.body?.dataset?.epkAdaptiveTier === "static";
+      const notify = (reason) => subscribers.forEach((callback) => callback({ ...latest, reason }));
       __dmScope.dataset(adapter.root, "ksOrientation", "supported");
       __dmScope.dataset(adapter.root, "ksOrientationAdapter", config.adapter || "detected");
       __dmScope.dataset(adapter.root, "ksOrientationWindow", String(windowMilliseconds));
@@ -3580,6 +3588,7 @@ function install5(__dmScope) {
             removeControl();
           }
           adapter.apply(x, y);
+          notify("phone");
           window.EPKEffectHarnessProbe?.noteCommit?.(detail.sampleAge);
         }
       });
@@ -3603,9 +3612,10 @@ function install5(__dmScope) {
         active = false;
         __dmScope.dataset(adapter.root, "ksOrientation", "supported");
         adapter.reset();
+        notify("reset");
       };
       const onOrientation = (event) => {
-        if (reducedMotion.matches)
+        if (reducedMotion.matches || forcedColours.matches || suspended || qualityLimited())
           return;
         if (!Core.hasMotionData(event)) {
           window.EPKEffectHarnessProbe?.noteRejected?.();
@@ -3614,7 +3624,7 @@ function install5(__dmScope) {
         scheduler.receive(event, Core.screenAngle(window), window.performance.now());
       };
       const startListening = () => {
-        if (listening || reducedMotion.matches || document.hidden || destroyed)
+        if (listening || reducedMotion.matches || forcedColours.matches || suspended || qualityLimited() || document.hidden || destroyed)
           return;
         listening = true;
         __dmScope.listen(window, "deviceorientation", onOrientation, { passive: true });
@@ -3633,7 +3643,7 @@ function install5(__dmScope) {
         reset();
       };
       const makePermissionControl = () => {
-        if (control || destroyed)
+        if (control || destroyed || active)
           return;
         control = document.createElement("button");
         control.type = "button";
@@ -3652,7 +3662,7 @@ function install5(__dmScope) {
           button.disabled = true;
           button.textContent = "Checking motion\u2026";
           try {
-            const result = await window.DeviceOrientationEvent.requestPermission();
+            const result = Core.permissionRequired(window) ? await window.DeviceOrientationEvent.requestPermission() : "granted";
             if (destroyed || control !== button)
               return;
             if (result !== "granted") {
@@ -3691,7 +3701,7 @@ function install5(__dmScope) {
         stopListening();
       };
       const pageShown = () => {
-        if (destroyed || reducedMotion.matches)
+        if (destroyed || reducedMotion.matches || forcedColours.matches || suspended || qualityLimited())
           return;
         if (harnessMode)
           startListening();
@@ -3699,8 +3709,11 @@ function install5(__dmScope) {
           makePermissionControl();
           if (phonePreference.read() === "enabled")
             startListening();
-        } else if (phonePreference.read() !== "disabled")
-          startListening();
+        } else {
+          makePermissionControl();
+          if (phonePreference.read() !== "disabled")
+            startListening();
+        }
       };
       __dmScope.listen(window, "orientationchange", recalibrate, { passive: true });
       if (window.screen && window.screen.orientation && typeof window.screen.orientation.addEventListener === "function") {
@@ -3710,7 +3723,7 @@ function install5(__dmScope) {
       __dmScope.listen(window, "pagehide", pageHidden);
       __dmScope.listen(window, "pageshow", pageShown);
       const preferenceChanged = () => {
-        if (reducedMotion.matches) {
+        if (reducedMotion.matches || forcedColours.matches || suspended || qualityLimited()) {
           controlFeedback?.clear();
           stopListening();
           removeControl();
@@ -3722,6 +3735,10 @@ function install5(__dmScope) {
         __dmScope.listen(reducedMotion, "change", preferenceChanged);
       else
         __dmScope.addMediaListener(reducedMotion, preferenceChanged);
+      if (typeof forcedColours.addEventListener === "function")
+        __dmScope.listen(forcedColours, "change", preferenceChanged);
+      else if (typeof forcedColours.addListener === "function")
+        __dmScope.addMediaListener(forcedColours, preferenceChanged);
       const teardown = () => {
         if (destroyed)
           return;
@@ -3735,6 +3752,8 @@ function install5(__dmScope) {
         latest = { x: 0, y: 0 };
         active = false;
         adapter.reset();
+        notify("teardown");
+        subscribers.clear();
         controlFeedback?.destroy();
         removeControl();
         __dmScope.unlisten(window, "orientationchange", recalibrate);
@@ -3748,6 +3767,10 @@ function install5(__dmScope) {
           __dmScope.unlisten(reducedMotion, "change", preferenceChanged);
         else if (typeof reducedMotion.removeListener === "function")
           __dmScope.removeMediaListener(reducedMotion, preferenceChanged);
+        if (typeof forcedColours.removeEventListener === "function")
+          __dmScope.unlisten(forcedColours, "change", preferenceChanged);
+        else if (typeof forcedColours.removeListener === "function")
+          __dmScope.removeMediaListener(forcedColours, preferenceChanged);
         observer?.disconnect();
         observer = null;
         if (window.__ksEpkOrientationRuntime?.teardown === teardown)
@@ -3760,15 +3783,34 @@ function install5(__dmScope) {
         destroyed,
         latest: { ...latest },
         reducedMotion: reducedMotion.matches,
+        forcedColors: forcedColours.matches,
+        suspended,
         documentHidden: document.hidden
       });
-      window.__ksEpkOrientationRuntime = Object.freeze({ reset, teardown, snapshot });
+      window.__ksEpkOrientationRuntime = Object.freeze({
+        reset,
+        teardown,
+        snapshot,
+        subscribe(callback) {
+          if (typeof callback !== "function")
+            throw new TypeError("Orientation callback required");
+          subscribers.add(callback);
+          callback({ ...latest, reason: active ? "phone" : "reset" });
+          return () => subscribers.delete(callback);
+        },
+        suspend(value) {
+          suspended = value === true;
+          preferenceChanged();
+        }
+      });
       if (typeof window.MutationObserver === "function" && document.documentElement) {
-        observer = new window.MutationObserver(() => {
+        observer = new window.MutationObserver((records) => {
           if (adapter.root.isConnected === false)
             teardown();
+          else if (records?.some((record) => record.type === "attributes"))
+            preferenceChanged();
         });
-        observer.observe(document.documentElement, { childList: true, subtree: true });
+        observer.observe(document.documentElement, { childList: true, subtree: true, attributes: true, attributeFilter: ["data-dance-moves-quality", "data-dance-moves-performance", "data-epk-adaptive-tier"] });
       }
       pageShown();
     }
@@ -5528,7 +5570,7 @@ function createOrientationController(scope, { render, windowMilliseconds = 2e3,
   for (const [name, value] of Object.entries({ windowMilliseconds, minimumSpanDegrees, smoothingTimeConstantMilliseconds })) if (!Number.isFinite(value) || value <= 0) throw new RangeError(name);
   const w = scope.window, core = w.KSEpkOrientationCore;
   const preference = core.createOrientationPreference(w);
-  let enabled = core.sensorSupported(w) && preference.read() === "enabled", listening = false, destroyed = false, pending = false;
+  let enabled = core.sensorSupported(w) && preference.read() === "enabled", listening = false, destroyed = false, pending = false, active = true, pageHidden = false;
   const reduced = w.matchMedia("(prefers-reduced-motion: reduce)"), forced = w.matchMedia("(forced-colors: active)");
   const scheduler = core.createLatestSampleRafScheduler({
     requestFrame: w.requestAnimationFrame,
@@ -5546,27 +5588,49 @@ function createOrientationController(scope, { render, windowMilliseconds = 2e3,
     if (!destroyed) render({ x: 0, y: 0, reason: "reset" });
   };
   const reconcile = () => {
-    const active = enabled && !destroyed && !scope.disposed && !scope.document.hidden && !reduced.matches && !forced.matches;
-    if (active && !listening) {
+    const allowed = active && enabled && !destroyed && !scope.disposed && !pageHidden && !scope.document.hidden && !reduced.matches && !forced.matches;
+    if (allowed && !listening) {
       scope.listen(w, "deviceorientation", receive, { passive: true });
       listening = true;
     }
-    if (!active && listening) {
+    if (!allowed && listening) {
       scope.unlisten(w, "deviceorientation", receive);
       listening = false;
       reset();
     }
   };
+  const hide = () => {
+    pageHidden = true;
+    reconcile();
+  };
+  const show = () => {
+    pageHidden = false;
+    reset();
+    reconcile();
+  };
   const disposers = [
     () => scope.unlisten(scope.document, "visibilitychange", reconcile),
     () => scope.unlisten(reduced, "change", reconcile),
     () => scope.unlisten(forced, "change", reconcile),
-    () => scope.unlisten(w, "orientationchange", reset)
+    () => scope.unlisten(w, "orientationchange", reset),
+    () => scope.unlisten(w.screen?.orientation, "change", reset),
+    () => scope.unlisten(w, "pagehide", hide),
+    () => scope.unlisten(w, "pageshow", show)
   ];
   scope.listen(scope.document, "visibilitychange", reconcile);
   scope.listen(reduced, "change", reconcile);
   scope.listen(forced, "change", reconcile);
   scope.listen(w, "orientationchange", reset);
+  scope.listen(w.screen?.orientation, "change", reset);
+  scope.listen(w, "pagehide", hide);
+  scope.listen(w, "pageshow", show);
+  let observer;
+  if (w.MutationObserver) {
+    observer = new w.MutationObserver(() => {
+      if (w.DanceMoves?.root?.isConnected === false) destroy();
+    });
+    observer.observe(w.DanceMoves?.root?.ownerDocument.documentElement || scope.document.documentElement, { childList: true, subtree: true });
+  }
   function destroy() {
     if (destroyed) return;
     enabled = false;
@@ -5574,6 +5638,7 @@ function createOrientationController(scope, { render, windowMilliseconds = 2e3,
     destroyed = true;
     pending = false;
     scheduler.teardown();
+    observer?.disconnect();
     disposers.forEach((fn) => fn());
     removeDispose();
   }
@@ -5586,6 +5651,7 @@ function createOrientationController(scope, { render, windowMilliseconds = 2e3,
       if (!core.sensorSupported(w)) throw new Error("Device orientation is unavailable in this browser or insecure context");
       pending = true;
       try {
+        if (!active || pageHidden || scope.document.hidden || reduced.matches || forced.matches) throw new Error("Phone motion is currently paused");
         if (core.permissionRequired(w) && await w.DeviceOrientationEvent.requestPermission() !== "granted") {
           if (!destroyed && !scope.disposed) {
             preference.write(false);
@@ -5608,12 +5674,175 @@ function createOrientationController(scope, { render, windowMilliseconds = 2e3,
       enabled = false;
       reconcile();
     },
+    setActive(value) {
+      active = value === true;
+      reconcile();
+    },
     reset,
     destroy,
-    snapshot: () => ({ enabled, listening, destroyed, pending, reducedMotion: reduced.matches, forcedColors: forced.matches, framePending: scheduler.pending() })
+    snapshot: () => ({ enabled, listening, destroyed, pending, active, pageHidden, reducedMotion: reduced.matches, forcedColors: forced.matches, framePending: scheduler.pending() })
   });
 }
 
+// .build/modules/phone-motion.mjs
+var connections = /* @__PURE__ */ new WeakMap();
+function connectPhoneMotion(scope, { render = () => {
+}, pointers = [], enabled = () => true, controlParent = scope.document.body, watchAttributes = ["class"], windowMilliseconds = 1e4 } = {}) {
+  if (scope.disposed) throw new Error("DanceMoves mount is destroyed");
+  if (connections.has(scope)) throw new Error("Phone motion is already connected on this mount");
+  if (typeof render !== "function" || typeof enabled !== "function") throw new TypeError("Phone motion callbacks must be functions");
+  if (!Array.isArray(pointers) || !Array.isArray(watchAttributes)) throw new TypeError("Phone motion lists must be arrays");
+  const w = scope.window, core = w.KSEpkOrientationCore;
+  let destroyed = false, sensorActive = false, pageHidden = false, button = null, timer = 0, pending = false, observer = null, source = null, unsubscribe = null;
+  const reduced = w.matchMedia("(prefers-reduced-motion: reduce)"), forced = w.matchMedia("(forced-colors: active)");
+  const eligible = () => core.isMobileDevice(w) && core.sensorSupported(w);
+  if (!eligible()) {
+    const dispose = () => {
+      destroyed = true;
+      connections.delete(scope);
+    };
+    scope.onDispose(dispose);
+    const unavailable2 = Object.freeze({ enable: async () => false, reconcile: () => {
+    }, destroy: dispose, snapshot: () => ({ eligible: false, allowed: false, sensorActive: false, destroyed: destroyed || scope.disposed, source: "unavailable", orientation: null }) });
+    connections.set(scope, unavailable2);
+    return unavailable2;
+  }
+  const allowed = () => eligible() && !destroyed && !scope.disposed && !pageHidden && !scope.document.hidden && !reduced.matches && !forced.matches && enabled();
+  function apply(point) {
+    const live = allowed() && point.reason !== "reset" && point.reason !== "teardown";
+    const x = live ? core.clamp(point.x, -1, 1) : 0, y = live ? core.clamp(point.y, -1, 1) : 0;
+    for (const id of pointers) {
+      const pointer = w.DanceMovesEffects.get(id);
+      if (pointer) {
+        live ? pointer.set(x, y, "phone") : pointer.reset("phone-reset");
+      }
+    }
+    render({ x, y, reason: live ? "phone" : "reset" });
+    if (live) {
+      sensorActive = true;
+      removeButton();
+    } else sensorActive = false;
+  }
+  function removeButton() {
+    if (timer) w.clearTimeout(timer);
+    timer = 0;
+    if (button) {
+      scope.unlisten(button, "click", enable);
+      button.remove();
+      button = null;
+    }
+  }
+  function unavailable() {
+    timer = 0;
+    if (!button || sensorActive) return;
+    button.disabled = false;
+    button.textContent = core.permissionRequired(w) ? "Use phone motion" : "Phone motion unavailable";
+  }
+  function makeButton() {
+    if (button || !allowed() || source?.subscribe) return;
+    button = scope.document.createElement("button");
+    button.type = "button";
+    button.className = "ks-epk-orientation-control";
+    button.textContent = "Use phone motion";
+    button.setAttribute("aria-live", "polite");
+    scope.listen(button, "click", enable);
+    controlParent.append(button);
+  }
+  async function enable() {
+    if (!allowed() || pending || !source) return false;
+    pending = true;
+    makeButton();
+    if (button) {
+      button.disabled = true;
+      button.textContent = "Checking motion\u2026";
+    }
+    try {
+      await source.enable();
+      if (destroyed) return false;
+      if (button) {
+        button.textContent = "Move phone to enable\u2026";
+        button.disabled = false;
+      }
+      if (timer) w.clearTimeout(timer);
+      timer = w.setTimeout(unavailable, 3500);
+      return true;
+    } catch (error) {
+      if (button) {
+        button.disabled = false;
+        button.textContent = /denied/i.test(error.message) ? "Phone motion blocked" : "Use phone motion";
+      }
+      return false;
+    } finally {
+      pending = false;
+    }
+  }
+  function reconcile() {
+    if (destroyed) return;
+    if (source?.subscribe) {
+      source.suspend?.(!allowed());
+      if (!allowed()) apply({ x: 0, y: 0, reason: "reset" });
+      return;
+    }
+    source?.setActive(allowed());
+    if (!allowed()) {
+      removeButton();
+      apply({ x: 0, y: 0, reason: "reset" });
+      return;
+    }
+    if (!sensorActive) makeButton();
+    const state = source?.snapshot();
+    if (state?.listening && !timer && !sensorActive) timer = w.setTimeout(unavailable, 3500);
+    if (source && !core.permissionRequired(w) && core.createOrientationPreference(w).read() !== "disabled" && !state.enabled) void enable();
+  }
+  const hide = () => {
+    pageHidden = true;
+    reconcile();
+  };
+  const show = () => {
+    pageHidden = false;
+    reconcile();
+  };
+  const signals = [[scope.document, "visibilitychange", reconcile], [reduced, "change", reconcile], [forced, "change", reconcile], [w, "pagehide", hide], [w, "pageshow", show]];
+  signals.forEach(([target, type, handler]) => scope.listen(target, type, handler));
+  if (eligible()) {
+    const existing = w.DanceMoves?.getOrientation?.();
+    if (existing?.subscribe) {
+      source = existing;
+      unsubscribe = existing.subscribe(apply);
+    } else source = createOrientationController(scope, { render: apply, windowMilliseconds });
+  }
+  if (w.MutationObserver) {
+    const root = w.DanceMoves.root, document = root.ownerDocument;
+    observer = new w.MutationObserver((records) => {
+      if (root.isConnected === false) {
+        destroy();
+        return;
+      }
+      if (records.some((r) => r.type === "attributes")) reconcile();
+    });
+    observer.observe(root, { attributes: true, attributeFilter: watchAttributes, childList: true, subtree: true });
+    if (document.body !== root) observer.observe(document.body, { attributes: true, attributeFilter: watchAttributes });
+    if (document.documentElement !== root) observer.observe(document.documentElement, { childList: true, subtree: true });
+  }
+  function destroy() {
+    if (destroyed) return;
+    removeButton();
+    apply({ x: 0, y: 0, reason: "teardown" });
+    destroyed = true;
+    unsubscribe?.();
+    if (!source?.subscribe) source?.destroy();
+    observer?.disconnect();
+    signals.forEach(([target, type, handler]) => scope.unlisten(target, type, handler));
+    removeDispose();
+    connections.delete(scope);
+  }
+  const removeDispose = scope.onDispose(destroy);
+  reconcile();
+  const connection = Object.freeze({ enable, reconcile, destroy, snapshot: () => ({ eligible: eligible(), allowed: allowed(), sensorActive, destroyed, pending, source: source?.subscribe ? "existing" : "generic", orientation: source?.snapshot() || null }) });
+  connections.set(scope, connection);
+  return connection;
+}
+
 // .build/modules/recorder.mjs
 function createMotionRecorder(scope, { durationMilliseconds = 3e4, maxSamples = 500 } = {}) {
   if (scope.disposed) throw new Error("DanceMoves mount is destroyed");
@@ -5721,7 +5950,7 @@ function createMotionRecorder(scope, { durationMilliseconds = 3e4, maxSamples =
 }
 
 // .build/modules/version.mjs
-var VERSION = "3.1.16";
+var VERSION = "3.1.18";
 
 // .build/modules/index.mjs
 var mounted = /* @__PURE__ */ new WeakMap();
@@ -5780,6 +6009,7 @@ function createDanceMoves(options = {}) {
       createRecorder: (settings) => createMotionRecorder(scope, settings),
       createOrientation: (settings) => createOrientationController(scope, settings),
       destroy,
+      connectPhoneMotion: (settings) => connectPhoneMotion(scope, settings),
       resources: () => scope.snapshot(),
       on(type, callback) {
         scope.listen(scope.document, type, callback);

package/lib/index.d.ts

@@ -40,7 +40,9 @@ export interface Effects {
  get(id:string):Controller|null;snapshot():Record<string,unknown>[];teardown(id:string):void;teardownAll():void;
 }
 export interface EffectOptions {id?:string;root?:Element|string;[key:string]:unknown}
-export interface OrientationController {enable():Promise<boolean>;disable():void;reset():void;destroy():void;snapshot():Record<string,unknown>}
+export interface OrientationController {enable():Promise<boolean>;disable():void;setActive(value:boolean):void;reset():void;destroy():void;snapshot():Record<string,unknown>}
+export interface PhoneMotionConnection {enable():Promise<boolean>;reconcile():void;destroy():void;snapshot():Record<string,unknown>}
+export interface PhoneMotionOptions {render?:(point:Offset & {reason:string})=>void;pointers?:string[];enabled?:()=>boolean;controlParent?:HTMLElement;watchAttributes?:string[];windowMilliseconds?:number}
 export interface Recorder {start():Promise<MotionCapture>;stop(reason?:string):MotionCapture;snapshot():Record<string,unknown>;upload(endpoint:string,options?:{headers?:Record<string,string>;signal?:AbortSignal}):Promise<Record<string,unknown>>}
 export interface MotionCapture {schema:'ks-epk-motion-recording/v1';samples:Array<{milliseconds:number;beta:number;gamma:number;alpha?:number|null;[key:string]:unknown}>;[key:string]:unknown}
 export interface DanceMoves {
@@ -66,6 +68,7 @@ export interface DanceMoves {
  orientationCore:Record<string,(...args:any[])=>any>;
  getOrientation():(Controller & {reset():void})|null;getClay():(Controller & Record<string,any>)|null;getPaperPlanes():Controller|null;
  createOrientation(options:{render:(point:Offset & Record<string,unknown>)=>void;windowMilliseconds?:number;minimumSpanDegrees?:number;smoothingTimeConstantMilliseconds?:number}):OrientationController;
+  connectPhoneMotion(options?:PhoneMotionOptions):PhoneMotionConnection;
  createRecorder(options?:{durationMilliseconds?:number;maxSamples?:number}):Recorder;
  on(type:string,callback:EventListener):Remove;resources():{id:string;disposed:boolean;listeners:number;timers:number;frames:number;observers:number;created:number};destroy():void;
 }