@octane-xplat/canvas 0.0.0 → 0.7.1

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2026 Alec Larson
+
+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/dist/native/Canvas.tsrx.js

@@ -0,0 +1,35 @@
+import { defineUniversalComponent, registerElement, universalPlan, universalValue } from "@nativescript-community/octane";
+import { Canvas } from "@nativescript/canvas";
+//#region src/Canvas.tsrx
+var __octaneUniversalPlan0 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "nscanvas",
+	"bindings": [
+		["id", 0],
+		["className", 1],
+		["style", 2],
+		["width", 3],
+		["height", 4],
+		["onReady", 5]
+	]
+});
+registerElement("nscanvas", Canvas);
+var Canvas$1 = defineUniversalComponent("nativescript", function Canvas(props) {
+	const ready = (event) => {
+		const canvas = event.object;
+		props.onReady?.({
+			canvas,
+			context: props.context ? canvas.getContext(props.context) : null
+		});
+	};
+	return universalValue(__octaneUniversalPlan0, [
+		props.id,
+		props.className,
+		props.style,
+		props.width,
+		props.height,
+		ready
+	]);
+}, { "module": "@nativescript-community/octane" });
+//#endregion
+export { Canvas$1 as Canvas };

package/dist/native/gpu.js

@@ -0,0 +1,10 @@
+import { GPU } from "@nativescript/canvas";
+//#region src/gpu.ts
+/** getGPU — returns the plugin's GPU shim (wgpu over Metal/Vulkan). Same
+*  spec-shaped surface as web's `navigator.gpu`: `requestAdapter()` +
+*  `getPreferredCanvasFormat()`. */
+function getGPU() {
+	return new GPU();
+}
+//#endregion
+export { getGPU };

package/dist/native/index.js

@@ -0,0 +1,3 @@
+import { Canvas } from "./Canvas.tsrx.js";
+import { getGPU } from "./gpu.js";
+export { Canvas, getGPU };

package/dist/native/octane-client-build.json

@@ -0,0 +1,8 @@
+{
+  "version": 1,
+  "buildId": "53e9debf-4f85-43bc-9b14-599d14aeeaef",
+  "mode": "production",
+  "capabilities": {
+    "independentHydration": false
+  }
+}

package/dist/web/Canvas.web.tsrx.js

@@ -0,0 +1,50 @@
+import { __s, bag7, clone, queueRefAttach, queueRefDetach, setStyle, template } from "octane";
+import { bindSignalAttribute, enableSignalBindings, replaceRef, setPlainAttribute } from "octane/internal/client";
+//#region src/Canvas.web.tsrx
+enableSignalBindings(1, true);
+var _t$0 = /* @__PURE__ */ template("<canvas></canvas>");
+var _rm$0 = [
+	"r",
+	"g",
+	"b"
+];
+var Canvas = /* @__PURE__ */ __s(function Canvas(props, __s, __extra) {
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m1, _m6;
+		const _root = clone(_t$0);
+		_m1 = _root;
+		queueRefAttach(__s, _m6 = (el) => {
+			if (!el) return;
+			props.onReady?.({
+				canvas: el,
+				context: props.context ? el.getContext(props.context) : null
+			});
+		}, _m1);
+		(__s.cleanups ??= []).push(() => _b && queueRefDetach(_b.g, _b.b));
+		_b = bag7(__s, _root, void 0, _m1, void 0, void 0, void 0, void 0, _m6);
+		__s.refFields = _rm$0;
+	} else {
+		const _r = (el) => {
+			if (!el) return;
+			props.onReady?.({
+				canvas: el,
+				context: props.context ? el.getContext(props.context) : null
+			});
+		};
+		if (_r !== _b.g) _b.g = replaceRef(__s, _b.g, _r, _b.b);
+	}
+	_b.a = bindSignalAttribute(__s, _b.a, _b.b, "id", props.id, "b:f0c24829", setPlainAttribute);
+	_b.c = bindSignalAttribute(__s, _b.c, _b.b, "class", props.className, "b:ea9117bd", "class");
+	{
+		const _v = props.style;
+		if (_b.d !== _v) {
+			setStyle(_b.b, _v, _b.d);
+			_b.d = _v;
+		}
+	}
+	_b.e = bindSignalAttribute(__s, _b.e, _b.b, "width", typeof props.width === "number" ? props.width : void 0, "b:b4becda6", setPlainAttribute);
+	_b.f = bindSignalAttribute(__s, _b.f, _b.b, "height", typeof props.height === "number" ? props.height : void 0, "b:7ec30b3a", setPlainAttribute);
+});
+//#endregion
+export { Canvas };

package/dist/web/gpu.web.js

@@ -0,0 +1,10 @@
+//#region src/gpu.web.ts
+/** getGPU — returns the WebGPU entry point (`navigator.gpu`) or null when
+*  WebGPU is unavailable (insecure context, unsupported browser). The
+*  returned object is spec-shaped: `requestAdapter()` +
+*  `getPreferredCanvasFormat()`. */
+function getGPU() {
+	return globalThis.navigator?.gpu ?? null;
+}
+//#endregion
+export { getGPU };

package/dist/web/index.js

@@ -0,0 +1,3 @@
+import { Canvas } from "./Canvas.web.tsrx.js";
+import { getGPU } from "./gpu.web.js";
+export { Canvas, getGPU };

package/dist/web/octane-client-build.json

@@ -0,0 +1,8 @@
+{
+  "version": 1,
+  "buildId": "15151704-61a3-4d60-b8bb-51699b32231d",
+  "mode": "production",
+  "capabilities": {
+    "independentHydration": false
+  }
+}

package/package.json

@@ -1,6 +1,69 @@
 {
-	"name": "@octane-xplat/canvas",
-	"version": "0.0.0",
-	"description": "Stub reserving the name; real releases publish from CI via trusted publishing.",
-	"publishConfig": {"access": "public"}
-}
+  "name": "@octane-xplat/canvas",
+  "version": "0.7.1",
+  "description": "Canvas/GPU surface for Octane xplat — web <canvas> + @nativescript/canvas (2D, WebGL/WebGL2, WebGPU/WGSL)",
+  "keywords": [
+    "octane",
+    "xplat",
+    "cross-platform",
+    "canvas",
+    "webgl",
+    "webgl2",
+    "webgpu",
+    "wgsl",
+    "gpu",
+    "graphics",
+    "nativescript"
+  ],
+  "license": "MIT",
+  "homepage": "https://github.com/octane-xplat/octane-xplat/tree/main/packages/canvas",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/octane-xplat/octane-xplat.git",
+    "directory": "packages/canvas"
+  },
+  "files": [
+    "dist",
+    "types",
+    "src"
+  ],
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./types/index.d.ts",
+      "web": "./dist/web/index.js",
+      "native": "./dist/native/index.js",
+      "default": "./dist/native/index.js"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@nativescript/canvas": "3.0.0-alpha.15"
+  },
+  "devDependencies": {
+    "@nativescript-community/octane": "0.2.1",
+    "@nativescript/core": "9.1.2",
+    "@octanejs/vite-plugin": "0.1.61",
+    "octane": "0.6.3",
+    "typescript": "5.9.3",
+    "vite": "8.3.0"
+  },
+  "peerDependencies": {
+    "@nativescript-community/octane": ">=0.2.1 <1",
+    "@nativescript/core": ">=9.1.0 <10",
+    "octane": ">=0.6.3 <1"
+  },
+  "peerDependenciesMeta": {
+    "@nativescript-community/octane": {
+      "optional": true
+    },
+    "@nativescript/core": {
+      "optional": true
+    }
+  },
+  "scripts": {
+    "build": "vite build && vite build --mode native && tsc -p tsconfig.types.json && node ../../scripts/check-native-dist.mjs"
+  }
+}

package/src/Canvas.tsrx

@@ -0,0 +1,39 @@
+/** @jsxImportSource @nativescript-community/octane */
+import { registerElement } from '@nativescript-community/octane';
+import type { Attributes } from '@nativescript-community/octane/intrinsics';
+import { Canvas as NSCanvas } from '@nativescript/canvas';
+import type { CanvasProps } from './props';
+
+declare module '@nativescript-community/octane/intrinsics' {
+	interface NativeScriptElements {
+		nscanvas: Attributes<typeof NSCanvas>;
+	}
+}
+
+// @nativescript/canvas — Skia + wgpu core exposing the DOM Canvas API
+// (2d, webgl, webgl2, webgpu) on iOS + Android. Element name is `nscanvas`
+// rather than `canvas` because `canvas` is DOM vocabulary in the
+// element-vocabulary lint.
+registerElement('nscanvas', NSCanvas);
+
+/** Canvas — DOM Canvas API surface on native. `onReady` wraps the plugin's
+ *  `ready` event: it fires once the GPU surface exists, which is the
+ *  earliest `getContext` may be called. */
+export function Canvas(props: CanvasProps) @{
+	const ready = (event: any) => {
+		const canvas = event.object;
+		props.onReady?.({
+			canvas,
+			context: props.context ? canvas.getContext(props.context) : null,
+		});
+	};
+
+	<nscanvas
+		id={props.id}
+		className={props.className}
+		style={props.style}
+		width={props.width as any}
+		height={props.height as any}
+		onReady={ready}
+	/>;
+}

package/src/Canvas.web.tsrx

@@ -0,0 +1,23 @@
+import type { CanvasProps } from './props';
+
+/** Canvas — a plain <canvas>. `onReady` fires at mount with the element
+ *  and the resolved context. */
+export function Canvas(props: CanvasProps) @{
+	<canvas
+		id={props.id}
+		className={props.className}
+		style={props.style}
+		width={typeof props.width === 'number' ? props.width : undefined}
+		height={typeof props.height === 'number' ? props.height : undefined}
+		ref={(el: HTMLCanvasElement | null) => {
+			if (!el) {
+				return;
+			}
+
+			props.onReady?.({
+				canvas: el,
+				context: props.context ? el.getContext(props.context) : null,
+			});
+		}}
+	/>
+}

package/src/gpu.ts

@@ -0,0 +1,8 @@
+import { GPU } from '@nativescript/canvas';
+
+/** getGPU — returns the plugin's GPU shim (wgpu over Metal/Vulkan). Same
+ *  spec-shaped surface as web's `navigator.gpu`: `requestAdapter()` +
+ *  `getPreferredCanvasFormat()`. */
+export function getGPU(): any {
+	return new GPU();
+}

package/src/gpu.web.ts

@@ -0,0 +1,7 @@
+/** getGPU — returns the WebGPU entry point (`navigator.gpu`) or null when
+ *  WebGPU is unavailable (insecure context, unsupported browser). The
+ *  returned object is spec-shaped: `requestAdapter()` +
+ *  `getPreferredCanvasFormat()`. */
+export function getGPU(): any {
+	return (globalThis.navigator as any)?.gpu ?? null;
+}

package/src/index.ts

@@ -0,0 +1,5 @@
+// Platform barrels — explicit .tsrx leaf imports (moduleSuffixes don't
+// reach .tsrx; same convention as @octane-xplat/ui index.*.ts).
+export { Canvas } from './Canvas.tsrx';
+export { getGPU } from './gpu';
+export type { CanvasProps, CanvasContextKind, CanvasReady } from './props';

package/src/index.web.ts

@@ -0,0 +1,5 @@
+// Platform barrels — explicit .tsrx leaf imports (moduleSuffixes don't
+// reach .tsrx; same convention as @octane-xplat/ui index.*.ts).
+export { Canvas } from './Canvas.web.tsrx';
+export { getGPU } from './gpu.web';
+export type { CanvasProps, CanvasContextKind, CanvasReady } from './props';

package/src/props.ts

@@ -0,0 +1,33 @@
+export type CanvasContextKind =
+	| '2d'
+	| 'webgl'
+	| 'webgl2'
+	| 'webgpu'
+	| 'bitmaprenderer';
+
+export interface CanvasReady {
+	/** HTMLCanvasElement on web, the plugin's Canvas view on native —
+	 *  both expose `getContext()`. */
+	canvas: any;
+	/** The resolved context for the `context` prop, or null when that
+	 *  kind is unsupported/unavailable. WebGPU still needs a device —
+	 *  `getGPU()` normalizes adapter/device acquisition. */
+	context: any;
+}
+
+export interface CanvasProps {
+	className?: any;
+	style?: any;
+	id?: string;
+	/** Context kind resolved before `onReady` fires. Omit to defer
+	 *  `getContext` to user code (only one kind per canvas — call once). */
+	context?: CanvasContextKind;
+	/** Web: after mount. Native: the plugin's `ready` event (fires when the
+	 *  GPU surface exists — earlier `getContext` calls can return null). */
+	onReady?: (ready: CanvasReady) => void;
+	/** Numeric values map to the element's width/height — on web that is
+	 *  the canvas *drawing buffer* size (pair with style for display
+	 *  size), on native dip size. */
+	width?: string | number;
+	height?: string | number;
+}

package/types/index.d.ts

@@ -0,0 +1,13 @@
+// Boundary types for @octane-xplat/canvas — the mechanical wrapper over
+// props.ts (tsrx-tsc can't emit .tsrx declarations; see ui/types/index.d.ts
+// for the same pattern).
+import type { UniversalComponent } from 'octane/universal'
+import type { CanvasProps } from './props'
+
+export declare const Canvas: UniversalComponent<CanvasProps>
+
+/** Returns the WebGPU entry point — `navigator.gpu` on web, the plugin's
+ *  GPU shim on native — or null where WebGPU is unavailable. */
+export declare function getGPU(): any
+
+export type { CanvasProps, CanvasContextKind, CanvasReady } from './props'

package/types/props.d.ts

@@ -0,0 +1,26 @@
+export type CanvasContextKind = '2d' | 'webgl' | 'webgl2' | 'webgpu' | 'bitmaprenderer';
+export interface CanvasReady {
+    /** HTMLCanvasElement on web, the plugin's Canvas view on native —
+     *  both expose `getContext()`. */
+    canvas: any;
+    /** The resolved context for the `context` prop, or null when that
+     *  kind is unsupported/unavailable. WebGPU still needs a device —
+     *  `getGPU()` normalizes adapter/device acquisition. */
+    context: any;
+}
+export interface CanvasProps {
+    className?: any;
+    style?: any;
+    id?: string;
+    /** Context kind resolved before `onReady` fires. Omit to defer
+     *  `getContext` to user code (only one kind per canvas — call once). */
+    context?: CanvasContextKind;
+    /** Web: after mount. Native: the plugin's `ready` event (fires when the
+     *  GPU surface exists — earlier `getContext` calls can return null). */
+    onReady?: (ready: CanvasReady) => void;
+    /** Numeric values map to the element's width/height — on web that is
+     *  the canvas *drawing buffer* size (pair with style for display
+     *  size), on native dip size. */
+    width?: string | number;
+    height?: string | number;
+}