stylpp 1.0.0

package/src/compiler/physics.js

@@ -0,0 +1,286 @@
+/**
+ * STYL++ Physics Engine
+ * Provides physics-based animations, constraints, and layout calculations
+ * Transcends CSS limitations with real physics simulation
+ */
+
+class PhysicsEngine {
+  constructor(options = {}) {
+    this.options = {
+      gravity: 9.81,
+      damping: 0.9,
+      friction: 0.2,
+      timeStep: 0.016,
+      iterations: 4,
+      ...options
+    };
+
+    this.bodies = new Map();
+    this.constraints = new Map();
+    this.forces = new Map();
+    this.time = 0;
+  }
+
+  /**
+   * Create a physics body for an element
+   * @param {string} id - Element ID
+   * @param {Object} config - Body configuration
+   */
+  createBody(id, config = {}) {
+    const body = {
+      id,
+      position: { x: config.x || 0, y: config.y || 0 },
+      velocity: { x: config.vx || 0, y: config.vy || 0 },
+      acceleration: { x: 0, y: 0 },
+      mass: config.mass || 1,
+      bounce: config.bounce || 0.6,
+      friction: config.friction || this.options.friction,
+      pinned: config.pinned || false,
+      width: config.width || 0,
+      height: config.height || 0,
+      constraints: []
+    };
+
+    this.bodies.set(id, body);
+    return body;
+  }
+
+  /**
+   * Add force to body (gravity, wind, custom forces)
+   * @param {string} bodyId - Body ID
+   * @param {Object} force - Force vector {x, y}
+   */
+  addForce(bodyId, force) {
+    const body = this.bodies.get(bodyId);
+    if (!body) return;
+
+    body.acceleration.x += force.x / body.mass;
+    body.acceleration.y += force.y / body.mass;
+  }
+
+  /**
+   * Create constraint between bodies (springs, rods, etc.)
+   * @param {string} id - Constraint ID
+   * @param {string} body1Id - First body ID
+   * @param {string} body2Id - Second body ID
+   * @param {Object} config - Constraint configuration
+   */
+  createConstraint(id, body1Id, body2Id, config = {}) {
+    const constraint = {
+      id,
+      body1Id,
+      body2Id,
+      type: config.type || 'spring', // 'spring', 'rod', 'distance', 'angle'
+      restLength: config.restLength || 100,
+      stiffness: config.stiffness || 0.5,
+      damping: config.damping || 0.3,
+      maxForce: config.maxForce || 1000
+    };
+
+    this.constraints.set(id, constraint);
+    const body1 = this.bodies.get(body1Id);
+    if (body1) body1.constraints.push(id);
+    return constraint;
+  }
+
+  /**
+   * Spring-based layout constraint
+   * Simulates attractive/repulsive forces between elements
+   */
+  createSpringLayout(elementIds, config = {}) {
+    const stiffness = config.stiffness || 0.3;
+    const damping = config.damping || 0.2;
+    const restDistance = config.restDistance || 150;
+
+    for (let i = 0; i < elementIds.length; i++) {
+      for (let j = i + 1; j < elementIds.length; j++) {
+        this.createConstraint(
+          `spring-${i}-${j}`,
+          elementIds[i],
+          elementIds[j],
+          {
+            type: 'spring',
+            restLength: restDistance,
+            stiffness: stiffness,
+            damping: damping
+          }
+        );
+      }
+    }
+  }
+
+  /**
+   * Simulate gravity field
+   */
+  simulateGravity() {
+    this.bodies.forEach((body) => {
+      if (!body.pinned) {
+        this.addForce(body.id, { x: 0, y: this.options.gravity * body.mass });
+      }
+    });
+  }
+
+  /**
+   * Apply Verlet integration for physics simulation
+   */
+  step(deltaTime = this.options.timeStep) {
+    // Apply gravity
+    this.simulateGravity();
+
+    // Update velocity and position (Verlet)
+    this.bodies.forEach((body) => {
+      if (body.pinned) return;
+
+      // Apply damping
+      body.velocity.x *= this.options.damping;
+      body.velocity.y *= this.options.damping;
+
+      // Update velocity
+      body.velocity.x += body.acceleration.x * deltaTime;
+      body.velocity.y += body.acceleration.y * deltaTime;
+
+      // Update position
+      body.position.x += body.velocity.x * deltaTime;
+      body.position.y += body.velocity.y * deltaTime;
+
+      // Reset acceleration
+      body.acceleration.x = 0;
+      body.acceleration.y = 0;
+    });
+
+    // Resolve constraints
+    for (let i = 0; i < this.options.iterations; i++) {
+      this.constraints.forEach((constraint) => {
+        this.resolveConstraint(constraint);
+      });
+    }
+
+    this.time += deltaTime;
+  }
+
+  /**
+   * Resolve a constraint
+   */
+  resolveConstraint(constraint) {
+    const body1 = this.bodies.get(constraint.body1Id);
+    const body2 = this.bodies.get(constraint.body2Id);
+
+    if (!body1 || !body2) return;
+
+    const dx = body2.position.x - body1.position.x;
+    const dy = body2.position.y - body1.position.y;
+    const distance = Math.sqrt(dx * dx + dy * dy);
+
+    if (constraint.type === 'spring') {
+      this.resolveSpring(body1, body2, constraint, distance);
+    } else if (constraint.type === 'rod') {
+      this.resolveRod(body1, body2, constraint, distance);
+    } else if (constraint.type === 'distance') {
+      this.resolveDistance(body1, body2, constraint, distance);
+    }
+  }
+
+  /**
+   * Resolve spring constraint
+   */
+  resolveSpring(body1, body2, constraint, distance) {
+    const dx = body2.position.x - body1.position.x;
+    const dy = body2.position.y - body1.position.y;
+
+    if (distance === 0) return;
+
+    // Spring force: F = -k * (d - r)
+    const force = -constraint.stiffness * (distance - constraint.restLength);
+    const fx = (force * dx) / distance;
+    const fy = (force * dy) / distance;
+
+    // Apply damping
+    const dvx = body2.velocity.x - body1.velocity.x;
+    const dvy = body2.velocity.y - body1.velocity.y;
+    const dampingForce =
+      constraint.damping * ((dvx * dx + dvy * dy) / distance);
+
+    if (!body1.pinned) {
+      body1.acceleration.x += (fx + dampingForce * dx / distance) / body1.mass;
+      body1.acceleration.y += (fy + dampingForce * dy / distance) / body1.mass;
+    }
+
+    if (!body2.pinned) {
+      body2.acceleration.x -= (fx + dampingForce * dx / distance) / body2.mass;
+      body2.acceleration.y -= (fy + dampingForce * dy / distance) / body2.mass;
+    }
+  }
+
+  /**
+   * Resolve rod constraint (fixed distance)
+   */
+  resolveRod(body1, body2, constraint, distance) {
+    const dx = body2.position.x - body1.position.x;
+    const dy = body2.position.y - body1.position.y;
+
+    if (distance === 0) return;
+
+    const delta = (distance - constraint.restLength) / distance;
+
+    if (!body1.pinned) {
+      body1.position.x += (delta * dx) / 2;
+      body1.position.y += (delta * dy) / 2;
+    }
+
+    if (!body2.pinned) {
+      body2.position.x -= (delta * dx) / 2;
+      body2.position.y -= (delta * dy) / 2;
+    }
+  }
+
+  /**
+   * Resolve distance constraint
+   */
+  resolveDistance(body1, body2, constraint, distance) {
+    const targetDistance = constraint.restLength;
+
+    if (distance > targetDistance) {
+      const dx = body2.position.x - body1.position.x;
+      const dy = body2.position.y - body1.position.y;
+      const delta = (distance - targetDistance) / distance;
+
+      if (!body1.pinned) {
+        body1.position.x += (delta * dx) / 2;
+        body1.position.y += (delta * dy) / 2;
+      }
+
+      if (!body2.pinned) {
+        body2.position.x -= (delta * dx) / 2;
+        body2.position.y -= (delta * dy) / 2;
+      }
+    }
+  }
+
+  /**
+   * Get body state
+   */
+  getBodyState(id) {
+    return this.bodies.get(id);
+  }
+
+  /**
+   * Simulate multiple steps at once
+   */
+  simulate(steps = 60) {
+    for (let i = 0; i < steps; i++) {
+      this.step();
+    }
+  }
+
+  /**
+   * Convert physics state to CSS transforms
+   */
+  toCSS(bodyId) {
+    const body = this.bodies.get(bodyId);
+    if (!body) return '';
+
+    return `transform: translate3d(${body.position.x.toFixed(2)}px, ${body.position.y.toFixed(2)}px, 0);`;
+  }
+}
+
+module.exports = PhysicsEngine;

package/src/compiler/transformer.js

@@ -0,0 +1,228 @@
+/**
+ * STYL++ Transformer
+ * Transforms the AST to handle:
+ * - Variable resolution
+ * - Math operations
+ * - Loop expansion
+ * - Conditional processing
+ * - Function expansion
+ */
+
+class StylppTransformer {
+  constructor(options = {}) {
+    this.options = options;
+    this.variables = {};
+    this.errors = [];
+  }
+
+  /**
+   * Transform AST
+   * @param {Object} ast - Original AST
+   * @returns {Object} Transformed AST
+   */
+  transform(ast) {
+    // First pass: collect all variables
+    this.variables = { ...ast.variables };
+
+    // Second pass: transform rules
+    const transformedRules = ast.rules.map(rule => this.transformRule(rule));
+
+    return {
+      type: 'stylesheet',
+      rules: transformedRules,
+      variables: this.variables
+    };
+  }
+
+  /**
+   * Transform a single rule
+   * @param {Object} rule - Rule object
+   * @returns {Object} Transformed rule
+   */
+  transformRule(rule) {
+    const transformed = {
+      type: rule.type,
+      selector: rule.selector,
+      declarations: [],
+      rules: []
+    };
+
+    // Transform declarations
+    if (rule.declarations) {
+      rule.declarations.forEach(decl => {
+        const transformedDecl = this.transformDeclaration(decl);
+        if (Array.isArray(transformedDecl)) {
+          transformed.declarations.push(...transformedDecl);
+        } else {
+          transformed.declarations.push(transformedDecl);
+        }
+      });
+    }
+
+    // Transform nested rules
+    if (rule.rules) {
+      rule.rules.forEach(nestedRule => {
+        const transformed = this.transformRule(nestedRule);
+        if (Array.isArray(transformed)) {
+          transformed.forEach(r => rule.rules.push(r));
+        } else {
+          rule.rules.push(transformed);
+        }
+      });
+      transformed.rules = rule.rules;
+    }
+
+    return transformed;
+  }
+
+  /**
+   * Transform a declaration (property-value pair)
+   * @param {Object} decl - Declaration object
+   * @returns {Object|Array} Transformed declaration(s)
+   */
+  transformDeclaration(decl) {
+    let value = decl.value;
+
+    // Resolve variables
+    value = this.resolveVariables(value);
+
+    // Handle math operations
+    if (this.hasMathOperation(value)) {
+      value = this.processMathOperation(value);
+    }
+
+    // Handle responsive values
+    if (this.isResponsiveValue(value)) {
+      value = this.processResponsiveValue(value);
+    }
+
+    // Handle color operations
+    if (this.isColorOperation(value)) {
+      value = this.processColorOperation(value);
+    }
+
+    return {
+      type: 'declaration',
+      property: decl.property,
+      value: value
+    };
+  }
+
+  /**
+   * Resolve variables in value (e.g., var(primary) -> #007bff)
+   * @param {string} value - Value string
+   * @returns {string} Resolved value
+   */
+  resolveVariables(value) {
+    return value.replace(/var\((\w+)\)/g, (match, varName) => {
+      return this.variables[varName] || match;
+    });
+  }
+
+  /**
+   * Check if value contains math operations
+   * @param {string} value - Value string
+   * @returns {boolean}
+   */
+  hasMathOperation(value) {
+    return /[\+\-\*\/\^]/.test(value) && /\d/.test(value);
+  }
+
+  /**
+   * Process math operations: 100% - 40px -> calc(100% - 40px)
+   * @param {string} value - Value with math
+   * @returns {string} CSS calc expression
+   */
+  processMathOperation(value) {
+    // Already has calc? Return as-is
+    if (value.includes('calc(')) return value;
+
+    // Check for mathematical expressions
+    const mathPattern = /^[\d\w\s\+\-\*\/\%\(\)\.]+$/;
+    if (mathPattern.test(value.replace(/px|em|rem|%|vh|vw|ex|ch|deg|s|ms/g, ''))) {
+      return `calc(${value})`;
+    }
+
+    return value;
+  }
+
+  /**
+   * Check if value is a responsive function
+   * @param {string} value - Value string
+   * @returns {boolean}
+   */
+  isResponsiveValue(value) {
+    return /responsive\(|fluid\(/.test(value);
+  }
+
+  /**
+   * Process responsive value: responsive(300px, 800px) -> clamp(...)
+   * @param {string} value - Value string
+   * @returns {string} Clamp expression
+   */
+  processResponsiveValue(value) {
+    // responsive(300px, 800px) -> clamp(300px, 50vw + 100px, 800px)
+    const match = value.match(/responsive\(([^,]+),\s*([^)]+)\)/);
+    if (match) {
+      const min = match[1].trim();
+      const max = match[2].trim();
+      const mid = `${(parseInt(min) + parseInt(max)) / 4}px`;
+      return `clamp(${min}, 50vw + ${mid}, ${max})`;
+    }
+
+    // fluid(300px, 800px)
+    const fluidMatch = value.match(/fluid\(([^,]+),\s*([^)]+)\)/);
+    if (fluidMatch) {
+      const min = fluidMatch[1].trim();
+      const max = fluidMatch[2].trim();
+      return `clamp(${min}, 5vw, ${max})`;
+    }
+
+    return value;
+  }
+
+  /**
+   * Check if value uses color operations
+   * @param {string} value - Value string
+   * @returns {boolean}
+   */
+  isColorOperation(value) {
+    return /darken\(|lighten\(|mix\(/.test(value);
+  }
+
+  /**
+   * Process color operations
+   * @param {string} value - Value string
+   * @returns {string} Processed color
+   */
+  processColorOperation(value) {
+    // darken(#007bff, 20%) - simplified implementation
+    const darkenMatch = value.match(/darken\(([^,]+),\s*(\d+)%\)/);
+    if (darkenMatch) {
+      const color = darkenMatch[1].trim();
+      const amount = parseInt(darkenMatch[2]);
+      // Simple approximation - in real implementation would use color library
+      return `${color}`;
+    }
+
+    return value;
+  }
+
+  /**
+   * Expand for loops
+   * @param {Object} rule - Rule with for loop
+   * @param {number} iterations - Number of iterations
+   * @returns {Array} Expanded rules
+   */
+  expandForLoop(rule, iterations) {
+    const expanded = [];
+    for (let i = 0; i < iterations; i++) {
+      const expandedRule = { ...rule };
+      expandedRule.selector = rule.selector.replace(/{i}/g, i);
+      expanded.push(expandedRule);
+    }
+    return expanded;
+  }
+}
+
+module.exports = StylppTransformer;