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

package/umd/index.umd.js

@@ -50,7 +50,7 @@
      * @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
@@ -3539,11 +3539,11 @@
      */
     function pipelineJsonToString(pipelineJson) {
         const { title, pipelineUrl, bookVersion, description, parameters, tasks } = pipelineJson;
-        let pipelineString = `# ${title}`;
-        if (description) {
-            pipelineString += '\n\n';
-            pipelineString += description;
-        }
+        let pipelineString = _spaceTrim.spaceTrim((block) => `
+            # ${title}
+
+            ${block(description || '')}
+        `);
         const commands = [];
         if (pipelineUrl) {
             commands.push(`PIPELINE URL ${pipelineUrl}`);
@@ -3559,20 +3559,17 @@
         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.spaceTrim((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') {
@@ -3635,18 +3632,23 @@
                     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.spaceTrim(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.spaceTrim((block) => `
+                ${block(pipelineString)}
+
+                ## ${title}
+
+                ${block(description || '')}
+
+                ${block(commands.map((command) => `- ${command}`).join('\n'))}
+
+                \`\`\`${contentLanguage}
+                ${block(_spaceTrim.spaceTrim(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);
     }
@@ -13284,6 +13286,184 @@
         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.
@@ -13456,18 +13636,12 @@
     }
 
     /* 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,
@@ -13679,7 +13853,7 @@
                 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,
             };
         });
@@ -13706,7 +13880,7 @@
                 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),
@@ -13715,10 +13889,10 @@
             }
         }
         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();
@@ -13742,7 +13916,7 @@
      *
      * @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);
@@ -13755,203 +13929,34 @@
     /**
      * 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 */
@@ -14521,7 +14526,7 @@
      *
      * @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');
@@ -14900,7 +14905,7 @@
             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();
@@ -14908,6 +14913,518 @@
         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.
@@ -15676,6 +16193,7 @@
         octopusAvatarVisual,
         octopus2AvatarVisual,
         octopus3AvatarVisual,
+        octopus3dAvatarVisual,
         asciiOctopusAvatarVisual,
         minecraftAvatarVisual,
         minecraft2AvatarVisual,
@@ -17869,16 +18387,22 @@
      * 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.spaceTrim((block) => `
+                ${toolLine}
+                ${block(detailLines.join('\n'))}
+            `);
+        });
+        return _spaceTrim.spaceTrim((block) => `
+            ${block(TEAM_SYSTEM_MESSAGE_GUIDANCE_LINES.join('\n'))}
+
+            ${block(teammateSections.join('\n\n'))}
+        `);
     }
     /**
      * Builds the model-visible description for one teammate tool.
@@ -31006,7 +31530,11 @@
         if (examples.length === 0) {
             return null;
         }
-        return `## Sample of communication with the agent:\n\n${examples.join('\n\n')}`;
+        return _spaceTrim.spaceTrim((block) => `
+            ## Sample of communication with the agent:
+
+            ${block(examples.join('\n\n'))}
+        `);
     }
     /**
      * Collects the individual lines used in the example interaction section.
@@ -31043,7 +31571,11 @@
     function appendSystemMessageSection(requirements, section) {
         return {
             ...requirements,
-            systemMessage: requirements.systemMessage + '\n\n' + section,
+            systemMessage: _spaceTrim.spaceTrim((block) => `
+                ${block(requirements.systemMessage)}
+
+                ${block(section)}
+            `),
         };
     }
     /**