snice 1.6.0 → 1.8.0

package/README.md

@@ -37,6 +37,8 @@ Snice provides a clear separation of concerns through decorators:
 - **`@query`** - Queries a single element from shadow DOM
 - **`@queryAll`** - Queries multiple elements from shadow DOM
 - **`@watch`** - Watches property changes and calls a method when they occur
+- **`@ready`** - Runs a method after the element's shadow DOM is ready
+- **`@dispose`** - Runs a method when the element is removed from the DOM
 
 ### Event Decorators
 - **`@on`** - Listens for events on elements
@@ -559,8 +561,9 @@ class UserProfile extends HTMLElement {
     const user = await (yield { userId: 123 });
     return user;
   }
-  
-  async connectedCallback() {
+
+  @ready()
+  async load() {
     const userData = await this.getUser();
     this.displayUser(userData);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "snice",
-  "version": "1.6.0",
+  "version": "1.8.0",
   "type": "module",
   "description": "A TypeScript library",
   "main": "src/index.ts",

package/src/controller.ts

@@ -1,6 +1,6 @@
 import { setupEventHandlers, cleanupEventHandlers } from './events';
 import { setupChannelHandlers, cleanupChannelHandlers } from './channel';
-import { IS_CONTROLLER_CLASS, CONTROLLER_KEY, CONTROLLER_NAME_KEY, CONTROLLER_ID, CONTROLLER_OPERATIONS, NATIVE_CONTROLLER, IS_ELEMENT_CLASS, ROUTER_CONTEXT } from './symbols';
+import { IS_CONTROLLER_CLASS, IS_CONTROLLER_INSTANCE, CONTROLLER_KEY, CONTROLLER_NAME_KEY, CONTROLLER_ID, CONTROLLER_OPERATIONS, NATIVE_CONTROLLER, IS_ELEMENT_CLASS, ROUTER_CONTEXT } from './symbols';
 import { snice } from './global';
 
 type Maybe<T> = T | null | undefined;
@@ -107,6 +107,8 @@ export async function attachController(element: HTMLElement, controllerName: str
   const controllerId = snice.controllerIdCounter;
   const scope = new ControllerScope();
   
+  // Mark this as a controller instance
+  (controllerInstance as any)[IS_CONTROLLER_INSTANCE] = true;
   (controllerInstance as any)[CONTROLLER_ID] = controllerId;
   controllerInstance.element = element;
   

package/src/element.ts

@@ -1,6 +1,6 @@
 import { attachController, detachController } from './controller';
 import { setupEventHandlers, cleanupEventHandlers } from './events';
-import { IS_ELEMENT_CLASS, READY_PROMISE, READY_RESOLVE, CONTROLLER, PROPERTIES, PROPERTY_VALUES, PROPERTIES_INITIALIZED, PROPERTY_WATCHERS, EXPLICITLY_SET_PROPERTIES, ROUTER_CONTEXT } from './symbols';
+import { IS_ELEMENT_CLASS, IS_CONTROLLER_INSTANCE, READY_PROMISE, READY_RESOLVE, CONTROLLER, PROPERTIES, PROPERTY_VALUES, PROPERTIES_INITIALIZED, PROPERTY_WATCHERS, EXPLICITLY_SET_PROPERTIES, ROUTER_CONTEXT, READY_HANDLERS, DISPOSE_HANDLERS } from './symbols';
 
 /**
  * Applies core element functionality to a constructor
@@ -106,7 +106,7 @@ export function applyElementFunctionality(constructor: any) {
                 this[EXPLICITLY_SET_PROPERTIES].add(propName);
                 
                 if (propOptions.type === Boolean) {
-                  this[propName] = attrValue !== null;
+                  this[propName] = attrValue !== null && attrValue !== 'false';
                 } else if (propOptions.type === Number) {
                   this[propName] = Number(attrValue);
                 } else {
@@ -193,6 +193,18 @@ export function applyElementFunctionality(constructor: any) {
         }
         // Setup @on event handlers - use element for host events, shadow root for delegated events
         setupEventHandlers(this, this);
+        
+        // Call @ready handlers after everything is set up
+        const readyHandlers = constructor[READY_HANDLERS];
+        if (readyHandlers) {
+          for (const handler of readyHandlers) {
+            try {
+              await handler.method.call(this);
+            } catch (error) {
+              console.error(`Error in @ready handler ${handler.methodName}:`, error);
+            }
+          }
+        }
       } finally {
         // Always mark element as ready, even if there were errors
         if (this[READY_RESOLVE]) {
@@ -202,8 +214,20 @@ export function applyElementFunctionality(constructor: any) {
       }
     };
     
-    constructor.prototype.disconnectedCallback = function() {
-      // Call original user-defined disconnectedCallback first
+    constructor.prototype.disconnectedCallback = async function() {
+      // Call @dispose handlers
+      const disposeHandlers = constructor[DISPOSE_HANDLERS];
+      if (disposeHandlers) {
+        for (const handler of disposeHandlers) {
+          try {
+            await handler.method.call(this);
+          } catch (error) {
+            console.error(`Error in @dispose handler ${handler.methodName}:`, error);
+          }
+        }
+      }
+      
+      // Call original user-defined disconnectedCallback
       if (originalDisconnectedCallback) {
         originalDisconnectedCallback.call(this);
       }
@@ -234,7 +258,7 @@ export function applyElementFunctionality(constructor: any) {
                 // Parse the new value based on type
                 let parsedValue: any;
                 if (propOptions.type === Boolean) {
-                  parsedValue = newValue !== null;
+                  parsedValue = newValue !== null && newValue !== 'false';
                 } else if (propOptions.type === Number) {
                   parsedValue = Number(newValue);
                 } else {
@@ -370,17 +394,34 @@ export function property(options?: PropertyOptions) {
   };
 }
 
-export function query(selector: string) {
+export interface QueryOptions {
+  light?: boolean;
+  shadow?: boolean;
+}
+
+export function query(selector: string, options: QueryOptions = {}) {
   return function (target: any, propertyKey: string) {
+    // Default to shadow DOM only
+    const { light = false, shadow = true } = options;
+    
     Object.defineProperty(target, propertyKey, {
       get() {
-        // For elements with shadow DOM, query within shadow root
-        // For controllers, check the element's shadow root first
-        const root = this.element || this;
-        if (root.shadowRoot) {
-          return root.shadowRoot.querySelector(selector);
+        // Check if this is a controller using the symbol
+        const isController = this[IS_CONTROLLER_INSTANCE] === true;
+        const root = isController && this.element ? this.element : this;
+        
+        // Query in specified contexts
+        let result = null;
+        
+        if (shadow && root.shadowRoot) {
+          result = root.shadowRoot.querySelector(selector);
+        }
+        
+        if (!result && light) {
+          result = root.querySelector(selector);
         }
-        return root.querySelector(selector);
+        
+        return result || null;
       },
       enumerable: true,
       configurable: true,
@@ -388,17 +429,32 @@ export function query(selector: string) {
   };
 }
 
-export function queryAll(selector: string) {
+export function queryAll(selector: string, options: QueryOptions = {}) {
   return function (target: any, propertyKey: string) {
+    // Default to shadow DOM only
+    const { light = false, shadow = true } = options;
+    
     Object.defineProperty(target, propertyKey, {
       get() {
-        // For elements with shadow DOM, query within shadow root
-        // For controllers, check the element's shadow root first
-        const root = this.element || this;
-        if (root.shadowRoot) {
-          return root.shadowRoot.querySelectorAll(selector);
+        // Check if this is a controller using the symbol
+        const isController = this[IS_CONTROLLER_INSTANCE] === true;
+        const root = isController && this.element ? this.element : this;
+        
+        // Query in specified contexts and combine results
+        const results: Element[] = [];
+        
+        if (shadow && root.shadowRoot) {
+          const shadowResults = root.shadowRoot.querySelectorAll(selector);
+          results.push(...shadowResults);
+        }
+        
+        if (light) {
+          const lightResults = root.querySelectorAll(selector);
+          results.push(...lightResults);
         }
-        return root.querySelectorAll(selector);
+        
+        // Return a static NodeList-like object
+        return results as any as NodeListOf<Element>;
       },
       enumerable: true,
       configurable: true,
@@ -495,4 +551,47 @@ export function context() {
       configurable: true
     });
   };
+}
+
+/**
+ * Decorator for methods that should run when element is ready
+ * Runs after shadow DOM, controller attachment, and event setup
+ * Supports async methods
+ */
+export function ready() {
+  return function (target: any, methodName: string, descriptor: PropertyDescriptor) {
+    const constructor = target.constructor;
+    
+    if (!constructor[READY_HANDLERS]) {
+      constructor[READY_HANDLERS] = [];
+    }
+    
+    constructor[READY_HANDLERS].push({
+      methodName,
+      method: descriptor.value
+    });
+    
+    return descriptor;
+  };
+}
+
+/**
+ * Decorator for methods that should run when element is being disposed
+ * Used for cleanup tasks when element is removed from DOM
+ */
+export function dispose() {
+  return function (target: any, methodName: string, descriptor: PropertyDescriptor) {
+    const constructor = target.constructor;
+    
+    if (!constructor[DISPOSE_HANDLERS]) {
+      constructor[DISPOSE_HANDLERS] = [];
+    }
+    
+    constructor[DISPOSE_HANDLERS].push({
+      methodName,
+      method: descriptor.value
+    });
+    
+    return descriptor;
+  };
 }

package/src/index.ts

@@ -1,10 +1,12 @@
-export { element, customElement, property, query, queryAll, watch, context, applyElementFunctionality } from './element';
+export { element, customElement, property, query, queryAll, watch, context, applyElementFunctionality, ready, dispose } from './element';
 export { Router } from './router';
 export { controller, attachController, detachController, getController, useNativeElementControllers, cleanupNativeElementControllers } from './controller';
 export { on, dispatch } from './events';
 export { channel } from './channel';
-export type { PropertyOptions, PropertyConverter } from './element';
-export type { RouterOptions, PageOptions, PageTransition, Guard, RouteParams, RouterInstance } from './router';
+export { IS_CONTROLLER_INSTANCE } from './symbols';
+export type { Transition } from './transitions';
+export type { PropertyOptions, PropertyConverter, QueryOptions } from './element';
+export type { RouterOptions, PageOptions, Guard, RouteParams, RouterInstance } from './router';
 export type { IController, ControllerClass } from './controller';
 export type { DispatchOptions } from './events';
 export type { ChannelOptions } from './channel';

package/src/router.ts

@@ -1,6 +1,7 @@
 import Route from 'route-parser';
 import { applyElementFunctionality } from './element';
-import { ROUTER_CONTEXT, CONTEXT_REQUEST_HANDLER } from './symbols';
+import { ROUTER_CONTEXT, CONTEXT_REQUEST_HANDLER, PAGE_TRANSITION } from './symbols';
+import { Transition, performTransition as performTransitionUtil } from './transitions';
 
 /**
  * Route parameters extracted from the URL
@@ -39,7 +40,7 @@ export interface RouterOptions {
   /**
    * Global transition configuration for all pages
    */
-  transition?: PageTransition;
+  transition?: Transition;
   
   /**
    * Optional context object passed to guard functions
@@ -47,38 +48,6 @@ export interface RouterOptions {
   context?: any;
 }
 
-export interface PageTransition {
-  /**
-   * Name of the transition (for CSS class naming)
-   */
-  name?: string;
-  
-  /**
-   * Duration of the out transition in ms
-   */
-  outDuration?: number;
-  
-  /**
-   * Duration of the in transition in ms
-   */
-  inDuration?: number;
-  
-  /**
-   * CSS classes or styles for the out transition
-   */
-  out?: string;
-  
-  /**
-   * CSS classes or styles for the in transition
-   */
-  in?: string;
-  
-  /**
-   * Mode: 'sequential' (out then in) or 'simultaneous' (both at once)
-   */
-  mode?: 'sequential' | 'simultaneous';
-}
-
 export interface PageOptions {
   /**
    * The tag name of the custom element.
@@ -96,7 +65,7 @@ export interface PageOptions {
   /**
    * Optional per-page transition override
    */
-  transition?: PageTransition;
+  transition?: Transition;
   
   /**
    * Guard functions that must pass for navigation to proceed.
@@ -112,7 +81,7 @@ export interface RouterInstance {
   page: (pageOptions: PageOptions) => <C extends { new(...args: any[]): HTMLElement }>(constructor: C) => void;
   initialize: () => void;
   navigate: (path: string) => Promise<void>;
-  register: (route: string, tag: string, transition?: PageTransition, guards?: Guard<any> | Guard<any>[]) => void;
+  register: (route: string, tag: string, transition?: Transition, guards?: Guard<any> | Guard<any>[]) => void;
   context: any;
 }
 
@@ -122,7 +91,7 @@ export interface RouterInstance {
  * @returns An object containing the router's API methods.
  */
 export function Router(options: RouterOptions): RouterInstance {
-  const routes: { route: Route, tag: string, transition?: PageTransition, guards?: Guard<any> | Guard<any>[] }[] = [];
+  const routes: { route: Route, tag: string, transition?: Transition, guards?: Guard<any> | Guard<any>[] }[] = [];
   let is_sorted = false;
 
   let _404: string; // the 404 page
@@ -142,7 +111,7 @@ export function Router(options: RouterOptions): RouterInstance {
       applyElementFunctionality(constructor);
       
       // Store transition config on constructor for later use
-      (constructor as any).__transition = pageOptions.transition;
+      (constructor as any)[PAGE_TRANSITION] = pageOptions.transition;
       
       // Extend the connectedCallback to add router-specific functionality
       const elementConnectedCallback = constructor.prototype.connectedCallback;
@@ -196,7 +165,7 @@ export function Router(options: RouterOptions): RouterInstance {
    * @example
    * register('/custom-route', 'custom-element');
    */
-  function register(route: string, tag: string, transition?: PageTransition, guards?: Guard<any> | Guard<any>[]): void {
+  function register(route: string, tag: string, transition?: Transition, guards?: Guard<any> | Guard<any>[]): void {
     routes.push({ route: new Route(route), tag, transition, guards });
     is_sorted = false;
 
@@ -277,7 +246,7 @@ export function Router(options: RouterOptions): RouterInstance {
     }
 
     let newPageElement: HTMLElement | null = null;
-    let transition: PageTransition | undefined;
+    let transition: Transition | undefined;
     let guards: Guard<any> | Guard<any>[] | undefined;
 
     // Home
@@ -318,7 +287,7 @@ export function Router(options: RouterOptions): RouterInstance {
       // Store context on the page element
       (newPageElement as any)[ROUTER_CONTEXT] = context;
       const constructor = customElements.get(home);
-      transition = (constructor as any)?.__transition;
+      transition = (constructor as any)?.[PAGE_TRANSITION];
     } else {
 
       // Get the current route
@@ -372,7 +341,7 @@ export function Router(options: RouterOptions): RouterInstance {
         // Store context on 404 page too
         (newPageElement as any)[ROUTER_CONTEXT] = context;
         const constructor = customElements.get(_404);
-        transition = (constructor as any)?.__transition;
+        transition = (constructor as any)?.[PAGE_TRANSITION];
       } else {
         // Provide a default 404 page
         const div = document.createElement('div');
@@ -403,83 +372,9 @@ export function Router(options: RouterOptions): RouterInstance {
     container: Element,
     oldElement: HTMLElement,
     newElement: HTMLElement,
-    transition: PageTransition
+    transition: Transition
   ): Promise<void> {
-    const outDuration = transition.outDuration || 300;
-    const inDuration = transition.inDuration || 300;
-    const mode = transition.mode || 'sequential';
-
-    // Parse CSS properties from transition config
-    const parseStyles = (styleString: string): Record<string, string> => {
-      const styles: Record<string, string> = {};
-      styleString.split(';').forEach(rule => {
-        const [prop, value] = rule.split(':').map(s => s.trim());
-        if (prop && value) {
-          styles[prop] = value;
-        }
-      });
-      return styles;
-    };
-
-    // Default transitions
-    const outStyles = transition.out ? parseStyles(transition.out) : { opacity: '0' };
-    const inStartStyles = { opacity: '0' }; // Always start invisible
-    const inEndStyles = transition.in ? parseStyles(transition.in) : { opacity: '1' };
-
-    // Set container to relative positioning to allow absolute positioning of pages
-    const containerStyle = (container as HTMLElement).style;
-    const originalPosition = containerStyle.position;
-    containerStyle.position = 'relative';
-
-    // Style old element for transition
-    oldElement.style.position = 'absolute';
-    oldElement.style.top = '0';
-    oldElement.style.left = '0';
-    oldElement.style.width = '100%';
-    oldElement.style.transition = `all ${outDuration}ms ease-in-out`;
-
-    // Style new element with initial state
-    newElement.style.position = 'absolute';
-    newElement.style.top = '0';
-    newElement.style.left = '0';
-    newElement.style.width = '100%';
-    Object.assign(newElement.style, inStartStyles);
-    newElement.style.transition = `all ${inDuration}ms ease-in-out`;
-
-    // Add new element to container
-    container.appendChild(newElement);
-
-    // Force browser to calculate styles
-    void newElement.offsetHeight;
-
-    if (mode === 'simultaneous') {
-      // Start both transitions at once
-      Object.assign(oldElement.style, outStyles);
-      Object.assign(newElement.style, inEndStyles);
-      
-      // Wait for both transitions to complete
-      await new Promise(resolve => setTimeout(resolve, Math.max(outDuration, inDuration)));
-    } else {
-      // Sequential: transition out old, then transition in new
-      Object.assign(oldElement.style, outStyles);
-      await new Promise(resolve => setTimeout(resolve, outDuration));
-      
-      Object.assign(newElement.style, inEndStyles);
-      await new Promise(resolve => setTimeout(resolve, inDuration));
-    }
-
-    // Cleanup
-    oldElement.remove();
-    newElement.style.position = '';
-    newElement.style.top = '';
-    newElement.style.left = '';
-    newElement.style.width = '';
-    newElement.style.transition = '';
-    // Reset any transition styles
-    Object.keys({...inStartStyles, ...inEndStyles}).forEach(prop => {
-      newElement.style[prop as any] = '';
-    });
-    containerStyle.position = originalPosition;
+    return performTransitionUtil(container, oldElement, newElement, transition);
   }
 
   return { 

package/src/symbols.ts

@@ -4,6 +4,7 @@
 import { getSymbol } from './global';
 
 export const IS_CONTROLLER_CLASS = getSymbol('is-controller-class');
+export const IS_CONTROLLER_INSTANCE = getSymbol('is-controller-instance');
 export const IS_ELEMENT_CLASS = getSymbol('is-element-class');
 export const CHANNEL_HANDLERS = getSymbol('channel-handlers');
 
@@ -34,4 +35,9 @@ export const EXPLICITLY_SET_PROPERTIES = getSymbol('explicitly-set-properties');
 
 // Router context symbol
 export const ROUTER_CONTEXT = getSymbol('router-context');
-export const CONTEXT_REQUEST_HANDLER = getSymbol('context-request-handler');
+export const CONTEXT_REQUEST_HANDLER = getSymbol('context-request-handler');
+export const PAGE_TRANSITION = getSymbol('page-transition');
+
+// Lifecycle symbols
+export const READY_HANDLERS = getSymbol('ready-handlers');
+export const DISPOSE_HANDLERS = getSymbol('dispose-handlers');

package/src/transitions.ts

@@ -0,0 +1,231 @@
+/**
+ * Generic transition system for animating between elements
+ */
+
+export interface Transition {
+  /**
+   * Name of the transition (for identification)
+   */
+  name?: string;
+  
+  /**
+   * Duration of the out transition in ms
+   */
+  outDuration?: number;
+  
+  /**
+   * Duration of the in transition in ms
+   */
+  inDuration?: number;
+  
+  /**
+   * CSS properties for the out transition (as string)
+   * Example: 'opacity: 0; transform: scale(0.9)'
+   */
+  out?: string;
+  
+  /**
+   * CSS properties for the in transition (as string)
+   * Example: 'opacity: 1; transform: scale(1)'
+   */
+  in?: string;
+  
+  /**
+   * Transition mode:
+   * - 'sequential': out transition completes before in transition starts
+   * - 'simultaneous': both transitions happen at the same time
+   */
+  mode?: 'sequential' | 'simultaneous';
+}
+
+/**
+ * Parse CSS property string into an object
+ */
+function parseStyles(styleString: string): Record<string, string> {
+  const styles: Record<string, string> = {};
+  styleString.split(';').forEach(rule => {
+    const [prop, value] = rule.split(':').map(s => s.trim());
+    if (prop && value) {
+      styles[prop] = value;
+    }
+  });
+  return styles;
+}
+
+/**
+ * Perform a transition between two elements
+ */
+export async function performTransition(
+  container: Element,
+  oldElement: HTMLElement,
+  newElement: HTMLElement,
+  transition: Transition = {}
+): Promise<void> {
+  const outDuration = transition.outDuration || 300;
+  const inDuration = transition.inDuration || 300;
+  const mode = transition.mode || 'sequential';
+
+  // Default transitions
+  const outStyles = transition.out ? parseStyles(transition.out) : { opacity: '0' };
+  const inStartStyles = { opacity: '0' }; // Always start invisible
+  const inEndStyles = transition.in ? parseStyles(transition.in) : { opacity: '1' };
+
+  // Set container to relative positioning to allow absolute positioning
+  const containerStyle = (container as HTMLElement).style;
+  const originalPosition = containerStyle.position;
+  containerStyle.position = 'relative';
+
+  // Style old element for transition
+  oldElement.style.position = 'absolute';
+  oldElement.style.top = '0';
+  oldElement.style.left = '0';
+  oldElement.style.width = '100%';
+  oldElement.style.transition = `all ${outDuration}ms ease-in-out`;
+
+  // Style new element with initial state
+  newElement.style.position = 'absolute';
+  newElement.style.top = '0';
+  newElement.style.left = '0';
+  newElement.style.width = '100%';
+  Object.assign(newElement.style, inStartStyles);
+  newElement.style.transition = `all ${inDuration}ms ease-in-out`;
+
+  // Add new element to container
+  container.appendChild(newElement);
+
+  // Force browser to calculate styles
+  void newElement.offsetHeight;
+
+  if (mode === 'simultaneous') {
+    // Start both transitions at once
+    Object.assign(oldElement.style, outStyles);
+    Object.assign(newElement.style, inEndStyles);
+    
+    // Wait for both transitions to complete
+    await new Promise(resolve => setTimeout(resolve, Math.max(outDuration, inDuration)));
+  } else {
+    // Sequential: transition out old, then transition in new
+    Object.assign(oldElement.style, outStyles);
+    await new Promise(resolve => setTimeout(resolve, outDuration));
+    
+    Object.assign(newElement.style, inEndStyles);
+    await new Promise(resolve => setTimeout(resolve, inDuration));
+  }
+
+  // Cleanup
+  oldElement.remove();
+  newElement.style.position = '';
+  newElement.style.top = '';
+  newElement.style.left = '';
+  newElement.style.width = '';
+  newElement.style.transition = '';
+  // Reset any transition styles
+  Object.keys({...inStartStyles, ...inEndStyles}).forEach(prop => {
+    newElement.style[prop as any] = '';
+  });
+  containerStyle.position = originalPosition;
+}
+
+/**
+ * Predefined transitions
+ */
+
+// Fade transition
+export const fadeTransition: Transition = {
+  name: 'fade',
+  outDuration: 200,
+  inDuration: 200,
+  out: 'opacity: 0',
+  in: 'opacity: 1',
+  mode: 'simultaneous'
+};
+
+// Slide transition (from left)
+export const slideTransition: Transition = {
+  name: 'slide',
+  outDuration: 300,
+  inDuration: 300,
+  out: 'transform: translateX(-100%)',
+  in: 'transform: translateX(0)',
+  mode: 'sequential'
+};
+
+// Slide from right
+export const slideRightTransition: Transition = {
+  name: 'slide-right',
+  outDuration: 300,
+  inDuration: 300,
+  out: 'transform: translateX(100%)',
+  in: 'transform: translateX(0)',
+  mode: 'sequential'
+};
+
+// Slide from top
+export const slideUpTransition: Transition = {
+  name: 'slide-up',
+  outDuration: 300,
+  inDuration: 300,
+  out: 'transform: translateY(-100%)',
+  in: 'transform: translateY(0)',
+  mode: 'sequential'
+};
+
+// Slide from bottom
+export const slideDownTransition: Transition = {
+  name: 'slide-down',
+  outDuration: 300,
+  inDuration: 300,
+  out: 'transform: translateY(100%)',
+  in: 'transform: translateY(0)',
+  mode: 'sequential'
+};
+
+// Scale transition
+export const scaleTransition: Transition = {
+  name: 'scale',
+  outDuration: 250,
+  inDuration: 250,
+  out: 'transform: scale(0.9); opacity: 0',
+  in: 'transform: scale(1); opacity: 1',
+  mode: 'simultaneous'
+};
+
+// Rotate transition
+export const rotateTransition: Transition = {
+  name: 'rotate',
+  outDuration: 400,
+  inDuration: 400,
+  out: 'transform: rotate(180deg) scale(0.5); opacity: 0',
+  in: 'transform: rotate(0) scale(1); opacity: 1',
+  mode: 'simultaneous'
+};
+
+// Flip transition
+export const flipTransition: Transition = {
+  name: 'flip',
+  outDuration: 400,
+  inDuration: 400,
+  out: 'transform: rotateY(180deg); opacity: 0',
+  in: 'transform: rotateY(0); opacity: 1',
+  mode: 'sequential'
+};
+
+// Zoom transition
+export const zoomTransition: Transition = {
+  name: 'zoom',
+  outDuration: 300,
+  inDuration: 300,
+  out: 'transform: scale(2); opacity: 0',
+  in: 'transform: scale(1); opacity: 1',
+  mode: 'simultaneous'
+};
+
+// None transition (instant swap)
+export const noneTransition: Transition = {
+  name: 'none',
+  outDuration: 0,
+  inDuration: 0,
+  out: '',
+  in: '',
+  mode: 'simultaneous'
+};