stylpp 1.0.0

package/src/compiler/animation.js

@@ -0,0 +1,346 @@
+/**
+ * STYL++ Animation Engine
+ * Advanced animation system with easing, timelines, keyframes, and physics
+ * Far exceeds CSS animation capabilities
+ */
+
+class EasingFunctions {
+  static linear(t) {
+    return t;
+  }
+
+  static easeInQuad(t) {
+    return t * t;
+  }
+
+  static easeOutQuad(t) {
+    return t * (2 - t);
+  }
+
+  static easeInOutQuad(t) {
+    return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
+  }
+
+  static easeInCubic(t) {
+    return t * t * t;
+  }
+
+  static easeOutCubic(t) {
+    return 1 + --t * t * t;
+  }
+
+  static easeInOutCubic(t) {
+    return t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * (t - 2)) * (2 * (t - 2)) + 1;
+  }
+
+  static easeInElastic(t) {
+    const c4 = (2 * Math.PI) / 3;
+    return t === 0 ? 0 : t === 1 ? 1 : -Math.pow(2, 10 * t - 10) * Math.sin((t * 10 - 10.75) * c4);
+  }
+
+  static easeOutElastic(t) {
+    const c4 = (2 * Math.PI) / 3;
+    return t === 0 ? 0 : t === 1 ? 1 : Math.pow(2, -10 * t) * Math.sin((t * 10 - 0.75) * c4) + 1;
+  }
+
+  static easeOutBounce(t) {
+    const n1 = 7.5625;
+    const d1 = 2.75;
+    if (t < 1 / d1) {
+      return n1 * t * t;
+    } else if (t < 2 / d1) {
+      return n1 * (t -= 1.5 / d1) * t + 0.75;
+    } else if (t < 2.5 / d1) {
+      return n1 * (t -= 2.25 / d1) * t + 0.9375;
+    } else {
+      return n1 * (t -= 2.625 / d1) * t + 0.984375;
+    }
+  }
+
+  static easeInBounce(t) {
+    return 1 - this.easeOutBounce(1 - t);
+  }
+
+  static easeInOutBounce(t) {
+    return t < 0.5
+      ? (1 - this.easeOutBounce(1 - 2 * t)) / 2
+      : (1 + this.easeOutBounce(2 * t - 1)) / 2;
+  }
+
+  static easeInExpo(t) {
+    return t === 0 ? 0 : Math.pow(2, 10 * t - 10);
+  }
+
+  static easeOutExpo(t) {
+    return t === 1 ? 1 : 1 - Math.pow(2, -10 * t);
+  }
+
+  static easeInOutExpo(t) {
+    return t === 0
+      ? 0
+      : t === 1
+      ? 1
+      : t < 0.5
+      ? Math.pow(2, 20 * t - 10) / 2
+      : (2 - Math.pow(2, -20 * t + 10)) / 2;
+  }
+
+  static easeInCirc(t) {
+    return 1 - Math.sqrt(1 - Math.pow(t, 2));
+  }
+
+  static easeOutCirc(t) {
+    return Math.sqrt(1 - Math.pow(t - 1, 2));
+  }
+
+  static easeInOutCirc(t) {
+    return t < 0.5
+      ? (1 - Math.sqrt(1 - Math.pow(2 * t, 2))) / 2
+      : (Math.sqrt(1 - Math.pow(-2 * t + 2, 2)) + 1) / 2;
+  }
+
+  static cubicBezier(p0, p1, p2, p3, t) {
+    const mt = 1 - t;
+    return (
+      mt * mt * mt * p0 +
+      3 * mt * mt * t * p1 +
+      3 * mt * t * t * p2 +
+      t * t * t * p3
+    );
+  }
+}
+
+class Keyframe {
+  constructor(time, properties = {}, easing = 'linear') {
+    this.time = time;
+    this.properties = properties;
+    this.easing = easing;
+  }
+}
+
+class AnimationTimeline {
+  constructor(duration = 1000) {
+    this.duration = duration;
+    this.keyframes = [];
+    this.currentTime = 0;
+    this.playing = false;
+    this.loop = false;
+    this.speed = 1;
+    this.onUpdate = null;
+    this.onComplete = null;
+  }
+
+  /**
+   * Add keyframe to timeline
+   */
+  addKeyframe(keyframe) {
+    this.keyframes.push(keyframe);
+    this.keyframes.sort((a, b) => a.time - b.time);
+    return this;
+  }
+
+  /**
+   * Add keyframe at time with properties
+   */
+  at(time, properties, easing = 'linear') {
+    this.addKeyframe(new Keyframe(time, properties, easing));
+    return this;
+  }
+
+  /**
+   * Play animation
+   */
+  play() {
+    this.playing = true;
+    this.currentTime = 0;
+    return this;
+  }
+
+  /**
+   * Pause animation
+   */
+  pause() {
+    this.playing = false;
+    return this;
+  }
+
+  /**
+   * Resume animation
+   */
+  resume() {
+    this.playing = true;
+    return this;
+  }
+
+  /**
+   * Stop animation
+   */
+  stop() {
+    this.playing = false;
+    this.currentTime = 0;
+    return this;
+  }
+
+  /**
+   * Update animation state
+   */
+  update(deltaTime) {
+    if (!this.playing) return null;
+
+    this.currentTime += deltaTime * this.speed;
+
+    if (this.currentTime >= this.duration) {
+      if (this.loop) {
+        this.currentTime = 0;
+      } else {
+        this.playing = false;
+        this.currentTime = this.duration;
+        if (this.onComplete) this.onComplete();
+      }
+    }
+
+    const progress = this.currentTime / this.duration;
+    const properties = this.interpolateKeyframes(progress);
+
+    if (this.onUpdate) {
+      this.onUpdate(properties, progress);
+    }
+
+    return properties;
+  }
+
+  /**
+   * Interpolate between keyframes
+   */
+  interpolateKeyframes(progress) {
+    const properties = {};
+
+    // Find surrounding keyframes
+    let before = null;
+    let after = null;
+
+    for (const keyframe of this.keyframes) {
+      if (keyframe.time / this.duration <= progress) {
+        before = keyframe;
+      }
+      if (keyframe.time / this.duration > progress && !after) {
+        after = keyframe;
+      }
+    }
+
+    if (!before) {
+      return this.keyframes[0]?.properties || {};
+    }
+
+    if (!after) {
+      return before.properties;
+    }
+
+    // Interpolate between keyframes
+    const beforeTime = before.time / this.duration;
+    const afterTime = after.time / this.duration;
+    const rangeDuration = afterTime - beforeTime;
+    const relativeProgress = (progress - beforeTime) / rangeDuration;
+
+    const easing = this.getEasingFunction(before.easing);
+    const easedProgress = easing(Math.max(0, Math.min(1, relativeProgress)));
+
+    // Interpolate each property
+    for (const key in after.properties) {
+      const startValue = before.properties[key] || 0;
+      const endValue = after.properties[key];
+
+      if (typeof endValue === 'number') {
+        properties[key] = startValue + (endValue - startValue) * easedProgress;
+      } else {
+        properties[key] = easedProgress < 0.5 ? startValue : endValue;
+      }
+    }
+
+    return properties;
+  }
+
+  /**
+   * Get easing function
+   */
+  getEasingFunction(name) {
+    const easingMap = {
+      linear: EasingFunctions.linear,
+      easeInQuad: EasingFunctions.easeInQuad,
+      easeOutQuad: EasingFunctions.easeOutQuad,
+      easeInOutQuad: EasingFunctions.easeInOutQuad,
+      easeInCubic: EasingFunctions.easeInCubic,
+      easeOutCubic: EasingFunctions.easeOutCubic,
+      easeInOutCubic: EasingFunctions.easeInOutCubic,
+      easeInElastic: EasingFunctions.easeInElastic,
+      easeOutElastic: EasingFunctions.easeOutElastic,
+      easeInBounce: EasingFunctions.easeInBounce,
+      easeOutBounce: EasingFunctions.easeOutBounce,
+      easeInOutBounce: EasingFunctions.easeInOutBounce,
+      easeInExpo: EasingFunctions.easeInExpo,
+      easeOutExpo: EasingFunctions.easeOutExpo,
+      easeInOutExpo: EasingFunctions.easeInOutExpo,
+      easeInCirc: EasingFunctions.easeInCirc,
+      easeOutCirc: EasingFunctions.easeOutCirc,
+      easeInOutCirc: EasingFunctions.easeInOutCirc
+    };
+
+    return easingMap[name] || EasingFunctions.linear;
+  }
+}
+
+class AnimationSequence {
+  constructor() {
+    this.animations = [];
+    this.currentIndex = 0;
+    this.playing = false;
+  }
+
+  /**
+   * Add animation to sequence
+   */
+  add(timeline) {
+    this.animations.push(timeline);
+    return this;
+  }
+
+  /**
+   * Play sequence
+   */
+  play() {
+    this.playing = true;
+    this.currentIndex = 0;
+    if (this.animations[0]) {
+      this.animations[0].play();
+    }
+    return this;
+  }
+
+  /**
+   * Update sequence
+   */
+  update(deltaTime) {
+    if (!this.playing || !this.animations[this.currentIndex]) return null;
+
+    const current = this.animations[this.currentIndex];
+    const result = current.update(deltaTime);
+
+    if (!current.playing) {
+      this.currentIndex++;
+      if (this.currentIndex < this.animations.length) {
+        this.animations[this.currentIndex].play();
+      } else {
+        this.playing = false;
+      }
+    }
+
+    return result;
+  }
+}
+
+module.exports = {
+  EasingFunctions,
+  Keyframe,
+  AnimationTimeline,
+  AnimationSequence
+};

package/src/compiler/effects.js

@@ -0,0 +1,344 @@
+/**
+ * STYL++ 3D & Effects Engine
+ * Advanced 3D transformations, particle effects, and visual filters
+ * Surpasses CSS 3D capabilities
+ */
+
+class Matrix3D {
+  constructor() {
+    // 4x4 identity matrix
+    this.matrix = [
+      [1, 0, 0, 0],
+      [0, 1, 0, 0],
+      [0, 0, 1, 0],
+      [0, 0, 0, 1]
+    ];
+  }
+
+  /**
+   * Create identity matrix
+   */
+  static identity() {
+    return new Matrix3D();
+  }
+
+  /**
+   * Translate
+   */
+  translate(x, y, z = 0) {
+    const translation = [
+      [1, 0, 0, 0],
+      [0, 1, 0, 0],
+      [0, 0, 1, 0],
+      [x, y, z, 1]
+    ];
+    this.multiply(translation);
+    return this;
+  }
+
+  /**
+   * Rotate around X axis
+   */
+  rotateX(angle) {
+    const rad = (angle * Math.PI) / 180;
+    const cos = Math.cos(rad);
+    const sin = Math.sin(rad);
+    const rotation = [
+      [1, 0, 0, 0],
+      [0, cos, -sin, 0],
+      [0, sin, cos, 0],
+      [0, 0, 0, 1]
+    ];
+    this.multiply(rotation);
+    return this;
+  }
+
+  /**
+   * Rotate around Y axis
+   */
+  rotateY(angle) {
+    const rad = (angle * Math.PI) / 180;
+    const cos = Math.cos(rad);
+    const sin = Math.sin(rad);
+    const rotation = [
+      [cos, 0, sin, 0],
+      [0, 1, 0, 0],
+      [-sin, 0, cos, 0],
+      [0, 0, 0, 1]
+    ];
+    this.multiply(rotation);
+    return this;
+  }
+
+  /**
+   * Rotate around Z axis
+   */
+  rotateZ(angle) {
+    const rad = (angle * Math.PI) / 180;
+    const cos = Math.cos(rad);
+    const sin = Math.sin(rad);
+    const rotation = [
+      [cos, -sin, 0, 0],
+      [sin, cos, 0, 0],
+      [0, 0, 1, 0],
+      [0, 0, 0, 1]
+    ];
+    this.multiply(rotation);
+    return this;
+  }
+
+  /**
+   * Scale
+   */
+  scale(x, y = x, z = x) {
+    const scaling = [
+      [x, 0, 0, 0],
+      [0, y, 0, 0],
+      [0, 0, z, 0],
+      [0, 0, 0, 1]
+    ];
+    this.multiply(scaling);
+    return this;
+  }
+
+  /**
+   * Perspective (depth)
+   */
+  perspective(depth) {
+    const perspective = [
+      [1, 0, 0, 0],
+      [0, 1, 0, 0],
+      [0, 0, 1, 0],
+      [0, 0, 1 / depth, 1]
+    ];
+    this.multiply(perspective);
+    return this;
+  }
+
+  /**
+   * Multiply matrices
+   */
+  multiply(other) {
+    const result = [
+      [0, 0, 0, 0],
+      [0, 0, 0, 0],
+      [0, 0, 0, 0],
+      [0, 0, 0, 0]
+    ];
+
+    for (let i = 0; i < 4; i++) {
+      for (let j = 0; j < 4; j++) {
+        for (let k = 0; k < 4; k++) {
+          result[i][j] += this.matrix[i][k] * other[k][j];
+        }
+      }
+    }
+
+    this.matrix = result;
+    return this;
+  }
+
+  /**
+   * Convert to CSS matrix3d
+   */
+  toCSS() {
+    const flat = this.matrix
+      .flat()
+      .map(v => v.toFixed(10))
+      .join(', ');
+    return `matrix3d(${flat})`;
+  }
+
+  /**
+   * Convert to CSS transform string
+   */
+  toString() {
+    return this.toCSS();
+  }
+}
+
+class ParticleSystem {
+  constructor(config = {}) {
+    this.particles = [];
+    this.config = {
+      emission: config.emission || 10,
+      lifetime: config.lifetime || 1000,
+      velocityMin: config.velocityMin || -100,
+      velocityMax: config.velocityMax || 100,
+      gravityY: config.gravityY || 98,
+      friction: config.friction || 0.95,
+      ...config
+    };
+    this.time = 0;
+  }
+
+  /**
+   * Emit particles
+   */
+  emit(x, y, count = this.config.emission) {
+    for (let i = 0; i < count; i++) {
+      const angle = (Math.random() * Math.PI * 2);
+      const velocity = this.config.velocityMin + 
+        Math.random() * (this.config.velocityMax - this.config.velocityMin);
+
+      this.particles.push({
+        x: x,
+        y: y,
+        vx: Math.cos(angle) * velocity,
+        vy: Math.sin(angle) * velocity,
+        age: 0,
+        lifetime: this.config.lifetime + Math.random() * 500,
+        color: this.config.color || `hsl(${Math.random() * 360}, 100%, 50%)`,
+        size: this.config.size || 5,
+        opacity: 1
+      });
+    }
+  }
+
+  /**
+   * Update particles
+   */
+  update(deltaTime) {
+    this.time += deltaTime;
+
+    this.particles = this.particles.filter(p => {
+      p.age += deltaTime;
+
+      if (p.age >= p.lifetime) {
+        return false;
+      }
+
+      // Apply gravity
+      p.vy += this.config.gravityY * deltaTime;
+
+      // Apply friction
+      p.vx *= this.config.friction;
+      p.vy *= this.config.friction;
+
+      // Update position
+      p.x += p.vx * deltaTime;
+      p.y += p.vy * deltaTime;
+
+      // Fade out
+      p.opacity = 1 - p.age / p.lifetime;
+
+      return true;
+    });
+  }
+
+  /**
+   * Get particles as SVG/Canvas drawing commands
+   */
+  getDrawCommands() {
+    return this.particles.map(p => ({
+      x: p.x,
+      y: p.y,
+      size: p.size,
+      color: p.color,
+      opacity: p.opacity
+    }));
+  }
+
+  /**
+   * Get particle count
+   */
+  getCount() {
+    return this.particles.length;
+  }
+}
+
+class AdvancedFilter {
+  /**
+   * Generate advanced CSS filters
+   */
+  static blur(px) {
+    return `blur(${px}px)`;
+  }
+
+  static brightness(percent) {
+    return `brightness(${percent}%)`;
+  }
+
+  static contrast(percent) {
+    return `contrast(${percent}%)`;
+  }
+
+  static grayscale(percent = 100) {
+    return `grayscale(${percent}%)`;
+  }
+
+  static sepia(percent = 100) {
+    return `sepia(${percent}%)`;
+  }
+
+  static hueRotate(degrees) {
+    return `hue-rotate(${degrees}deg)`;
+  }
+
+  static saturate(percent) {
+    return `saturate(${percent}%)`;
+  }
+
+  static invert(percent = 100) {
+    return `invert(${percent}%)`;
+  }
+
+  static dropShadow(x, y, blur, color) {
+    return `drop-shadow(${x}px ${y}px ${blur}px ${color})`;
+  }
+
+  /**
+   * Glass morphism effect
+   */
+  static glassmorphism(blur = 10, opacity = 0.1) {
+    return {
+      backdrop: `blur(${blur}px)`,
+      background: `rgba(255, 255, 255, ${opacity})`,
+      border: '1px solid rgba(255, 255, 255, 0.2)'
+    };
+  }
+
+  /**
+   * Neumorphism effect
+   */
+  static neumorphism(direction = 'raised', color = '#e0e5ec') {
+    if (direction === 'raised') {
+      return {
+        boxShadow: `0.3em 0.3em 0.6em #c8d0e4, -0.2em -0.2em 0.5em #fff`,
+        background: color
+      };
+    } else {
+      return {
+        boxShadow: `inset 0.2em 0.2em 0.5em #c8d0e4, inset -0.2em -0.2em 0.5em #fff`,
+        background: color
+      };
+    }
+  }
+
+  /**
+   * Glow effect
+   */
+  static glow(color, blur = 20) {
+    return {
+      filter: `drop-shadow(0 0 ${blur}px ${color})`,
+      textShadow: `0 0 ${blur}px ${color}`
+    };
+  }
+
+  /**
+   * Morphing animation
+   */
+  static morphing(shapes) {
+    const result = {};
+    shapes.forEach((shape, i) => {
+      result[`morphing-${i}`] = shape;
+    });
+    return result;
+  }
+}
+
+module.exports = {
+  Matrix3D,
+  ParticleSystem,
+  AdvancedFilter
+};