canvasengine 2.0.0-beta.41 → 2.0.0-beta.43

package/dist/index.js

@@ -1,82 +1,89 @@
-import { h as a } from "./index-BnuKipxl.js";
-import { A as r, _ as o, $ as n, t as l, x as c, v as p, C as S, d as m, Y as u, Z as d, an as g, f as b, D as C, am as k, ak as h, y as j, j as T, G as w, w as D, c as E, I as f, a0 as v, J as y, K as O, M as P, X as V, O as x, P as A, al as B, R as G, H, S as M, g as F, e as J, L as N, B as R, Q as q, U as z, T as I, z as K, b as U, N as L, W as Q, V as W, aj as X, ai as Y, ag as Z, k as _, a7 as $, a5 as aa, a8 as sa, l as ea, ac as ta, ah as ia, m as ra, n as oa, a1 as na, a4 as la, o as ca, i as pa, a2 as Sa, p as ma, ad as ua, q as da, a6 as ga, aa as ba, a9 as Ca, af as ka, a3 as ha, s as ja, ab as Ta, ae as wa, r as Da, a as Ea, u as fa } from "./index-BnuKipxl.js";
+import { h as a } from "./index-B4hYyfVE.js";
+import { A as r, a4 as i, a5 as n, B as l, M as c, H as u, C as p, k as m, a2 as S, a3 as g, au as d, m as C, D as b, at as h, ar as k, N as j, o as E, a7 as T, a as f, G as w, L as D, j as F, I as v, a6 as y, J as O, K as M, U as x, a1 as A, O as P, X as V, as as B, R as G, W as H, S as q, n as I, l as J, Y as N, Q as R, _ as z, $ as K, T as U, P as L, g as Q, Z as W, a0 as X, V as Y, aq as Z, ap as _, an as $, p as aa, ae as sa, ac as ea, af as ta, q as oa, f as ra, aj as ia, ao as na, s as la, t as ca, a8 as ua, ab as pa, v as ma, i as Sa, a9 as ga, w as da, ak as Ca, x as ba, ad as ha, ah as ka, ag as ja, am as Ea, r as Ta, aa as fa, y as wa, ai as Da, al as Fa, z as va, b as ya, e as Oa, c as Ma, d as xa, u as Aa } from "./index-B4hYyfVE.js";
 const e = a.Howler;
 export {
   r as ArraySubject,
-  o as Button,
+  i as Button,
   n as ButtonState,
   l as Canvas,
   c as Circle,
-  p as Container,
-  S as ControlsBase,
+  u as Container,
+  p as ControlsBase,
   m as ControlsDirective,
-  u as DOMContainer,
-  d as DOMElement,
-  g as DisplayObject,
-  b as Drag,
-  C as Drop,
-  k as EVENTS,
-  h as Easing,
+  S as DOMContainer,
+  g as DOMElement,
+  d as DisplayObject,
+  C as Drag,
+  b as Drop,
+  h as EVENTS,
+  k as Easing,
   j as Ellipse,
-  T as Flash,
+  E as Flash,
+  T as FocusContainer,
+  f as FocusManager,
   w as GamepadControls,
   D as Graphics,
-  E as Howl,
+  F as Howl,
   e as Howler,
-  f as Input,
-  v as Joystick,
-  y as JoystickControls,
-  O as KeyboardControls,
-  P as Mesh,
-  V as NineSliceSprite,
-  x as ObjectSubject,
-  A as ParticlesEmitter,
+  v as Input,
+  y as Joystick,
+  O as JoystickControls,
+  M as KeyboardControls,
+  x as Mesh,
+  A as NineSliceSprite,
+  P as ObjectSubject,
+  V as ParticlesEmitter,
   B as RadialGradient,
   G as Rect,
   H as Scene,
-  M as Scheduler,
-  F as Shake,
+  q as Scheduler,
+  I as Shake,
   J as Sound,
   N as Sprite,
   R as Svg,
-  q as Text,
-  z as TilingSprite,
-  I as Transition,
-  K as Triangle,
-  U as Utils,
-  L as Video,
-  Q as Viewport,
-  W as ViewportFollow,
-  X as animatedSequence,
-  Y as animatedSignal,
-  Z as bootstrapCanvas,
-  _ as computed,
-  $ as cond,
-  aa as createComponent,
-  sa as currentSubscriptionsTracker,
-  ea as effect,
-  ta as h,
-  ia as isAnimatedSignal,
-  ra as isArraySubject,
-  oa as isComputed,
-  na as isElement,
-  la as isElementFrozen,
-  ca as isObjectSubject,
-  pa as isObservable,
-  Sa as isPrimitive,
-  ma as isSignal,
-  ua as isTrigger,
-  da as linkedSignal,
-  ga as loop,
-  ba as mount,
-  Ca as mountTracker,
-  ka as on,
-  ha as registerComponent,
-  ja as signal,
-  Ta as tick,
-  wa as trigger,
-  Da as untracked,
-  Ea as useDefineProps,
-  fa as useProps
+  z as Text,
+  K as TilingSprite,
+  U as Transition,
+  L as Triangle,
+  Q as Utils,
+  W as Video,
+  X as Viewport,
+  Y as ViewportFollow,
+  Z as animatedSequence,
+  _ as animatedSignal,
+  $ as bootstrapCanvas,
+  aa as computed,
+  sa as cond,
+  ea as createComponent,
+  ta as currentSubscriptionsTracker,
+  oa as effect,
+  ra as focusManager,
+  ia as h,
+  na as isAnimatedSignal,
+  la as isArraySubject,
+  ca as isComputed,
+  ua as isElement,
+  pa as isElementFrozen,
+  ma as isObjectSubject,
+  Sa as isObservable,
+  ga as isPrimitive,
+  da as isSignal,
+  Ca as isTrigger,
+  ba as linkedSignal,
+  ha as loop,
+  ka as mount,
+  ja as mountTracker,
+  Ea as on,
+  Ta as registerAllComponents,
+  fa as registerComponent,
+  wa as signal,
+  Da as tick,
+  Fa as trigger,
+  va as untracked,
+  ya as useDefineProps,
+  Oa as useFocusChange,
+  Ma as useFocusIndex,
+  xa as useFocusedElement,
+  Aa as useProps
 };
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "canvasengine",
-  "version": "2.0.0-beta.41",
+  "version": "2.0.0-beta.43",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -9,7 +9,7 @@
   },
   "dependencies": {
     "@barvynkoa/particle-emitter": "^0.0.1",
-    "@pixi/layout": "^3.0.2",
+    "@pixi/layout": "^3.2.0",
     "@signe/reactive": "^2.6.0",
     "howler": "^2.2.4",
     "joypad.js": "^2.3.5",

package/src/components/Button.ts

@@ -1,4 +1,4 @@
-import { effect, signal, computed, isSignal } from "@signe/reactive";
+import { effect, signal, computed, isSignal, Signal } from "@signe/reactive";
 import { FederatedPointerEvent } from "pixi.js";
 import { h } from "../engine/signal";
 import { useDefineProps } from "../hooks/useProps";
@@ -95,6 +95,8 @@ export interface ButtonProps {
   background?: Element | any;
   /** Custom children components for button content (takes priority over text if provided) */
   children?: Element[];
+  /** Focus index for the button */
+  tabindex?: number | Signal<number>;
 }
 
 /**
@@ -270,7 +272,7 @@ export function Button(props: ButtonProps) {
       if (!disabled()) {
         isPressed.set(true);
         props.pressDown?.(event);
-        
+
         // Apply control if controls and controlName are provided
         const controls = getControls();
         const name = controlName();
@@ -283,7 +285,7 @@ export function Button(props: ButtonProps) {
       if (!disabled() && isPressed()) {
         isPressed.set(false);
         props.pressUp?.(event);
-        
+
         // Apply control release if controls and controlName are provided
         const controls = getControls();
         const name = controlName();
@@ -295,7 +297,7 @@ export function Button(props: ButtonProps) {
     pointertap: async (event: FederatedPointerEvent) => {
       if (!disabled()) {
         props.click?.(event);
-        
+
         // Apply control if controls and controlName are provided (press and release)
         const controls = getControls();
         const name = controlName();
@@ -388,6 +390,7 @@ export function Button(props: ButtonProps) {
     alpha: props.alpha,
     visible: props.visible,
     cursor: props.cursor || "pointer",
+    tabindex: props.tabindex,
     ...eventHandlers
   }, [
     getBackgroundElement(),

package/src/components/Canvas.ts

@@ -24,7 +24,7 @@ interface CanvasElement extends Element<ComponentInstance> {
   };
 }
 
-registerComponent("Canvas", class Canvas extends DisplayObject(Container) {});
+registerComponent("Canvas", class Canvas extends DisplayObject(Container) { });
 
 export interface CanvasProps extends Props {
   cursorStyles?: () => any;

package/src/components/DOMContainer.ts

@@ -109,12 +109,37 @@ export class CanvasDOMContainer extends DisplayObject(PixiDOMContainer) {
   disableLayout = true;
 
   onInit(props: any) {
-    const div = h(DOMElement, { element: "div" }, props.children) as unknown as Element<CanvasDOMElement>;
+    // Handle internal _scopeClass prop for scoped CSS
+    const scopeClass = props._scopeClass;
+    let divProps: any = { element: "div" };
+
+    if (scopeClass) {
+      // Merge scope class with existing attrs.class
+      divProps.attrs = { ...props.attrs };
+      if (divProps.attrs.class) {
+        // If class exists, merge it with scope class
+        if (typeof divProps.attrs.class === 'string') {
+          divProps.attrs.class = `${scopeClass} ${divProps.attrs.class}`;
+        } else if (Array.isArray(divProps.attrs.class)) {
+          divProps.attrs.class = [scopeClass, ...divProps.attrs.class];
+        } else if (typeof divProps.attrs.class === 'object') {
+          // For object format, add scope class as true
+          divProps.attrs.class = { [scopeClass]: true, ...divProps.attrs.class };
+        }
+      } else {
+        // No existing class, just add scope class
+        divProps.attrs.class = scopeClass;
+      }
+    } else if (props.attrs) {
+      divProps.attrs = props.attrs;
+    }
+
+    const div = h(DOMElement, divProps, props.children) as unknown as Element<CanvasDOMElement>;
     this.element = div.componentInstance.element;
   }
 }
 
-export interface CanvasDOMContainer extends DisplayObjectProps {}
+export interface CanvasDOMContainer extends DisplayObjectProps { }
 
 registerComponent("DOMContainer", CanvasDOMContainer);
 

package/src/components/DOMElement.ts

@@ -12,22 +12,22 @@ import { isSignal } from "@signe/reactive";
 
 interface DOMContainerProps extends DisplayObjectProps {
   element:
-    | string
-    | {
-        value: HTMLElement;
-      };
+  | string
+  | {
+    value: HTMLElement;
+  };
   textContent?: string;
   attrs?: Record<string, any> & {
     class?:
-      | string
-      | string[]
-      | Record<string, boolean>
-      | { items?: string[] }
-      | { value?: string | string[] | Record<string, boolean> };
+    | string
+    | string[]
+    | Record<string, boolean>
+    | { items?: string[] }
+    | { value?: string | string[] | Record<string, boolean> };
     style?:
-      | string
-      | Record<string, string | number>
-      | { value?: string | Record<string, string | number> };
+    | string
+    | Record<string, string | number>
+    | { value?: string | Record<string, string | number> };
   };
   onBeforeDestroy?: OnHook;
 }
@@ -234,11 +234,11 @@ export class CanvasDOMElement {
           // Special handling for form submit events
           if (event === "submit" && this.element.tagName.toLowerCase() === "form") {
             e.preventDefault(); // Stop form submission propagation
-            
+
             // Collect all form data
             const formData = new FormData(this.element as HTMLFormElement);
             const formObject: Record<string, any> = {};
-            
+
             // Convert FormData to plain object
             formData.forEach((value, key) => {
               if (formObject[key]) {
@@ -252,7 +252,7 @@ export class CanvasDOMElement {
                 formObject[key] = value;
               }
             });
-            
+
             // Call the event handler with event and form data
             props.attrs[event]?.(e, formObject);
           } else {
@@ -292,9 +292,9 @@ export class CanvasDOMElement {
       // Set initial value from signal
       (
         this.element as
-          | HTMLInputElement
-          | HTMLTextAreaElement
-          | HTMLSelectElement
+        | HTMLInputElement
+        | HTMLTextAreaElement
+        | HTMLSelectElement
       ).value = this.valueSignal();
 
       // Listen for input events and update the signal
@@ -314,7 +314,15 @@ export class CanvasDOMElement {
   onUpdate(props: DOMContainerProps) {
     if (!this.element) return;
     for (const [key, value] of Object.entries(props.attrs || {})) {
-      if (key === "class") {
+      if (key === "tabindex") {
+        // Handle tabindex attribute
+        const tabindexValue = isSignal(value) ? value() : value;
+        if (tabindexValue !== undefined && tabindexValue !== null) {
+          this.element.setAttribute('tabindex', String(tabindexValue));
+        } else {
+          this.element.removeAttribute('tabindex');
+        }
+      } else if (key === "class") {
         const classList = value.items || value.value || value;
 
         // Clear existing classes first
@@ -355,26 +363,26 @@ export class CanvasDOMElement {
           // Update the DOM element value if the signal value changed
           const currentValue = (
             this.element as
-              | HTMLInputElement
-              | HTMLTextAreaElement
-              | HTMLSelectElement
+            | HTMLInputElement
+            | HTMLTextAreaElement
+            | HTMLSelectElement
           ).value;
           const signalValue = value();
           if (currentValue !== signalValue) {
             (
               this.element as
-                | HTMLInputElement
-                | HTMLTextAreaElement
-                | HTMLSelectElement
+              | HTMLInputElement
+              | HTMLTextAreaElement
+              | HTMLSelectElement
             ).value = signalValue;
           }
         } else {
           // If it's not a signal, set the value directly
           (
             this.element as
-              | HTMLInputElement
-              | HTMLTextAreaElement
-              | HTMLSelectElement
+            | HTMLInputElement
+            | HTMLTextAreaElement
+            | HTMLSelectElement
           ).value = value;
         }
       } else if (!EVENTS.includes(key)) {
@@ -412,7 +420,7 @@ export class CanvasDOMElement {
   }
 }
 
-export interface CanvasDOMElement extends DisplayObjectProps {}
+export interface CanvasDOMElement extends DisplayObjectProps { }
 
 registerComponent("DOMElement", CanvasDOMElement);
 

package/src/components/DisplayObject.ts

@@ -597,15 +597,27 @@ export function DisplayObject(extendClass) {
 
     // Object properties
     setObjectFit(objectFit: ObjectFit) {
-      this.layout = { objectFit };
+      try {
+        this.layout = { objectFit };
+      } catch (error) {
+        // Ignore layout errors in test environments or when yoga-layout is not available
+      }
     }
 
     setObjectPosition(objectPosition: ObjectPosition) {
-      this.layout = { objectPosition };
+      try {
+        this.layout = { objectPosition };
+      } catch (error) {
+        // Ignore layout errors in test environments or when yoga-layout is not available
+      }
     }
 
     setTransformOrigin(transformOrigin: TransformOrigin) {
-      this.layout = { transformOrigin };
+      try {
+        this.layout = { transformOrigin };
+      } catch (error) {
+        // Ignore layout errors in test environments or when yoga-layout is not available
+      }
     }
   };
 }