@number10/phaserjsx 0.1.0 → 0.2.0

package/dist/{TransformOriginView-CO-tJCmV.js → TransformOriginView-CiFiQcku.js}

@@ -1443,7 +1443,7 @@ function requireLodash() {
         var reIsNative = RegExp2(
           "^" + funcToString.call(hasOwnProperty).replace(reRegExpChar, "\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g, "$1.*?") + "$"
         );
-        var Buffer = moduleExports ? context.Buffer : undefined$1, Symbol = context.Symbol, Uint8Array = context.Uint8Array, allocUnsafe = Buffer ? Buffer.allocUnsafe : undefined$1, getPrototype = overArg(Object2.getPrototypeOf, Object2), objectCreate = Object2.create, propertyIsEnumerable = objectProto.propertyIsEnumerable, splice = arrayProto.splice, spreadableSymbol = Symbol ? Symbol.isConcatSpreadable : undefined$1, symIterator = Symbol ? Symbol.iterator : undefined$1, symToStringTag = Symbol ? Symbol.toStringTag : undefined$1;
+        var Buffer = moduleExports ? context.Buffer : undefined$1, Symbol2 = context.Symbol, Uint8Array = context.Uint8Array, allocUnsafe = Buffer ? Buffer.allocUnsafe : undefined$1, getPrototype = overArg(Object2.getPrototypeOf, Object2), objectCreate = Object2.create, propertyIsEnumerable = objectProto.propertyIsEnumerable, splice = arrayProto.splice, spreadableSymbol = Symbol2 ? Symbol2.isConcatSpreadable : undefined$1, symIterator = Symbol2 ? Symbol2.iterator : undefined$1, symToStringTag = Symbol2 ? Symbol2.toStringTag : undefined$1;
         var defineProperty = (function() {
           try {
             var func = getNative(Object2, "defineProperty");
@@ -1458,7 +1458,7 @@ function requireLodash() {
         var metaMap = WeakMap2 && new WeakMap2();
         var realNames = {};
         var dataViewCtorString = toSource(DataView), mapCtorString = toSource(Map2), promiseCtorString = toSource(Promise2), setCtorString = toSource(Set2), weakMapCtorString = toSource(WeakMap2);
-        var symbolProto = Symbol ? Symbol.prototype : undefined$1, symbolValueOf = symbolProto ? symbolProto.valueOf : undefined$1, symbolToString = symbolProto ? symbolProto.toString : undefined$1;
+        var symbolProto = Symbol2 ? Symbol2.prototype : undefined$1, symbolValueOf = symbolProto ? symbolProto.valueOf : undefined$1, symbolToString = symbolProto ? symbolProto.toString : undefined$1;
         function lodash2(value) {
           if (isObjectLike(value) && !isArray(value) && !(value instanceof LazyWrapper)) {
             if (value instanceof LodashWrapper) {
@@ -9695,6 +9695,18 @@ 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,
@@ -9768,460 +9780,466 @@ function createTextStyleTokens(textColor) {
   };
 }
 const defaultTextStyleTokens = createTextStyleTokens("#ffffff");
-const preset = getPresetWithMode("oceanBlue", "light");
-const { colors } = preset;
-const textStyles = createTextStyleTokens(colors.text.DEFAULT.toString());
-const defaultTheme = {
-  // Primitives (lowercase) - share same defaults as uppercase
-  view: {
-    alpha: 1,
-    visible: true
-  },
-  Icon: {
-    size: 24,
-    tint: colors.border.dark.toNumber()
-  },
-  text: {
-    text: "",
-    alpha: 1,
-    visible: true,
-    style: textStyles.DEFAULT
-  },
-  nineslice: {
-    alpha: 1,
-    visible: true
-  },
-  sprite: {
-    alpha: 1,
-    visible: true
-  },
-  image: {
-    alpha: 1,
-    visible: true
-  },
-  graphics: {
-    alpha: 1,
-    visible: true
-  },
-  tilesprite: {
-    alpha: 1,
-    visible: true
-  },
-  // Public API (uppercase)
-  View: {
-    alpha: 1,
-    visible: true
-  },
-  Text: {
-    text: "",
-    alpha: 1,
-    visible: true,
-    style: textStyles.DEFAULT
-  },
-  NineSlice: {
-    alpha: 1,
-    visible: true
-  },
-  Sprite: {
-    alpha: 1,
-    visible: true
-  },
-  Image: {
-    alpha: 1,
-    visible: true
-  },
-  Graphics: {
-    alpha: 1,
-    visible: true
-  },
-  TileSprite: {
-    alpha: 1,
-    visible: true
-  },
-  RadioButton: {
-    selectedColor: colors.primary.DEFAULT.toNumber(),
-    color: colors.border.medium.toNumber(),
-    gap: 8,
-    size: 16,
-    innerSize: 12,
-    labelStyle: {
-      color: colors.text.DEFAULT.toString(),
-      fontSize: "14px"
-    }
-  },
-  ScrollSlider: {
-    borderColor: colors.border.medium.toNumber(),
-    trackColor: colors.surface.dark.toNumber(),
-    thumbColor: colors.primary.light.toNumber(),
-    borderWidth: 1,
-    size: 12,
-    minThumbSize: 20
-  },
-  Button: {
-    disabledColor: colors.background.DEFAULT.toNumber(),
-    iconSize: 24,
-    backgroundColor: colors.primary.DEFAULT.toNumber(),
-    backgroundAlpha: 1,
-    borderColor: colors.primary.dark.toNumber(),
-    borderWidth: 1,
-    cornerRadius: 6,
-    padding: 8,
-    gap: 8,
-    justifyContent: "center",
-    alignItems: "center",
-    primary: {
-      backgroundColor: colors.primary.medium.toNumber(),
-      borderColor: colors.primary.dark.toNumber()
+function buildDefaultTheme(colors) {
+  const textStyles = createTextStyleTokens(colors.text.DEFAULT.toString());
+  return {
+    // Primitives (lowercase) - share same defaults as uppercase
+    view: {
+      alpha: 1,
+      visible: true
     },
-    secondary: {
-      backgroundColor: colors.secondary.DEFAULT.toNumber(),
-      borderColor: colors.secondary.dark.toNumber(),
-      effect: "press",
-      effectConfig: { intensity: 0.9, time: 200 }
+    Icon: {
+      size: 24,
+      tint: colors.border.dark.toNumber()
     },
-    outline: {
-      backgroundColor: 0,
-      backgroundAlpha: 0,
-      borderColor: colors.accent.DEFAULT.toNumber(),
-      borderWidth: 2,
-      effect: "flash",
-      effectConfig: { intensity: 1.15, time: 200 }
+    text: {
+      text: "",
+      alpha: 1,
+      visible: true,
+      style: textStyles.DEFAULT
     },
-    small: {
-      padding: 6,
-      cornerRadius: 4
+    nineslice: {
+      alpha: 1,
+      visible: true
     },
-    medium: {
-      padding: 8,
-      cornerRadius: 6
+    sprite: {
+      alpha: 1,
+      visible: true
     },
-    large: {
-      padding: { top: 12, bottom: 12, left: 8, right: 8 },
-      cornerRadius: 8
-    }
-  },
-  Sidebar: {
-    variant: "solid",
-    size: "md",
-    backgroundColor: colors.surface.light.toNumber(),
-    backgroundAlpha: 1,
-    padding: 16,
-    gap: 8,
-    dividerColor: colors.border.light.toNumber(),
-    itemGap: 8,
-    sectionGap: 10,
-    headerStyle: {
-      gap: 10,
-      padding: { bottom: 6 },
-      width: "fill"
+    image: {
+      alpha: 1,
+      visible: true
     },
-    footerStyle: {
-      gap: 8,
-      padding: { top: 6 },
-      width: "fill"
+    graphics: {
+      alpha: 1,
+      visible: true
     },
-    sectionStyle: {
-      gap: 8,
-      padding: { top: 4, bottom: 8 },
-      width: "fill",
-      titleStyle: {
-        ...textStyles.medium,
-        color: colors.text.dark.toString(),
-        fontStyle: "bold"
+    tilesprite: {
+      alpha: 1,
+      visible: true
+    },
+    // Public API (uppercase)
+    View: {
+      alpha: 1,
+      visible: true
+    },
+    Text: {
+      text: "",
+      alpha: 1,
+      visible: true,
+      style: textStyles.DEFAULT
+    },
+    NineSlice: {
+      alpha: 1,
+      visible: true
+    },
+    Sprite: {
+      alpha: 1,
+      visible: true
+    },
+    Image: {
+      alpha: 1,
+      visible: true
+    },
+    Graphics: {
+      alpha: 1,
+      visible: true
+    },
+    TileSprite: {
+      alpha: 1,
+      visible: true
+    },
+    RadioButton: {
+      selectedColor: colors.primary.DEFAULT.toNumber(),
+      color: colors.border.medium.toNumber(),
+      gap: 10,
+      size: 16,
+      innerSize: 16,
+      labelStyle: {
+        color: colors.text.DEFAULT.toString(),
+        fontSize: "14px"
       }
     },
-    itemStyle: {
+    ScrollSlider: {
+      borderColor: colors.border.dark.toNumber(),
+      trackColor: colors.surface.dark.toNumber(),
+      thumbColor: colors.primary.dark.toNumber(),
+      borderWidth: 2,
+      minThumbSize: 30,
+      size: 24
+    },
+    Button: {
+      disabledColor: colors.background.DEFAULT.toNumber(),
+      iconSize: 24,
+      backgroundColor: colors.primary.DEFAULT.toNumber(),
+      backgroundAlpha: 1,
+      borderColor: colors.primary.dark.toNumber(),
+      borderWidth: 1,
+      cornerRadius: 6,
+      padding: 8,
       gap: 8,
-      padding: { top: 8, bottom: 8, left: 10, right: 10 },
-      width: "fill",
-      cornerRadius: 8,
-      backgroundColor: colors.surface.lightest.toNumber(),
-      textStyle: {
-        ...textStyles.medium,
-        color: colors.text.dark.toString()
+      justifyContent: "center",
+      alignItems: "center",
+      primary: {
+        backgroundColor: colors.primary.medium.toNumber(),
+        borderColor: colors.primary.dark.toNumber()
       },
-      active: {
-        backgroundColor: colors.primary.lightest.toNumber(),
-        borderColor: colors.primary.light.toNumber(),
-        borderWidth: 1,
-        backgroundAlpha: 0.9
+      secondary: {
+        backgroundColor: colors.secondary.DEFAULT.toNumber(),
+        borderColor: colors.secondary.dark.toNumber(),
+        effect: "press",
+        effectConfig: { intensity: 0.9, time: 200 }
       },
-      disabledAlpha: 0.5
-    },
-    badgeStyle: {
-      backgroundColor: colors.primary.light.toNumber(),
-      backgroundAlpha: 0.15,
-      cornerRadius: 6,
-      padding: { top: 4, bottom: 4, left: 8, right: 8 },
-      textStyle: {
-        ...textStyles.small,
-        color: colors.primary.dark.toString(),
-        fontStyle: "bold"
+      outline: {
+        backgroundColor: 0,
+        backgroundAlpha: 0,
+        borderColor: colors.accent.DEFAULT.toNumber(),
+        borderWidth: 2,
+        effect: "flash",
+        effectConfig: { intensity: 1.15, time: 200 }
+      },
+      small: {
+        padding: 6,
+        cornerRadius: 4
+      },
+      medium: {
+        padding: 8,
+        cornerRadius: 6
+      },
+      large: {
+        padding: { top: 12, bottom: 12, left: 8, right: 8 },
+        cornerRadius: 8
       }
     },
-    variants: {
-      solid: {
-        backgroundColor: colors.surface.light.toNumber(),
-        borderColor: colors.border.light.toNumber(),
-        borderWidth: 1
+    Sidebar: {
+      variant: "solid",
+      size: "md",
+      backgroundColor: colors.surface.light.toNumber(),
+      backgroundAlpha: 1,
+      padding: 16,
+      gap: 8,
+      dividerColor: colors.border.light.toNumber(),
+      itemGap: 8,
+      sectionGap: 10,
+      headerStyle: {
+        gap: 10,
+        padding: { bottom: 6 },
+        width: "fill"
       },
-      muted: {
-        backgroundColor: colors.surface.medium.toNumber(),
-        backgroundAlpha: 0.85,
-        borderColor: colors.border.light.toNumber(),
-        borderWidth: 1
+      footerStyle: {
+        gap: 8,
+        padding: { top: 6 },
+        width: "fill"
+      },
+      sectionStyle: {
+        gap: 8,
+        padding: { top: 4, bottom: 8 },
+        width: "fill",
+        titleStyle: {
+          ...textStyles.medium,
+          color: colors.text.dark.toString(),
+          fontStyle: "bold"
+        }
       },
-      ghost: {
-        backgroundColor: colors.background.lightest.toNumber(),
-        backgroundAlpha: 0.6,
-        borderWidth: 0
+      itemStyle: {
+        gap: 8,
+        padding: { top: 8, bottom: 8, left: 10, right: 10 },
+        width: "fill",
+        cornerRadius: 8,
+        backgroundColor: colors.surface.lightest.toNumber(),
+        textStyle: {
+          ...textStyles.medium,
+          color: colors.text.dark.toString()
+        },
+        active: {
+          backgroundColor: colors.primary.lightest.toNumber(),
+          borderColor: colors.primary.light.toNumber(),
+          borderWidth: 1,
+          backgroundAlpha: 0.9
+        },
+        disabledAlpha: 0.5
       },
-      inset: {
-        backgroundColor: colors.surface.dark.toNumber(),
-        backgroundAlpha: 1,
-        borderColor: colors.border.medium.toNumber(),
-        borderWidth: 1
+      badgeStyle: {
+        backgroundColor: colors.primary.light.toNumber(),
+        backgroundAlpha: 0.15,
+        cornerRadius: 6,
+        padding: { top: 4, bottom: 4, left: 8, right: 8 },
+        textStyle: {
+          ...textStyles.small,
+          color: colors.primary.dark.toString(),
+          fontStyle: "bold"
+        }
+      },
+      variants: {
+        solid: {
+          backgroundColor: colors.surface.light.toNumber(),
+          borderColor: colors.border.light.toNumber(),
+          borderWidth: 1
+        },
+        muted: {
+          backgroundColor: colors.surface.medium.toNumber(),
+          backgroundAlpha: 0.85,
+          borderColor: colors.border.light.toNumber(),
+          borderWidth: 1
+        },
+        ghost: {
+          backgroundColor: colors.background.lightest.toNumber(),
+          backgroundAlpha: 0.6,
+          borderWidth: 0
+        },
+        inset: {
+          backgroundColor: colors.surface.dark.toNumber(),
+          backgroundAlpha: 1,
+          borderColor: colors.border.medium.toNumber(),
+          borderWidth: 1
+        }
+      },
+      sizes: {
+        sm: {
+          padding: 10,
+          gap: 6
+        },
+        md: {
+          padding: 16,
+          gap: 8
+        },
+        lg: {
+          padding: { top: 20, bottom: 20, left: 16, right: 16 },
+          gap: 12
+        }
       }
     },
-    sizes: {
-      sm: {
+    Accordion: {
+      effect: "none",
+      effectConfig: { magnitude: 0.02, time: 150 },
+      headerStyle: {
+        backgroundColor: colors.surface.dark.toNumber(),
         padding: 10,
-        gap: 6
+        gap: 10,
+        cornerRadius: 5,
+        width: "fill"
       },
-      md: {
-        padding: 16,
-        gap: 8
+      contentStyle: {
+        backgroundColor: colors.surface.light.toNumber(),
+        padding: 10,
+        cornerRadius: 5,
+        width: "fill"
       },
-      lg: {
-        padding: { top: 20, bottom: 20, left: 16, right: 16 },
-        gap: 12
+      Icon: {
+        size: 24
+      },
+      textStyle: {
+        color: colors.text.DEFAULT.toString(),
+        fontSize: "18px"
       }
-    }
-  },
-  Accordion: {
-    effect: "none",
-    effectConfig: { magnitude: 0.02, time: 150 },
-    headerStyle: {
-      backgroundColor: colors.surface.dark.toNumber(),
-      padding: 10,
-      gap: 10,
-      cornerRadius: 5,
-      width: "fill"
     },
-    contentStyle: {
-      backgroundColor: colors.surface.light.toNumber(),
-      padding: 10,
-      cornerRadius: 5,
-      width: "fill"
-    },
-    Icon: {
-      size: 24
+    NineSliceButton: {},
+    CharText: {
+      charSpacing: 0,
+      cursorColor: colors.secondary.DEFAULT.toNumber(),
+      cursorWidth: 3,
+      cursorBlinkSpeed: 200,
+      selectionAlpha: 0.3,
+      lineHeight: 1.2,
+      wordWrap: true,
+      textStyle: textStyles.DEFAULT,
+      borderColor: colors.border.medium.toNumber(),
+      borderWidth: 2,
+      cornerRadius: 6,
+      padding: 10
     },
-    textStyle: {
-      color: colors.text.DEFAULT.toString(),
-      fontSize: "18px"
-    }
-  },
-  NineSliceButton: {},
-  CharText: {
-    charSpacing: 0,
-    cursorColor: colors.accent.DEFAULT.toNumber(),
-    cursorWidth: 3,
-    cursorBlinkSpeed: 200,
-    selectionAlpha: 0.3,
-    lineHeight: 1.2,
-    wordWrap: true,
-    textStyle: textStyles.DEFAULT,
-    borderColor: colors.border.medium.toNumber(),
-    borderWidth: 2,
-    cornerRadius: 6,
-    padding: 10
-  },
-  CharTextInput: {
-    charSpacing: 2,
-    cursorColor: colors.accent.DEFAULT.toNumber(),
-    cursorWidth: 3,
-    cursorBlinkSpeed: 200,
-    selectionColor: colors.accent.light.toNumber(),
-    selectionAlpha: 0.5,
-    lineHeight: 1.2,
-    wordWrap: false,
-    disabledColor: colors.border.dark.toNumber(),
-    focusedBorderColor: colors.accent.lightest.toNumber(),
-    backgroundColor: colors.surface.medium.toNumber(),
-    borderColor: colors.border.medium.toNumber(),
-    borderWidth: 1,
-    padding: 8,
-    textStyle: textStyles.DEFAULT
-  },
-  Dropdown: {
-    trigger: {
+    CharTextInput: {
+      charSpacing: 2,
+      cursorColor: colors.secondary.DEFAULT.toNumber(),
+      cursorWidth: 3,
+      cursorBlinkSpeed: 200,
+      selectionColor: colors.accent.light.toNumber(),
+      selectionAlpha: 0.5,
+      lineHeight: 1.2,
+      wordWrap: false,
+      disabledColor: colors.border.dark.toNumber(),
+      focusedBorderColor: colors.accent.lightest.toNumber(),
       backgroundColor: colors.surface.medium.toNumber(),
       borderColor: colors.border.medium.toNumber(),
       borderWidth: 1,
-      cornerRadius: 4,
-      padding: { left: 12, right: 12, top: 8, bottom: 8 },
-      width: "fill"
+      padding: 8,
+      textStyle: textStyles.DEFAULT
     },
-    triggerHover: {
-      borderColor: colors.primary.DEFAULT.toNumber()
+    Dropdown: {
+      trigger: {
+        backgroundColor: colors.surface.medium.toNumber(),
+        borderColor: colors.border.medium.toNumber(),
+        borderWidth: 1,
+        cornerRadius: 4,
+        padding: { left: 12, right: 12, top: 8, bottom: 8 },
+        width: "fill"
+      },
+      triggerHover: {
+        borderColor: colors.primary.DEFAULT.toNumber()
+      },
+      triggerOpen: {
+        borderColor: colors.primary.DEFAULT.toNumber(),
+        backgroundColor: colors.surface.dark.toNumber()
+      },
+      triggerDisabled: {
+        backgroundColor: colors.surface.light.toNumber(),
+        alpha: 0.5
+      },
+      arrow: {
+        color: colors.text.DEFAULT.toNumber(),
+        size: 12
+      },
+      overlay: {
+        backgroundColor: colors.surface.medium.toNumber(),
+        borderColor: colors.border.medium.toNumber(),
+        borderWidth: 1,
+        cornerRadius: 4,
+        maxHeight: 300,
+        padding: 4
+      },
+      option: {
+        padding: { left: 12, right: 12, top: 8, bottom: 8 }
+      },
+      optionSelected: {
+        backgroundColor: colors.primary.light.toNumber(),
+        Text: {
+          style: textStyles.DEFAULT
+        }
+      },
+      optionDisabled: {
+        alpha: 0.3
+      },
+      textStyle: textStyles.DEFAULT,
+      placeholderStyle: textStyles.DEFAULT,
+      filterInput: {
+        backgroundColor: colors.surface.lightest.toNumber(),
+        borderColor: colors.border.medium.toNumber()
+        //height: 32,
+      },
+      animationConfig: "stiff",
+      optionGap: 2
     },
-    triggerOpen: {
-      borderColor: colors.primary.DEFAULT.toNumber(),
-      backgroundColor: colors.surface.dark.toNumber()
+    Slider: {
+      // Track styling
+      trackColor: colors.surface.dark.toNumber(),
+      trackFilledColor: colors.primary.dark.toNumber(),
+      trackHeight: 6,
+      trackBorderRadius: 3,
+      trackLength: 200,
+      trackHoverColor: colors.surface.dark.toNumber(),
+      // Thumb styling
+      thumbColor: colors.primary.light.toNumber(),
+      thumbSize: 20,
+      thumbBorderColor: colors.border.light.toNumber(),
+      thumbBorderWidth: 2,
+      thumbHoverColor: colors.primary.light.toNumber(),
+      thumbActiveColor: colors.primary.dark.toNumber(),
+      thumbDragScale: 1.1,
+      // Marks/Ticks
+      markColor: colors.border.medium.toNumber(),
+      markHeight: 8,
+      markWidth: 2,
+      // Value label
+      labelStyle: textStyles.small,
+      labelOffset: 10,
+      valueLabel: {
+        backgroundColor: colors.background.dark.toNumber(),
+        textStyle: { ...textStyles.small, color: colors.text.light.toString() },
+        padding: { left: 6, right: 6, top: 4, bottom: 4 },
+        cornerRadius: 4,
+        offset: 8
+      },
+      // RangeSlider specific
+      minDistance: 0,
+      // States
+      disabledAlpha: 0.4,
+      // Animation & Effects
+      animationConfig: { tension: 300, friction: 30 }
     },
-    triggerDisabled: {
-      backgroundColor: colors.surface.light.toNumber(),
-      alpha: 0.5
+    Toggle: {
+      width: 50,
+      height: 28,
+      thumbSize: 24,
+      trackColorOff: colors.surface.dark.toNumber(),
+      trackColorOn: colors.success.DEFAULT.toNumber(),
+      thumbColor: colors.surface.lightest.toNumber(),
+      disabledColor: colors.border.medium.toNumber(),
+      padding: 2,
+      duration: 200,
+      gap: 8,
+      labelStyle: textStyles.DEFAULT,
+      labelPosition: "right"
     },
-    arrow: {
-      color: colors.text.DEFAULT.toNumber(),
-      size: 12
+    Modal: {
+      backdropColor: 0,
+      backdropOpacity: 0.5
     },
-    overlay: {
-      backgroundColor: colors.surface.medium.toNumber(),
-      borderColor: colors.border.medium.toNumber(),
+    Dialog: {
+      backgroundColor: colors.surface.DEFAULT.toNumber(),
+      borderColor: colors.border.light.toNumber(),
       borderWidth: 1,
-      cornerRadius: 4,
-      maxHeight: 300,
-      padding: 4
-    },
-    option: {
-      padding: { left: 12, right: 12, top: 8, bottom: 8 }
-    },
-    optionSelected: {
-      backgroundColor: colors.primary.light.toNumber(),
-      Text: {
-        style: textStyles.DEFAULT
+      cornerRadius: 8,
+      padding: 0,
+      maxWidth: 600,
+      showClose: true,
+      Header: {
+        padding: { left: 24, right: 24, top: 20, bottom: 16 },
+        gap: 12,
+        textStyle: textStyles.heading,
+        closeButton: {
+          size: 32,
+          cornerRadius: 4,
+          backgroundColor: colors.surface.dark.toNumber(),
+          borderColor: colors.border.light.toNumber(),
+          borderWidth: 1
+        }
+      },
+      Content: {
+        padding: { left: 24, right: 24, top: 16, bottom: 16 },
+        gap: 12
+      },
+      Actions: {
+        padding: { left: 24, right: 24, top: 16, bottom: 20 },
+        gap: 12,
+        justifyContent: "end"
       }
     },
-    optionDisabled: {
-      alpha: 0.3
+    AlertDialog: {
+      maxWidth: 500
     },
-    textStyle: textStyles.DEFAULT,
-    placeholderStyle: textStyles.DEFAULT,
-    filterInput: {
-      backgroundColor: colors.surface.lightest.toNumber(),
-      borderColor: colors.border.medium.toNumber()
-      //height: 32,
-    },
-    animationConfig: "stiff",
-    optionGap: 2
-  },
-  Slider: {
-    // Track styling
-    trackColor: colors.surface.dark.toNumber(),
-    trackFilledColor: colors.primary.DEFAULT.toNumber(),
-    trackHeight: 6,
-    trackBorderRadius: 3,
-    trackLength: 200,
-    trackHoverColor: colors.surface.medium.toNumber(),
-    // Thumb styling
-    thumbColor: colors.primary.DEFAULT.toNumber(),
-    thumbSize: 20,
-    thumbBorderColor: colors.border.light.toNumber(),
-    thumbBorderWidth: 2,
-    thumbHoverColor: colors.primary.light.toNumber(),
-    thumbActiveColor: colors.primary.dark.toNumber(),
-    thumbDragScale: 1.1,
-    // Marks/Ticks
-    markColor: colors.border.medium.toNumber(),
-    markHeight: 8,
-    markWidth: 2,
-    // Value label
-    labelStyle: textStyles.small,
-    labelOffset: 10,
-    valueLabel: {
-      backgroundColor: colors.surface.darkest.toNumber(),
-      textStyle: { ...textStyles.small, color: colors.text.light.toString() },
-      padding: { left: 6, right: 6, top: 4, bottom: 4 },
-      cornerRadius: 4,
-      offset: 8
+    WrapText: {
+      wrap: true,
+      paddingOffset: 0,
+      textStyle: textStyles.DEFAULT
     },
-    // RangeSlider specific
-    minDistance: 0,
-    // States
-    disabledAlpha: 0.4,
-    // Animation & Effects
-    animationConfig: { tension: 300, friction: 30 }
-  },
-  Toggle: {
-    width: 50,
-    height: 28,
-    thumbSize: 24,
-    trackColorOff: colors.surface.dark.toNumber(),
-    trackColorOn: colors.success.DEFAULT.toNumber(),
-    thumbColor: colors.surface.lightest.toNumber(),
-    disabledColor: colors.border.medium.toNumber(),
-    padding: 2,
-    duration: 200,
-    gap: 8,
-    labelStyle: textStyles.DEFAULT,
-    labelPosition: "right"
-  },
-  Modal: {
-    backdropColor: 0,
-    backdropOpacity: 0.5
-  },
-  Dialog: {
-    backgroundColor: colors.surface.DEFAULT.toNumber(),
-    borderColor: colors.border.light.toNumber(),
-    borderWidth: 1,
-    cornerRadius: 8,
-    padding: 0,
-    maxWidth: 600,
-    showClose: true,
-    Header: {
-      padding: { left: 24, right: 24, top: 20, bottom: 16 },
-      gap: 12,
-      textStyle: textStyles.heading,
-      closeButton: {
-        size: 32,
-        cornerRadius: 4,
-        backgroundColor: colors.surface.dark.toNumber(),
-        borderColor: colors.border.light.toNumber(),
-        borderWidth: 1
+    Tooltip: {
+      position: "top",
+      showDelay: 1e3,
+      hideDelay: 500,
+      offset: 8,
+      textStyle: {
+        fontSize: "12px",
+        fontFamily: "Arial",
+        color: colors.text.dark.toString(),
+        backgroundColor: colors.warning.medium.toString(),
+        padding: { x: 2, y: 2 }
+      },
+      cornerRadius: 8,
+      animation: {
+        fadeIn: 200,
+        fadeOut: 200,
+        move: { dx: 0, dy: -20 },
+        pulse: false
       }
-    },
-    Content: {
-      padding: { left: 24, right: 24, top: 16, bottom: 16 },
-      gap: 12
-    },
-    Actions: {
-      padding: { left: 24, right: 24, top: 16, bottom: 20 },
-      gap: 12,
-      justifyContent: "end"
-    }
-  },
-  AlertDialog: {
-    maxWidth: 500
-  },
-  WrapText: {
-    wrap: true,
-    paddingOffset: 0,
-    textStyle: textStyles.DEFAULT
-  },
-  Tooltip: {
-    position: "top",
-    showDelay: 1e3,
-    hideDelay: 500,
-    offset: 8,
-    textStyle: {
-      fontSize: "12px",
-      fontFamily: "Arial",
-      color: colors.text.dark.toString(),
-      backgroundColor: colors.warning.medium.toString(),
-      padding: { x: 2, y: 2 }
-    },
-    cornerRadius: 8,
-    animation: {
-      fadeIn: 200,
-      fadeOut: 200,
-      move: { dx: 0, dy: -20 },
-      pulse: false
     }
-  }
-};
+  };
+}
+const preset = getPresetWithMode("oceanBlue", "light");
+const defaultTheme = buildDefaultTheme(preset.colors);
+function createDefaultTheme(presetName = "oceanBlue", mode = "light") {
+  const presetForMode = getPresetWithMode(presetName, mode);
+  return buildDefaultTheme(presetForMode.colors);
+}
 class ThemeRegistry {
   globalTheme = { ...defaultTheme };
   customThemes = /* @__PURE__ */ new Map();
@@ -10302,8 +10320,8 @@ class ThemeRegistry {
    * Set color tokens for the global theme
    * @param colors - ColorTokens to use globally
    */
-  setColorTokens(colors2) {
-    this.colorTokens = colors2;
+  setColorTokens(colors) {
+    this.colorTokens = colors;
   }
   /**
    * Get current color tokens
@@ -10320,15 +10338,28 @@ class ThemeRegistry {
     return this.colorMode;
   }
   /**
-   * Set color mode and notify listeners
+   * 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 && this.colorTokens) ;
-      this.notifyListeners();
+      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);
     }
   }
   /**
@@ -10341,11 +10372,14 @@ class ThemeRegistry {
   /**
    * Set current preset name
    * @param name - Preset name
+   * @param skipNotify - If true, skip notifying listeners (used during remount)
    */
-  setCurrentPresetName(name) {
+  setCurrentPresetName(name, skipNotify = false) {
     if (this.currentPresetName !== name) {
       this.currentPresetName = name;
-      this.notifyListeners();
+      if (!skipNotify) {
+        this.notifyListeners();
+      }
     }
   }
   /**
@@ -11204,6 +11238,119 @@ class PortalRegistry {
   }
 }
 const portalRegistry = new PortalRegistry();
+class MountRegistry {
+  entries = /* @__PURE__ */ new Map();
+  nextId = 1;
+  /**
+   * Register a new mountJSX instance
+   * @param parent - Parent container or scene
+   * @param type - Component type or node type
+   * @param props - Mount props
+   * @param rootNode - Root game object
+   * @returns Registry ID for this mount
+   */
+  register(parent, type, props, rootNode) {
+    const id = this.nextId++;
+    this.entries.set(id, { id, parent, type, props, rootNode });
+    DebugLogger.log("vdom", `Registered mount ${id}`);
+    return id;
+  }
+  /**
+   * Unregister a mountJSX instance
+   * @param id - Registry ID
+   */
+  unregister(id) {
+    const entry = this.entries.get(id);
+    if (entry) {
+      DebugLogger.log("vdom", `Unregistered mount ${id}`);
+      this.entries.delete(id);
+    }
+  }
+  /**
+   * Get all active mount entries
+   * @returns Array of mount entries
+   */
+  getAllEntries() {
+    return Array.from(this.entries.values());
+  }
+  /**
+   * Clear all entries (for testing)
+   */
+  clear() {
+    this.entries.clear();
+    this.nextId = 1;
+  }
+}
+const mountRegistry = new MountRegistry();
+function remountAll() {
+  const entries = mountRegistry.getAllEntries();
+  if (entries.length === 0) {
+    DebugLogger.log("vdom", "No mounts to remount");
+    return;
+  }
+  console.log(`[REMOUNT] Starting remount of ${entries.length} root(s)`);
+  entries.forEach((entry) => {
+    try {
+      const scene = entry.parent instanceof Phaser$1.Scene ? 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$1.GameObjects.Container) {
+        const children = entry.rootNode.getAll();
+        children.forEach((child) => {
+          ;
+          entry.rootNode.remove(child, true);
+        });
+      }
+      if (currentVNode) {
+        const flatChildren = flattenChildren(currentVNode.children);
+        flatChildren.forEach(unmount);
+        if (currentVNode.__ctx) {
+          disposeCtx(currentVNode.__ctx);
+          delete currentVNode.__ctx;
+        }
+      }
+      const { width, height, disableAutoSize = false, ...componentProps } = entry.props;
+      const renderContext = getRenderContext(entry.parent);
+      renderContext.setViewport(width, height, scene);
+      portalRegistry.setViewportSize(scene, width, height);
+      let vnode;
+      if (disableAutoSize) {
+        vnode = { type: entry.type, props: { ...componentProps, width, height }, children: [] };
+      } else {
+        const componentVNode = {
+          type: entry.type,
+          props: componentProps,
+          children: []
+        };
+        vnode = {
+          type: SceneWrapper,
+          props: {
+            width,
+            height,
+            children: componentVNode
+          },
+          children: []
+        };
+      }
+      ;
+      scene.__rootVNode = vnode;
+      const rootNode = mount(entry.parent, vnode);
+      if (rootNode instanceof Phaser$1.GameObjects.Container) {
+        ;
+        rootNode.__mountRootId = generateMountRootId();
+      }
+      entry.rootNode = rootNode;
+      rootNode.__registryId = entry.id;
+      console.log("[REMOUNT] Successfully remounted entry", entry.id);
+    } catch (error) {
+      console.error("[REMOUNT] Failed to remount entry", entry.id, error);
+    }
+  });
+  console.log("[REMOUNT] Remount complete");
+}
 function flattenChildren(children) {
   if (!children) return [];
   return children.flat(Infinity);
@@ -11596,6 +11743,11 @@ function unmount(vnode) {
   attachRef(ref, null);
   const flatChildren = flattenChildren(vnode.children);
   flatChildren.forEach(unmount);
+  const node = vnode.__node;
+  if (node?.__registryId !== void 0) {
+    mountRegistry.unregister(node.__registryId);
+    delete node.__registryId;
+  }
   const parent = vnode.__parent;
   if (parent) host.remove(parent, vnode.__node);
 }
@@ -11871,8 +12023,19 @@ function mountJSX(parentOrScene, type, props = { width: 0, height: 0 }) {
   if (rootNode instanceof Phaser$1.GameObjects.Container) {
     rootNode.__mountRootId = generateMountRootId();
   }
+  const registryId = mountRegistry.register(parentOrScene, type, props, rootNode);
+  rootNode.__registryId = registryId;
   return rootNode;
 }
+const vdom = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  createElement,
+  mount,
+  mountJSX,
+  patchVNode,
+  remountAll,
+  unmount
+}, Symbol.toStringTag, { value: "Module" }));
 function getCurrent() {
   return _currentCtx;
 }
@@ -16202,23 +16365,34 @@ function Sidebar(props) {
   const primaryContent = sectionsContent ?? (!hasSections ? props.children : null) ?? null;
   const extraContent = hasSections ? props.children ?? null : null;
   const contentNodes = [...normalizeChildren(primaryContent), ...normalizeChildren(extraContent)];
-  return /* @__PURE__ */ jsxs(View, { ...combinedProps, theme: nestedTheme, children: [
-    props.header ? /* @__PURE__ */ jsx(View, { ...headerStyle, children: props.header }) : null,
-    scrollable ? /* @__PURE__ */ jsx(
-      ScrollView,
-      {
-        flex: 1,
-        width: "fill",
-        height: "fill",
-        showVerticalSlider: "auto",
-        showHorizontalSlider: false,
-        sliderSize: "tiny",
-        theme: nestedTheme,
-        children: /* @__PURE__ */ jsx(View, { direction: "column", gap: effectiveGap, width: "fill", children: contentNodes })
-      }
-    ) : contentNodes,
-    props.footer ? /* @__PURE__ */ jsx(View, { ...footerStyle, children: props.footer }) : null
-  ] });
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      ...combinedProps,
+      theme: nestedTheme,
+      backgroundColor: themed.backgroundColor,
+      backgroundAlpha: themed.backgroundAlpha,
+      padding: themed.padding,
+      gap: themed.gap,
+      children: [
+        props.header ? /* @__PURE__ */ jsx(View, { ...headerStyle, children: props.header }) : null,
+        scrollable ? /* @__PURE__ */ jsx(
+          ScrollView,
+          {
+            flex: 1,
+            width: "fill",
+            height: "fill",
+            showVerticalSlider: "auto",
+            showHorizontalSlider: false,
+            sliderSize: "tiny",
+            theme: nestedTheme,
+            children: /* @__PURE__ */ jsx(View, { direction: "column", gap: effectiveGap, width: "fill", children: contentNodes })
+          }
+        ) : contentNodes,
+        props.footer ? /* @__PURE__ */ jsx(View, { ...footerStyle, children: props.footer }) : null
+      ]
+    }
+  );
 }
 function DefaultThumb(props) {
   const { size, color, borderColor, borderWidth = 0, isDragging, dragScale = 1.1 } = props;
@@ -16917,7 +17091,7 @@ export {
   svgToTexture as Z,
   useGameObjectEffect as _,
   AlertDialog as a,
-  imageCreator as a$,
+  spriteCreator as a$,
   EFFECT_REGISTRY as a0,
   applyEffectByName as a1,
   resolveEffect as a2,
@@ -16934,27 +17108,27 @@ export {
   nodeRegistry as aD,
   register as aE,
   host as aF,
-  defaultTheme as aG,
-  mergeThemes as aH,
-  createTheme as aI,
-  getThemedProps as aJ,
-  createElement as aK,
-  mount as aL,
-  unmount as aM,
-  patchVNode as aN,
-  Sprite as aO,
-  Graphics as aP,
-  TileSprite as aQ,
-  Text as aR,
-  View as aS,
-  textCreator as aT,
-  textPatcher as aU,
-  viewCreator as aV,
-  viewPatcher as aW,
-  nineSliceCreator as aX,
-  nineSlicePatcher as aY,
-  spriteCreator as aZ,
-  spritePatcher as a_,
+  createDefaultTheme as aG,
+  defaultTheme as aH,
+  mergeThemes as aI,
+  createTheme as aJ,
+  getThemedProps as aK,
+  remountAll as aL,
+  createElement as aM,
+  mount as aN,
+  unmount as aO,
+  patchVNode as aP,
+  Sprite as aQ,
+  Graphics as aR,
+  TileSprite as aS,
+  Text as aT,
+  View as aU,
+  textCreator as aV,
+  textPatcher as aW,
+  viewCreator as aX,
+  viewPatcher as aY,
+  nineSliceCreator as aZ,
+  nineSlicePatcher as a_,
   createJelloEffect as aa,
   createNoneEffect as ab,
   createPressEffect as ac,
@@ -16982,42 +17156,45 @@ export {
   releaseSVGTexture as ay,
   releaseSVGTextures as az,
   CharTextInput as b,
-  imagePatcher as b0,
-  graphicsCreator as b1,
-  graphicsPatcher as b2,
-  tileSpriteCreator as b3,
-  tileSpritePatcher as b4,
-  portalRegistry as b5,
-  animatedSignal as b6,
-  isAnimatedSignal as b7,
-  unwrapSignal as b8,
-  DEFAULT_SPRING_CONFIG as b9,
-  SPRING_PRESETS as ba,
-  SpringPhysics as bb,
-  useSpring as bc,
-  useSprings as bd,
-  HexColor as be,
-  hexToNumber as bf,
-  numberToHex as bg,
-  numberToRgb as bh,
-  rgbToNumber as bi,
-  darken as bj,
-  darkenHex as bk,
-  hex as bl,
-  lighten as bm,
-  lightenHex as bn,
-  createTextStyle as bo,
-  ensureContrast as bp,
-  getContrastRatio as bq,
-  applyDarkMode as br,
-  applyLightMode as bs,
-  forestGreenPreset as bt,
-  generateColorScale as bu,
-  getPreset as bv,
-  midnightPreset as bw,
-  oceanBluePreset as bx,
-  presets as by,
-  defaultTextStyleTokens as bz,
+  spritePatcher as b0,
+  imageCreator as b1,
+  imagePatcher as b2,
+  graphicsCreator as b3,
+  graphicsPatcher as b4,
+  tileSpriteCreator as b5,
+  tileSpritePatcher as b6,
+  portalRegistry as b7,
+  animatedSignal as b8,
+  isAnimatedSignal as b9,
+  presets as bA,
+  defaultTextStyleTokens as bB,
+  vdom as bC,
+  unwrapSignal as ba,
+  DEFAULT_SPRING_CONFIG as bb,
+  SPRING_PRESETS as bc,
+  SpringPhysics as bd,
+  useSpring as be,
+  useSprings as bf,
+  HexColor as bg,
+  hexToNumber as bh,
+  numberToHex as bi,
+  numberToRgb as bj,
+  rgbToNumber as bk,
+  darken as bl,
+  darkenHex as bm,
+  hex as bn,
+  lighten as bo,
+  lightenHex as bp,
+  createTextStyle as bq,
+  ensureContrast as br,
+  getContrastRatio as bs,
+  applyDarkMode as bt,
+  applyLightMode as bu,
+  forestGreenPreset as bv,
+  generateColorScale as bw,
+  getPreset as bx,
+  midnightPreset as by,
+  oceanBluePreset as bz,
   Divider as c,
   Dropdown as d,
   createIconComponent as e,
@@ -17043,4 +17220,4 @@ export {
   defaultSizeTokens as y,
   defaultSpacingTokens as z
 };
-//# sourceMappingURL=TransformOriginView-CO-tJCmV.js.map
+//# sourceMappingURL=TransformOriginView-CiFiQcku.js.map