@number10/phaserjsx 0.1.0 → 0.3.1

package/dist/{TransformOriginView-CO-tJCmV.js → TransformOriginView-CzVjS16F.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) {
@@ -6643,10 +6643,6 @@ function resolveCalcOperand(operand, parentSize, viewportSize) {
     }
     if (operand.type === "percent") {
       if (parentSize === void 0) {
-        DebugLogger.warn(
-          "Size",
-          "Cannot resolve percentage in calc() without parent size. Using 0."
-        );
         return 0;
       }
       return parentSize * operand.value / 100;
@@ -7054,6 +7050,9 @@ class GestureManager {
       this.activePointerDown = null;
     }
     this.hoveredContainers.delete(container);
+    for (const hitContainers of this.activeContainersForMove.values()) {
+      hitContainers.delete(container);
+    }
   }
   /**
    * Check if a container is registered
@@ -9695,6 +9694,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 +9779,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"
       },
-      ghost: {
-        backgroundColor: colors.background.lightest.toNumber(),
-        backgroundAlpha: 0.6,
-        borderWidth: 0
+      sectionStyle: {
+        gap: 8,
+        padding: { top: 4, bottom: 8 },
+        width: "fill",
+        titleStyle: {
+          ...textStyles.medium,
+          color: colors.text.dark.toString(),
+          fontStyle: "bold"
+        }
       },
-      inset: {
-        backgroundColor: colors.surface.dark.toNumber(),
-        backgroundAlpha: 1,
-        borderColor: colors.border.medium.toNumber(),
-        borderWidth: 1
+      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
+      },
+      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: 10,
+        cornerRadius: 5,
+        width: "fill"
+      },
+      contentStyle: {
+        backgroundColor: colors.surface.light.toNumber(),
         padding: 10,
-        gap: 6
+        cornerRadius: 5,
+        width: "fill"
       },
-      md: {
-        padding: 16,
-        gap: 8
+      Icon: {
+        size: 24
       },
-      lg: {
-        padding: { top: 20, bottom: 20, left: 16, right: 16 },
-        gap: 12
+      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,
+    WrapText: {
+      wrap: true,
+      paddingOffset: 0,
+      textStyle: textStyles.DEFAULT
     },
-    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
-    },
-    // 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 +10319,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 +10337,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 +10371,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 +11237,129 @@ 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, vnode) {
+    const id = this.nextId++;
+    this.entries.set(id, { id, parent, type, props, rootNode, vnode });
+    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 a specific mount entry by registry ID
+   * @param id - Registry ID
+   * @returns Mount entry or undefined if not found
+   */
+  getEntry(id) {
+    return this.entries.get(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;
+      entry.vnode = vnode;
+      rootNode.__registryId = entry.id;
+      rootNode.__rootVNode = vnode;
+      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 +11752,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 +12032,47 @@ function mountJSX(parentOrScene, type, props = { width: 0, height: 0 }) {
   if (rootNode instanceof Phaser$1.GameObjects.Container) {
     rootNode.__mountRootId = generateMountRootId();
   }
-  return rootNode;
+  rootNode.__rootVNode = vnode;
+  const registryId = mountRegistry.register(parentOrScene, type, props, rootNode, vnode);
+  rootNode.__registryId = registryId;
+  const handle = rootNode;
+  handle.unmount = () => unmountJSX(handle);
+  return handle;
 }
+function unmountJSX(target) {
+  const scene = target instanceof Phaser$1.Scene ? target : target.scene;
+  const targetWithVNode = target;
+  const sceneWithVNode = scene;
+  const rootVNode = targetWithVNode.__rootVNode ?? sceneWithVNode?.__rootVNode;
+  if (rootVNode) {
+    unmount(rootVNode);
+    if (targetWithVNode.__rootVNode === rootVNode) {
+      delete targetWithVNode.__rootVNode;
+    }
+    if (sceneWithVNode?.__rootVNode === rootVNode) {
+      delete sceneWithVNode.__rootVNode;
+    }
+    return;
+  }
+  if (targetWithVNode.__registryId !== void 0) {
+    const entry = mountRegistry.getEntry(targetWithVNode.__registryId);
+    if (entry?.vnode) {
+      unmount(entry.vnode);
+      return;
+    }
+  }
+  DebugLogger.log("vdom", "unmountJSX called but no root VNode found on target");
+}
+const vdom = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  createElement,
+  mount,
+  mountJSX,
+  patchVNode,
+  remountAll,
+  unmount,
+  unmountJSX
+}, Symbol.toStringTag, { value: "Module" }));
 function getCurrent() {
   return _currentCtx;
 }
@@ -13834,6 +14034,8 @@ function Portal(props) {
   const depth = props.depth ?? 1e3;
   const scene = useScene();
   const blockEvents = props.blockEvents ?? true;
+  const mountedNodesRef = useRef([]);
+  const previousChildrenRef = useRef([]);
   useEffect(() => {
     const portalContainer = portalRegistry.register(
       portalId,
@@ -13849,14 +14051,18 @@ function Portal(props) {
       blockerContainer.setDepth(-1);
     }
     const children = Array.isArray(props.children) ? props.children : [props.children];
+    const mountedNodes = [];
     for (const child of children) {
       if (child) {
         const mountedNode = mount(portalContainer, child);
         if (mountedNode) {
           portalContainer.add(mountedNode);
+          mountedNodes.push(mountedNode);
         }
       }
     }
+    mountedNodesRef.current = mountedNodes;
+    previousChildrenRef.current = children;
     const gestureManager = getGestureManager(scene);
     if (blockEvents && blockerContainer) {
       const blocker = blockerContainer;
@@ -13903,7 +14109,31 @@ function Portal(props) {
       }
       portalRegistry.unregister(portalId);
     };
-  }, [portalId, depth, scene, props.children, blockEvents]);
+  }, [portalId, depth, scene, blockEvents]);
+  useEffect(() => {
+    const portal = portalRegistry.get(portalId);
+    if (!portal) return;
+    const portalContainer = portal.container;
+    const newChildren = Array.isArray(props.children) ? props.children : [props.children];
+    const oldChildren = previousChildrenRef.current;
+    const maxLen = Math.max(oldChildren.length, newChildren.length);
+    for (let i = 0; i < maxLen; i++) {
+      const oldChild = oldChildren[i];
+      const newChild = newChildren[i];
+      if (oldChild && newChild) {
+        patchVNode(portalContainer, oldChild, newChild);
+      } else if (!oldChild && newChild) {
+        const mountedNode = mount(portalContainer, newChild);
+        if (mountedNode) {
+          portalContainer.add(mountedNode);
+          mountedNodesRef.current.push(mountedNode);
+        }
+      } else if (oldChild && !newChild) {
+        unmount(oldChild);
+      }
+    }
+    previousChildrenRef.current = newChildren;
+  }, [props.children, portalId]);
   return null;
 }
 function Modal(props) {
@@ -13990,19 +14220,7 @@ function Modal(props) {
       view.setVisible(false);
       backdrop.setVisible(false);
     }
-  }, [
-    backdropAnimation,
-    closeDurationMs,
-    isVisible,
-    openDurationMs,
-    props.onClosed,
-    props.onOpen,
-    props.onRequestClose,
-    props.show,
-    stopBackdropEffects,
-    stopViewEffects,
-    viewAnimation
-  ]);
+  }, [props.show]);
   useEffect(() => {
     if (!closeOnEscape || !props.show) return;
     const handleKeyDown = (e) => {
@@ -15308,11 +15526,22 @@ function calculateSliderSize(size) {
   return { border, outer, dimension };
 }
 function ScrollSlider(props) {
-  const { direction, scrollPosition, viewportSize, contentSize, onScroll } = props;
+  const {
+    direction,
+    scrollPosition,
+    viewportSize,
+    contentSize,
+    onScroll,
+    momentum = true,
+    onMomentumEnd
+  } = props;
   const { props: themed } = getThemedProps("ScrollSlider", void 0, {});
   const sliderRef = useRef(null);
   const isDraggingRef = useRef(false);
   const trackContainerRef = useRef(null);
+  const velocityRef = useRef(0);
+  const lastTimeRef = useRef(0);
+  const tweenRef = useRef(null);
   const isVertical = direction === "vertical";
   const { border, outer, dimension } = calculateSliderSize(props.size);
   const containerWithLayout = trackContainerRef.current;
@@ -15328,18 +15557,60 @@ function ScrollSlider(props) {
     data.stopPropagation();
     if (data.state === "start") {
       isDraggingRef.current = true;
+      velocityRef.current = 0;
+      lastTimeRef.current = Date.now();
+      if (tweenRef.current) {
+        tweenRef.current.stop();
+        tweenRef.current = null;
+      }
       return;
     }
     if (data.state === "end") {
       isDraggingRef.current = false;
+      if (momentum && Math.abs(velocityRef.current) > 0.1) {
+        startMomentum(scrollPosition);
+      } else if (onMomentumEnd) {
+        onMomentumEnd();
+      }
       return;
     }
     if (!isDraggingRef.current) return;
     const delta = isVertical ? data.dy ?? 0 : data.dx ?? 0;
+    const now = Date.now();
+    const deltaTime = now - lastTimeRef.current;
+    if (deltaTime > 0) {
+      velocityRef.current = delta / deltaTime * 1e3;
+      lastTimeRef.current = now;
+    }
     const newThumbPos = Math.max(0, Math.min(thumbRange, thumbPosition + delta));
     const newScrollPos = thumbRange > 0 ? newThumbPos / thumbRange * maxScroll : 0;
     onScroll(newScrollPos);
   };
+  const startMomentum = (startPos) => {
+    if (!sliderRef.current?.scene) return;
+    const scene = sliderRef.current.scene;
+    const duration = Math.min(1e3, Math.max(200, Math.abs(velocityRef.current)));
+    const targetScrollPos = Math.max(
+      0,
+      Math.min(maxScroll, startPos + velocityRef.current * (duration / 1e3))
+    );
+    tweenRef.current = scene.tweens.add({
+      targets: { pos: startPos },
+      pos: targetScrollPos,
+      duration,
+      ease: "Quad.easeOut",
+      onUpdate: (tween) => {
+        const target = tween.targets[0];
+        onScroll(target.pos);
+      },
+      onComplete: () => {
+        tweenRef.current = null;
+        if (onMomentumEnd) {
+          onMomentumEnd();
+        }
+      }
+    });
+  };
   const handleBackgroundTouch = (data) => {
     data.stopPropagation();
     const localPos = isVertical ? data.localY ?? 0 : data.localX ?? 0;
@@ -15405,13 +15676,23 @@ function ScrollView(props) {
     showVerticalSlider = "auto",
     showHorizontalSlider = "auto",
     scroll: initialScroll,
-    onScrollInfoChange
+    onScrollInfoChange,
+    snap = false,
+    snapAlignment = "start",
+    snapThreshold = 20,
+    momentum = true
   } = props;
   const [scroll, setScroll] = useState(initialScroll ?? { dx: 0, dy: 0 });
+  const scrollRef = useRef(scroll);
   const contentRef = useRef(null);
   const viewportRef = useRef(null);
   const [contentHeight, setContentHeight] = useState(0);
   const [contentWidth, setContentWidth] = useState(0);
+  const [velocity, setVelocity] = useState({ vx: 0, vy: 0 });
+  const [lastTime, setLastTime] = useState(0);
+  const tweenRef = useRef(null);
+  const wheelSnapTimeoutRef = useRef(null);
+  const WHEEL_SNAP_DELAY = 200;
   const { outer: sliderSize } = calculateSliderSize(props.sliderSize);
   const viewportHeight = viewportRef.current?.height ?? 0;
   const viewportWidth = viewportRef.current?.width ?? 0;
@@ -15424,9 +15705,24 @@ function ScrollView(props) {
   const showHorizontalSliderActual = showHorizontalSlider === true || needsHorizontalScroll && showHorizontalSlider === "auto";
   const maxScrollY = Math.max(0, effectiveContentHeight - viewportHeight);
   const maxScrollX = Math.max(0, effectiveContentWidth - viewportWidth);
+  const updateScroll = (value) => {
+    setScroll((prev) => {
+      const next = typeof value === "function" ? value(prev) : value;
+      scrollRef.current = next;
+      return next;
+    });
+  };
+  const stopActiveTween = () => {
+    if (tweenRef.current) {
+      tweenRef.current.stop();
+      tweenRef.current = null;
+    }
+  };
+  const resolvedSnapThreshold = typeof snap === "object" && "positions" in snap ? snap.threshold ?? snapThreshold : snapThreshold;
+  const effectiveSnapThreshold = resolvedSnapThreshold === void 0 || resolvedSnapThreshold < 0 ? Infinity : resolvedSnapThreshold;
   useEffect(() => {
     if (initialScroll) {
-      setScroll(initialScroll);
+      updateScroll(initialScroll);
     }
   }, [initialScroll]);
   useEffect(() => {
@@ -15481,27 +15777,168 @@ function ScrollView(props) {
     const maxScrollX2 = Math.max(0, contentWidth2 - viewportWidth2);
     const newScrollY = Math.max(0, Math.min(maxScrollY2, scroll.dy - deltaY));
     const newScrollX = Math.max(0, Math.min(maxScrollX2, scroll.dx - deltaX));
-    setScroll({ dx: newScrollX, dy: newScrollY });
+    updateScroll({ dx: newScrollX, dy: newScrollY });
+  };
+  const startMomentum = () => {
+    if (!contentRef.current?.scene) return;
+    const scene = contentRef.current.scene;
+    const duration = Math.min(1e3, Math.max(200, Math.abs(velocity.vx) + Math.abs(velocity.vy)));
+    const currentScroll = scrollRef.current;
+    const baseTargetDx = Math.max(
+      0,
+      Math.min(maxScrollX, currentScroll.dx - velocity.vx * (duration / 1e3))
+    );
+    const baseTargetDy = Math.max(
+      0,
+      Math.min(maxScrollY, currentScroll.dy - velocity.vy * (duration / 1e3))
+    );
+    const snappedTarget = snap ? calculateSnapDestination(baseTargetDx, baseTargetDy) : null;
+    stopActiveTween();
+    tweenRef.current = scene.tweens.add({
+      targets: { dx: currentScroll.dx, dy: currentScroll.dy },
+      dx: snappedTarget?.dx ?? baseTargetDx,
+      dy: snappedTarget?.dy ?? baseTargetDy,
+      duration,
+      ease: "Quad.easeOut",
+      onUpdate: (tween) => {
+        const target = tween.targets[0];
+        updateScroll({ dx: target.dx, dy: target.dy });
+      },
+      onComplete: () => {
+        tweenRef.current = null;
+      }
+    });
+  };
+  const getSnapTargets = () => {
+    const viewportHeightCurrent = viewportRef.current?.height ?? viewportHeight;
+    const viewportWidthCurrent = viewportRef.current?.width ?? viewportWidth;
+    if (typeof snap === "object" && "positions" in snap) {
+      const sorted = [...snap.positions].sort((a, b) => a - b);
+      const inferredSizeY = sorted.length > 1 ? Math.max(0, (sorted[1] ?? 0) - (sorted[0] ?? 0)) : viewportHeightCurrent || 0;
+      const inferredSizeX = sorted.length > 1 ? Math.max(0, (sorted[1] ?? 0) - (sorted[0] ?? 0)) : viewportWidthCurrent || 0;
+      const targetsX = sorted.map((position, index) => {
+        const next = sorted[index + 1];
+        const size = next !== void 0 ? Math.max(0, next - position) : inferredSizeX > 0 ? inferredSizeX : viewportWidthCurrent || 0;
+        return { position, size };
+      });
+      const targetsY = sorted.map((position, index) => {
+        const next = sorted[index + 1];
+        const size = next !== void 0 ? Math.max(0, next - position) : inferredSizeY > 0 ? inferredSizeY : viewportHeightCurrent || 0;
+        return { position, size };
+      });
+      return { x: targetsX, y: targetsY };
+    }
+    return { x: [], y: [] };
+  };
+  const findNearestSnap = (current, targets, viewportSize, maxScroll) => {
+    if (targets.length === 0) return current;
+    let nearest = current;
+    let minDistance = Infinity;
+    for (const { position, size } of targets) {
+      let adjustedPos = position;
+      if (snapAlignment === "center") {
+        adjustedPos = position + size / 2 - viewportSize / 2;
+      } else if (snapAlignment === "end") {
+        adjustedPos = position + size - viewportSize;
+      }
+      adjustedPos = Math.max(0, Math.min(maxScroll, adjustedPos));
+      const distance = Math.abs(current - adjustedPos);
+      if (distance < minDistance && distance <= effectiveSnapThreshold) {
+        minDistance = distance;
+        nearest = adjustedPos;
+      } else if (distance < minDistance && effectiveSnapThreshold === Infinity) {
+        minDistance = distance;
+        nearest = adjustedPos;
+      }
+    }
+    return nearest;
+  };
+  const calculateSnapDestination = (baseDx, baseDy) => {
+    const { x: xTargets, y: yTargets } = getSnapTargets();
+    const viewportHeightLocal = viewportRef.current?.height ?? 0;
+    const viewportWidthLocal = viewportRef.current?.width ?? 0;
+    const targetDx = findNearestSnap(baseDx, xTargets, viewportWidthLocal, maxScrollX);
+    const targetDy = findNearestSnap(baseDy, yTargets, viewportHeightLocal, maxScrollY);
+    return { dx: targetDx, dy: targetDy };
+  };
+  const applySnap = () => {
+    if (!contentRef.current?.scene || !snap) return;
+    const currentScroll = scrollRef.current;
+    const { dx: targetDx, dy: targetDy } = calculateSnapDestination(
+      currentScroll.dx,
+      currentScroll.dy
+    );
+    if (targetDx === currentScroll.dx && targetDy === currentScroll.dy) return;
+    const scene = contentRef.current.scene;
+    stopActiveTween();
+    tweenRef.current = scene.tweens.add({
+      targets: { dx: currentScroll.dx, dy: currentScroll.dy },
+      dx: targetDx,
+      dy: targetDy,
+      duration: 250,
+      ease: "Quad.easeOut",
+      onUpdate: (tween) => {
+        const target = tween.targets[0];
+        updateScroll({ dx: target.dx, dy: target.dy });
+      },
+      onComplete: () => {
+        tweenRef.current = null;
+      }
+    });
   };
   const handleVerticalScroll = (scrollPos) => {
     const clampedScrollPos = Math.max(0, Math.min(maxScrollY, scrollPos));
-    setScroll((prev) => ({ ...prev, dy: clampedScrollPos }));
+    updateScroll((prev) => ({ ...prev, dy: clampedScrollPos }));
   };
   const handleHorizontalScroll = (scrollPos) => {
     const clampedScrollPos = Math.max(0, Math.min(maxScrollX, scrollPos));
-    setScroll((prev) => ({ ...prev, dx: clampedScrollPos }));
+    updateScroll((prev) => ({ ...prev, dx: clampedScrollPos }));
+  };
+  const handleSliderMomentumEnd = () => {
+    if (snap) {
+      applySnap();
+    }
   };
   const handleTouchMove = (data) => {
-    if (data.state === "end") return;
+    if (data.state === "end") {
+      if (momentum && (Math.abs(velocity.vx) > 0.1 || Math.abs(velocity.vy) > 0.1)) {
+        startMomentum();
+      } else if (snap) {
+        applySnap();
+      }
+      return;
+    }
+    if (data.state === "start") {
+      stopActiveTween();
+      setVelocity({ vx: 0, vy: 0 });
+      setLastTime(Date.now());
+      data.stopPropagation();
+      return;
+    }
     data.stopPropagation();
     const deltaX = data.dx ?? 0;
     const deltaY = data.dy ?? 0;
+    const now = Date.now();
+    const deltaTime = now - lastTime;
+    if (deltaTime > 0) {
+      const newVx = deltaX / deltaTime * 1e3;
+      const newVy = deltaY / deltaTime * 1e3;
+      setVelocity({ vx: newVx, vy: newVy });
+      setLastTime(now);
+    }
     calc(deltaX, deltaY);
   };
   const handleWheel = (data) => {
     data.stopPropagation();
     data.preventDefault();
+    stopActiveTween();
     calc(-data.deltaX, -data.deltaY);
+    if (snap) {
+      if (wheelSnapTimeoutRef.current) {
+        clearTimeout(wheelSnapTimeoutRef.current);
+      }
+      wheelSnapTimeoutRef.current = setTimeout(() => applySnap(), WHEEL_SNAP_DELAY);
+    }
   };
   const redraw = useRedraw();
   const [visible, setVisible] = useState(false);
@@ -15511,6 +15948,10 @@ function ScrollView(props) {
     return () => {
       clearTimeout(timer1);
       clearTimeout(timer2);
+      if (wheelSnapTimeoutRef.current) {
+        clearTimeout(wheelSnapTimeoutRef.current);
+      }
+      stopActiveTween();
     };
   }, [showVerticalSliderActual, showHorizontalSliderActual]);
   return /* @__PURE__ */ jsx(View, { visible, children: /* @__PURE__ */ jsxs(View, { direction: "row", width: "100%", height: "100%", gap: 0, padding: 0, children: [
@@ -15567,7 +16008,9 @@ function ScrollView(props) {
           scrollPosition: scroll.dx,
           viewportSize: viewportWidth,
           contentSize: contentWidth,
-          onScroll: handleHorizontalScroll
+          onScroll: handleHorizontalScroll,
+          momentum,
+          onMomentumEnd: handleSliderMomentumEnd
         }
       ) })
     ] }),
@@ -15580,7 +16023,9 @@ function ScrollView(props) {
           scrollPosition: scroll.dy,
           viewportSize: viewportHeight,
           contentSize: effectiveContentHeight,
-          onScroll: handleVerticalScroll
+          onScroll: handleVerticalScroll,
+          momentum,
+          onMomentumEnd: handleSliderMomentumEnd
         }
       ) }),
       showHorizontalSliderActual && // Placeholder corner for potential icon - matches slider dimensions
@@ -16202,23 +16647,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 +17373,7 @@ export {
   svgToTexture as Z,
   useGameObjectEffect as _,
   AlertDialog as a,
-  imageCreator as a$,
+  nineSlicePatcher as a$,
   EFFECT_REGISTRY as a0,
   applyEffectByName as a1,
   resolveEffect as a2,
@@ -16934,27 +17390,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,
+  unmountJSX as aQ,
+  Sprite as aR,
+  Graphics as aS,
+  TileSprite as aT,
+  Text as aU,
+  View as aV,
+  textCreator as aW,
+  textPatcher as aX,
+  viewCreator as aY,
+  viewPatcher as aZ,
+  nineSliceCreator as a_,
   createJelloEffect as aa,
   createNoneEffect as ab,
   createPressEffect as ac,
@@ -16982,42 +17438,46 @@ 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,
+  spriteCreator as b0,
+  spritePatcher as b1,
+  imageCreator as b2,
+  imagePatcher as b3,
+  graphicsCreator as b4,
+  graphicsPatcher as b5,
+  tileSpriteCreator as b6,
+  tileSpritePatcher as b7,
+  portalRegistry as b8,
+  animatedSignal as b9,
+  oceanBluePreset as bA,
+  presets as bB,
+  defaultTextStyleTokens as bC,
+  vdom as bD,
+  isAnimatedSignal as ba,
+  unwrapSignal as bb,
+  DEFAULT_SPRING_CONFIG as bc,
+  SPRING_PRESETS as bd,
+  SpringPhysics as be,
+  useSpring as bf,
+  useSprings as bg,
+  HexColor as bh,
+  hexToNumber as bi,
+  numberToHex as bj,
+  numberToRgb as bk,
+  rgbToNumber as bl,
+  darken as bm,
+  darkenHex as bn,
+  hex as bo,
+  lighten as bp,
+  lightenHex as bq,
+  createTextStyle as br,
+  ensureContrast as bs,
+  getContrastRatio as bt,
+  applyDarkMode as bu,
+  applyLightMode as bv,
+  forestGreenPreset as bw,
+  generateColorScale as bx,
+  getPreset as by,
+  midnightPreset as bz,
   Divider as c,
   Dropdown as d,
   createIconComponent as e,
@@ -17043,4 +17503,4 @@ export {
   defaultSizeTokens as y,
   defaultSpacingTokens as z
 };
-//# sourceMappingURL=TransformOriginView-CO-tJCmV.js.map
+//# sourceMappingURL=TransformOriginView-CzVjS16F.js.map