@number10/phaserjsx 0.6.1 → 4.1.0

package/README.md

@@ -1,12 +1,22 @@
 # @number10/phaserjsx
 
-> Declarative Phaser3 UI framework with React-like components and TypeScript
+> Declarative Phaser 4 UI framework with React-like components and TypeScript
 
-A modern, type-safe framework for building game UIs in Phaser3 using JSX components, hooks, and a powerful theme system.
+A modern, type-safe framework for building game UIs in Phaser 4 using JSX components, hooks, and a powerful theme system.
 
 [![npm version](https://img.shields.io/npm/v/@number10/phaserjsx.svg)](https://www.npmjs.com/package/@number10/phaserjsx)
 [![License: GPL v3](https://img.shields.io/badge/License-GPLv3-blue.svg)](../../LICENSE)
 
+## Compatibility
+
+`@number10/phaserjsx` 4.x is built for Phaser 4 and has a `phaser@^4.1.0` peer dependency. Phaser 3 projects should stay on the previous UI line:
+
+```bash
+npm install @number10/phaserjsx@0.6.1 phaser@^3
+```
+
+The 4.x line uses Phaser 4 render steps, filters, and WebGL behavior and is not intended to be a drop-in upgrade for Phaser 3 projects.
+
 ## ✨ Features
 
 - 🎨 **React-like API** - Familiar JSX syntax with hooks (useState, useEffect, useMemo, etc.)
@@ -16,7 +26,8 @@ A modern, type-safe framework for building game UIs in Phaser3 using JSX compone
 - 🎭 **Built-in Effects** - 23+ animation effects (pulse, shake, fade, bounce, etc.)
 - 📱 **Responsive Design** - Flexible layout with multiple size value formats (px, %, vw/vh, fill, auto, calc)
 - 🔧 **Custom Components** - Easy to create and integrate custom components
-- 🎮 **Phaser Integration** - Seamless integration with Phaser3 game objects and scenes
+- 🎮 **Phaser Integration** - Seamless integration with Phaser 4 game objects and scenes
+- ✂️ **Stencil Clipping** - Native Phaser Container stencil clips with fast rounded rectangles and bitmap masks
 - 📊 **SVG Support** - Convert SVG to Phaser textures with caching
 - 🚀 **Performance** - Optimized VDOM reconciliation with smart dirty checking
 
@@ -87,6 +98,35 @@ const config: Phaser.Types.Core.GameConfig = {
 new Phaser.Game(config)
 ```
 
+## ✂️ Standalone Stencil Clip
+
+The stencil clip extension can be used directly with native Phaser Containers, with or without PhaserJSX components:
+
+```ts
+import '@number10/phaserjsx/clip'
+
+const panel = this.add.container(40, 40)
+
+panel.setStencilClip({
+  kind: 'roundRect',
+  width: 220,
+  height: 120,
+  cornerRadius: 16,
+})
+```
+
+Bitmap masks are also supported. They are evaluated as hard stencil masks using an alpha threshold:
+
+```ts
+panel.setStencilClip({
+  kind: 'bitmap',
+  texture: 'panel-mask',
+  width: 220,
+  height: 120,
+  alphaThreshold: 0.5,
+})
+```
+
 ## 📖 Documentation
 
 [📖 Full Documentation](https://michael--.github.io/phaserjsx/)

package/dist/chunk-C2EiDwsr.cjs

@@ -0,0 +1,35 @@
+//#region \0rolldown/runtime.js
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __commonJSMin = (cb, mod) => () => (mod || (cb((mod = { exports: {} }).exports, mod), cb = null), mod.exports);
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+		key = keys[i];
+		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: ((k) => from[k]).bind(null, key),
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+//#endregion
+Object.defineProperty(exports, "__commonJSMin", {
+	enumerable: true,
+	get: function() {
+		return __commonJSMin;
+	}
+});
+Object.defineProperty(exports, "__toESM", {
+	enumerable: true,
+	get: function() {
+		return __toESM;
+	}
+});