@simpludify/web 0.1.1 → 0.1.3

package/README.md

@@ -1,11 +1,11 @@
 # @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.
+Experimental v0.1.3 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:
+Registry installation (check availability with `npm view @simpludify/web@0.1.3 version`):
 
 ```sh
-npm install @simpludify/web@0.1.0
+npm install @simpludify/web@0.1.3
 npm install --save-dev vite typescript
 ```
 

package/dist/canvas-visual.d.ts

@@ -18,6 +18,7 @@ export declare class CanvasVisual implements CanvasPresentation {
     private dirty;
     private dead;
     private active;
+    private cacheResolution;
     private mirroredFocus;
     private readonly subscriptions;
     private syncs;
@@ -25,14 +26,17 @@ export declare class CanvasVisual implements CanvasPresentation {
         graphics(graphics: Graphics, context: number | undefined): void;
         text(text: Text, key: string | undefined): void;
         changedText(key: string): void;
+        cacheResolution(): number | undefined;
     });
     get diagnostics(): {
         nodes: number;
+        visibleNodes: number;
         buttons: number;
         syncs: number;
         textMetrics: number;
     };
     private measure;
+    private clearCache;
     beforeResolutionChange(): void;
     focus(node: CanvasNode): void;
     private native;

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

@@ -1,6 +1,6 @@
 import "./style.css";
 import { ActionController, Aspect, Camera, CanvasButton as CanvasButton$1, CanvasUI, Engine, EngineError, FixedStepRunner, GeometryTilemapLayer, PointerRouting, Renderable, ReplayPlayer, Scene, ScenePointer, SceneState, Shape, TilemapLayer, Transform, canvasControlText, canvasHoverHighlight, canvasOpacity, canvasScrollbars, canvasSliderGeometry, cleanupAll, containsScreenPoint, createViewTransform, imageSize, intersectUI, isKeyCode, positive, screenPoint, screenToWorld, spriteFrameBounds, worldToScreen, wrapCanvasText } from "@simpludify/core";
-import { Application, CanvasTextMetrics, Container, Graphics, Rectangle, Sprite, Text, TextStyle, Texture } from "pixi.js";
+import { Application, CanvasTextMetrics, Container, Graphics, Rectangle, RendererType, Sprite, Text, TextStyle, Texture } from "pixi.js";
 export * from "@simpludify/core";
 // packages/web/src/canvas-node.ts
 /** Bridge owner cancellation to browser APIs such as fetch. */
@@ -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;
@@ -522,6 +527,7 @@ var CanvasVisual = class {
 	dirty = true;
 	dead = false;
 	active = false;
+	cacheResolution;
 	mirroredFocus;
 	subscriptions = [];
 	syncs = 0;
@@ -576,6 +582,7 @@ var CanvasVisual = class {
 	get diagnostics() {
 		return {
 			nodes: this.entries.size,
+			visibleNodes: [...this.entries.values()].filter((e) => e.display.visible).length,
 			buttons: [...this.entries.values()].filter((e) => e.button).length,
 			syncs: this.syncs,
 			textMetrics: this.metrics.size
@@ -619,7 +626,14 @@ var CanvasVisual = class {
 		cache.values.set(width, result);
 		return result;
 	};
+	clearCache() {
+		if (this.cacheResolution === void 0) return;
+		this.display.cacheAsTexture(false);
+		this.cacheResolution = void 0;
+	}
 	beforeResolutionChange() {
+		this.clearCache();
+		this.dirty = true;
 		for (const entry of this.entries.values()) if (entry.text && !entry.text.destroyed) this.resources.changedText(entry.text.styleKey);
 	}
 	focus(node) {
@@ -748,6 +762,7 @@ var CanvasVisual = class {
 		const visited = /* @__PURE__ */ new Set(), buttons = [];
 		const paint = [];
 		let order = 0;
+		let scrollVisible = false;
 		let restoreNativeFocus;
 		this.ui.walk((node, parentClip) => {
 			const measuredText = node.kind === "panel" ? void 0 : this.measure(node, Math.max(0, node.bounds.width - node.style.padding * 2));
@@ -772,6 +787,19 @@ var CanvasVisual = class {
 						entry.button = entry.native.element;
 					} else entry.button = this.button(node);
 					this.element.append(entry.button);
+				} else if (node.kind === "label") {
+					entry.label = document.createElement("span");
+					entry.label.className = "s-canvas-label";
+					const semantics = node.labelSemantics;
+					if (semantics?.role) {
+						entry.label.setAttribute("role", semantics.role);
+						if (semantics.role === "heading") entry.label.setAttribute("aria-level", String(semantics.level));
+						else {
+							entry.label.setAttribute("aria-live", semantics.role === "alert" ? "assertive" : "polite");
+							entry.label.setAttribute("aria-atomic", "true");
+						}
+					}
+					this.element.append(entry.label);
 				}
 				if (node.kind !== "panel") {
 					entry.text = new Text({ text: node.text });
@@ -797,7 +825,14 @@ var CanvasVisual = class {
 				} : {}
 			});
 			if (entry.button) buttons.push(entry.button);
+			if (entry.label) {
+				buttons.push(entry.label);
+				if (entry.label.textContent !== node.text) entry.label.textContent = node.text;
+				entry.label.setAttribute("aria-hidden", String(canvasOpacity(node) === 0));
+			}
 			const b = node.bounds, s = node.style;
+			const scrollBox = intersectUI(b, clip);
+			if (node.style.scroll && scrollBox.width > 0 && scrollBox.height > 0 && canvasOpacity(node) > 0) scrollVisible = true;
 			let enabled = !node.busy;
 			for (let p = node; p; p = p.parent) enabled &&= p.enabled;
 			const signature = JSON.stringify([
@@ -818,9 +853,12 @@ var CanvasVisual = class {
 			if (entry.signature === signature) return;
 			entry.signature = signature;
 			entry.display.position.set(b.x, b.y);
+			const paintBox = intersectUI(b, clip);
+			const visible = paintBox.width > 0 && paintBox.height > 0 && canvasOpacity(node) > 0;
+			entry.display.visible = visible;
 			const clipped = clip.x !== 0 || clip.y !== 0 || clip.width !== width / this.ui.scale || clip.height !== height / this.ui.scale;
 			entry.display.mask = clipped ? entry.mask : null;
-			entry.mask.renderable = clipped;
+			entry.mask.renderable = clipped && visible;
 			const maskSignature = JSON.stringify([
 				clipped,
 				clip.x,
@@ -922,7 +960,8 @@ var CanvasVisual = class {
 			const display = entry.scrollbar;
 			if (!display) return;
 			this.display.setChildIndex(display, order++);
-			display.visible = bars.length > 0;
+			const viewport = intersectUI(node.bounds, clip);
+			display.visible = bars.length > 0 && viewport.width > 0 && viewport.height > 0 && canvasOpacity(node) > 0;
 			display.mask = entry.display.mask;
 			const signature = JSON.stringify([
 				node.style.color,
@@ -977,6 +1016,14 @@ var CanvasVisual = class {
 		const button = focused ? this.entries.get(focused)?.button : void 0;
 		if ((focused !== this.mirroredFocus || focused === restoreNativeFocus) && button && !button.disabled && document.activeElement !== button) button.focus({ preventScroll: true });
 		this.mirroredFocus = this.ui.focusedNode;
+		const ratio = this.resources.cacheResolution();
+		const cache = scrollVisible && ratio !== void 0 && Math.max(width, height) * ratio <= 4096 ? ratio * this.ui.scale : void 0;
+		if (cache !== this.cacheResolution) {
+			this.clearCache();
+			this.cacheResolution = cache;
+			if (cache !== void 0) this.display.cacheAsTexture({ resolution: cache });
+		}
+		if (cache !== void 0) this.display.updateCacheTexture();
 	}
 	releaseEntry(entry) {
 		const backgroundContext = entry.background.context?.uid, maskContext = entry.mask.context?.uid;
@@ -986,6 +1033,7 @@ var CanvasVisual = class {
 			() => entry.abort.abort(),
 			() => entry.native?.dispose(),
 			() => entry.button?.remove(),
+			() => entry.label?.remove(),
 			() => entry.background.destroy({ context: true }),
 			() => entry.scrollbar?.destroy({ context: true }),
 			() => entry.text?.destroy({ style: true }),
@@ -1010,6 +1058,7 @@ var CanvasVisual = class {
 		cleanupAll([
 			...this.subscriptions.splice(0),
 			...entries.map((e) => () => this.releaseEntry(e)),
+			() => this.clearCache(),
 			() => this.display.destroy({ children: true }),
 			() => this.element.remove()
 		], "Canvas visual cleanup failed");
@@ -1457,10 +1506,11 @@ var PixiRenderer = class {
 	pendingUITextKeys = /* @__PURE__ */ new Set();
 	canvasPresentations = /* @__PURE__ */ new Set();
 	get canvasDiagnostics() {
-		let nodes = 0, buttons = 0, syncs = 0, textMetrics = 0;
+		let nodes = 0, visibleNodes = 0, buttons = 0, syncs = 0, textMetrics = 0;
 		for (const p of this.canvasPresentations) {
 			const d = p.diagnostics;
 			nodes += d.nodes;
+			visibleNodes += d.visibleNodes;
 			buttons += d.buttons;
 			syncs += d.syncs;
 			textMetrics += d.textMetrics;
@@ -1468,6 +1518,7 @@ var PixiRenderer = class {
 		return {
 			presentations: this.canvasPresentations.size,
 			nodes,
+			visibleNodes,
 			buttons,
 			syncs,
 			textMetrics
@@ -1478,7 +1529,8 @@ var PixiRenderer = class {
 		const visual = new CanvasVisual(ui, this.host, routing, {
 			graphics: (graphics, context) => releaseUIGraphics(this.app.renderer, graphics, context),
 			text: (text, key) => releaseUIText(this.app.renderer, text, key),
-			changedText: (key) => this.pendingUITextKeys.add(key)
+			changedText: (key) => this.pendingUITextKeys.add(key),
+			cacheResolution: () => this.app.renderer.type === RendererType.WEBGL ? this.app.renderer.resolution : void 0
 		});
 		this.canvasPresentations.add(visual);
 		let disposed = false;
@@ -2297,6 +2349,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 +2552,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 +2636,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 +2746,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 +2813,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 +2884,6 @@ var Game = class {
 	}
 	render() {
 		this.updateProjection();
-		this.canvasPresentation?.update(this.width, this.height);
 		this.prepared?.render(this.projection);
 	}
 	tick = (time) => {