@pinepaper.studio/mcp-server 1.6.28 → 1.6.30

package/dist/tools/p5-compat/p5-helpers.js

@@ -13,366 +13,373 @@
  * - Mode: rectMode, ellipseMode
  * - Constants: PI, TWO_PI, HALF_PI, QUARTER_PI, CENTER, CORNER
  */
+import { capabilityAllowed, capabilityRefusal } from '../../utils/capabilities.js';
 /**
  * Browser-side p5.js compatibility helpers.
  * This code is injected into the PinePaper page context and run there as a script.
  */
-export const P5_HELPERS = `
-(function() {
-  // Prevent double-initialization
-  if (window._p5Initialized) {
-    console.log('[p5-compat] Already initialized');
-    return;
-  }
+export const P5_HELPERS = ("\n(function() {\n  // Prevent double-initialization\n  if (window._p5Initialized) {\n    console.log('[p5-compat] Already initialized');\n    return;\n  }\n\n  // ==========================================================================\n  // STATE MANAGEMENT\n  // ==========================================================================\n\n  window._p5State = {\n    fillColor: '#ffffff',\n    strokeColor: '#000000',\n    strokeWidth: 1,\n    rectMode: 'corner',\n    ellipseMode: 'center'\n  };\n\n  // ==========================================================================\n  // CONSTANTS\n  // ==========================================================================\n\n  window.PI =" +
+" Math.PI;\n  window.TWO_PI = Math.PI * 2;\n  window.HALF_PI = Math.PI / 2;\n  window.QUARTER_PI = Math.PI / 4;\n\n  window.CENTER = 'center';\n  window.CORNER = 'corner';\n\n  // ==========================================================================\n  // CANVAS PROPERTIES\n  // ==========================================================================\n\n  Object.defineProperty(window, 'width', {\n    get: function() {\n      return paper.view ? paper.view.size.width : 800;\n    },\n    configurable: true\n  });\n\n  Object.defineProperty(window, 'height', {\n    get: function() {\n      return paper.view ? paper.view.size.height : 600;\n    },\n    configurable: true\n  });\n\n  // =" +
+"=========================================================================\n  // MATH UTILITIES\n  // ==========================================================================\n\n  window.random = function(min, max) {\n    if (arguments.length === 0) {\n      return Math.random();\n    } else if (arguments.length === 1) {\n      if (Array.isArray(min)) {\n        // random(array) - return random element\n        return min[Math.floor(Math.random() * min.length)];\n      }\n      // random(max) - return 0 to max\n      return Math.random() * min;\n    } else {\n      // random(min, max)\n      return Math.random() * (max - min) + min;\n    }\n  };\n\n  window.map = function(value, start1, s" +
+"top1, start2, stop2) {\n    return start2 + (stop2 - start2) * ((value - start1) / (stop1 - start1));\n  };\n\n  window.constrain = function(value, min, max) {\n    return Math.min(Math.max(value, min), max);\n  };\n\n  window.dist = function(x1, y1, x2, y2) {\n    return Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1));\n  };\n\n  window.lerp = function(start, stop, amount) {\n    return start + (stop - start) * amount;\n  };\n\n  window.radians = function(degrees) {\n    return degrees * Math.PI / 180;\n  };\n\n  window.degrees = function(radians) {\n    return radians * 180 / Math.PI;\n  };\n\n  // ==========================================================================\n  // " +
+"STYLE FUNCTIONS\n  // ==========================================================================\n\n  /**\n   * Parse color arguments into a valid color string.\n   * Supports: fill(gray), fill(r,g,b), fill(r,g,b,a), fill('#hex')\n   */\n  function parseColor(args) {\n    if (args.length === 0) return null;\n\n    if (args.length === 1) {\n      var val = args[0];\n      if (typeof val === 'string') {\n        return val;\n      } else if (typeof val === 'number') {\n        // Grayscale\n        return 'rgb(' + val + ', ' + val + ', ' + val + ')';\n      }\n    } else if (args.length === 3) {\n      // RGB\n      return 'rgb(' + args[0] + ', ' + args[1] + ', ' + args[2] + ')';\n    } else" +
+" if (args.length === 4) {\n      // RGBA (p5 uses 0-255 for alpha, CSS uses 0-1)\n      return 'rgba(' + args[0] + ', ' + args[1] + ', ' + args[2] + ', ' + (args[3] / 255) + ')';\n    }\n\n    return null;\n  }\n\n  window.fill = function() {\n    var color = parseColor(Array.prototype.slice.call(arguments));\n    window._p5State.fillColor = color;\n  };\n\n  window.noFill = function() {\n    window._p5State.fillColor = null;\n  };\n\n  window.stroke = function() {\n    var color = parseColor(Array.prototype.slice.call(arguments));\n    window._p5State.strokeColor = color;\n  };\n\n  window.noStroke = function() {\n    window._p5State.strokeColor = null;\n  };\n\n  window.strokeWeight = fu" +
+"nction(weight) {\n    window._p5State.strokeWidth = weight;\n  };\n\n  window.background = function() {\n    var color = parseColor(Array.prototype.slice.call(arguments));\n    if (color && typeof app !== 'undefined' && app.setBackgroundColor) {\n      app.setBackgroundColor(color);\n    }\n  };\n\n  // ==========================================================================\n  // MODE FUNCTIONS\n  // ==========================================================================\n\n  window.rectMode = function(mode) {\n    window._p5State.rectMode = mode.toLowerCase();\n  };\n\n  window.ellipseMode = function(mode) {\n    window._p5State.ellipseMode = mode.toLowerCase();\n  };\n\n  // ======" +
+"====================================================================\n  // SHAPE FUNCTIONS\n  // ==========================================================================\n\n  /**\n   * Apply current style state to an item\n   */\n  function applyStyle(item) {\n    if (window._p5State.fillColor) {\n      item.fillColor = window._p5State.fillColor;\n    }\n    if (window._p5State.strokeColor) {\n      item.strokeColor = window._p5State.strokeColor;\n      item.strokeWidth = window._p5State.strokeWidth;\n    }\n  }\n\n  /**\n   * Register item with PinePaper's ItemRegistry\n   */\n  function registerItem(item, type) {\n    if (typeof app !== 'undefined' && app.registerItem) {\n      app.reg" +
+"isterItem(item, type, { source: 'p5' });\n    }\n    return item;\n  }\n\n  /**\n   * Draw a circle\n   * circle(x, y, diameter)\n   */\n  window.circle = function(x, y, d) {\n    var item = new paper.Path.Circle({\n      center: [x, y],\n      radius: d / 2\n    });\n    applyStyle(item);\n    return registerItem(item, 'circle');\n  };\n\n  /**\n   * Draw an ellipse\n   * ellipse(x, y, width, [height])\n   */\n  window.ellipse = function(x, y, w, h) {\n    h = h !== undefined ? h : w;\n    var mode = window._p5State.ellipseMode;\n    var center = mode === 'center' ? [x, y] : [x + w / 2, y + h / 2];\n\n    var item = new paper.Path.Ellipse({\n      center: center,\n      size: [w, h]\n    " +
+"});\n    applyStyle(item);\n    return registerItem(item, 'ellipse');\n  };\n\n  /**\n   * Draw a rectangle\n   * rect(x, y, width, height, [cornerRadius])\n   */\n  window.rect = function(x, y, w, h, r) {\n    var mode = window._p5State.rectMode;\n    var point = mode === 'center' ? [x - w / 2, y - h / 2] : [x, y];\n\n    var options = {\n      point: point,\n      size: [w, h]\n    };\n\n    if (r !== undefined && r > 0) {\n      options.radius = r;\n    }\n\n    var item = new paper.Path.Rectangle(options);\n    applyStyle(item);\n    return registerItem(item, 'rectangle');\n  };\n\n  /**\n   * Draw a line\n   * line(x1, y1, x2, y2)\n   */\n  window.line = function(x1, y1, x2, y2) {\n  " +
+"  var item = new paper.Path.Line({\n      from: [x1, y1],\n      to: [x2, y2]\n    });\n    // Lines typically don't have fill\n    if (window._p5State.strokeColor) {\n      item.strokeColor = window._p5State.strokeColor;\n      item.strokeWidth = window._p5State.strokeWidth;\n    }\n    return registerItem(item, 'line');\n  };\n\n  /**\n   * Draw a triangle\n   * triangle(x1, y1, x2, y2, x3, y3)\n   */\n  window.triangle = function(x1, y1, x2, y2, x3, y3) {\n    var item = new paper.Path({\n      segments: [[x1, y1], [x2, y2], [x3, y3]],\n      closed: true\n    });\n    applyStyle(item);\n    return registerItem(item, 'triangle');\n  };\n\n  /**\n   * Draw a quadrilateral\n   * quad(x1, " +
+"y1, x2, y2, x3, y3, x4, y4)\n   */\n  window.quad = function(x1, y1, x2, y2, x3, y3, x4, y4) {\n    var item = new paper.Path({\n      segments: [[x1, y1], [x2, y2], [x3, y3], [x4, y4]],\n      closed: true\n    });\n    applyStyle(item);\n    return registerItem(item, 'quad');\n  };\n\n  /**\n   * Draw an arc\n   * arc(x, y, width, height, startAngle, stopAngle)\n   * Note: p5.js uses radians by default\n   */\n  window.arc = function(x, y, w, h, start, stop) {\n    // Calculate the arc using Paper.js\n    var cx = x;\n    var cy = y;\n    var rx = w / 2;\n    var ry = h / 2;\n\n    // Convert from p5's angle system to Paper.js\n    // p5 uses radians where 0 is right, PI/2 is down\n    v" +
+"ar startDeg = start * 180 / Math.PI;\n    var stopDeg = stop * 180 / Math.PI;\n\n    // Create arc using path segments\n    var item = new paper.Path.Arc({\n      from: [\n        cx + rx * Math.cos(start),\n        cy + ry * Math.sin(start)\n      ],\n      through: [\n        cx + rx * Math.cos((start + stop) / 2),\n        cy + ry * Math.sin((start + stop) / 2)\n      ],\n      to: [\n        cx + rx * Math.cos(stop),\n        cy + ry * Math.sin(stop)\n      ]\n    });\n\n    applyStyle(item);\n    return registerItem(item, 'arc');\n  };\n\n  /**\n   * Draw a point (tiny circle)\n   * point(x, y)\n   */\n  window.point = function(x, y) {\n    var size = window._p5State.strokeWidth || 1;" +
+"\n    var item = new paper.Path.Circle({\n      center: [x, y],\n      radius: size / 2\n    });\n    // Points use stroke color as fill\n    if (window._p5State.strokeColor) {\n      item.fillColor = window._p5State.strokeColor;\n    }\n    return registerItem(item, 'point');\n  };\n\n  // ==========================================================================\n  // INITIALIZATION COMPLETE\n  // ==========================================================================\n\n  window._p5Initialized = true;\n  console.log('[p5-compat] p5.js compatibility layer loaded (v1.3.1)');\n  console.log('[p5-compat] Available: circle, ellipse, rect, line, triangle, quad, arc, point');\n  console.log" +
+"('[p5-compat] Style: fill, noFill, stroke, noStroke, strokeWeight, background');\n  console.log('[p5-compat] Math: random, map, constrain, dist, lerp, radians, degrees');\n})();\n"
 
-  // ==========================================================================
-  // STATE MANAGEMENT
-  // ==========================================================================
-
-  window._p5State = {
-    fillColor: '#ffffff',
-    strokeColor: '#000000',
-    strokeWidth: 1,
-    rectMode: 'corner',
-    ellipseMode: 'center'
-  };
-
-  // ==========================================================================
-  // CONSTANTS
-  // ==========================================================================
-
-  window.PI = Math.PI;
-  window.TWO_PI = Math.PI * 2;
-  window.HALF_PI = Math.PI / 2;
-  window.QUARTER_PI = Math.PI / 4;
-
-  window.CENTER = 'center';
-  window.CORNER = 'corner';
-
-  // ==========================================================================
-  // CANVAS PROPERTIES
-  // ==========================================================================
-
-  Object.defineProperty(window, 'width', {
-    get: function() {
-      return paper.view ? paper.view.size.width : 800;
-    },
-    configurable: true
-  });
-
-  Object.defineProperty(window, 'height', {
-    get: function() {
-      return paper.view ? paper.view.size.height : 600;
-    },
-    configurable: true
-  });
-
-  // ==========================================================================
-  // MATH UTILITIES
-  // ==========================================================================
-
-  window.random = function(min, max) {
-    if (arguments.length === 0) {
-      return Math.random();
-    } else if (arguments.length === 1) {
-      if (Array.isArray(min)) {
-        // random(array) - return random element
-        return min[Math.floor(Math.random() * min.length)];
-      }
-      // random(max) - return 0 to max
-      return Math.random() * min;
-    } else {
-      // random(min, max)
-      return Math.random() * (max - min) + min;
-    }
-  };
-
-  window.map = function(value, start1, stop1, start2, stop2) {
-    return start2 + (stop2 - start2) * ((value - start1) / (stop1 - start1));
-  };
-
-  window.constrain = function(value, min, max) {
-    return Math.min(Math.max(value, min), max);
-  };
-
-  window.dist = function(x1, y1, x2, y2) {
-    return Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1));
-  };
-
-  window.lerp = function(start, stop, amount) {
-    return start + (stop - start) * amount;
-  };
-
-  window.radians = function(degrees) {
-    return degrees * Math.PI / 180;
-  };
-
-  window.degrees = function(radians) {
-    return radians * 180 / Math.PI;
-  };
-
-  // ==========================================================================
-  // STYLE FUNCTIONS
-  // ==========================================================================
-
-  /**
-   * Parse color arguments into a valid color string.
-   * Supports: fill(gray), fill(r,g,b), fill(r,g,b,a), fill('#hex')
-   */
-  function parseColor(args) {
-    if (args.length === 0) return null;
-
-    if (args.length === 1) {
-      var val = args[0];
-      if (typeof val === 'string') {
-        return val;
-      } else if (typeof val === 'number') {
-        // Grayscale
-        return 'rgb(' + val + ', ' + val + ', ' + val + ')';
-      }
-    } else if (args.length === 3) {
-      // RGB
-      return 'rgb(' + args[0] + ', ' + args[1] + ', ' + args[2] + ')';
-    } else if (args.length === 4) {
-      // RGBA (p5 uses 0-255 for alpha, CSS uses 0-1)
-      return 'rgba(' + args[0] + ', ' + args[1] + ', ' + args[2] + ', ' + (args[3] / 255) + ')';
-    }
 
-    return null;
-  }
 
-  window.fill = function() {
-    var color = parseColor(Array.prototype.slice.call(arguments));
-    window._p5State.fillColor = color;
-  };
 
-  window.noFill = function() {
-    window._p5State.fillColor = null;
-  };
 
-  window.stroke = function() {
-    var color = parseColor(Array.prototype.slice.call(arguments));
-    window._p5State.strokeColor = color;
-  };
 
-  window.noStroke = function() {
-    window._p5State.strokeColor = null;
-  };
 
-  window.strokeWeight = function(weight) {
-    window._p5State.strokeWidth = weight;
-  };
 
-  window.background = function() {
-    var color = parseColor(Array.prototype.slice.call(arguments));
-    if (color && typeof app !== 'undefined' && app.setBackgroundColor) {
-      app.setBackgroundColor(color);
-    }
-  };
-
-  // ==========================================================================
-  // MODE FUNCTIONS
-  // ==========================================================================
-
-  window.rectMode = function(mode) {
-    window._p5State.rectMode = mode.toLowerCase();
-  };
-
-  window.ellipseMode = function(mode) {
-    window._p5State.ellipseMode = mode.toLowerCase();
-  };
-
-  // ==========================================================================
-  // SHAPE FUNCTIONS
-  // ==========================================================================
-
-  /**
-   * Apply current style state to an item
-   */
-  function applyStyle(item) {
-    if (window._p5State.fillColor) {
-      item.fillColor = window._p5State.fillColor;
-    }
-    if (window._p5State.strokeColor) {
-      item.strokeColor = window._p5State.strokeColor;
-      item.strokeWidth = window._p5State.strokeWidth;
-    }
-  }
 
-  /**
-   * Register item with PinePaper's ItemRegistry
-   */
-  function registerItem(item, type) {
-    if (typeof app !== 'undefined' && app.registerItem) {
-      app.registerItem(item, type, { source: 'p5' });
-    }
-    return item;
-  }
 
-  /**
-   * Draw a circle
-   * circle(x, y, diameter)
-   */
-  window.circle = function(x, y, d) {
-    var item = new paper.Path.Circle({
-      center: [x, y],
-      radius: d / 2
-    });
-    applyStyle(item);
-    return registerItem(item, 'circle');
-  };
-
-  /**
-   * Draw an ellipse
-   * ellipse(x, y, width, [height])
-   */
-  window.ellipse = function(x, y, w, h) {
-    h = h !== undefined ? h : w;
-    var mode = window._p5State.ellipseMode;
-    var center = mode === 'center' ? [x, y] : [x + w / 2, y + h / 2];
-
-    var item = new paper.Path.Ellipse({
-      center: center,
-      size: [w, h]
-    });
-    applyStyle(item);
-    return registerItem(item, 'ellipse');
-  };
-
-  /**
-   * Draw a rectangle
-   * rect(x, y, width, height, [cornerRadius])
-   */
-  window.rect = function(x, y, w, h, r) {
-    var mode = window._p5State.rectMode;
-    var point = mode === 'center' ? [x - w / 2, y - h / 2] : [x, y];
-
-    var options = {
-      point: point,
-      size: [w, h]
-    };
-
-    if (r !== undefined && r > 0) {
-      options.radius = r;
-    }
 
-    var item = new paper.Path.Rectangle(options);
-    applyStyle(item);
-    return registerItem(item, 'rectangle');
-  };
-
-  /**
-   * Draw a line
-   * line(x1, y1, x2, y2)
-   */
-  window.line = function(x1, y1, x2, y2) {
-    var item = new paper.Path.Line({
-      from: [x1, y1],
-      to: [x2, y2]
-    });
-    // Lines typically don't have fill
-    if (window._p5State.strokeColor) {
-      item.strokeColor = window._p5State.strokeColor;
-      item.strokeWidth = window._p5State.strokeWidth;
-    }
-    return registerItem(item, 'line');
-  };
-
-  /**
-   * Draw a triangle
-   * triangle(x1, y1, x2, y2, x3, y3)
-   */
-  window.triangle = function(x1, y1, x2, y2, x3, y3) {
-    var item = new paper.Path({
-      segments: [[x1, y1], [x2, y2], [x3, y3]],
-      closed: true
-    });
-    applyStyle(item);
-    return registerItem(item, 'triangle');
-  };
-
-  /**
-   * Draw a quadrilateral
-   * quad(x1, y1, x2, y2, x3, y3, x4, y4)
-   */
-  window.quad = function(x1, y1, x2, y2, x3, y3, x4, y4) {
-    var item = new paper.Path({
-      segments: [[x1, y1], [x2, y2], [x3, y3], [x4, y4]],
-      closed: true
-    });
-    applyStyle(item);
-    return registerItem(item, 'quad');
-  };
-
-  /**
-   * Draw an arc
-   * arc(x, y, width, height, startAngle, stopAngle)
-   * Note: p5.js uses radians by default
-   */
-  window.arc = function(x, y, w, h, start, stop) {
-    // Calculate the arc using Paper.js
-    var cx = x;
-    var cy = y;
-    var rx = w / 2;
-    var ry = h / 2;
-
-    // Convert from p5's angle system to Paper.js
-    // p5 uses radians where 0 is right, PI/2 is down
-    var startDeg = start * 180 / Math.PI;
-    var stopDeg = stop * 180 / Math.PI;
-
-    // Create arc using path segments
-    var item = new paper.Path.Arc({
-      from: [
-        cx + rx * Math.cos(start),
-        cy + ry * Math.sin(start)
-      ],
-      through: [
-        cx + rx * Math.cos((start + stop) / 2),
-        cy + ry * Math.sin((start + stop) / 2)
-      ],
-      to: [
-        cx + rx * Math.cos(stop),
-        cy + ry * Math.sin(stop)
-      ]
-    });
-
-    applyStyle(item);
-    return registerItem(item, 'arc');
-  };
-
-  /**
-   * Draw a point (tiny circle)
-   * point(x, y)
-   */
-  window.point = function(x, y) {
-    var size = window._p5State.strokeWidth || 1;
-    var item = new paper.Path.Circle({
-      center: [x, y],
-      radius: size / 2
-    });
-    // Points use stroke color as fill
-    if (window._p5State.strokeColor) {
-      item.fillColor = window._p5State.strokeColor;
-    }
-    return registerItem(item, 'point');
-  };
-
-  // ==========================================================================
-  // INITIALIZATION COMPLETE
-  // ==========================================================================
-
-  window._p5Initialized = true;
-  console.log('[p5-compat] p5.js compatibility layer loaded (v1.3.1)');
-  console.log('[p5-compat] Available: circle, ellipse, rect, line, triangle, quad, arc, point');
-  console.log('[p5-compat] Style: fill, noFill, stroke, noStroke, strokeWeight, background');
-  console.log('[p5-compat] Math: random, map, constrain, dist, lerp, radians, degrees');
-})();
-`;
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+);
 /**
- * Generate code that initializes p5 helpers and executes user code
+ * Generate code that initializes p5 helpers and runs the caller's p5-style code in the studio page.
+ *
+ * SECURITY BOUNDARY: this runs caller-written JavaScript, so it is off unless the person running the server started it
+ * with PINEPAPER_ALLOW_CODE=1 (utils/capabilities.ts). The handler refuses first; this refuses again, so no other path
+ * can produce the code with the switch off. The code runs in the browser page, never in the server process.
  */
 export function generateP5DrawCode(userCode) {
+    if (!capabilityAllowed('code'))
+        throw new Error(capabilityRefusal('code', 'pinepaper_p5_draw'));
     return `
 // Initialize p5.js compatibility layer if not already loaded
 if (!window._p5Initialized) {