@promptbook/browser 0.112.0-99 → 0.112.0

package/esm/index.es.js

@@ -1,15 +1,15 @@
 import { spaceTrim as spaceTrim$1 } from 'spacetrim';
 import { Registration } from 'destroyable';
 import { BehaviorSubject, Subject } from 'rxjs';
-import { randomBytes } from 'crypto';
-import { SHA256 } from 'crypto-js';
+import CryptoJS from 'crypto-js';
 import hexEncoder from 'crypto-js/enc-hex';
 import { basename, join, dirname, isAbsolute } from 'path';
+import 'crypto';
 import moment from 'moment';
 import { lookup, extension } from 'mime-types';
 import { forTime } from 'waitasecond';
 import sha256 from 'crypto-js/sha256';
-import { parse, unparse } from 'papaparse';
+import papaparse from 'papaparse';
 import { fileSearchTool, tool, Agent as Agent$1, webSearchTool, run, setDefaultOpenAIClient, setDefaultOpenAIKey } from '@openai/agents';
 import colors from 'colors';
 import Bottleneck from 'bottleneck';
@@ -29,7 +29,7 @@ const BOOK_LANGUAGE_VERSION = '2.0.0';
  * @generated
  * @see https://github.com/webgptorg/promptbook
  */
-const PROMPTBOOK_ENGINE_VERSION = '0.112.0-99';
+const PROMPTBOOK_ENGINE_VERSION = '0.112.0';
 /**
  * TODO: string_promptbook_version should be constrained to the all versions of Promptbook engine
  * Note: [💞] Ignore a discrepancy between file name and entity name
@@ -2332,7 +2332,7 @@ function valueToString(value) {
  * @public exported from `@promptbook/utils`
  */
 function computeHash(value) {
-    return SHA256(hexEncoder.parse(spaceTrim$1(valueToString(value)))).toString( /* hex */);
+    return CryptoJS.SHA256(hexEncoder.parse(spaceTrim$1(valueToString(value)))).toString( /* hex */);
 }
 // TODO: [🥬][🥬] Use this ACRY
 
@@ -2605,6 +2605,11 @@ function isValidUrl(url) {
  * - `isValidAgentUrl` *(this one)* which tests just agent URL
  * - `isValidPipelineUrl` which tests just pipeline URL
  *
+ * Note: This is a pure structural validator and does not block private/internal network
+ * addresses. Callers that fetch the URL server-side from an untrusted network context must
+ * additionally apply the `assertSafeUrl` SSRF guard from the Agents Server before any
+ * outbound request.
+ *
  * @public exported from `@promptbook/utils`
  */
 function isValidAgentUrl(url) {
@@ -2618,12 +2623,6 @@ function isValidAgentUrl(url) {
         // TODO: [🐠]
         return false;
     }
-    /*
-    Note: [👣][🧠] Is it secure to allow pipeline URLs on private and unsecured networks?
-    if (isUrlOnPrivateNetwork(url)) {
-        return false;
-    }
-    */
     return true;
 }
 // TODO: [🐠] Maybe more info why the URL is invalid
@@ -2799,8 +2798,11 @@ class GoalCommitmentDefinition extends BaseCommitmentDefinition {
         if (!trimmedContent) {
             return requirements;
         }
-        // Add goal as a proper h2 section to the system message
-        const goalSection = `## Goal\n\n${trimmedContent}`;
+        const goalSection = spaceTrim$1((block) => `
+                ## Goal
+
+                ${block(trimmedContent)}
+            `);
         const requirementsWithGoal = this.appendToSystemMessage(requirements, goalSection, '\n\n');
         return this.appendToPromptSuffix(requirementsWithGoal, trimmedContent);
     }
@@ -3694,8 +3696,11 @@ class LanguageCommitmentDefinition extends BaseCommitmentDefinition {
         if (!trimmedContent) {
             return requirements;
         }
-        // Add language as a bullet under a ## Language section
-        const languageSection = `## Language\n\n-   Your language is ${trimmedContent}`;
+        const languageSection = spaceTrim$1((block) => `
+                ## Language
+
+                -   Your language is ${block(trimmedContent)}
+            `);
         return this.appendToSystemMessage(requirements, languageSection, '\n\n');
     }
 }
@@ -6161,21 +6166,22 @@ function getPointBounds(points) {
  * @private helper of `fractalAvatarVisual`
  */
 function drawDragonCurveLayer(context, points, options) {
-    const { size, primaryColor, secondaryColor, tertiaryColor, shadowColor, strokeWidth, timeMs, layerIndex } = options;
+    const { primaryColor, secondaryColor, tertiaryColor, shadowColor, strokeWidth, timeMs, layerIndex } = options;
     const firstPoint = points[0];
     const lastPoint = points[points.length - 1];
     const ribbonGradient = context.createLinearGradient(firstPoint.x, firstPoint.y, lastPoint.x, lastPoint.y);
     ribbonGradient.addColorStop(0, `${primaryColor}f2`);
     ribbonGradient.addColorStop(0.5, `${secondaryColor}e6`);
     ribbonGradient.addColorStop(1, `${tertiaryColor}f2`);
+    // Approximate the blurred shadow stroke with a wider semi-transparent stroke instead of
+    // context.filter blur, which triggers a costly software rasterization pass every frame.
     context.save();
     context.beginPath();
     tracePolyline(context, points);
-    context.strokeStyle = `${shadowColor}82`;
-    context.lineWidth = strokeWidth * 1.8;
+    context.strokeStyle = `${shadowColor}48`;
+    context.lineWidth = strokeWidth * 4.5;
     context.lineJoin = 'round';
     context.lineCap = 'round';
-    context.filter = `blur(${size * 0.022}px)`;
     context.stroke();
     context.restore();
     context.beginPath();
@@ -6637,7 +6643,7 @@ function fillTextureRect(texture, x, y, width, height, color) {
  *
  * @private helper of `minecraft2AvatarVisual`
  */
-const LIGHT_DIRECTION$2 = normalizeVector3({
+const LIGHT_DIRECTION$4 = normalizeVector3({
     x: 0.4,
     y: -0.65,
     z: 0.92,
@@ -6759,11 +6765,23 @@ function drawMinecraftBackdrop(context, size, palette, sceneCenterX, spotlightY,
  * @private helper of `minecraft2AvatarVisual`
  */
 function drawMinecraftShadow(context, size, palette, interaction, timeMs) {
+    const cx = size * 0.5 + interaction.gazeX * size * 0.03;
+    const cy = size * 0.85 + Math.sin(timeMs / 880) * size * 0.01;
+    const rx = size * (0.16 + interaction.intensity * 0.015);
+    const ry = size * 0.055;
+    // Radial gradient approximates the blurry ellipse shadow without context.filter blur.
     context.save();
-    context.fillStyle = `${palette.shadow}66`;
-    context.filter = `blur(${size * 0.02}px)`;
+    context.translate(cx, cy);
+    context.scale(1, ry / rx);
+    const blurRadius = rx * 1.4;
+    const shadowGradient = context.createRadialGradient(0, 0, 0, 0, 0, blurRadius);
+    shadowGradient.addColorStop(0, `${palette.shadow}7a`);
+    shadowGradient.addColorStop(0.45, `${palette.shadow}44`);
+    shadowGradient.addColorStop(0.8, `${palette.shadow}1a`);
+    shadowGradient.addColorStop(1, `${palette.shadow}00`);
+    context.fillStyle = shadowGradient;
     context.beginPath();
-    context.ellipse(size * 0.5 + interaction.gazeX * size * 0.03, size * 0.85 + Math.sin(timeMs / 880) * size * 0.01, size * (0.16 + interaction.intensity * 0.015), size * 0.055, 0, 0, Math.PI * 2);
+    context.arc(0, 0, blurRadius, 0, Math.PI * 2);
     context.fill();
     context.restore();
 }
@@ -6849,7 +6867,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$2), -1, 1),
+            lightIntensity: clampNumber$1(dotProduct3D(faceNormal, LIGHT_DIRECTION$4), -1, 1),
             outlineColor: cuboid.outlineColor,
         };
     });
@@ -6987,13 +7005,27 @@ const minecraftAvatarVisual = {
         spotlight.addColorStop(1, `${palette.highlight}00`);
         context.fillStyle = spotlight;
         context.fillRect(0, 0, size, size);
-        context.save();
-        context.fillStyle = 'rgba(0, 0, 0, 0.22)';
-        context.filter = `blur(${size * 0.018}px)`;
-        context.beginPath();
-        context.ellipse(size * 0.5, size * 0.86, size * 0.2, size * 0.06, 0, 0, Math.PI * 2);
-        context.fill();
-        context.restore();
+        {
+            // Radial gradient approximates the blurry ellipse shadow without context.filter blur.
+            const cx = size * 0.5;
+            const cy = size * 0.86;
+            const rx = size * 0.2;
+            const ry = size * 0.06;
+            const blurRadius = rx * 1.4;
+            const shadowGradient = context.createRadialGradient(0, 0, 0, 0, 0, blurRadius);
+            shadowGradient.addColorStop(0, 'rgba(0,0,0,0.28)');
+            shadowGradient.addColorStop(0.45, 'rgba(0,0,0,0.14)');
+            shadowGradient.addColorStop(0.8, 'rgba(0,0,0,0.05)');
+            shadowGradient.addColorStop(1, 'rgba(0,0,0,0)');
+            context.save();
+            context.translate(cx, cy);
+            context.scale(1, ry / rx);
+            context.fillStyle = shadowGradient;
+            context.beginPath();
+            context.arc(0, 0, blurRadius, 0, Math.PI * 2);
+            context.fill();
+            context.restore();
+        }
         drawVoxelCuboid(context, {
             x: bodyX,
             y: bodyY,
@@ -7522,7 +7554,7 @@ function resolveSeededIntegerRange(random, minimumValue, maximumValue) {
  *
  * @private helper of `octopus3AvatarVisual`
  */
-function formatAlphaHex$1(opacity) {
+function formatAlphaHex$2(opacity) {
     return Math.round(Math.min(1, Math.max(0, opacity)) * 255)
         .toString(16)
         .padStart(2, '0');
@@ -7901,7 +7933,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$1(eyeStyle.lowerLidOpacity)}`;
+        context.strokeStyle = `${palette.highlight}${formatAlphaHex$2(eyeStyle.lowerLidOpacity)}`;
         context.lineWidth = radiusX * 0.08;
         context.lineCap = 'round';
         context.stroke();
@@ -7982,7 +8014,7 @@ function drawProjectedOrganicEye(context, localCenter, radiusX, radiusY, center,
         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.strokeStyle = `${palette.highlight}${formatAlphaHex$1(eyeStyle.lowerLidOpacity)}`;
         context.lineWidth = projectedRadiusX * 0.08;
         context.lineCap = 'round';
         context.stroke();
@@ -8028,7 +8060,7 @@ function drawProjectedQuad(context, corners, fillStyle) {
  *
  * @private helper of the 3D octopus avatar visuals
  */
-function formatAlphaHex(opacity) {
+function formatAlphaHex$1(opacity) {
     return Math.round(clampNumber$1(opacity, 0, 1) * 255)
         .toString(16)
         .padStart(2, '0');
@@ -8040,11 +8072,40 @@ function formatAlphaHex(opacity) {
  *
  * @private helper of `octopus3dAvatarVisual`
  */
-const LIGHT_DIRECTION$1 = normalizeVector3({
+const LIGHT_DIRECTION$3 = normalizeVector3({
     x: 0.48,
     y: -0.62,
     z: 0.94,
 });
+/**
+ * Cache keyed by the `createRandom` factory reference (stable per mounted `<Avatar/>`).
+ *
+ * @private helper of `octopus3dAvatarVisual`
+ */
+const octopus3dStableStateCache = new WeakMap();
+/**
+ * Returns the stable per-avatar state, computing it on first access and caching for subsequent frames.
+ *
+ * @private helper of `octopus3dAvatarVisual`
+ */
+function getOctopus3dStableState(createRandom) {
+    const cached = octopus3dStableStateCache.get(createRandom);
+    if (cached !== undefined) {
+        return cached;
+    }
+    const animationRandom = createRandom('octopus3d-animation-profile');
+    const eyeRandom = createRandom('octopus3d-eye-profile');
+    const leftEyePhaseOffset = eyeRandom() * 0.6;
+    const rightEyePhaseOffset = eyeRandom() * 0.6;
+    const state = {
+        morphologyProfile: createOctopus3MorphologyProfile(createRandom),
+        animationPhase: animationRandom() * Math.PI * 2,
+        leftEyePhaseOffset,
+        rightEyePhaseOffset,
+    };
+    octopus3dStableStateCache.set(createRandom, state);
+    return state;
+}
 /**
  * Proper 3D Octopus visual built from projected organic meshes and tentacles.
  *
@@ -8057,10 +8118,7 @@ const octopus3dAvatarVisual = {
     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 { morphologyProfile, animationPhase, leftEyePhaseOffset, rightEyePhaseOffset } = getOctopus3dStableState(createRandom);
         const sceneCenterX = size * 0.5;
         const sceneCenterY = size * 0.56;
         const bob = Math.sin(timeMs / 920 + animationPhase) * size * 0.014;
@@ -8157,12 +8215,12 @@ const octopus3dAvatarVisual = {
             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);
+        }, faceEyeRadiusX, faceEyeRadiusY, mantleCenter, headPitch, headYaw, sceneCenterX, sceneCenterY, size, palette, timeMs, animationPhase + leftEyePhaseOffset, interaction, morphologyProfile.face.eyeStyle);
         drawProjectedOrganicEye(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);
+        }, faceEyeRadiusX, faceEyeRadiusY, mantleCenter, headPitch, headYaw, sceneCenterX, sceneCenterY, size, palette, timeMs, animationPhase + 0.7 + rightEyePhaseOffset, interaction, morphologyProfile.face.eyeStyle);
         drawProjectedOrganicMouth(context, [
             {
                 x: -mouthHalfWidth,
@@ -8206,14 +8264,28 @@ function drawOctopus3dAtmosphere(context, size, palette, sceneCenterX, sceneCent
 /**
  * Draws the soft ground shadow below the octopus.
  *
+ * Uses a scaled radial gradient instead of `context.filter = 'blur()'` to approximate the
+ * blurry ellipse without triggering a costly software rasterization pass on every frame.
+ *
  * @private helper of `octopus3dAvatarVisual`
  */
 function drawOctopus3dShadow(context, size, palette, interaction, timeMs) {
+    const cx = size * 0.5 + interaction.gazeX * size * 0.04;
+    const cy = size * 0.87 + Math.sin(timeMs / 920) * size * 0.008;
+    const rx = size * (0.18 + interaction.intensity * 0.02);
+    const ry = size * 0.06;
     context.save();
-    context.fillStyle = `${palette.shadow}66`;
-    context.filter = `blur(${size * 0.022}px)`;
+    context.translate(cx, cy);
+    context.scale(1, ry / rx);
+    const blurRadius = rx * 1.4;
+    const shadowGradient = context.createRadialGradient(0, 0, 0, 0, 0, blurRadius);
+    shadowGradient.addColorStop(0, `${palette.shadow}7a`);
+    shadowGradient.addColorStop(0.45, `${palette.shadow}44`);
+    shadowGradient.addColorStop(0.8, `${palette.shadow}1a`);
+    shadowGradient.addColorStop(1, `${palette.shadow}00`);
+    context.fillStyle = shadowGradient;
     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.arc(0, 0, blurRadius, 0, Math.PI * 2);
     context.fill();
     context.restore();
 }
@@ -8250,7 +8322,7 @@ function resolveVisibleEllipsoidPatches(options) {
                 corners: projectedCorners,
                 averageDepth: transformedCorners.reduce((depthSum, transformedCorner) => depthSum + transformedCorner.z, 0) /
                     transformedCorners.length,
-                lightIntensity: clampNumber$1(dotProduct3D(surfaceNormal, LIGHT_DIRECTION$1), -1, 1),
+                lightIntensity: clampNumber$1(dotProduct3D(surfaceNormal, LIGHT_DIRECTION$3), -1, 1),
                 fillStyle: resolveSurfacePatchFillStyle(palette, verticalProgress + verticalColorBias),
                 outlineColor,
             });
@@ -8439,11 +8511,40 @@ function resolveEllipsoidSurfaceDepth(radiusX, radiusY, radiusZ, x, y) {
  *
  * @private helper of `octopus3d2AvatarVisual`
  */
-const LIGHT_DIRECTION = normalizeVector3({
+const LIGHT_DIRECTION$2 = normalizeVector3({
     x: 0.38,
     y: -0.6,
     z: 0.98,
 });
+/**
+ * Cache keyed by the `createRandom` factory reference (stable per mounted `<Avatar/>`).
+ *
+ * @private helper of `octopus3d2AvatarVisual`
+ */
+const octopus3d2StableStateCache = new WeakMap();
+/**
+ * Returns the stable per-avatar state, computing it on first access and caching for subsequent frames.
+ *
+ * @private helper of `octopus3d2AvatarVisual`
+ */
+function getOctopus3d2StableState(createRandom) {
+    const cached = octopus3d2StableStateCache.get(createRandom);
+    if (cached !== undefined) {
+        return cached;
+    }
+    const animationRandom = createRandom('octopus3d2-animation-profile');
+    const eyeRandom = createRandom('octopus3d2-eye-profile');
+    const leftEyePhaseOffset = eyeRandom() * 0.7;
+    const rightEyePhaseOffset = eyeRandom() * 0.7;
+    const state = {
+        morphologyProfile: createOctopus3MorphologyProfile(createRandom),
+        animationPhase: animationRandom() * Math.PI * 2,
+        leftEyePhaseOffset,
+        rightEyePhaseOffset,
+    };
+    octopus3d2StableStateCache.set(createRandom, state);
+    return state;
+}
 /**
  * Octopus 3D 2 avatar visual.
  *
@@ -8456,10 +8557,7 @@ const octopus3d2AvatarVisual = {
     isAnimated: true,
     supportsPointerTracking: true,
     render({ context, size, palette, createRandom, timeMs, interaction }) {
-        const morphologyProfile = createOctopus3MorphologyProfile(createRandom);
-        const animationRandom = createRandom('octopus3d2-animation-profile');
-        const eyeRandom = createRandom('octopus3d2-eye-profile');
-        const animationPhase = animationRandom() * Math.PI * 2;
+        const { morphologyProfile, animationPhase, leftEyePhaseOffset, rightEyePhaseOffset } = getOctopus3d2StableState(createRandom);
         const sceneCenterX = size * 0.5;
         const sceneCenterY = size * 0.575;
         const bob = Math.sin(timeMs / 940 + animationPhase) * size * 0.013;
@@ -8512,8 +8610,8 @@ const octopus3d2AvatarVisual = {
         const rightEyeLocalCenter = sampleBlobbyOctopusSurfacePoint(surfaceOptions, eyeLatitude, eyeLongitude);
         const eyeRadiusX = size * morphologyProfile.face.eyeRadiusXRatio * 0.78;
         const eyeRadiusY = eyeRadiusX * morphologyProfile.face.eyeHeightRatio * 0.92;
-        drawProjectedOrganicEye(context, leftEyeLocalCenter, eyeRadiusX, eyeRadiusY, meshCenter, rotationX, rotationY, sceneCenterX, sceneCenterY, size, palette, timeMs, animationPhase + eyeRandom() * 0.7, interaction, morphologyProfile.face.eyeStyle);
-        drawProjectedOrganicEye(context, rightEyeLocalCenter, eyeRadiusX, eyeRadiusY, meshCenter, rotationX, rotationY, sceneCenterX, sceneCenterY, size, palette, timeMs, animationPhase + 0.9 + eyeRandom() * 0.7, interaction, morphologyProfile.face.eyeStyle);
+        drawProjectedOrganicEye(context, leftEyeLocalCenter, eyeRadiusX, eyeRadiusY, meshCenter, rotationX, rotationY, sceneCenterX, sceneCenterY, size, palette, timeMs, animationPhase + leftEyePhaseOffset, interaction, morphologyProfile.face.eyeStyle);
+        drawProjectedOrganicEye(context, rightEyeLocalCenter, eyeRadiusX, eyeRadiusY, meshCenter, rotationX, rotationY, sceneCenterX, sceneCenterY, size, palette, timeMs, animationPhase + 0.9 + rightEyePhaseOffset, interaction, morphologyProfile.face.eyeStyle);
         drawProjectedOrganicMouth(context, [
             sampleBlobbyOctopusSurfacePoint(surfaceOptions, mouthLatitude, mouthCenterLongitude - mouthHalfLongitude),
             sampleBlobbyOctopusSurfacePoint(surfaceOptions, mouthCurveLatitude, mouthCenterLongitude),
@@ -8542,54 +8640,118 @@ function drawBlobbyOctopusAtmosphere(context, size, palette, sceneCenterX, scene
 /**
  * Draws the soft floor shadow that anchors the single mesh in the frame.
  *
+ * Uses a scaled radial gradient instead of `context.filter = 'blur()'` to approximate the
+ * blurry ellipse without triggering a costly software rasterization pass on every frame.
+ *
  * @private helper of `octopus3d2AvatarVisual`
  */
 function drawBlobbyOctopusShadow(context, size, palette, interaction, timeMs, morphologyProfile) {
+    const cx = size * 0.5 + interaction.gazeX * size * 0.045;
+    const cy = size * 0.88 + Math.sin(timeMs / 940) * size * 0.008;
+    const rx = size * (0.18 + (morphologyProfile.body.horizontalStretch - 1) * 0.04 + interaction.intensity * 0.018);
+    const ry = size * 0.062;
     context.save();
-    context.fillStyle = `${palette.shadow}66`;
-    context.filter = `blur(${size * 0.024}px)`;
+    context.translate(cx, cy);
+    context.scale(1, ry / rx);
+    const blurRadius = rx * 1.4;
+    const shadowGradient = context.createRadialGradient(0, 0, 0, 0, 0, blurRadius);
+    shadowGradient.addColorStop(0, `${palette.shadow}7a`);
+    shadowGradient.addColorStop(0.45, `${palette.shadow}44`);
+    shadowGradient.addColorStop(0.8, `${palette.shadow}1a`);
+    shadowGradient.addColorStop(1, `${palette.shadow}00`);
+    context.fillStyle = shadowGradient;
     context.beginPath();
-    context.ellipse(size * 0.5 + interaction.gazeX * size * 0.045, size * 0.88 + Math.sin(timeMs / 940) * size * 0.008, size * (0.18 + (morphologyProfile.body.horizontalStretch - 1) * 0.04 + interaction.intensity * 0.018), size * 0.062, 0, 0, Math.PI * 2);
+    context.arc(0, 0, blurRadius, 0, Math.PI * 2);
     context.fill();
     context.restore();
 }
+/**
+ * Number of latitude segments used by the single blobby octopus mesh.
+ *
+ * @private helper of `octopus3d2AvatarVisual`
+ */
+const LATITUDE_PATCH_COUNT$2 = 12;
+/**
+ * Number of longitude segments used by the single blobby octopus mesh.
+ *
+ * @private helper of `octopus3d2AvatarVisual`
+ */
+const LONGITUDE_PATCH_COUNT$2 = 24;
 /**
  * Resolves all visible projected patches for the single blobby octopus mesh.
  *
+ * Within a single frame, mesh corner samples and longitude-only lobe-wave values are
+ * quantized to the patch grid and computed once each rather than re-evaluated for every
+ * patch corner — the patch loop alone would call `sampleBlobbyOctopusSurfacePoint`
+ * `latitudePatchCount * longitudePatchCount * 4` times without caching, even though most
+ * corners are shared between neighboring patches.
+ *
  * @private helper of `octopus3d2AvatarVisual`
  */
 function resolveVisibleBlobbyOctopusPatches(options) {
     const { center, rotationX, rotationY, sceneCenterX, sceneCenterY, size, palette, morphologyProfile, animationPhase, timeMs, } = options;
-    const latitudePatchCount = 12;
-    const longitudePatchCount = 24;
+    const latitudePatchCount = LATITUDE_PATCH_COUNT$2;
+    const longitudePatchCount = LONGITUDE_PATCH_COUNT$2;
     const surfacePatches = [];
+    const latitudeBoundaries = new Float64Array(latitudePatchCount + 1);
+    const longitudeBoundaries = new Float64Array(longitudePatchCount + 1);
+    for (let boundaryIndex = 0; boundaryIndex <= latitudePatchCount; boundaryIndex++) {
+        latitudeBoundaries[boundaryIndex] = -Math.PI / 2 + (boundaryIndex / latitudePatchCount) * Math.PI;
+    }
+    for (let boundaryIndex = 0; boundaryIndex <= longitudePatchCount; boundaryIndex++) {
+        longitudeBoundaries[boundaryIndex] = -Math.PI + (boundaryIndex / longitudePatchCount) * Math.PI * 2;
+    }
+    const cachedLobeWavesByCornerLongitude = new Float64Array(longitudePatchCount + 1);
+    for (let boundaryIndex = 0; boundaryIndex <= longitudePatchCount; boundaryIndex++) {
+        cachedLobeWavesByCornerLongitude[boundaryIndex] = resolveLowerLobeWave(longitudeBoundaries[boundaryIndex], morphologyProfile, animationPhase, timeMs);
+    }
+    const cornerCount = (latitudePatchCount + 1) * (longitudePatchCount + 1);
+    const transformedCornerSamples = new Array(cornerCount);
+    for (let latitudeBoundaryIndex = 0; latitudeBoundaryIndex <= latitudePatchCount; latitudeBoundaryIndex++) {
+        const cornerLatitude = latitudeBoundaries[latitudeBoundaryIndex];
+        for (let longitudeBoundaryIndex = 0; longitudeBoundaryIndex <= longitudePatchCount; longitudeBoundaryIndex++) {
+            const cornerLongitude = longitudeBoundaries[longitudeBoundaryIndex];
+            const cornerIndex = latitudeBoundaryIndex * (longitudePatchCount + 1) + longitudeBoundaryIndex;
+            const cornerSample = sampleBlobbyOctopusSurfacePointWithLongitudeCache(options, cornerLatitude, cornerLongitude, cachedLobeWavesByCornerLongitude[longitudeBoundaryIndex]);
+            transformedCornerSamples[cornerIndex] = transformScenePoint(cornerSample, center, rotationX, rotationY);
+        }
+    }
     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 startLatitude = latitudeBoundaries[latitudeIndex];
+        const endLatitude = latitudeBoundaries[latitudeIndex + 1];
         const centerLatitude = (startLatitude + endLatitude) / 2;
         const verticalProgress = (Math.sin(centerLatitude) + 1) / 2;
+        const startCornerRowOffset = latitudeIndex * (longitudePatchCount + 1);
+        const endCornerRowOffset = (latitudeIndex + 1) * (longitudePatchCount + 1);
         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 startLongitude = longitudeBoundaries[longitudeIndex];
+            const endLongitude = longitudeBoundaries[longitudeIndex + 1];
             const centerLongitude = (startLongitude + endLongitude) / 2;
-            const localCorners = [
-                sampleBlobbyOctopusSurfacePoint(options, startLatitude, startLongitude),
-                sampleBlobbyOctopusSurfacePoint(options, startLatitude, endLongitude),
-                sampleBlobbyOctopusSurfacePoint(options, endLatitude, endLongitude),
-                sampleBlobbyOctopusSurfacePoint(options, endLatitude, startLongitude),
+            const transformedCorners = [
+                transformedCornerSamples[startCornerRowOffset + longitudeIndex],
+                transformedCornerSamples[startCornerRowOffset + longitudeIndex + 1],
+                transformedCornerSamples[endCornerRowOffset + longitudeIndex + 1],
+                transformedCornerSamples[endCornerRowOffset + longitudeIndex],
             ];
-            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));
+            const projectedCorners = [
+                projectScenePoint(transformedCorners[0], size, sceneCenterX, sceneCenterY),
+                projectScenePoint(transformedCorners[1], size, sceneCenterX, sceneCenterY),
+                projectScenePoint(transformedCorners[2], size, sceneCenterX, sceneCenterY),
+                projectScenePoint(transformedCorners[3], 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: resolveBlobbySurfacePatchFillStyle(palette, verticalProgress, Math.max(0, Math.cos(centerLongitude)), resolveLowerLobeWave(centerLongitude, morphologyProfile, animationPhase, timeMs)),
+                averageDepth: (transformedCorners[0].z +
+                    transformedCorners[1].z +
+                    transformedCorners[2].z +
+                    transformedCorners[3].z) /
+                    4,
+                lightIntensity: clampNumber$1(dotProduct3D(surfaceNormal, LIGHT_DIRECTION$2), -1, 1),
+                fillStyle: resolveBlobbySurfacePatchFillStyle$1(palette, verticalProgress, Math.max(0, Math.cos(centerLongitude)), resolveLowerLobeWave(centerLongitude, morphologyProfile, animationPhase, timeMs)),
                 outlineColor: verticalProgress < 0.58 ? `${palette.highlight}73` : `${palette.shadow}8a`,
             });
         }
@@ -8605,12 +8767,21 @@ function resolveVisibleBlobbyOctopusPatches(options) {
  * @private helper of `octopus3d2AvatarVisual`
  */
 function sampleBlobbyOctopusSurfacePoint(options, latitude, longitude) {
+    const { morphologyProfile, animationPhase, timeMs } = options;
+    return sampleBlobbyOctopusSurfacePointWithLongitudeCache(options, latitude, longitude, resolveLowerLobeWave(longitude, morphologyProfile, animationPhase, timeMs));
+}
+/**
+ * Samples one point on the continuous Octopus 3D 2 surface using a precomputed lower-lobe wave
+ * to skip the per-call trig evaluation for `latitudePatchCount + 1` longitude-shared corners.
+ *
+ * @private helper of `octopus3d2AvatarVisual`
+ */
+function sampleBlobbyOctopusSurfacePointWithLongitudeCache(options, latitude, longitude, lowerLobeWave) {
     const { radiusX, radiusY, radiusZ, morphologyProfile, timeMs, animationPhase } = options;
     const cosineLatitude = Math.max(0, Math.cos(latitude));
     const verticalProgress = (Math.sin(latitude) + 1) / 2;
     const upperBlend = Math.pow(1 - verticalProgress, 1.2);
     const lowerBlend = Math.pow(verticalProgress, 1.42);
-    const lowerLobeWave = resolveLowerLobeWave(longitude, morphologyProfile, animationPhase, timeMs);
     const skirtEnvelope = Math.pow(cosineLatitude, 0.5) * lowerBlend;
     const horizontalScale = 1.02 +
         skirtEnvelope * (0.34 + (morphologyProfile.tentacles.rootSpreadScale - 1) * 0.22 + lowerLobeWave * 0.22) -
@@ -8648,7 +8819,7 @@ function resolveLowerLobeWave(longitude, morphologyProfile, animationPhase, time
  *
  * @private helper of `octopus3d2AvatarVisual`
  */
-function resolveBlobbySurfacePatchFillStyle(palette, verticalProgress, forwardness, lowerLobeWave) {
+function resolveBlobbySurfacePatchFillStyle$1(palette, verticalProgress, forwardness, lowerLobeWave) {
     const tonalProgress = clampNumber$1(verticalProgress + lowerLobeWave * 0.12 - forwardness * 0.07, 0, 1);
     if (tonalProgress < 0.16) {
         return palette.highlight;
@@ -8688,6 +8859,1384 @@ function drawBlobbySurfacePatch(context, surfacePatch) {
     context.restore();
 }
 
+/* eslint-disable no-magic-numbers */
+/**
+ * Light direction used by the continuous octopus mesh shading.
+ *
+ * @private helper of `octopus3d3AvatarVisual`
+ */
+const LIGHT_DIRECTION$1 = normalizeVector3({
+    x: 0.34,
+    y: -0.62,
+    z: 1,
+});
+/**
+ * Real-octopus tentacle count used by the continuous lower mesh.
+ *
+ * @private helper of `octopus3d3AvatarVisual`
+ */
+const OCTOPUS_TENTACLE_COUNT$1 = 8;
+/**
+ * Cache keyed by the `createRandom` factory reference, which is stable for the lifetime of one
+ * mounted `<Avatar/>` component (created inside `resolveAvatarRenderDefinition` and held in a
+ * React `useMemo`).  Using a `WeakMap` ensures the entry is collected when the component unmounts.
+ *
+ * @private helper of `octopus3d3AvatarVisual`
+ */
+const stableStateCache = new WeakMap();
+/**
+ * Returns the stable per-avatar state, computing it on first access and returning the cached
+ * result on every subsequent call within the same `<Avatar/>` mount.
+ *
+ * @private helper of `octopus3d3AvatarVisual`
+ */
+function getOctopus3d3StableState(createRandom) {
+    const cached = stableStateCache.get(createRandom);
+    if (cached !== undefined) {
+        return cached;
+    }
+    const morphologyProfile = createOctopus3MorphologyProfile(createRandom);
+    const animationRandom = createRandom('octopus3d3-animation-profile');
+    const eyeRandom = createRandom('octopus3d3-eye-profile');
+    const leftEyePhaseOffset = eyeRandom() * 0.7;
+    const rightEyePhaseOffset = eyeRandom() * 0.7;
+    const state = {
+        morphologyProfile,
+        animationPhase: animationRandom() * Math.PI * 2,
+        leftEyePhaseOffset,
+        rightEyePhaseOffset,
+        tentacleProfiles: createContinuousTentacleProfiles(createRandom, morphologyProfile),
+    };
+    stableStateCache.set(createRandom, state);
+    return state;
+}
+/**
+ * Octopus 3D 3 avatar visual.
+ *
+ * @private built-in avatar visual
+ */
+const octopus3d3AvatarVisual = {
+    id: 'octopus3d3',
+    title: 'Octopus 3D 3',
+    description: 'Cute continuous 3D octopus with a blobby single mesh, waving tentacle lobes, rich shading, and cursor-aware eyes.',
+    isAnimated: true,
+    supportsPointerTracking: true,
+    render({ context, size, palette, createRandom, timeMs, interaction }) {
+        const { morphologyProfile, animationPhase, leftEyePhaseOffset, rightEyePhaseOffset, tentacleProfiles } = getOctopus3d3StableState(createRandom);
+        const sceneCenterX = size * 0.5;
+        const sceneCenterY = size * 0.535;
+        const bob = Math.sin(timeMs / 960 + animationPhase) * size * 0.012;
+        const meshCenter = {
+            x: interaction.bodyOffsetX * size * 0.048 + size * morphologyProfile.body.centerXJitterRatio * 0.44,
+            y: -size * 0.07 + interaction.bodyOffsetY * size * 0.026 + bob,
+            z: interaction.intensity * size * 0.018,
+        };
+        const rotationY = -0.1 +
+            Math.sin(timeMs / 2700 + animationPhase) * 0.035 +
+            interaction.bodyOffsetX * 0.22 +
+            interaction.gazeX * 0.88;
+        const rotationX = -0.07 +
+            Math.cos(timeMs / 3100 + animationPhase * 0.7) * 0.018 -
+            interaction.bodyOffsetY * 0.08 -
+            interaction.gazeY * 0.38;
+        const surfaceOptions = {
+            radiusX: size * morphologyProfile.body.bodyRadiusRatio * morphologyProfile.body.horizontalStretch * 1.1,
+            radiusY: size * morphologyProfile.body.bodyRadiusRatio * morphologyProfile.body.verticalStretch * 1.08,
+            radiusZ: size *
+                morphologyProfile.body.bodyRadiusRatio *
+                (1.02 + (morphologyProfile.body.horizontalStretch - 1) * 0.18),
+            morphologyProfile,
+            timeMs,
+            animationPhase,
+            tentacleProfiles,
+        };
+        const surfacePatches = resolveVisibleContinuousOctopusPatches({
+            ...surfaceOptions,
+            center: meshCenter,
+            rotationX,
+            rotationY,
+            sceneCenterX,
+            sceneCenterY,
+            size,
+            palette,
+        });
+        const eyeLatitude = clampNumber$1(morphologyProfile.face.eyeCenterYOffsetRatio * 4.2 - 0.03, -0.22, 0.08);
+        const eyeLongitude = clampNumber$1(morphologyProfile.face.eyeSpacingRatio * 3.1, 0.18, 0.32);
+        const mouthLatitude = clampNumber$1(eyeLatitude + 0.2 + morphologyProfile.face.mouthYOffsetRatio, 0.08, 0.34);
+        const mouthCenterLongitude = clampNumber$1(morphologyProfile.face.mouthCenterOffsetRatio * 5.6, -0.08, 0.08);
+        const mouthHalfLongitude = clampNumber$1(eyeLongitude * 0.78, 0.15, 0.28);
+        const mouthCurveLatitude = clampNumber$1(mouthLatitude + morphologyProfile.face.mouthCurveDepthRatio * 0.78, mouthLatitude + 0.03, 0.42);
+        const eyeRadiusX = size * morphologyProfile.face.eyeRadiusXRatio * 0.76;
+        const eyeRadiusY = eyeRadiusX * morphologyProfile.face.eyeHeightRatio * 0.9;
+        drawAvatarFrame(context, size, palette);
+        drawContinuousOctopusAtmosphere(context, size, palette, sceneCenterX, sceneCenterY, interaction, timeMs);
+        drawContinuousOctopusShadow(context, size, palette, interaction, timeMs, morphologyProfile);
+        for (const surfacePatch of surfacePatches.sort((firstSurfacePatch, secondSurfacePatch) => firstSurfacePatch.averageDepth - secondSurfacePatch.averageDepth)) {
+            drawContinuousSurfacePatch(context, surfacePatch);
+        }
+        drawProjectedSurfaceCurrents({
+            context,
+            surfaceOptions,
+            center: meshCenter,
+            rotationX,
+            rotationY,
+            sceneCenterX,
+            sceneCenterY,
+            size,
+            palette,
+            morphologyProfile,
+            timeMs,
+            animationPhase,
+        });
+        drawProjectedTentacleSuckers({
+            context,
+            surfaceOptions,
+            center: meshCenter,
+            rotationX,
+            rotationY,
+            sceneCenterX,
+            sceneCenterY,
+            size,
+            palette,
+        });
+        drawProjectedOrganicEye(context, sampleContinuousOctopusSurfacePoint(surfaceOptions, eyeLatitude, -eyeLongitude), eyeRadiusX, eyeRadiusY, meshCenter, rotationX, rotationY, sceneCenterX, sceneCenterY, size, palette, timeMs, animationPhase + leftEyePhaseOffset, interaction, morphologyProfile.face.eyeStyle);
+        drawProjectedOrganicEye(context, sampleContinuousOctopusSurfacePoint(surfaceOptions, eyeLatitude, eyeLongitude), eyeRadiusX, eyeRadiusY, meshCenter, rotationX, rotationY, sceneCenterX, sceneCenterY, size, palette, timeMs, animationPhase + 0.85 + rightEyePhaseOffset, interaction, morphologyProfile.face.eyeStyle);
+        drawProjectedOrganicMouth(context, [
+            sampleContinuousOctopusSurfacePoint(surfaceOptions, mouthLatitude, mouthCenterLongitude - mouthHalfLongitude),
+            sampleContinuousOctopusSurfacePoint(surfaceOptions, mouthCurveLatitude, mouthCenterLongitude),
+            sampleContinuousOctopusSurfacePoint(surfaceOptions, mouthLatitude, mouthCenterLongitude + mouthHalfLongitude),
+        ], meshCenter, rotationX, rotationY, sceneCenterX, sceneCenterY, palette, size);
+    },
+};
+/**
+ * Creates seeded tentacle-lobe profiles around the visible lower octopus body.
+ *
+ * @private helper of `octopus3d3AvatarVisual`
+ */
+function createContinuousTentacleProfiles(createRandom, morphologyProfile) {
+    return Array.from({ length: OCTOPUS_TENTACLE_COUNT$1 }, (_, tentacleIndex) => {
+        const tentacleRandom = createRandom(`octopus3d3-tentacle-${tentacleIndex}`);
+        const progress = tentacleIndex / (OCTOPUS_TENTACLE_COUNT$1 - 1);
+        return {
+            centerLongitude: -Math.PI * 0.86 +
+                progress * Math.PI * 1.72 +
+                (tentacleRandom() - 0.5) * (0.08 + morphologyProfile.tentacles.rootSpreadScale * 0.03),
+            widthScale: 0.86 + tentacleRandom() * 0.34 + (morphologyProfile.tentacles.baseWidthScale - 1) * 0.16,
+            lengthScale: 0.86 + tentacleRandom() * 0.36 + (morphologyProfile.tentacles.flowLengthScale - 1) * 0.22,
+            swayScale: 0.82 + tentacleRandom() * 0.38 + (morphologyProfile.tentacles.swayScale - 1) * 0.2,
+            depthScale: 0.86 + tentacleRandom() * 0.32 + (morphologyProfile.tentacles.tipReachScale - 1) * 0.2,
+            phase: tentacleRandom() * Math.PI * 2,
+            suckerSide: tentacleRandom() > 0.5 ? 1 : -1,
+        };
+    });
+}
+/**
+ * Draws the soft underwater atmosphere behind the continuous octopus mesh.
+ *
+ * @private helper of `octopus3d3AvatarVisual`
+ */
+function drawContinuousOctopusAtmosphere(context, size, palette, sceneCenterX, sceneCenterY, interaction, timeMs) {
+    const glowGradient = context.createRadialGradient(sceneCenterX + interaction.gazeX * size * 0.11, sceneCenterY - size * 0.17 + interaction.gazeY * size * 0.05, size * 0.04, sceneCenterX, sceneCenterY, size * (0.66 + interaction.intensity * 0.02));
+    glowGradient.addColorStop(0, `${palette.highlight}66`);
+    glowGradient.addColorStop(0.34, `${palette.accent}2e`);
+    glowGradient.addColorStop(1, `${palette.highlight}00`);
+    context.fillStyle = glowGradient;
+    context.fillRect(0, 0, size, size);
+    const lowerGradient = context.createRadialGradient(sceneCenterX + Math.sin(timeMs / 1550) * size * 0.05, sceneCenterY + size * 0.29, size * 0.06, sceneCenterX, sceneCenterY + size * 0.3, size * 0.54);
+    lowerGradient.addColorStop(0, `${palette.secondary}25`);
+    lowerGradient.addColorStop(1, `${palette.secondary}00`);
+    context.fillStyle = lowerGradient;
+    context.fillRect(0, 0, size, size);
+}
+/**
+ * Draws the soft lower shadow that anchors the octopus in the avatar frame.
+ *
+ * Uses a scaled radial gradient instead of `context.filter = 'blur()'` to approximate the
+ * blurry ellipse without triggering a costly software rasterization pass on every frame.
+ *
+ * @private helper of `octopus3d3AvatarVisual`
+ */
+function drawContinuousOctopusShadow(context, size, palette, interaction, timeMs, morphologyProfile) {
+    const cx = size * 0.5 + interaction.gazeX * size * 0.045;
+    const cy = size * 0.9 + Math.sin(timeMs / 980) * size * 0.007;
+    const rx = size * (0.19 + morphologyProfile.tentacles.rootSpreadScale * 0.022 + interaction.intensity * 0.02);
+    const ry = size * 0.06;
+    // Scale the context so that drawing a circle produces the correct ellipse aspect ratio,
+    // then fill with a radial gradient that approximates the blurry edge without context.filter.
+    context.save();
+    context.translate(cx, cy);
+    context.scale(1, ry / rx);
+    const blurRadius = rx * 1.4;
+    const shadowGradient = context.createRadialGradient(0, 0, 0, 0, 0, blurRadius);
+    shadowGradient.addColorStop(0, `${palette.shadow}7a`);
+    shadowGradient.addColorStop(0.45, `${palette.shadow}44`);
+    shadowGradient.addColorStop(0.8, `${palette.shadow}1a`);
+    shadowGradient.addColorStop(1, `${palette.shadow}00`);
+    context.fillStyle = shadowGradient;
+    context.beginPath();
+    context.arc(0, 0, blurRadius, 0, Math.PI * 2);
+    context.fill();
+    context.restore();
+}
+/**
+ * Number of latitude segments used by the continuous Octopus 3D 3 mesh.
+ *
+ * @private helper of `octopus3d3AvatarVisual`
+ */
+const LATITUDE_PATCH_COUNT$1 = 16;
+/**
+ * Number of longitude segments used by the continuous Octopus 3D 3 mesh.
+ *
+ * @private helper of `octopus3d3AvatarVisual`
+ */
+const LONGITUDE_PATCH_COUNT$1 = 40;
+/**
+ * Resolves visible projected patches for the continuous octopus mesh.
+ *
+ * Within a single frame, mesh corner samples and longitude-only computations (tentacle
+ * influence and lobe wave) are quantized to the patch grid and computed once each rather
+ * than re-evaluated for every patch corner — the patch loop alone calls `sampleContinuousOctopusSurfacePoint`
+ * for `latitudePatchCount * longitudePatchCount * 4` corners without caching, and each call
+ * triggers an inner 8-iteration `Math.exp` loop, which dominates the per-frame cost.
+ *
+ * @private helper of `octopus3d3AvatarVisual`
+ */
+function resolveVisibleContinuousOctopusPatches(options) {
+    const { center, rotationX, rotationY, sceneCenterX, sceneCenterY, size, palette } = options;
+    const latitudePatchCount = LATITUDE_PATCH_COUNT$1;
+    const longitudePatchCount = LONGITUDE_PATCH_COUNT$1;
+    const surfacePatches = [];
+    const latitudeBoundaries = new Float64Array(latitudePatchCount + 1);
+    const longitudeBoundaries = new Float64Array(longitudePatchCount + 1);
+    for (let boundaryIndex = 0; boundaryIndex <= latitudePatchCount; boundaryIndex++) {
+        latitudeBoundaries[boundaryIndex] = -Math.PI / 2 + (boundaryIndex / latitudePatchCount) * Math.PI;
+    }
+    for (let boundaryIndex = 0; boundaryIndex <= longitudePatchCount; boundaryIndex++) {
+        longitudeBoundaries[boundaryIndex] = -Math.PI + (boundaryIndex / longitudePatchCount) * Math.PI * 2;
+    }
+    const cachedTentacleInfluencesByCornerLongitude = new Array(longitudePatchCount + 1);
+    const cachedLobeWavesByCornerLongitude = new Float64Array(longitudePatchCount + 1);
+    const cachedTentacleInfluencesByPatchCenterLongitude = new Array(longitudePatchCount);
+    const cachedLobeWavesByPatchCenterLongitude = new Float64Array(longitudePatchCount);
+    const cachedCosByPatchCenterLongitude = new Float64Array(longitudePatchCount);
+    for (let boundaryIndex = 0; boundaryIndex <= longitudePatchCount; boundaryIndex++) {
+        const cornerLongitude = longitudeBoundaries[boundaryIndex];
+        cachedTentacleInfluencesByCornerLongitude[boundaryIndex] = resolveContinuousTentacleInfluence(options, cornerLongitude);
+        cachedLobeWavesByCornerLongitude[boundaryIndex] = resolveContinuousLobeWave(options, cornerLongitude);
+    }
+    for (let longitudeIndex = 0; longitudeIndex < longitudePatchCount; longitudeIndex++) {
+        const patchCenterLongitude = (longitudeBoundaries[longitudeIndex] + longitudeBoundaries[longitudeIndex + 1]) / 2;
+        cachedTentacleInfluencesByPatchCenterLongitude[longitudeIndex] = resolveContinuousTentacleInfluence(options, patchCenterLongitude);
+        cachedLobeWavesByPatchCenterLongitude[longitudeIndex] = resolveContinuousLobeWave(options, patchCenterLongitude);
+        cachedCosByPatchCenterLongitude[longitudeIndex] = Math.max(0, Math.cos(patchCenterLongitude));
+    }
+    const cornerCount = (latitudePatchCount + 1) * (longitudePatchCount + 1);
+    const transformedCornerSamples = new Array(cornerCount);
+    for (let latitudeBoundaryIndex = 0; latitudeBoundaryIndex <= latitudePatchCount; latitudeBoundaryIndex++) {
+        const cornerLatitude = latitudeBoundaries[latitudeBoundaryIndex];
+        for (let longitudeBoundaryIndex = 0; longitudeBoundaryIndex <= longitudePatchCount; longitudeBoundaryIndex++) {
+            const cornerLongitude = longitudeBoundaries[longitudeBoundaryIndex];
+            const cornerIndex = latitudeBoundaryIndex * (longitudePatchCount + 1) + longitudeBoundaryIndex;
+            const cornerSample = sampleContinuousOctopusSurfacePointWithLongitudeCache(options, cornerLatitude, cornerLongitude, cachedTentacleInfluencesByCornerLongitude[longitudeBoundaryIndex], cachedLobeWavesByCornerLongitude[longitudeBoundaryIndex]);
+            transformedCornerSamples[cornerIndex] = transformScenePoint(cornerSample, center, rotationX, rotationY);
+        }
+    }
+    for (let latitudeIndex = 0; latitudeIndex < latitudePatchCount; latitudeIndex++) {
+        const startLatitude = latitudeBoundaries[latitudeIndex];
+        const endLatitude = latitudeBoundaries[latitudeIndex + 1];
+        const centerLatitude = (startLatitude + endLatitude) / 2;
+        const verticalProgress = (Math.sin(centerLatitude) + 1) / 2;
+        const startCornerRowOffset = latitudeIndex * (longitudePatchCount + 1);
+        const endCornerRowOffset = (latitudeIndex + 1) * (longitudePatchCount + 1);
+        for (let longitudeIndex = 0; longitudeIndex < longitudePatchCount; longitudeIndex++) {
+            const transformedCorners = [
+                transformedCornerSamples[startCornerRowOffset + longitudeIndex],
+                transformedCornerSamples[startCornerRowOffset + longitudeIndex + 1],
+                transformedCornerSamples[endCornerRowOffset + longitudeIndex + 1],
+                transformedCornerSamples[endCornerRowOffset + longitudeIndex],
+            ];
+            const surfaceNormal = normalizeVector3(crossProduct3D(subtractPoint3D(transformedCorners[1], transformedCorners[0]), subtractPoint3D(transformedCorners[2], transformedCorners[0])));
+            if (surfaceNormal.z <= 0.008) {
+                continue;
+            }
+            const projectedCorners = [
+                projectScenePoint(transformedCorners[0], size, sceneCenterX, sceneCenterY),
+                projectScenePoint(transformedCorners[1], size, sceneCenterX, sceneCenterY),
+                projectScenePoint(transformedCorners[2], size, sceneCenterX, sceneCenterY),
+                projectScenePoint(transformedCorners[3], size, sceneCenterX, sceneCenterY),
+            ];
+            surfacePatches.push({
+                corners: projectedCorners,
+                averageDepth: (transformedCorners[0].z +
+                    transformedCorners[1].z +
+                    transformedCorners[2].z +
+                    transformedCorners[3].z) /
+                    4,
+                lightIntensity: clampNumber$1(dotProduct3D(surfaceNormal, LIGHT_DIRECTION$1), -1, 1),
+                fillStyle: resolveContinuousSurfacePatchFillStyle(palette, verticalProgress, cachedCosByPatchCenterLongitude[longitudeIndex], cachedTentacleInfluencesByPatchCenterLongitude[longitudeIndex].core, cachedLobeWavesByPatchCenterLongitude[longitudeIndex]),
+                outlineColor: verticalProgress < 0.54 ? `${palette.highlight}69` : `${palette.shadow}78`,
+            });
+        }
+    }
+    return surfacePatches;
+}
+/**
+ * Samples one point on the continuous Octopus 3D 3 surface.
+ *
+ * The lower hemisphere is pulled into eight seeded waving lobes, so the portrait reads as
+ * tentacled while still being rendered as one connected blobby mesh.
+ *
+ * @private helper of `octopus3d3AvatarVisual`
+ */
+function sampleContinuousOctopusSurfacePoint(options, latitude, longitude) {
+    return sampleContinuousOctopusSurfacePointWithLongitudeCache(options, latitude, longitude, resolveContinuousTentacleInfluence(options, longitude), resolveContinuousLobeWave(options, longitude));
+}
+/**
+ * Samples one point on the continuous Octopus 3D 3 surface using precomputed longitude-only
+ * values to skip the per-call `Math.exp` tentacle-influence loop and the lobe-wave trig call.
+ *
+ * The patch loop quantizes the mesh into a fixed `(latitudePatchCount + 1) * (longitudePatchCount + 1)`
+ * corner grid, so the same longitude is reused across every latitude row and each
+ * tentacle/lobe value can be computed once per frame instead of `latitudePatchCount * 4` times.
+ *
+ * @private helper of `octopus3d3AvatarVisual`
+ */
+function sampleContinuousOctopusSurfacePointWithLongitudeCache(options, latitude, longitude, tentacleInfluence, lowerLobeWave) {
+    const { radiusX, radiusY, radiusZ, morphologyProfile, timeMs, animationPhase } = options;
+    const cosineLatitude = Math.max(0, Math.cos(latitude));
+    const verticalProgress = (Math.sin(latitude) + 1) / 2;
+    const upperBlend = Math.pow(1 - verticalProgress, 1.28);
+    const lowerBlend = smoothStep$1(0.38, 1, verticalProgress);
+    const tipBlend = smoothStep$1(0.68, 1, verticalProgress);
+    const centerPull = resolveSignedAngularDistance$1(longitude, tentacleInfluence.centerLongitude);
+    const effectiveLongitude = longitude + centerPull * lowerBlend * tentacleInfluence.core * (0.24 + tipBlend * 0.2);
+    const mantleRipple = Math.sin(longitude * morphologyProfile.body.lobeCount +
+        animationPhase * 0.6 +
+        timeMs / (1750 + morphologyProfile.body.lobeCount * 30)) *
+        (0.018 + morphologyProfile.body.wobbleAmplitudeRatio * 0.8) *
+        (0.3 + lowerBlend * 0.7);
+    const tentacleWave = Math.sin(timeMs / 760 + tentacleInfluence.phase + verticalProgress * 2.4) *
+        lowerBlend *
+        tentacleInfluence.core *
+        tentacleInfluence.swayScale;
+    const horizontalScale = 1.04 +
+        mantleRipple +
+        lowerBlend * (0.16 + (morphologyProfile.tentacles.rootSpreadScale - 1) * 0.1) +
+        lowerBlend * tentacleInfluence.core * (0.2 + lowerLobeWave * 0.12) -
+        upperBlend * 0.08;
+    const depthScale = 1.06 +
+        upperBlend * 0.16 +
+        Math.max(0, Math.cos(effectiveLongitude)) * 0.1 +
+        lowerBlend * tentacleInfluence.core * (0.1 + tentacleInfluence.depthScale * 0.06) -
+        Math.max(0, -Math.cos(effectiveLongitude)) * 0.05;
+    const tentacleTubeRadius = lowerBlend * tentacleInfluence.core * (0.11 + tipBlend * 0.06 + tentacleInfluence.widthScale * 0.025) * radiusX;
+    const planarRadiusX = cosineLatitude * radiusX * horizontalScale + tentacleTubeRadius;
+    const planarRadiusZ = cosineLatitude * radiusZ * depthScale + tentacleTubeRadius * 0.72;
+    const lowerDrop = lowerBlend *
+        radiusY *
+        (0.18 +
+            tentacleInfluence.core *
+                (0.38 +
+                    tentacleInfluence.lengthScale * 0.22 +
+                    (morphologyProfile.tentacles.flowLengthScale - 1) * 0.08));
+    return {
+        x: Math.sin(effectiveLongitude) * planarRadiusX + tentacleWave * radiusX * (0.052 + tipBlend * 0.05),
+        y: Math.sin(latitude) * radiusY * (1 + upperBlend * 0.12) -
+            upperBlend * radiusY * 0.1 +
+            lowerDrop +
+            Math.sin(timeMs / 1420 + animationPhase + latitude * 1.6) * lowerBlend * radiusY * 0.018 +
+            Math.cos(timeMs / 880 + tentacleInfluence.phase) *
+                lowerBlend *
+                tipBlend *
+                tentacleInfluence.core *
+                radiusY *
+                0.034,
+        z: Math.cos(effectiveLongitude) * planarRadiusZ +
+            Math.cos(timeMs / 980 + tentacleInfluence.phase + verticalProgress) *
+                lowerBlend *
+                tentacleInfluence.core *
+                radiusZ *
+                0.04,
+    };
+}
+/**
+ * Blends nearby seeded tentacle profiles at one mesh longitude.
+ *
+ * @private helper of `octopus3d3AvatarVisual`
+ */
+function resolveContinuousTentacleInfluence(options, longitude) {
+    let totalWeight = 0;
+    let weightedSin = 0;
+    let weightedCos = 0;
+    let weightedWidthScale = 0;
+    let weightedLengthScale = 0;
+    let weightedSwayScale = 0;
+    let weightedDepthScale = 0;
+    let weightedPhase = 0;
+    for (const tentacleProfile of options.tentacleProfiles) {
+        const distance = Math.abs(resolveSignedAngularDistance$1(longitude, tentacleProfile.centerLongitude));
+        const width = 0.2 * tentacleProfile.widthScale;
+        const weight = Math.exp(-(distance * distance) / (width * width));
+        totalWeight += weight;
+        weightedSin += Math.sin(tentacleProfile.centerLongitude) * weight;
+        weightedCos += Math.cos(tentacleProfile.centerLongitude) * weight;
+        weightedWidthScale += tentacleProfile.widthScale * weight;
+        weightedLengthScale += tentacleProfile.lengthScale * weight;
+        weightedSwayScale += tentacleProfile.swayScale * weight;
+        weightedDepthScale += tentacleProfile.depthScale * weight;
+        weightedPhase += tentacleProfile.phase * weight;
+    }
+    if (totalWeight < 0.0001) {
+        return {
+            core: 0,
+            centerLongitude: longitude,
+            widthScale: 1,
+            lengthScale: 1,
+            swayScale: 1,
+            depthScale: 1,
+            phase: 0,
+        };
+    }
+    return {
+        core: clampNumber$1(totalWeight, 0, 1),
+        centerLongitude: Math.atan2(weightedSin / totalWeight, weightedCos / totalWeight),
+        widthScale: weightedWidthScale / totalWeight,
+        lengthScale: weightedLengthScale / totalWeight,
+        swayScale: weightedSwayScale / totalWeight,
+        depthScale: weightedDepthScale / totalWeight,
+        phase: weightedPhase / totalWeight,
+    };
+}
+/**
+ * Resolves the soft lower wave that makes the continuous mesh read as a set of tentacles.
+ *
+ * @private helper of `octopus3d3AvatarVisual`
+ */
+function resolveContinuousLobeWave(options, longitude) {
+    const { morphologyProfile, animationPhase, timeMs } = options;
+    return ((Math.cos(longitude * OCTOPUS_TENTACLE_COUNT$1 +
+        animationPhase +
+        timeMs / (980 + morphologyProfile.body.lobeCount * 18)) +
+        1) /
+        2);
+}
+/**
+ * Resolves one base fill tone for a patch on the continuous octopus mesh.
+ *
+ * @private helper of `octopus3d3AvatarVisual`
+ */
+function resolveContinuousSurfacePatchFillStyle(palette, verticalProgress, forwardness, tentacleCore, lowerLobeWave) {
+    const tonalProgress = clampNumber$1(verticalProgress + lowerLobeWave * 0.1 + tentacleCore * 0.08 - forwardness * 0.08, 0, 1);
+    if (tonalProgress < 0.14) {
+        return palette.highlight;
+    }
+    if (tonalProgress < 0.32) {
+        return palette.secondary;
+    }
+    if (tonalProgress < 0.72) {
+        return forwardness > 0.55 ? palette.secondary : palette.primary;
+    }
+    return tentacleCore > 0.44 ? `${palette.primary}f4` : `${palette.shadow}ee`;
+}
+/**
+ * Draws one projected mesh patch with soft shading and a subtle edge.
+ *
+ * @private helper of `octopus3d3AvatarVisual`
+ */
+function drawContinuousSurfacePatch(context, surfacePatch) {
+    drawProjectedQuad(context, surfacePatch.corners, surfacePatch.fillStyle);
+    if (surfacePatch.lightIntensity > 0) {
+        drawProjectedQuad(context, surfacePatch.corners, `rgba(255, 255, 255, ${0.18 * surfacePatch.lightIntensity})`);
+    }
+    else if (surfacePatch.lightIntensity < 0) {
+        drawProjectedQuad(context, surfacePatch.corners, `rgba(0, 0, 0, ${0.25 * 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(0.7, getProjectedQuadPerimeter(surfacePatch.corners) * 0.0032);
+    context.lineJoin = 'round';
+    context.stroke();
+    context.restore();
+}
+/**
+ * Draws projected mantle-current lines on the front of the mesh.
+ *
+ * @private helper of `octopus3d3AvatarVisual`
+ */
+function drawProjectedSurfaceCurrents(options) {
+    const { context, surfaceOptions, center, rotationX, rotationY, sceneCenterX, sceneCenterY, size, palette, morphologyProfile, timeMs, animationPhase, } = options;
+    const currentCount = Math.min(6, morphologyProfile.details.mantleCurrentCount);
+    const centerIndex = (currentCount - 1) / 2;
+    context.save();
+    context.lineCap = 'round';
+    context.lineJoin = 'round';
+    for (let currentIndex = 0; currentIndex < currentCount; currentIndex++) {
+        const baseLongitude = (currentIndex - centerIndex) * 0.15;
+        const projectedPoints = [];
+        for (let sampleIndex = 0; sampleIndex < 8; sampleIndex++) {
+            const progress = sampleIndex / 7;
+            const latitude = -0.46 + progress * 0.74;
+            const longitude = baseLongitude + Math.sin(timeMs / 1160 + animationPhase + currentIndex * 0.7 + progress * 2) * 0.035;
+            const scenePoint = transformScenePoint(sampleContinuousOctopusSurfacePoint(surfaceOptions, latitude, longitude), center, rotationX, rotationY);
+            if (scenePoint.z > center.z - size * 0.016) {
+                projectedPoints.push(projectScenePoint(scenePoint, size, sceneCenterX, sceneCenterY));
+            }
+        }
+        if (projectedPoints.length < 3) {
+            continue;
+        }
+        context.beginPath();
+        context.moveTo(projectedPoints[0].x, projectedPoints[0].y);
+        for (const projectedPoint of projectedPoints.slice(1)) {
+            context.lineTo(projectedPoint.x, projectedPoint.y);
+        }
+        context.strokeStyle = currentIndex % 2 === 0 ? `${palette.highlight}3d` : `${palette.accent}33`;
+        context.lineWidth = size * (0.0055 + currentIndex * 0.00045);
+        context.stroke();
+    }
+    context.restore();
+}
+/**
+ * Draws small projected sucker highlights on the waving lower mesh lobes.
+ *
+ * @private helper of `octopus3d3AvatarVisual`
+ */
+function drawProjectedTentacleSuckers(options) {
+    const { surfaceOptions, size } = options;
+    const { timeMs } = surfaceOptions;
+    for (const tentacleProfile of surfaceOptions.tentacleProfiles) {
+        if (Math.cos(tentacleProfile.centerLongitude) < -0.12) {
+            continue;
+        }
+        for (let suckerIndex = 0; suckerIndex < 3; suckerIndex++) {
+            const latitude = 0.52 + suckerIndex * 0.14;
+            const sideOffset = tentacleProfile.suckerSide * (0.035 + suckerIndex * 0.012) * tentacleProfile.widthScale;
+            const waveOffset = Math.sin(timeMs / 900 + tentacleProfile.phase + suckerIndex * 0.8) * 0.018;
+            drawProjectedSurfaceSpot({
+                ...options,
+                latitude,
+                longitude: tentacleProfile.centerLongitude + sideOffset + waveOffset,
+                radiusScale: size * (0.0065 - suckerIndex * 0.0007),
+            });
+        }
+    }
+}
+/**
+ * Draws one tiny projected surface spot by sampling local mesh tangents.
+ *
+ * @private helper of `octopus3d3AvatarVisual`
+ */
+function drawProjectedSurfaceSpot(options) {
+    const { context, surfaceOptions, center, rotationX, rotationY, sceneCenterX, sceneCenterY, size, palette, latitude, longitude, radiusScale, } = options;
+    const localCenter = sampleContinuousOctopusSurfacePoint(surfaceOptions, latitude, longitude);
+    const localHorizontal = sampleContinuousOctopusSurfacePoint(surfaceOptions, latitude, longitude + 0.018);
+    const localVertical = sampleContinuousOctopusSurfacePoint(surfaceOptions, latitude + 0.018, longitude);
+    const sceneCenterPoint = transformScenePoint(localCenter, center, rotationX, rotationY);
+    if (sceneCenterPoint.z <= center.z - size * 0.012) {
+        return;
+    }
+    const projectedCenterPoint = projectScenePoint(sceneCenterPoint, size, sceneCenterX, sceneCenterY);
+    const projectedHorizontalPoint = projectScenePoint(transformScenePoint(localHorizontal, center, rotationX, rotationY), size, sceneCenterX, sceneCenterY);
+    const projectedVerticalPoint = projectScenePoint(transformScenePoint(localVertical, center, rotationX, rotationY), size, sceneCenterX, sceneCenterY);
+    const horizontalRadius = clampNumber$1(Math.hypot(projectedHorizontalPoint.x - projectedCenterPoint.x, projectedHorizontalPoint.y - projectedCenterPoint.y) *
+        radiusScale *
+        0.74, size * 0.003, size * 0.018);
+    const verticalRadius = clampNumber$1(Math.hypot(projectedVerticalPoint.x - projectedCenterPoint.x, projectedVerticalPoint.y - projectedCenterPoint.y) *
+        radiusScale *
+        0.52, size * 0.0024, size * 0.014);
+    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, horizontalRadius, verticalRadius, 0, 0, Math.PI * 2);
+    context.fillStyle = `${palette.highlight}73`;
+    context.fill();
+    context.strokeStyle = `${palette.highlight}99`;
+    context.lineWidth = Math.max(0.7, size * 0.0028);
+    context.stroke();
+    context.restore();
+}
+/**
+ * Resolves a signed angular distance from the source longitude to the target longitude.
+ *
+ * @private helper of `octopus3d3AvatarVisual`
+ */
+function resolveSignedAngularDistance$1(sourceLongitude, targetLongitude) {
+    return Math.atan2(Math.sin(targetLongitude - sourceLongitude), Math.cos(targetLongitude - sourceLongitude));
+}
+/**
+ * Smoothly maps a value between two bounds into `[0, 1]`.
+ *
+ * @private helper of `octopus3d3AvatarVisual`
+ */
+function smoothStep$1(edgeStart, edgeEnd, value) {
+    const progress = clampNumber$1((value - edgeStart) / (edgeEnd - edgeStart), 0, 1);
+    return progress * progress * (3 - 2 * progress);
+}
+
+/* eslint-disable no-magic-numbers */
+/**
+ * Light direction used by the continuous Octopus 3D 4 mesh shading.
+ *
+ * @private helper of `octopus3d4AvatarVisual`
+ */
+const LIGHT_DIRECTION = normalizeVector3({
+    x: 0.32,
+    y: -0.66,
+    z: 1,
+});
+/**
+ * Rim-light direction used to brighten the side of the silhouette.
+ *
+ * @private helper of `octopus3d4AvatarVisual`
+ */
+const RIM_LIGHT_DIRECTION = normalizeVector3({
+    x: -0.7,
+    y: -0.18,
+    z: 0.55,
+});
+/**
+ * Real-octopus tentacle count used by the continuous lower mesh.
+ *
+ * @private helper of `octopus3d4AvatarVisual`
+ */
+const OCTOPUS_TENTACLE_COUNT = 8;
+/**
+ * Number of seeded skin spots painted across the octopus body.
+ *
+ * @private helper of `octopus3d4AvatarVisual`
+ */
+const SKIN_SPOT_COUNT = 14;
+/**
+ * Cache keyed by the `createRandom` factory reference, stable per mounted `<Avatar/>` component.
+ *
+ * @private helper of `octopus3d4AvatarVisual`
+ */
+const octopus3d4StableStateCache = new WeakMap();
+/**
+ * Returns the stable per-avatar state, computing it on first access and caching afterwards.
+ *
+ * @private helper of `octopus3d4AvatarVisual`
+ */
+function getOctopus3d4StableState(createRandom) {
+    const cached = octopus3d4StableStateCache.get(createRandom);
+    if (cached !== undefined) {
+        return cached;
+    }
+    const morphologyProfile = createOctopus3MorphologyProfile(createRandom);
+    const animationRandom = createRandom('octopus3d4-animation-profile');
+    const eyeRandom = createRandom('octopus3d4-eye-profile');
+    const leftEyePhaseOffset = eyeRandom() * 0.7;
+    const rightEyePhaseOffset = eyeRandom() * 0.7;
+    const state = {
+        morphologyProfile,
+        animationPhase: animationRandom() * Math.PI * 2,
+        leftEyePhaseOffset,
+        rightEyePhaseOffset,
+        tentacleProfiles: createBlobbyContinuousTentacleProfiles(createRandom, morphologyProfile),
+        skinSpots: createBlobbySkinSpots(createRandom),
+    };
+    octopus3d4StableStateCache.set(createRandom, state);
+    return state;
+}
+/**
+ * Octopus 3D 4 avatar visual.
+ *
+ * @private built-in avatar visual
+ */
+const octopus3d4AvatarVisual = {
+    id: 'octopus3d4',
+    title: 'Octopus 3D 4',
+    description: 'Cute blobby 3D octopus rendered as one smooth continuous mesh with naturally undulating tentacles, rich multi-pass shading, pigment spots, and cursor-aware head and eyes.',
+    isAnimated: true,
+    supportsPointerTracking: true,
+    render({ context, size, palette, createRandom, timeMs, interaction }) {
+        const { morphologyProfile, animationPhase, leftEyePhaseOffset, rightEyePhaseOffset, tentacleProfiles, skinSpots } = getOctopus3d4StableState(createRandom);
+        const sceneCenterX = size * 0.5;
+        const sceneCenterY = size * 0.535;
+        const bob = Math.sin(timeMs / 980 + animationPhase) * size * 0.013;
+        const meshCenter = {
+            x: interaction.bodyOffsetX * size * 0.052 + size * morphologyProfile.body.centerXJitterRatio * 0.44,
+            y: -size * 0.07 + interaction.bodyOffsetY * size * 0.028 + bob,
+            z: interaction.intensity * size * 0.02,
+        };
+        const rotationY = -0.08 +
+            Math.sin(timeMs / 2800 + animationPhase) * 0.04 +
+            interaction.bodyOffsetX * 0.24 +
+            interaction.gazeX * 0.98;
+        const rotationX = -0.07 +
+            Math.cos(timeMs / 3200 + animationPhase * 0.7) * 0.02 -
+            interaction.bodyOffsetY * 0.08 -
+            interaction.gazeY * 0.42;
+        const surfaceOptions = {
+            radiusX: size * morphologyProfile.body.bodyRadiusRatio * morphologyProfile.body.horizontalStretch * 1.12,
+            radiusY: size * morphologyProfile.body.bodyRadiusRatio * morphologyProfile.body.verticalStretch * 1.1,
+            radiusZ: size *
+                morphologyProfile.body.bodyRadiusRatio *
+                (1.04 + (morphologyProfile.body.horizontalStretch - 1) * 0.2),
+            morphologyProfile,
+            timeMs,
+            animationPhase,
+            tentacleProfiles,
+        };
+        const surfacePatches = resolveVisibleBlobbyContinuousPatches({
+            ...surfaceOptions,
+            center: meshCenter,
+            rotationX,
+            rotationY,
+            sceneCenterX,
+            sceneCenterY,
+            size,
+            palette,
+        });
+        const eyeLatitude = clampNumber$1(morphologyProfile.face.eyeCenterYOffsetRatio * 4.4 - 0.04, -0.24, 0.08);
+        const eyeLongitude = clampNumber$1(morphologyProfile.face.eyeSpacingRatio * 3.0, 0.18, 0.32);
+        const mouthLatitude = clampNumber$1(eyeLatitude + 0.21 + morphologyProfile.face.mouthYOffsetRatio, 0.08, 0.34);
+        const mouthCenterLongitude = clampNumber$1(morphologyProfile.face.mouthCenterOffsetRatio * 5.6, -0.08, 0.08);
+        const mouthHalfLongitude = clampNumber$1(eyeLongitude * 0.78, 0.15, 0.28);
+        const mouthCurveLatitude = clampNumber$1(mouthLatitude + morphologyProfile.face.mouthCurveDepthRatio * 0.78, mouthLatitude + 0.03, 0.42);
+        const eyeRadiusX = size * morphologyProfile.face.eyeRadiusXRatio * 0.78;
+        const eyeRadiusY = eyeRadiusX * morphologyProfile.face.eyeHeightRatio * 0.92;
+        drawAvatarFrame(context, size, palette);
+        drawBlobbyContinuousAtmosphere(context, size, palette, sceneCenterX, sceneCenterY, interaction, timeMs);
+        drawBlobbyContinuousShadow(context, size, palette, interaction, timeMs, morphologyProfile);
+        for (const surfacePatch of surfacePatches.sort((firstSurfacePatch, secondSurfacePatch) => firstSurfacePatch.averageDepth - secondSurfacePatch.averageDepth)) {
+            drawBlobbyContinuousSurfacePatch(context, surfacePatch);
+        }
+        drawBlobbySkinSpots({
+            context,
+            surfaceOptions,
+            center: meshCenter,
+            rotationX,
+            rotationY,
+            sceneCenterX,
+            sceneCenterY,
+            size,
+            palette,
+            skinSpots,
+        });
+        drawBlobbyContinuousCurrents({
+            context,
+            surfaceOptions,
+            center: meshCenter,
+            rotationX,
+            rotationY,
+            sceneCenterX,
+            sceneCenterY,
+            size,
+            palette,
+            morphologyProfile,
+            timeMs,
+            animationPhase,
+        });
+        drawBlobbyContinuousSuckers({
+            context,
+            surfaceOptions,
+            center: meshCenter,
+            rotationX,
+            rotationY,
+            sceneCenterX,
+            sceneCenterY,
+            size,
+            palette,
+        });
+        drawBlobbyContinuousGloss({
+            context,
+            surfaceOptions,
+            center: meshCenter,
+            rotationX,
+            rotationY,
+            sceneCenterX,
+            sceneCenterY,
+            size,
+            palette,
+        });
+        drawProjectedOrganicEye(context, sampleBlobbyContinuousSurfacePoint(surfaceOptions, eyeLatitude, -eyeLongitude), eyeRadiusX, eyeRadiusY, meshCenter, rotationX, rotationY, sceneCenterX, sceneCenterY, size, palette, timeMs, animationPhase + leftEyePhaseOffset, interaction, morphologyProfile.face.eyeStyle);
+        drawProjectedOrganicEye(context, sampleBlobbyContinuousSurfacePoint(surfaceOptions, eyeLatitude, eyeLongitude), eyeRadiusX, eyeRadiusY, meshCenter, rotationX, rotationY, sceneCenterX, sceneCenterY, size, palette, timeMs, animationPhase + 0.85 + rightEyePhaseOffset, interaction, morphologyProfile.face.eyeStyle);
+        drawProjectedOrganicMouth(context, [
+            sampleBlobbyContinuousSurfacePoint(surfaceOptions, mouthLatitude, mouthCenterLongitude - mouthHalfLongitude),
+            sampleBlobbyContinuousSurfacePoint(surfaceOptions, mouthCurveLatitude, mouthCenterLongitude),
+            sampleBlobbyContinuousSurfacePoint(surfaceOptions, mouthLatitude, mouthCenterLongitude + mouthHalfLongitude),
+        ], meshCenter, rotationX, rotationY, sceneCenterX, sceneCenterY, palette, size);
+    },
+};
+/**
+ * Creates seeded tentacle-lobe profiles around the visible lower octopus body.
+ *
+ * @private helper of `octopus3d4AvatarVisual`
+ */
+function createBlobbyContinuousTentacleProfiles(createRandom, morphologyProfile) {
+    return Array.from({ length: OCTOPUS_TENTACLE_COUNT }, (_, tentacleIndex) => {
+        const tentacleRandom = createRandom(`octopus3d4-tentacle-${tentacleIndex}`);
+        const progress = tentacleIndex / (OCTOPUS_TENTACLE_COUNT - 1);
+        return {
+            centerLongitude: -Math.PI * 0.9 +
+                progress * Math.PI * 1.8 +
+                (tentacleRandom() - 0.5) * (0.06 + morphologyProfile.tentacles.rootSpreadScale * 0.025),
+            widthScale: 0.92 + tentacleRandom() * 0.3 + (morphologyProfile.tentacles.baseWidthScale - 1) * 0.18,
+            lengthScale: 0.9 + tentacleRandom() * 0.34 + (morphologyProfile.tentacles.flowLengthScale - 1) * 0.24,
+            swayScale: 0.86 + tentacleRandom() * 0.4 + (morphologyProfile.tentacles.swayScale - 1) * 0.22,
+            depthScale: 0.9 + tentacleRandom() * 0.3 + (morphologyProfile.tentacles.tipReachScale - 1) * 0.22,
+            curlScale: 0.62 + tentacleRandom() * 0.46,
+            primaryPhase: tentacleRandom() * Math.PI * 2,
+            secondaryPhase: tentacleRandom() * Math.PI * 2,
+            suckerSide: tentacleRandom() > 0.5 ? 1 : -1,
+        };
+    });
+}
+/**
+ * Creates seeded skin pigment spots distributed across the upper octopus mesh.
+ *
+ * @private helper of `octopus3d4AvatarVisual`
+ */
+function createBlobbySkinSpots(createRandom) {
+    const spotRandom = createRandom('octopus3d4-skin-spots');
+    return Array.from({ length: SKIN_SPOT_COUNT }, () => ({
+        latitude: -0.45 + spotRandom() * 0.7,
+        longitude: -0.5 + spotRandom() * 1.0,
+        radiusScale: 0.0028 + spotRandom() * 0.0052,
+        opacity: 0.16 + spotRandom() * 0.22,
+    }));
+}
+/**
+ * Draws the soft underwater atmosphere behind the continuous octopus mesh.
+ *
+ * @private helper of `octopus3d4AvatarVisual`
+ */
+function drawBlobbyContinuousAtmosphere(context, size, palette, sceneCenterX, sceneCenterY, interaction, timeMs) {
+    const glowGradient = context.createRadialGradient(sceneCenterX + interaction.gazeX * size * 0.12, sceneCenterY - size * 0.18 + interaction.gazeY * size * 0.05, size * 0.04, sceneCenterX, sceneCenterY, size * (0.68 + interaction.intensity * 0.025));
+    glowGradient.addColorStop(0, `${palette.highlight}74`);
+    glowGradient.addColorStop(0.32, `${palette.accent}32`);
+    glowGradient.addColorStop(1, `${palette.highlight}00`);
+    context.fillStyle = glowGradient;
+    context.fillRect(0, 0, size, size);
+    const lowerGradient = context.createRadialGradient(sceneCenterX + Math.sin(timeMs / 1500) * size * 0.05, sceneCenterY + size * 0.3, size * 0.06, sceneCenterX, sceneCenterY + size * 0.3, size * 0.56);
+    lowerGradient.addColorStop(0, `${palette.secondary}28`);
+    lowerGradient.addColorStop(1, `${palette.secondary}00`);
+    context.fillStyle = lowerGradient;
+    context.fillRect(0, 0, size, size);
+}
+/**
+ * Draws the soft lower shadow that anchors the octopus in the avatar frame.
+ *
+ * @private helper of `octopus3d4AvatarVisual`
+ */
+function drawBlobbyContinuousShadow(context, size, palette, interaction, timeMs, morphologyProfile) {
+    const cx = size * 0.5 + interaction.gazeX * size * 0.046;
+    const cy = size * 0.9 + Math.sin(timeMs / 980) * size * 0.007;
+    const rx = size * (0.2 + morphologyProfile.tentacles.rootSpreadScale * 0.024 + interaction.intensity * 0.022);
+    const ry = size * 0.062;
+    context.save();
+    context.translate(cx, cy);
+    context.scale(1, ry / rx);
+    const blurRadius = rx * 1.42;
+    const shadowGradient = context.createRadialGradient(0, 0, 0, 0, 0, blurRadius);
+    shadowGradient.addColorStop(0, `${palette.shadow}82`);
+    shadowGradient.addColorStop(0.45, `${palette.shadow}4a`);
+    shadowGradient.addColorStop(0.8, `${palette.shadow}1c`);
+    shadowGradient.addColorStop(1, `${palette.shadow}00`);
+    context.fillStyle = shadowGradient;
+    context.beginPath();
+    context.arc(0, 0, blurRadius, 0, Math.PI * 2);
+    context.fill();
+    context.restore();
+}
+/**
+ * Number of latitude segments used by the continuous Octopus 3D 4 mesh.
+ *
+ * @private helper of `octopus3d4AvatarVisual`
+ */
+const LATITUDE_PATCH_COUNT = 20;
+/**
+ * Number of longitude segments used by the continuous Octopus 3D 4 mesh.
+ *
+ * @private helper of `octopus3d4AvatarVisual`
+ */
+const LONGITUDE_PATCH_COUNT = 48;
+/**
+ * Resolves visible projected patches for the continuous Octopus 3D 4 mesh.
+ *
+ * Within a single frame, mesh corner samples and longitude-only computations (tentacle
+ * influence and lobe wave) are quantized to the patch grid and computed once each rather
+ * than re-evaluated for every patch corner.
+ *
+ * @private helper of `octopus3d4AvatarVisual`
+ */
+function resolveVisibleBlobbyContinuousPatches(options) {
+    const { center, rotationX, rotationY, sceneCenterX, sceneCenterY, size, palette } = options;
+    const latitudePatchCount = LATITUDE_PATCH_COUNT;
+    const longitudePatchCount = LONGITUDE_PATCH_COUNT;
+    const surfacePatches = [];
+    const latitudeBoundaries = new Float64Array(latitudePatchCount + 1);
+    const longitudeBoundaries = new Float64Array(longitudePatchCount + 1);
+    for (let boundaryIndex = 0; boundaryIndex <= latitudePatchCount; boundaryIndex++) {
+        latitudeBoundaries[boundaryIndex] = -Math.PI / 2 + (boundaryIndex / latitudePatchCount) * Math.PI;
+    }
+    for (let boundaryIndex = 0; boundaryIndex <= longitudePatchCount; boundaryIndex++) {
+        longitudeBoundaries[boundaryIndex] = -Math.PI + (boundaryIndex / longitudePatchCount) * Math.PI * 2;
+    }
+    const cachedTentacleInfluencesByCornerLongitude = new Array(longitudePatchCount + 1);
+    const cachedLobeWavesByCornerLongitude = new Float64Array(longitudePatchCount + 1);
+    const cachedTentacleInfluencesByPatchCenterLongitude = new Array(longitudePatchCount);
+    const cachedLobeWavesByPatchCenterLongitude = new Float64Array(longitudePatchCount);
+    const cachedCosByPatchCenterLongitude = new Float64Array(longitudePatchCount);
+    for (let boundaryIndex = 0; boundaryIndex <= longitudePatchCount; boundaryIndex++) {
+        const cornerLongitude = longitudeBoundaries[boundaryIndex];
+        cachedTentacleInfluencesByCornerLongitude[boundaryIndex] = resolveBlobbyTentacleInfluence(options, cornerLongitude);
+        cachedLobeWavesByCornerLongitude[boundaryIndex] = resolveBlobbyLobeWave(options, cornerLongitude);
+    }
+    for (let longitudeIndex = 0; longitudeIndex < longitudePatchCount; longitudeIndex++) {
+        const patchCenterLongitude = (longitudeBoundaries[longitudeIndex] + longitudeBoundaries[longitudeIndex + 1]) / 2;
+        cachedTentacleInfluencesByPatchCenterLongitude[longitudeIndex] = resolveBlobbyTentacleInfluence(options, patchCenterLongitude);
+        cachedLobeWavesByPatchCenterLongitude[longitudeIndex] = resolveBlobbyLobeWave(options, patchCenterLongitude);
+        cachedCosByPatchCenterLongitude[longitudeIndex] = Math.max(0, Math.cos(patchCenterLongitude));
+    }
+    const cornerCount = (latitudePatchCount + 1) * (longitudePatchCount + 1);
+    const transformedCornerSamples = new Array(cornerCount);
+    for (let latitudeBoundaryIndex = 0; latitudeBoundaryIndex <= latitudePatchCount; latitudeBoundaryIndex++) {
+        const cornerLatitude = latitudeBoundaries[latitudeBoundaryIndex];
+        for (let longitudeBoundaryIndex = 0; longitudeBoundaryIndex <= longitudePatchCount; longitudeBoundaryIndex++) {
+            const cornerLongitude = longitudeBoundaries[longitudeBoundaryIndex];
+            const cornerIndex = latitudeBoundaryIndex * (longitudePatchCount + 1) + longitudeBoundaryIndex;
+            const cornerSample = sampleBlobbyContinuousSurfacePointWithLongitudeCache(options, cornerLatitude, cornerLongitude, cachedTentacleInfluencesByCornerLongitude[longitudeBoundaryIndex], cachedLobeWavesByCornerLongitude[longitudeBoundaryIndex]);
+            transformedCornerSamples[cornerIndex] = transformScenePoint(cornerSample, center, rotationX, rotationY);
+        }
+    }
+    for (let latitudeIndex = 0; latitudeIndex < latitudePatchCount; latitudeIndex++) {
+        const startLatitude = latitudeBoundaries[latitudeIndex];
+        const endLatitude = latitudeBoundaries[latitudeIndex + 1];
+        const centerLatitude = (startLatitude + endLatitude) / 2;
+        const verticalProgress = (Math.sin(centerLatitude) + 1) / 2;
+        const startCornerRowOffset = latitudeIndex * (longitudePatchCount + 1);
+        const endCornerRowOffset = (latitudeIndex + 1) * (longitudePatchCount + 1);
+        for (let longitudeIndex = 0; longitudeIndex < longitudePatchCount; longitudeIndex++) {
+            const transformedCorners = [
+                transformedCornerSamples[startCornerRowOffset + longitudeIndex],
+                transformedCornerSamples[startCornerRowOffset + longitudeIndex + 1],
+                transformedCornerSamples[endCornerRowOffset + longitudeIndex + 1],
+                transformedCornerSamples[endCornerRowOffset + longitudeIndex],
+            ];
+            const surfaceNormal = normalizeVector3(crossProduct3D(subtractPoint3D(transformedCorners[1], transformedCorners[0]), subtractPoint3D(transformedCorners[2], transformedCorners[0])));
+            if (surfaceNormal.z <= 0.006) {
+                continue;
+            }
+            const projectedCorners = [
+                projectScenePoint(transformedCorners[0], size, sceneCenterX, sceneCenterY),
+                projectScenePoint(transformedCorners[1], size, sceneCenterX, sceneCenterY),
+                projectScenePoint(transformedCorners[2], size, sceneCenterX, sceneCenterY),
+                projectScenePoint(transformedCorners[3], size, sceneCenterX, sceneCenterY),
+            ];
+            const lightIntensity = clampNumber$1(dotProduct3D(surfaceNormal, LIGHT_DIRECTION), -1, 1);
+            const rimLightIntensity = Math.pow(clampNumber$1(dotProduct3D(surfaceNormal, RIM_LIGHT_DIRECTION), 0, 1), 2.6);
+            surfacePatches.push({
+                corners: projectedCorners,
+                averageDepth: (transformedCorners[0].z +
+                    transformedCorners[1].z +
+                    transformedCorners[2].z +
+                    transformedCorners[3].z) /
+                    4,
+                lightIntensity,
+                rimLightIntensity,
+                fillStyle: resolveBlobbySurfacePatchFillStyle(palette, verticalProgress, cachedCosByPatchCenterLongitude[longitudeIndex], cachedTentacleInfluencesByPatchCenterLongitude[longitudeIndex].core, cachedLobeWavesByPatchCenterLongitude[longitudeIndex]),
+                outlineColor: verticalProgress < 0.52 ? `${palette.highlight}5c` : `${palette.shadow}66`,
+            });
+        }
+    }
+    return surfacePatches;
+}
+/**
+ * Samples one point on the continuous Octopus 3D 4 surface.
+ *
+ * @private helper of `octopus3d4AvatarVisual`
+ */
+function sampleBlobbyContinuousSurfacePoint(options, latitude, longitude) {
+    return sampleBlobbyContinuousSurfacePointWithLongitudeCache(options, latitude, longitude, resolveBlobbyTentacleInfluence(options, longitude), resolveBlobbyLobeWave(options, longitude));
+}
+/**
+ * Samples one point on the continuous Octopus 3D 4 surface using precomputed longitude-only values.
+ *
+ * The patch loop quantizes the mesh into a fixed corner grid, so the same longitude is reused
+ * across every latitude row and each tentacle/lobe value is computed once per frame instead
+ * of `latitudePatchCount * 4` times.
+ *
+ * @private helper of `octopus3d4AvatarVisual`
+ */
+function sampleBlobbyContinuousSurfacePointWithLongitudeCache(options, latitude, longitude, tentacleInfluence, lowerLobeWave) {
+    const { radiusX, radiusY, radiusZ, morphologyProfile, timeMs, animationPhase } = options;
+    const cosineLatitude = Math.max(0, Math.cos(latitude));
+    const verticalProgress = (Math.sin(latitude) + 1) / 2;
+    const upperBlend = Math.pow(1 - verticalProgress, 1.32);
+    const lowerBlend = smoothStep(0.34, 1, verticalProgress);
+    const tipBlend = smoothStep(0.66, 1, verticalProgress);
+    const centerPull = resolveSignedAngularDistance(longitude, tentacleInfluence.centerLongitude);
+    const effectiveLongitude = longitude + centerPull * lowerBlend * tentacleInfluence.core * (0.26 + tipBlend * 0.22);
+    const mantleRipple = Math.sin(longitude * morphologyProfile.body.lobeCount +
+        animationPhase * 0.6 +
+        timeMs / (1700 + morphologyProfile.body.lobeCount * 28)) *
+        (0.018 + morphologyProfile.body.wobbleAmplitudeRatio * 0.78) *
+        (0.32 + lowerBlend * 0.7);
+    const primaryTentacleWave = Math.sin(timeMs / 740 + tentacleInfluence.primaryPhase + verticalProgress * 2.6) *
+        lowerBlend *
+        tentacleInfluence.core *
+        tentacleInfluence.swayScale;
+    const secondaryTentacleWave = Math.sin(timeMs / 470 + tentacleInfluence.secondaryPhase + verticalProgress * 4.2) *
+        lowerBlend *
+        tentacleInfluence.core *
+        tentacleInfluence.swayScale *
+        0.42;
+    const tentacleCurl = Math.sin(timeMs / 1180 + tentacleInfluence.primaryPhase * 0.6 + verticalProgress * 3.2) *
+        tipBlend *
+        tentacleInfluence.core *
+        tentacleInfluence.curlScale *
+        0.36;
+    const horizontalScale = 1.06 +
+        mantleRipple +
+        lowerBlend * (0.18 + (morphologyProfile.tentacles.rootSpreadScale - 1) * 0.12) +
+        lowerBlend * tentacleInfluence.core * (0.22 + lowerLobeWave * 0.14) -
+        upperBlend * 0.08;
+    const depthScale = 1.08 +
+        upperBlend * 0.16 +
+        Math.max(0, Math.cos(effectiveLongitude)) * 0.12 +
+        lowerBlend * tentacleInfluence.core * (0.12 + tentacleInfluence.depthScale * 0.07) -
+        Math.max(0, -Math.cos(effectiveLongitude)) * 0.05;
+    const tentacleTubeRadius = lowerBlend *
+        tentacleInfluence.core *
+        (0.12 + tipBlend * 0.07 + tentacleInfluence.widthScale * 0.028) *
+        radiusX;
+    const planarRadiusX = cosineLatitude * radiusX * horizontalScale + tentacleTubeRadius;
+    const planarRadiusZ = cosineLatitude * radiusZ * depthScale + tentacleTubeRadius * 0.74;
+    const lowerDrop = lowerBlend *
+        radiusY *
+        (0.2 +
+            tentacleInfluence.core *
+                (0.42 +
+                    tentacleInfluence.lengthScale * 0.24 +
+                    (morphologyProfile.tentacles.flowLengthScale - 1) * 0.1));
+    const combinedTentacleSway = (primaryTentacleWave + secondaryTentacleWave) * radiusX * (0.06 + tipBlend * 0.06);
+    return {
+        x: Math.sin(effectiveLongitude) * planarRadiusX +
+            combinedTentacleSway +
+            tentacleCurl * radiusX * 0.18,
+        y: Math.sin(latitude) * radiusY * (1 + upperBlend * 0.14) -
+            upperBlend * radiusY * 0.12 +
+            lowerDrop +
+            Math.sin(timeMs / 1380 + animationPhase + latitude * 1.5) * lowerBlend * radiusY * 0.022 +
+            Math.cos(timeMs / 820 + tentacleInfluence.primaryPhase) *
+                lowerBlend *
+                tipBlend *
+                tentacleInfluence.core *
+                radiusY *
+                0.04,
+        z: Math.cos(effectiveLongitude) * planarRadiusZ +
+            Math.cos(timeMs / 960 + tentacleInfluence.primaryPhase + verticalProgress) *
+                lowerBlend *
+                tentacleInfluence.core *
+                radiusZ *
+                0.044 +
+            tentacleCurl * radiusZ * 0.14,
+    };
+}
+/**
+ * Blends nearby seeded tentacle profiles at one mesh longitude.
+ *
+ * @private helper of `octopus3d4AvatarVisual`
+ */
+function resolveBlobbyTentacleInfluence(options, longitude) {
+    let totalWeight = 0;
+    let weightedSin = 0;
+    let weightedCos = 0;
+    let weightedWidthScale = 0;
+    let weightedLengthScale = 0;
+    let weightedSwayScale = 0;
+    let weightedDepthScale = 0;
+    let weightedCurlScale = 0;
+    let weightedPrimaryPhase = 0;
+    let weightedSecondaryPhase = 0;
+    for (const tentacleProfile of options.tentacleProfiles) {
+        const distance = Math.abs(resolveSignedAngularDistance(longitude, tentacleProfile.centerLongitude));
+        const width = 0.22 * tentacleProfile.widthScale;
+        const weight = Math.exp(-(distance * distance) / (width * width));
+        totalWeight += weight;
+        weightedSin += Math.sin(tentacleProfile.centerLongitude) * weight;
+        weightedCos += Math.cos(tentacleProfile.centerLongitude) * weight;
+        weightedWidthScale += tentacleProfile.widthScale * weight;
+        weightedLengthScale += tentacleProfile.lengthScale * weight;
+        weightedSwayScale += tentacleProfile.swayScale * weight;
+        weightedDepthScale += tentacleProfile.depthScale * weight;
+        weightedCurlScale += tentacleProfile.curlScale * weight;
+        weightedPrimaryPhase += tentacleProfile.primaryPhase * weight;
+        weightedSecondaryPhase += tentacleProfile.secondaryPhase * weight;
+    }
+    if (totalWeight < 0.0001) {
+        return {
+            core: 0,
+            centerLongitude: longitude,
+            widthScale: 1,
+            lengthScale: 1,
+            swayScale: 1,
+            depthScale: 1,
+            curlScale: 1,
+            primaryPhase: 0,
+            secondaryPhase: 0,
+        };
+    }
+    return {
+        core: clampNumber$1(totalWeight, 0, 1),
+        centerLongitude: Math.atan2(weightedSin / totalWeight, weightedCos / totalWeight),
+        widthScale: weightedWidthScale / totalWeight,
+        lengthScale: weightedLengthScale / totalWeight,
+        swayScale: weightedSwayScale / totalWeight,
+        depthScale: weightedDepthScale / totalWeight,
+        curlScale: weightedCurlScale / totalWeight,
+        primaryPhase: weightedPrimaryPhase / totalWeight,
+        secondaryPhase: weightedSecondaryPhase / totalWeight,
+    };
+}
+/**
+ * Resolves the soft lower wave that makes the continuous mesh read as a set of tentacles.
+ *
+ * @private helper of `octopus3d4AvatarVisual`
+ */
+function resolveBlobbyLobeWave(options, longitude) {
+    const { morphologyProfile, animationPhase, timeMs } = options;
+    return ((Math.cos(longitude * OCTOPUS_TENTACLE_COUNT +
+        animationPhase +
+        timeMs / (940 + morphologyProfile.body.lobeCount * 18)) +
+        1) /
+        2);
+}
+/**
+ * Resolves one base fill tone for a patch on the continuous octopus mesh.
+ *
+ * @private helper of `octopus3d4AvatarVisual`
+ */
+function resolveBlobbySurfacePatchFillStyle(palette, verticalProgress, forwardness, tentacleCore, lowerLobeWave) {
+    const tonalProgress = clampNumber$1(verticalProgress + lowerLobeWave * 0.1 + tentacleCore * 0.08 - forwardness * 0.08, 0, 1);
+    if (tonalProgress < 0.12) {
+        return palette.highlight;
+    }
+    if (tonalProgress < 0.3) {
+        return palette.secondary;
+    }
+    if (tonalProgress < 0.72) {
+        return forwardness > 0.56 ? palette.secondary : palette.primary;
+    }
+    return tentacleCore > 0.44 ? `${palette.primary}f4` : `${palette.shadow}ee`;
+}
+/**
+ * Draws one projected mesh patch with multi-pass shading and a soft edge.
+ *
+ * @private helper of `octopus3d4AvatarVisual`
+ */
+function drawBlobbyContinuousSurfacePatch(context, surfacePatch) {
+    drawProjectedQuad(context, surfacePatch.corners, surfacePatch.fillStyle);
+    if (surfacePatch.lightIntensity > 0) {
+        drawProjectedQuad(context, surfacePatch.corners, `rgba(255, 255, 255, ${0.2 * surfacePatch.lightIntensity})`);
+    }
+    else if (surfacePatch.lightIntensity < 0) {
+        drawProjectedQuad(context, surfacePatch.corners, `rgba(0, 0, 0, ${0.26 * Math.abs(surfacePatch.lightIntensity)})`);
+    }
+    if (surfacePatch.rimLightIntensity > 0.04) {
+        drawProjectedQuad(context, surfacePatch.corners, `rgba(255, 247, 230, ${0.22 * surfacePatch.rimLightIntensity})`);
+    }
+    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(0.6, getProjectedQuadPerimeter(surfacePatch.corners) * 0.0026);
+    context.lineJoin = 'round';
+    context.stroke();
+    context.restore();
+}
+/**
+ * Draws projected mantle-current lines on the front of the mesh.
+ *
+ * @private helper of `octopus3d4AvatarVisual`
+ */
+function drawBlobbyContinuousCurrents(options) {
+    const { context, surfaceOptions, center, rotationX, rotationY, sceneCenterX, sceneCenterY, size, palette, morphologyProfile, timeMs, animationPhase, } = options;
+    const currentCount = Math.min(6, morphologyProfile.details.mantleCurrentCount);
+    const centerIndex = (currentCount - 1) / 2;
+    context.save();
+    context.lineCap = 'round';
+    context.lineJoin = 'round';
+    for (let currentIndex = 0; currentIndex < currentCount; currentIndex++) {
+        const baseLongitude = (currentIndex - centerIndex) * 0.15;
+        const projectedPoints = [];
+        for (let sampleIndex = 0; sampleIndex < 9; sampleIndex++) {
+            const progress = sampleIndex / 8;
+            const latitude = -0.48 + progress * 0.78;
+            const longitude = baseLongitude + Math.sin(timeMs / 1140 + animationPhase + currentIndex * 0.7 + progress * 2) * 0.038;
+            const scenePoint = transformScenePoint(sampleBlobbyContinuousSurfacePoint(surfaceOptions, latitude, longitude), center, rotationX, rotationY);
+            if (scenePoint.z > center.z - size * 0.016) {
+                projectedPoints.push(projectScenePoint(scenePoint, size, sceneCenterX, sceneCenterY));
+            }
+        }
+        if (projectedPoints.length < 3) {
+            continue;
+        }
+        context.beginPath();
+        context.moveTo(projectedPoints[0].x, projectedPoints[0].y);
+        for (const projectedPoint of projectedPoints.slice(1)) {
+            context.lineTo(projectedPoint.x, projectedPoint.y);
+        }
+        context.strokeStyle = currentIndex % 2 === 0 ? `${palette.highlight}3d` : `${palette.accent}33`;
+        context.lineWidth = size * (0.0055 + currentIndex * 0.00045);
+        context.stroke();
+    }
+    context.restore();
+}
+/**
+ * Draws small projected sucker highlights on the waving lower mesh lobes.
+ *
+ * @private helper of `octopus3d4AvatarVisual`
+ */
+function drawBlobbyContinuousSuckers(options) {
+    const { surfaceOptions, size } = options;
+    const { timeMs } = surfaceOptions;
+    for (const tentacleProfile of surfaceOptions.tentacleProfiles) {
+        if (Math.cos(tentacleProfile.centerLongitude) < -0.16) {
+            continue;
+        }
+        for (let suckerIndex = 0; suckerIndex < 4; suckerIndex++) {
+            const latitude = 0.5 + suckerIndex * 0.12;
+            const sideOffset = tentacleProfile.suckerSide * (0.038 + suckerIndex * 0.014) * tentacleProfile.widthScale;
+            const waveOffset = Math.sin(timeMs / 880 + tentacleProfile.primaryPhase + suckerIndex * 0.78) * 0.02;
+            drawBlobbyContinuousSurfaceSpot({
+                ...options,
+                latitude,
+                longitude: tentacleProfile.centerLongitude + sideOffset + waveOffset,
+                radiusScale: size * (0.0068 - suckerIndex * 0.0006),
+            });
+        }
+    }
+}
+/**
+ * Draws seeded pigment spots across the upper mesh for a richer skin texture.
+ *
+ * @private helper of `octopus3d4AvatarVisual`
+ */
+function drawBlobbySkinSpots(options) {
+    const { context, surfaceOptions, center, rotationX, rotationY, sceneCenterX, sceneCenterY, size, palette, skinSpots, } = options;
+    for (const skinSpot of skinSpots) {
+        const localCenter = sampleBlobbyContinuousSurfacePoint(surfaceOptions, skinSpot.latitude, skinSpot.longitude);
+        const sceneCenterPoint = transformScenePoint(localCenter, center, rotationX, rotationY);
+        if (sceneCenterPoint.z <= center.z - size * 0.01) {
+            continue;
+        }
+        const projectedCenterPoint = projectScenePoint(sceneCenterPoint, size, sceneCenterX, sceneCenterY);
+        const spotRadius = size * skinSpot.radiusScale;
+        context.save();
+        context.beginPath();
+        context.arc(projectedCenterPoint.x, projectedCenterPoint.y, spotRadius, 0, Math.PI * 2);
+        context.fillStyle = `${palette.shadow}${formatAlphaHex(skinSpot.opacity)}`;
+        context.fill();
+        context.restore();
+    }
+}
+/**
+ * Draws one tiny projected surface spot by sampling local mesh tangents.
+ *
+ * @private helper of `octopus3d4AvatarVisual`
+ */
+function drawBlobbyContinuousSurfaceSpot(options) {
+    const { context, surfaceOptions, center, rotationX, rotationY, sceneCenterX, sceneCenterY, size, palette, latitude, longitude, radiusScale, } = options;
+    const localCenter = sampleBlobbyContinuousSurfacePoint(surfaceOptions, latitude, longitude);
+    const localHorizontal = sampleBlobbyContinuousSurfacePoint(surfaceOptions, latitude, longitude + 0.018);
+    const localVertical = sampleBlobbyContinuousSurfacePoint(surfaceOptions, latitude + 0.018, longitude);
+    const sceneCenterPoint = transformScenePoint(localCenter, center, rotationX, rotationY);
+    if (sceneCenterPoint.z <= center.z - size * 0.012) {
+        return;
+    }
+    const projectedCenterPoint = projectScenePoint(sceneCenterPoint, size, sceneCenterX, sceneCenterY);
+    const projectedHorizontalPoint = projectScenePoint(transformScenePoint(localHorizontal, center, rotationX, rotationY), size, sceneCenterX, sceneCenterY);
+    const projectedVerticalPoint = projectScenePoint(transformScenePoint(localVertical, center, rotationX, rotationY), size, sceneCenterX, sceneCenterY);
+    const horizontalRadius = clampNumber$1(Math.hypot(projectedHorizontalPoint.x - projectedCenterPoint.x, projectedHorizontalPoint.y - projectedCenterPoint.y) *
+        radiusScale *
+        0.78, size * 0.003, size * 0.02);
+    const verticalRadius = clampNumber$1(Math.hypot(projectedVerticalPoint.x - projectedCenterPoint.x, projectedVerticalPoint.y - projectedCenterPoint.y) *
+        radiusScale *
+        0.54, size * 0.0024, size * 0.015);
+    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, horizontalRadius, verticalRadius, 0, 0, Math.PI * 2);
+    context.fillStyle = `${palette.highlight}80`;
+    context.fill();
+    context.strokeStyle = `${palette.highlight}a8`;
+    context.lineWidth = Math.max(0.7, size * 0.0028);
+    context.stroke();
+    context.restore();
+}
+/**
+ * Draws a soft, slowly drifting gloss highlight on the front of the mesh.
+ *
+ * @private helper of `octopus3d4AvatarVisual`
+ */
+function drawBlobbyContinuousGloss(options) {
+    const { context, surfaceOptions, center, rotationX, rotationY, sceneCenterX, sceneCenterY, size } = options;
+    const { timeMs, animationPhase } = surfaceOptions;
+    const glossLatitude = -0.3 + Math.sin(timeMs / 2700 + animationPhase) * 0.04;
+    const glossLongitude = -0.18 + Math.cos(timeMs / 2300 + animationPhase * 0.8) * 0.05;
+    const localCenter = sampleBlobbyContinuousSurfacePoint(surfaceOptions, glossLatitude, glossLongitude);
+    const sceneCenterPoint = transformScenePoint(localCenter, center, rotationX, rotationY);
+    if (sceneCenterPoint.z <= center.z) {
+        return;
+    }
+    const projectedCenterPoint = projectScenePoint(sceneCenterPoint, size, sceneCenterX, sceneCenterY);
+    const glossRadius = size * 0.058;
+    context.save();
+    const glossGradient = context.createRadialGradient(projectedCenterPoint.x - glossRadius * 0.3, projectedCenterPoint.y - glossRadius * 0.4, glossRadius * 0.04, projectedCenterPoint.x, projectedCenterPoint.y, glossRadius);
+    glossGradient.addColorStop(0, 'rgba(255, 255, 255, 0.34)');
+    glossGradient.addColorStop(0.5, 'rgba(255, 255, 255, 0.1)');
+    glossGradient.addColorStop(1, 'rgba(255, 255, 255, 0)');
+    context.fillStyle = glossGradient;
+    context.beginPath();
+    context.ellipse(projectedCenterPoint.x, projectedCenterPoint.y, glossRadius * 1.05, glossRadius * 0.78, 0, 0, Math.PI * 2);
+    context.fill();
+    context.restore();
+}
+/**
+ * Resolves a signed angular distance from the source longitude to the target longitude.
+ *
+ * @private helper of `octopus3d4AvatarVisual`
+ */
+function resolveSignedAngularDistance(sourceLongitude, targetLongitude) {
+    return Math.atan2(Math.sin(targetLongitude - sourceLongitude), Math.cos(targetLongitude - sourceLongitude));
+}
+/**
+ * Smoothly maps a value between two bounds into `[0, 1]`.
+ *
+ * @private helper of `octopus3d4AvatarVisual`
+ */
+function smoothStep(edgeStart, edgeEnd, value) {
+    const progress = clampNumber$1((value - edgeStart) / (edgeEnd - edgeStart), 0, 1);
+    return progress * progress * (3 - 2 * progress);
+}
+/**
+ * Converts an opacity ratio into a two-digit hexadecimal alpha suffix.
+ *
+ * @private helper of `octopus3d4AvatarVisual`
+ */
+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.
@@ -9458,6 +11007,8 @@ const AVATAR_VISUALS = [
     octopus3AvatarVisual,
     octopus3dAvatarVisual,
     octopus3d2AvatarVisual,
+    octopus3d3AvatarVisual,
+    octopus3d4AvatarVisual,
     asciiOctopusAvatarVisual,
     minecraftAvatarVisual,
     minecraft2AvatarVisual,
@@ -11820,7 +13371,15 @@ function buildTeammateMetadata(entry) {
  * Builds the teammate request text, optionally including context.
  */
 function buildTeammateRequest(message, context) {
-    return context ? `${message}\n\nContext:\n${context}` : message;
+    if (!context) {
+        return message;
+    }
+    return spaceTrim$1((block) => `
+            ${block(message)}
+
+            Context:
+            ${block(context)}
+        `);
 }
 /**
  * Builds a minimal chat prompt for teammate calls.
@@ -15843,7 +17402,11 @@ function createUseProjectToolFunctions() {
                 const lineRangedContent = applyOptionalLineRange(decodedContent, args.startLine, args.endLine);
                 const wasCharacterTruncated = lineRangedContent.length > MAX_PROJECT_FILE_CONTENT_CHARACTERS;
                 const contentToReturn = wasCharacterTruncated
-                    ? `${lineRangedContent.slice(0, MAX_PROJECT_FILE_CONTENT_CHARACTERS)}\n\n[...truncated...]`
+                    ? spaceTrim$1((block) => `
+                              ${block(lineRangedContent.slice(0, MAX_PROJECT_FILE_CONTENT_CHARACTERS))}
+
+                              [...truncated...]
+                          `)
                     : lineRangedContent;
                 const wasTruncated = decoded.isTruncated || wasCharacterTruncated;
                 if (wasCharacterTruncated) {
@@ -16953,7 +18516,7 @@ function getTimeoutToolRuntimeAdapterOrDisabledResult(action, runtimeContext) {
  * @private internal helper function
  */
 function $randomToken(randomness) {
-    return randomBytes(randomness).toString('hex');
+    return CryptoJS.lib.WordArray.random(randomness).toString(CryptoJS.enc.Hex);
 }
 // TODO: [🤶] Maybe export through `@promptbook/utils` or `@promptbook/random` package
 // TODO: Maybe use nanoid instead https://github.com/ai/nanoid
@@ -24847,7 +26410,7 @@ function $registeredScrapersMessage(availableScrapers) {
  * @public exported from `@promptbook/editable`
  */
 function knowledgeSourceContentToName(knowledgeSourceContent) {
-    const hash = SHA256(hexEncoder.parse(JSON.stringify(knowledgeSourceContent)))
+    const hash = CryptoJS.SHA256(hexEncoder.parse(JSON.stringify(knowledgeSourceContent)))
         //    <- TODO: [🥬] Encapsulate sha256 to some private utility function
         .toString( /* hex */)
         .substring(0, 20);
@@ -25695,7 +27258,7 @@ function csvParse(value /* <- TODO: string_csv */, settings, schema /* <- TODO:
         console.warn('CSV string contains carriage return characters, but in the CSV settings the `newline` setting does not include them. Autohealing the CSV string.');
         value = value.replace(/\r\n/g, '\n').replace(/\r/g, '\n');
     }
-    const csv = parse(value, settings);
+    const csv = papaparse.parse(value, settings);
     return csv;
 }
 
@@ -25780,10 +27343,10 @@ const CsvFormatParser = {
                             i > index ? { ...row, [outputParameterName]: PENDING_VALUE_PLACEHOLDER } : row,
                         );
                         */
-                        await onProgress(unparse(mappedData, { ...settings, ...MANDATORY_CSV_SETTINGS }));
+                        await onProgress(papaparse.unparse(mappedData, { ...settings, ...MANDATORY_CSV_SETTINGS }));
                     }
                 }
-                return unparse(mappedData, { ...settings, ...MANDATORY_CSV_SETTINGS });
+                return papaparse.unparse(mappedData, { ...settings, ...MANDATORY_CSV_SETTINGS });
             },
         },
         {
@@ -25811,7 +27374,7 @@ const CsvFormatParser = {
                         return /* not await */ mapCallback({ [key]: value }, index, array.length);
                     }));
                 }));
-                return unparse(mappedData, { ...settings, ...MANDATORY_CSV_SETTINGS });
+                return papaparse.unparse(mappedData, { ...settings, ...MANDATORY_CSV_SETTINGS });
             },
         },
     ],
@@ -28092,11 +29655,19 @@ const JsonFileImportPlugin = {
         try {
             const json = JSON.parse(content);
             const formattedJson = JSON.stringify(json, null, 4);
-            return `\`\`\`json\n${formattedJson}\n\`\`\``;
+            return spaceTrim$1((block) => `
+                    \`\`\`json
+                    ${block(formattedJson)}
+                    \`\`\`
+                `);
         }
         catch (error) {
             // If JSON is invalid, still import it but maybe not as pretty JSON
-            return `\`\`\`json\n${content}\n\`\`\``;
+            return spaceTrim$1((block) => `
+                    \`\`\`json
+                    ${block(content)}
+                    \`\`\`
+                `);
         }
     },
 };
@@ -28120,7 +29691,11 @@ const TextFileImportPlugin = {
     import(content, mimeType) {
         const extension = mimeTypeToExtension(mimeType);
         const codeBlockType = extension || 'txt';
-        return `\`\`\`${codeBlockType}\n${content}\n\`\`\``;
+        return spaceTrim$1((block) => `
+                \`\`\`${codeBlockType}
+                ${block(content)}
+                \`\`\`
+            `);
     },
 };
 
@@ -28367,11 +29942,19 @@ function collectExampleInteractionLines(parseResult, samples) {
     const examples = [];
     const initialMessage = (_a = parseResult.commitments.find((commitment) => commitment.type === 'INITIAL MESSAGE')) === null || _a === void 0 ? void 0 : _a.content;
     if (initialMessage) {
-        examples.push(`**Agent:**\n${initialMessage}`);
+        examples.push(spaceTrim$1((block) => `
+                    **Agent:**
+                    ${block(initialMessage)}
+                `));
     }
     if (samples && samples.length > 0) {
         for (const sample of samples) {
-            examples.push(`**User:** ${sample.question}\n\n**Agent:**\n${sample.answer}`);
+            examples.push(spaceTrim$1((block) => `
+                        **User:** ${block(String(sample.question))}
+
+                        **Agent:**
+                        ${block(sample.answer)}
+                    `));
         }
     }
     return examples;
@@ -29706,7 +31289,9 @@ class OpenAiAgentKitExecutionToolsToolBuilder {
         if (!executionTools || !executionTools.script) {
             throw new PipelineExecutionError(`Model requested tools but no executionTools.script were provided in OpenAiAgentKitExecutionTools options`);
         }
-        return Array.isArray(executionTools.script) ? executionTools.script : [executionTools.script];
+        return Array.isArray(executionTools.script)
+            ? executionTools.script
+            : [executionTools.script];
     }
     /**
      * Resolves the assistant-visible AgentKit tool response while preserving structured tool result data.
@@ -32768,7 +34353,7 @@ class OpenAiVectorStoreKnowledgeSourcePreparer {
                 return { skippedReason: 'invalid_data_url' };
             }
             return {
-                file: new File([parsed.buffer], parsed.filename, {
+                file: new File([new Uint8Array(parsed.buffer)], parsed.filename, {
                     type: parsed.mimeType,
                 }),
                 sizeBytes: parsed.buffer.length,
@@ -34516,7 +36101,7 @@ function emitAgentLlmExecutionToolsAssistantPreparationProgress(options) {
  * Computes one stable hash from a JSON-serializable value.
  */
 function computeJsonHash$1(value) {
-    return SHA256(JSON.stringify(value)).toString();
+    return CryptoJS.SHA256(JSON.stringify(value)).toString();
 }
 /**
  * Handles OpenAI AgentKit-backed executions for `AgentLlmExecutionTools`.
@@ -34674,7 +36259,7 @@ AgentLlmExecutionToolsAgentKitRunner.vectorStoreCache = new Map();
  * Computes one stable hash from a JSON-serializable value.
  */
 function computeJsonHash(value) {
-    return SHA256(JSON.stringify(value)).toString();
+    return CryptoJS.SHA256(JSON.stringify(value)).toString();
 }
 /**
  * Removes assistant-managed requirements before the prompt is executed via OpenAI Assistants.
@@ -35064,7 +36649,11 @@ function truncateAttachmentInlineText(content, maxCharacters) {
         };
     }
     return {
-        content: `${content.slice(0, Math.max(0, maxCharacters))}\n\n[...truncated...]`,
+        content: spaceTrim$1((block) => `
+                ${block(content.slice(0, Math.max(0, maxCharacters)))}
+
+                [...truncated...]
+            `),
         isTruncated: true,
     };
 }
@@ -35530,7 +37119,7 @@ class AgentLlmExecutionTools {
      * Returns a virtual model name representing the agent behavior.
      */
     get modelName() {
-        const hash = SHA256(hexEncoder.parse(this.options.agentSource)).toString( /* hex */);
+        const hash = CryptoJS.SHA256(hexEncoder.parse(this.options.agentSource)).toString( /* hex */);
         const agentId = hash.substring(0, 10);
         return (normalizeToKebabCase(this.title) + '-' + agentId);
     }