chartgpu-angular 0.0.0-stage → 22.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Naren
+
+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,3 +1,124 @@
-# Temporary Holding Version
+# chartgpu-angular
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+An Angular wrapper for ChartGPU, a chart rendering runtime for building responsive, interactive charts in Angular templates.
+
+This is an unofficial wrapper library. It is not affiliated with, endorsed by, or sponsored by ChartGPU or any other upstream vendor unless explicitly stated otherwise.
+
+[![npm version](https://img.shields.io/npm/v/chartgpu-angular.svg)](https://www.npmjs.com/package/chartgpu-angular)
+[![npm downloads](https://img.shields.io/npm/dy/chartgpu-angular.svg)](https://www.npmjs.com/package/chartgpu-angular)
+[![GitHub stars](https://img.shields.io/github/stars/kai1992cool/chartgpu-angular.svg)](https://github.com/kai1992cool/chartgpu-angular)
+[![license](https://img.shields.io/npm/l/chartgpu-angular.svg)](https://github.com/kai1992cool/chartgpu-angular/blob/master/LICENSE)
+
+## Features
+
+- Uses ChartGPU rendering through Angular components and directives.
+- Configure charts with standard options and theme updates.
+- Define chart content with Angular templates.
+- Bind chart events as Angular outputs.
+- Use shared GPU context handling for dashboards and multiple charts.
+
+## Installation
+
+### 1. Install the package
+
+```bash
+npm install chartgpu-angular
+```
+
+## Key Implementation Notes:
+
+* **This project is an unofficial wrapper library.**
+* **WebGPU is required for rendering.**
+* **The shared GPU context service is intended for dashboard-style reuse.**
+
+## Angular version examples & Documentation
+
+StackBlitz examples will be added as each Angular version's rollout is published.
+
+> If you click the link for Standalone and NgModule examples are stuck in clone step, please refresh the screen, the stackblitz will initialize
+
+| Angular version | Standalone example | NgModule example | Documentation |
+| --------------- | ------------------ | ---------------- | ------------- |
+| Angular 14 | [Modular Demo](https://stackblitz.com/github/kai1992cool/chartgpu-angular/tree/main/demos/14/modular) | [Standalone Demo](https://stackblitz.com/github/kai1992cool/chartgpu-angular/tree/main/demos/14/standalone) | [Storybook](https://kai1992cool.github.io/chartgpu-angular/demos?version=14) |
+| Angular 15 | [Modular Demo](https://stackblitz.com/github/kai1992cool/chartgpu-angular/tree/main/demos/15/modular) | [Standalone Demo](https://stackblitz.com/github/kai1992cool/chartgpu-angular/tree/main/demos/15/standalone) | [Storybook](https://kai1992cool.github.io/chartgpu-angular/demos?version=15) |
+| Angular 16 | [Modular Demo](https://stackblitz.com/github/kai1992cool/chartgpu-angular/tree/main/demos/16/modular) | [Standalone Demo](https://stackblitz.com/github/kai1992cool/chartgpu-angular/tree/main/demos/16/standalone) | [Storybook](https://kai1992cool.github.io/chartgpu-angular/demos?version=16) |
+| Angular 17 | [Modular Demo](https://stackblitz.com/github/kai1992cool/chartgpu-angular/tree/main/demos/17/modular) | [Standalone Demo](https://stackblitz.com/github/kai1992cool/chartgpu-angular/tree/main/demos/17/standalone) | [Storybook](https://kai1992cool.github.io/chartgpu-angular/demos?version=17) |
+| Angular 18 | [Modular Demo](https://stackblitz.com/github/kai1992cool/chartgpu-angular/tree/main/demos/18/modular) | [Standalone Demo](https://stackblitz.com/github/kai1992cool/chartgpu-angular/tree/main/demos/18/standalone) | [Storybook](https://kai1992cool.github.io/chartgpu-angular/demos?version=18) |
+| Angular 19 | [Modular Demo](https://stackblitz.com/github/kai1992cool/chartgpu-angular/tree/main/demos/19/modular) | [Standalone Demo](https://stackblitz.com/github/kai1992cool/chartgpu-angular/tree/main/demos/19/standalone) | [Storybook](https://kai1992cool.github.io/chartgpu-angular/demos?version=19) |
+| Angular 20 | [Modular Demo](https://stackblitz.com/github/kai1992cool/chartgpu-angular/tree/main/demos/20/modular) | [Standalone Demo](https://stackblitz.com/github/kai1992cool/chartgpu-angular/tree/main/demos/20/standalone) | [Storybook](https://kai1992cool.github.io/chartgpu-angular/demos?version=20) |
+| Angular 21 | [Modular Demo](https://stackblitz.com/github/kai1992cool/chartgpu-angular/tree/main/demos/21/modular) | [Standalone Demo](https://stackblitz.com/github/kai1992cool/chartgpu-angular/tree/main/demos/21/standalone) | [Storybook](https://kai1992cool.github.io/chartgpu-angular/demos?version=21) |
+| Angular 22 | [Modular Demo](https://stackblitz.com/github/kai1992cool/chartgpu-angular/tree/main/demos/22/modular) | [Standalone Demo](https://stackblitz.com/github/kai1992cool/chartgpu-angular/tree/main/demos/22/standalone) | [Storybook](https://kai1992cool.github.io/chartgpu-angular/demos?version=22) |
+
+Example usage:
+
+```ts
+import { Component } from '@angular/core';
+import { ChartGPUComponent, provideChartGpuContext } from 'chartgpu-angular';
+
+@Component({
+  standalone: true,
+  imports: [ChartGPUComponent],
+  providers: [provideChartGpuContext()],
+  template: `<lib-chartgpu-angular />`,
+})
+export class ExampleComponent {}
+```
+
+## Configuring Styling
+
+### 1. Simplest way
+
+The default setup should include the required chart styles for the component, so no separate CSS setup is usually needed.
+
+### 2. Configure chart CSS (when needed)
+If you need additional styles for chart modules or custom visual effects, serve the CSS files as assets in your application configuration.
+
+Then pass the asset URL in the appropriate style injection option used by the component.
+
+## Setup
+
+Choose the setup that matches your Angular application.
+
+### Standalone application
+
+Import `ChartGPUComponent` from `chartgpu-angular` and add it to the `imports` array of each standalone component that uses it. Add `provideChartGpuContext()` to the component or application providers when you want a shared GPU context service:
+
+```ts
+import { Component } from '@angular/core';
+import { ChartGPUComponent, provideChartGpuContext } from 'chartgpu-angular';
+
+@Component({
+  standalone: true,
+  imports: [ChartGPUComponent],
+  providers: [provideChartGpuContext()],
+  template: `<lib-chartgpu-angular />`,
+})
+export class ExampleComponent {}
+```
+
+### NgModule application
+
+Import `ChartGPUComponent` in the `imports` array of the module that declares the component using it. If you need the shared GPU context service, provide it from the module providers with `provideChartGpuContext()`:
+
+```ts
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { AppComponent } from './app.component';
+import { ChartGPUComponent, provideChartGpuContext } from 'chartgpu-angular';
+
+@NgModule({
+  declarations: [AppComponent],
+  imports: [BrowserModule, ChartGPUComponent],
+  providers: [provideChartGpuContext()],
+  bootstrap: [AppComponent],
+})
+export class AppModule {}
+```
+
+## Documentation and demos
+
+- [ChartGPU documentation](https://chartgpu.io/docs/)
+
+## License
+
+MIT

package/fesm2022/chartgpu-angular.mjs

@@ -0,0 +1,682 @@
+import { NgStyle } from "@angular/common";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, Directive, Injectable, afterNextRender, computed, effect, input, makeEnvironmentProviders, output, signal, untracked, viewChild } from "@angular/core";
+import { ChartGPU, connectCharts, createPipelineCache } from "chartgpu";
+var ChartGpuAngularComponent = class ChartGpuAngularComponent {
+	destroyRef;
+	options = input.required(...ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []);
+	gpuContext = input(null, ...ngDevMode ? [{ debugName: "gpuContext" }] : /* istanbul ignore next */ []);
+	theme = input(void 0, ...ngDevMode ? [{ debugName: "theme" }] : /* istanbul ignore next */ []);
+	className = input(...ngDevMode ? [void 0, { debugName: "className" }] : /* istanbul ignore next */ []);
+	style = input(...ngDevMode ? [void 0, { debugName: "style" }] : /* istanbul ignore next */ []);
+	ready = output();
+	chartReady = output();
+	chartDispose = output();
+	resize = output();
+	click = output();
+	chartClick = output();
+	mouseOver = output();
+	mouseOut = output();
+	crosshairMove = output();
+	dataAppend = output();
+	zoomChange = output();
+	zoomRangeChange = output();
+	deviceLost = output();
+	chartError = output();
+	host = viewChild("host", ...ngDevMode ? [{ debugName: "host" }] : /* istanbul ignore next */ []);
+	canvasHost = viewChild("canvasHost", ...ngDevMode ? [{ debugName: "canvasHost" }] : /* istanbul ignore next */ []);
+	chartInstance = signal(null, ...ngDevMode ? [{ debugName: "chartInstance" }] : /* istanbul ignore next */ []);
+	initializationError = signal(null, ...ngDevMode ? [{ debugName: "initializationError" }] : /* istanbul ignore next */ []);
+	chartContainer;
+	createdWithOptions;
+	resizeTimeout;
+	resizeObserver;
+	removeChartListeners;
+	destroying = false;
+	constructor(destroyRef) {
+		this.destroyRef = destroyRef;
+		this.destroyRef.onDestroy(() => {
+			this.resizeObserver?.disconnect();
+			if (this.resizeTimeout !== void 0) clearTimeout(this.resizeTimeout);
+			this.disposeChart();
+		});
+		afterNextRender(() => {
+			const container = this.host()?.nativeElement;
+			if (container) this.observeResize(container);
+		});
+		effect((onCleanup) => {
+			const container = this.canvasHost()?.nativeElement;
+			const options = this.options();
+			const gpuContext = this.gpuContext();
+			const theme = this.theme();
+			this.initializationError.set(null);
+			if (!container) {
+				this.disposeChart();
+				return;
+			}
+			if (typeof navigator === "undefined" || !("gpu" in navigator)) {
+				this.reportError(/* @__PURE__ */ new Error("WebGPU not supported in this browser"));
+				return;
+			}
+			if (untracked(() => this.chartInstance()) && this.chartContainer === container) return;
+			let cancelled = false;
+			let createdInstance;
+			const initialOptions = this.getEffectiveOptions(options, theme);
+			(gpuContext ? ChartGPU.create(container, initialOptions, gpuContext) : ChartGPU.create(container, initialOptions)).then((instance) => {
+				createdInstance = instance;
+				if (cancelled) {
+					instance.dispose();
+					return;
+				}
+				try {
+					const latest = untracked(() => ({
+						options: this.options(),
+						theme: this.theme()
+					}));
+					if (latest.options !== options || latest.theme !== theme) instance.setOption(this.getEffectiveOptions(latest.options, latest.theme));
+					this.createdWithOptions = latest;
+					this.chartContainer = container;
+					this.chartInstance.set(instance);
+					this.removeChartListeners = this.listenToChart(instance);
+					this.ready.emit({ container });
+					this.chartReady.emit(instance);
+					const range = instance.getZoomRange();
+					if (range) this.emitZoomRange(range);
+				} catch (cause) {
+					instance.dispose();
+					throw cause;
+				}
+			}).catch((cause) => {
+				if (cancelled) return;
+				if (createdInstance && this.chartInstance() !== createdInstance && !createdInstance.disposed) createdInstance.dispose();
+				this.reportError(cause);
+			});
+			onCleanup(() => {
+				cancelled = true;
+				if (this.chartContainer === container) this.disposeChart();
+			});
+		}, { allowSignalWrites: true });
+		effect(() => {
+			const options = this.options();
+			const theme = this.theme();
+			const instance = this.chartInstance();
+			if (!instance || instance.disposed) return;
+			if (this.createdWithOptions?.options === options && this.createdWithOptions.theme === theme) {
+				this.createdWithOptions = void 0;
+				return;
+			}
+			try {
+				instance.setOption(this.getEffectiveOptions(options, theme));
+			} catch (cause) {
+				this.reportError(cause);
+			}
+		}, { allowSignalWrites: true });
+	}
+	emitClick(event) {
+		this.click.emit({
+			x: event.offsetX,
+			y: event.offsetY
+		});
+	}
+	ngOnDestroy() {
+		this.destroying = true;
+	}
+	getChart() {
+		const instance = this.chartInstance();
+		return instance && !instance.disposed ? instance : null;
+	}
+	getContainer() {
+		return this.canvasHost()?.nativeElement ?? null;
+	}
+	appendData(seriesIndex, newPoints, options) {
+		this.getChart()?.appendData(seriesIndex, newPoints, options);
+	}
+	renderFrame() {
+		return this.getChart()?.renderFrame() ?? false;
+	}
+	needsRender() {
+		return this.getChart()?.needsRender() ?? false;
+	}
+	getRenderMode() {
+		return this.getChart()?.getRenderMode() ?? "auto";
+	}
+	setRenderMode(mode) {
+		this.getChart()?.setRenderMode(mode);
+	}
+	setOption(options) {
+		this.getChart()?.setOption(options);
+	}
+	setZoomRange(start, end, source) {
+		this.getChart()?.setZoomRange(start, end, source);
+	}
+	setInteractionX(x, source) {
+		this.getChart()?.setInteractionX(x, source);
+	}
+	getInteractionX() {
+		return this.getChart()?.getInteractionX() ?? null;
+	}
+	hitTest(event) {
+		return this.getChart()?.hitTest(event) ?? null;
+	}
+	getEffectiveOptions(options, theme) {
+		return theme !== void 0 ? {
+			...options,
+			theme
+		} : options;
+	}
+	listenToChart(instance) {
+		const click = (payload) => this.chartClick.emit(payload);
+		const mouseOver = (payload) => this.mouseOver.emit(payload);
+		const mouseOut = (payload) => this.mouseOut.emit(payload);
+		const crosshairMove = (payload) => this.crosshairMove.emit(payload);
+		const dataAppend = (payload) => this.dataAppend.emit(payload);
+		const zoomChange = (payload) => this.emitZoomRange(payload);
+		const deviceLost = (payload) => this.deviceLost.emit(payload);
+		instance.on("click", click);
+		instance.on("mouseover", mouseOver);
+		instance.on("mouseout", mouseOut);
+		instance.on("crosshairMove", crosshairMove);
+		instance.on("dataAppend", dataAppend);
+		instance.on("zoomRangeChange", zoomChange);
+		instance.on("deviceLost", deviceLost);
+		return () => {
+			if (instance.disposed) return;
+			instance.off("click", click);
+			instance.off("mouseover", mouseOver);
+			instance.off("mouseout", mouseOut);
+			instance.off("crosshairMove", crosshairMove);
+			instance.off("dataAppend", dataAppend);
+			instance.off("zoomRangeChange", zoomChange);
+			instance.off("deviceLost", deviceLost);
+		};
+	}
+	emitZoomRange(range) {
+		this.zoomChange.emit({ range: {
+			start: range.start,
+			end: range.end
+		} });
+		this.zoomRangeChange.emit({
+			start: range.start,
+			end: range.end
+		});
+	}
+	observeResize(container) {
+		if (typeof ResizeObserver === "undefined") return;
+		this.resizeObserver = new ResizeObserver((entries) => {
+			const entry = entries[0];
+			if (!entry) return;
+			const { width, height } = entry.contentRect;
+			this.resize.emit({
+				width,
+				height,
+				container
+			});
+			if (this.resizeTimeout !== void 0) clearTimeout(this.resizeTimeout);
+			this.resizeTimeout = setTimeout(() => {
+				this.chartInstance()?.resize();
+				this.resizeTimeout = void 0;
+			}, 100);
+		});
+		this.resizeObserver.observe(container);
+	}
+	reportError(cause) {
+		const error = cause instanceof Error ? cause : new Error(String(cause));
+		this.initializationError.set(error);
+		this.chartError.emit(error);
+	}
+	disposeChart() {
+		const instance = this.chartInstance();
+		this.removeChartListeners?.();
+		this.removeChartListeners = void 0;
+		if (instance && !instance.disposed) {
+			instance.dispose();
+			if (!this.destroying) this.chartDispose.emit();
+		}
+		this.chartInstance.set(null);
+		this.chartContainer = void 0;
+		this.createdWithOptions = void 0;
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: ChartGpuAngularComponent,
+		deps: [{ token: i0.DestroyRef }],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.3",
+		type: ChartGpuAngularComponent,
+		isStandalone: true,
+		selector: "lib-chartgpu-angular",
+		inputs: {
+			options: {
+				classPropertyName: "options",
+				publicName: "options",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			gpuContext: {
+				classPropertyName: "gpuContext",
+				publicName: "gpuContext",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			theme: {
+				classPropertyName: "theme",
+				publicName: "theme",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			className: {
+				classPropertyName: "className",
+				publicName: "className",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			style: {
+				classPropertyName: "style",
+				publicName: "style",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			ready: "ready",
+			chartReady: "chartReady",
+			chartDispose: "chartDispose",
+			resize: "resize",
+			click: "click",
+			chartClick: "chartClick",
+			mouseOver: "mouseOver",
+			mouseOut: "mouseOut",
+			crosshairMove: "crosshairMove",
+			dataAppend: "dataAppend",
+			zoomChange: "zoomChange",
+			zoomRangeChange: "zoomRangeChange",
+			deviceLost: "deviceLost",
+			chartError: "chartError"
+		},
+		host: { classAttribute: "chartgpu-angular" },
+		viewQueries: [{
+			propertyName: "host",
+			first: true,
+			predicate: ["host"],
+			descendants: true,
+			isSignal: true
+		}, {
+			propertyName: "canvasHost",
+			first: true,
+			predicate: ["canvasHost"],
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: `
+    <div
+      #host
+      class="chartgpu-host"
+      [class]="className() ?? ''"
+      [ngStyle]="style()"
+      (click)="emitClick($event)"
+    >
+      <div #canvasHost class="chartgpu-canvas-host"></div>
+      @if (initializationError(); as error) {
+        <div class="chartgpu-error" role="alert">{{ error.message }}</div>
+      }
+    </div>
+  `,
+		isInline: true,
+		styles: [":host{display:block;width:100%;height:100%}.chartgpu-host{position:relative;width:100%;height:100%}.chartgpu-canvas-host{position:absolute;inset:0}.chartgpu-error{position:absolute;inset:0;display:grid;place-items:center;padding:1rem;text-align:center}\n"],
+		dependencies: [{
+			kind: "directive",
+			type: NgStyle,
+			selector: "[ngStyle]",
+			inputs: ["ngStyle"]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: ChartGpuAngularComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "lib-chartgpu-angular",
+			standalone: true,
+			imports: [NgStyle],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: { class: "chartgpu-angular" },
+			template: `
+    <div
+      #host
+      class="chartgpu-host"
+      [class]="className() ?? ''"
+      [ngStyle]="style()"
+      (click)="emitClick($event)"
+    >
+      <div #canvasHost class="chartgpu-canvas-host"></div>
+      @if (initializationError(); as error) {
+        <div class="chartgpu-error" role="alert">{{ error.message }}</div>
+      }
+    </div>
+  `,
+			styles: [":host{display:block;width:100%;height:100%}.chartgpu-host{position:relative;width:100%;height:100%}.chartgpu-canvas-host{position:absolute;inset:0}.chartgpu-error{position:absolute;inset:0;display:grid;place-items:center;padding:1rem;text-align:center}\n"]
+		}]
+	}],
+	ctorParameters: () => [{ type: i0.DestroyRef }],
+	propDecorators: {
+		options: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "options",
+				required: true
+			}]
+		}],
+		gpuContext: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "gpuContext",
+				required: false
+			}]
+		}],
+		theme: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "theme",
+				required: false
+			}]
+		}],
+		className: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "className",
+				required: false
+			}]
+		}],
+		style: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "style",
+				required: false
+			}]
+		}],
+		ready: [{
+			type: i0.Output,
+			args: ["ready"]
+		}],
+		chartReady: [{
+			type: i0.Output,
+			args: ["chartReady"]
+		}],
+		chartDispose: [{
+			type: i0.Output,
+			args: ["chartDispose"]
+		}],
+		resize: [{
+			type: i0.Output,
+			args: ["resize"]
+		}],
+		click: [{
+			type: i0.Output,
+			args: ["click"]
+		}],
+		chartClick: [{
+			type: i0.Output,
+			args: ["chartClick"]
+		}],
+		mouseOver: [{
+			type: i0.Output,
+			args: ["mouseOver"]
+		}],
+		mouseOut: [{
+			type: i0.Output,
+			args: ["mouseOut"]
+		}],
+		crosshairMove: [{
+			type: i0.Output,
+			args: ["crosshairMove"]
+		}],
+		dataAppend: [{
+			type: i0.Output,
+			args: ["dataAppend"]
+		}],
+		zoomChange: [{
+			type: i0.Output,
+			args: ["zoomChange"]
+		}],
+		zoomRangeChange: [{
+			type: i0.Output,
+			args: ["zoomRangeChange"]
+		}],
+		deviceLost: [{
+			type: i0.Output,
+			args: ["deviceLost"]
+		}],
+		chartError: [{
+			type: i0.Output,
+			args: ["chartError"]
+		}],
+		host: [{
+			type: i0.ViewChild,
+			args: ["host", { isSignal: true }]
+		}],
+		canvasHost: [{
+			type: i0.ViewChild,
+			args: ["canvasHost", { isSignal: true }]
+		}]
+	}
+});
+var ChartgpuConnectChartsDirective = class ChartgpuConnectChartsDirective {
+	charts = input([], {
+		...ngDevMode ? { debugName: "charts" } : /* istanbul ignore next */ {},
+		alias: "libChartgpuConnectCharts"
+	});
+	syncOptions = input(...ngDevMode ? [void 0, { debugName: "syncOptions" }] : /* istanbul ignore next */ []);
+	connectionError = output();
+	ids = /* @__PURE__ */ new WeakMap();
+	nextId = 1;
+	signature;
+	constructor() {
+		effect((onCleanup) => {
+			const charts = this.charts();
+			const options = this.syncOptions();
+			const optionsSignature = options ? `crosshair=${options.syncCrosshair ?? ""},zoom=${options.syncZoom ?? ""}` : "";
+			const signature = `${charts.map((chart) => {
+				if (!chart) return "null";
+				let id = this.ids.get(chart);
+				if (id === void 0) {
+					id = this.nextId++;
+					this.ids.set(chart, id);
+				}
+				return `${id}:${chart.disposed ? 1 : 0}`;
+			}).join("|")}|${optionsSignature}`;
+			if (signature === this.signature) return;
+			this.signature = signature;
+			if (charts.length === 0 || charts.some((chart) => !chart || chart.disposed)) return;
+			const resolved = [];
+			for (const chart of charts) {
+				if (!chart || chart.disposed) return;
+				resolved.push(chart);
+			}
+			try {
+				onCleanup(connectCharts(resolved, options));
+			} catch (cause) {
+				this.connectionError.emit(cause instanceof Error ? cause : new Error(String(cause)));
+			}
+		});
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: ChartgpuConnectChartsDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.3",
+		type: ChartgpuConnectChartsDirective,
+		isStandalone: true,
+		selector: "[libChartgpuConnectCharts]",
+		inputs: {
+			charts: {
+				classPropertyName: "charts",
+				publicName: "libChartgpuConnectCharts",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			syncOptions: {
+				classPropertyName: "syncOptions",
+				publicName: "syncOptions",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { connectionError: "connectionError" },
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: ChartgpuConnectChartsDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[libChartgpuConnectCharts]",
+			standalone: true
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		charts: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "libChartgpuConnectCharts",
+				required: false
+			}]
+		}],
+		syncOptions: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "syncOptions",
+				required: false
+			}]
+		}],
+		connectionError: [{
+			type: i0.Output,
+			args: ["connectionError"]
+		}]
+	}
+});
+const INITIAL_STATE = {
+	adapter: null,
+	device: null,
+	pipelineCache: null,
+	error: null,
+	isReady: false
+};
+var ChartgpuGPUContextService = class ChartgpuGPUContextService {
+	state = signal(INITIAL_STATE, ...ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []);
+	context = computed(() => {
+		const state = this.state();
+		if (!state.adapter || !state.device || !state.pipelineCache) return null;
+		return {
+			adapter: state.adapter,
+			device: state.device,
+			pipelineCache: state.pipelineCache
+		};
+	}, ...ngDevMode ? [{ debugName: "context" }] : /* istanbul ignore next */ []);
+	initialization;
+	initialize() {
+		if (!this.initialization) this.initialization = this.createContext();
+		return this.initialization;
+	}
+	async createContext() {
+		try {
+			if (typeof navigator === "undefined" || !("gpu" in navigator)) throw new Error("WebGPU not supported in this browser");
+			const gpu = navigator.gpu;
+			if (!gpu) throw new Error("WebGPU not supported in this browser");
+			const adapter = await gpu.requestAdapter({ powerPreference: "high-performance" });
+			if (!adapter) {
+				const error = /* @__PURE__ */ new Error("WebGPU is not available. No compatible GPUAdapter was found.");
+				const state = {
+					...INITIAL_STATE,
+					error
+				};
+				this.state.set(state);
+				return state;
+			}
+			const device = await adapter.requestDevice();
+			const state = {
+				adapter,
+				device,
+				pipelineCache: createPipelineCache(device),
+				error: null,
+				isReady: true
+			};
+			this.state.set(state);
+			return state;
+		} catch (cause) {
+			const error = cause instanceof Error ? cause : new Error(String(cause));
+			const state = {
+				...INITIAL_STATE,
+				error
+			};
+			this.state.set(state);
+			return state;
+		}
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: ChartgpuGPUContextService,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Injectable
+	});
+	static ɵprov = i0.ɵɵngDeclareInjectable({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: ChartgpuGPUContextService,
+		providedIn: "root"
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: ChartgpuGPUContextService,
+	decorators: [{
+		type: Injectable,
+		args: [{ providedIn: "root" }]
+	}]
+});
+function provideChartGpuContext() {
+	return makeEnvironmentProviders([ChartgpuGPUContextService]);
+}
+export { ChartGpuAngularComponent, ChartgpuConnectChartsDirective, ChartgpuGPUContextService, provideChartGpuContext };
+
+//# sourceMappingURL=chartgpu-angular.mjs.map

package/fesm2022/chartgpu-angular.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"chartgpu-angular.mjs","names":[],"sources":["../../../projects/chartgpu-angular/src/lib/chartgpu-angular.component.ts","../../../projects/chartgpu-angular/src/lib/connect-charts.directive.ts","../../../projects/chartgpu-angular/src/lib/gpu-context.service.ts","../../../projects/chartgpu-angular/src/lib/gpu-context.provider.ts"],"sourcesContent":["import { NgStyle } from '@angular/common';\r\nimport {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  DestroyRef,\r\n  ElementRef,\r\n  OnDestroy,\r\n  afterNextRender,\r\n  effect,\r\n  input,\r\n  output,\r\n  signal,\r\n  untracked,\r\n  viewChild,\r\n} from '@angular/core';\r\nimport {\r\n  ChartGPU,\r\n  type ChartGPUCrosshairMovePayload,\r\n  type ChartGPUDeviceLostPayload,\r\n  type ChartGPUEventPayload,\r\n  type ChartGPUInstance,\r\n  type ChartGPUZoomRangeChangePayload,\r\n  type OHLCDataPoint,\r\n} from 'chartgpu';\r\nimport type {\r\n  ChartgpuAppendDataOptions,\r\n  ChartgpuCartesianSeriesData,\r\n  ChartgpuChartHandle,\r\n  ChartgpuClickEvent,\r\n  ChartgpuDataAppendEvent,\r\n  ChartgpuGPUContext,\r\n  ChartgpuOptions,\r\n  ChartgpuReadyEvent,\r\n  ChartgpuResizeEvent,\r\n  ChartgpuStyle,\r\n  ChartgpuZoomChangeEvent,\r\n  ChartgpuZoomRangeChangeEvent,\r\n} from './chartgpu-angular.types';\r\n\r\n@Component({\r\n  selector: 'lib-chartgpu-angular',\r\n  standalone: true,\r\n  imports: [NgStyle],\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  host: { class: 'chartgpu-angular' },\r\n  template: `\r\n    <div\r\n      #host\r\n      class=\"chartgpu-host\"\r\n      [class]=\"className() ?? ''\"\r\n      [ngStyle]=\"style()\"\r\n      (click)=\"emitClick($event)\"\r\n    >\r\n      <div #canvasHost class=\"chartgpu-canvas-host\"></div>\r\n      @if (initializationError(); as error) {\r\n        <div class=\"chartgpu-error\" role=\"alert\">{{ error.message }}</div>\r\n      }\r\n    </div>\r\n  `,\r\n  styles: [`\r\n    :host {\r\n      display: block;\r\n      width: 100%;\r\n      height: 100%;\r\n    }\r\n\r\n    .chartgpu-host {\r\n      position: relative;\r\n      width: 100%;\r\n      height: 100%;\r\n    }\r\n\r\n    .chartgpu-canvas-host {\r\n      position: absolute;\r\n      inset: 0;\r\n    }\r\n\r\n    .chartgpu-error {\r\n      position: absolute;\r\n      inset: 0;\r\n      display: grid;\r\n      place-items: center;\r\n      padding: 1rem;\r\n      text-align: center;\r\n    }\r\n  `],\r\n})\r\nexport class ChartGpuAngularComponent implements ChartgpuChartHandle, OnDestroy {\r\n  readonly options = input.required<ChartgpuOptions>();\r\n  readonly gpuContext = input<ChartgpuGPUContext | null>(null);\r\n  readonly theme = input<ChartgpuOptions['theme'] | undefined>(undefined);\r\n  readonly className = input<string | undefined>();\r\n  readonly style = input<ChartgpuStyle | undefined>();\r\n\r\n  readonly ready = output<ChartgpuReadyEvent>();\r\n  readonly chartReady = output<ChartGPUInstance>();\r\n  readonly chartDispose = output<void>();\r\n  readonly resize = output<ChartgpuResizeEvent>();\r\n  readonly click = output<ChartgpuClickEvent>();\r\n  readonly chartClick = output<ChartGPUEventPayload>();\r\n  readonly mouseOver = output<ChartGPUEventPayload>();\r\n  readonly mouseOut = output<ChartGPUEventPayload>();\r\n  readonly crosshairMove = output<ChartGPUCrosshairMovePayload>();\r\n  readonly dataAppend = output<ChartgpuDataAppendEvent>();\r\n  readonly zoomChange = output<ChartgpuZoomChangeEvent>();\r\n  readonly zoomRangeChange = output<ChartgpuZoomRangeChangeEvent>();\r\n  readonly deviceLost = output<ChartGPUDeviceLostPayload>();\r\n  readonly chartError = output<Error>();\r\n\r\n  readonly host = viewChild<ElementRef<HTMLDivElement>>('host');\r\n  readonly canvasHost = viewChild<ElementRef<HTMLDivElement>>('canvasHost');\r\n\r\n  private readonly chartInstance = signal<ChartGPUInstance | null>(null);\r\n  readonly initializationError = signal<Error | null>(null);\r\n  private chartContainer?: HTMLDivElement;\r\n  private createdWithOptions?: {\r\n    options: ChartgpuOptions;\r\n    theme: ChartgpuOptions['theme'] | undefined;\r\n  };\r\n  private resizeTimeout?: ReturnType<typeof setTimeout>;\r\n  private resizeObserver?: ResizeObserver;\r\n  private removeChartListeners?: () => void;\r\n  private destroying = false;\r\n\r\n  constructor(private readonly destroyRef: DestroyRef) {\r\n    this.destroyRef.onDestroy(() => {\r\n      this.resizeObserver?.disconnect();\r\n      if (this.resizeTimeout !== undefined) {\r\n        clearTimeout(this.resizeTimeout);\r\n      }\r\n      this.disposeChart();\r\n    });\r\n\r\n    afterNextRender(() => {\r\n      const container = this.host()?.nativeElement;\r\n      if (container) {\r\n        this.observeResize(container);\r\n      }\r\n    });\r\n\r\n    effect(onCleanup => {\r\n      const container = this.canvasHost()?.nativeElement;\r\n      const options = this.options();\r\n      const gpuContext = this.gpuContext();\r\n      const theme = this.theme();\r\n\r\n      this.initializationError.set(null);\r\n      if (!container) {\r\n        this.disposeChart();\r\n        return;\r\n      }\r\n      if (typeof navigator === 'undefined' || !('gpu' in navigator)) {\r\n        this.reportError(new Error('WebGPU not supported in this browser'));\r\n        return;\r\n      }\r\n\r\n      if (untracked(() => this.chartInstance()) && this.chartContainer === container) {\r\n        return;\r\n      }\r\n\r\n      let cancelled = false;\r\n      let createdInstance: ChartGPUInstance | undefined;\r\n      const initialOptions = this.getEffectiveOptions(options, theme);\r\n\r\n      void (gpuContext\r\n        ? ChartGPU.create(container, initialOptions, gpuContext)\r\n        : ChartGPU.create(container, initialOptions)\r\n      ).then(instance => {\r\n        createdInstance = instance;\r\n        if (cancelled) {\r\n          instance.dispose();\r\n          return;\r\n        }\r\n\r\n        try {\r\n          const latest = untracked(() => ({\r\n            options: this.options(),\r\n            theme: this.theme(),\r\n          }));\r\n          if (latest.options !== options || latest.theme !== theme) {\r\n            instance.setOption(this.getEffectiveOptions(latest.options, latest.theme));\r\n          }\r\n\r\n          this.createdWithOptions = latest;\r\n          this.chartContainer = container;\r\n          this.chartInstance.set(instance);\r\n          this.removeChartListeners = this.listenToChart(instance);\r\n          this.ready.emit({ container });\r\n          this.chartReady.emit(instance);\r\n\r\n          const range = instance.getZoomRange();\r\n          if (range) {\r\n            this.emitZoomRange(range);\r\n          }\r\n        } catch (cause: unknown) {\r\n          instance.dispose();\r\n          throw cause;\r\n        }\r\n      }).catch((cause: unknown) => {\r\n        if (cancelled) {\r\n          return;\r\n        }\r\n        if (createdInstance && this.chartInstance() !== createdInstance && !createdInstance.disposed) {\r\n          createdInstance.dispose();\r\n        }\r\n        this.reportError(cause);\r\n      });\r\n\r\n      onCleanup(() => {\r\n        cancelled = true;\r\n        if (this.chartContainer === container) {\r\n          this.disposeChart();\r\n        }\r\n      });\r\n    }, { allowSignalWrites: true });\r\n\r\n    effect(() => {\r\n      const options = this.options();\r\n      const theme = this.theme();\r\n      const instance = this.chartInstance();\r\n      if (!instance || instance.disposed) {\r\n        return;\r\n      }\r\n\r\n      if (this.createdWithOptions?.options === options && this.createdWithOptions.theme === theme) {\r\n        this.createdWithOptions = undefined;\r\n        return;\r\n      }\r\n\r\n      try {\r\n        instance.setOption(this.getEffectiveOptions(options, theme));\r\n      } catch (cause: unknown) {\r\n        this.reportError(cause);\r\n      }\r\n    }, { allowSignalWrites: true });\r\n  }\r\n\r\n  protected emitClick(event: MouseEvent): void {\r\n    this.click.emit({ x: event.offsetX, y: event.offsetY });\r\n  }\r\n\r\n  ngOnDestroy(): void {\r\n    this.destroying = true;\r\n  }\r\n\r\n  getChart(): ChartGPUInstance | null {\r\n    const instance = this.chartInstance();\r\n    return instance && !instance.disposed ? instance : null;\r\n  }\r\n\r\n  getContainer(): HTMLDivElement | null {\r\n    return this.canvasHost()?.nativeElement ?? null;\r\n  }\r\n\r\n  appendData(\r\n    seriesIndex: number,\r\n    newPoints: ChartgpuCartesianSeriesData | OHLCDataPoint[],\r\n    options?: ChartgpuAppendDataOptions,\r\n  ): void {\r\n    this.getChart()?.appendData(seriesIndex, newPoints, options);\r\n  }\r\n\r\n  renderFrame(): boolean {\r\n    return this.getChart()?.renderFrame() ?? false;\r\n  }\r\n\r\n  needsRender(): boolean {\r\n    return this.getChart()?.needsRender() ?? false;\r\n  }\r\n\r\n  getRenderMode(): 'auto' | 'external' {\r\n    return this.getChart()?.getRenderMode() ?? 'auto';\r\n  }\r\n\r\n  setRenderMode(mode: 'auto' | 'external'): void {\r\n    this.getChart()?.setRenderMode(mode);\r\n  }\r\n\r\n  setOption(options: ChartgpuOptions): void {\r\n    this.getChart()?.setOption(options);\r\n  }\r\n\r\n  setZoomRange(start: number, end: number, source?: unknown): void {\r\n    this.getChart()?.setZoomRange(start, end, source);\r\n  }\r\n\r\n  setInteractionX(x: number | null, source?: unknown): void {\r\n    this.getChart()?.setInteractionX(x, source);\r\n  }\r\n\r\n  getInteractionX(): number | null {\r\n    return this.getChart()?.getInteractionX() ?? null;\r\n  }\r\n\r\n  hitTest(event: PointerEvent | MouseEvent) {\r\n    return this.getChart()?.hitTest(event) ?? null;\r\n  }\r\n\r\n  private getEffectiveOptions(\r\n    options: ChartgpuOptions,\r\n    theme: ChartgpuOptions['theme'] | undefined,\r\n  ): ChartgpuOptions {\r\n    return theme !== undefined ? { ...options, theme } : options;\r\n  }\r\n\r\n  private listenToChart(instance: ChartGPUInstance): () => void {\r\n    const click = (payload: ChartGPUEventPayload) => this.chartClick.emit(payload);\r\n    const mouseOver = (payload: ChartGPUEventPayload) => this.mouseOver.emit(payload);\r\n    const mouseOut = (payload: ChartGPUEventPayload) => this.mouseOut.emit(payload);\r\n    const crosshairMove = (payload: ChartGPUCrosshairMovePayload) => this.crosshairMove.emit(payload);\r\n    const dataAppend = (payload: ChartgpuDataAppendEvent) => this.dataAppend.emit(payload);\r\n    const zoomChange = (payload: ChartGPUZoomRangeChangePayload) => this.emitZoomRange(payload);\r\n    const deviceLost = (payload: ChartGPUDeviceLostPayload) => this.deviceLost.emit(payload);\r\n\r\n    instance.on('click', click);\r\n    instance.on('mouseover', mouseOver);\r\n    instance.on('mouseout', mouseOut);\r\n    instance.on('crosshairMove', crosshairMove);\r\n    instance.on('dataAppend', dataAppend);\r\n    instance.on('zoomRangeChange', zoomChange);\r\n    instance.on('deviceLost', deviceLost);\r\n\r\n    return () => {\r\n      if (instance.disposed) {\r\n        return;\r\n      }\r\n      instance.off('click', click);\r\n      instance.off('mouseover', mouseOver);\r\n      instance.off('mouseout', mouseOut);\r\n      instance.off('crosshairMove', crosshairMove);\r\n      instance.off('dataAppend', dataAppend);\r\n      instance.off('zoomRangeChange', zoomChange);\r\n      instance.off('deviceLost', deviceLost);\r\n    };\r\n  }\r\n\r\n  private emitZoomRange(range: { start: number; end: number }): void {\r\n    this.zoomChange.emit({ range: { start: range.start, end: range.end } });\r\n    this.zoomRangeChange.emit({ start: range.start, end: range.end });\r\n  }\r\n\r\n  private observeResize(container: HTMLDivElement): void {\r\n    if (typeof ResizeObserver === 'undefined') {\r\n      return;\r\n    }\r\n\r\n    this.resizeObserver = new ResizeObserver(entries => {\r\n      const entry = entries[0];\r\n      if (!entry) {\r\n        return;\r\n      }\r\n      const { width, height } = entry.contentRect;\r\n      this.resize.emit({ width, height, container });\r\n      if (this.resizeTimeout !== undefined) {\r\n        clearTimeout(this.resizeTimeout);\r\n      }\r\n      this.resizeTimeout = setTimeout(() => {\r\n        this.chartInstance()?.resize();\r\n        this.resizeTimeout = undefined;\r\n      }, 100);\r\n    });\r\n    this.resizeObserver.observe(container);\r\n  }\r\n\r\n  private reportError(cause: unknown): void {\r\n    const error = cause instanceof Error ? cause : new Error(String(cause));\r\n    this.initializationError.set(error);\r\n    this.chartError.emit(error);\r\n  }\r\n\r\n  private disposeChart(): void {\r\n    const instance = this.chartInstance();\r\n    this.removeChartListeners?.();\r\n    this.removeChartListeners = undefined;\r\n    if (instance && !instance.disposed) {\r\n      instance.dispose();\r\n      if (!this.destroying) {\r\n        this.chartDispose.emit();\r\n      }\r\n    }\r\n    this.chartInstance.set(null);\r\n    this.chartContainer = undefined;\r\n    this.createdWithOptions = undefined;\r\n  }\r\n}\r\n","import { Directive, effect, input, output } from '@angular/core';\r\nimport { connectCharts } from 'chartgpu';\r\nimport type { ChartGPUInstance, ChartSyncOptions } from 'chartgpu';\r\n\r\n@Directive({\r\n  selector: '[libChartgpuConnectCharts]',\r\n  standalone: true,\r\n})\r\nexport class ChartgpuConnectChartsDirective {\r\n  readonly charts = input<ReadonlyArray<ChartGPUInstance | null | undefined>>([], {\r\n    alias: 'libChartgpuConnectCharts',\r\n  });\r\n  readonly syncOptions = input<ChartSyncOptions | undefined>();\r\n  readonly connectionError = output<Error>();\r\n\r\n  private readonly ids = new WeakMap<object, number>();\r\n  private nextId = 1;\r\n  private signature: string | undefined;\r\n\r\n  constructor() {\r\n    effect(onCleanup => {\r\n      const charts = this.charts();\r\n      const options = this.syncOptions();\r\n      const optionsSignature = options\r\n        ? `crosshair=${options.syncCrosshair ?? ''},zoom=${options.syncZoom ?? ''}`\r\n        : '';\r\n      const signature = `${charts.map(chart => {\r\n        if (!chart) {\r\n          return 'null';\r\n        }\r\n\r\n        let id = this.ids.get(chart);\r\n        if (id === undefined) {\r\n          id = this.nextId++;\r\n          this.ids.set(chart, id);\r\n        }\r\n        return `${id}:${chart.disposed ? 1 : 0}`;\r\n      }).join('|')}|${optionsSignature}`;\r\n\r\n      if (signature === this.signature) {\r\n        return;\r\n      }\r\n      this.signature = signature;\r\n\r\n      if (charts.length === 0 || charts.some(chart => !chart || chart.disposed)) {\r\n        return;\r\n      }\r\n\r\n      const resolved: ChartGPUInstance[] = [];\r\n      for (const chart of charts) {\r\n        if (!chart || chart.disposed) {\r\n          return;\r\n        }\r\n        resolved.push(chart);\r\n      }\r\n\r\n      try {\r\n        const disconnect = connectCharts(resolved, options);\r\n        onCleanup(disconnect);\r\n      } catch (cause: unknown) {\r\n        this.connectionError.emit(cause instanceof Error ? cause : new Error(String(cause)));\r\n      }\r\n    });\r\n  }\r\n}\r\n","import { Injectable, computed, signal } from '@angular/core';\nimport { createPipelineCache } from 'chartgpu';\nimport type { ChartGPUCreateContext } from 'chartgpu';\nimport type { ChartgpuGPUContextState } from './chartgpu-angular.types';\n\nconst INITIAL_STATE: ChartgpuGPUContextState = {\n  adapter: null,\n  device: null,\n  pipelineCache: null,\n  error: null,\n  isReady: false,\n};\n\n/**\n * Creates one shared WebGPU context and pipeline cache for charts in a dashboard.\n * The device is intentionally not destroyed with the service so charts can share it\n * for the lifetime of the application.\n */\n@Injectable({ providedIn: 'root' })\nexport class ChartgpuGPUContextService {\n  readonly state = signal<ChartgpuGPUContextState>(INITIAL_STATE);\n  readonly context = computed<ChartGPUCreateContext | null>(() => {\n    const state = this.state();\n    if (!state.adapter || !state.device || !state.pipelineCache) {\n      return null;\n    }\n\n    return {\n      adapter: state.adapter,\n      device: state.device,\n      pipelineCache: state.pipelineCache,\n    };\n  });\n\n  private initialization?: Promise<ChartgpuGPUContextState>;\n\n  initialize(): Promise<ChartgpuGPUContextState> {\n    if (!this.initialization) {\n      this.initialization = this.createContext();\n    }\n    return this.initialization;\n  }\n\n  private async createContext(): Promise<ChartgpuGPUContextState> {\n    try {\n      if (typeof navigator === 'undefined' || !('gpu' in navigator)) {\n        throw new Error('WebGPU not supported in this browser');\n      }\n\n      const gpu = (navigator as Navigator & {\n        gpu?: {\n          requestAdapter(options: {\n            powerPreference: 'high-performance';\n          }): Promise<ChartGPUCreateContext['adapter'] | null>;\n        };\n      }).gpu;\n      if (!gpu) {\n        throw new Error('WebGPU not supported in this browser');\n      }\n\n      const adapter = await gpu.requestAdapter({ powerPreference: 'high-performance' });\n      if (!adapter) {\n        const error = new Error('WebGPU is not available. No compatible GPUAdapter was found.');\n        const state: ChartgpuGPUContextState = { ...INITIAL_STATE, error };\n        this.state.set(state);\n        return state;\n      }\n\n      const device = await adapter.requestDevice();\n      const pipelineCache = createPipelineCache(device);\n      const state: ChartgpuGPUContextState = {\n        adapter,\n        device,\n        pipelineCache,\n        error: null,\n        isReady: true,\n      };\n      this.state.set(state);\n      return state;\n    } catch (cause: unknown) {\n      const error = cause instanceof Error ? cause : new Error(String(cause));\n      const state: ChartgpuGPUContextState = { ...INITIAL_STATE, error };\n      this.state.set(state);\n      return state;\n    }\n  }\n}\n","import { makeEnvironmentProviders } from '@angular/core';\nimport { ChartgpuGPUContextService } from './gpu-context.service';\n\nexport function provideChartGpuContext() {\n  return makeEnvironmentProviders([ChartgpuGPUContextService]);\n}"],"mappings":";;;;AAuFA,IAAa,2BAAb,MAAa,yBAAwB;CAqCN;CApCpB,UAAU,MAAM,SAA2B,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAC3C,aAAa,MAAiC,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,aAAA,CAAA,+BAAA,CAAA,CAAA;CACnD,QAAQ,MAA4C,QAAU,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAC9D,YAAY,MAA2B,GAAA,YAAA,CAAA,QAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CACvC,QAAQ,MAAkC,GAAA,YAAA,CAAA,QAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAE1C,QAAQ,OAAM;CACd,aAAa,OAAM;CACnB,eAAe,OAAM;CACrB,SAAS,OAAM;CACf,QAAQ,OAAM;CACd,aAAa,OAAM;CACnB,YAAY,OAAM;CAClB,WAAW,OAAM;CACjB,gBAAgB,OAAM;CACtB,aAAa,OAAM;CACnB,aAAa,OAAM;CACnB,kBAAkB,OAAM;CACxB,aAAa,OAAM;CACnB,aAAa,OAAM;CAEnB,OAAO,UAAsC,QAAO,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CACpD,aAAa,UAAsC,cAAa,GAAA,YAAA,CAAA,EAAA,WAAA,aAAA,CAAA,+BAAA,CAAA,CAAA;CAExD,gBAAgB,OAAgC,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,gBAAA,CAAA,+BAAA,CAAA,CAAA;CAC7D,sBAAsB,OAAqB,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,sBAAA,CAAA,+BAAA,CAAA,CAAA;CACjD;CACA;CAIA;CACA;CACA;CACA,aAAa;CAErB,YAA6B,YAAsB;EAAtB,KAAA,aAAA;EAC3B,KAAK,WAAW,gBAAe;GAC7B,KAAK,gBAAgB,WAAU;GAC/B,IAAI,KAAK,kBAAkB,QACzB,aAAa,KAAK,aAAa;GAEjC,KAAK,aAAY;EACnB,CAAC;EAED,sBAAqB;GACnB,MAAM,YAAY,KAAK,KAAI,CAAE,EAAE;GAC/B,IAAI,WACF,KAAK,cAAc,SAAS;EAEhC,CAAC;EAED,QAAO,cAAY;GACjB,MAAM,YAAY,KAAK,WAAU,CAAE,EAAE;GACrC,MAAM,UAAU,KAAK,QAAO;GAC5B,MAAM,aAAa,KAAK,WAAU;GAClC,MAAM,QAAQ,KAAK,MAAK;GAExB,KAAK,oBAAoB,IAAI,IAAI;GACjC,IAAI,CAAC,WAAW;IACd,KAAK,aAAY;IACjB;GACF;GACA,IAAI,OAAO,cAAc,eAAe,EAAE,SAAS,YAAY;IAC7D,KAAK,4BAAY,IAAI,MAAM,sCAAsC,CAAC;IAClE;GACF;GAEA,IAAI,gBAAgB,KAAK,cAAa,CAAE,KAAK,KAAK,mBAAmB,WACnE;GAGF,IAAI,YAAY;GAChB,IAAI;GACJ,MAAM,iBAAiB,KAAK,oBAAoB,SAAS,KAAK;GAE9D,CAAM,aACF,SAAS,OAAO,WAAW,gBAAgB,UAAU,IACrD,SAAS,OAAO,WAAW,cAAc,EAAA,CAC3C,MAAK,aAAW;IAChB,kBAAkB;IAClB,IAAI,WAAW;KACb,SAAS,QAAO;KAChB;IACF;IAEA,IAAI;KACF,MAAM,SAAS,iBAAiB;MAC9B,SAAS,KAAK,QAAO;MACrB,OAAO,KAAK,MAAK;KAClB,EAAC;KACF,IAAI,OAAO,YAAY,WAAW,OAAO,UAAU,OACjD,SAAS,UAAU,KAAK,oBAAoB,OAAO,SAAS,OAAO,KAAK,CAAC;KAG3E,KAAK,qBAAqB;KAC1B,KAAK,iBAAiB;KACtB,KAAK,cAAc,IAAI,QAAQ;KAC/B,KAAK,uBAAuB,KAAK,cAAc,QAAQ;KACvD,KAAK,MAAM,KAAK,EAAE,UAAS,CAAE;KAC7B,KAAK,WAAW,KAAK,QAAQ;KAE7B,MAAM,QAAQ,SAAS,aAAY;KACnC,IAAI,OACF,KAAK,cAAc,KAAK;IAE5B,SAAS,OAAgB;KACvB,SAAS,QAAO;KAChB,MAAM;IACR;GACF,CAAC,CAAC,CAAC,OAAO,UAAkB;IAC1B,IAAI,WACF;IAEF,IAAI,mBAAmB,KAAK,cAAa,MAAO,mBAAmB,CAAC,gBAAgB,UAClF,gBAAgB,QAAO;IAEzB,KAAK,YAAY,KAAK;GACxB,CAAC;GAED,gBAAe;IACb,YAAY;IACZ,IAAI,KAAK,mBAAmB,WAC1B,KAAK,aAAY;GAErB,CAAC;EACH,GAAG,EAAE,mBAAmB,KAAI,CAAE;EAE9B,aAAY;GACV,MAAM,UAAU,KAAK,QAAO;GAC5B,MAAM,QAAQ,KAAK,MAAK;GACxB,MAAM,WAAW,KAAK,cAAa;GACnC,IAAI,CAAC,YAAY,SAAS,UACxB;GAGF,IAAI,KAAK,oBAAoB,YAAY,WAAW,KAAK,mBAAmB,UAAU,OAAO;IAC3F,KAAK,qBAAqB;IAC1B;GACF;GAEA,IAAI;IACF,SAAS,UAAU,KAAK,oBAAoB,SAAS,KAAK,CAAC;GAC7D,SAAS,OAAgB;IACvB,KAAK,YAAY,KAAK;GACxB;EACF,GAAG,EAAE,mBAAmB,KAAI,CAAE;CAChC;CAEU,UAAU,OAAiB;EACnC,KAAK,MAAM,KAAK;GAAE,GAAG,MAAM;GAAS,GAAG,MAAM;EAAO,CAAE;CACxD;CAEA,cAAW;EACT,KAAK,aAAa;CACpB;CAEA,WAAQ;EACN,MAAM,WAAW,KAAK,cAAa;EACnC,OAAO,YAAY,CAAC,SAAS,WAAW,WAAW;CACrD;CAEA,eAAY;EACV,OAAO,KAAK,WAAU,CAAE,EAAE,iBAAiB;CAC7C;CAEA,WACE,aACA,WACA,SAAmC;EAEnC,KAAK,SAAQ,CAAE,EAAE,WAAW,aAAa,WAAW,OAAO;CAC7D;CAEA,cAAW;EACT,OAAO,KAAK,SAAQ,CAAE,EAAE,YAAW,KAAM;CAC3C;CAEA,cAAW;EACT,OAAO,KAAK,SAAQ,CAAE,EAAE,YAAW,KAAM;CAC3C;CAEA,gBAAa;EACX,OAAO,KAAK,SAAQ,CAAE,EAAE,cAAa,KAAM;CAC7C;CAEA,cAAc,MAAyB;EACrC,KAAK,SAAQ,CAAE,EAAE,cAAc,IAAI;CACrC;CAEA,UAAU,SAAwB;EAChC,KAAK,SAAQ,CAAE,EAAE,UAAU,OAAO;CACpC;CAEA,aAAa,OAAe,KAAa,QAAgB;EACvD,KAAK,SAAQ,CAAE,EAAE,aAAa,OAAO,KAAK,MAAM;CAClD;CAEA,gBAAgB,GAAkB,QAAgB;EAChD,KAAK,SAAQ,CAAE,EAAE,gBAAgB,GAAG,MAAM;CAC5C;CAEA,kBAAe;EACb,OAAO,KAAK,SAAQ,CAAE,EAAE,gBAAe,KAAM;CAC/C;CAEA,QAAQ,OAAgC;EACtC,OAAO,KAAK,SAAQ,CAAE,EAAE,QAAQ,KAAK,KAAK;CAC5C;CAEQ,oBACN,SACA,OAA2C;EAE3C,OAAO,UAAU,SAAY;GAAE,GAAG;GAAS;EAAK,IAAK;CACvD;CAEQ,cAAc,UAA0B;EAC9C,MAAM,SAAS,YAAkC,KAAK,WAAW,KAAK,OAAO;EAC7E,MAAM,aAAa,YAAkC,KAAK,UAAU,KAAK,OAAO;EAChF,MAAM,YAAY,YAAkC,KAAK,SAAS,KAAK,OAAO;EAC9E,MAAM,iBAAiB,YAA0C,KAAK,cAAc,KAAK,OAAO;EAChG,MAAM,cAAc,YAAqC,KAAK,WAAW,KAAK,OAAO;EACrF,MAAM,cAAc,YAA4C,KAAK,cAAc,OAAO;EAC1F,MAAM,cAAc,YAAuC,KAAK,WAAW,KAAK,OAAO;EAEvF,SAAS,GAAG,SAAS,KAAK;EAC1B,SAAS,GAAG,aAAa,SAAS;EAClC,SAAS,GAAG,YAAY,QAAQ;EAChC,SAAS,GAAG,iBAAiB,aAAa;EAC1C,SAAS,GAAG,cAAc,UAAU;EACpC,SAAS,GAAG,mBAAmB,UAAU;EACzC,SAAS,GAAG,cAAc,UAAU;EAEpC,aAAY;GACV,IAAI,SAAS,UACX;GAEF,SAAS,IAAI,SAAS,KAAK;GAC3B,SAAS,IAAI,aAAa,SAAS;GACnC,SAAS,IAAI,YAAY,QAAQ;GACjC,SAAS,IAAI,iBAAiB,aAAa;GAC3C,SAAS,IAAI,cAAc,UAAU;GACrC,SAAS,IAAI,mBAAmB,UAAU;GAC1C,SAAS,IAAI,cAAc,UAAU;EACvC;CACF;CAEQ,cAAc,OAAqC;EACzD,KAAK,WAAW,KAAK,EAAE,OAAO;GAAE,OAAO,MAAM;GAAO,KAAK,MAAM;EAAG,EAAE,CAAE;EACtE,KAAK,gBAAgB,KAAK;GAAE,OAAO,MAAM;GAAO,KAAK,MAAM;EAAG,CAAE;CAClE;CAEQ,cAAc,WAAyB;EAC7C,IAAI,OAAO,mBAAmB,aAC5B;EAGF,KAAK,iBAAiB,IAAI,gBAAe,YAAU;GACjD,MAAM,QAAQ,QAAQ;GACtB,IAAI,CAAC,OACH;GAEF,MAAM,EAAE,OAAO,WAAW,MAAM;GAChC,KAAK,OAAO,KAAK;IAAE;IAAO;IAAQ;GAAS,CAAE;GAC7C,IAAI,KAAK,kBAAkB,QACzB,aAAa,KAAK,aAAa;GAEjC,KAAK,gBAAgB,iBAAgB;IACnC,KAAK,cAAa,CAAE,EAAE,OAAM;IAC5B,KAAK,gBAAgB;GACvB,GAAG,GAAG;EACR,CAAC;EACD,KAAK,eAAe,QAAQ,SAAS;CACvC;CAEQ,YAAY,OAAc;EAChC,MAAM,QAAQ,iBAAiB,QAAQ,QAAQ,IAAI,MAAM,OAAO,KAAK,CAAC;EACtE,KAAK,oBAAoB,IAAI,KAAK;EAClC,KAAK,WAAW,KAAK,KAAK;CAC5B;CAEQ,eAAY;EAClB,MAAM,WAAW,KAAK,cAAa;EACnC,KAAK,uBAAsB;EAC3B,KAAK,uBAAuB;EAC5B,IAAI,YAAY,CAAC,SAAS,UAAU;GAClC,SAAS,QAAO;GAChB,IAAI,CAAC,KAAK,YACR,KAAK,aAAa,KAAI;EAE1B;EACA,KAAK,cAAc,IAAI,IAAI;EAC3B,KAAK,iBAAiB;EACtB,KAAK,qBAAqB;CAC5B;CAxSW,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAwB,MAAA,CAAA,EAAA,OAAA,GAAA,WAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAxB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAwB,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,SAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,YAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,OAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,WAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,OAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,SAAA;GAAA,OAAA;GAAA,YAAA;GAAA,cAAA;GAAA,QAAA;GAAA,OAAA;GAAA,YAAA;GAAA,WAAA;GAAA,UAAA;GAAA,eAAA;GAAA,YAAA;GAAA,YAAA;GAAA,iBAAA;GAAA,YAAA;GAAA,YAAA;EAAA;EAAA,MAAA,EAAA,gBAAA,mBAAA;EAAA,aAAA,CAAA;GAAA,cAAA;GAAA,OAAA;GAAA,WAAA,CAAA,MAAA;GAAA,aAAA;GAAA,UAAA;EAAA,GAAA;GAAA,cAAA;GAAA,OAAA;GAAA,WAAA,CAAA,YAAA;GAAA,aAAA;GAAA,UAAA;EAAA,CAAA;EAAA,UAAA;EAAA,UA1CzB;;;;;;;;;;;;;;EAaT,UAAA;EAAA,QAAA,CAAA,gQAAA;EAAA,cAAA,CAAA;GAAA,MAAA;GAAA,MAhBS;GAAO,UAAA;GAAA,QAAA,CAAA,SAAA;EAAA,CAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AA6CN,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAwB,YAAA,CAAA;EAhDpC,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAsB,YACpB;GAAI,SACP,CAAC,OAAO;GAAC,iBACD,wBAAwB;GAAM,MACzC,EAAE,OAAO,mBAAkB;GAAE,UACzB;;;;;;;;;;;;;;GAaT,QAAA,CAAA,gQAAA;EAAA,CAAA;CAmDqD,CAAA;CAAA,sBAAA,CAAA,EAAA,MAAA,GAAA,WAAA,CAAA;CAAA,gBAAA;EAAA,SAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA;IAAA,UAAA;IAAA,OAAA;IAAA,UAAA;GAAA,CAAA;EAAA,CAAA;EAAA,YAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA;IAAA,UAAA;IAAA,OAAA;IAAA,UAAA;GAAA,CAAA;EAAA,CAAA;EAAA,OAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA;IAAA,UAAA;IAAA,OAAA;IAAA,UAAA;GAAA,CAAA;EAAA,CAAA;EAAA,WAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA;IAAA,UAAA;IAAA,OAAA;IAAA,UAAA;GAAA,CAAA;EAAA,CAAA;EAAA,OAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA;IAAA,UAAA;IAAA,OAAA;IAAA,UAAA;GAAA,CAAA;EAAA,CAAA;EAAA,OAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA,OAAA;EAAA,CAAA;EAAA,YAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA,YAAA;EAAA,CAAA;EAAA,cAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA,cAAA;EAAA,CAAA;EAAA,QAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA,QAAA;EAAA,CAAA;EAAA,OAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA,OAAA;EAAA,CAAA;EAAA,YAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA,YAAA;EAAA,CAAA;EAAA,WAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA,WAAA;EAAA,CAAA;EAAA,UAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA,UAAA;EAAA,CAAA;EAAA,eAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA,eAAA;EAAA,CAAA;EAAA,YAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA,YAAA;EAAA,CAAA;EAAA,YAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA,YAAA;EAAA,CAAA;EAAA,iBAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA,iBAAA;EAAA,CAAA;EAAA,YAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA,YAAA;EAAA,CAAA;EAAA,YAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA,YAAA;EAAA,CAAA;EAAA,MAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA,QAAM,EAAA,UAAA,KAAA,CAAA;EAAA,CAAA;EAAA,YAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CACA,cAAY,EAAA,UAAA,KAAA,CAAA;EAAA,CAAA;CAAA;AAAA,CAAA;ACtG1E,IAAa,iCAAb,MAAa,+BAA8B;CAChC,SAAS,MAA0D,CAAA,GAAE;EAAA,GAAA,YAAA,EAAA,WAAA,SAAA,+BAAA,CAAA;EAC5E,OAAO;CAA0B,CAAA;CAE1B,cAAc,MAAqC,GAAA,YAAA,CAAA,QAAA,EAAA,WAAA,cAAA,CAAA,+BAAA,CAAA,CAAA;CACnD,kBAAkB,OAAM;CAEhB,sBAAM,IAAI,QAAO;CAC1B,SAAS;CACT;CAER,cAAA;EACE,QAAO,cAAY;GACjB,MAAM,SAAS,KAAK,OAAM;GAC1B,MAAM,UAAU,KAAK,YAAW;GAChC,MAAM,mBAAmB,UACrB,aAAa,QAAQ,iBAAiB,GAAE,QAAS,QAAQ,YAAY,OACrE;GACJ,MAAM,YAAY,GAAG,OAAO,KAAI,UAAQ;IACtC,IAAI,CAAC,OACH,OAAO;IAGT,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK;IAC3B,IAAI,OAAO,QAAW;KACpB,KAAK,KAAK;KACV,KAAK,IAAI,IAAI,OAAO,EAAE;IACxB;IACA,OAAO,GAAG,GAAE,GAAI,MAAM,WAAW,IAAI;GACvC,CAAC,CAAC,CAAC,KAAK,GAAG,EAAC,GAAI;GAEhB,IAAI,cAAc,KAAK,WACrB;GAEF,KAAK,YAAY;GAEjB,IAAI,OAAO,WAAW,KAAK,OAAO,MAAK,UAAS,CAAC,SAAS,MAAM,QAAQ,GACtE;GAGF,MAAM,WAA+B,CAAA;GACrC,KAAK,MAAM,SAAS,QAAQ;IAC1B,IAAI,CAAC,SAAS,MAAM,UAClB;IAEF,SAAS,KAAK,KAAK;GACrB;GAEA,IAAI;IAEF,UADmB,cAAc,UAAU,OACjC,CAAU;GACtB,SAAS,OAAgB;IACvB,KAAK,gBAAgB,KAAK,iBAAiB,QAAQ,QAAQ,IAAI,MAAM,OAAO,KAAK,CAAC,CAAC;GACrF;EACF,CAAC;CACH;CAvDW,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAA8B,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAA9B,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAA8B,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,QAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,aAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,SAAA,EAAA,iBAAA,kBAAA;EAAA,UAAA;CAAA,CAAA;;AAA9B,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAA8B,YAAA,CAAA;EAJ1C,MAAA;EAAU,MAAA,CAAA;GACT,UAAU;GACV,YAAY;EACb,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;ACFD,MAAM,gBAAyC;CAC7C,SAAS;CACT,QAAQ;CACR,eAAe;CACf,OAAO;CACP,SAAS;AACV;AAQD,IAAa,4BAAb,MAAa,0BAAyB;CAC3B,QAAQ,OAAgC,eAAc,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CACtD,UAAU,eAA4C;EAC7D,MAAM,QAAQ,KAAK,MAAK;EACxB,IAAI,CAAC,MAAM,WAAW,CAAC,MAAM,UAAU,CAAC,MAAM,eAC5C,OAAO;EAGT,OAAO;GACL,SAAS,MAAM;GACf,QAAQ,MAAM;GACd,eAAe,MAAM;EACtB;CACH,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAEM;CAER,aAAU;EACR,IAAI,CAAC,KAAK,gBACR,KAAK,iBAAiB,KAAK,cAAa;EAE1C,OAAO,KAAK;CACd;CAEQ,MAAM,gBAAa;EACzB,IAAI;GACF,IAAI,OAAO,cAAc,eAAe,EAAE,SAAS,YACjD,MAAM,IAAI,MAAM,sCAAsC;GAGxD,MAAM,MAAO,UAMV;GACH,IAAI,CAAC,KACH,MAAM,IAAI,MAAM,sCAAsC;GAGxD,MAAM,UAAU,MAAM,IAAI,eAAe,EAAE,iBAAiB,mBAAkB,CAAE;GAChF,IAAI,CAAC,SAAS;IACZ,MAAM,wBAAQ,IAAI,MAAM,8DAA8D;IACtF,MAAM,QAAiC;KAAE,GAAG;KAAe;IAAK;IAChE,KAAK,MAAM,IAAI,KAAK;IACpB,OAAO;GACT;GAEA,MAAM,SAAS,MAAM,QAAQ,cAAa;GAE1C,MAAM,QAAiC;IACrC;IACA;IACA,eAJoB,oBAAoB,MAIxC;IACA,OAAO;IACP,SAAS;GACV;GACD,KAAK,MAAM,IAAI,KAAK;GACpB,OAAO;EACT,SAAS,OAAgB;GACvB,MAAM,QAAQ,iBAAiB,QAAQ,QAAQ,IAAI,MAAM,OAAO,KAAK,CAAC;GACtE,MAAM,QAAiC;IAAE,GAAG;IAAe;GAAK;GAChE,KAAK,MAAM,IAAI,KAAK;GACpB,OAAO;EACT;CACF;CAlEW,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAyB,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAzB,OAAA,QAAA,GAAA,sBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAyB,YADZ;CAAM,CAAA;;AACnB,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAyB,YAAA,CAAA;EADrC,MAAA;EAAW,MAAA,CAAA,EAAE,YAAY,OAAM,CAAE;;;ACflC,SAAgB,yBAAsB;CACpC,OAAO,yBAAyB,CAAC,yBAAyB,CAAC;AAC7D"}

package/package.json

@@ -1,6 +1,25 @@
 {
   "name": "chartgpu-angular",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "22.0.0",
+  "peerDependencies": {
+    "@angular/common": "^22.0.0",
+    "@angular/core": "^22.0.0",
+    "chartgpu": "^0.4.0"
+  },
+  "module": "fesm2022/chartgpu-angular.mjs",
+  "typings": "types/chartgpu-angular.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/chartgpu-angular.d.ts",
+      "default": "./fesm2022/chartgpu-angular.mjs"
+    }
+  },
+  "sideEffects": false,
+  "type": "module",
+  "dependencies": {
+    "tslib": "^2.3.0"
+  }
 }

package/types/chartgpu-angular.d.ts

@@ -0,0 +1,267 @@
+import * as i0 from "@angular/core";
+import { DestroyRef, ElementRef, OnDestroy } from "@angular/core";
+import { AnimationConfig, AnnotationConfig, AxisConfig, ChartGPUCreateContext, ChartGPUCrosshairMovePayload, ChartGPUDeviceLostPayload, ChartGPUEventPayload, ChartGPUHitTestResult, ChartGPUInstance, ChartGPUInstance as ChartGPUInstance$1, ChartGPUOptions, ChartSyncOptions, DataPoint, DataZoomConfig, OHLCDataPoint, OHLCDataPoint as OHLCDataPoint$1, PipelineCache, RenderMode, SeriesConfig, SeriesType, ThemeConfig, TooltipConfig } from "chartgpu";
+export type ChartgpuOptions = ChartGPUOptions;
+export type ChartgpuSeriesType = SeriesType;
+export type ChartgpuSeriesData = Extract<SeriesConfig, {
+  type: 'line';
+}>['data'];
+export type ChartgpuSeriesOptions = SeriesConfig;
+export type ChartgpuAxisOptions = AxisConfig;
+export type ChartgpuZoomOptions = DataZoomConfig;
+export type ChartgpuTooltipOptions = TooltipConfig;
+export type ChartgpuAnimationOptions = AnimationConfig | boolean;
+export type ChartgpuThemeOptions = ThemeConfig | 'light' | 'dark';
+export type ChartgpuAnnotationOptions = AnnotationConfig;
+export type ChartgpuThreeDOptions = Pick<ChartGPUOptions, 'coordinateSystem' | 'camera' | 'interaction3d' | 'axes3d'>;
+export type ChartgpuStreamingOptions = Pick<ChartGPUOptions, 'autoScroll'>;
+export type ChartgpuInteractionOptions = Pick<ChartGPUOptions, 'dataZoom' | 'tooltip'>;
+export type ChartgpuChartInstance = ChartGPUInstance;
+export type ChartgpuGPUContext = ChartGPUCreateContext;
+export type ChartgpuStyle = Record<string, string | number | null | undefined>;
+export type ChartgpuZoomRange = NonNullable<ReturnType<ChartGPUInstance['getZoomRange']>>;
+export type ChartgpuClickParams = ChartGPUEventPayload;
+export type ChartgpuMouseOverParams = ChartGPUEventPayload;
+export type ChartgpuCrosshairMoveParams = ChartGPUCrosshairMovePayload;
+export type ChartgpuHitTestResult = ChartGPUHitTestResult;
+export type ChartgpuRenderMode = RenderMode;
+export type ChartgpuSyncOptions = ChartSyncOptions;
+export type ChartgpuXYArraysData = Readonly<{
+  x: ArrayLike<number>;
+  y: ArrayLike<number>;
+  size?: ArrayLike<number>;
+}>;
+export type ChartgpuInterleavedXYData = ArrayBufferView;
+export type ChartgpuCartesianSeriesData = ReadonlyArray<DataPoint | null> | ChartgpuXYArraysData | ChartgpuInterleavedXYData;
+export type ChartgpuAppendDataOptions = Readonly<{
+  maxPoints?: number;
+}>;
+export interface ChartgpuDataAppendEvent {
+  seriesIndex: number;
+  count: number;
+  xExtent: {
+    min: number;
+    max: number;
+  };
+}
+export interface ChartgpuReadyEvent {
+  container: HTMLDivElement;
+}
+export interface ChartgpuResizeEvent {
+  width: number;
+  height: number;
+  container: HTMLDivElement;
+}
+export interface ChartgpuClickEvent {
+  x: number;
+  y: number;
+}
+export interface ChartgpuZoomChangeEvent {
+  range: {
+    start: number;
+    end: number;
+  };
+}
+export interface ChartgpuZoomRangeChangeEvent {
+  start: number;
+  end: number;
+}
+export interface ChartgpuGPUContextState {
+  adapter: ChartGPUCreateContext['adapter'] | null;
+  device: ChartGPUCreateContext['device'] | null;
+  pipelineCache: PipelineCache | null;
+  error: Error | null;
+  isReady: boolean;
+}
+export interface ChartgpuChartHandle {
+  getChart(): ChartGPUInstance | null;
+  getContainer(): HTMLDivElement | null;
+  appendData(seriesIndex: number, newPoints: ChartgpuCartesianSeriesData | OHLCDataPoint[], options?: ChartgpuAppendDataOptions): void;
+  renderFrame(): boolean;
+  needsRender(): boolean;
+  getRenderMode(): RenderMode;
+  setRenderMode(mode: RenderMode): void;
+  setOption(options: ChartgpuOptions): void;
+  setZoomRange(start: number, end: number, source?: unknown): void;
+  setInteractionX(x: number | null, source?: unknown): void;
+  getInteractionX(): number | null;
+  hitTest(event: PointerEvent | MouseEvent): ChartGPUHitTestResult | null;
+}
+export declare class ChartGpuAngularComponent implements ChartgpuChartHandle, OnDestroy {
+  private readonly destroyRef;
+  readonly options: import("@angular/core").InputSignal<import("chartgpu").ChartGPUOptions>;
+  readonly gpuContext: import("@angular/core").InputSignal<Readonly<{
+    readonly device: GPUDevice;
+    readonly adapter: GPUAdapter;
+    readonly pipelineCache?: import("chartgpu").PipelineCache;
+  }> | null>;
+  readonly theme: import("@angular/core").InputSignal<import("chartgpu").ThemeConfig | "light" | "dark" | undefined>;
+  readonly className: import("@angular/core").InputSignal<string | undefined>;
+  readonly style: import("@angular/core").InputSignal<ChartgpuStyle | undefined>;
+  readonly ready: import("@angular/core").OutputEmitterRef<ChartgpuReadyEvent>;
+  readonly chartReady: import("@angular/core").OutputEmitterRef<ChartGPUInstance$1>;
+  readonly chartDispose: import("@angular/core").OutputEmitterRef<void>;
+  readonly resize: import("@angular/core").OutputEmitterRef<ChartgpuResizeEvent>;
+  readonly click: import("@angular/core").OutputEmitterRef<ChartgpuClickEvent>;
+  readonly chartClick: import("@angular/core").OutputEmitterRef<Readonly<{
+    readonly seriesIndex: number | null;
+    readonly dataIndex: number | null;
+    readonly value: readonly [number, number] | null;
+    readonly seriesName: string | null;
+    readonly event: PointerEvent;
+  }>>;
+  readonly mouseOver: import("@angular/core").OutputEmitterRef<Readonly<{
+    readonly seriesIndex: number | null;
+    readonly dataIndex: number | null;
+    readonly value: readonly [number, number] | null;
+    readonly seriesName: string | null;
+    readonly event: PointerEvent;
+  }>>;
+  readonly mouseOut: import("@angular/core").OutputEmitterRef<Readonly<{
+    readonly seriesIndex: number | null;
+    readonly dataIndex: number | null;
+    readonly value: readonly [number, number] | null;
+    readonly seriesName: string | null;
+    readonly event: PointerEvent;
+  }>>;
+  readonly crosshairMove: import("@angular/core").OutputEmitterRef<Readonly<{
+    readonly x: number | null;
+    readonly source?: unknown;
+  }>>;
+  readonly dataAppend: import("@angular/core").OutputEmitterRef<ChartgpuDataAppendEvent>;
+  readonly zoomChange: import("@angular/core").OutputEmitterRef<ChartgpuZoomChangeEvent>;
+  readonly zoomRangeChange: import("@angular/core").OutputEmitterRef<ChartgpuZoomRangeChangeEvent>;
+  readonly deviceLost: import("@angular/core").OutputEmitterRef<Readonly<{
+    readonly reason: GPUDeviceLostReason;
+    readonly message: string;
+  }>>;
+  readonly chartError: import("@angular/core").OutputEmitterRef<Error>;
+  readonly host: import("@angular/core").Signal<ElementRef<HTMLDivElement> | undefined>;
+  readonly canvasHost: import("@angular/core").Signal<ElementRef<HTMLDivElement> | undefined>;
+  private readonly chartInstance;
+  readonly initializationError: import("@angular/core").WritableSignal<Error | null>;
+  private chartContainer?;
+  private createdWithOptions?;
+  private resizeTimeout?;
+  private resizeObserver?;
+  private removeChartListeners?;
+  private destroying;
+  constructor(destroyRef: DestroyRef);
+  protected emitClick(event: MouseEvent): void;
+  ngOnDestroy(): void;
+  getChart(): ChartGPUInstance$1 | null;
+  getContainer(): HTMLDivElement | null;
+  appendData(seriesIndex: number, newPoints: ChartgpuCartesianSeriesData | OHLCDataPoint$1[], options?: ChartgpuAppendDataOptions): void;
+  renderFrame(): boolean;
+  needsRender(): boolean;
+  getRenderMode(): 'auto' | 'external';
+  setRenderMode(mode: 'auto' | 'external'): void;
+  setOption(options: ChartgpuOptions): void;
+  setZoomRange(start: number, end: number, source?: unknown): void;
+  setInteractionX(x: number | null, source?: unknown): void;
+  getInteractionX(): number | null;
+  hitTest(event: PointerEvent | MouseEvent): Readonly<{
+    readonly isInGrid: boolean;
+    readonly canvasX: number;
+    readonly canvasY: number;
+    readonly gridX: number;
+    readonly gridY: number;
+    readonly match: import("chartgpu").ChartGPUHitTestMatch | null;
+  }> | null;
+  private getEffectiveOptions;
+  private listenToChart;
+  private emitZoomRange;
+  private observeResize;
+  private reportError;
+  private disposeChart;
+  static ɵfac: i0.ɵɵFactoryDeclaration<ChartGpuAngularComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<ChartGpuAngularComponent, "lib-chartgpu-angular", never, {
+    "options": {
+      "alias": "options";
+      "required": true;
+      "isSignal": true;
+    };
+    "gpuContext": {
+      "alias": "gpuContext";
+      "required": false;
+      "isSignal": true;
+    };
+    "theme": {
+      "alias": "theme";
+      "required": false;
+      "isSignal": true;
+    };
+    "className": {
+      "alias": "className";
+      "required": false;
+      "isSignal": true;
+    };
+    "style": {
+      "alias": "style";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "ready": "ready";
+    "chartReady": "chartReady";
+    "chartDispose": "chartDispose";
+    "resize": "resize";
+    "click": "click";
+    "chartClick": "chartClick";
+    "mouseOver": "mouseOver";
+    "mouseOut": "mouseOut";
+    "crosshairMove": "crosshairMove";
+    "dataAppend": "dataAppend";
+    "zoomChange": "zoomChange";
+    "zoomRangeChange": "zoomRangeChange";
+    "deviceLost": "deviceLost";
+    "chartError": "chartError";
+  }, never, never, true, never>;
+}
+export declare class ChartgpuConnectChartsDirective {
+  readonly charts: import("@angular/core").InputSignal<readonly (ChartGPUInstance$1 | null | undefined)[]>;
+  readonly syncOptions: import("@angular/core").InputSignal<Readonly<{
+    readonly syncCrosshair?: boolean;
+    readonly syncZoom?: boolean;
+  }> | undefined>;
+  readonly connectionError: import("@angular/core").OutputEmitterRef<Error>;
+  private readonly ids;
+  private nextId;
+  private signature;
+  constructor();
+  static ɵfac: i0.ɵɵFactoryDeclaration<ChartgpuConnectChartsDirective, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<ChartgpuConnectChartsDirective, "[libChartgpuConnectCharts]", never, {
+    "charts": {
+      "alias": "libChartgpuConnectCharts";
+      "required": false;
+      "isSignal": true;
+    };
+    "syncOptions": {
+      "alias": "syncOptions";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "connectionError": "connectionError";
+  }, never, never, true, never>;
+}
+export declare function provideChartGpuContext(): import("@angular/core").EnvironmentProviders;
+/**
+ * Creates one shared WebGPU context and pipeline cache for charts in a dashboard.
+ * The device is intentionally not destroyed with the service so charts can share it
+ * for the lifetime of the application.
+ */
+export declare class ChartgpuGPUContextService {
+  readonly state: import("@angular/core").WritableSignal<ChartgpuGPUContextState>;
+  readonly context: import("@angular/core").Signal<Readonly<{
+    readonly device: GPUDevice;
+    readonly adapter: GPUAdapter;
+    readonly pipelineCache?: import("chartgpu").PipelineCache;
+  }> | null>;
+  private initialization?;
+  initialize(): Promise<ChartgpuGPUContextState>;
+  private createContext;
+  static ɵfac: i0.ɵɵFactoryDeclaration<ChartgpuGPUContextService, never>;
+  static ɵprov: i0.ɵɵInjectableDeclaration<any>;
+}
+export type { ChartGPUCreateContext, ChartGPUCrosshairMovePayload, ChartGPUDeviceLostPayload, ChartGPUEventPayload, ChartGPUHitTestResult, ChartGPUInstance, ChartSyncOptions, DataPoint, OHLCDataPoint, PipelineCache, RenderMode };