@number10/phaserjsx 0.4.2 → 0.5.1

package/dist/{TransformOriginView-CrzevUOh.cjs → TransformOriginView-DyhDBexY.cjs}

@@ -1,6 +1,6 @@
 "use strict";
 const jsxRuntime = require("./jsx-runtime.cjs");
-const Phaser$1 = require("phaser");
+const Phaser = require("phaser");
 const signalsCore = require("@preact/signals-core");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
@@ -37,7 +37,17 @@ function _mergeNamespaces(n, m) {
   }
   return Object.freeze(Object.defineProperty(n, Symbol.toStringTag, { value: "Module" }));
 }
-const Phaser__namespace = /* @__PURE__ */ _interopNamespaceDefault(Phaser$1);
+const Phaser__namespace = /* @__PURE__ */ _interopNamespaceDefault(Phaser);
+function isPhaserScene(value) {
+  if (!value || typeof value !== "object") return false;
+  const maybe = value;
+  return typeof maybe.sys === "object" && typeof maybe.add === "object";
+}
+function isPhaserContainer(value) {
+  if (!value || typeof value !== "object") return false;
+  const maybe = value;
+  return Array.isArray(maybe.list) && typeof maybe.add === "function" && typeof maybe.remove === "function";
+}
 const nodeRegistry = {};
 function register(type, descriptor) {
   nodeRegistry[type] = descriptor;
@@ -78,9 +88,9 @@ const host = {
    * @param child - Child node to append
    */
   append(parent, child) {
-    if (parent instanceof Phaser__namespace.GameObjects.Container) {
+    if (isPhaserContainer(parent)) {
       parent.add(child);
-    } else if (parent && typeof parent === "object" && "sys" in parent) {
+    } else if (isPhaserScene(parent)) {
       const scene = parent;
       scene.add.existing(child);
     } else if (parent && typeof parent === "object" && "scene" in parent) {
@@ -98,7 +108,7 @@ const host = {
   remove(parent, child) {
     const childObj = child;
     if (!childObj.scene) return;
-    if (parent instanceof Phaser__namespace.GameObjects.Container) {
+    if (isPhaserContainer(parent)) {
       parent.remove(childObj, false);
     }
     if (childObj.destroy) {
@@ -8821,18 +8831,6 @@ function getPresetWithMode(name, mode) {
   const preset2 = getPreset(name);
   return mode === "light" ? applyLightMode(preset2) : applyDarkMode(preset2);
 }
-const colorPresets = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
-  __proto__: null,
-  applyDarkMode,
-  applyLightMode,
-  forestGreenPreset,
-  generateColorScale,
-  getPreset,
-  getPresetWithMode,
-  midnightPreset,
-  oceanBluePreset,
-  presets
-}, Symbol.toStringTag, { value: "Module" }));
 const defaultSpacingTokens = {
   xs: 4,
   sm: 8,
@@ -9409,253 +9407,6 @@ function createDefaultTheme(presetName = "oceanBlue", mode = "light") {
   const presetForMode = getPresetWithMode(presetName, mode);
   return buildDefaultTheme(presetForMode.colors);
 }
-class ThemeRegistry {
-  globalTheme = { ...defaultTheme };
-  customThemes = /* @__PURE__ */ new Map();
-  colorTokens = void 0;
-  colorMode = "light";
-  currentPresetName = void 0;
-  listeners = /* @__PURE__ */ new Set();
-  /**
-   * Get the complete global theme
-   */
-  getGlobalTheme() {
-    return { ...this.globalTheme, ...Object.fromEntries(this.customThemes) };
-  }
-  /**
-   * Update global theme (deep merge)
-   * @param theme - Partial theme to merge with current global theme
-   */
-  updateGlobalTheme(theme) {
-    for (const [component, styles] of Object.entries(theme)) {
-      if (component in this.globalTheme) {
-        this.globalTheme[component] = {
-          ...this.globalTheme[component],
-          ...styles
-        };
-        DebugLogger.log(
-          "theme",
-          `Updated ${component} theme:`,
-          this.globalTheme[component]
-        );
-      } else {
-        const existing = this.customThemes.get(component) ?? {};
-        this.customThemes.set(component, { ...existing, ...styles });
-      }
-    }
-  }
-  /**
-   * Set the entire global theme (replaces current theme)
-   * @param theme - Complete theme to set
-   */
-  setGlobalTheme(theme) {
-    this.globalTheme = { ...theme };
-  }
-  /**
-   * Reset global theme to default values
-   */
-  resetGlobalTheme() {
-    this.globalTheme = { ...defaultTheme };
-    this.customThemes.clear();
-  }
-  /**
-   * Register a custom component theme
-   * @param componentName - Name of the custom component
-   * @param defaultStyles - Default styles for the component
-   */
-  registerCustomComponent(componentName, defaultStyles) {
-    this.customThemes.set(componentName, defaultStyles);
-  }
-  /**
-   * Get theme for a specific component
-   * @param componentName - Component name
-   * @returns Theme for the component
-   */
-  getComponentTheme(componentName) {
-    if (componentName in this.globalTheme) {
-      const theme = this.globalTheme[componentName];
-      return theme;
-    }
-    return this.customThemes.get(componentName) ?? {};
-  }
-  /**
-   * Get all registered custom component names
-   * @returns Set of custom component names
-   */
-  getCustomComponentNames() {
-    return new Set(this.customThemes.keys());
-  }
-  /**
-   * Set color tokens for the global theme
-   * @param colors - ColorTokens to use globally
-   */
-  setColorTokens(colors) {
-    this.colorTokens = colors;
-  }
-  /**
-   * Get current color tokens
-   * @returns Current ColorTokens or undefined
-   */
-  getColorTokens() {
-    return this.colorTokens;
-  }
-  /**
-   * Get current color mode
-   * @returns Current color mode
-   */
-  getColorMode() {
-    return this.colorMode;
-  }
-  /**
-   * Set color mode and trigger complete remount
-   * Updates color tokens if a preset is active
-   * Triggers complete remount of all active mountJSX instances
-   * @param mode - Color mode to set
-   */
-  setColorMode(mode) {
-    if (this.colorMode !== mode) {
-      this.colorMode = mode;
-      if (this.currentPresetName) {
-        Promise.resolve().then(() => colorPresets).then(({ getPresetWithMode: getPresetWithMode2 }) => {
-          const preset2 = getPresetWithMode2(
-            this.currentPresetName,
-            mode
-          );
-          this.colorTokens = preset2.colors;
-        });
-      }
-      setTimeout(() => {
-        Promise.resolve().then(() => vdom).then(({ remountAll: remountAll2 }) => {
-          remountAll2();
-        });
-      }, 0);
-    }
-  }
-  /**
-   * Get current preset name
-   * @returns Current preset name or undefined
-   */
-  getCurrentPresetName() {
-    return this.currentPresetName;
-  }
-  /**
-   * Set current preset name
-   * @param name - Preset name
-   * @param skipNotify - If true, skip notifying listeners (used during remount)
-   */
-  setCurrentPresetName(name, skipNotify = false) {
-    if (this.currentPresetName !== name) {
-      this.currentPresetName = name;
-      if (!skipNotify) {
-        this.notifyListeners();
-      }
-    }
-  }
-  /**
-   * Subscribe to theme changes
-   * @param listener - Callback to invoke on theme change
-   * @returns Unsubscribe function
-   */
-  subscribe(listener) {
-    this.listeners.add(listener);
-    return () => {
-      this.listeners.delete(listener);
-    };
-  }
-  /**
-   * Notify all listeners of theme change
-   */
-  notifyListeners() {
-    this.listeners.forEach((listener) => listener());
-  }
-}
-const themeRegistry = new ThemeRegistry();
-function mergeThemes(base, override) {
-  const result = { ...base };
-  for (const [component, styles] of Object.entries(override)) {
-    if (component in result) {
-      result[component] = {
-        ...result[component],
-        ...styles
-      };
-    } else {
-      result[component] = styles;
-    }
-  }
-  return result;
-}
-function createTheme(theme, colorPreset) {
-  if (colorPreset) {
-    themeRegistry.setColorTokens(colorPreset.colors);
-    return {
-      ...theme,
-      __colorPreset: {
-        name: colorPreset.name,
-        mode: colorPreset.mode ?? "light"
-      }
-    };
-  }
-  return theme;
-}
-function deepMergeDefined(base, override) {
-  const result = { ...base };
-  for (const key in override) {
-    const value = override[key];
-    if (value !== void 0) {
-      if (typeof value === "object" && value !== null && !Array.isArray(value) && typeof base[key] === "object" && base[key] !== null) {
-        result[key] = deepMergeDefined(
-          base[key],
-          value
-        );
-      } else {
-        result[key] = value;
-      }
-    }
-  }
-  return result;
-}
-function extractNestedThemes(theme) {
-  const ownProps = { ...theme };
-  const nestedThemes = {};
-  const allComponentNames = /* @__PURE__ */ new Set([
-    "View",
-    "Text",
-    "NineSlice",
-    ...Array.from(themeRegistry.getCustomComponentNames())
-  ]);
-  for (const key in ownProps) {
-    if (allComponentNames.has(key)) {
-      nestedThemes[key] = ownProps[key];
-      delete ownProps[key];
-    }
-  }
-  return { ownProps, nestedThemes };
-}
-function getThemedProps(componentName, localTheme, explicitProps) {
-  const globalComponentTheme = themeRegistry.getComponentTheme(componentName);
-  const { ownProps: globalOwnProps, nestedThemes: globalNestedThemes } = extractNestedThemes(globalComponentTheme);
-  const localComponentTheme = localTheme?.[componentName] ?? {};
-  const { ownProps: localOwnProps, nestedThemes: localNestedThemes } = extractNestedThemes(localComponentTheme);
-  const { nestedThemes: localThemeNested } = extractNestedThemes(localTheme ?? {});
-  const { ownProps: explicitOwnProps, nestedThemes: explicitNestedThemes } = extractNestedThemes(explicitProps);
-  const mergedProps = {
-    ...deepMergeDefined(globalOwnProps, localOwnProps),
-    ...deepMergeDefined({}, explicitOwnProps)
-  };
-  const mergedNestedThemes = mergeThemes(
-    mergeThemes(mergeThemes(globalNestedThemes, localNestedThemes), localThemeNested),
-    explicitNestedThemes
-  );
-  DebugLogger.log(
-    "theme",
-    `getThemedProps(${String(componentName)}): FINAL mergedProps:`,
-    mergedProps
-  );
-  return {
-    props: mergedProps,
-    nestedTheme: mergedNestedThemes
-  };
-}
 class RenderContext {
   constructor(scene) {
     this.scene = scene;
@@ -9787,11 +9538,11 @@ class RenderContext {
   }
 }
 function getRenderContext(parentOrScene) {
-  const scene = parentOrScene instanceof Phaser__namespace.Scene ? parentOrScene : parentOrScene.scene;
+  const scene = isPhaserScene(parentOrScene) ? parentOrScene : parentOrScene.scene;
   if (!scene || !scene.data || !scene.sys || !scene.sys.settings.active) {
     throw new Error("getRenderContext: Invalid scene or scene.data is undefined");
   }
-  const containerKey = parentOrScene instanceof Phaser__namespace.GameObjects.Container ? `__renderContext_${parentOrScene.name || parentOrScene.id || "container"}__` : "__renderContext_scene__";
+  const containerKey = isPhaserContainer(parentOrScene) ? `__renderContext_${parentOrScene.name || parentOrScene.id || "container"}__` : "__renderContext_scene__";
   let context = scene.data.get(containerKey);
   if (!context) {
     context = new RenderContext(scene);
@@ -9811,18 +9562,268 @@ function getContextFromParent(parent) {
   }
   return getRenderContext(parent);
 }
-function View(props) {
-  const localTheme = useTheme();
-  const { props: themed, nestedTheme } = getThemedProps("View", localTheme, props);
-  return /* @__PURE__ */ jsxRuntime.jsx("view", { ...themed, theme: nestedTheme });
-}
-function SceneWrapper(props) {
-  const { width, height, children } = props;
-  return /* @__PURE__ */ jsxRuntime.jsx(View, { width, height, children });
+function getCurrent() {
+  return _currentCtx;
 }
-class PortalRegistry {
-  portals = /* @__PURE__ */ new Map();
-  idCounter = 0;
+let _currentCtx = null;
+function withHooks(ctx, render) {
+  const scene = isPhaserScene(ctx.parent) ? ctx.parent : ctx.parent.scene;
+  if (!scene || !scene.sys || !scene.sys.settings.active) {
+    return null;
+  }
+  const renderContext = getContextFromParent(ctx.parent);
+  if (renderContext.isShutdown()) {
+    return null;
+  }
+  const prev = renderContext.getCurrent();
+  const prevModule = _currentCtx;
+  renderContext.setCurrent(ctx);
+  _currentCtx = ctx;
+  ctx.index = 0;
+  ctx.effects = [];
+  const out = render();
+  renderContext.setCurrent(prev);
+  _currentCtx = prevModule;
+  return out;
+}
+function useState(initial) {
+  const c = getCurrent();
+  const i = c.index++;
+  if (i >= c.slots.length)
+    c.slots[i] = typeof initial === "function" ? initial() : initial;
+  const value = c.slots[i];
+  const set = (v) => {
+    const next = typeof v === "function" ? v(c.slots[i]) : v;
+    if (Object.is(next, c.slots[i])) return;
+    c.slots[i] = next;
+    scheduleUpdate(c);
+  };
+  return [value, set];
+}
+function useRef(val) {
+  const c = getCurrent();
+  const i = c.index++;
+  if (i >= c.slots.length) c.slots[i] = { current: val };
+  return c.slots[i];
+}
+function useForceRedraw(first, ...rest) {
+  const [, setForceRedraw] = useState(0);
+  const throttleMs = typeof first === "number" ? first : void 0;
+  const signals = typeof first === "number" ? rest : [first, ...rest];
+  useEffect(() => {
+    const unsubscribes = [];
+    let lastUpdate = 0;
+    const triggerUpdate = () => {
+      const now = Date.now();
+      if (throttleMs && now - lastUpdate < throttleMs) return;
+      lastUpdate = now;
+      setForceRedraw({});
+    };
+    for (const signal of signals) {
+      if (signal && typeof signal === "object" && "subscribe" in signal) {
+        const subscriptions = signal.subscribe(triggerUpdate);
+        unsubscribes.push(subscriptions);
+      }
+    }
+    return () => {
+      unsubscribes.forEach((unsubscribe) => unsubscribe());
+    };
+  }, [throttleMs, ...signals]);
+}
+function useMemo(fn, deps) {
+  const c = getCurrent();
+  const i = c.index++;
+  const slot = c.slots[i] ?? (c.slots[i] = { deps: void 0, value: void 0 });
+  if (!depsChanged(slot.deps, deps)) return slot.value;
+  slot.value = fn();
+  slot.deps = deps;
+  return slot.value;
+}
+function useCallback(fn, deps) {
+  return useMemo(() => fn, deps);
+}
+function useTheme() {
+  return getCurrent()?.theme;
+}
+function useScene() {
+  const ctx = getCurrent();
+  if (!ctx) throw new Error("useScene must be called within a component");
+  const renderContext = getContextFromParent(ctx.parent);
+  return renderContext.scene;
+}
+function useViewportSize() {
+  const ctx = getCurrent();
+  if (!ctx) {
+    throw new Error("useViewportSize must be called within a component");
+  }
+  const renderContext = getContextFromParent(ctx.parent);
+  return renderContext.getViewport();
+}
+function getLayoutSize(container) {
+  if (!container) return void 0;
+  const withLayout = container;
+  return withLayout.__getLayoutSize?.();
+}
+function useLayoutSize(ref) {
+  return getLayoutSize(ref.current);
+}
+function getLayoutProps(container) {
+  if (!container) return void 0;
+  const withLayout = container;
+  return withLayout.__layoutProps;
+}
+function getBackgroundGraphics(container) {
+  if (!container) return void 0;
+  const withBackground = container;
+  return withBackground.__background;
+}
+function useBackgroundGraphics(ref) {
+  return getBackgroundGraphics(ref.current);
+}
+function getLayoutRect(container) {
+  if (!container) return void 0;
+  const size = getLayoutSize(container);
+  if (!size) return void 0;
+  return {
+    x: container.x,
+    y: container.y,
+    width: size.width,
+    height: size.height
+  };
+}
+function useLayoutRect(ref) {
+  return getLayoutRect(ref.current);
+}
+function getWorldLayoutRect(container) {
+  if (!container) return void 0;
+  const size = getLayoutSize(container);
+  if (!size) return void 0;
+  const matrix = container.getWorldTransformMatrix();
+  const worldX = matrix.tx;
+  const worldY = matrix.ty;
+  const worldWidth = size.width * Math.abs(matrix.scaleX);
+  const worldHeight = size.height * Math.abs(matrix.scaleY);
+  return {
+    x: worldX,
+    y: worldY,
+    width: worldWidth,
+    height: worldHeight
+  };
+}
+function useWorldLayoutRect(ref) {
+  return getWorldLayoutRect(ref.current);
+}
+function useEffect(fn, deps) {
+  const c = getCurrent();
+  const i = c.index++;
+  const slot = c.slots[i] ?? (c.slots[i] = { deps: void 0, cleanup: void 0 });
+  c.effects.push(() => {
+    if (!depsChanged(slot.deps, deps)) return;
+    if (typeof slot.cleanup === "function") slot.cleanup();
+    slot.cleanup = fn();
+    if (deps !== void 0) {
+      slot.deps = deps;
+    }
+  });
+}
+function useLayoutEffect(fn, deps) {
+  const c = getCurrent();
+  const i = c.index++;
+  const slot = c.slots[i] ?? (c.slots[i] = { deps: void 0, cleanup: void 0 });
+  c.effects.push(() => {
+    if (!depsChanged(slot.deps, deps)) return;
+    if (typeof slot.cleanup === "function") slot.cleanup();
+    requestAnimationFrame(() => {
+      slot.cleanup = fn();
+    });
+    if (deps !== void 0) {
+      slot.deps = deps;
+    }
+  });
+}
+function depsChanged(a, b) {
+  if (!a || !b) return true;
+  if (a.length !== b.length) return true;
+  for (let i = 0; i < a.length; i++) {
+    if (!Object.is(a[i], b[i])) return true;
+  }
+  return false;
+}
+function shallowEqual(a, b) {
+  if (Object.is(a, b)) return true;
+  if (a == null || b == null) return false;
+  if (typeof a !== "object" || typeof b !== "object") return false;
+  const keysA = Object.keys(a);
+  const keysB = Object.keys(b);
+  if (keysA.length !== keysB.length) return false;
+  for (const key of keysA) {
+    if (!Object.prototype.hasOwnProperty.call(b, key) || !Object.is(a[key], b[key])) {
+      return false;
+    }
+  }
+  return true;
+}
+function shouldComponentUpdate(ctx, newProps) {
+  if (ctx.memoized === false) return true;
+  if (ctx.componentVNode.__memo === false) return true;
+  if (ctx.lastProps === void 0) {
+    ctx.lastProps = newProps;
+    return true;
+  }
+  const hasChanged = !shallowEqual(ctx.lastProps, newProps);
+  ctx.lastProps = newProps;
+  return hasChanged;
+}
+function useRedraw() {
+  const c = getCurrent();
+  return () => {
+    if (c != null) scheduleUpdate(c);
+  };
+}
+function scheduleUpdate(c) {
+  if (c.updater) return;
+  c.updater = () => {
+    c.updater = void 0;
+    if (c.disposed) {
+      return;
+    }
+    const scene = isPhaserScene(c.parent) ? c.parent : c.parent.scene;
+    if (!scene || !scene.sys || !scene.sys.settings.active) {
+      return;
+    }
+    const componentProps = c.componentVNode.props ?? {};
+    const propsWithChildren = c.componentVNode.children?.length ? { ...componentProps, children: c.componentVNode.children } : componentProps;
+    const nextVNode = normalizeVNodeLike(withHooks(c, () => c.function(propsWithChildren)));
+    patchVNode(c.parent, c.vnode, nextVNode);
+    c.vnode = nextVNode;
+    for (const run of c.effects) run();
+  };
+  queueMicrotask(c.updater);
+}
+function disposeCtx(c) {
+  c.disposed = true;
+  for (const cl of c.cleanups) {
+    if (typeof cl === "function") cl();
+  }
+  for (const slot of c.slots) {
+    if (slot && typeof slot === "object" && "cleanup" in slot && typeof slot.cleanup === "function") {
+      slot.cleanup();
+    }
+  }
+  c.cleanups.length = 0;
+}
+function View(props) {
+  const localTheme = useTheme();
+  const { props: themed, nestedTheme } = getThemedProps("View", localTheme, props);
+  return /* @__PURE__ */ jsxRuntime.jsx("view", { ...themed, theme: nestedTheme });
+}
+function SceneWrapper(props) {
+  const { width, height, children } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(View, { width, height, children });
+}
+class PortalRegistry {
+  portals = /* @__PURE__ */ new Map();
+  idCounter = 0;
   portalRoots = /* @__PURE__ */ new Map();
   viewportSizes = /* @__PURE__ */ new Map();
   /**
@@ -10018,7 +10019,7 @@ class MountRegistry {
    */
   findByParentAndKey(parent, key) {
     for (const entry of this.entries.values()) {
-      const scene = entry.parent instanceof Phaser__namespace.Scene ? entry.parent : entry.parent.scene;
+      const scene = isPhaserScene(entry.parent) ? entry.parent : entry.parent.scene;
       if (!scene || !scene.sys || !scene.sys.settings.active) {
         DebugLogger.log("vdom", `Removing mount ${entry.id} - scene inactive`);
         this.unregister(entry.id);
@@ -10073,7 +10074,7 @@ class MountRegistry {
       if (key) {
         byKey.set(key, (byKey.get(key) ?? 0) + 1);
       }
-      const parentType = entry.parent instanceof Phaser__namespace.Scene ? "Scene" : "Container";
+      const parentType = isPhaserScene(entry.parent) ? "Scene" : "Container";
       const mountInfo = {
         id: entry.id,
         type: typeName,
@@ -10114,13 +10115,13 @@ function remountAll() {
   console.log(`[REMOUNT] Starting remount of ${entries.length} root(s)`);
   entries.forEach((entry) => {
     try {
-      const scene = entry.parent instanceof Phaser__namespace.Scene ? entry.parent : entry.parent.scene;
+      const scene = isPhaserScene(entry.parent) ? entry.parent : entry.parent.scene;
       if (!scene || !scene.sys) {
         console.warn("[REMOUNT] Scene is invalid, skipping remount");
         return;
       }
       const currentVNode = scene.__rootVNode;
-      if (entry.rootNode instanceof Phaser__namespace.GameObjects.Container) {
+      if (isPhaserContainer(entry.rootNode)) {
         const children = entry.rootNode.getAll();
         children.forEach((child) => {
           ;
@@ -10161,7 +10162,7 @@ function remountAll() {
       ;
       scene.__rootVNode = vnode;
       const rootNode = mount(entry.parent, vnode);
-      if (rootNode instanceof Phaser__namespace.GameObjects.Container) {
+      if (isPhaserContainer(rootNode)) {
         ;
         rootNode.__mountRootId = generateMountRootId();
       }
@@ -10419,7 +10420,7 @@ function mount(parentOrScene, vnode) {
         vnode.__theme
       );
     }
-    const scene2 = parentOrScene instanceof Phaser__namespace.Scene ? parentOrScene : parentOrScene.scene;
+    const scene2 = isPhaserScene(parentOrScene) ? parentOrScene : parentOrScene.scene;
     const ctx = {
       index: 0,
       slots: [],
@@ -10534,7 +10535,7 @@ function mount(parentOrScene, vnode) {
   if (node && "list" in node && Array.isArray(node.list)) {
     const container = node;
     let parentSize;
-    if (parentOrScene instanceof Phaser__namespace.GameObjects.Container) {
+    if (isPhaserContainer(parentOrScene)) {
       const parentContainer = parentOrScene;
       if (parentContainer.__getLayoutSize) {
         const parentTotalSize = parentContainer.__getLayoutSize();
@@ -10833,7 +10834,7 @@ function patchVNode(parent, oldV, newV) {
     const container = oldV.__node;
     if (container.__layoutProps) {
       let parentSize;
-      if (parent instanceof Phaser__namespace.GameObjects.Container) {
+      if (isPhaserContainer(parent)) {
         const parentContainer = parent;
         if (parentContainer.__getLayoutSize) {
           const parentTotalSize = parentContainer.__getLayoutSize();
@@ -10925,7 +10926,7 @@ Solution: Add unique keys like { key: 'sidebar', ... } and { key: 'main', ... }`
     return handle2;
   }
   const { width, height, disableAutoSize = false, key: _key, ...componentProps } = props;
-  const scene = parentOrScene instanceof Phaser__namespace.Scene ? parentOrScene : parentOrScene.scene;
+  const scene = isPhaserScene(parentOrScene) ? parentOrScene : parentOrScene.scene;
   if (scene) {
     const renderContext = getRenderContext(parentOrScene);
     renderContext.setViewport(width, height, scene);
@@ -10958,7 +10959,7 @@ Solution: Add unique keys like { key: 'sidebar', ... } and { key: 'main', ... }`
     scene.__rootVNode = vnode;
   }
   const rootNode = mount(parentOrScene, vnode);
-  if (rootNode instanceof Phaser__namespace.GameObjects.Container) {
+  if (isPhaserContainer(rootNode)) {
     rootNode.__mountRootId = generateMountRootId();
   }
   rootNode.__rootVNode = vnode;
@@ -10969,7 +10970,7 @@ Solution: Add unique keys like { key: 'sidebar', ... } and { key: 'main', ... }`
   return handle;
 }
 function unmountJSX(target) {
-  const scene = target instanceof Phaser__namespace.Scene ? target : target.scene;
+  const scene = isPhaserScene(target) ? target : target.scene;
   const targetWithVNode = target;
   const sceneWithVNode = scene;
   const rootVNode = targetWithVNode.__rootVNode ?? sceneWithVNode?.__rootVNode;
@@ -10992,267 +10993,248 @@ function unmountJSX(target) {
   }
   DebugLogger.log("vdom", "unmountJSX called but no root VNode found on target");
 }
-const vdom = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
-  __proto__: null,
-  createElement,
-  getMountStats,
-  mount,
-  mountJSX,
-  normalizeVNodeLike,
-  patchVNode,
-  remountAll,
-  unmount,
-  unmountJSX
-}, Symbol.toStringTag, { value: "Module" }));
-function getCurrent() {
-  return _currentCtx;
-}
-let _currentCtx = null;
-function withHooks(ctx, render) {
-  const scene = ctx.parent instanceof Phaser.Scene ? ctx.parent : ctx.parent.scene;
-  if (!scene || !scene.sys || !scene.sys.settings.active) {
-    return null;
+class ThemeRegistry {
+  globalTheme = { ...defaultTheme };
+  customThemes = /* @__PURE__ */ new Map();
+  colorTokens = void 0;
+  colorMode = "light";
+  currentPresetName = void 0;
+  listeners = /* @__PURE__ */ new Set();
+  /**
+   * Get the complete global theme
+   */
+  getGlobalTheme() {
+    return { ...this.globalTheme, ...Object.fromEntries(this.customThemes) };
   }
-  const renderContext = getContextFromParent(ctx.parent);
-  if (renderContext.isShutdown()) {
-    return null;
+  /**
+   * Update global theme (deep merge)
+   * @param theme - Partial theme to merge with current global theme
+   */
+  updateGlobalTheme(theme) {
+    for (const [component, styles] of Object.entries(theme)) {
+      if (component in this.globalTheme) {
+        this.globalTheme[component] = {
+          ...this.globalTheme[component],
+          ...styles
+        };
+        DebugLogger.log(
+          "theme",
+          `Updated ${component} theme:`,
+          this.globalTheme[component]
+        );
+      } else {
+        const existing = this.customThemes.get(component) ?? {};
+        this.customThemes.set(component, { ...existing, ...styles });
+      }
+    }
   }
-  const prev = renderContext.getCurrent();
-  const prevModule = _currentCtx;
-  renderContext.setCurrent(ctx);
-  _currentCtx = ctx;
-  ctx.index = 0;
-  ctx.effects = [];
-  const out = render();
-  renderContext.setCurrent(prev);
-  _currentCtx = prevModule;
-  return out;
-}
-function useState(initial) {
-  const c = getCurrent();
-  const i = c.index++;
-  if (i >= c.slots.length)
-    c.slots[i] = typeof initial === "function" ? initial() : initial;
-  const value = c.slots[i];
-  const set = (v) => {
-    const next = typeof v === "function" ? v(c.slots[i]) : v;
-    if (Object.is(next, c.slots[i])) return;
-    c.slots[i] = next;
-    scheduleUpdate(c);
-  };
-  return [value, set];
-}
-function useRef(val) {
-  const c = getCurrent();
-  const i = c.index++;
-  if (i >= c.slots.length) c.slots[i] = { current: val };
-  return c.slots[i];
-}
-function useForceRedraw(first, ...rest) {
-  const [, setForceRedraw] = useState(0);
-  const throttleMs = typeof first === "number" ? first : void 0;
-  const signals = typeof first === "number" ? rest : [first, ...rest];
-  useEffect(() => {
-    const unsubscribes = [];
-    let lastUpdate = 0;
-    const triggerUpdate = () => {
-      const now = Date.now();
-      if (throttleMs && now - lastUpdate < throttleMs) return;
-      lastUpdate = now;
-      setForceRedraw({});
-    };
-    for (const signal of signals) {
-      if (signal && typeof signal === "object" && "subscribe" in signal) {
-        const subscriptions = signal.subscribe(triggerUpdate);
-        unsubscribes.push(subscriptions);
+  /**
+   * Set the entire global theme (replaces current theme)
+   * @param theme - Complete theme to set
+   */
+  setGlobalTheme(theme) {
+    this.globalTheme = { ...theme };
+  }
+  /**
+   * Reset global theme to default values
+   */
+  resetGlobalTheme() {
+    this.globalTheme = { ...defaultTheme };
+    this.customThemes.clear();
+  }
+  /**
+   * Register a custom component theme
+   * @param componentName - Name of the custom component
+   * @param defaultStyles - Default styles for the component
+   */
+  registerCustomComponent(componentName, defaultStyles) {
+    this.customThemes.set(componentName, defaultStyles);
+  }
+  /**
+   * Get theme for a specific component
+   * @param componentName - Component name
+   * @returns Theme for the component
+   */
+  getComponentTheme(componentName) {
+    if (componentName in this.globalTheme) {
+      const theme = this.globalTheme[componentName];
+      return theme;
+    }
+    return this.customThemes.get(componentName) ?? {};
+  }
+  /**
+   * Get all registered custom component names
+   * @returns Set of custom component names
+   */
+  getCustomComponentNames() {
+    return new Set(this.customThemes.keys());
+  }
+  /**
+   * Set color tokens for the global theme
+   * @param colors - ColorTokens to use globally
+   */
+  setColorTokens(colors) {
+    this.colorTokens = colors;
+  }
+  /**
+   * Get current color tokens
+   * @returns Current ColorTokens or undefined
+   */
+  getColorTokens() {
+    return this.colorTokens;
+  }
+  /**
+   * Get current color mode
+   * @returns Current color mode
+   */
+  getColorMode() {
+    return this.colorMode;
+  }
+  /**
+   * Set color mode and trigger complete remount
+   * Updates color tokens if a preset is active
+   * Triggers complete remount of all active mountJSX instances
+   * @param mode - Color mode to set
+   */
+  setColorMode(mode) {
+    if (this.colorMode !== mode) {
+      this.colorMode = mode;
+      if (this.currentPresetName) {
+        const preset2 = getPresetWithMode(
+          this.currentPresetName,
+          mode
+        );
+        this.colorTokens = preset2.colors;
+      }
+      setTimeout(() => {
+        remountAll();
+      }, 0);
+    }
+  }
+  /**
+   * Get current preset name
+   * @returns Current preset name or undefined
+   */
+  getCurrentPresetName() {
+    return this.currentPresetName;
+  }
+  /**
+   * Set current preset name
+   * @param name - Preset name
+   * @param skipNotify - If true, skip notifying listeners (used during remount)
+   */
+  setCurrentPresetName(name, skipNotify = false) {
+    if (this.currentPresetName !== name) {
+      this.currentPresetName = name;
+      if (!skipNotify) {
+        this.notifyListeners();
       }
     }
+  }
+  /**
+   * Subscribe to theme changes
+   * @param listener - Callback to invoke on theme change
+   * @returns Unsubscribe function
+   */
+  subscribe(listener) {
+    this.listeners.add(listener);
     return () => {
-      unsubscribes.forEach((unsubscribe) => unsubscribe());
+      this.listeners.delete(listener);
     };
-  }, [throttleMs, ...signals]);
-}
-function useMemo(fn, deps) {
-  const c = getCurrent();
-  const i = c.index++;
-  const slot = c.slots[i] ?? (c.slots[i] = { deps: void 0, value: void 0 });
-  if (!depsChanged(slot.deps, deps)) return slot.value;
-  slot.value = fn();
-  slot.deps = deps;
-  return slot.value;
-}
-function useCallback(fn, deps) {
-  return useMemo(() => fn, deps);
-}
-function useTheme() {
-  return getCurrent()?.theme;
-}
-function useScene() {
-  const ctx = getCurrent();
-  if (!ctx) throw new Error("useScene must be called within a component");
-  const renderContext = getContextFromParent(ctx.parent);
-  return renderContext.scene;
-}
-function useViewportSize() {
-  const ctx = getCurrent();
-  if (!ctx) {
-    throw new Error("useViewportSize must be called within a component");
   }
-  const renderContext = getContextFromParent(ctx.parent);
-  return renderContext.getViewport();
-}
-function getLayoutSize(container) {
-  if (!container) return void 0;
-  const withLayout = container;
-  return withLayout.__getLayoutSize?.();
-}
-function useLayoutSize(ref) {
-  return getLayoutSize(ref.current);
-}
-function getLayoutProps(container) {
-  if (!container) return void 0;
-  const withLayout = container;
-  return withLayout.__layoutProps;
-}
-function getBackgroundGraphics(container) {
-  if (!container) return void 0;
-  const withBackground = container;
-  return withBackground.__background;
-}
-function useBackgroundGraphics(ref) {
-  return getBackgroundGraphics(ref.current);
-}
-function getLayoutRect(container) {
-  if (!container) return void 0;
-  const size = getLayoutSize(container);
-  if (!size) return void 0;
-  return {
-    x: container.x,
-    y: container.y,
-    width: size.width,
-    height: size.height
-  };
-}
-function useLayoutRect(ref) {
-  return getLayoutRect(ref.current);
-}
-function getWorldLayoutRect(container) {
-  if (!container) return void 0;
-  const size = getLayoutSize(container);
-  if (!size) return void 0;
-  const matrix = container.getWorldTransformMatrix();
-  const worldX = matrix.tx;
-  const worldY = matrix.ty;
-  const worldWidth = size.width * Math.abs(matrix.scaleX);
-  const worldHeight = size.height * Math.abs(matrix.scaleY);
-  return {
-    x: worldX,
-    y: worldY,
-    width: worldWidth,
-    height: worldHeight
-  };
-}
-function useWorldLayoutRect(ref) {
-  return getWorldLayoutRect(ref.current);
-}
-function useEffect(fn, deps) {
-  const c = getCurrent();
-  const i = c.index++;
-  const slot = c.slots[i] ?? (c.slots[i] = { deps: void 0, cleanup: void 0 });
-  c.effects.push(() => {
-    if (!depsChanged(slot.deps, deps)) return;
-    if (typeof slot.cleanup === "function") slot.cleanup();
-    slot.cleanup = fn();
-    if (deps !== void 0) {
-      slot.deps = deps;
-    }
-  });
+  /**
+   * Notify all listeners of theme change
+   */
+  notifyListeners() {
+    this.listeners.forEach((listener) => listener());
+  }
 }
-function useLayoutEffect(fn, deps) {
-  const c = getCurrent();
-  const i = c.index++;
-  const slot = c.slots[i] ?? (c.slots[i] = { deps: void 0, cleanup: void 0 });
-  c.effects.push(() => {
-    if (!depsChanged(slot.deps, deps)) return;
-    if (typeof slot.cleanup === "function") slot.cleanup();
-    requestAnimationFrame(() => {
-      slot.cleanup = fn();
-    });
-    if (deps !== void 0) {
-      slot.deps = deps;
+const themeRegistry = new ThemeRegistry();
+function mergeThemes(base, override) {
+  const result = { ...base };
+  for (const [component, styles] of Object.entries(override)) {
+    if (component in result) {
+      result[component] = {
+        ...result[component],
+        ...styles
+      };
+    } else {
+      result[component] = styles;
     }
-  });
+  }
+  return result;
 }
-function depsChanged(a, b) {
-  if (!a || !b) return true;
-  if (a.length !== b.length) return true;
-  for (let i = 0; i < a.length; i++) {
-    if (!Object.is(a[i], b[i])) return true;
+function createTheme(theme, colorPreset) {
+  if (colorPreset) {
+    themeRegistry.setColorTokens(colorPreset.colors);
+    return {
+      ...theme,
+      __colorPreset: {
+        name: colorPreset.name,
+        mode: colorPreset.mode ?? "light"
+      }
+    };
   }
-  return false;
+  return theme;
 }
-function shallowEqual(a, b) {
-  if (Object.is(a, b)) return true;
-  if (a == null || b == null) return false;
-  if (typeof a !== "object" || typeof b !== "object") return false;
-  const keysA = Object.keys(a);
-  const keysB = Object.keys(b);
-  if (keysA.length !== keysB.length) return false;
-  for (const key of keysA) {
-    if (!Object.prototype.hasOwnProperty.call(b, key) || !Object.is(a[key], b[key])) {
-      return false;
+function deepMergeDefined(base, override) {
+  const result = { ...base };
+  for (const key in override) {
+    const value = override[key];
+    if (value !== void 0) {
+      if (typeof value === "object" && value !== null && !Array.isArray(value) && typeof base[key] === "object" && base[key] !== null) {
+        result[key] = deepMergeDefined(
+          base[key],
+          value
+        );
+      } else {
+        result[key] = value;
+      }
     }
   }
-  return true;
+  return result;
 }
-function shouldComponentUpdate(ctx, newProps) {
-  if (ctx.memoized === false) return true;
-  if (ctx.componentVNode.__memo === false) return true;
-  if (ctx.lastProps === void 0) {
-    ctx.lastProps = newProps;
-    return true;
+function extractNestedThemes(theme) {
+  const ownProps = { ...theme };
+  const nestedThemes = {};
+  const allComponentNames = /* @__PURE__ */ new Set([
+    "View",
+    "Text",
+    "NineSlice",
+    ...Array.from(themeRegistry.getCustomComponentNames())
+  ]);
+  for (const key in ownProps) {
+    if (allComponentNames.has(key)) {
+      nestedThemes[key] = ownProps[key];
+      delete ownProps[key];
+    }
   }
-  const hasChanged = !shallowEqual(ctx.lastProps, newProps);
-  ctx.lastProps = newProps;
-  return hasChanged;
+  return { ownProps, nestedThemes };
 }
-function useRedraw() {
-  const c = getCurrent();
-  return () => {
-    if (c != null) scheduleUpdate(c);
+function getThemedProps(componentName, localTheme, explicitProps) {
+  const globalComponentTheme = themeRegistry.getComponentTheme(componentName);
+  const { ownProps: globalOwnProps, nestedThemes: globalNestedThemes } = extractNestedThemes(globalComponentTheme);
+  const localComponentTheme = localTheme?.[componentName] ?? {};
+  const { ownProps: localOwnProps, nestedThemes: localNestedThemes } = extractNestedThemes(localComponentTheme);
+  const { nestedThemes: localThemeNested } = extractNestedThemes(localTheme ?? {});
+  const { ownProps: explicitOwnProps, nestedThemes: explicitNestedThemes } = extractNestedThemes(explicitProps);
+  const mergedProps = {
+    ...deepMergeDefined(globalOwnProps, localOwnProps),
+    ...deepMergeDefined({}, explicitOwnProps)
   };
-}
-function scheduleUpdate(c) {
-  if (c.updater) return;
-  c.updater = () => {
-    c.updater = void 0;
-    if (c.disposed) {
-      return;
-    }
-    const scene = c.parent instanceof Phaser.Scene ? c.parent : c.parent.scene;
-    if (!scene || !scene.sys || !scene.sys.settings.active) {
-      return;
-    }
-    const componentProps = c.componentVNode.props ?? {};
-    const propsWithChildren = c.componentVNode.children?.length ? { ...componentProps, children: c.componentVNode.children } : componentProps;
-    const nextVNode = normalizeVNodeLike(withHooks(c, () => c.function(propsWithChildren)));
-    patchVNode(c.parent, c.vnode, nextVNode);
-    c.vnode = nextVNode;
-    for (const run of c.effects) run();
+  const mergedNestedThemes = mergeThemes(
+    mergeThemes(mergeThemes(globalNestedThemes, localNestedThemes), localThemeNested),
+    explicitNestedThemes
+  );
+  DebugLogger.log(
+    "theme",
+    `getThemedProps(${String(componentName)}): FINAL mergedProps:`,
+    mergedProps
+  );
+  return {
+    props: mergedProps,
+    nestedTheme: mergedNestedThemes
   };
-  queueMicrotask(c.updater);
-}
-function disposeCtx(c) {
-  c.disposed = true;
-  for (const cl of c.cleanups) {
-    if (typeof cl === "function") cl();
-  }
-  for (const slot of c.slots) {
-    if (slot && typeof slot === "object" && "cleanup" in slot && typeof slot.cleanup === "function") {
-      slot.cleanup();
-    }
-  }
-  c.cleanups.length = 0;
 }
 const positionStates = /* @__PURE__ */ new WeakMap();
 function getPositionState(obj) {
@@ -11343,8 +11325,8 @@ const createShakeEffect = (obj, config) => {
       const progress = tween.progress;
       const decayFactor = Math.pow(1 - progress, 2);
       const mag = magnitude * decayFactor;
-      const newX = baseX + Phaser.Math.Between(-mag, mag) - state.scaleOffsetX;
-      const newY = baseY + Phaser.Math.Between(-mag, mag) - state.scaleOffsetY;
+      const newX = baseX + Phaser__namespace.Math.Between(-mag, mag) - state.scaleOffsetX;
+      const newY = baseY + Phaser__namespace.Math.Between(-mag, mag) - state.scaleOffsetY;
       obj.setPosition(newX, newY);
     },
     onComplete: () => {
@@ -12298,7 +12280,7 @@ function releaseAllSVGTextures() {
 function useSVGTexture(key, svg, width = 32, height = 32) {
   const [ready, setReady] = useState(false);
   const ctx = getCurrent() || {};
-  const scene = ctx.parent instanceof Phaser__namespace.Scene ? ctx.parent : ctx.parent?.scene;
+  const scene = isPhaserScene(ctx.parent) ? ctx.parent : ctx.parent?.scene;
   useEffect(() => {
     if (!scene) return;
     let cancelled = false;
@@ -12319,7 +12301,7 @@ function useSVGTexture(key, svg, width = 32, height = 32) {
 function useSVGTextures(configs) {
   const [ready, setReady] = useState(false);
   const ctx = getCurrent() || {};
-  const scene = ctx.parent instanceof Phaser__namespace.Scene ? ctx.parent : ctx.parent?.scene;
+  const scene = isPhaserScene(ctx.parent) ? ctx.parent : ctx.parent?.scene;
   const configKey = useMemo(
     () => configs.map((c) => `${c.key}:${c.width ?? 32}:${c.height ?? 32}`).join("|"),
     [configs]
@@ -12815,7 +12797,7 @@ function useSpring(initialValue, config, onComplete) {
     valueSignal.current = animatedSignal(initialValue);
   }
   const ctx = getCurrent();
-  const scene = ctx ? ctx.parent instanceof Phaser__namespace.Scene ? ctx.parent : ctx.parent.scene : null;
+  const scene = ctx ? isPhaserScene(ctx.parent) ? ctx.parent : ctx.parent.scene : null;
   const state = useRef({ value: initialValue, velocity: 0 });
   const target = useRef({ value: initialValue });
   const physics = useRef(new SpringPhysics(resolvedConfig));
@@ -12888,7 +12870,7 @@ function useSprings(initialValues, config) {
     }
   });
   const ctx = getCurrent();
-  const scene = ctx ? ctx.parent instanceof Phaser__namespace.Scene ? ctx.parent : ctx.parent.scene : null;
+  const scene = ctx ? isPhaserScene(ctx.parent) ? ctx.parent : ctx.parent.scene : null;
   if (scene && sceneRef.current !== scene) {
     sceneRef.current = scene;
   }
@@ -13092,7 +13074,7 @@ function Portal(props) {
         x = firstChild.x;
         y = firstChild.y;
         blocker.setPosition(x, y);
-        const hitArea = new Phaser.Geom.Rectangle(0, 0, width, height);
+        const hitArea = new Phaser__namespace.Geom.Rectangle(0, 0, width, height);
         gestureManager.registerContainer(
           blocker,
           {
@@ -17117,7 +17099,6 @@ exports.useState = useState;
 exports.useTheme = useTheme;
 exports.useViewportSize = useViewportSize;
 exports.useWorldLayoutRect = useWorldLayoutRect;
-exports.vdom = vdom;
 exports.viewportRegistry = viewportRegistry;
 exports.withHooks = withHooks;
-//# sourceMappingURL=TransformOriginView-CrzevUOh.cjs.map
+//# sourceMappingURL=TransformOriginView-DyhDBexY.cjs.map