canvasengine 2.0.0-beta.45 → 2.0.0-beta.46

package/src/directives/Shake.ts

@@ -1,7 +1,7 @@
 import { Container, Point } from 'pixi.js';
 import { Directive, registerDirective } from '../engine/directive';
 import { Element } from '../engine/reactive';
-import { effect } from '@signe/reactive';
+import { effect, isSignal } from '@signe/reactive';
 import { on, isTrigger, Trigger } from '../engine/trigger';
 import { useProps } from '../hooks/useProps';
 import { SignalOrPrimitive } from '../components/types';
@@ -128,6 +128,10 @@ export class Shake extends Directive {
         });
     }
 
+    private resolveSignalValue<T>(value: SignalOrPrimitive<T>): T {
+        return (isSignal(value as any) ? (value as any)() : value) as T;
+    }
+
     /**
      * Performs the shake animation using animatedSignal
      * @param data - Optional data passed from the trigger that can override default options
@@ -139,10 +143,10 @@ export class Shake extends Directive {
         const shakeProps = this.shakeProps;
         
         // Use data from trigger to override defaults if provided
-        const intensity = data?.intensity ?? shakeProps.intensity();
-        const duration = data?.duration ?? shakeProps.duration();
-        const frequency = data?.frequency ?? shakeProps.frequency();
-        const direction = data?.direction ?? shakeProps.direction();
+        const intensity = data?.intensity ?? this.resolveSignalValue(shakeProps.intensity);
+        const duration = data?.duration ?? this.resolveSignalValue(shakeProps.duration);
+        const frequency = data?.frequency ?? this.resolveSignalValue(shakeProps.frequency);
+        const direction = data?.direction ?? this.resolveSignalValue(shakeProps.direction);
 
         // Stop any existing animation and clean up
         if (this.positionEffect) {
@@ -292,4 +296,3 @@ export class Shake extends Directive {
 }
 
 registerDirective('shake', Shake);
-

package/src/engine/FocusManager.ts

@@ -1,4 +1,4 @@
-import { isSignal, signal, Signal } from "@signe/reactive";
+import { isSignal, signal, Signal, WritableSignal, WritableObjectSignal } from "@signe/reactive";
 import { Element, isElementFrozen } from "./reactive";
 import { CanvasViewport } from "../components/Viewport";
 import { SignalOrPrimitive } from "../components/types";
@@ -21,19 +21,20 @@ export interface ScrollOptions {
 /**
  * Data structure for a focus container
  */
+type WritableElementSignal = WritableSignal<Element | null> | WritableObjectSignal<Element | null>;
+
 interface FocusContainerData {
   id: string;
-  element?: Element;
-  focusables: Map<number, Element>;
-  currentIndex: Signal<number | null>;
-  focusedElement: Signal<Element | null>;
+  element?: Element<any>;
+  focusables: Map<number, Element<any>>;
+  currentIndex: WritableSignal<number | null>;
+  focusedElement: WritableElementSignal;
   onFocusChange?: (index: number, element: Element | null) => void;
   autoScroll?: boolean | ScrollOptions;
   viewport?: CanvasViewport;
-  throttle?: number;
-  lastNavigateTime?: number;
-  tabindex?: SignalOrPrimitive<number>;
+  tabindex?: SignalOrPrimitive<number> | null;
   tabindexSubscription?: any;
+  pendingIndex?: number;
 }
 
 /**
@@ -89,7 +90,7 @@ export class FocusManager {
     }
   }
 
-  setTabindex(id: string, tabindex: SignalOrPrimitive<number>): void {
+  setTabindex(id: string, tabindex?: SignalOrPrimitive<number> | null): void {
     const container = this.containers.get(id);
     if (!container) return;
 
@@ -98,10 +99,20 @@ export class FocusManager {
       container.tabindexSubscription.unsubscribe();
     }
 
+    if (tabindex === undefined || tabindex === null) {
+      container.tabindex = undefined;
+      return;
+    }
+
     container.tabindex = tabindex;
 
+    const currentTabindex = isSignal(tabindex) ? (tabindex as Signal<number>)() : tabindex;
+    if (typeof currentTabindex === "number") {
+      this.setIndex(id, currentTabindex);
+    }
+
     if (isSignal(tabindex)) {
-      container.tabindexSubscription = (tabindex as Signal<number>).observable.subscribe((value: any) => {
+      container.tabindexSubscription = ((tabindex as Signal<number>).observable as any).subscribe((value: any) => {
         if (value !== null && value !== container.currentIndex()) {
           this.setIndex(id, value);
         }
@@ -136,8 +147,9 @@ export class FocusManager {
 
     // If this is the index we are supposed to be at, set it now
     const currentTabindex = isSignal(container.tabindex) ? (container.tabindex as Signal<number>)() : container.tabindex;
-    if (currentTabindex === index && container.currentIndex() === null) {
-      this.setIndex(containerId, index);
+    if (container.pendingIndex === index || (currentTabindex === index && container.currentIndex() === null)) {
+      container.pendingIndex = undefined;
+      this.applyFocus(container, containerId, index, element);
     }
   }
 
@@ -170,16 +182,6 @@ export class FocusManager {
       return;
     }
 
-    // Handle throttling
-    if (container.throttle) {
-      const now = Date.now();
-      const lastTime = container.lastNavigateTime || 0;
-      if (now - lastTime < container.throttle) {
-        return;
-      }
-      container.lastNavigateTime = now;
-    }
-
     const currentIndex = container.currentIndex();
     const focusableIndices = Array.from(container.focusables.keys()).sort((a, b) => a - b);
 
@@ -211,7 +213,7 @@ export class FocusManager {
 
     if (newIndex !== null) {
       const tabindex = container.tabindex;
-      if (isSignal(tabindex)) {
+      if (isSignal(tabindex) && typeof (tabindex as any).set === "function") {
         (tabindex as any).set(newIndex);
       } else {
         this.setIndex(containerId, newIndex);
@@ -231,16 +233,24 @@ export class FocusManager {
 
     const element = container.focusables.get(index);
     if (!element) {
-      console.warn(`No focusable element at index ${index} in container "${containerId}"`);
+      container.pendingIndex = index;
       return;
     }
+    this.applyFocus(container, containerId, index, element);
+  }
 
+  private applyFocus(
+    container: FocusContainerData,
+    containerId: string,
+    index: number,
+    element: Element
+  ): void {
     container.currentIndex.set(index);
     container.focusedElement.set(element);
 
     // Sync back to tabindex signal if it exists
     const tabindex = container.tabindex;
-    if (isSignal(tabindex) && (tabindex as any)() !== index) {
+    if (isSignal(tabindex) && (tabindex as any)() !== index && typeof (tabindex as any).set === "function") {
       (tabindex as any).set(index);
     }
 
@@ -308,7 +318,7 @@ export class FocusManager {
    */
   getFocusedElementSignal(containerId: string): Signal<Element | null> | null {
     const container = this.containers.get(containerId);
-    return container ? container.focusedElement : null;
+    return container ? (container.focusedElement as unknown as Signal<Element | null>) : null;
   }
 
   /**
@@ -345,10 +355,16 @@ export class FocusManager {
     }
 
     // Get local bounds
-    const localBounds = instance.getLocalBounds();
+    const localBounds = instance.getLocalBounds?.();
+    if (!localBounds) {
+      return { x: 0, y: 0, width: 0, height: 0 };
+    }
 
     // Get global position
-    const globalPos = instance.getGlobalPosition();
+    const globalPos = instance.getGlobalPosition?.();
+    if (!globalPos) {
+      return { x: 0, y: 0, width: 0, height: 0 };
+    }
 
     return {
       x: globalPos.x,
@@ -492,4 +508,3 @@ export class FocusManager {
 
 // Export singleton instance
 export const focusManager = FocusManager.getInstance();
-

package/src/engine/bootstrap.ts

@@ -1,4 +1,3 @@
-import '@pixi/layout';
 import { Application, ApplicationOptions } from "pixi.js";
 import { ComponentFunction, h } from "./signal";
 import { useProps } from '../hooks/useProps';
@@ -31,6 +30,7 @@ export interface BootstrapOptions extends ApplicationOptions {
     [name: string]: any; // ComponentClass
   };
   autoRegister?: boolean; // true by default if components is not provided
+  enableLayout?: boolean; // true by default
 }
 
 /**
@@ -63,7 +63,10 @@ export interface BootstrapOptions extends ApplicationOptions {
  */
 export const bootstrapCanvas = async (rootElement: HTMLElement | null, canvas: ComponentFunction<any>, options?: BootstrapOptions) => {
   // Extract component registration options
-  const { components, autoRegister, ...appOptions } = options ?? {};
+  const { components, autoRegister, enableLayout, ...appOptions } = options ?? {};
+  if (enableLayout !== false) {
+    await import('@pixi/layout');
+  }
   
   // Handle component registration
   if (components) {

package/src/engine/directive.ts

@@ -13,11 +13,11 @@ export function registerDirective(name: string, directive: any) {
     directives[name] = directive
 }
 
-export function applyDirective(element: Element, directiveName: string) {
+export function applyDirective(element: Element<any>, directiveName: string) {
     if (!directives[directiveName]) {
         return null
     }
     const directive = new directives[directiveName]()
     directive.onInit?.(element)
     return directive
-}
+}

package/src/engine/reactive.ts

@@ -81,6 +81,72 @@ export const isPrimitive = (value) => {
   );
 };
 
+const DOM_ROUTING_MAP: Record<string, string> = {
+  Sprite: "DOMSprite",
+};
+
+const DOM_ALLOWED_TAGS = new Set(["DOMContainer", "DOMElement", "DOMSprite"]);
+const DOM_UNSUPPORTED_TAGS = new Set([
+  "Canvas",
+  "Container",
+  "Graphics",
+  "Rect",
+  "Circle",
+  "Ellipse",
+  "Triangle",
+  "Svg",
+  "Mesh",
+  "Scene",
+  "ParticlesEmitter",
+  "Sprite",
+  "Video",
+  "Text",
+  "TilingSprite",
+  "Viewport",
+  "NineSliceSprite",
+  "Button",
+  "Joystick",
+  "FocusContainer",
+]);
+
+const hasDomAncestor = (element: Element | null): boolean => {
+  let current = element;
+  while (current) {
+    if (current.tag === "DOMContainer" || current.tag === "DOMElement") {
+      return true;
+    }
+    current = current.parent;
+  }
+  return false;
+};
+
+const cleanupElementForRouting = (element: Element) => {
+  element.propSubscriptions?.forEach((sub) => sub.unsubscribe());
+  element.effectSubscriptions?.forEach((sub) => sub.unsubscribe());
+  element.effectUnmounts?.forEach((fn) => fn?.());
+};
+
+const routeDomComponent = (parent: Element, child: Element): Element => {
+  if (!hasDomAncestor(parent)) {
+    return child;
+  }
+  if (DOM_ALLOWED_TAGS.has(child.tag)) {
+    return child;
+  }
+  const routedTag = DOM_ROUTING_MAP[child.tag];
+  if (routedTag) {
+    cleanupElementForRouting(child);
+    const routedProps = child.propObservables ?? child.props;
+    return createComponent(routedTag, routedProps);
+  }
+  if (DOM_UNSUPPORTED_TAGS.has(child.tag)) {
+    throw new Error(
+      `Component ${child.tag} is not implemented for DOMContainer context yet. Only Sprite is supported.`
+    );
+  }
+  return child;
+};
+
 export function registerComponent(name, component) {
   components[name] = component;
 }
@@ -609,8 +675,9 @@ export function createComponent(tag: string, props?: Props): Element {
                   // Handle observable component recursively
                   await createElement(parent, c);
                 } else if (isElement(c)) {
-                  onMount(parent, c, index + 1);
-                  propagateContext(c);
+                  const routed = routeDomComponent(parent, c);
+                  onMount(parent, routed, index + 1);
+                  propagateContext(routed);
                 }
               });
               return;
@@ -621,8 +688,9 @@ export function createComponent(tag: string, props?: Props): Element {
                   // Handle observable component recursively
                   await createElement(parent, component);
                 } else if (isElement(component)) {
-                  onMount(parent, component);
-                  propagateContext(component);
+                  const routed = routeDomComponent(parent, component);
+                  onMount(parent, routed);
+                  propagateContext(routed);
                 }
               } else {
                 component.forEach(async (comp) => {
@@ -630,16 +698,18 @@ export function createComponent(tag: string, props?: Props): Element {
                     // Handle observable component recursively
                     await createElement(parent, comp);
                   } else if (isElement(comp)) {
-                    onMount(parent, comp);
-                    propagateContext(comp);
+                    const routed = routeDomComponent(parent, comp);
+                    onMount(parent, routed);
+                    propagateContext(routed);
                   }
                 });
               }
             });
           } else if (isElement(value)) {
             // Handle direct Element emission
-            onMount(parent, value);
-            propagateContext(value);
+            const routed = routeDomComponent(parent, value);
+            onMount(parent, routed);
+            propagateContext(routed);
           } else if (Array.isArray(value)) {
             // Handle array of elements (which can also be observables)
             value.forEach(async (element) => {
@@ -647,8 +717,9 @@ export function createComponent(tag: string, props?: Props): Element {
                 // Handle observable element recursively
                 await createElement(parent, element);
               } else if (isElement(element)) {
-                onMount(parent, element);
-                propagateContext(element);
+                const routed = routeDomComponent(parent, element);
+                onMount(parent, routed);
+                propagateContext(routed);
               }
             });
           }
@@ -659,8 +730,9 @@ export function createComponent(tag: string, props?: Props): Element {
       // Store subscription for cleanup
       parent.effectSubscriptions.push(subscription);
     } else if (isElement(child)) {
-      onMount(parent, child);
-      await propagateContext(child);
+      const routed = routeDomComponent(parent, child);
+      onMount(parent, routed);
+      await propagateContext(routed);
     }
   }
 

package/src/hooks/useFocus.ts

@@ -78,7 +78,7 @@ export function useFocusChange(
   }
 
   // Set up reactive effect
-  const subscription = effect(() => {
+  const effectResult = effect(() => {
     const index = indexSignal();
     const element = elementSignal();
     callback(index, element);
@@ -86,9 +86,6 @@ export function useFocusChange(
 
   // Return cleanup function
   return () => {
-    if (subscription && typeof subscription.unsubscribe === 'function') {
-      subscription.unsubscribe();
-    }
+    effectResult.subscription?.unsubscribe();
   };
 }
-

package/src/index.ts

@@ -14,7 +14,8 @@ export { useProps, useDefineProps } from './hooks/useProps'
 export { useFocusIndex, useFocusedElement, useFocusChange } from './hooks/useFocus'
 export * from './utils/Ease'
 export * from './utils/RadialGradient'
+export * from './utils/tabindex'
 export * from './components/DisplayObject'
 export { isObservable } from 'rxjs'
 export * as Utils from './engine/utils'
-export * as Howl from 'howler'
+export * as Howl from 'howler'

package/src/types/pixi-cull.d.ts

@@ -0,0 +1,7 @@
+declare module "pixi-cull" {
+  export class Simple {
+    constructor(options?: any);
+    lists: Array<any>;
+    cull(bounds: any): void;
+  }
+}

package/src/utils/tabindex.ts

@@ -0,0 +1,70 @@
+import { WritableSignal } from "@signe/reactive";
+
+export type TabindexBoundaryMode = "wrap" | "clamp" | "none";
+
+export type TabindexBounds =
+  | { count: () => number; min?: number }
+  | { min: number; max: number };
+
+type TabindexNavigator = {
+  next: (delta: number) => void;
+  set: (value: number) => void;
+};
+
+function resolveBounds(bounds: TabindexBounds): { min: number; max: number; size: number } | null {
+  if ("count" in bounds) {
+    const count = bounds.count();
+    if (!Number.isFinite(count) || count <= 0) return null;
+    const min = bounds.min ?? 0;
+    const max = min + count - 1;
+    return { min, max, size: count };
+  }
+
+  const min = bounds.min;
+  const max = bounds.max;
+  if (!Number.isFinite(min) || !Number.isFinite(max) || max < min) return null;
+  return { min, max, size: max - min + 1 };
+}
+
+function normalizeValue(
+  value: number,
+  current: number,
+  bounds: { min: number; max: number; size: number },
+  mode: TabindexBoundaryMode
+): number {
+  if (mode === "clamp") {
+    return Math.min(bounds.max, Math.max(bounds.min, value));
+  }
+
+  if (mode === "none") {
+    return value < bounds.min || value > bounds.max ? current : value;
+  }
+
+  // wrap
+  const size = bounds.size;
+  if (size <= 0) return current;
+  const offset = value - bounds.min;
+  const wrapped = ((offset % size) + size) % size;
+  return bounds.min + wrapped;
+}
+
+export function createTabindexNavigator(
+  tabindex: WritableSignal<number>,
+  bounds: TabindexBounds,
+  mode: TabindexBoundaryMode = "wrap"
+): TabindexNavigator {
+  const applyValue = (value: number) => {
+    const current = tabindex();
+    const resolved = resolveBounds(bounds);
+    if (!resolved) return;
+    const nextValue = normalizeValue(value, current, resolved, mode);
+    if (nextValue !== current) {
+      tabindex.set(nextValue);
+    }
+  };
+
+  return {
+    next: (delta: number) => applyValue(tabindex() + delta),
+    set: (value: number) => applyValue(value),
+  };
+}

package/testing/index.ts

@@ -1,12 +1,40 @@
 import { bootstrapCanvas, Canvas, ComponentInstance, Element, h } from "canvasengine";
+import type { Application } from "pixi.js";
 
 export class TestBed {
-    static async createComponent(component: any, props: any = {}, children: any = []): Promise<Element<ComponentInstance>> {
+    private static lastApp: Application | null = null;
+
+    static async createComponent(
+        component: any,
+        props: any = {},
+        children: any = [],
+        options: { enableLayout?: boolean } = {}
+    ): Promise<Element<ComponentInstance>> {
+        if (TestBed.lastApp) {
+            try {
+                TestBed.lastApp.destroy(
+                    { removeView: true },
+                    { children: true, texture: true, textureSource: true, context: true }
+                );
+            } catch {
+                // ignore cleanup errors in test environment
+            }
+            TestBed.lastApp = null;
+        }
+
+        const root = document.getElementById('root');
+        if (root) {
+            root.innerHTML = '';
+        }
+
         const comp = () => h(Canvas, {
             tickStart: false
         }, h(component, props, children))
-        const { canvasElement, app } = await bootstrapCanvas(document.getElementById('root'), comp)
+        const { canvasElement, app } = await bootstrapCanvas(root, comp, {
+            enableLayout: options.enableLayout ?? true
+        })
         app.render()
+        TestBed.lastApp = app as Application;
         return canvasElement.props.children?.[0]
     }
-}
+}

package/tsconfig.json

@@ -5,7 +5,8 @@
     "declaration": true,
     "emitDeclarationOnly": false,
     "declarationMap": true,
-    "rootDir": "src"
+    "rootDir": "src",
+    "module": "ESNext"
   },
   "include": [
     "src/**/*"
@@ -14,4 +15,4 @@
     "dist",
     "node_modules"
   ]
-} 
+}