@promptbook/wizard 0.112.0-99 → 0.113.0-0

package/umd/index.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('socket.io-client'), require('spacetrim'), require('@anthropic-ai/sdk'), require('bottleneck'), require('colors'), require('@azure/openai'), require('fs/promises'), require('child_process'), require('waitasecond'), require('crypto-js'), require('crypto-js/enc-hex'), require('path'), require('@mozilla/readability'), require('jsdom'), require('showdown'), require('dotenv'), require('crypto-js/sha256'), require('jszip'), require('rxjs'), require('crypto'), require('moment'), require('mime-types'), require('papaparse'), require('@openai/agents'), require('openai')) :
     typeof define === 'function' && define.amd ? define(['exports', 'socket.io-client', 'spacetrim', '@anthropic-ai/sdk', 'bottleneck', 'colors', '@azure/openai', 'fs/promises', 'child_process', 'waitasecond', 'crypto-js', 'crypto-js/enc-hex', 'path', '@mozilla/readability', 'jsdom', 'showdown', 'dotenv', 'crypto-js/sha256', 'jszip', 'rxjs', 'crypto', 'moment', 'mime-types', 'papaparse', '@openai/agents', 'openai'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["promptbook-wizard"] = {}, global.socket_ioClient, global._spaceTrim, global.Anthropic, global.Bottleneck, global.colors, global.openai, global.promises, global.child_process, global.waitasecond, global.cryptoJs, global.hexEncoder, global.path, global.readability, global.jsdom, global.showdown, global.dotenv, global.sha256, global.JSZip, global.rxjs, global.crypto, global.moment, global.mimeTypes, global.papaparse, global.agents, global.OpenAI));
-})(this, (function (exports, socket_ioClient, _spaceTrim, Anthropic, Bottleneck, colors, openai, promises, child_process, waitasecond, cryptoJs, hexEncoder, path, readability, jsdom, showdown, dotenv, sha256, JSZip, rxjs, crypto, moment, mimeTypes, papaparse, agents, OpenAI) { 'use strict';
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["promptbook-wizard"] = {}, global.socket_ioClient, global._spaceTrim, global.Anthropic, global.Bottleneck, global.colors, global.openai, global.promises, global.child_process, global.waitasecond, global.CryptoJS, global.hexEncoder, global.path, global.readability, global.jsdom, global.showdown, global.dotenv, global.sha256, global.JSZip, global.rxjs, null, global.moment, global.mimeTypes, global.papaparse, global.agents, global.OpenAI));
+})(this, (function (exports, socket_ioClient, _spaceTrim, Anthropic, Bottleneck, colors, openai, promises, child_process, waitasecond, CryptoJS, hexEncoder, path, readability, jsdom, showdown, dotenv, sha256, JSZip, rxjs, crypto, moment, mimeTypes, papaparse, agents, OpenAI) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -28,11 +28,14 @@
     var Anthropic__default = /*#__PURE__*/_interopDefaultLegacy(Anthropic);
     var Bottleneck__default = /*#__PURE__*/_interopDefaultLegacy(Bottleneck);
     var colors__default = /*#__PURE__*/_interopDefaultLegacy(colors);
+    var CryptoJS__default = /*#__PURE__*/_interopDefaultLegacy(CryptoJS);
     var hexEncoder__default = /*#__PURE__*/_interopDefaultLegacy(hexEncoder);
+    var showdown__default = /*#__PURE__*/_interopDefaultLegacy(showdown);
     var dotenv__namespace = /*#__PURE__*/_interopNamespace(dotenv);
     var sha256__default = /*#__PURE__*/_interopDefaultLegacy(sha256);
     var JSZip__default = /*#__PURE__*/_interopDefaultLegacy(JSZip);
     var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
+    var papaparse__default = /*#__PURE__*/_interopDefaultLegacy(papaparse);
     var OpenAI__default = /*#__PURE__*/_interopDefaultLegacy(OpenAI);
 
     // ⚠️ WARNING: This code has been generated so that any manual changes will be overwritten
@@ -49,7 +52,7 @@
      * @generated
      * @see https://github.com/webgptorg/promptbook
      */
-    const PROMPTBOOK_ENGINE_VERSION = '0.112.0-99';
+    const PROMPTBOOK_ENGINE_VERSION = '0.113.0-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
@@ -2104,7 +2107,7 @@
         title: 'Anthropic Claude',
         packageName: '@promptbook/anthropic-claude',
         className: 'AnthropicClaudeExecutionTools',
-        envVariables: ['ANTHROPIC_CLAUDE_API_KEY'],
+        envVariables: ['ANTHROPIC_API_KEY', 'ANTHROPIC_CLAUDE_API_KEY'],
         trustLevel: 'CLOSED',
         order: MODEL_ORDERS.TOP_TIER,
         getBoilerplateConfiguration() {
@@ -2121,14 +2124,17 @@
             };
         },
         createConfigurationFromEnv(env) {
+            var _a;
             // Note: Note using `process.env` BUT `env` to pass in the environment variables dynamically
-            if (typeof env.ANTHROPIC_CLAUDE_API_KEY === 'string') {
+            // Note: `ANTHROPIC_API_KEY` takes precedence over the deprecated `ANTHROPIC_CLAUDE_API_KEY`
+            const apiKey = (_a = env.ANTHROPIC_API_KEY) !== null && _a !== void 0 ? _a : env.ANTHROPIC_CLAUDE_API_KEY;
+            if (typeof apiKey === 'string') {
                 return {
                     title: 'Claude (from env)',
                     packageName: '@promptbook/anthropic-claude',
                     className: 'AnthropicClaudeExecutionTools',
                     options: {
-                        apiKey: env.ANTHROPIC_CLAUDE_API_KEY,
+                        apiKey,
                     },
                 };
             }
@@ -2357,7 +2363,7 @@
      * @private internal helper function
      */
     function $randomToken(randomness) {
-        return crypto.randomBytes(randomness).toString('hex');
+        return CryptoJS__default["default"].lib.WordArray.random(randomness).toString(CryptoJS__default["default"].enc.Hex);
     }
     // TODO: [🤶] Maybe export through `@promptbook/utils` or `@promptbook/random` package
     // TODO: Maybe use nanoid instead https://github.com/ai/nanoid
@@ -10031,7 +10037,7 @@
                     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,
@@ -13312,7 +13318,7 @@
      * @public exported from `@promptbook/editable`
      */
     function knowledgeSourceContentToName(knowledgeSourceContent) {
-        const hash = cryptoJs.SHA256(hexEncoder__default["default"].parse(JSON.stringify(knowledgeSourceContent)))
+        const hash = CryptoJS__default["default"].SHA256(hexEncoder__default["default"].parse(JSON.stringify(knowledgeSourceContent)))
             //    <- TODO: [🥬] Encapsulate sha256 to some private utility function
             .toString( /* hex */)
             .substring(0, 20);
@@ -14192,7 +14198,7 @@
             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 = papaparse.parse(value, settings);
+        const csv = papaparse__default["default"].parse(value, settings);
         return csv;
     }
 
@@ -14277,10 +14283,10 @@
                                 i > index ? { ...row, [outputParameterName]: PENDING_VALUE_PLACEHOLDER } : row,
                             );
                             */
-                            await onProgress(papaparse.unparse(mappedData, { ...settings, ...MANDATORY_CSV_SETTINGS }));
+                            await onProgress(papaparse__default["default"].unparse(mappedData, { ...settings, ...MANDATORY_CSV_SETTINGS }));
                         }
                     }
-                    return papaparse.unparse(mappedData, { ...settings, ...MANDATORY_CSV_SETTINGS });
+                    return papaparse__default["default"].unparse(mappedData, { ...settings, ...MANDATORY_CSV_SETTINGS });
                 },
             },
             {
@@ -14308,7 +14314,7 @@
                             return /* not await */ mapCallback({ [key]: value }, index, array.length);
                         }));
                     }));
-                    return papaparse.unparse(mappedData, { ...settings, ...MANDATORY_CSV_SETTINGS });
+                    return papaparse__default["default"].unparse(mappedData, { ...settings, ...MANDATORY_CSV_SETTINGS });
                 },
             },
         ],
@@ -16324,7 +16330,7 @@
         const { filename: sourceFilename, url } = source;
         const { rootDirname, cacheDirname, intermediateFilesStrategy, extension, isVerbose } = options;
         // TODO: [👬] DRY
-        const hash = cryptoJs.SHA256(
+        const hash = CryptoJS__default["default"].SHA256(
         //    <- TODO: [🥬] Encapsulate sha256 to some private utility function
         hexEncoder__default["default"].parse(sourceFilename || url || 'untitled'))
             .toString( /* hex */)
@@ -17227,7 +17233,7 @@
      * @private utility of `WebsiteScraper`
      */
     function createShowdownConverter() {
-        return new showdown.Converter({
+        return new showdown__default["default"].Converter({
             flavor: 'github',
             /*
             > import showdownHighlight from 'showdown-highlight';
@@ -17411,7 +17417,7 @@
      * @public exported from `@promptbook/utils`
      */
     function computeHash(value) {
-        return cryptoJs.SHA256(hexEncoder__default["default"].parse(_spaceTrim.spaceTrim(valueToString(value)))).toString( /* hex */);
+        return CryptoJS__default["default"].SHA256(hexEncoder__default["default"].parse(_spaceTrim.spaceTrim(valueToString(value)))).toString( /* hex */);
     }
     // TODO: [🥬][🥬] Use this ACRY
 
@@ -19180,6 +19186,11 @@
      * - `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) {
@@ -19193,12 +19204,6 @@
             // 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
@@ -19374,8 +19379,11 @@
             if (!trimmedContent) {
                 return requirements;
             }
-            // Add goal as a proper h2 section to the system message
-            const goalSection = `## Goal\n\n${trimmedContent}`;
+            const goalSection = _spaceTrim.spaceTrim((block) => `
+                ## Goal
+
+                ${block(trimmedContent)}
+            `);
             const requirementsWithGoal = this.appendToSystemMessage(requirements, goalSection, '\n\n');
             return this.appendToPromptSuffix(requirementsWithGoal, trimmedContent);
         }
@@ -19761,8 +19769,11 @@
             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.spaceTrim((block) => `
+                ## Language
+
+                -   Your language is ${block(trimmedContent)}
+            `);
             return this.appendToSystemMessage(requirements, languageSection, '\n\n');
         }
     }
@@ -22105,21 +22116,22 @@
      * @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();
@@ -22581,7 +22593,7 @@
      *
      * @private helper of `minecraft2AvatarVisual`
      */
-    const LIGHT_DIRECTION$2 = normalizeVector3({
+    const LIGHT_DIRECTION$4 = normalizeVector3({
         x: 0.4,
         y: -0.65,
         z: 0.92,
@@ -22703,11 +22715,23 @@
      * @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();
     }
@@ -22793,7 +22817,7 @@
                 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,
             };
         });
@@ -22931,13 +22955,27 @@
             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,
@@ -23466,7 +23504,7 @@
      *
      * @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');
@@ -23845,7 +23883,7 @@
             context.beginPath();
             context.moveTo(-radiusX * 0.74, radiusY * 0.2);
             context.quadraticCurveTo(0, radiusY * 0.38, radiusX * 0.74, radiusY * 0.2);
-            context.strokeStyle = `${palette.highlight}${formatAlphaHex$1(eyeStyle.lowerLidOpacity)}`;
+            context.strokeStyle = `${palette.highlight}${formatAlphaHex$2(eyeStyle.lowerLidOpacity)}`;
             context.lineWidth = radiusX * 0.08;
             context.lineCap = 'round';
             context.stroke();
@@ -23926,7 +23964,7 @@
             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();
@@ -23972,7 +24010,7 @@
      *
      * @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');
@@ -23984,11 +24022,40 @@
      *
      * @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.
      *
@@ -24001,10 +24068,7 @@
         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;
@@ -24101,12 +24165,12 @@
                 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,
@@ -24150,14 +24214,28 @@
     /**
      * 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();
     }
@@ -24194,7 +24272,7 @@
                     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,
                 });
@@ -24383,11 +24461,40 @@
      *
      * @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.
      *
@@ -24400,10 +24507,7 @@
         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;
@@ -24456,8 +24560,8 @@
             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),
@@ -24486,54 +24590,118 @@
     /**
      * 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`,
                 });
             }
@@ -24549,12 +24717,21 @@
      * @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) -
@@ -24592,7 +24769,7 @@
      *
      * @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;
@@ -24632,6 +24809,1384 @@
         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.
@@ -25402,6 +26957,8 @@
         octopus3AvatarVisual,
         octopus3dAvatarVisual,
         octopus3d2AvatarVisual,
+        octopus3d3AvatarVisual,
+        octopus3d4AvatarVisual,
         asciiOctopusAvatarVisual,
         minecraftAvatarVisual,
         minecraft2AvatarVisual,
@@ -26081,6 +27638,70 @@
     }
     // Note: [💞] Ignore a discrepancy between file name and entity name
 
+    /**
+     * META VISIBILITY commitment definition.
+     *
+     * The `META VISIBILITY` commitment stores whether an agent is public, private, or unlisted.
+     * Agents Server mirrors this value into the database for efficient filtering, but the book
+     * commitment remains the editable source of truth.
+     *
+     * @private Metadata-only commitment used by Agents Server.
+     */
+    class MetaVisibilityCommitmentDefinition extends BaseCommitmentDefinition {
+        constructor() {
+            super('META VISIBILITY');
+        }
+        /**
+         * Short one-line description of META VISIBILITY.
+         */
+        get description() {
+            return 'Set whether the agent is private, unlisted, or public.';
+        }
+        /**
+         * Icon for this commitment.
+         */
+        get icon() {
+            return '👁️';
+        }
+        /**
+         * Markdown documentation for META VISIBILITY commitment.
+         */
+        get documentation() {
+            return _spaceTrim.spaceTrim(`
+            # META VISIBILITY
+
+            Sets the agent visibility used by Agents Server.
+
+            ## Allowed values
+
+            - \`PRIVATE\` - accessible only to signed-in users with access.
+            - \`UNLISTED\` - accessible by direct link but hidden from public listings.
+            - \`PUBLIC\` - visible in public listings and accessible by anyone.
+
+            ## Key aspects
+
+            - Does not modify the agent's behavior, system message, or tools.
+            - Whitespace and letter case are normalized when persisted.
+            - If multiple \`META VISIBILITY\` commitments are present, persistence keeps one normalized value.
+            - Agents Server mirrors the value into the database for filtering, but the book is the source of truth.
+
+            ## Example
+
+            \`\`\`book
+            Helpful Assistant
+
+            GOAL Be helpful and friendly.
+            META VISIBILITY PUBLIC
+            \`\`\`
+        `);
+        }
+        applyToAgentModelRequirements(requirements, content) {
+            // META VISIBILITY is metadata only and does not alter model requirements.
+            return requirements;
+        }
+    }
+    // Note: [💞] Ignore a discrepancy between file name and entity name
+
     /**
      * META VOICE commitment definition
      *
@@ -27690,7 +29311,15 @@
      * 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.spaceTrim((block) => `
+            ${block(message)}
+
+            Context:
+            ${block(context)}
+        `);
     }
     /**
      * Builds a minimal chat prompt for teammate calls.
@@ -31516,7 +33145,11 @@
                     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.spaceTrim((block) => `
+                              ${block(lineRangedContent.slice(0, MAX_PROJECT_FILE_CONTENT_CHARACTERS))}
+
+                              [...truncated...]
+                          `)
                         : lineRangedContent;
                     const wasTruncated = decoded.isTruncated || wasCharacterTruncated;
                     if (wasCharacterTruncated) {
@@ -32292,6 +33925,40 @@
     }
     // Note: [💞] Ignore a discrepancy between file name and entity name
 
+    /**
+     * Supported visibility states for persisted agents.
+     *
+     * @public exported from `@promptbook/core`
+     */
+    const AGENT_VISIBILITY_VALUES = ['PRIVATE', 'UNLISTED', 'PUBLIC'];
+    /**
+     * Returns `true` when the value is one of supported visibility states.
+     *
+     * @param value - Raw value to validate.
+     * @returns Whether the value is a valid `AgentVisibility`.
+     *
+     * @public exported from `@promptbook/core`
+     */
+    function isAgentVisibility(value) {
+        return typeof value === 'string' && AGENT_VISIBILITY_VALUES.includes(value);
+    }
+    /**
+     * Normalizes raw visibility text into a supported value.
+     *
+     * @param value - Raw visibility value.
+     * @returns Normalized visibility, or `null` when invalid.
+     *
+     * @public exported from `@promptbook/core`
+     */
+    function normalizeAgentVisibility(value) {
+        if (typeof value !== 'string') {
+            return null;
+        }
+        const normalized = value.trim().toUpperCase();
+        return isAgentVisibility(normalized) ? normalized : null;
+    }
+    // Note: [💞] Ignore a discrepancy between file name and entity name
+
     /**
      * Maximum allowed source length for create-agent payloads.
      *
@@ -34545,6 +36212,7 @@
         new MetaDomainCommitmentDefinition(),
         new MetaDisclaimerCommitmentDefinition(),
         new MetaInputPlaceholderCommitmentDefinition(),
+        new MetaVisibilityCommitmentDefinition(),
         new MetaCommitmentDefinition(),
         new MetaVoiceCommitmentDefinition(),
         new NoteCommitmentDefinition('NOTE'),
@@ -35005,11 +36673,19 @@
             try {
                 const json = JSON.parse(content);
                 const formattedJson = JSON.stringify(json, null, 4);
-                return `\`\`\`json\n${formattedJson}\n\`\`\``;
+                return _spaceTrim.spaceTrim((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.spaceTrim((block) => `
+                    \`\`\`json
+                    ${block(content)}
+                    \`\`\`
+                `);
             }
         },
     };
@@ -35033,7 +36709,11 @@
         import(content, mimeType) {
             const extension = mimeTypeToExtension(mimeType);
             const codeBlockType = extension || 'txt';
-            return `\`\`\`${codeBlockType}\n${content}\n\`\`\``;
+            return _spaceTrim.spaceTrim((block) => `
+                \`\`\`${codeBlockType}
+                ${block(content)}
+                \`\`\`
+            `);
         },
     };
 
@@ -35280,11 +36960,19 @@
         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.spaceTrim((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.spaceTrim((block) => `
+                        **User:** ${block(String(sample.question))}
+
+                        **Agent:**
+                        ${block(sample.answer)}
+                    `));
             }
         }
         return examples;
@@ -35878,6 +37566,7 @@
         'META COLOR': applyMetaColorContent,
         'META FONT': applyMetaFontContent,
         'META VOICE': applyMetaVoiceContent,
+        'META VISIBILITY': applyMetaVisibilityContent,
     };
     /**
      * Applies META-style commitments that mutate parsed profile metadata.
@@ -35907,6 +37596,10 @@
             applyMetaAvatarContent(state, metaValue);
             return;
         }
+        if (metaTypeRaw.toUpperCase() === 'VISIBILITY') {
+            applyMetaVisibilityContent(state, metaValue);
+            return;
+        }
         const metaType = normalizeTo_camelCase(metaTypeRaw);
         state.meta[metaType] = metaValue;
     }
@@ -35983,6 +37676,15 @@
     function applyMetaVoiceContent(state, content) {
         state.meta.voice = _spaceTrim.spaceTrim(content);
     }
+    /**
+     * Applies META VISIBILITY content into the normalized `meta.visibility` field.
+     */
+    function applyMetaVisibilityContent(state, content) {
+        const visibility = normalizeAgentVisibility(content);
+        if (visibility) {
+            state.meta.visibility = visibility;
+        }
+    }
     /**
      * Normalizes the separator in the content
      *
@@ -39809,7 +41511,12 @@
      * @private internal function of `$registeredLlmToolsMessage`
      */
     function createUsedEnvMessage() {
-        return $usedEnvFilename === null ? `Unknown \`.env\` file` : `Used \`.env\` file:\n${$usedEnvFilename}`;
+        return $usedEnvFilename === null
+            ? `Unknown \`.env\` file`
+            : _spaceTrim.spaceTrim(`
+              Used \`.env\` file:
+              ${$usedEnvFilename}
+          `);
     }
     // TODO: [®] DRY Register logic
     // TODO: [🧠][⚛] Maybe pass env as argument
@@ -40349,7 +42056,7 @@
      *
      * It looks for environment variables:
      * - `process.env.OPENAI_API_KEY`
-     * - `process.env.ANTHROPIC_CLAUDE_API_KEY`
+     * - `process.env.ANTHROPIC_API_KEY` (or the deprecated `process.env.ANTHROPIC_CLAUDE_API_KEY`)
      * - ...
      *
      * @see Environment variables documentation or .env file for required variables.
@@ -40449,7 +42156,7 @@
      *
      * It looks for environment variables:
      * - `process.env.OPENAI_API_KEY`
-     * - `process.env.ANTHROPIC_CLAUDE_API_KEY`
+     * - `process.env.ANTHROPIC_API_KEY` (or the deprecated `process.env.ANTHROPIC_CLAUDE_API_KEY`)
      * - ...
      *
      * @param options Configuration options for the LLM tools
@@ -48879,7 +50586,9 @@
             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.
@@ -49301,7 +51010,7 @@
      * Computes one stable hash from a JSON-serializable value.
      */
     function computeJsonHash$1(value) {
-        return cryptoJs.SHA256(JSON.stringify(value)).toString();
+        return CryptoJS__default["default"].SHA256(JSON.stringify(value)).toString();
     }
     /**
      * Handles OpenAI AgentKit-backed executions for `AgentLlmExecutionTools`.
@@ -49459,7 +51168,7 @@
      * Computes one stable hash from a JSON-serializable value.
      */
     function computeJsonHash(value) {
-        return cryptoJs.SHA256(JSON.stringify(value)).toString();
+        return CryptoJS__default["default"].SHA256(JSON.stringify(value)).toString();
     }
     /**
      * Removes assistant-managed requirements before the prompt is executed via OpenAI Assistants.
@@ -49795,7 +51504,11 @@
             };
         }
         return {
-            content: `${content.slice(0, Math.max(0, maxCharacters))}\n\n[...truncated...]`,
+            content: _spaceTrim.spaceTrim((block) => `
+                ${block(content.slice(0, Math.max(0, maxCharacters)))}
+
+                [...truncated...]
+            `),
             isTruncated: true,
         };
     }
@@ -50261,7 +51974,7 @@
          * Returns a virtual model name representing the agent behavior.
          */
         get modelName() {
-            const hash = cryptoJs.SHA256(hexEncoder__default["default"].parse(this.options.agentSource)).toString( /* hex */);
+            const hash = CryptoJS__default["default"].SHA256(hexEncoder__default["default"].parse(this.options.agentSource)).toString( /* hex */);
             const agentId = hash.substring(0, 10);
             return (normalizeToKebabCase(this.title) + '-' + agentId);
         }