@simpludify/web 0.1.0 → 0.1.2

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2026 oz-coden
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2026 oz-coden
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,22 +1,22 @@
-# @simpludify/web
-
-Experimental v0.1.0 browser SDK for Simpludify, a code-first TypeScript 2D engine. APIs may change between 0.x releases. Includes Game, PixiJS rendering, browser input and Canvas/DOM UI adapters; re-exports the host-independent Core API. Core and PixiJS are installed as runtime dependencies, not bundled into this package.
-
-The v0.1.0 distribution is being prepared; registry availability is not yet confirmed. Once published:
-
-```sh
-npm install @simpludify/web@0.1.0
-npm install --save-dev vite typescript
-```
-
-```ts
-import { Game, Character } from "@simpludify/web";
-const game = new Game();
-game.add(Character());
-await game.run();
-// Call game.dispose() when removing the game.
-```
-
-Use a browser bundler such as Vite, with an HTML module entry and a parent with an explicit height. The entry automatically imports scoped CSS. It can also be imported explicitly with `import "@simpludify/web/style.css"`. Do not configure CSS as side-effect-free. No repository CLI, example assets or global stylesheet reset is included.
-
-ESM only, ES2022. Tooling requires Node >=22.12; Chromium/WebGL is the automated rendering target. This browser package is not a Node/SSR entry; use `@simpludify/core` for headless execution. Source maps embed original sources. [Complete Vite setup](https://github.oz-coden.com/Simpludify/guides/npm.html) · [Repository/API](https://github.com/oz-coden/Simpludify). MIT.
+# @simpludify/web
+
+Experimental v0.1.2 browser SDK for Simpludify, a code-first TypeScript 2D engine. APIs may change between 0.x releases. Includes Game, PixiJS rendering, browser input and Canvas/DOM UI adapters; re-exports the host-independent Core API. Core and PixiJS are installed as runtime dependencies, not bundled into this package.
+
+Registry installation (check availability with `npm view @simpludify/web@0.1.2 version`):
+
+```sh
+npm install @simpludify/web@0.1.2
+npm install --save-dev vite typescript
+```
+
+```ts
+import { Game, Character } from "@simpludify/web";
+const game = new Game();
+game.add(Character());
+await game.run();
+// Call game.dispose() when removing the game.
+```
+
+Use a browser bundler such as Vite, with an HTML module entry and a parent with an explicit height. The entry automatically imports scoped CSS. It can also be imported explicitly with `import "@simpludify/web/style.css"`. Do not configure CSS as side-effect-free. No repository CLI, example assets or global stylesheet reset is included.
+
+ESM only, ES2022. Tooling requires Node >=22.12; Chromium/WebGL is the automated rendering target. This browser package is not a Node/SSR entry; use `@simpludify/core` for headless execution. Source maps embed original sources. [Complete Vite setup](https://github.oz-coden.com/Simpludify/guides/npm.html) · [Repository/API](https://github.com/oz-coden/Simpludify). MIT.

package/dist/game.d.ts

@@ -44,6 +44,8 @@ export declare class Game<SceneId extends string = string> {
     private canvas;
     private canvasPresentation;
     private defaultCanvas;
+    private readonly ownedCanvas;
+    private readonly viewportBindings;
     get pointer(): ScenePointer;
     get pointerDiagnostics(): {
         captures: number;
@@ -119,6 +121,11 @@ export declare class Game<SceneId extends string = string> {
     private present;
     get viewport(): Viewport;
     get view(): ViewTransform;
+    /** Bind the mounted UI's resolved region to the world viewport. UI units become CSS pixels.
+     * One binding per UI; replacement/unbind restores the manual viewport. UI/node disposal unbinds.
+     * A collapsed/hidden region clips all world rendering and pointer input. No extra frame/observer.
+     */
+    bindViewport(ui: CanvasUI, node: CanvasNode): () => void;
     setViewport(viewport?: Viewport): void;
     worldToScreen(point: WorldPoint): ScreenPoint;
     screenToWorld(point: ScreenPoint): WorldPoint;

package/dist/index.js

@@ -372,6 +372,11 @@ var CanvasNativeText = class extends NativeControl {
 			this.source = "pointer";
 			this.begin();
 		}), options);
+		el.addEventListener("blur", () => {
+			this.composing = false;
+			this.session = void 0;
+			this.source = "keyboard";
+		}, options);
 		el.addEventListener("focus", () => this.run(() => this.begin()), options);
 		el.addEventListener("compositionstart", () => this.run(() => {
 			this.composing = true;
@@ -2297,6 +2302,8 @@ var Game = class {
 	canvas;
 	canvasPresentation;
 	defaultCanvas;
+	ownedCanvas = /* @__PURE__ */ new WeakSet();
+	viewportBindings = /* @__PURE__ */ new WeakMap();
 	get pointer() {
 		this.assertAlive();
 		return this.channelFor(this.engine.scene);
@@ -2498,6 +2505,7 @@ var Game = class {
 		this.assertAlive();
 		if (this.startPromise || this.defaultCanvas) throw new EngineError("UI_ALREADY_STARTED", "Define one default Canvas UI before run");
 		this.defaultCanvas = new CanvasUI(this.engine.scene, root, options);
+		this.ownedCanvas.add(this.defaultCanvas);
 		return this.defaultCanvas;
 	}
 	uiOverlay(...nodes) {
@@ -2581,6 +2589,7 @@ var Game = class {
 					canvasUI: (root, options) => {
 						if (canvas) throw new EngineError("UI_OWNERSHIP", "A Scene has one Canvas UI root");
 						canvas = new CanvasUI(scene, root, options);
+						this.ownedCanvas.add(canvas);
 						return canvas;
 					},
 					actions: (actions, bindings) => new ActionController(actions, {
@@ -2690,6 +2699,31 @@ var Game = class {
 		this.updateProjection();
 		return this.projection;
 	}
+	/** Bind the mounted UI's resolved region to the world viewport. UI units become CSS pixels.
+	* One binding per UI; replacement/unbind restores the manual viewport. UI/node disposal unbinds.
+	* A collapsed/hidden region clips all world rendering and pointer input. No extra frame/observer.
+	*/
+	bindViewport(ui, node) {
+		this.assertAlive();
+		if (!this.ownedCanvas.has(ui) || ui.disposed || node.disposed || node.ui !== ui) throw new EngineError("UI_OWNERSHIP", "Viewport region must belong to this Game's Canvas UI");
+		this.viewportBindings.get(ui)?.dispose();
+		let removed = false;
+		const off = [];
+		const binding = {
+			node,
+			dispose: () => {
+				if (removed) return;
+				removed = true;
+				if (this.viewportBindings.get(ui) === binding) this.viewportBindings.delete(ui);
+				for (const unregister of off) unregister();
+				this.projectionDirty = true;
+			}
+		};
+		this.viewportBindings.set(ui, binding);
+		off.push(ui.onDispose(binding.dispose), node.onDispose(binding.dispose));
+		this.projectionDirty = true;
+		return binding.dispose;
+	}
 	setViewport(viewport) {
 		this.assertAlive();
 		const next = viewport ? { ...viewport } : void 0;
@@ -2732,23 +2766,59 @@ var Game = class {
 		this.render();
 	}
 	updateProjection() {
-		const v = this.requestedViewport, c = this.camera;
-		if (!this.projectionDirty && this.cameraX === c.x && this.cameraY === c.y && this.cameraZoom === c.zoom) return;
+		this.canvasPresentation?.update(this.width, this.height);
+		const ui = this.canvas;
+		const region = ui ? this.viewportBindings.get(ui)?.node : void 0;
+		let v = this.requestedViewport;
+		let empty = false;
+		if (ui && region) {
+			const b = region.bounds, scale = ui.scale;
+			const x = Math.max(0, Math.min(this.width, b.x * scale));
+			const y = Math.max(0, Math.min(this.height, b.y * scale));
+			const right = Math.max(x, Math.min(this.width, (b.x + b.width) * scale));
+			const bottom = Math.max(y, Math.min(this.height, (b.y + b.height) * scale));
+			let visible = region.ui === ui;
+			for (let node = region; node; node = node.parent) if (node.disposed || !node.visible || !node.enabled) visible = false;
+			empty = !visible || right <= x || bottom <= y;
+			v = {
+				x,
+				y,
+				width: empty ? 0 : right - x,
+				height: empty ? 0 : bottom - y
+			};
+		}
+		const viewport = v ?? {
+			x: 0,
+			y: 0,
+			width: this.width,
+			height: this.height
+		};
+		const previous = this.projection.viewport;
+		const c = this.camera;
+		if (!this.projectionDirty && previous.x === viewport.x && previous.y === viewport.y && previous.width === viewport.width && previous.height === viewport.height && this.cameraX === c.x && this.cameraY === c.y && this.cameraZoom === c.zoom) return;
 		this.projectionDirty = false;
 		this.cameraX = c.x;
 		this.cameraY = c.y;
 		this.cameraZoom = c.zoom;
 		this.projection = createViewTransform({
-			viewport: v ?? {
-				x: 0,
-				y: 0,
-				width: this.width,
-				height: this.height
-			},
+			viewport: empty ? {
+				...viewport,
+				width: 1,
+				height: 1
+			} : viewport,
 			resolution: this.resolution,
 			aspect: this.aspect,
 			camera: c
 		});
+		if (empty) this.projection = {
+			...this.projection,
+			viewport,
+			clip: {
+				...viewport,
+				width: 0,
+				height: 0
+			}
+		};
 	}
 	resize() {
 		if (this.dead || !this.rendererReady) return;
@@ -2767,7 +2837,6 @@ var Game = class {
 	}
 	render() {
 		this.updateProjection();
-		this.canvasPresentation?.update(this.width, this.height);
 		this.prepared?.render(this.projection);
 	}
 	tick = (time) => {