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

package/src/engine/reactive.ts

@@ -9,6 +9,7 @@ import {
   map,
   of,
   share,
+  shareReplay,
   switchMap,
   debounceTime,
   distinctUntilChanged,
@@ -84,6 +85,41 @@ export function registerComponent(name, component) {
   components[name] = component;
 }
 
+// Track if components have been registered to avoid duplicate imports
+let componentsRegistered = false;
+
+/**
+ * Registers all default CanvasEngine components.
+ * 
+ * This function imports and registers all core components that are available by default.
+ * It's called automatically by bootstrapCanvas() if no custom component configuration is provided.
+ * 
+ * Components register themselves when their modules are imported, so this function ensures
+ * all component modules are loaded. Since components call registerComponent() at module load time,
+ * importing them will automatically register them synchronously.
+ * 
+ * @example
+ * ```typescript
+ * // Register all default components manually
+ * registerAllComponents();
+ * 
+ * // Now you can use any component
+ * const sprite = createComponent('Sprite', { image: 'hero.png' });
+ * ```
+ */
+export function registerAllComponents() {
+  if (componentsRegistered) {
+    return;
+  }
+
+  // Components are registered when their modules are imported
+  // Since bootstrap.ts imports all components, they should already be registered
+  // when bootstrapCanvas() is called. This function just marks that registration
+  // has been attempted. If components aren't registered yet, they will be when
+  // bootstrap.ts imports them (which happens before bootstrapCanvas() is called).
+  componentsRegistered = true;
+}
+
 /**
  * Checks if an element is currently frozen.
  * An element is frozen when the `freeze` prop is set to `true` (either as a boolean or Signal<boolean>),
@@ -94,10 +130,10 @@ export function registerComponent(name, component) {
  */
 export function isElementFrozen(element: Element): boolean {
   if (!element) return false;
-  
+
   // Check if this element itself is frozen
   const freezeProp = element.propObservables?.freeze ?? element.props?.freeze;
-  
+
   if (freezeProp !== undefined && freezeProp !== null) {
     // Handle Signal<boolean>
     if (isSignal(freezeProp)) {
@@ -109,12 +145,12 @@ export function isElementFrozen(element: Element): boolean {
       return true;
     }
   }
-  
+
   // Check if any parent is frozen (recursive check)
   if (element.parent) {
     return isElementFrozen(element.parent);
   }
-  
+
   return false;
 }
 
@@ -126,7 +162,7 @@ export function isElementFrozen(element: Element): boolean {
  */
 function handleAnimatedSignalsFreeze(element: Element, shouldPause: boolean) {
   if (!element.propObservables) return;
-  
+
   const processValue = (value: any) => {
     if (isSignal(value) && isAnimatedSignal(value as any)) {
       const animatedSig = value as unknown as AnimatedSignal<any>;
@@ -140,7 +176,7 @@ function handleAnimatedSignalsFreeze(element: Element, shouldPause: boolean) {
       Object.values(value).forEach(processValue);
     }
   };
-  
+
   Object.values(element.propObservables).forEach(processValue);
 }
 
@@ -237,19 +273,19 @@ export function createComponent(tag: string, props?: Props): Element {
             }
             return;
           }
-          
+
           // Handle freeze prop as signal
           if (key === "freeze") {
             element.isFrozen = _value() === true;
-            
+
             // Pause/resume animatedSignals based on initial freeze state
             handleAnimatedSignalsFreeze(element, element.isFrozen);
-            
+
             element.propSubscriptions.push(
               _value.observable.subscribe((freezeValue) => {
                 const wasFrozen = element.isFrozen;
                 element.isFrozen = freezeValue === true;
-                
+
                 // Handle animatedSignal pause/resume when freeze state changes
                 if (wasFrozen !== element.isFrozen) {
                   handleAnimatedSignalsFreeze(element, element.isFrozen);
@@ -258,7 +294,7 @@ export function createComponent(tag: string, props?: Props): Element {
             );
             return;
           }
-          
+
           element.propSubscriptions.push(
             _value.observable.subscribe((value) => {
               // Block updates if element is frozen
@@ -269,12 +305,12 @@ export function createComponent(tag: string, props?: Props): Element {
                 }
                 return;
               }
-              
+
               // Resume animatedSignal if it was paused
               if (isAnimatedSignal(_value as any)) {
                 (_value as unknown as AnimatedSignal<any>).resume();
               }
-              
+
               _set(path, key, value);
               if (element.directives[key]) {
                 element.directives[key].onUpdate?.(value, element);
@@ -289,8 +325,8 @@ export function createComponent(tag: string, props?: Props): Element {
               instance.onUpdate?.(
                 path == ""
                   ? {
-                      [key]: value,
-                    }
+                    [key]: value,
+                  }
                   : set({}, path + "." + key, value)
               );
             })
@@ -299,7 +335,7 @@ export function createComponent(tag: string, props?: Props): Element {
           // Handle freeze prop as direct boolean
           if (key === "freeze") {
             element.isFrozen = value === true;
-            
+
             // Pause/resume animatedSignals based on freeze state
             handleAnimatedSignalsFreeze(element, element.isFrozen);
           }
@@ -422,7 +458,7 @@ export function createComponent(tag: string, props?: Props): Element {
 
     element.props.context = actualParent.props.context;
     element.parent = actualParent;
-    
+
     // Inherit freeze state from parent if element doesn't have its own freeze prop
     if (!element.propObservables?.freeze && !element.props?.freeze && isElementFrozen(actualParent)) {
       element.isFrozen = true;
@@ -812,7 +848,7 @@ export function loop<T>(
         elements.forEach(el => destroyElement(el));
       };
     });
-  });
+  }).pipe(shareReplay({ bufferSize: 1, refCount: true }));
 }
 
 /**

package/src/hooks/useFocus.ts

@@ -0,0 +1,94 @@
+import { Signal } from "@signe/reactive";
+import { Element } from "../engine/reactive";
+import { focusManager } from "../engine/FocusManager";
+import { effect } from "@signe/reactive";
+
+/**
+ * Get the current focus index signal for a container
+ * 
+ * Returns a reactive signal that updates when the focus index changes.
+ * 
+ * @param containerId - Container identifier
+ * @returns Signal for current focus index, or null if container not found
+ * 
+ * @example
+ * ```typescript
+ * const focusIndex = useFocusIndex('myContainer');
+ * effect(() => {
+ *   console.log('Current focus index:', focusIndex?.());
+ * });
+ * ```
+ */
+export function useFocusIndex(containerId: string): Signal<number | null> | null {
+  return focusManager.getCurrentIndexSignal(containerId);
+}
+
+/**
+ * Get the current focused element signal for a container
+ * 
+ * Returns a reactive signal that updates when the focused element changes.
+ * 
+ * @param containerId - Container identifier
+ * @returns Signal for current focused element, or null if container not found
+ * 
+ * @example
+ * ```typescript
+ * const focusedElement = useFocusedElement('myContainer');
+ * effect(() => {
+ *   const element = focusedElement?.();
+ *   if (element) {
+ *     console.log('Focused element:', element);
+ *   }
+ * });
+ * ```
+ */
+export function useFocusedElement(containerId: string): Signal<Element | null> | null {
+  return focusManager.getFocusedElementSignal(containerId);
+}
+
+/**
+ * Hook to react to focus changes
+ * 
+ * Sets up a reactive effect that calls the callback whenever the focus changes.
+ * 
+ * @param containerId - Container identifier
+ * @param callback - Function to call when focus changes
+ * @returns Cleanup function to unsubscribe
+ * 
+ * @example
+ * ```typescript
+ * useFocusChange('myContainer', (index, element) => {
+ *   console.log('Focus changed to index', index);
+ *   if (element) {
+ *     console.log('Focused element:', element);
+ *   }
+ * });
+ * ```
+ */
+export function useFocusChange(
+  containerId: string,
+  callback: (index: number | null, element: Element | null) => void
+): () => void {
+  const indexSignal = focusManager.getCurrentIndexSignal(containerId);
+  const elementSignal = focusManager.getFocusedElementSignal(containerId);
+
+  if (!indexSignal || !elementSignal) {
+    console.warn(`FocusContainer with id "${containerId}" not found`);
+    return () => {};
+  }
+
+  // Set up reactive effect
+  const subscription = effect(() => {
+    const index = indexSignal();
+    const element = elementSignal();
+    callback(index, element);
+  });
+
+  // Return cleanup function
+  return () => {
+    if (subscription && typeof subscription.unsubscribe === 'function') {
+      subscription.unsubscribe();
+    }
+  };
+}
+

package/src/index.ts

@@ -4,11 +4,14 @@ export * from '@signe/reactive'
 export { Howler } from 'howler'
 export * from './components'
 export * from './engine/reactive'
+export { registerAllComponents } from './engine/reactive'
 export * from './engine/signal'
 export * from './engine/trigger'
 export * from './engine/bootstrap'
 export * from './engine/animation'
+export { FocusManager, focusManager, type ScrollOptions } from './engine/FocusManager'
 export { useProps, useDefineProps } from './hooks/useProps'
+export { useFocusIndex, useFocusedElement, useFocusChange } from './hooks/useFocus'
 export * from './utils/Ease'
 export * from './utils/RadialGradient'
 export * from './components/DisplayObject'