@vertz/ui-canvas 0.1.0 → 0.2.0

package/dist/index.d.ts

@@ -1,13 +1,15 @@
-import { Application, Container } from "pixi";
-import { Signal, DisposeFn } from "@vertz/ui";
+import { DisposeFn, Signal } from "@vertz/ui";
+import { Application, Container as Container2 } from "pixi.js";
 interface CanvasOptions {
 	width: number;
 	height: number;
 	backgroundColor?: number;
 }
 interface CanvasState {
+	canvas: HTMLCanvasElement;
 	app: Application;
-	root: Container;
+	stage: Container2;
+	dispose: DisposeFn;
 }
 /**
 * Binds a Vertz signal to a PixiJS display object property reactively.
@@ -43,15 +45,9 @@ declare function createReactiveSprite(options: {
 /**
 * Renders a PixiJS canvas to the specified container element.
 * Returns the canvas element and a dispose function for cleanup.
+* Async because PixiJS v8 requires `app.init()` for initialization.
 */
-declare function render(container: HTMLElement, options: CanvasOptions): {
-	canvas: HTMLCanvasElement;
-	dispose: DisposeFn;
-};
-/**
-* Destroy a PixiJS application and remove its canvas from the DOM.
-*/
-declare function destroy(app: Application, container: HTMLElement): void;
+declare function render(container: HTMLElement, options: CanvasOptions): Promise<CanvasState>;
 /**
 * Canvas renderer for Vertz with PixiJS integration.
 * Provides reactive primitives for canvas rendering.
@@ -60,6 +56,211 @@ declare const Canvas: {
 	render: typeof render;
 	bindSignal: typeof bindSignal;
 	createReactiveSprite: typeof createReactiveSprite;
-	destroy: typeof destroy;
 };
-export { render, destroy, createReactiveSprite, bindSignal, CanvasState, CanvasOptions, Canvas };
+import { Container as Container3 } from "pixi.js";
+type DisposeFn2 = () => void;
+/**
+* Conditionally renders a canvas display object based on a reactive condition.
+* When the condition is true, the factory creates a display object and adds it to parent.
+* When false, the display object is removed and destroyed.
+* An optional fallback factory is shown when the condition is false.
+*
+* Each branch is rendered in its own disposal scope so that effects created
+* inside branches are properly cleaned up when the condition changes.
+*
+* Canvas equivalent of @vertz/ui's DOM `__conditional()`.
+*
+* @param parent - The parent Container.
+* @param condition - Accessor returning a boolean.
+* @param factory - Creates the display object when condition is true.
+* @param fallbackFactory - Optional: creates a display object when condition is false.
+* @returns A dispose function that removes and destroys the current display object.
+*/
+declare function canvasConditional(parent: Container3, condition: () => boolean, factory: () => Container3, fallbackFactory?: () => Container3): DisposeFn2;
+import { Context } from "@vertz/ui";
+import { Container as Container4 } from "pixi.js";
+/**
+* Context that provides the current PixiJS Container (typically the stage)
+* to canvas children. Canvas intrinsic elements use this to know which
+* container they should add themselves to.
+*/
+declare const CanvasRenderContext: Context<Container4 | null>;
+interface CanvasLayerProps {
+	width: number;
+	height: number;
+	background?: number;
+	debug?: boolean;
+	children?: unknown;
+}
+/**
+* Bridge component that embeds a PixiJS canvas inside the DOM tree.
+* Creates a PixiJS Application, provides the stage via CanvasRenderContext,
+* and processes canvas children.
+*
+* Nesting CanvasLayer inside another CanvasLayer is forbidden and throws.
+*/
+declare function CanvasLayer(props: CanvasLayerProps): HTMLDivElement;
+import { Container as Container5 } from "pixi.js";
+type DisposeFn3 = () => void;
+/**
+* Reactively manages a list of canvas children inside a parent Container.
+* When the items signal changes, children are added/removed/reordered.
+* Each item gets its own disposal scope for cleanup.
+*
+* Canvas equivalent of @vertz/ui's DOM `__list()`.
+*
+* @param parent - The parent Container to manage children on.
+* @param items - Accessor returning the current array of items.
+* @param renderFn - Factory that creates a display object for an item.
+* @param keyFn - Extracts a unique key from an item for identity tracking.
+* @returns A dispose function that removes and destroys all managed children.
+*/
+declare function canvasList<T>(parent: Container5, items: () => T[], renderFn: (item: T) => Container5, keyFn: (item: T) => string | number): DisposeFn3;
+import { Container as Container6 } from "pixi.js";
+/**
+* Creates a debug overlay that draws wireframe bounding boxes and labels
+* for all display objects in the stage. Toggle via the `debug` prop on CanvasLayer.
+*/
+declare function createDebugOverlay(stage: Container6): {
+	overlay: Container6;
+	update: () => void;
+	destroy: () => void;
+};
+import { Container as Container7 } from "pixi.js";
+/** Check if a tag name is a known canvas intrinsic element. */
+declare function isCanvasIntrinsic(tag: string): boolean;
+/**
+* Create a PixiJS display object from a canvas intrinsic tag and props.
+* Handles static props, reactive (accessor) props, event binding,
+* Graphics draw callbacks, children processing, ref escape hatch,
+* and disposal cleanup.
+*/
+declare function jsxCanvas(tag: string, props: Record<string, unknown>): Container7;
+import { Container as Container8 } from "pixi.js";
+/** Reactive prop: can be a static value or accessor function. */
+type MaybeAccessor<T> = T | (() => T);
+/**
+* Unwrap a MaybeAccessor to its underlying value.
+* If the value is a function, call it to get the result.
+* If it's a static value, return it directly.
+*/
+declare function unwrap<T>(value: MaybeAccessor<T>): T;
+interface CircleProps {
+	x?: MaybeAccessor<number>;
+	y?: MaybeAccessor<number>;
+	radius: MaybeAccessor<number>;
+	fill: MaybeAccessor<number>;
+}
+interface RectProps {
+	x?: MaybeAccessor<number>;
+	y?: MaybeAccessor<number>;
+	width: MaybeAccessor<number>;
+	height: MaybeAccessor<number>;
+	fill: MaybeAccessor<number>;
+	stroke?: MaybeAccessor<number>;
+	strokeWidth?: MaybeAccessor<number>;
+}
+interface LineProps {
+	x?: MaybeAccessor<number>;
+	y?: MaybeAccessor<number>;
+	from: {
+		x: number;
+		y: number;
+	};
+	to: {
+		x: number;
+		y: number;
+	};
+	stroke: MaybeAccessor<number>;
+	strokeWidth?: MaybeAccessor<number>;
+}
+interface EllipseProps {
+	x?: MaybeAccessor<number>;
+	y?: MaybeAccessor<number>;
+	halfWidth: MaybeAccessor<number>;
+	halfHeight: MaybeAccessor<number>;
+	fill: MaybeAccessor<number>;
+}
+/** Create a circle shape as a Graphics element. */
+declare function Circle(props: CircleProps): Container8;
+/** Create a rectangle shape as a Graphics element. */
+declare function Rect(props: RectProps): Container8;
+/** Create a line shape as a Graphics element. */
+declare function Line(props: LineProps): Container8;
+/** Create an ellipse shape as a Graphics element. */
+declare function Ellipse(props: EllipseProps): Container8;
+import { Sprite as Sprite2 } from "pixi.js";
+/**
+* Load a texture asynchronously and assign it to a Sprite.
+* The sprite is hidden until the texture loads successfully.
+*
+* - On success: sets `sprite.texture` and makes the sprite visible.
+* - On failure: logs a warning, sprite remains invisible.
+* - If the sprite is destroyed before the texture loads, the assignment is skipped.
+*
+* @param sprite - The Sprite to load the texture into.
+* @param path - The texture asset path (resolved by PixiJS Assets).
+* @returns A promise that resolves when loading completes (success or failure).
+*/
+declare function loadSpriteTexture(sprite: Sprite2, path: string): Promise<void>;
+import { FederatedPointerEvent, FederatedWheelEvent, Container as PIXIContainer, TextStyleOptions } from "pixi.js";
+import { Graphics as Graphics_2qg1pn } from "pixi.js";
+/** Common transform props shared by all canvas elements. */
+interface CanvasTransformProps {
+	x?: MaybeAccessor<number>;
+	y?: MaybeAccessor<number>;
+	rotation?: MaybeAccessor<number>;
+	alpha?: MaybeAccessor<number>;
+	scale?: MaybeAccessor<number>;
+	visible?: MaybeAccessor<boolean>;
+	ref?: (obj: PIXIContainer) => void;
+}
+/** Pointer event handlers for interactive canvas elements. */
+interface CanvasEventProps {
+	onPointerDown?: (e: FederatedPointerEvent) => void;
+	onPointerUp?: (e: FederatedPointerEvent) => void;
+	onPointerMove?: (e: FederatedPointerEvent) => void;
+	onPointerOver?: (e: FederatedPointerEvent) => void;
+	onPointerOut?: (e: FederatedPointerEvent) => void;
+	onPointerEnter?: (e: FederatedPointerEvent) => void;
+	onPointerLeave?: (e: FederatedPointerEvent) => void;
+	onClick?: (e: FederatedPointerEvent) => void;
+	onRightClick?: (e: FederatedPointerEvent) => void;
+	onWheel?: (e: FederatedWheelEvent) => void;
+	interactive?: boolean;
+	eventMode?: "static" | "passive" | "dynamic" | "auto" | "none";
+}
+/** The type of a function passed to Graphics.draw */
+type DrawFn = (g: Graphics_2qg1pn) => void;
+/** A value that can be a child of a canvas container. */
+type CanvasChild = PIXIContainer | null | undefined | false;
+interface GraphicsProps extends CanvasTransformProps, CanvasEventProps {
+	draw: DrawFn;
+	children?: never;
+}
+interface ContainerProps extends CanvasTransformProps, CanvasEventProps {
+	children?: CanvasChild | CanvasChild[];
+}
+interface SpriteProps extends CanvasTransformProps, CanvasEventProps {
+	texture: MaybeAccessor<string>;
+	anchor?: MaybeAccessor<number>;
+	width?: MaybeAccessor<number>;
+	height?: MaybeAccessor<number>;
+}
+interface TextProps extends CanvasTransformProps, CanvasEventProps {
+	text: MaybeAccessor<string>;
+	style?: Partial<TextStyleOptions>;
+}
+/** Reserved for Phase 3 accessibility. */
+interface AccessibilityProps {
+	label?: string;
+	role?: string;
+}
+/** Map of canvas intrinsic tag names to their prop types. */
+interface CanvasIntrinsicElements {
+	Graphics: GraphicsProps;
+	Container: ContainerProps;
+	Sprite: SpriteProps;
+	Text: TextProps;
+}
+export { unwrap, render, loadSpriteTexture, jsxCanvas, isCanvasIntrinsic, createReactiveSprite, createDebugOverlay, canvasList, canvasConditional, bindSignal, TextProps, SpriteProps, RectProps, Rect, MaybeAccessor, LineProps, Line, GraphicsProps, EllipseProps, Ellipse, DrawFn, ContainerProps, CircleProps, Circle, CanvasTransformProps, CanvasState, CanvasRenderContext, CanvasOptions, CanvasLayerProps, CanvasLayer, CanvasIntrinsicElements, CanvasEventProps, CanvasChild, Canvas, AccessibilityProps };

package/dist/index.js

@@ -1,14 +1,13 @@
 // src/canvas.ts
+import { domEffect } from "@vertz/ui/internals";
 import { Application } from "pixi.js";
-import { effect } from "@vertz/ui";
 function bindSignal(sig, displayObject, property, transform) {
   const update = () => {
     const value = transform ? transform(sig.value) : sig.value;
     displayObject[property] = value;
   };
   update();
-  const disposeEffect = effect(() => {
-    sig.value;
+  const disposeEffect = domEffect(() => {
     update();
   });
   return disposeEffect;
@@ -35,41 +34,422 @@ function createReactiveSprite(options, displayObject) {
   }
   return {
     displayObject,
-    dispose: () => cleanups.forEach((fn) => fn())
+    dispose: () => {
+      for (const fn of cleanups)
+        fn();
+    }
   };
 }
-function render(container, options) {
-  const app = new Application({
+async function render(container, options) {
+  const app = new Application;
+  await app.init({
     width: options.width,
     height: options.height,
-    backgroundColor: options.backgroundColor ?? 0
+    background: options.backgroundColor ?? 0
   });
-  container.appendChild(app.view);
+  container.appendChild(app.canvas);
   const dispose = () => {
     destroy(app, container);
   };
   return {
-    canvas: app.view,
+    canvas: app.canvas,
+    app,
+    stage: app.stage,
     dispose
   };
 }
 function destroy(app, container) {
-  const view = app.view;
-  if (view && container.contains(view)) {
-    container.removeChild(view);
+  const canvas = app.canvas;
+  if (canvas && container.contains(canvas)) {
+    container.removeChild(canvas);
   }
-  app.destroy(true, { children: true, texture: true });
+  app.destroy(true, { children: true });
 }
 var Canvas = {
   render,
   bindSignal,
-  createReactiveSprite,
-  destroy
+  createReactiveSprite
 };
+// src/canvas-conditional.ts
+import { domEffect as domEffect2, popScope, pushScope, runCleanups } from "@vertz/ui/internals";
+function canvasConditional(parent, condition, factory, fallbackFactory) {
+  let current = null;
+  let branchCleanups = [];
+  let disposed = false;
+  function removeCurrent() {
+    if (current) {
+      parent.removeChild(current);
+      current = null;
+    }
+    runCleanups(branchCleanups);
+  }
+  const disposeEffect = domEffect2(() => {
+    if (disposed)
+      return;
+    const shouldShow = condition();
+    removeCurrent();
+    if (shouldShow) {
+      const scope = pushScope();
+      current = factory();
+      popScope();
+      branchCleanups = scope;
+      parent.addChild(current);
+    } else if (fallbackFactory) {
+      const scope = pushScope();
+      current = fallbackFactory();
+      popScope();
+      branchCleanups = scope;
+      parent.addChild(current);
+    } else {
+      branchCleanups = [];
+    }
+  });
+  return () => {
+    disposed = true;
+    disposeEffect();
+    removeCurrent();
+  };
+}
+// src/canvas-layer.ts
+import { createContext, useContext } from "@vertz/ui";
+import { onCleanup } from "@vertz/ui/internals";
+import { Application as Application2, Container as Container2 } from "pixi.js";
+
+// src/debug-overlay.ts
+import { Container, Graphics, Text } from "pixi.js";
+function createDebugOverlay(stage) {
+  const overlay = new Container;
+  overlay.label = "__debug_overlay";
+  function update() {
+    overlay.removeChildren();
+    drawDebugRecursive(stage, overlay);
+  }
+  function drawDebugRecursive(node, debugLayer) {
+    for (const child of node.children) {
+      if (child === overlay)
+        continue;
+      if (child instanceof Container) {
+        const bounds = child.getBounds();
+        const box = new Graphics;
+        box.rect(bounds.x, bounds.y, bounds.width, bounds.height);
+        box.stroke({ width: 1, color: 65280, alpha: 0.5 });
+        debugLayer.addChild(box);
+        if (child.label) {
+          const label = new Text({
+            text: child.label,
+            style: { fontSize: 10, fill: 65280 }
+          });
+          label.x = bounds.x;
+          label.y = bounds.y - 12;
+          debugLayer.addChild(label);
+        }
+        if (child.children.length > 0) {
+          drawDebugRecursive(child, debugLayer);
+        }
+      }
+    }
+  }
+  return {
+    overlay,
+    update,
+    destroy: () => {
+      overlay.removeChildren();
+      overlay.destroy({ children: true });
+    }
+  };
+}
+
+// src/canvas-layer.ts
+var CanvasRenderContext = createContext(null);
+function CanvasLayer(props) {
+  const parentCtx = useContext(CanvasRenderContext);
+  if (parentCtx) {
+    throw new Error("<CanvasLayer> cannot be nested inside another <CanvasLayer>. Use <Container> to group canvas elements.");
+  }
+  const div = document.createElement("div");
+  const app = new Application2;
+  let destroyed = false;
+  onCleanup(() => {
+    destroyed = true;
+    app.destroy(true, { children: true });
+  });
+  app.init({
+    width: props.width,
+    height: props.height,
+    background: props.background ?? 0
+  }).then(() => {
+    if (destroyed)
+      return;
+    div.appendChild(app.canvas);
+    CanvasRenderContext.Provider(app.stage, () => {
+      if (props.children != null) {
+        const children = Array.isArray(props.children) ? props.children : [props.children];
+        for (const child of children) {
+          if (child instanceof Container2) {
+            app.stage.addChild(child);
+          }
+        }
+      }
+    });
+    if (props.debug) {
+      const debug = createDebugOverlay(app.stage);
+      app.stage.addChild(debug.overlay);
+      debug.update();
+    }
+  }).catch((error) => {
+    if (destroyed)
+      return;
+    console.error("[ui-canvas] CanvasLayer failed to initialize:", error);
+  });
+  return div;
+}
+// src/canvas-list.ts
+import { domEffect as domEffect3, popScope as popScope2, pushScope as pushScope2, runCleanups as runCleanups2 } from "@vertz/ui/internals";
+function canvasList(parent, items, renderFn, keyFn) {
+  const itemMap = new Map;
+  let disposed = false;
+  const disposeEffect = domEffect3(() => {
+    if (disposed)
+      return;
+    const currentItems = items();
+    const currentKeys = new Set(currentItems.map(keyFn));
+    for (const [key, entry] of itemMap) {
+      if (!currentKeys.has(key)) {
+        parent.removeChild(entry.displayObject);
+        runCleanups2(entry.scope);
+        itemMap.delete(key);
+      }
+    }
+    for (const item of currentItems) {
+      const key = keyFn(item);
+      if (!itemMap.has(key)) {
+        const scope = pushScope2();
+        const displayObject = renderFn(item);
+        popScope2();
+        parent.addChild(displayObject);
+        itemMap.set(key, { displayObject, scope });
+      }
+    }
+    for (let i = 0;i < currentItems.length; i++) {
+      const key = keyFn(currentItems[i]);
+      const entry = itemMap.get(key);
+      if (entry && parent.getChildIndex(entry.displayObject) !== i) {
+        parent.setChildIndex(entry.displayObject, i);
+      }
+    }
+  });
+  return () => {
+    disposed = true;
+    disposeEffect();
+    for (const [, entry] of itemMap) {
+      parent.removeChild(entry.displayObject);
+      runCleanups2(entry.scope);
+    }
+    itemMap.clear();
+  };
+}
+// src/jsx-canvas.ts
+import { _tryOnCleanup, domEffect as domEffect4 } from "@vertz/ui/internals";
+import { Container as Container3, Graphics as Graphics2, Sprite, Text as Text2 } from "pixi.js";
+
+// src/sprite-loading.ts
+import { Assets } from "pixi.js";
+async function loadSpriteTexture(sprite, path) {
+  sprite.visible = false;
+  try {
+    const texture = await Assets.load(path);
+    if (sprite.destroyed)
+      return;
+    sprite.texture = texture;
+    sprite.visible = true;
+  } catch (error) {
+    console.warn(`[ui-canvas] Failed to load texture "${path}": ${error instanceof Error ? error.message : String(error)}`);
+  }
+}
+
+// src/jsx-canvas.ts
+var CANVAS_INTRINSICS = new Set(["Graphics", "Container", "Sprite", "Text"]);
+function isCanvasIntrinsic(tag) {
+  return CANVAS_INTRINSICS.has(tag);
+}
+function jsxCanvas(tag, props) {
+  const displayObject = createDisplayObject(tag);
+  let hasEventProps = false;
+  _tryOnCleanup(() => {
+    displayObject.destroy({ children: true });
+  });
+  if (displayObject instanceof Text2) {
+    if ("text" in props) {
+      const textValue = props.text;
+      if (typeof textValue === "function") {
+        domEffect4(() => {
+          displayObject.text = textValue();
+        });
+      } else if (textValue !== undefined) {
+        displayObject.text = textValue;
+      }
+    }
+    if ("style" in props && props.style !== undefined) {
+      displayObject.style = props.style;
+    }
+  }
+  if (displayObject instanceof Sprite && "texture" in props) {
+    const textureValue = props.texture;
+    if (typeof textureValue === "string") {
+      loadSpriteTexture(displayObject, textureValue);
+    } else if (typeof textureValue === "function") {
+      domEffect4(() => {
+        const url = textureValue();
+        if (typeof url === "string") {
+          loadSpriteTexture(displayObject, url);
+        }
+      });
+    }
+  }
+  for (const [key, value] of Object.entries(props)) {
+    if (key === "children" || key === "ref" || key === "interactive")
+      continue;
+    if (displayObject instanceof Text2 && (key === "text" || key === "style"))
+      continue;
+    if (displayObject instanceof Sprite && key === "texture")
+      continue;
+    if (key === "draw" && displayObject instanceof Graphics2) {
+      domEffect4(() => {
+        displayObject.clear();
+        value(displayObject);
+      });
+    } else if (key === "eventMode") {
+      displayObject.eventMode = value;
+    } else if (key.startsWith("on") && typeof value === "function") {
+      const event = key.slice(2).toLowerCase();
+      const handler = value;
+      displayObject.on(event, handler);
+      _tryOnCleanup(() => displayObject.off(event, handler));
+      hasEventProps = true;
+    } else if (typeof value === "function") {
+      domEffect4(() => {
+        displayObject[key] = value();
+      });
+    } else if (value !== undefined) {
+      displayObject[key] = value;
+    }
+  }
+  if (hasEventProps && props.interactive !== false && !("eventMode" in props)) {
+    displayObject.eventMode = "static";
+  }
+  if (props.ref && typeof props.ref === "function") {
+    props.ref(displayObject);
+  }
+  applyCanvasChildren(displayObject, props.children);
+  return displayObject;
+}
+function applyCanvasChildren(parent, children) {
+  if (children == null || children === false)
+    return;
+  if (Array.isArray(children)) {
+    for (const child of children) {
+      applyCanvasChildren(parent, child);
+    }
+    return;
+  }
+  if (children instanceof Container3) {
+    parent.addChild(children);
+    return;
+  }
+}
+function createDisplayObject(tag) {
+  switch (tag) {
+    case "Graphics":
+      return new Graphics2;
+    case "Container":
+      return new Container3;
+    case "Sprite":
+      return new Sprite;
+    case "Text":
+      return new Text2;
+    default:
+      throw new Error(`Unknown canvas element: <${tag}>`);
+  }
+}
+// src/unwrap.ts
+function unwrap(value) {
+  return typeof value === "function" ? value() : value;
+}
+
+// src/shapes.ts
+function Circle(props) {
+  return jsxCanvas("Graphics", {
+    x: props.x,
+    y: props.y,
+    draw: (g) => {
+      const r = unwrap(props.radius);
+      const color = unwrap(props.fill);
+      g.circle(0, 0, r);
+      g.fill(color);
+    }
+  });
+}
+function Rect(props) {
+  return jsxCanvas("Graphics", {
+    x: props.x,
+    y: props.y,
+    draw: (g) => {
+      const w = unwrap(props.width);
+      const h = unwrap(props.height);
+      const color = unwrap(props.fill);
+      g.rect(0, 0, w, h);
+      g.fill(color);
+      if (props.stroke !== undefined) {
+        g.stroke({
+          color: unwrap(props.stroke),
+          width: unwrap(props.strokeWidth ?? 1)
+        });
+      }
+    }
+  });
+}
+function Line(props) {
+  return jsxCanvas("Graphics", {
+    x: props.x,
+    y: props.y,
+    draw: (g) => {
+      const color = unwrap(props.stroke);
+      const width = unwrap(props.strokeWidth ?? 1);
+      g.moveTo(props.from.x, props.from.y);
+      g.lineTo(props.to.x, props.to.y);
+      g.stroke({ color, width });
+    }
+  });
+}
+function Ellipse(props) {
+  return jsxCanvas("Graphics", {
+    x: props.x,
+    y: props.y,
+    draw: (g) => {
+      const rx = unwrap(props.halfWidth);
+      const ry = unwrap(props.halfHeight);
+      const color = unwrap(props.fill);
+      g.ellipse(0, 0, rx, ry);
+      g.fill(color);
+    }
+  });
+}
 export {
+  unwrap,
   render,
-  destroy,
+  loadSpriteTexture,
+  jsxCanvas,
+  isCanvasIntrinsic,
   createReactiveSprite,
+  createDebugOverlay,
+  canvasList,
+  canvasConditional,
   bindSignal,
+  Rect,
+  Line,
+  Ellipse,
+  Circle,
+  CanvasRenderContext,
+  CanvasLayer,
   Canvas
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vertz/ui-canvas",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "type": "module",
   "license": "MIT",
   "description": "Vertz Canvas renderer with PixiJS and signals",
@@ -26,20 +26,22 @@
   ],
   "scripts": {
     "build": "bunup",
-    "test": "vitest run",
-    "test:watch": "vitest",
+    "test": "bun test",
+    "test:watch": "bun test --watch",
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@vertz/ui": "workspace:*",
     "pixi.js": "^8.0.0"
   },
+  "peerDependencies": {
+    "@vertz/ui": "workspace:*"
+  },
   "devDependencies": {
-    "@vitest/coverage-v8": "^4.0.18",
+    "@happy-dom/global-registrator": "^20.7.0",
+    "@vertz/ui": "workspace:*",
     "bunup": "latest",
-    "happy-dom": "^18.0.1",
-    "typescript": "^5.7.0",
-    "vitest": "^4.0.18"
+    "happy-dom": "^20.7.0",
+    "typescript": "^5.7.0"
   },
   "engines": {
     "node": ">=22"