@promptbook/remote-server 0.112.0-69 → 0.112.0-71

package/esm/index.es.js

@@ -40,7 +40,7 @@ const BOOK_LANGUAGE_VERSION = '2.0.0';
  * @generated
  * @see https://github.com/webgptorg/promptbook
  */
-const PROMPTBOOK_ENGINE_VERSION = '0.112.0-69';
+const PROMPTBOOK_ENGINE_VERSION = '0.112.0-71';
 /**
  * TODO: string_promptbook_version should be constrained to the all versions of Promptbook engine
  * Note: [💞] Ignore a discrepancy between file name and entity name
@@ -3529,11 +3529,11 @@ function capitalize(word) {
  */
 function pipelineJsonToString(pipelineJson) {
     const { title, pipelineUrl, bookVersion, description, parameters, tasks } = pipelineJson;
-    let pipelineString = `# ${title}`;
-    if (description) {
-        pipelineString += '\n\n';
-        pipelineString += description;
-    }
+    let pipelineString = spaceTrim$1((block) => `
+            # ${title}
+
+            ${block(description || '')}
+        `);
     const commands = [];
     if (pipelineUrl) {
         commands.push(`PIPELINE URL ${pipelineUrl}`);
@@ -3549,20 +3549,17 @@ function pipelineJsonToString(pipelineJson) {
     for (const parameter of parameters.filter(({ isOutput }) => isOutput)) {
         commands.push(`OUTPUT PARAMETER ${taskParameterJsonToString(parameter)}`);
     }
-    pipelineString += '\n\n';
-    pipelineString += commands.map((command) => `- ${command}`).join('\n');
+    pipelineString = spaceTrim$1((block) => `
+            ${block(pipelineString)}
+
+            ${block(commands.map((command) => `- ${command}`).join('\n'))}
+        `);
     for (const task of tasks) {
         const { 
         /* Note: Not using:> name, */
         title, description, 
         /* Note: dependentParameterNames, */
         jokerParameterNames: jokers, taskType, content, postprocessingFunctionNames: postprocessing, expectations, format, resultingParameterName, } = task;
-        pipelineString += '\n\n';
-        pipelineString += `## ${title}`;
-        if (description) {
-            pipelineString += '\n\n';
-            pipelineString += description;
-        }
         const commands = [];
         let contentLanguage = 'text';
         if (taskType === 'PROMPT_TASK') {
@@ -3625,18 +3622,23 @@ function pipelineJsonToString(pipelineJson) {
                 commands.push(`FORMAT JSON`);
             }
         } /* not else */
-        pipelineString += '\n\n';
-        pipelineString += commands.map((command) => `- ${command}`).join('\n');
-        pipelineString += '\n\n';
-        pipelineString += '```' + contentLanguage;
-        pipelineString += '\n';
-        pipelineString += spaceTrim$1(content);
-        //                   <- TODO: [main] !!3 Escape
-        //                   <- TODO: [🧠] Some clear strategy how to spaceTrim the blocks
-        pipelineString += '\n';
-        pipelineString += '```';
-        pipelineString += '\n\n';
-        pipelineString += `\`-> {${resultingParameterName}}\``; // <- TODO: [main] !!3 If the parameter here has description, add it and use taskParameterJsonToString
+        pipelineString = spaceTrim$1((block) => `
+                ${block(pipelineString)}
+
+                ## ${title}
+
+                ${block(description || '')}
+
+                ${block(commands.map((command) => `- ${command}`).join('\n'))}
+
+                \`\`\`${contentLanguage}
+                ${block(spaceTrim$1(content))}
+                \`\`\`
+
+                \`-> {${resultingParameterName}}\`
+            `); // <- TODO: [main] !!3 If the parameter here has description, add it and use taskParameterJsonToString
+        // <- TODO: [main] !!3 Escape
+        // <- TODO: [🧠] Some clear strategy how to spaceTrim the blocks
     }
     return validatePipelineString(pipelineString);
 }
@@ -13274,6 +13276,184 @@ function drawFractalCore(context, size, palette, timeMs, corePhase) {
     context.restore();
 }
 
+/* eslint-disable no-magic-numbers */
+/**
+ * Default camera distance ratio shared by the proper-3D avatar visuals.
+ *
+ * @private helper of the 3D avatar visuals
+ */
+const DEFAULT_3D_CAMERA_DISTANCE_RATIO = 1.4;
+/**
+ * Clamps one number into the provided range.
+ *
+ * @param value Input value.
+ * @param minimumValue Inclusive lower bound.
+ * @param maximumValue Inclusive upper bound.
+ * @returns Clamped value.
+ *
+ * @private helper of the 3D avatar visuals
+ */
+function clampNumber$1(value, minimumValue, maximumValue) {
+    return Math.min(maximumValue, Math.max(minimumValue, value));
+}
+/**
+ * Rotates one point around the local Y axis.
+ *
+ * @param point Source point.
+ * @param angle Rotation angle in radians.
+ * @returns Rotated point.
+ *
+ * @private helper of the 3D avatar visuals
+ */
+function rotatePointAroundY(point, angle) {
+    const cosine = Math.cos(angle);
+    const sine = Math.sin(angle);
+    return {
+        x: point.x * cosine + point.z * sine,
+        y: point.y,
+        z: -point.x * sine + point.z * cosine,
+    };
+}
+/**
+ * Rotates one point around the local X axis.
+ *
+ * @param point Source point.
+ * @param angle Rotation angle in radians.
+ * @returns Rotated point.
+ *
+ * @private helper of the 3D avatar visuals
+ */
+function rotatePointAroundX(point, angle) {
+    const cosine = Math.cos(angle);
+    const sine = Math.sin(angle);
+    return {
+        x: point.x,
+        y: point.y * cosine - point.z * sine,
+        z: point.y * sine + point.z * cosine,
+    };
+}
+/**
+ * Applies the local rotations and translation to one scene point.
+ *
+ * @param localPoint Point in local object space.
+ * @param center Object center in scene space.
+ * @param rotationX Object pitch in radians.
+ * @param rotationY Object yaw in radians.
+ * @returns Transformed scene-space point.
+ *
+ * @private helper of the 3D avatar visuals
+ */
+function transformScenePoint(localPoint, center, rotationX, rotationY) {
+    const yawedPoint = rotatePointAroundY(localPoint, rotationY);
+    const pitchedPoint = rotatePointAroundX(yawedPoint, rotationX);
+    return {
+        x: center.x + pitchedPoint.x,
+        y: center.y + pitchedPoint.y,
+        z: center.z + pitchedPoint.z,
+    };
+}
+/**
+ * Projects one scene point into canvas coordinates.
+ *
+ * @param point Scene-space point.
+ * @param size Canvas size in CSS pixels.
+ * @param sceneCenterX Horizontal scene center.
+ * @param sceneCenterY Vertical scene center.
+ * @param cameraDistanceRatio Optional camera distance ratio.
+ * @returns Projected point.
+ *
+ * @private helper of the 3D avatar visuals
+ */
+function projectScenePoint(point, size, sceneCenterX, sceneCenterY, cameraDistanceRatio = DEFAULT_3D_CAMERA_DISTANCE_RATIO) {
+    const cameraDistance = size * cameraDistanceRatio;
+    const perspectiveScale = cameraDistance / Math.max(cameraDistance - point.z, cameraDistance * 0.35);
+    return {
+        x: sceneCenterX + point.x * perspectiveScale,
+        y: sceneCenterY + point.y * perspectiveScale,
+        z: point.z,
+    };
+}
+/**
+ * Subtracts one 3D point from another.
+ *
+ * @param leftPoint Left point.
+ * @param rightPoint Right point.
+ * @returns Difference vector.
+ *
+ * @private helper of the 3D avatar visuals
+ */
+function subtractPoint3D(leftPoint, rightPoint) {
+    return {
+        x: leftPoint.x - rightPoint.x,
+        y: leftPoint.y - rightPoint.y,
+        z: leftPoint.z - rightPoint.z,
+    };
+}
+/**
+ * Computes the 3D cross product of two vectors.
+ *
+ * @param leftVector Left vector.
+ * @param rightVector Right vector.
+ * @returns Cross product.
+ *
+ * @private helper of the 3D avatar visuals
+ */
+function crossProduct3D(leftVector, rightVector) {
+    return {
+        x: leftVector.y * rightVector.z - leftVector.z * rightVector.y,
+        y: leftVector.z * rightVector.x - leftVector.x * rightVector.z,
+        z: leftVector.x * rightVector.y - leftVector.y * rightVector.x,
+    };
+}
+/**
+ * Computes the 3D dot product of two vectors.
+ *
+ * @param leftVector Left vector.
+ * @param rightVector Right vector.
+ * @returns Dot product.
+ *
+ * @private helper of the 3D avatar visuals
+ */
+function dotProduct3D(leftVector, rightVector) {
+    return leftVector.x * rightVector.x + leftVector.y * rightVector.y + leftVector.z * rightVector.z;
+}
+/**
+ * Normalizes one 3D vector while keeping zero vectors stable.
+ *
+ * @param vector Source vector.
+ * @returns Normalized vector.
+ *
+ * @private helper of the 3D avatar visuals
+ */
+function normalizeVector3(vector) {
+    const length = Math.hypot(vector.x, vector.y, vector.z);
+    if (length === 0) {
+        return vector;
+    }
+    return {
+        x: vector.x / length,
+        y: vector.y / length,
+        z: vector.z / length,
+    };
+}
+/**
+ * Measures the perimeter of one projected quad.
+ *
+ * @param corners Quad corners.
+ * @returns Perimeter length.
+ *
+ * @private helper of the 3D avatar visuals
+ */
+function getProjectedQuadPerimeter(corners) {
+    let perimeter = 0;
+    for (let cornerIndex = 0; cornerIndex < corners.length; cornerIndex++) {
+        const currentCorner = corners[cornerIndex];
+        const nextCorner = corners[(cornerIndex + 1) % corners.length];
+        perimeter += Math.hypot(nextCorner.x - currentCorner.x, nextCorner.y - currentCorner.y);
+    }
+    return perimeter;
+}
+
 /* eslint-disable no-magic-numbers */
 /**
  * Builds the seeded six-face texture pack used by the Minecraft-style head cuboid.
@@ -13446,18 +13626,12 @@ function fillTextureRect(texture, x, y, width, height, color) {
 }
 
 /* eslint-disable no-magic-numbers */
-/**
- * Fixed scene camera distance used for the proper-3D projection.
- *
- * @private helper of `minecraft2AvatarVisual`
- */
-const CAMERA_DISTANCE_RATIO = 1.4;
 /**
  * Shared light direction used to shade projected cuboid faces.
  *
  * @private helper of `minecraft2AvatarVisual`
  */
-const LIGHT_DIRECTION = normalizeVector3({
+const LIGHT_DIRECTION$1 = normalizeVector3({
     x: 0.4,
     y: -0.65,
     z: 0.92,
@@ -13669,7 +13843,7 @@ function resolveVisibleCuboidFaces(cuboid, size, sceneCenterX, sceneCenterY) {
             corners: projectedCorners,
             texture: faceDefinition.texture,
             averageDepth: transformedCorners.reduce((depthSum, corner) => depthSum + corner.z, 0) / transformedCorners.length,
-            lightIntensity: clampNumber$1(dotProduct3D(faceNormal, LIGHT_DIRECTION), -1, 1),
+            lightIntensity: clampNumber$1(dotProduct3D(faceNormal, LIGHT_DIRECTION$1), -1, 1),
             outlineColor: cuboid.outlineColor,
         };
     });
@@ -13696,7 +13870,7 @@ function drawTexturedProjectedFace(context, face) {
             const endX = (columnIndex + 1) / columns;
             const startY = rowIndex / rows;
             const endY = (rowIndex + 1) / rows;
-            drawProjectedQuad(context, [
+            drawProjectedQuad$1(context, [
                 interpolateProjectedQuad(face.corners, startX, startY),
                 interpolateProjectedQuad(face.corners, endX, startY),
                 interpolateProjectedQuad(face.corners, endX, endY),
@@ -13705,10 +13879,10 @@ function drawTexturedProjectedFace(context, face) {
         }
     }
     if (face.lightIntensity > 0) {
-        drawProjectedQuad(context, face.corners, `rgba(255, 255, 255, ${0.15 * face.lightIntensity})`);
+        drawProjectedQuad$1(context, face.corners, `rgba(255, 255, 255, ${0.15 * face.lightIntensity})`);
     }
     else if (face.lightIntensity < 0) {
-        drawProjectedQuad(context, face.corners, `rgba(0, 0, 0, ${0.22 * Math.abs(face.lightIntensity)})`);
+        drawProjectedQuad$1(context, face.corners, `rgba(0, 0, 0, ${0.22 * Math.abs(face.lightIntensity)})`);
     }
     context.save();
     context.beginPath();
@@ -13732,7 +13906,7 @@ function drawTexturedProjectedFace(context, face) {
  *
  * @private helper of `minecraft2AvatarVisual`
  */
-function drawProjectedQuad(context, corners, fillStyle) {
+function drawProjectedQuad$1(context, corners, fillStyle) {
     context.beginPath();
     context.moveTo(corners[0].x, corners[0].y);
     context.lineTo(corners[1].x, corners[1].y);
@@ -13745,203 +13919,34 @@ function drawProjectedQuad(context, corners, fillStyle) {
 /**
  * Interpolates one point inside a projected quad across both quad axes.
  *
- * @param corners Quad corners in clockwise order.
- * @param horizontalRatio Horizontal ratio in the range `[0, 1]`.
- * @param verticalRatio Vertical ratio in the range `[0, 1]`.
- * @returns Interpolated projected point.
- *
- * @private helper of `minecraft2AvatarVisual`
- */
-function interpolateProjectedQuad(corners, horizontalRatio, verticalRatio) {
-    const topPoint = interpolateProjectedPoint(corners[0], corners[1], horizontalRatio);
-    const bottomPoint = interpolateProjectedPoint(corners[3], corners[2], horizontalRatio);
-    return interpolateProjectedPoint(topPoint, bottomPoint, verticalRatio);
-}
-/**
- * Interpolates between two projected points.
- *
- * @param startPoint Start point.
- * @param endPoint End point.
- * @param ratio Interpolation ratio in the range `[0, 1]`.
- * @returns Interpolated projected point.
- *
- * @private helper of `minecraft2AvatarVisual`
- */
-function interpolateProjectedPoint(startPoint, endPoint, ratio) {
-    return {
-        x: startPoint.x + (endPoint.x - startPoint.x) * ratio,
-        y: startPoint.y + (endPoint.y - startPoint.y) * ratio,
-        z: startPoint.z + (endPoint.z - startPoint.z) * ratio,
-    };
-}
-/**
- * Projects one rotated scene point into canvas coordinates.
- *
- * @param point Scene point.
- * @param size Canvas size in CSS pixels.
- * @param sceneCenterX Horizontal scene center.
- * @param sceneCenterY Vertical scene center.
- * @returns Projected point.
- *
- * @private helper of `minecraft2AvatarVisual`
- */
-function projectScenePoint(point, size, sceneCenterX, sceneCenterY) {
-    const cameraDistance = size * CAMERA_DISTANCE_RATIO;
-    const perspectiveScale = cameraDistance / Math.max(cameraDistance - point.z, cameraDistance * 0.35);
-    return {
-        x: sceneCenterX + point.x * perspectiveScale,
-        y: sceneCenterY + point.y * perspectiveScale,
-        z: point.z,
-    };
-}
-/**
- * Applies the local cuboid rotations and translation to one scene point.
- *
- * @param localPoint Point in cuboid-local space.
- * @param center Cuboid center in scene space.
- * @param rotationX Cuboid pitch in radians.
- * @param rotationY Cuboid yaw in radians.
- * @returns Transformed scene-space point.
- *
- * @private helper of `minecraft2AvatarVisual`
- */
-function transformScenePoint(localPoint, center, rotationX, rotationY) {
-    const yawedPoint = rotatePointAroundY(localPoint, rotationY);
-    const pitchedPoint = rotatePointAroundX(yawedPoint, rotationX);
-    return {
-        x: center.x + pitchedPoint.x,
-        y: center.y + pitchedPoint.y,
-        z: center.z + pitchedPoint.z,
-    };
-}
-/**
- * Rotates one point around the local Y axis.
- *
- * @param point Source point.
- * @param angle Rotation angle in radians.
- * @returns Rotated point.
- *
- * @private helper of `minecraft2AvatarVisual`
- */
-function rotatePointAroundY(point, angle) {
-    const cosine = Math.cos(angle);
-    const sine = Math.sin(angle);
-    return {
-        x: point.x * cosine + point.z * sine,
-        y: point.y,
-        z: -point.x * sine + point.z * cosine,
-    };
-}
-/**
- * Rotates one point around the local X axis.
- *
- * @param point Source point.
- * @param angle Rotation angle in radians.
- * @returns Rotated point.
- *
- * @private helper of `minecraft2AvatarVisual`
- */
-function rotatePointAroundX(point, angle) {
-    const cosine = Math.cos(angle);
-    const sine = Math.sin(angle);
-    return {
-        x: point.x,
-        y: point.y * cosine - point.z * sine,
-        z: point.y * sine + point.z * cosine,
-    };
-}
-/**
- * Subtracts one 3D point from another.
- *
- * @param leftPoint Left point.
- * @param rightPoint Right point.
- * @returns Difference vector.
- *
- * @private helper of `minecraft2AvatarVisual`
- */
-function subtractPoint3D(leftPoint, rightPoint) {
-    return {
-        x: leftPoint.x - rightPoint.x,
-        y: leftPoint.y - rightPoint.y,
-        z: leftPoint.z - rightPoint.z,
-    };
-}
-/**
- * Computes the 3D cross product of two vectors.
- *
- * @param leftVector Left vector.
- * @param rightVector Right vector.
- * @returns Cross product.
- *
- * @private helper of `minecraft2AvatarVisual`
- */
-function crossProduct3D(leftVector, rightVector) {
-    return {
-        x: leftVector.y * rightVector.z - leftVector.z * rightVector.y,
-        y: leftVector.z * rightVector.x - leftVector.x * rightVector.z,
-        z: leftVector.x * rightVector.y - leftVector.y * rightVector.x,
-    };
-}
-/**
- * Computes the 3D dot product of two vectors.
- *
- * @param leftVector Left vector.
- * @param rightVector Right vector.
- * @returns Dot product.
- *
- * @private helper of `minecraft2AvatarVisual`
- */
-function dotProduct3D(leftVector, rightVector) {
-    return leftVector.x * rightVector.x + leftVector.y * rightVector.y + leftVector.z * rightVector.z;
-}
-/**
- * Normalizes one 3D vector while keeping zero vectors stable.
- *
- * @param vector Source vector.
- * @returns Normalized vector.
- *
- * @private helper of `minecraft2AvatarVisual`
- */
-function normalizeVector3(vector) {
-    const length = Math.hypot(vector.x, vector.y, vector.z);
-    if (length === 0) {
-        return vector;
-    }
-    return {
-        x: vector.x / length,
-        y: vector.y / length,
-        z: vector.z / length,
-    };
-}
-/**
- * Clamps one number into the provided range.
- *
- * @param value Input value.
- * @param minimumValue Inclusive lower bound.
- * @param maximumValue Inclusive upper bound.
- * @returns Clamped value.
+ * @param corners Quad corners in clockwise order.
+ * @param horizontalRatio Horizontal ratio in the range `[0, 1]`.
+ * @param verticalRatio Vertical ratio in the range `[0, 1]`.
+ * @returns Interpolated projected point.
  *
  * @private helper of `minecraft2AvatarVisual`
  */
-function clampNumber$1(value, minimumValue, maximumValue) {
-    return Math.min(maximumValue, Math.max(minimumValue, value));
+function interpolateProjectedQuad(corners, horizontalRatio, verticalRatio) {
+    const topPoint = interpolateProjectedPoint(corners[0], corners[1], horizontalRatio);
+    const bottomPoint = interpolateProjectedPoint(corners[3], corners[2], horizontalRatio);
+    return interpolateProjectedPoint(topPoint, bottomPoint, verticalRatio);
 }
 /**
- * Measures the perimeter of one projected quad.
+ * Interpolates between two projected points.
  *
- * @param corners Quad corners.
- * @returns Perimeter length.
+ * @param startPoint Start point.
+ * @param endPoint End point.
+ * @param ratio Interpolation ratio in the range `[0, 1]`.
+ * @returns Interpolated projected point.
  *
  * @private helper of `minecraft2AvatarVisual`
  */
-function getProjectedQuadPerimeter(corners) {
-    let perimeter = 0;
-    for (let cornerIndex = 0; cornerIndex < corners.length; cornerIndex++) {
-        const currentCorner = corners[cornerIndex];
-        const nextCorner = corners[(cornerIndex + 1) % corners.length];
-        perimeter += Math.hypot(nextCorner.x - currentCorner.x, nextCorner.y - currentCorner.y);
-    }
-    return perimeter;
+function interpolateProjectedPoint(startPoint, endPoint, ratio) {
+    return {
+        x: startPoint.x + (endPoint.x - startPoint.x) * ratio,
+        y: startPoint.y + (endPoint.y - startPoint.y) * ratio,
+        z: startPoint.z + (endPoint.z - startPoint.z) * ratio,
+    };
 }
 
 /* eslint-disable no-magic-numbers */
@@ -14511,7 +14516,7 @@ function resolveSeededIntegerRange(random, minimumValue, maximumValue) {
  *
  * @private helper of `octopus3AvatarVisual`
  */
-function formatAlphaHex(opacity) {
+function formatAlphaHex$1(opacity) {
     return Math.round(Math.min(1, Math.max(0, opacity)) * 255)
         .toString(16)
         .padStart(2, '0');
@@ -14890,7 +14895,7 @@ function drawSeededEye(context, centerX, centerY, radiusX, radiusY, rotation, pa
         context.beginPath();
         context.moveTo(-radiusX * 0.74, radiusY * 0.2);
         context.quadraticCurveTo(0, radiusY * 0.38, radiusX * 0.74, radiusY * 0.2);
-        context.strokeStyle = `${palette.highlight}${formatAlphaHex(eyeStyle.lowerLidOpacity)}`;
+        context.strokeStyle = `${palette.highlight}${formatAlphaHex$1(eyeStyle.lowerLidOpacity)}`;
         context.lineWidth = radiusX * 0.08;
         context.lineCap = 'round';
         context.stroke();
@@ -14898,6 +14903,518 @@ function drawSeededEye(context, centerX, centerY, radiusX, radiusY, rotation, pa
     context.restore();
 }
 
+/* eslint-disable no-magic-numbers */
+/**
+ * Light direction used by the organic 3D octopus shading.
+ *
+ * @private helper of `octopus3dAvatarVisual`
+ */
+const LIGHT_DIRECTION = normalizeVector3({
+    x: 0.48,
+    y: -0.62,
+    z: 0.94,
+});
+/**
+ * Proper 3D Octopus visual built from projected organic meshes and tentacles.
+ *
+ * @private built-in avatar visual
+ */
+const octopus3dAvatarVisual = {
+    id: 'octopus3d',
+    title: 'Octopus 3D',
+    description: 'Proper 3D octopus portrait with a turning silhouette, expressive eyes, and depth-sorted tentacles.',
+    isAnimated: true,
+    supportsPointerTracking: true,
+    render({ context, size, palette, createRandom, timeMs, interaction }) {
+        const morphologyProfile = createOctopus3MorphologyProfile(createRandom);
+        const animationRandom = createRandom('octopus3d-animation-profile');
+        const eyeRandom = createRandom('octopus3d-eye-profile');
+        const animationPhase = animationRandom() * Math.PI * 2;
+        const sceneCenterX = size * 0.5;
+        const sceneCenterY = size * 0.56;
+        const bob = Math.sin(timeMs / 920 + animationPhase) * size * 0.014;
+        const mantleCenter = {
+            x: interaction.bodyOffsetX * size * 0.042 + size * morphologyProfile.body.centerXJitterRatio * 0.65,
+            y: -size * 0.09 + interaction.bodyOffsetY * size * 0.028 + bob,
+            z: interaction.intensity * size * 0.012,
+        };
+        const underbodyCenter = {
+            x: mantleCenter.x * 0.86,
+            y: mantleCenter.y + size * 0.168,
+            z: mantleCenter.z - size * 0.018,
+        };
+        const mantleRadiusX = size * morphologyProfile.body.bodyRadiusRatio * morphologyProfile.body.horizontalStretch;
+        const mantleRadiusY = size * morphologyProfile.body.bodyRadiusRatio * morphologyProfile.body.verticalStretch * 1.1;
+        const mantleRadiusZ = size * morphologyProfile.body.bodyRadiusRatio * (0.9 + (morphologyProfile.body.horizontalStretch - 1) * 0.3);
+        const underbodyRadiusX = mantleRadiusX * (0.9 + (morphologyProfile.tentacles.rootSpreadScale - 1) * 0.08);
+        const underbodyRadiusY = mantleRadiusY * (0.44 + morphologyProfile.body.lowerDropRatio * 3.1);
+        const underbodyRadiusZ = mantleRadiusZ * 0.78;
+        const bodyYaw = -0.18 +
+            Math.sin(timeMs / 2400 + animationPhase) * 0.05 +
+            interaction.bodyOffsetX * 0.18 +
+            interaction.gazeX * 0.22;
+        const bodyPitch = -0.08 +
+            Math.cos(timeMs / 2700 + animationPhase * 0.6) * 0.025 -
+            interaction.bodyOffsetY * 0.08 -
+            interaction.gazeY * 0.08;
+        const headYaw = bodyYaw - 0.04 + interaction.gazeX * 0.56;
+        const headPitch = bodyPitch - 0.02 - interaction.gazeY * 0.32;
+        const mantlePatches = resolveVisibleEllipsoidPatches({
+            center: mantleCenter,
+            radiusX: mantleRadiusX,
+            radiusY: mantleRadiusY,
+            radiusZ: mantleRadiusZ,
+            rotationX: headPitch,
+            rotationY: headYaw,
+            sceneCenterX,
+            sceneCenterY,
+            size,
+            palette,
+            verticalColorBias: 0,
+            outlineColor: `${palette.highlight}7a`,
+        });
+        const underbodyPatches = resolveVisibleEllipsoidPatches({
+            center: underbodyCenter,
+            radiusX: underbodyRadiusX,
+            radiusY: underbodyRadiusY,
+            radiusZ: underbodyRadiusZ,
+            rotationX: bodyPitch,
+            rotationY: bodyYaw,
+            sceneCenterX,
+            sceneCenterY,
+            size,
+            palette,
+            verticalColorBias: 0.18,
+            outlineColor: `${palette.shadow}8f`,
+        });
+        const tentacleStrokes = createOctopusTentacleStrokes({
+            createRandom,
+            morphologyProfile,
+            timeMs,
+            size,
+            center: underbodyCenter,
+            radiusX: underbodyRadiusX,
+            radiusY: underbodyRadiusY,
+            radiusZ: underbodyRadiusZ,
+            rotationX: bodyPitch,
+            rotationY: bodyYaw,
+            sceneCenterX,
+            sceneCenterY,
+            animationPhase,
+        });
+        const faceEyeSpacing = size * morphologyProfile.face.eyeSpacingRatio * 0.92;
+        const faceEyeYOffset = size * morphologyProfile.face.eyeCenterYOffsetRatio - mantleRadiusY * 0.02;
+        const faceEyeRadiusX = size * morphologyProfile.face.eyeRadiusXRatio * 0.82;
+        const faceEyeRadiusY = faceEyeRadiusX * morphologyProfile.face.eyeHeightRatio * 0.96;
+        const mouthHalfWidth = size * morphologyProfile.face.mouthWidthRatio * 0.92;
+        const mouthY = size * morphologyProfile.face.mouthYOffsetRatio + mantleRadiusY * 0.08;
+        drawAvatarFrame(context, size, palette);
+        drawOctopus3dAtmosphere(context, size, palette, sceneCenterX, sceneCenterY, interaction, timeMs);
+        drawOctopus3dShadow(context, size, palette, interaction, timeMs);
+        for (const tentacleStroke of tentacleStrokes.filter((candidateTentacleStroke) => !candidateTentacleStroke.isFrontFacing)) {
+            drawTentacleStroke(context, tentacleStroke, palette);
+        }
+        for (const surfacePatch of [...mantlePatches, ...underbodyPatches].sort((firstSurfacePatch, secondSurfacePatch) => firstSurfacePatch.averageDepth - secondSurfacePatch.averageDepth)) {
+            drawSurfacePatch(context, surfacePatch);
+        }
+        for (const tentacleStroke of tentacleStrokes.filter((candidateTentacleStroke) => candidateTentacleStroke.isFrontFacing)) {
+            drawTentacleStroke(context, tentacleStroke, palette);
+        }
+        drawProjectedEye(context, {
+            x: -faceEyeSpacing,
+            y: faceEyeYOffset,
+            z: resolveEllipsoidSurfaceDepth(mantleRadiusX, mantleRadiusY, mantleRadiusZ, -faceEyeSpacing, faceEyeYOffset),
+        }, faceEyeRadiusX, faceEyeRadiusY, mantleCenter, headPitch, headYaw, sceneCenterX, sceneCenterY, size, palette, timeMs, animationPhase + eyeRandom() * 0.6, interaction, morphologyProfile.face.eyeStyle);
+        drawProjectedEye(context, {
+            x: faceEyeSpacing,
+            y: faceEyeYOffset,
+            z: resolveEllipsoidSurfaceDepth(mantleRadiusX, mantleRadiusY, mantleRadiusZ, faceEyeSpacing, faceEyeYOffset),
+        }, faceEyeRadiusX, faceEyeRadiusY, mantleCenter, headPitch, headYaw, sceneCenterX, sceneCenterY, size, palette, timeMs, animationPhase + 0.7 + eyeRandom() * 0.6, interaction, morphologyProfile.face.eyeStyle);
+        drawProjectedMouth(context, [
+            { x: -mouthHalfWidth, y: mouthY, z: resolveEllipsoidSurfaceDepth(mantleRadiusX, mantleRadiusY, mantleRadiusZ, -mouthHalfWidth, mouthY) },
+            {
+                x: size * morphologyProfile.face.mouthCenterOffsetRatio,
+                y: mouthY +
+                    size * morphologyProfile.face.mouthCurveDepthRatio * 0.38 +
+                    Math.sin(timeMs / 760 + animationPhase) * size * 0.01 +
+                    interaction.gazeY * size * 0.01,
+                z: resolveEllipsoidSurfaceDepth(mantleRadiusX, mantleRadiusY, mantleRadiusZ, size * morphologyProfile.face.mouthCenterOffsetRatio, mouthY),
+            },
+            { x: mouthHalfWidth, y: mouthY, z: resolveEllipsoidSurfaceDepth(mantleRadiusX, mantleRadiusY, mantleRadiusZ, mouthHalfWidth, mouthY) },
+        ], mantleCenter, headPitch, headYaw, sceneCenterX, sceneCenterY, palette, size);
+    },
+};
+/**
+ * Draws the atmospheric underwater glow behind the octopus mesh.
+ *
+ * @private helper of `octopus3dAvatarVisual`
+ */
+function drawOctopus3dAtmosphere(context, size, palette, sceneCenterX, sceneCenterY, interaction, timeMs) {
+    const glowGradient = context.createRadialGradient(sceneCenterX + interaction.gazeX * size * 0.1, sceneCenterY - size * 0.2 + interaction.gazeY * size * 0.05, size * 0.04, sceneCenterX, sceneCenterY - size * 0.04, size * 0.62);
+    glowGradient.addColorStop(0, `${palette.highlight}5c`);
+    glowGradient.addColorStop(0.36, `${palette.accent}24`);
+    glowGradient.addColorStop(1, `${palette.highlight}00`);
+    context.fillStyle = glowGradient;
+    context.fillRect(0, 0, size, size);
+    const lowerGradient = context.createRadialGradient(sceneCenterX + Math.sin(timeMs / 1700) * size * 0.05, sceneCenterY + size * 0.23, size * 0.08, sceneCenterX, sceneCenterY + size * 0.28, size * 0.5);
+    lowerGradient.addColorStop(0, `${palette.secondary}1d`);
+    lowerGradient.addColorStop(1, `${palette.secondary}00`);
+    context.fillStyle = lowerGradient;
+    context.fillRect(0, 0, size, size);
+}
+/**
+ * Draws the soft ground shadow below the octopus.
+ *
+ * @private helper of `octopus3dAvatarVisual`
+ */
+function drawOctopus3dShadow(context, size, palette, interaction, timeMs) {
+    context.save();
+    context.fillStyle = `${palette.shadow}66`;
+    context.filter = `blur(${size * 0.022}px)`;
+    context.beginPath();
+    context.ellipse(size * 0.5 + interaction.gazeX * size * 0.04, size * 0.87 + Math.sin(timeMs / 920) * size * 0.008, size * (0.18 + interaction.intensity * 0.02), size * 0.06, 0, 0, Math.PI * 2);
+    context.fill();
+    context.restore();
+}
+/**
+ * Resolves visible projected patches for one rotated ellipsoid mesh.
+ *
+ * @private helper of `octopus3dAvatarVisual`
+ */
+function resolveVisibleEllipsoidPatches(options) {
+    const { center, radiusX, radiusY, radiusZ, rotationX, rotationY, sceneCenterX, sceneCenterY, size, palette, verticalColorBias, outlineColor, } = options;
+    const latitudePatchCount = 10;
+    const longitudePatchCount = 18;
+    const surfacePatches = [];
+    for (let latitudeIndex = 0; latitudeIndex < latitudePatchCount; latitudeIndex++) {
+        const startLatitude = -Math.PI / 2 + (latitudeIndex / latitudePatchCount) * Math.PI;
+        const endLatitude = -Math.PI / 2 + ((latitudeIndex + 1) / latitudePatchCount) * Math.PI;
+        const verticalProgress = (latitudeIndex + 0.5) / latitudePatchCount;
+        for (let longitudeIndex = 0; longitudeIndex < longitudePatchCount; longitudeIndex++) {
+            const startLongitude = -Math.PI + (longitudeIndex / longitudePatchCount) * Math.PI * 2;
+            const endLongitude = -Math.PI + ((longitudeIndex + 1) / longitudePatchCount) * Math.PI * 2;
+            const localCorners = [
+                sampleEllipsoidPoint(radiusX, radiusY, radiusZ, startLatitude, startLongitude),
+                sampleEllipsoidPoint(radiusX, radiusY, radiusZ, startLatitude, endLongitude),
+                sampleEllipsoidPoint(radiusX, radiusY, radiusZ, endLatitude, endLongitude),
+                sampleEllipsoidPoint(radiusX, radiusY, radiusZ, endLatitude, startLongitude),
+            ];
+            const transformedCorners = localCorners.map((localCorner) => transformScenePoint(localCorner, center, rotationX, rotationY));
+            const surfaceNormal = normalizeVector3(crossProduct3D(subtractPoint3D(transformedCorners[1], transformedCorners[0]), subtractPoint3D(transformedCorners[2], transformedCorners[0])));
+            if (surfaceNormal.z <= 0.01) {
+                continue;
+            }
+            const projectedCorners = transformedCorners.map((transformedCorner) => projectScenePoint(transformedCorner, size, sceneCenterX, sceneCenterY));
+            surfacePatches.push({
+                corners: projectedCorners,
+                averageDepth: transformedCorners.reduce((depthSum, transformedCorner) => depthSum + transformedCorner.z, 0) /
+                    transformedCorners.length,
+                lightIntensity: clampNumber$1(dotProduct3D(surfaceNormal, LIGHT_DIRECTION), -1, 1),
+                fillStyle: resolveSurfacePatchFillStyle(palette, verticalProgress + verticalColorBias),
+                outlineColor,
+            });
+        }
+    }
+    return surfacePatches;
+}
+/**
+ * Samples one point on an ellipsoid aligned to the local axes.
+ *
+ * @private helper of `octopus3dAvatarVisual`
+ */
+function sampleEllipsoidPoint(radiusX, radiusY, radiusZ, latitude, longitude) {
+    const cosineLatitude = Math.cos(latitude);
+    return {
+        x: Math.sin(longitude) * cosineLatitude * radiusX,
+        y: Math.sin(latitude) * radiusY,
+        z: Math.cos(longitude) * cosineLatitude * radiusZ,
+    };
+}
+/**
+ * Resolves one base fill tone for a surface patch across the octopus body.
+ *
+ * @private helper of `octopus3dAvatarVisual`
+ */
+function resolveSurfacePatchFillStyle(palette, verticalProgress) {
+    const clampedVerticalProgress = clampNumber$1(verticalProgress, 0, 1);
+    if (clampedVerticalProgress < 0.2) {
+        return palette.highlight;
+    }
+    if (clampedVerticalProgress < 0.45) {
+        return palette.secondary;
+    }
+    if (clampedVerticalProgress < 0.8) {
+        return palette.primary;
+    }
+    return `${palette.shadow}f2`;
+}
+/**
+ * Draws one projected mesh patch with organic shading.
+ *
+ * @private helper of `octopus3dAvatarVisual`
+ */
+function drawSurfacePatch(context, surfacePatch) {
+    drawProjectedQuad(context, surfacePatch.corners, surfacePatch.fillStyle);
+    if (surfacePatch.lightIntensity > 0) {
+        drawProjectedQuad(context, surfacePatch.corners, `rgba(255, 255, 255, ${0.15 * surfacePatch.lightIntensity})`);
+    }
+    else if (surfacePatch.lightIntensity < 0) {
+        drawProjectedQuad(context, surfacePatch.corners, `rgba(0, 0, 0, ${0.24 * Math.abs(surfacePatch.lightIntensity)})`);
+    }
+    context.save();
+    context.beginPath();
+    context.moveTo(surfacePatch.corners[0].x, surfacePatch.corners[0].y);
+    for (let cornerIndex = 1; cornerIndex < surfacePatch.corners.length; cornerIndex++) {
+        context.lineTo(surfacePatch.corners[cornerIndex].x, surfacePatch.corners[cornerIndex].y);
+    }
+    context.closePath();
+    context.strokeStyle = surfacePatch.outlineColor;
+    context.lineWidth = Math.max(1, getProjectedQuadPerimeter(surfacePatch.corners) * 0.0044);
+    context.lineJoin = 'round';
+    context.stroke();
+    context.restore();
+}
+/**
+ * Creates the projected 3D tentacle strokes orbiting around the lower octopus body.
+ *
+ * @private helper of `octopus3dAvatarVisual`
+ */
+function createOctopusTentacleStrokes(options) {
+    const { createRandom, morphologyProfile, timeMs, size, center, radiusX, radiusY, radiusZ, rotationX, rotationY, sceneCenterX, sceneCenterY, animationPhase, } = options;
+    return Array.from({ length: morphologyProfile.tentacles.count }, (_, tentacleIndex) => {
+        const tentacleRandom = createRandom(`octopus3d-tentacle-${tentacleIndex}`);
+        const spreadProgress = morphologyProfile.tentacles.count === 1 ? 0.5 : tentacleIndex / (morphologyProfile.tentacles.count - 1);
+        const orbitAngle = -Math.PI * 0.92 + spreadProgress * Math.PI * 1.84 + (tentacleRandom() - 0.5) * 0.16;
+        const flowLength = size * (0.19 + morphologyProfile.tentacles.flowLengthScale * 0.075 + tentacleRandom() * 0.018);
+        const lateralReach = size *
+            (0.08 + morphologyProfile.tentacles.lateralReachScale * 0.05 + Math.abs(Math.sin(orbitAngle)) * 0.018);
+        const depthReach = size * (0.028 + morphologyProfile.tentacles.tipReachScale * 0.032);
+        const sway = Math.sin(timeMs / (760 + tentacleIndex * 36) + animationPhase + tentacleRandom() * Math.PI * 2);
+        const anchorPoint = {
+            x: Math.sin(orbitAngle) * radiusX * (0.84 + tentacleRandom() * 0.08),
+            y: radiusY * (0.22 + tentacleRandom() * 0.18),
+            z: Math.cos(orbitAngle) * radiusZ * (0.72 + tentacleRandom() * 0.12),
+        };
+        const controlPointOne = {
+            x: anchorPoint.x + Math.sin(orbitAngle) * lateralReach * 0.44,
+            y: anchorPoint.y + flowLength * 0.26,
+            z: anchorPoint.z + Math.cos(orbitAngle) * depthReach * 0.3 + sway * size * 0.012,
+        };
+        const controlPointTwo = {
+            x: anchorPoint.x + Math.sin(orbitAngle) * lateralReach * (0.82 + morphologyProfile.tentacles.swayScale * 0.12),
+            y: anchorPoint.y + flowLength * 0.66,
+            z: anchorPoint.z + Math.cos(orbitAngle) * depthReach * 0.72 + sway * size * 0.02,
+        };
+        const endPoint = {
+            x: anchorPoint.x +
+                Math.sin(orbitAngle) * lateralReach * (1.02 + morphologyProfile.tentacles.tipWidthScale * 0.12) +
+                sway * size * 0.028,
+            y: anchorPoint.y + flowLength,
+            z: anchorPoint.z + Math.cos(orbitAngle) * depthReach + sway * size * 0.016,
+        };
+        const scenePoints = Array.from({ length: 12 }, (_, sampleIndex) => transformScenePoint(sampleCubicBezierPoint3D(anchorPoint, controlPointOne, controlPointTwo, endPoint, sampleIndex / 11), center, rotationX, rotationY));
+        const projectedPoints = scenePoints.map((scenePoint) => projectScenePoint(scenePoint, size, sceneCenterX, sceneCenterY));
+        const averageDepth = scenePoints.reduce((depthSum, scenePoint) => depthSum + scenePoint.z, 0) / scenePoints.length;
+        return {
+            projectedPoints,
+            averageDepth,
+            isFrontFacing: averageDepth >= center.z - size * 0.006,
+            baseWidth: size *
+                (0.019 +
+                    morphologyProfile.tentacles.baseWidthScale * 0.007 +
+                    tentacleRandom() * 0.003 +
+                    Math.abs(Math.sin(orbitAngle)) * 0.002),
+            tipWidth: size * (0.0046 + morphologyProfile.tentacles.tipWidthScale * 0.0018),
+            colorBias: tentacleRandom(),
+        };
+    });
+}
+/**
+ * Samples one point on a cubic Bezier curve in 3D.
+ *
+ * @private helper of `octopus3dAvatarVisual`
+ */
+function sampleCubicBezierPoint3D(startPoint, controlPointOne, controlPointTwo, endPoint, progress) {
+    const inverseProgress = 1 - progress;
+    return {
+        x: inverseProgress * inverseProgress * inverseProgress * startPoint.x +
+            3 * inverseProgress * inverseProgress * progress * controlPointOne.x +
+            3 * inverseProgress * progress * progress * controlPointTwo.x +
+            progress * progress * progress * endPoint.x,
+        y: inverseProgress * inverseProgress * inverseProgress * startPoint.y +
+            3 * inverseProgress * inverseProgress * progress * controlPointOne.y +
+            3 * inverseProgress * progress * progress * controlPointTwo.y +
+            progress * progress * progress * endPoint.y,
+        z: inverseProgress * inverseProgress * inverseProgress * startPoint.z +
+            3 * inverseProgress * inverseProgress * progress * controlPointOne.z +
+            3 * inverseProgress * progress * progress * controlPointTwo.z +
+            progress * progress * progress * endPoint.z,
+    };
+}
+/**
+ * Draws one projected tentacle stroke with a slim highlight ridge.
+ *
+ * @private helper of `octopus3dAvatarVisual`
+ */
+function drawTentacleStroke(context, tentacleStroke, palette) {
+    const projectedSegments = tentacleStroke.projectedPoints.length - 1;
+    for (let segmentIndex = 0; segmentIndex < projectedSegments; segmentIndex++) {
+        const startPoint = tentacleStroke.projectedPoints[segmentIndex];
+        const endPoint = tentacleStroke.projectedPoints[segmentIndex + 1];
+        const progress = segmentIndex / projectedSegments;
+        const width = tentacleStroke.baseWidth + (tentacleStroke.tipWidth - tentacleStroke.baseWidth) * progress;
+        context.beginPath();
+        context.moveTo(startPoint.x, startPoint.y);
+        context.lineTo(endPoint.x, endPoint.y);
+        context.strokeStyle =
+            tentacleStroke.colorBias > 0.6 ? `${palette.secondary}f0` : `${palette.primary}f0`;
+        context.lineWidth = width;
+        context.lineCap = 'round';
+        context.stroke();
+        context.beginPath();
+        context.moveTo(startPoint.x, startPoint.y);
+        context.lineTo(endPoint.x, endPoint.y);
+        context.strokeStyle = tentacleStroke.isFrontFacing ? `${palette.highlight}80` : `${palette.highlight}40`;
+        context.lineWidth = Math.max(1, width * 0.34);
+        context.lineCap = 'round';
+        context.stroke();
+    }
+}
+/**
+ * Resolves the front surface depth on an ellipsoid for one local face point.
+ *
+ * @private helper of `octopus3dAvatarVisual`
+ */
+function resolveEllipsoidSurfaceDepth(radiusX, radiusY, radiusZ, x, y) {
+    const normalizedX = x / radiusX;
+    const normalizedY = y / radiusY;
+    const remainingDepthRatio = Math.max(0, 1 - normalizedX * normalizedX - normalizedY * normalizedY);
+    return Math.sqrt(remainingDepthRatio) * radiusZ;
+}
+/**
+ * Draws one projected eye on the turned octopus mantle.
+ *
+ * @private helper of `octopus3dAvatarVisual`
+ */
+function drawProjectedEye(context, localCenter, radiusX, radiusY, center, rotationX, rotationY, sceneCenterX, sceneCenterY, size, palette, timeMs, phase, interaction, eyeStyle) {
+    const centerScenePoint = transformScenePoint(localCenter, center, rotationX, rotationY);
+    if (centerScenePoint.z <= center.z) {
+        return;
+    }
+    const horizontalScenePoint = transformScenePoint({ x: localCenter.x + radiusX, y: localCenter.y, z: localCenter.z }, center, rotationX, rotationY);
+    const verticalScenePoint = transformScenePoint({ x: localCenter.x, y: localCenter.y + radiusY, z: localCenter.z }, center, rotationX, rotationY);
+    const projectedCenterPoint = projectScenePoint(centerScenePoint, size, sceneCenterX, sceneCenterY);
+    const projectedHorizontalPoint = projectScenePoint(horizontalScenePoint, size, sceneCenterX, sceneCenterY);
+    const projectedVerticalPoint = projectScenePoint(verticalScenePoint, size, sceneCenterX, sceneCenterY);
+    const projectedRadiusX = Math.hypot(projectedHorizontalPoint.x - projectedCenterPoint.x, projectedHorizontalPoint.y - projectedCenterPoint.y);
+    const projectedRadiusY = Math.hypot(projectedVerticalPoint.x - projectedCenterPoint.x, projectedVerticalPoint.y - projectedCenterPoint.y);
+    if (projectedRadiusX < size * 0.008 || projectedRadiusY < size * 0.008) {
+        return;
+    }
+    const { pupilOffsetX, pupilOffsetY } = resolveOrganicEyeMotion({
+        radiusX: projectedRadiusX,
+        radiusY: projectedRadiusY,
+        timeMs,
+        phase,
+        interaction,
+    });
+    const rotation = Math.atan2(projectedHorizontalPoint.y - projectedCenterPoint.y, projectedHorizontalPoint.x - projectedCenterPoint.x);
+    context.save();
+    context.translate(projectedCenterPoint.x, projectedCenterPoint.y);
+    context.rotate(rotation);
+    context.beginPath();
+    context.ellipse(0, 0, projectedRadiusX, projectedRadiusY, 0, 0, Math.PI * 2);
+    context.fillStyle = '#f8fbff';
+    context.fill();
+    context.clip();
+    const irisGradient = context.createRadialGradient(-projectedRadiusX * 0.2, -projectedRadiusY * 0.26, projectedRadiusX * 0.05, 0, 0, projectedRadiusX * 0.92);
+    irisGradient.addColorStop(0, palette.highlight);
+    irisGradient.addColorStop(0.56, palette.secondary);
+    irisGradient.addColorStop(1, palette.shadow);
+    context.beginPath();
+    context.ellipse(pupilOffsetX, pupilOffsetY, projectedRadiusX * 0.62 * eyeStyle.irisScale, projectedRadiusY * 0.72 * eyeStyle.irisScale, 0, 0, Math.PI * 2);
+    context.fillStyle = irisGradient;
+    context.fill();
+    context.beginPath();
+    context.ellipse(pupilOffsetX, pupilOffsetY, projectedRadiusX * 0.15 * eyeStyle.pupilWidthScale, projectedRadiusY * 0.48 * eyeStyle.pupilHeightScale, 0, 0, Math.PI * 2);
+    context.fillStyle = palette.ink;
+    context.fill();
+    context.beginPath();
+    context.ellipse(pupilOffsetX - projectedRadiusX * 0.22, pupilOffsetY - projectedRadiusY * 0.24, projectedRadiusX * 0.12, projectedRadiusY * 0.14, 0, 0, Math.PI * 2);
+    context.fillStyle = '#ffffff';
+    context.fill();
+    context.restore();
+    context.save();
+    context.translate(projectedCenterPoint.x, projectedCenterPoint.y);
+    context.rotate(rotation);
+    context.beginPath();
+    context.ellipse(0, 0, projectedRadiusX, projectedRadiusY, 0, 0, Math.PI * 2);
+    context.strokeStyle = `${palette.shadow}cc`;
+    context.lineWidth = projectedRadiusX * 0.16;
+    context.stroke();
+    context.beginPath();
+    context.moveTo(-projectedRadiusX * 0.88, -projectedRadiusY * eyeStyle.upperLidInsetRatio);
+    context.quadraticCurveTo(0, -projectedRadiusY * (eyeStyle.upperLidArchRatio - interaction.gazeY * 0.16 + interaction.intensity * 0.08), projectedRadiusX * 0.88, -projectedRadiusY * eyeStyle.upperLidInsetRatio);
+    context.strokeStyle = `${palette.shadow}73`;
+    context.lineWidth = projectedRadiusX * 0.14;
+    context.lineCap = 'round';
+    context.stroke();
+    if (eyeStyle.lowerLidOpacity > 0) {
+        context.beginPath();
+        context.moveTo(-projectedRadiusX * 0.74, projectedRadiusY * 0.2);
+        context.quadraticCurveTo(0, projectedRadiusY * 0.38, projectedRadiusX * 0.74, projectedRadiusY * 0.2);
+        context.strokeStyle = `${palette.highlight}${formatAlphaHex(eyeStyle.lowerLidOpacity)}`;
+        context.lineWidth = projectedRadiusX * 0.08;
+        context.lineCap = 'round';
+        context.stroke();
+    }
+    context.restore();
+}
+/**
+ * Draws a subtle projected mouth arc across the front of the mantle.
+ *
+ * @private helper of `octopus3dAvatarVisual`
+ */
+function drawProjectedMouth(context, localPoints, center, rotationX, rotationY, sceneCenterX, sceneCenterY, palette, size) {
+    const scenePoints = localPoints.map((localPoint) => transformScenePoint(localPoint, center, rotationX, rotationY));
+    if (scenePoints.some((scenePoint) => scenePoint.z <= center.z)) {
+        return;
+    }
+    const projectedPoints = scenePoints.map((scenePoint) => projectScenePoint(scenePoint, size, sceneCenterX, sceneCenterY));
+    context.beginPath();
+    context.moveTo(projectedPoints[0].x, projectedPoints[0].y);
+    context.quadraticCurveTo(projectedPoints[1].x, projectedPoints[1].y, projectedPoints[2].x, projectedPoints[2].y);
+    context.strokeStyle = `${palette.ink}b8`;
+    context.lineWidth = Math.max(1.1, size * 0.009);
+    context.lineCap = 'round';
+    context.stroke();
+}
+/**
+ * Draws one filled projected quad.
+ *
+ * @private helper of `octopus3dAvatarVisual`
+ */
+function drawProjectedQuad(context, corners, fillStyle) {
+    context.beginPath();
+    context.moveTo(corners[0].x, corners[0].y);
+    context.lineTo(corners[1].x, corners[1].y);
+    context.lineTo(corners[2].x, corners[2].y);
+    context.lineTo(corners[3].x, corners[3].y);
+    context.closePath();
+    context.fillStyle = fillStyle;
+    context.fill();
+}
+/**
+ * Converts an opacity ratio into a two-digit hexadecimal alpha suffix.
+ *
+ * @private helper of `octopus3dAvatarVisual`
+ */
+function formatAlphaHex(opacity) {
+    return Math.round(clampNumber$1(opacity, 0, 1) * 255)
+        .toString(16)
+        .padStart(2, '0');
+}
+
 /* eslint-disable no-magic-numbers */
 /**
  * Octopus avatar visual.
@@ -15666,6 +16183,7 @@ const AVATAR_VISUALS = [
     octopusAvatarVisual,
     octopus2AvatarVisual,
     octopus3AvatarVisual,
+    octopus3dAvatarVisual,
     asciiOctopusAvatarVisual,
     minecraftAvatarVisual,
     minecraft2AvatarVisual,
@@ -17859,16 +18377,22 @@ function resolveTeamTeammateLabels(teamContent, teammates) {
  * Each teammate is listed with its tool name, TEAM instructions, and optional profile hints.
  */
 function buildTeamSystemMessageBody(teamEntries) {
-    const lines = [
-        ...TEAM_SYSTEM_MESSAGE_GUIDANCE_LINES,
-        '',
-        ...teamEntries.map((entry, index) => {
-            const toolLine = `${index + 1}) ${entry.teammate.label} tool \`${entry.toolName}\``;
-            const detailLines = collectTeamEntryDetails(entry).map(formatTeamEntryDetailLine);
-            return [toolLine, ...detailLines].join('\n');
-        }),
-    ];
-    return lines.join('\n');
+    const teammateSections = teamEntries.map((entry, index) => {
+        const toolLine = `${index + 1}) ${entry.teammate.label} tool \`${entry.toolName}\``;
+        const detailLines = collectTeamEntryDetails(entry).map(formatTeamEntryDetailLine);
+        if (detailLines.length === 0) {
+            return toolLine;
+        }
+        return spaceTrim$1((block) => `
+                ${toolLine}
+                ${block(detailLines.join('\n'))}
+            `);
+    });
+    return spaceTrim$1((block) => `
+            ${block(TEAM_SYSTEM_MESSAGE_GUIDANCE_LINES.join('\n'))}
+
+            ${block(teammateSections.join('\n\n'))}
+        `);
 }
 /**
  * Builds the model-visible description for one teammate tool.
@@ -30996,7 +31520,11 @@ function createExampleInteractionsContent(parseResult, samples) {
     if (examples.length === 0) {
         return null;
     }
-    return `## Sample of communication with the agent:\n\n${examples.join('\n\n')}`;
+    return spaceTrim$1((block) => `
+            ## Sample of communication with the agent:
+
+            ${block(examples.join('\n\n'))}
+        `);
 }
 /**
  * Collects the individual lines used in the example interaction section.
@@ -31033,7 +31561,11 @@ function collectExampleInteractionLines(parseResult, samples) {
 function appendSystemMessageSection(requirements, section) {
     return {
         ...requirements,
-        systemMessage: requirements.systemMessage + '\n\n' + section,
+        systemMessage: spaceTrim$1((block) => `
+                ${block(requirements.systemMessage)}
+
+                ${block(section)}
+            `),
     };
 }
 /**