@doodle-engine/react 0.0.8 → 0.0.9

package/dist/react.js

@@ -1,6 +1,6 @@
-import { Engine as ie } from "@doodle-engine/core";
-import { VERSION as De } from "@doodle-engine/core";
-import ue, { createContext as de, useState as C, useEffect as L, useCallback as N, useContext as me, useRef as q } from "react";
+import { enableDevTools as ie, Engine as ue } from "@doodle-engine/core";
+import { VERSION as Fe } from "@doodle-engine/core";
+import de, { createContext as me, useState as T, useEffect as L, useCallback as j, useContext as he, useRef as U } from "react";
 var Z = { exports: {} }, z = {};
 /**
  * @license React
@@ -11,27 +11,27 @@ var Z = { exports: {} }, z = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var te;
-function he() {
-  if (te) return z;
-  te = 1;
-  var n = Symbol.for("react.transitional.element"), s = Symbol.for("react.fragment");
-  function r(a, l, o) {
-    var m = null;
-    if (o !== void 0 && (m = "" + o), l.key !== void 0 && (m = "" + l.key), "key" in l) {
-      o = {};
-      for (var h in l)
-        h !== "key" && (o[h] = l[h]);
-    } else o = l;
-    return l = o.ref, {
+var se;
+function ve() {
+  if (se) return z;
+  se = 1;
+  var n = Symbol.for("react.transitional.element"), t = Symbol.for("react.fragment");
+  function r(a, o, c) {
+    var d = null;
+    if (c !== void 0 && (d = "" + c), o.key !== void 0 && (d = "" + o.key), "key" in o) {
+      c = {};
+      for (var m in o)
+        m !== "key" && (c[m] = o[m]);
+    } else c = o;
+    return o = c.ref, {
       $$typeof: n,
       type: a,
-      key: m,
-      ref: l !== void 0 ? l : null,
-      props: o
+      key: d,
+      ref: o !== void 0 ? o : null,
+      props: c
     };
   }
-  return z.Fragment = s, z.jsx = r, z.jsxs = r, z;
+  return z.Fragment = t, z.jsx = r, z.jsxs = r, z;
 }
 var B = {};
 /**
@@ -44,433 +44,437 @@ var B = {};
  * LICENSE file in the root directory of this source tree.
  */
 var ne;
-function ve() {
+function pe() {
   return ne || (ne = 1, process.env.NODE_ENV !== "production" && (function() {
-    function n(t) {
-      if (t == null) return null;
-      if (typeof t == "function")
-        return t.$$typeof === y ? null : t.displayName || t.name || null;
-      if (typeof t == "string") return t;
-      switch (t) {
+    function n(s) {
+      if (s == null) return null;
+      if (typeof s == "function")
+        return s.$$typeof === N ? null : s.displayName || s.name || null;
+      if (typeof s == "string") return s;
+      switch (s) {
         case u:
           return "Fragment";
-        case G:
+        case $:
           return "Profiler";
-        case _:
+        case h:
           return "StrictMode";
-        case A:
+        case W:
           return "Suspense";
-        case F:
+        case R:
           return "SuspenseList";
-        case v:
+        case p:
           return "Activity";
       }
-      if (typeof t == "object")
-        switch (typeof t.tag == "number" && console.error(
+      if (typeof s == "object")
+        switch (typeof s.tag == "number" && console.error(
           "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
-        ), t.$$typeof) {
-          case i:
+        ), s.$$typeof) {
+          case S:
             return "Portal";
-          case W:
-            return t.displayName || "Context";
-          case D:
-            return (t._context.displayName || "Context") + ".Consumer";
-          case J:
-            var c = t.render;
-            return t = t.displayName, t || (t = c.displayName || c.name || "", t = t !== "" ? "ForwardRef(" + t + ")" : "ForwardRef"), t;
-          case p:
-            return c = t.displayName || null, c !== null ? c : n(t.type) || "Memo";
-          case d:
-            c = t._payload, t = t._init;
+          case q:
+            return s.displayName || "Context";
+          case M:
+            return (s._context.displayName || "Context") + ".Consumer";
+          case Y:
+            var i = s.render;
+            return s = s.displayName, s || (s = i.displayName || i.name || "", s = s !== "" ? "ForwardRef(" + s + ")" : "ForwardRef"), s;
+          case I:
+            return i = s.displayName || null, i !== null ? i : n(s.type) || "Memo";
+          case l:
+            i = s._payload, s = s._init;
             try {
-              return n(t(c));
+              return n(s(i));
             } catch {
             }
         }
       return null;
     }
-    function s(t) {
-      return "" + t;
+    function t(s) {
+      return "" + s;
     }
-    function r(t) {
+    function r(s) {
       try {
-        s(t);
-        var c = !1;
+        t(s);
+        var i = !1;
       } catch {
-        c = !0;
+        i = !0;
       }
-      if (c) {
-        c = console;
-        var j = c.error, S = typeof Symbol == "function" && Symbol.toStringTag && t[Symbol.toStringTag] || t.constructor.name || "Object";
-        return j.call(
-          c,
+      if (i) {
+        i = console;
+        var f = i.error, k = typeof Symbol == "function" && Symbol.toStringTag && s[Symbol.toStringTag] || s.constructor.name || "Object";
+        return f.call(
+          i,
           "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
-          S
-        ), s(t);
+          k
+        ), t(s);
       }
     }
-    function a(t) {
-      if (t === u) return "<>";
-      if (typeof t == "object" && t !== null && t.$$typeof === d)
+    function a(s) {
+      if (s === u) return "<>";
+      if (typeof s == "object" && s !== null && s.$$typeof === l)
         return "<...>";
       try {
-        var c = n(t);
-        return c ? "<" + c + ">" : "<...>";
+        var i = n(s);
+        return i ? "<" + i + ">" : "<...>";
       } catch {
         return "<...>";
       }
     }
-    function l() {
-      var t = O.A;
-      return t === null ? null : t.getOwner();
-    }
     function o() {
+      var s = A.A;
+      return s === null ? null : s.getOwner();
+    }
+    function c() {
       return Error("react-stack-top-frame");
     }
-    function m(t) {
-      if (M.call(t, "key")) {
-        var c = Object.getOwnPropertyDescriptor(t, "key").get;
-        if (c && c.isReactWarning) return !1;
+    function d(s) {
+      if (V.call(s, "key")) {
+        var i = Object.getOwnPropertyDescriptor(s, "key").get;
+        if (i && i.isReactWarning) return !1;
       }
-      return t.key !== void 0;
+      return s.key !== void 0;
     }
-    function h(t, c) {
-      function j() {
+    function m(s, i) {
+      function f() {
         P || (P = !0, console.error(
           "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
-          c
+          i
         ));
       }
-      j.isReactWarning = !0, Object.defineProperty(t, "key", {
-        get: j,
+      f.isReactWarning = !0, Object.defineProperty(s, "key", {
+        get: f,
         configurable: !0
       });
     }
-    function f() {
-      var t = n(this.type);
-      return I[t] || (I[t] = !0, console.error(
+    function v() {
+      var s = n(this.type);
+      return D[s] || (D[s] = !0, console.error(
         "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
-      )), t = this.props.ref, t !== void 0 ? t : null;
+      )), s = this.props.ref, s !== void 0 ? s : null;
     }
-    function g(t, c, j, S, H, K) {
-      var k = j.ref;
-      return t = {
+    function b(s, i, f, k, H, K) {
+      var y = f.ref;
+      return s = {
         $$typeof: w,
-        type: t,
-        key: c,
-        props: j,
-        _owner: S
-      }, (k !== void 0 ? k : null) !== null ? Object.defineProperty(t, "ref", {
+        type: s,
+        key: i,
+        props: f,
+        _owner: k
+      }, (y !== void 0 ? y : null) !== null ? Object.defineProperty(s, "ref", {
         enumerable: !1,
-        get: f
-      }) : Object.defineProperty(t, "ref", { enumerable: !1, value: null }), t._store = {}, Object.defineProperty(t._store, "validated", {
+        get: v
+      }) : Object.defineProperty(s, "ref", { enumerable: !1, value: null }), s._store = {}, Object.defineProperty(s._store, "validated", {
         configurable: !1,
         enumerable: !1,
         writable: !0,
         value: 0
-      }), Object.defineProperty(t, "_debugInfo", {
+      }), Object.defineProperty(s, "_debugInfo", {
         configurable: !1,
         enumerable: !1,
         writable: !0,
         value: null
-      }), Object.defineProperty(t, "_debugStack", {
+      }), Object.defineProperty(s, "_debugStack", {
         configurable: !1,
         enumerable: !1,
         writable: !0,
         value: H
-      }), Object.defineProperty(t, "_debugTask", {
+      }), Object.defineProperty(s, "_debugTask", {
         configurable: !1,
         enumerable: !1,
         writable: !0,
         value: K
-      }), Object.freeze && (Object.freeze(t.props), Object.freeze(t)), t;
+      }), Object.freeze && (Object.freeze(s.props), Object.freeze(s)), s;
     }
-    function x(t, c, j, S, H, K) {
-      var k = c.children;
-      if (k !== void 0)
-        if (S)
-          if (Y(k)) {
-            for (S = 0; S < k.length; S++)
-              R(k[S]);
-            Object.freeze && Object.freeze(k);
+    function x(s, i, f, k, H, K) {
+      var y = i.children;
+      if (y !== void 0)
+        if (k)
+          if (G(y)) {
+            for (k = 0; k < y.length; k++)
+              _(y[k]);
+            Object.freeze && Object.freeze(y);
           } else
             console.error(
               "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
             );
-        else R(k);
-      if (M.call(c, "key")) {
-        k = n(t);
-        var U = Object.keys(c).filter(function(ce) {
+        else _(y);
+      if (V.call(i, "key")) {
+        y = n(s);
+        var J = Object.keys(i).filter(function(ce) {
           return ce !== "key";
         });
-        S = 0 < U.length ? "{key: someKey, " + U.join(": ..., ") + ": ...}" : "{key: someKey}", V[k + S] || (U = 0 < U.length ? "{" + U.join(": ..., ") + ": ...}" : "{}", console.error(
+        k = 0 < J.length ? "{key: someKey, " + J.join(": ..., ") + ": ...}" : "{key: someKey}", g[y + k] || (J = 0 < J.length ? "{" + J.join(": ..., ") + ": ...}" : "{}", console.error(
           `A props object containing a "key" prop is being spread into JSX:
   let props = %s;
   <%s {...props} />
 React keys must be passed directly to JSX without using spread:
   let props = %s;
   <%s key={someKey} {...props} />`,
-          S,
           k,
-          U,
-          k
-        ), V[k + S] = !0);
+          y,
+          J,
+          y
+        ), g[y + k] = !0);
       }
-      if (k = null, j !== void 0 && (r(j), k = "" + j), m(c) && (r(c.key), k = "" + c.key), "key" in c) {
-        j = {};
-        for (var ee in c)
-          ee !== "key" && (j[ee] = c[ee]);
-      } else j = c;
-      return k && h(
-        j,
-        typeof t == "function" ? t.displayName || t.name || "Unknown" : t
-      ), g(
-        t,
-        k,
-        j,
-        l(),
+      if (y = null, f !== void 0 && (r(f), y = "" + f), d(i) && (r(i.key), y = "" + i.key), "key" in i) {
+        f = {};
+        for (var ee in i)
+          ee !== "key" && (f[ee] = i[ee]);
+      } else f = i;
+      return y && m(
+        f,
+        typeof s == "function" ? s.displayName || s.name || "Unknown" : s
+      ), b(
+        s,
+        y,
+        f,
+        o(),
         H,
         K
       );
     }
-    function R(t) {
-      T(t) ? t._store && (t._store.validated = 1) : typeof t == "object" && t !== null && t.$$typeof === d && (t._payload.status === "fulfilled" ? T(t._payload.value) && t._payload.value._store && (t._payload.value._store.validated = 1) : t._store && (t._store.validated = 1));
+    function _(s) {
+      C(s) ? s._store && (s._store.validated = 1) : typeof s == "object" && s !== null && s.$$typeof === l && (s._payload.status === "fulfilled" ? C(s._payload.value) && s._payload.value._store && (s._payload.value._store.validated = 1) : s._store && (s._store.validated = 1));
     }
-    function T(t) {
-      return typeof t == "object" && t !== null && t.$$typeof === w;
+    function C(s) {
+      return typeof s == "object" && s !== null && s.$$typeof === w;
     }
-    var E = ue, w = Symbol.for("react.transitional.element"), i = Symbol.for("react.portal"), u = Symbol.for("react.fragment"), _ = Symbol.for("react.strict_mode"), G = Symbol.for("react.profiler"), D = Symbol.for("react.consumer"), W = Symbol.for("react.context"), J = Symbol.for("react.forward_ref"), A = Symbol.for("react.suspense"), F = Symbol.for("react.suspense_list"), p = Symbol.for("react.memo"), d = Symbol.for("react.lazy"), v = Symbol.for("react.activity"), y = Symbol.for("react.client.reference"), O = E.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, M = Object.prototype.hasOwnProperty, Y = Array.isArray, $ = console.createTask ? console.createTask : function() {
+    var E = de, w = Symbol.for("react.transitional.element"), S = Symbol.for("react.portal"), u = Symbol.for("react.fragment"), h = Symbol.for("react.strict_mode"), $ = Symbol.for("react.profiler"), M = Symbol.for("react.consumer"), q = Symbol.for("react.context"), Y = Symbol.for("react.forward_ref"), W = Symbol.for("react.suspense"), R = Symbol.for("react.suspense_list"), I = Symbol.for("react.memo"), l = Symbol.for("react.lazy"), p = Symbol.for("react.activity"), N = Symbol.for("react.client.reference"), A = E.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, V = Object.prototype.hasOwnProperty, G = Array.isArray, O = console.createTask ? console.createTask : function() {
       return null;
     };
     E = {
-      react_stack_bottom_frame: function(t) {
-        return t();
+      react_stack_bottom_frame: function(s) {
+        return s();
       }
     };
-    var P, I = {}, X = E.react_stack_bottom_frame.bind(
+    var P, D = {}, F = E.react_stack_bottom_frame.bind(
       E,
-      o
-    )(), b = $(a(o)), V = {};
-    B.Fragment = u, B.jsx = function(t, c, j) {
-      var S = 1e4 > O.recentlyCreatedOwnerStacks++;
+      c
+    )(), X = O(a(c)), g = {};
+    B.Fragment = u, B.jsx = function(s, i, f) {
+      var k = 1e4 > A.recentlyCreatedOwnerStacks++;
       return x(
-        t,
-        c,
-        j,
+        s,
+        i,
+        f,
         !1,
-        S ? Error("react-stack-top-frame") : X,
-        S ? $(a(t)) : b
+        k ? Error("react-stack-top-frame") : F,
+        k ? O(a(s)) : X
       );
-    }, B.jsxs = function(t, c, j) {
-      var S = 1e4 > O.recentlyCreatedOwnerStacks++;
+    }, B.jsxs = function(s, i, f) {
+      var k = 1e4 > A.recentlyCreatedOwnerStacks++;
       return x(
-        t,
-        c,
-        j,
+        s,
+        i,
+        f,
         !0,
-        S ? Error("react-stack-top-frame") : X,
-        S ? $(a(t)) : b
+        k ? Error("react-stack-top-frame") : F,
+        k ? O(a(s)) : X
       );
     };
   })()), B;
 }
-var se;
-function pe() {
-  return se || (se = 1, process.env.NODE_ENV === "production" ? Z.exports = he() : Z.exports = ve()), Z.exports;
+var te;
+function fe() {
+  return te || (te = 1, process.env.NODE_ENV === "production" ? Z.exports = ve() : Z.exports = pe()), Z.exports;
 }
-var e = pe();
-const ae = de(null);
-function fe({ engine: n, initialSnapshot: s, children: r }) {
-  const [a, l] = C(s);
+var e = fe();
+const ae = me(null);
+function xe({ engine: n, initialSnapshot: t, children: r, devTools: a = !1 }) {
+  const [o, c] = T(t);
   L(() => {
-  }, [n]);
-  const o = N(
-    (i) => {
-      const u = n.selectChoice(i);
-      l(u);
+    if (a)
+      return ie(n, () => c(n.getSnapshot())), () => {
+        delete window.doodle;
+      };
+  }, [n, a]);
+  const d = j(
+    (u) => {
+      const h = n.selectChoice(u);
+      c(h);
     },
     [n]
-  ), m = N(
-    (i) => {
-      const u = n.talkTo(i);
-      l(u);
+  ), m = j(
+    (u) => {
+      const h = n.talkTo(u);
+      c(h);
     },
     [n]
-  ), h = N(
-    (i) => {
-      const u = n.takeItem(i);
-      l(u);
+  ), v = j(
+    (u) => {
+      const h = n.takeItem(u);
+      c(h);
     },
     [n]
-  ), f = N(
-    (i) => {
-      const u = n.travelTo(i);
-      l(u);
+  ), b = j(
+    (u) => {
+      const h = n.travelTo(u);
+      c(h);
     },
     [n]
-  ), g = N(
-    (i, u) => {
-      const _ = n.writeNote(i, u);
-      l(_);
+  ), x = j(
+    (u, h) => {
+      const $ = n.writeNote(u, h);
+      c($);
     },
     [n]
-  ), x = N(
-    (i) => {
-      const u = n.deleteNote(i);
-      l(u);
+  ), _ = j(
+    (u) => {
+      const h = n.deleteNote(u);
+      c(h);
     },
     [n]
-  ), R = N(
-    (i) => {
-      const u = n.setLocale(i);
-      l(u);
+  ), C = j(
+    (u) => {
+      const h = n.setLocale(u);
+      c(h);
     },
     [n]
-  ), T = N(() => n.saveGame(), [n]), E = N(
-    (i) => {
-      const u = n.loadGame(i);
-      l(u);
+  ), E = j(() => n.saveGame(), [n]), w = j(
+    (u) => {
+      const h = n.loadGame(u);
+      c(h);
     },
     [n]
-  ), w = {
-    snapshot: a,
+  ), S = {
+    snapshot: o,
     actions: {
-      selectChoice: o,
+      selectChoice: d,
       talkTo: m,
-      takeItem: h,
-      travelTo: f,
-      writeNote: g,
-      deleteNote: x,
-      setLocale: R,
-      saveGame: T,
-      loadGame: E
+      takeItem: v,
+      travelTo: b,
+      writeNote: x,
+      deleteNote: _,
+      setLocale: C,
+      saveGame: E,
+      loadGame: w
     }
   };
-  return /* @__PURE__ */ e.jsx(ae.Provider, { value: w, children: r });
+  return /* @__PURE__ */ e.jsx(ae.Provider, { value: S, children: r });
 }
 function re() {
-  const n = me(ae);
+  const n = he(ae);
   if (!n)
     throw new Error("useGame must be used within a GameProvider");
   return n;
 }
-function le(n, s = {}) {
-  var p;
+function le(n, t = {}) {
+  var I;
   const {
     audioBasePath: r = "/audio",
     masterVolume: a = 1,
-    musicVolume: l = 0.7,
-    soundVolume: o = 0.8,
-    voiceVolume: m = 1,
-    crossfadeDuration: h = 1e3
-  } = s, [f, g] = C(a), [x, R] = C(l), [T, E] = C(o), [w, i] = C(m), u = q(null), _ = q(null), G = q(null), D = q(null);
+    musicVolume: o = 0.7,
+    soundVolume: c = 0.8,
+    voiceVolume: d = 1,
+    crossfadeDuration: m = 1e3
+  } = t, [v, b] = T(a), [x, _] = T(o), [C, E] = T(c), [w, S] = T(d), u = U(null), h = U(null), $ = U(null), M = U(null);
   L(() => {
-    const d = new Audio();
-    d.loop = !0, u.current = d;
-    const v = new Audio();
-    return _.current = v, () => {
-      D.current && clearInterval(D.current), d.pause(), v.pause(), d.src = "", v.src = "";
+    const l = new Audio();
+    l.loop = !0, u.current = l;
+    const p = new Audio();
+    return h.current = p, () => {
+      M.current && clearInterval(M.current), l.pause(), p.pause(), l.src = "", p.src = "";
     };
   }, []), L(() => {
-    const d = u.current;
-    if (!d) return;
-    const v = n.music;
-    if (v !== G.current)
-      if (G.current = v, !v)
-        J(d, h);
+    const l = u.current;
+    if (!l) return;
+    const p = n.music;
+    if (p !== $.current)
+      if ($.current = p, !p)
+        Y(l, m);
       else {
-        const y = `${r}/music/${v}`;
-        W(d, y, h);
+        const N = `${r}/music/${p}`;
+        q(l, N, m);
       }
-    d.volume = f * x;
-  }, [n.music, f, x, r, h]), L(() => {
-    var y;
-    const d = _.current;
-    if (!d) return;
-    const v = (y = n.dialogue) == null ? void 0 : y.voice;
-    v && (d.pause(), d.currentTime = 0, d.src = `${r}/voice/${v}`, d.volume = f * w, d.play().catch((O) => {
-      console.warn("Voice playback failed:", O);
+    l.volume = v * x;
+  }, [n.music, v, x, r, m]), L(() => {
+    var N;
+    const l = h.current;
+    if (!l) return;
+    const p = (N = n.dialogue) == null ? void 0 : N.voice;
+    p && (l.pause(), l.currentTime = 0, l.src = `${r}/voice/${p}`, l.volume = v * w, l.play().catch((A) => {
+      console.warn("Voice playback failed:", A);
     }));
-  }, [(p = n.dialogue) == null ? void 0 : p.voice, f, w, r]), L(() => {
-    n.pendingSounds.length !== 0 && n.pendingSounds.forEach((d) => {
-      const v = new Audio(`${r}/sfx/${d}`);
-      v.volume = f * T, v.play().catch((y) => {
-        console.warn("Sound playback failed:", y);
+  }, [(I = n.dialogue) == null ? void 0 : I.voice, v, w, r]), L(() => {
+    n.pendingSounds.length !== 0 && n.pendingSounds.forEach((l) => {
+      const p = new Audio(`${r}/sfx/${l}`);
+      p.volume = v * C, p.play().catch((N) => {
+        console.warn("Sound playback failed:", N);
       });
     });
-  }, [n.pendingSounds, f, T, r]);
-  const W = (d, v, y) => {
-    J(d, y / 2).then(() => {
-      d.src = v, d.load(), d.volume = 0, d.play().then(() => {
-        A(d, y / 2, f * x);
-      }).catch((O) => {
-        console.warn("Music playback failed:", O);
+  }, [n.pendingSounds, v, C, r]);
+  const q = (l, p, N) => {
+    Y(l, N / 2).then(() => {
+      l.src = p, l.load(), l.volume = 0, l.play().then(() => {
+        W(l, N / 2, v * x);
+      }).catch((A) => {
+        console.warn("Music playback failed:", A);
       });
     });
-  }, J = (d, v) => new Promise((y) => {
-    const O = d.volume, M = 20, Y = v / M, $ = O / M;
+  }, Y = (l, p) => new Promise((N) => {
+    const A = l.volume, V = 20, G = p / V, O = A / V;
     let P = 0;
-    const I = setInterval(() => {
-      P++, d.volume = Math.max(0, O - $ * P), P >= M && (clearInterval(I), d.pause(), d.currentTime = 0, y());
-    }, Y);
-    D.current = I;
-  }), A = (d, v, y) => {
-    const M = v / 20, Y = y / 20;
-    let $ = 0;
+    const D = setInterval(() => {
+      P++, l.volume = Math.max(0, A - O * P), P >= V && (clearInterval(D), l.pause(), l.currentTime = 0, N());
+    }, G);
+    M.current = D;
+  }), W = (l, p, N) => {
+    const V = p / 20, G = N / 20;
+    let O = 0;
     const P = setInterval(() => {
-      $++, d.volume = Math.min(y, Y * $), $ >= 20 && clearInterval(P);
-    }, M);
-    D.current = P;
+      O++, l.volume = Math.min(N, G * O), O >= 20 && clearInterval(P);
+    }, V);
+    M.current = P;
   };
   return {
-    setMasterVolume: g,
-    setMusicVolume: R,
+    setMasterVolume: b,
+    setMusicVolume: _,
     setSoundVolume: E,
-    setVoiceVolume: i,
+    setVoiceVolume: S,
     stopAll: () => {
-      u.current && (u.current.pause(), u.current.currentTime = 0), _.current && (_.current.pause(), _.current.currentTime = 0);
+      u.current && (u.current.pause(), u.current.currentTime = 0), h.current && (h.current.pause(), h.current.currentTime = 0);
     }
   };
 }
-const xe = {
+const je = {
   click: "click.ogg",
   menuOpen: "menu_open.ogg",
   menuClose: "menu_close.ogg"
 };
-function je(n = {}) {
+function Ne(n = {}) {
   const {
-    enabled: s = !0,
+    enabled: t = !0,
     basePath: r = "/audio/ui",
     volume: a = 0.5,
-    sounds: l = {}
-  } = n, [o, m] = C(s), [h, f] = C(a), g = q({ ...xe, ...l }), x = N(
-    (i) => {
-      if (!o || !i) return;
-      const u = new Audio(`${r}/${i}`);
-      u.volume = h, u.play().catch(() => {
+    sounds: o = {}
+  } = n, [c, d] = T(t), [m, v] = T(a), b = U({ ...je, ...o }), x = j(
+    (S) => {
+      if (!c || !S) return;
+      const u = new Audio(`${r}/${S}`);
+      u.volume = m, u.play().catch(() => {
       });
     },
-    [o, h, r]
-  ), R = N(
-    (i) => {
-      const u = g.current[i];
+    [c, m, r]
+  ), _ = j(
+    (S) => {
+      const u = b.current[S];
       u && x(u);
     },
     [x]
-  ), T = N(() => x(g.current.click), [x]), E = N(() => x(g.current.menuOpen), [x]), w = N(() => x(g.current.menuClose), [x]);
+  ), C = j(() => x(b.current.click), [x]), E = j(() => x(b.current.menuOpen), [x]), w = j(() => x(b.current.menuClose), [x]);
   return {
-    playClick: T,
+    playClick: C,
     playMenuOpen: E,
     playMenuClose: w,
-    playSound: R,
-    setEnabled: m,
-    setVolume: f,
-    enabled: o,
-    volume: h
+    playSound: _,
+    setEnabled: d,
+    setVolume: v,
+    enabled: c,
+    volume: m
   };
 }
-function Ne({ dialogue: n, className: s = "" }) {
-  return /* @__PURE__ */ e.jsxs("div", { className: `dialogue-box ${s}`, children: [
+function ge({ dialogue: n, className: t = "" }) {
+  return /* @__PURE__ */ e.jsxs("div", { className: `dialogue-box ${t}`, children: [
     n.portrait && /* @__PURE__ */ e.jsx("div", { className: "dialogue-portrait", children: /* @__PURE__ */ e.jsx("img", { src: n.portrait, alt: n.speakerName }) }),
     /* @__PURE__ */ e.jsxs("div", { className: "dialogue-content", children: [
       /* @__PURE__ */ e.jsx("div", { className: "dialogue-speaker", children: n.speakerName }),
@@ -478,19 +482,19 @@ function Ne({ dialogue: n, className: s = "" }) {
     ] })
   ] });
 }
-function be({ choices: n, onSelectChoice: s, className: r = "" }) {
+function be({ choices: n, onSelectChoice: t, className: r = "" }) {
   return n.length === 0 ? null : /* @__PURE__ */ e.jsx("div", { className: `choice-list ${r}`, children: n.map((a) => /* @__PURE__ */ e.jsx(
     "button",
     {
       className: "choice-button",
-      onClick: () => s(a.id),
+      onClick: () => t(a.id),
       children: a.text
     },
     a.id
   )) });
 }
-function ge({ location: n, className: s = "" }) {
-  return /* @__PURE__ */ e.jsxs("div", { className: `location-view ${s}`, children: [
+function Se({ location: n, className: t = "" }) {
+  return /* @__PURE__ */ e.jsxs("div", { className: `location-view ${t}`, children: [
     n.banner && /* @__PURE__ */ e.jsx("div", { className: "location-banner", children: /* @__PURE__ */ e.jsx("img", { src: n.banner, alt: n.name }) }),
     /* @__PURE__ */ e.jsxs("div", { className: "location-content", children: [
       /* @__PURE__ */ e.jsx("h1", { className: "location-name", children: n.name }),
@@ -498,9 +502,9 @@ function ge({ location: n, className: s = "" }) {
     ] })
   ] });
 }
-function Se({
+function ke({
   characters: n,
-  onTalkTo: s,
+  onTalkTo: t,
   className: r = ""
 }) {
   return n.length === 0 ? null : /* @__PURE__ */ e.jsxs("div", { className: `character-list ${r}`, children: [
@@ -509,7 +513,7 @@ function Se({
       "button",
       {
         className: "character-card",
-        onClick: () => s(a.id),
+        onClick: () => t(a.id),
         children: [
           a.portrait && /* @__PURE__ */ e.jsx(
             "img",
@@ -526,23 +530,23 @@ function Se({
     )) })
   ] });
 }
-function ke({ items: n, className: s = "" }) {
-  const [r, a] = C(null);
-  return /* @__PURE__ */ e.jsxs("div", { className: `inventory ${s}`, children: [
+function ye({ items: n, className: t = "" }) {
+  const [r, a] = T(null);
+  return /* @__PURE__ */ e.jsxs("div", { className: `inventory ${t}`, children: [
     /* @__PURE__ */ e.jsx("h2", { children: "Inventory" }),
-    n.length === 0 ? /* @__PURE__ */ e.jsx("p", { className: "inventory-empty", children: "No items" }) : /* @__PURE__ */ e.jsx("div", { className: "inventory-grid", children: n.map((l) => /* @__PURE__ */ e.jsxs(
+    n.length === 0 ? /* @__PURE__ */ e.jsx("p", { className: "inventory-empty", children: "No items" }) : /* @__PURE__ */ e.jsx("div", { className: "inventory-grid", children: n.map((o) => /* @__PURE__ */ e.jsxs(
       "div",
       {
         className: "inventory-item",
-        onClick: () => a(l),
+        onClick: () => a(o),
         children: [
-          l.icon && /* @__PURE__ */ e.jsx("img", { src: l.icon, alt: l.name, className: "item-icon" }),
-          /* @__PURE__ */ e.jsx("div", { className: "item-name", children: l.name })
+          o.icon && /* @__PURE__ */ e.jsx("img", { src: o.icon, alt: o.name, className: "item-icon" }),
+          /* @__PURE__ */ e.jsx("div", { className: "item-name", children: o.name })
         ]
       },
-      l.id
+      o.id
     )) }),
-    r && /* @__PURE__ */ e.jsx("div", { className: "item-modal-overlay", onClick: () => a(null), children: /* @__PURE__ */ e.jsxs("div", { className: "item-modal", onClick: (l) => l.stopPropagation(), children: [
+    r && /* @__PURE__ */ e.jsx("div", { className: "item-modal-overlay", onClick: () => a(null), children: /* @__PURE__ */ e.jsxs("div", { className: "item-modal", onClick: (o) => o.stopPropagation(), children: [
       r.image && /* @__PURE__ */ e.jsx("img", { src: r.image, alt: r.name, className: "item-modal-image" }),
       /* @__PURE__ */ e.jsx("h3", { className: "item-modal-name", children: r.name }),
       /* @__PURE__ */ e.jsx("p", { className: "item-modal-description", children: r.description }),
@@ -550,7 +554,7 @@ function ke({ items: n, className: s = "" }) {
     ] }) })
   ] });
 }
-function ye({ quests: n, entries: s, className: r = "" }) {
+function Ee({ quests: n, entries: t, className: r = "" }) {
   return /* @__PURE__ */ e.jsxs("div", { className: `journal ${r}`, children: [
     /* @__PURE__ */ e.jsx("h2", { children: "Journal" }),
     n.length > 0 && /* @__PURE__ */ e.jsxs("div", { className: "journal-quests", children: [
@@ -561,17 +565,17 @@ function ye({ quests: n, entries: s, className: r = "" }) {
         /* @__PURE__ */ e.jsx("div", { className: "quest-stage", children: a.currentStageDescription })
       ] }, a.id))
     ] }),
-    s.length > 0 && /* @__PURE__ */ e.jsxs("div", { className: "journal-entries", children: [
+    t.length > 0 && /* @__PURE__ */ e.jsxs("div", { className: "journal-entries", children: [
       /* @__PURE__ */ e.jsx("h3", { children: "Entries" }),
-      s.map((a) => /* @__PURE__ */ e.jsxs("div", { className: `journal-entry journal-category-${a.category}`, children: [
+      t.map((a) => /* @__PURE__ */ e.jsxs("div", { className: `journal-entry journal-category-${a.category}`, children: [
         /* @__PURE__ */ e.jsx("div", { className: "entry-title", children: a.title }),
         /* @__PURE__ */ e.jsx("div", { className: "entry-text", children: a.text })
       ] }, a.id))
     ] }),
-    n.length === 0 && s.length === 0 && /* @__PURE__ */ e.jsx("p", { className: "journal-empty", children: "No entries yet" })
+    n.length === 0 && t.length === 0 && /* @__PURE__ */ e.jsx("p", { className: "journal-empty", children: "No entries yet" })
   ] });
 }
-function Ee({ map: n, onTravelTo: s, className: r = "" }) {
+function we({ map: n, onTravelTo: t, className: r = "" }) {
   return n ? /* @__PURE__ */ e.jsxs("div", { className: `map-view ${r}`, children: [
     /* @__PURE__ */ e.jsx("h2", { children: n.name }),
     /* @__PURE__ */ e.jsxs("div", { className: "map-container", style: { position: "relative" }, children: [
@@ -585,7 +589,7 @@ function Ee({ map: n, onTravelTo: s, className: r = "" }) {
             left: `${a.x}px`,
             top: `${a.y}px`
           },
-          onClick: () => !a.isCurrent && s(a.id),
+          onClick: () => !a.isCurrent && t(a.id),
           disabled: a.isCurrent,
           title: a.name,
           children: a.name
@@ -597,139 +601,139 @@ function Ee({ map: n, onTravelTo: s, className: r = "" }) {
 }
 function Te({
   notifications: n,
-  className: s = ""
+  className: t = ""
 }) {
-  return n.length === 0 ? null : /* @__PURE__ */ e.jsx("div", { className: `notification-area ${s}`, children: n.map((r, a) => /* @__PURE__ */ e.jsx("div", { className: "notification", children: r }, a)) });
+  return n.length === 0 ? null : /* @__PURE__ */ e.jsx("div", { className: `notification-area ${t}`, children: n.map((r, a) => /* @__PURE__ */ e.jsx("div", { className: "notification", children: r }, a)) });
 }
-function we({
+function _e({
   onSave: n,
-  onLoad: s,
+  onLoad: t,
   storageKey: r = "doodle-engine-save",
   className: a = ""
 }) {
-  const [l, o] = C(""), m = () => {
-    const g = n();
-    localStorage.setItem(r, JSON.stringify(g)), o("Saved!"), setTimeout(() => o(""), 2e3);
-  }, h = () => {
-    const g = localStorage.getItem(r);
-    if (!g) {
-      o("No save found"), setTimeout(() => o(""), 2e3);
+  const [o, c] = T(""), d = () => {
+    const b = n();
+    localStorage.setItem(r, JSON.stringify(b)), c("Saved!"), setTimeout(() => c(""), 2e3);
+  }, m = () => {
+    const b = localStorage.getItem(r);
+    if (!b) {
+      c("No save found"), setTimeout(() => c(""), 2e3);
       return;
     }
-    const x = JSON.parse(g);
-    s(x), o("Loaded!"), setTimeout(() => o(""), 2e3);
-  }, f = localStorage.getItem(r) !== null;
+    const x = JSON.parse(b);
+    t(x), c("Loaded!"), setTimeout(() => c(""), 2e3);
+  }, v = localStorage.getItem(r) !== null;
   return /* @__PURE__ */ e.jsxs("div", { className: `save-load-panel ${a}`, children: [
-    /* @__PURE__ */ e.jsx("button", { className: "save-button", onClick: m, children: "Save" }),
-    /* @__PURE__ */ e.jsx("button", { className: "load-button", onClick: h, disabled: !f, children: "Load" }),
-    l && /* @__PURE__ */ e.jsx("span", { className: "save-load-message", children: l })
+    /* @__PURE__ */ e.jsx("button", { className: "save-button", onClick: d, children: "Save" }),
+    /* @__PURE__ */ e.jsx("button", { className: "load-button", onClick: m, disabled: !v, children: "Load" }),
+    o && /* @__PURE__ */ e.jsx("span", { className: "save-load-message", children: o })
   ] });
 }
-function _e({ className: n = "" }) {
-  const { snapshot: s, actions: r } = re();
-  le(s);
-  const a = Object.entries(s.variables).filter(([l]) => !l.startsWith("_"));
+function Ce({ className: n = "" }) {
+  const { snapshot: t, actions: r } = re();
+  le(t);
+  const a = Object.entries(t.variables).filter(([o]) => !o.startsWith("_"));
   return /* @__PURE__ */ e.jsxs("div", { className: `game-renderer ${n}`, children: [
-    /* @__PURE__ */ e.jsx(Te, { notifications: s.notifications }),
+    /* @__PURE__ */ e.jsx(Te, { notifications: t.notifications }),
     /* @__PURE__ */ e.jsxs("div", { className: "game-main", children: [
-      /* @__PURE__ */ e.jsx(ge, { location: s.location }),
-      s.dialogue && /* @__PURE__ */ e.jsxs("div", { className: "dialogue-container", children: [
-        /* @__PURE__ */ e.jsx(Ne, { dialogue: s.dialogue }),
-        /* @__PURE__ */ e.jsx(be, { choices: s.choices, onSelectChoice: r.selectChoice })
+      /* @__PURE__ */ e.jsx(Se, { location: t.location }),
+      t.dialogue && /* @__PURE__ */ e.jsxs("div", { className: "dialogue-container", children: [
+        /* @__PURE__ */ e.jsx(ge, { dialogue: t.dialogue }),
+        /* @__PURE__ */ e.jsx(be, { choices: t.choices, onSelectChoice: r.selectChoice })
       ] }),
-      !s.dialogue && /* @__PURE__ */ e.jsx(
-        Se,
+      !t.dialogue && /* @__PURE__ */ e.jsx(
+        ke,
         {
-          characters: s.charactersHere,
+          characters: t.charactersHere,
           onTalkTo: r.talkTo
         }
       )
     ] }),
     /* @__PURE__ */ e.jsxs("div", { className: "game-sidebar", children: [
-      /* @__PURE__ */ e.jsx(we, { onSave: r.saveGame, onLoad: r.loadGame }),
+      /* @__PURE__ */ e.jsx(_e, { onSave: r.saveGame, onLoad: r.loadGame }),
       a.length > 0 && /* @__PURE__ */ e.jsxs("div", { className: "resources", children: [
         /* @__PURE__ */ e.jsx("h2", { children: "Resources" }),
-        /* @__PURE__ */ e.jsx("ul", { className: "resources-list", children: a.map(([l, o]) => /* @__PURE__ */ e.jsxs("li", { className: "resource-entry", children: [
-          /* @__PURE__ */ e.jsx("span", { className: "resource-name", children: l }),
-          /* @__PURE__ */ e.jsx("span", { className: "resource-value", children: o })
-        ] }, l)) })
+        /* @__PURE__ */ e.jsx("ul", { className: "resources-list", children: a.map(([o, c]) => /* @__PURE__ */ e.jsxs("li", { className: "resource-entry", children: [
+          /* @__PURE__ */ e.jsx("span", { className: "resource-name", children: o }),
+          /* @__PURE__ */ e.jsx("span", { className: "resource-value", children: c })
+        ] }, o)) })
       ] }),
-      s.party.length > 0 && /* @__PURE__ */ e.jsxs("div", { className: "party", children: [
+      t.party.length > 0 && /* @__PURE__ */ e.jsxs("div", { className: "party", children: [
         /* @__PURE__ */ e.jsx("h2", { children: "Party" }),
-        /* @__PURE__ */ e.jsx("ul", { className: "party-list", children: s.party.map((l) => /* @__PURE__ */ e.jsx("li", { className: "party-member", children: /* @__PURE__ */ e.jsx("span", { className: "party-member-name", children: l.name }) }, l.id)) })
+        /* @__PURE__ */ e.jsx("ul", { className: "party-list", children: t.party.map((o) => /* @__PURE__ */ e.jsx("li", { className: "party-member", children: /* @__PURE__ */ e.jsx("span", { className: "party-member-name", children: o.name }) }, o.id)) })
       ] }),
-      /* @__PURE__ */ e.jsx(ke, { items: s.inventory }),
-      /* @__PURE__ */ e.jsx(ye, { quests: s.quests, entries: s.journal }),
-      s.map && /* @__PURE__ */ e.jsx(Ee, { map: s.map, onTravelTo: r.travelTo })
+      /* @__PURE__ */ e.jsx(ye, { items: t.inventory }),
+      /* @__PURE__ */ e.jsx(Ee, { quests: t.quests, entries: t.journal }),
+      t.map && /* @__PURE__ */ e.jsx(we, { map: t.map, onTravelTo: r.travelTo })
     ] })
   ] });
 }
-function Ce({
+function Re({
   logoSrc: n,
-  title: s,
+  title: t,
   onComplete: r,
   duration: a = 2e3,
-  className: l = ""
+  className: o = ""
 }) {
   return L(() => {
-    const o = setTimeout(r, a);
-    return () => clearTimeout(o);
-  }, [r, a]), /* @__PURE__ */ e.jsxs("div", { className: `splash-screen ${l}`, onClick: r, children: [
-    n && /* @__PURE__ */ e.jsx("img", { src: n, alt: s || "", className: "splash-logo" }),
-    s && /* @__PURE__ */ e.jsx("h1", { className: "splash-title", children: s }),
+    const c = setTimeout(r, a);
+    return () => clearTimeout(c);
+  }, [r, a]), /* @__PURE__ */ e.jsxs("div", { className: `splash-screen ${o}`, onClick: r, children: [
+    n && /* @__PURE__ */ e.jsx("img", { src: n, alt: t || "", className: "splash-logo" }),
+    t && /* @__PURE__ */ e.jsx("h1", { className: "splash-title", children: t }),
     /* @__PURE__ */ e.jsx("div", { className: "splash-loading", children: "Loading..." })
   ] });
 }
-function Re({
+function Ae({
   title: n = "Doodle Engine",
-  subtitle: s,
+  subtitle: t,
   logoSrc: r,
   hasSaveData: a,
-  onNewGame: l,
-  onContinue: o,
-  onSettings: m,
-  className: h = ""
+  onNewGame: o,
+  onContinue: c,
+  onSettings: d,
+  className: m = ""
 }) {
-  return /* @__PURE__ */ e.jsxs("div", { className: `title-screen ${h}`, children: [
+  return /* @__PURE__ */ e.jsxs("div", { className: `title-screen ${m}`, children: [
     r && /* @__PURE__ */ e.jsx("img", { src: r, alt: n, className: "title-logo" }),
     /* @__PURE__ */ e.jsx("h1", { className: "title-heading", children: n }),
-    s && /* @__PURE__ */ e.jsx("p", { className: "title-subtitle", children: s }),
+    t && /* @__PURE__ */ e.jsx("p", { className: "title-subtitle", children: t }),
     /* @__PURE__ */ e.jsxs("div", { className: "title-menu", children: [
-      /* @__PURE__ */ e.jsx("button", { className: "title-button", onClick: l, children: "New Game" }),
-      a && /* @__PURE__ */ e.jsx("button", { className: "title-button", onClick: o, children: "Continue" }),
-      /* @__PURE__ */ e.jsx("button", { className: "title-button", onClick: m, children: "Settings" })
+      /* @__PURE__ */ e.jsx("button", { className: "title-button", onClick: o, children: "New Game" }),
+      a && /* @__PURE__ */ e.jsx("button", { className: "title-button", onClick: c, children: "Continue" }),
+      /* @__PURE__ */ e.jsx("button", { className: "title-button", onClick: d, children: "Settings" })
     ] })
   ] });
 }
-function Ae({
+function Oe({
   onResume: n,
-  onSave: s,
+  onSave: t,
   onLoad: r,
   onSettings: a,
-  onQuitToTitle: l,
-  className: o = ""
+  onQuitToTitle: o,
+  className: c = ""
 }) {
-  return /* @__PURE__ */ e.jsx("div", { className: `pause-menu-overlay ${o}`, children: /* @__PURE__ */ e.jsxs("div", { className: "pause-menu", children: [
+  return /* @__PURE__ */ e.jsx("div", { className: `pause-menu-overlay ${c}`, children: /* @__PURE__ */ e.jsxs("div", { className: "pause-menu", children: [
     /* @__PURE__ */ e.jsx("h2", { className: "pause-title", children: "Paused" }),
     /* @__PURE__ */ e.jsxs("div", { className: "pause-buttons", children: [
       /* @__PURE__ */ e.jsx("button", { className: "pause-button", onClick: n, children: "Resume" }),
-      /* @__PURE__ */ e.jsx("button", { className: "pause-button", onClick: s, children: "Save" }),
+      /* @__PURE__ */ e.jsx("button", { className: "pause-button", onClick: t, children: "Save" }),
       /* @__PURE__ */ e.jsx("button", { className: "pause-button", onClick: r, children: "Load" }),
       /* @__PURE__ */ e.jsx("button", { className: "pause-button", onClick: a, children: "Settings" }),
-      /* @__PURE__ */ e.jsx("button", { className: "pause-button pause-button-quit", onClick: l, children: "Quit to Title" })
+      /* @__PURE__ */ e.jsx("button", { className: "pause-button pause-button-quit", onClick: o, children: "Quit to Title" })
     ] })
   ] }) });
 }
 function oe({
   audioControls: n,
-  uiSoundControls: s,
+  uiSoundControls: t,
   availableLocales: r,
   currentLocale: a,
-  onLocaleChange: l,
-  onBack: o,
-  className: m = ""
+  onLocaleChange: o,
+  onBack: c,
+  className: d = ""
 }) {
-  return /* @__PURE__ */ e.jsxs("div", { className: `settings-panel ${m}`, children: [
+  return /* @__PURE__ */ e.jsxs("div", { className: `settings-panel ${d}`, children: [
     /* @__PURE__ */ e.jsx("h2", { className: "settings-title", children: "Settings" }),
     /* @__PURE__ */ e.jsxs("div", { className: "settings-section", children: [
       /* @__PURE__ */ e.jsx("h3", { children: "Audio" }),
@@ -765,33 +769,33 @@ function oe({
           onChange: n.setVoiceVolume
         }
       ),
-      s && /* @__PURE__ */ e.jsx(
+      t && /* @__PURE__ */ e.jsx(
         Q,
         {
           label: "UI Sounds",
-          value: s.volume,
-          onChange: s.setVolume
+          value: t.volume,
+          onChange: t.setVolume
         }
       )
     ] }),
-    r && r.length > 1 && l && /* @__PURE__ */ e.jsxs("div", { className: "settings-section", children: [
+    r && r.length > 1 && o && /* @__PURE__ */ e.jsxs("div", { className: "settings-section", children: [
       /* @__PURE__ */ e.jsx("h3", { children: "Language" }),
       /* @__PURE__ */ e.jsx(
         "select",
         {
           className: "settings-locale-select",
           value: a,
-          onChange: (h) => l(h.target.value),
-          children: r.map((h) => /* @__PURE__ */ e.jsx("option", { value: h.code, children: h.label }, h.code))
+          onChange: (m) => o(m.target.value),
+          children: r.map((m) => /* @__PURE__ */ e.jsx("option", { value: m.code, children: m.label }, m.code))
         }
       )
     ] }),
-    /* @__PURE__ */ e.jsx("button", { className: "settings-back-button", onClick: o, children: "Back" })
+    /* @__PURE__ */ e.jsx("button", { className: "settings-back-button", onClick: c, children: "Back" })
   ] });
 }
 function Q({
   label: n,
-  value: s,
+  value: t,
   onChange: r
 }) {
   return /* @__PURE__ */ e.jsxs("div", { className: "volume-slider", children: [
@@ -803,31 +807,31 @@ function Q({
         min: "0",
         max: "1",
         step: "0.05",
-        defaultValue: s,
+        defaultValue: t,
         onChange: (a) => r(parseFloat(a.target.value)),
         className: "volume-input"
       }
     )
   ] });
 }
-function Oe({
+function Pe({
   src: n,
-  basePath: s = "/video",
+  basePath: t = "/video",
   onComplete: r,
   className: a = ""
 }) {
-  const l = q(null);
+  const o = U(null);
   return L(() => {
-    const o = (m) => {
-      (m.key === "Escape" || m.key === " " || m.key === "Enter") && (m.preventDefault(), r());
+    const c = (d) => {
+      (d.key === "Escape" || d.key === " " || d.key === "Enter") && (d.preventDefault(), r());
     };
-    return window.addEventListener("keydown", o), () => window.removeEventListener("keydown", o);
+    return window.addEventListener("keydown", c), () => window.removeEventListener("keydown", c);
   }, [r]), /* @__PURE__ */ e.jsxs("div", { className: `video-player-overlay ${a}`, children: [
     /* @__PURE__ */ e.jsx(
       "video",
       {
-        ref: l,
-        src: `${s}/${n}`,
+        ref: o,
+        src: `${t}/${n}`,
         autoPlay: !0,
         onEnded: r,
         className: "video-player-video"
@@ -843,29 +847,30 @@ function Oe({
     )
   ] });
 }
-function Me({
+function Ie({
   registry: n,
-  config: s,
+  config: t,
   title: r = "Doodle Engine",
   subtitle: a,
-  logoSrc: l,
-  splashDuration: o = 2e3,
-  uiSounds: m,
-  audioOptions: h,
-  storageKey: f = "doodle-engine-save",
-  availableLocales: g,
+  logoSrc: o,
+  splashDuration: c = 2e3,
+  uiSounds: d,
+  audioOptions: m,
+  storageKey: v = "doodle-engine-save",
+  availableLocales: b,
   videoBasePath: x = "/video",
-  className: R = ""
+  className: _ = "",
+  devTools: C = !1
 }) {
-  const [T, E] = C(o > 0 ? "splash" : "title"), [w, i] = C(!1), [u, _] = C(!1), [G, D] = C("title"), [W, J] = C(null), [A, F] = C(null), p = je(
-    m === !1 ? { enabled: !1 } : m
-  ), d = localStorage.getItem(f) !== null, v = N(() => {
-    const b = {
-      currentLocation: s.startLocation,
-      currentTime: { ...s.startTime },
-      flags: { ...s.startFlags },
-      variables: { ...s.startVariables },
-      inventory: [...s.startInventory],
+  const [E, w] = T(c > 0 ? "splash" : "title"), [S, u] = T(!1), [h, $] = T(!1), [M, q] = T("title"), [Y, W] = T(null), [R, I] = T(null), l = Ne(
+    d === !1 ? { enabled: !1 } : d
+  ), p = localStorage.getItem(v) !== null, N = j(() => {
+    const g = {
+      currentLocation: t.startLocation,
+      currentTime: { ...t.startTime },
+      flags: { ...t.startFlags },
+      variables: { ...t.startVariables },
+      inventory: [...t.startInventory],
       questProgress: {},
       unlockedJournalEntries: [],
       playerNotes: [],
@@ -878,42 +883,42 @@ function Me({
       pendingVideo: null,
       currentLocale: "en"
     };
-    return new ie(n, b);
-  }, [n, s]), y = N(() => {
-    p.playClick();
-    const b = v(), V = b.newGame(s);
-    F({ engine: b, snapshot: V }), E("playing");
-  }, [v, s, p]), O = N(() => {
-    p.playClick();
-    const b = localStorage.getItem(f);
-    if (!b) return;
-    const V = JSON.parse(b), t = v(), c = t.loadGame(V);
-    F({ engine: t, snapshot: c }), E("playing");
-  }, [v, f, p]), M = N(() => {
-    if (!A) return;
-    p.playClick();
-    const b = A.engine.saveGame();
-    localStorage.setItem(f, JSON.stringify(b)), i(!1);
-  }, [A, f, p]), Y = N(() => {
-    const b = localStorage.getItem(f);
-    if (!b || !A) return;
-    p.playClick();
-    const V = JSON.parse(b), t = A.engine.loadGame(V);
-    F({ engine: A.engine, snapshot: t }), i(!1);
-  }, [A, f, p]), $ = N(() => {
-    p.playClick(), i(!1), _(!1), F(null), E("title");
-  }, [p]), P = N((b) => {
-    p.playMenuOpen(), D(b), _(!0), b === "pause" && i(!1);
-  }, [p]), I = N(() => {
-    p.playMenuClose(), _(!1), G === "pause" && i(!0);
-  }, [G, p]);
+    return new ue(n, g);
+  }, [n, t]), A = j(() => {
+    l.playClick();
+    const g = N(), s = g.newGame(t);
+    I({ engine: g, snapshot: s }), w("playing");
+  }, [N, t, l]), V = j(() => {
+    l.playClick();
+    const g = localStorage.getItem(v);
+    if (!g) return;
+    const s = JSON.parse(g), i = N(), f = i.loadGame(s);
+    I({ engine: i, snapshot: f }), w("playing");
+  }, [N, v, l]), G = j(() => {
+    if (!R) return;
+    l.playClick();
+    const g = R.engine.saveGame();
+    localStorage.setItem(v, JSON.stringify(g)), u(!1);
+  }, [R, v, l]), O = j(() => {
+    const g = localStorage.getItem(v);
+    if (!g || !R) return;
+    l.playClick();
+    const s = JSON.parse(g), i = R.engine.loadGame(s);
+    I({ engine: R.engine, snapshot: i }), u(!1);
+  }, [R, v, l]), P = j(() => {
+    l.playClick(), u(!1), $(!1), I(null), w("title");
+  }, [l]), D = j((g) => {
+    l.playMenuOpen(), q(g), $(!0), g === "pause" && u(!1);
+  }, [l]), F = j(() => {
+    l.playMenuClose(), $(!1), M === "pause" && u(!0);
+  }, [M, l]);
   L(() => {
-    if (T !== "playing") return;
-    const b = (V) => {
-      V.key === "Escape" && (V.preventDefault(), u ? I() : (w ? p.playMenuClose() : p.playMenuOpen(), i((t) => !t)));
+    if (E !== "playing") return;
+    const g = (s) => {
+      s.key === "Escape" && (s.preventDefault(), h ? F() : (S ? l.playMenuClose() : l.playMenuOpen(), u((i) => !i)));
     };
-    return window.addEventListener("keydown", b), () => window.removeEventListener("keydown", b);
-  }, [T, w, u, I, p]);
+    return window.addEventListener("keydown", g), () => window.removeEventListener("keydown", g);
+  }, [E, S, h, F, l]);
   const X = {
     setMasterVolume: () => {
     },
@@ -926,141 +931,148 @@ function Me({
     stopAll: () => {
     }
   };
-  return T === "splash" ? /* @__PURE__ */ e.jsx("div", { className: `game-shell ${R}`, children: /* @__PURE__ */ e.jsx(
-    Ce,
+  return E === "splash" ? /* @__PURE__ */ e.jsx("div", { className: `game-shell ${_}`, children: /* @__PURE__ */ e.jsx(
+    Re,
     {
-      logoSrc: l,
+      logoSrc: o,
       title: r,
-      onComplete: () => E("title"),
-      duration: o
+      onComplete: () => w("title"),
+      duration: c
     }
-  ) }) : T === "title" ? /* @__PURE__ */ e.jsx("div", { className: `game-shell ${R}`, children: u ? /* @__PURE__ */ e.jsx(
+  ) }) : E === "title" ? /* @__PURE__ */ e.jsx("div", { className: `game-shell ${_}`, children: h ? /* @__PURE__ */ e.jsx(
     oe,
     {
       audioControls: X,
-      uiSoundControls: m !== !1 ? p : void 0,
-      availableLocales: g,
-      onBack: I
+      uiSoundControls: d !== !1 ? l : void 0,
+      availableLocales: b,
+      onBack: F
     }
   ) : /* @__PURE__ */ e.jsx(
-    Re,
+    Ae,
     {
       title: r,
       subtitle: a,
-      logoSrc: l,
-      hasSaveData: d,
-      onNewGame: y,
-      onContinue: O,
-      onSettings: () => P("title")
+      logoSrc: o,
+      hasSaveData: p,
+      onNewGame: A,
+      onContinue: V,
+      onSettings: () => D("title")
     }
-  ) }) : A ? /* @__PURE__ */ e.jsx("div", { className: `game-shell ${R}`, children: /* @__PURE__ */ e.jsx(fe, { engine: A.engine, initialSnapshot: A.snapshot, children: /* @__PURE__ */ e.jsx(
-    Pe,
+  ) }) : R ? /* @__PURE__ */ e.jsx("div", { className: `game-shell ${_}`, children: /* @__PURE__ */ e.jsx(xe, { engine: R.engine, initialSnapshot: R.snapshot, devTools: C, children: /* @__PURE__ */ e.jsx(
+    $e,
     {
-      audioOptions: h,
-      uiSoundControls: m !== !1 ? p : void 0,
-      showPauseMenu: w,
-      showSettings: u,
-      availableLocales: g,
+      audioOptions: m,
+      uiSoundControls: d !== !1 ? l : void 0,
+      showPauseMenu: S,
+      showSettings: h,
+      availableLocales: b,
       videoBasePath: x,
-      pendingVideo: W,
-      setPendingVideo: J,
+      pendingVideo: Y,
+      setPendingVideo: W,
       onPause: () => {
-        p.playMenuOpen(), i(!0);
+        l.playMenuOpen(), u(!0);
       },
       onResume: () => {
-        p.playMenuClose(), i(!1);
+        l.playMenuClose(), u(!1);
       },
-      onSave: M,
-      onLoad: Y,
-      onSettings: () => P("pause"),
-      onQuitToTitle: $,
-      onCloseSettings: I
+      onSave: G,
+      onLoad: O,
+      onSettings: () => D("pause"),
+      onQuitToTitle: P,
+      onCloseSettings: F
     }
   ) }) }) : null;
 }
-function Pe({
+function $e({
   audioOptions: n,
-  uiSoundControls: s,
+  uiSoundControls: t,
   showPauseMenu: r,
   showSettings: a,
-  availableLocales: l,
-  videoBasePath: o,
-  pendingVideo: m,
-  setPendingVideo: h,
-  onPause: f,
-  onResume: g,
+  availableLocales: o,
+  videoBasePath: c,
+  pendingVideo: d,
+  setPendingVideo: m,
+  onPause: v,
+  onResume: b,
   onSave: x,
-  onLoad: R,
-  onSettings: T,
+  onLoad: _,
+  onSettings: C,
   onQuitToTitle: E,
   onCloseSettings: w
 }) {
-  const { snapshot: i, actions: u } = re(), _ = le(i, n);
+  const { snapshot: S, actions: u } = re(), h = le(S, n);
   return L(() => {
-    i.pendingVideo && h(i.pendingVideo);
-  }, [i.pendingVideo, h]), /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-    m && /* @__PURE__ */ e.jsx(
-      Oe,
+    S.pendingVideo && m(S.pendingVideo);
+  }, [S.pendingVideo, m]), /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    d && /* @__PURE__ */ e.jsx(
+      Pe,
       {
-        src: m,
-        basePath: o,
-        onComplete: () => h(null)
+        src: d,
+        basePath: c,
+        onComplete: () => m(null)
       }
     ),
-    /* @__PURE__ */ e.jsx(_e, {}),
-    !r && !a && !m && /* @__PURE__ */ e.jsx(
+    /* @__PURE__ */ e.jsx(Ce, {}),
+    !r && !a && !d && /* @__PURE__ */ e.jsx(
       "button",
       {
         className: "game-shell-menu-button",
-        onClick: f,
+        onClick: v,
         "aria-label": "Menu",
         children: "Menu"
       }
     ),
     r && /* @__PURE__ */ e.jsx(
-      Ae,
+      Oe,
       {
-        onResume: g,
+        onResume: b,
         onSave: x,
-        onLoad: R,
-        onSettings: T,
+        onLoad: _,
+        onSettings: C,
         onQuitToTitle: E
       }
     ),
     a && /* @__PURE__ */ e.jsx(
       oe,
       {
-        audioControls: _,
-        uiSoundControls: s,
-        availableLocales: l,
-        currentLocale: (i.time, void 0),
+        audioControls: h,
+        uiSoundControls: t,
+        availableLocales: o,
+        currentLocale: (S.time, void 0),
         onLocaleChange: u.setLocale,
         onBack: w
       }
     )
   ] });
 }
+function Le({ message: n = "Loading...", className: t = "" }) {
+  return /* @__PURE__ */ e.jsx("div", { className: `loading-screen ${t}`, children: /* @__PURE__ */ e.jsxs("div", { className: "loading-screen-content", children: [
+    /* @__PURE__ */ e.jsx("div", { className: "loading-screen-spinner" }),
+    /* @__PURE__ */ e.jsx("p", { className: "loading-screen-message", children: n })
+  ] }) });
+}
 export {
-  Se as CharacterList,
+  ke as CharacterList,
   be as ChoiceList,
-  Ne as DialogueBox,
+  ge as DialogueBox,
   ae as GameContext,
-  fe as GameProvider,
-  _e as GameRenderer,
-  Me as GameShell,
-  ke as Inventory,
-  ye as Journal,
-  ge as LocationView,
-  Ee as MapView,
+  xe as GameProvider,
+  Ce as GameRenderer,
+  Ie as GameShell,
+  ye as Inventory,
+  Ee as Journal,
+  Le as LoadingScreen,
+  Se as LocationView,
+  we as MapView,
   Te as NotificationArea,
-  Ae as PauseMenu,
-  we as SaveLoadPanel,
+  Oe as PauseMenu,
+  _e as SaveLoadPanel,
   oe as SettingsPanel,
-  Ce as SplashScreen,
-  Re as TitleScreen,
-  De as VERSION,
-  Oe as VideoPlayer,
+  Re as SplashScreen,
+  Ae as TitleScreen,
+  Fe as VERSION,
+  Pe as VideoPlayer,
   le as useAudioManager,
   re as useGame,
-  je as useUISounds
+  Ne as useUISounds
 };