@ssgoi/core 0.0.1 → 0.0.3

package/src/lib/transition.ts

@@ -1,76 +0,0 @@
-import { createTransitionCallback } from "./create-transition-callback";
-import type { Transition, TransitionCallback } from "./types";
-
-/**
- * Key type for transitions - can be string or symbol
- */
-type TransitionKey = string | symbol;
-
-/**
- * Centralized transition management
- * Uses string/symbol keys for all storage
- */
-
-// Map to store transition definitions by key
-const transitionDefinitions = new Map<TransitionKey, Transition>();
-
-// Map to store transition callbacks by key
-const transitionCallbacks = new Map<TransitionKey, TransitionCallback>();
-
-/**
- * Registers a transition with a key and returns the callback
- * Usage: registerTransition('fade', { in: fadeIn, out: fadeOut })
- */
-function registerTransition(
-  key: TransitionKey,
-  transition: Transition
-): TransitionCallback {
-  transitionDefinitions.set(key, transition);
-
-  // Return existing callback if it exists
-  let callback = transitionCallbacks.get(key);
-  if (callback) {
-    return callback;
-  }
-
-  // Create new callback
-  callback = createTransitionCallback(
-    () => {
-      const trans = transitionDefinitions.get(key);
-      if (!trans) {
-        console.warn(`Transition "${String(key)}" not found`);
-        return {};
-      }
-      return trans;
-    },
-    {
-      onCleanupEnd: () => unregisterTransition(key),
-    }
-  );
-  transitionCallbacks.set(key, callback);
-  return callback;
-}
-
-/**
- * Unregisters a transition and cleans up associated resources
- */
-function unregisterTransition(key: TransitionKey): void {
-  transitionDefinitions.delete(key);
-  transitionCallbacks.delete(key);
-}
-
-/**
- * Framework-agnostic transition function that can be used as a ref
- * Usage: <div ref={transition({ key: 'fade', in, out })} />
- */
-export function transition(options: {
-  key: TransitionKey;
-  in?: Transition["in"];
-  out?: Transition["out"];
-}): TransitionCallback {
-  // Register transition and get callback
-  return registerTransition(options.key, {
-    in: options.in,
-    out: options.out,
-  });
-}

package/src/lib/transitions/blur.ts

@@ -1,55 +0,0 @@
-interface BlurOptions {
-  amount?: number;
-  scale?: boolean;
-  fade?: boolean;
-  spring?: {
-    stiffness?: number;
-    damping?: number;
-  };
-}
-
-export const blur = (options: BlurOptions = {}) => {
-  const {
-    amount = 10,
-    scale = false,
-    fade = true,
-    spring = { stiffness: 300, damping: 30 }
-  } = options;
-
-  return {
-    in: (element: HTMLElement) => ({
-      spring,
-      tick: (progress: number) => {
-        const blurValue = (1 - progress) * amount;
-        const filters = [`blur(${blurValue}px)`];
-        
-        element.style.filter = filters.join(' ');
-        
-        if (scale) {
-          element.style.transform = `scale(${0.8 + progress * 0.2})`;
-        }
-        
-        if (fade) {
-          element.style.opacity = progress.toString();
-        }
-      }
-    }),
-    out: (element: HTMLElement) => ({
-      spring,
-      tick: (progress: number) => {
-        const blurValue = (1 - progress) * amount;
-        const filters = [`blur(${blurValue}px)`];
-        
-        element.style.filter = filters.join(' ');
-        
-        if (scale) {
-          element.style.transform = `scale(${0.8 + progress * 0.2})`;
-        }
-        
-        if (fade) {
-          element.style.opacity = progress.toString();
-        }
-      }
-    })
-  };
-};

package/src/lib/transitions/bounce.ts

@@ -1,61 +0,0 @@
-interface BounceOptions {
-  height?: number;
-  scale?: boolean;
-  fade?: boolean;
-  spring?: {
-    stiffness?: number;
-    damping?: number;
-  };
-}
-
-export const bounce = (options: BounceOptions = {}) => {
-  const {
-    height = 20,
-    scale = true,
-    fade = false,
-    spring = { stiffness: 800, damping: 15 }
-  } = options;
-
-  return {
-    in: (element: HTMLElement) => ({
-      spring,
-      tick: (progress: number) => {
-        const transforms = [];
-        
-        // Bounce effect using sine wave
-        const bounceOffset = Math.sin(progress * Math.PI) * height * (1 - progress);
-        transforms.push(`translateY(${-bounceOffset}px)`);
-        
-        if (scale) {
-          transforms.push(`scale(${0.8 + progress * 0.2})`);
-        }
-        
-        element.style.transform = transforms.join(' ');
-        
-        if (fade) {
-          element.style.opacity = progress.toString();
-        }
-      }
-    }),
-    out: (element: HTMLElement) => ({
-      spring,
-      tick: (progress: number) => {
-        const transforms = [];
-        
-        // Bounce effect using sine wave
-        const bounceOffset = Math.sin(progress * Math.PI) * height * (1 - progress);
-        transforms.push(`translateY(${-bounceOffset}px)`);
-        
-        if (scale) {
-          transforms.push(`scale(${0.8 + progress * 0.2})`);
-        }
-        
-        element.style.transform = transforms.join(' ');
-        
-        if (fade) {
-          element.style.opacity = progress.toString();
-        }
-      }
-    })
-  };
-};

package/src/lib/transitions/fade.ts

@@ -1,33 +0,0 @@
-interface FadeOptions {
-  from?: number;
-  to?: number;
-  spring?: {
-    stiffness?: number;
-    damping?: number;
-  };
-}
-
-export const fade = (options: FadeOptions = {}) => {
-  const {
-    from = 0,
-    to = 1,
-    spring = { stiffness: 300, damping: 30 }
-  } = options;
-
-  return {
-    in: (element: HTMLElement) => ({
-      spring,
-      tick: (progress: number) => {
-        const opacity = from + (to - from) * progress;
-        element.style.opacity = opacity.toString();
-      }
-    }),
-    out: (element: HTMLElement) => ({
-      spring,
-      tick: (progress: number) => {
-        const opacity = from + (to - from) * progress;
-        element.style.opacity = opacity.toString();
-      }
-    })
-  };
-};

package/src/lib/transitions/index.ts

@@ -1,7 +0,0 @@
-export * from './fade';
-export * from './scale';
-export * from './slide';
-export * from './rotate';
-export * from './bounce';
-export * from './blur';
-export * from './none';

package/src/lib/transitions/none.ts

@@ -1,27 +0,0 @@
-interface NoneOptions {
-  spring?: {
-    stiffness?: number;
-    damping?: number;
-  };
-}
-
-export const none = (options: NoneOptions = {}) => {
-  const {
-    spring = { stiffness: 1000, damping: 100 }
-  } = options;
-
-  return {
-    in: (_element: HTMLElement) => ({
-      spring,
-      tick: (_progress: number) => {
-        // No animation, just instantly show
-      }
-    }),
-    out: (_element: HTMLElement) => ({
-      spring,
-      tick: (_progress: number) => {
-        // No animation, just instantly hide
-      }
-    })
-  };
-};

package/src/lib/transitions/rotate.ts

@@ -1,57 +0,0 @@
-interface RotateOptions {
-  degrees?: number;
-  clockwise?: boolean;
-  scale?: boolean;
-  fade?: boolean;
-  spring?: {
-    stiffness?: number;
-    damping?: number;
-  };
-}
-
-export const rotate = (options: RotateOptions = {}) => {
-  const {
-    degrees = 360,
-    clockwise = true,
-    scale = false,
-    fade = false,
-    spring = { stiffness: 500, damping: 25 }
-  } = options;
-
-  const rotation = clockwise ? degrees : -degrees;
-
-  return {
-    in: (element: HTMLElement) => ({
-      spring,
-      tick: (progress: number) => {
-        const transforms = [`rotate(${progress * rotation}deg)`];
-        
-        if (scale) {
-          transforms.push(`scale(${progress})`);
-        }
-        
-        element.style.transform = transforms.join(' ');
-        
-        if (fade) {
-          element.style.opacity = progress.toString();
-        }
-      }
-    }),
-    out: (element: HTMLElement) => ({
-      spring,
-      tick: (progress: number) => {
-        const transforms = [`rotate(${progress * rotation}deg)`];
-        
-        if (scale) {
-          transforms.push(`scale(${progress})`);
-        }
-        
-        element.style.transform = transforms.join(' ');
-        
-        if (fade) {
-          element.style.opacity = progress.toString();
-        }
-      }
-    })
-  };
-};

package/src/lib/transitions/scale.ts

@@ -1,34 +0,0 @@
-interface ScaleOptions {
-  duration?: number;
-  from?: number;
-  to?: number;
-  spring?: {
-    stiffness?: number;
-    damping?: number;
-  };
-}
-
-export const scale = (options: ScaleOptions = {}) => {
-  const {
-    from = 0,
-    to = 1,
-    spring = { stiffness: 300, damping: 30 }
-  } = options;
-
-  return {
-    in: (element: HTMLElement) => ({
-      spring,
-      tick: (progress: number) => {
-        const value = from + (to - from) * progress;
-        element.style.transform = `scale(${value})`;
-      }
-    }),
-    out: (element: HTMLElement) => ({
-      spring,
-      tick: (progress: number) => {
-        const value = from + (to - from) * progress;
-        element.style.transform = `scale(${value})`;
-      }
-    })
-  };
-};

package/src/lib/transitions/slide.ts

@@ -1,53 +0,0 @@
-interface SlideOptions {
-  direction?: 'left' | 'right' | 'up' | 'down';
-  distance?: number;
-  fade?: boolean;
-  spring?: {
-    stiffness?: number;
-    damping?: number;
-  };
-}
-
-export const slide = (options: SlideOptions = {}) => {
-  const {
-    direction = 'left',
-    distance = 100,
-    fade = true,
-    spring = { stiffness: 400, damping: 35 }
-  } = options;
-
-  const getTransform = (progress: number) => {
-    const offset = (1 - progress) * distance;
-    switch (direction) {
-      case 'left':
-        return `translateX(${-offset}px)`;
-      case 'right':
-        return `translateX(${offset}px)`;
-      case 'up':
-        return `translateY(${-offset}px)`;
-      case 'down':
-        return `translateY(${offset}px)`;
-    }
-  };
-
-  return {
-    in: (element: HTMLElement) => ({
-      spring,
-      tick: (progress: number) => {
-        element.style.transform = getTransform(progress);
-        if (fade) {
-          element.style.opacity = progress.toString();
-        }
-      }
-    }),
-    out: (element: HTMLElement) => ({
-      spring,
-      tick: (progress: number) => {
-        element.style.transform = getTransform(progress);
-        if (fade) {
-          element.style.opacity = progress.toString();
-        }
-      }
-    })
-  };
-};

package/src/lib/types.ts

@@ -1,60 +0,0 @@
-export type TransitionKey = string | symbol;
-
-export type SpringConfig = {
-  stiffness?: number;
-  damping?: number;
-};
-
-export type TransitionConfig = {
-  // Spring physics configuration
-  spring?: SpringConfig; // Default: { stiffness: 300, damping: 30 }
-
-  // Callback for each frame with progress value (0-1)
-  tick?: (progress: number) => void;
-
-  // Prepare element before animation (typically for out transitions)
-  prepare?: (element: HTMLElement) => void;
-
-  // Called when animation starts
-  onStart?: () => void;
-
-  // Called when animation ends
-  onEnd?: () => void;
-};
-
-export type GetTransitionConfig<TContext = undefined> =
-  TContext extends undefined
-    ? (node: HTMLElement) => TransitionConfig | Promise<TransitionConfig>
-    : (
-        node: HTMLElement,
-        context: TContext
-      ) => TransitionConfig | Promise<TransitionConfig>;
-
-export type Transition<TContext = undefined> = {
-  in?: GetTransitionConfig<TContext>;
-  out?: GetTransitionConfig<TContext>;
-};
-
-export type TransitionCallback = (
-  element: HTMLElement | null
-) => void | (() => void);
-
-export type SggoiTransitionContext = {
-  scrollOffset: { x: number; y: number };
-};
-
-export type SggoiTransition = Transition<SggoiTransitionContext>;
-
-export type SsgoiConfig = {
-  transitions: {
-    from: string;
-    to: string;
-    transition: SggoiTransition;
-    symmetric?: boolean;
-  }[];
-  defaultTransition?: SggoiTransition;
-};
-
-export type SsgoiContext = (
-  path: string
-) => Transition & { key: TransitionKey };

package/src/lib/utils.ts

@@ -1,39 +0,0 @@
-/**
- * Applies common styles for outgoing page elements
- * Makes the element absolute positioned to allow the incoming page to take its place
- */
-export const prepareOutgoing = (element: HTMLElement): void => {
-  element.style.position = "absolute";
-  element.style.width = "100%";
-  element.style.top = "0";
-  element.style.left = "0";
-};
-
-/**
- * Gets the scrolling element that contains the given element
- * Returns the first scrollable parent element or document.documentElement
- */
-export const getScrollingElement = (element: HTMLElement): HTMLElement => {
-  let current = element.parentElement;
-  
-  while (current && current !== document.body) {
-    const style = window.getComputedStyle(current);
-    const overflow = style.overflow + style.overflowY + style.overflowX;
-    
-    // Check if element is scrollable
-    if (overflow.includes('auto') || overflow.includes('scroll')) {
-      return current;
-    }
-    
-    // Also check if element has scroll even without explicit overflow
-    if (current.scrollHeight > current.clientHeight || 
-        current.scrollWidth > current.clientWidth) {
-      return current;
-    }
-    
-    current = current.parentElement;
-  }
-  
-  // Return document element as fallback (handles body/html scrolling)
-  return document.documentElement;
-};

package/src/lib/view-transitions/fade.ts

@@ -1,29 +0,0 @@
-import type { SpringConfig, SggoiTransition } from "../types";
-import { prepareOutgoing } from "../utils";
-
-interface FadeOptions {
-  spring?: Partial<SpringConfig>;
-}
-
-export const fade = (options: FadeOptions = {}): SggoiTransition => {
-  const spring: SpringConfig = {
-    stiffness: options.spring?.stiffness ?? 300,
-    damping: options.spring?.damping ?? 30,
-  };
-
-  return {
-    in: (element) => ({
-      spring,
-      tick: (progress) => {
-        element.style.opacity = progress.toString();
-      },
-    }),
-    out: (element) => ({
-      spring,
-      tick: (progress) => {
-        element.style.opacity = progress.toString();
-      },
-      prepare: prepareOutgoing,
-    }),
-  };
-};