agent-robot-avatar 0.3.1 → 0.5.2

package/src/agent-robot-avatar-core.js

@@ -1,1135 +1,1155 @@
-const AgentRobotAvatar = (() => {
-  const HTMLElementBase = typeof HTMLElement === 'undefined' ? class {} : HTMLElement;
-  const EASE = {
-    outQuint: t => 1 - Math.pow(1 - t, 5),
-    inOutCubic: t => t < 0.5 ? 4*t*t*t : 1 - Math.pow(-2*t + 2, 3)/2,
-  };
-
-  const POSES = {
-    idle: {
-      w: 54, h: 58, rx: 27,
-      topY: -36, bottomY: 36,
-      topAL: 0, topAR: 0, bottomAL: 0, bottomAR: 0,
-      scale: 1,
-    },
-    happy: {
-      w: 58, h: 58, rx: 29,
-      topY: -36, bottomY: 0,
-      topAL: 0, topAR: 0, bottomAL: 0, bottomAR: 0,
-      scale: 1,
-    },
-    sad: {
-      w: 58, h: 58, rx: 29,
-      topY: -5, bottomY: 36,
-      topAL: -16, topAR: 16, bottomAL: 0, bottomAR: 0,
-      scale: 1,
-    },
-    angry: {
-      w: 58, h: 58, rx: 29,
-      topY: -5, bottomY: 36,
-      topAL: 16, topAR: -16, bottomAL: 0, bottomAR: 0,
-      scale: 1,
-    },
-    sleepy: {
-      w: 58, h: 56, rx: 28,
-      topY: 0, bottomY: 36,
-      topAL: 0, topAR: 0, bottomAL: 0, bottomAR: 0,
-      scale: 1,
-    },
-    input: {
-      w: 12, h: 78, rx: 2,
-      topY: -44, bottomY: 44,
-      topAL: 0, topAR: 0, bottomAL: 0, bottomAR: 0,
-      scale: 1,
-    },
-    sleep: {
-      w: 62, h: 10, rx: 2,
-      topY: -20, bottomY: 20,
-      topAL: 0, topAR: 0, bottomAL: 0, bottomAR: 0,
-      scale: 1,
-    },
-    surprise: {
-      w: 68, h: 68, rx: 34,
-      topY: -40, bottomY: 40,
-      topAL: 0, topAR: 0, bottomAL: 0, bottomAR: 0,
-      scale: 1,
-    },
-  };
-
-  const clamp = (v, a, b) => Math.max(a, Math.min(b, v));
-  const lerp = (a, b, t) => a + (b - a) * t;
-  const clonePose = p => ({...p});
-  const connectedFaces = new Set();
-
-  const forEachConnectedFace = callback => {
-    for (const face of connectedFaces) {
-      if (face.isConnected) callback(face);
-    }
-  };
-
-  const handleGlobalPointerMove = event => {
-    forEachConnectedFace(face => {
-      face._onPointerMove(event);
-      if (face._dragJelly.active) face._onDragMove(event);
-    });
-  };
-  const handleGlobalPointerDown = event => forEachConnectedFace(face => {
-    if (typeof face._noteEnvironmentActivity === 'function') face._noteEnvironmentActivity(event);
-    else face.noteActivity();
-  });
-  const handleGlobalKeyDown = event => forEachConnectedFace(face => {
-    if (typeof face._noteEnvironmentActivity === 'function') face._noteEnvironmentActivity(event);
-    else face.noteActivity();
-  });
-  const handleGlobalPointerEnd = event => {
-    forEachConnectedFace(face => {
-      if (face._dragJelly.active) face._onDragEnd(event);
-    });
-  };
-  const handleGlobalVisibility = () => forEachConnectedFace(face => face._onVisibility());
-
-  function registerConnectedFace(face) {
-    if (connectedFaces.has(face)) return;
-    const first = connectedFaces.size === 0;
-    connectedFaces.add(face);
-    if (!first) return;
-
-    window.addEventListener('pointermove', handleGlobalPointerMove, {passive:true});
-    window.addEventListener('pointerdown', handleGlobalPointerDown, {passive:true});
-    window.addEventListener('keydown', handleGlobalKeyDown, {passive:true});
-    window.addEventListener('pointerup', handleGlobalPointerEnd, {passive:true});
-    window.addEventListener('pointercancel', handleGlobalPointerEnd, {passive:true});
-    document.addEventListener('visibilitychange', handleGlobalVisibility);
-  }
-
-  function unregisterConnectedFace(face) {
-    connectedFaces.delete(face);
-    if (connectedFaces.size > 0) return;
-
-    window.removeEventListener('pointermove', handleGlobalPointerMove);
-    window.removeEventListener('pointerdown', handleGlobalPointerDown);
-    window.removeEventListener('keydown', handleGlobalKeyDown);
-    window.removeEventListener('pointerup', handleGlobalPointerEnd);
-    window.removeEventListener('pointercancel', handleGlobalPointerEnd);
-    document.removeEventListener('visibilitychange', handleGlobalVisibility);
-  }
-
-  class AgentFace extends HTMLElementBase {
-    constructor() {
-      super();
-      this.attachShadow({mode: 'open'});
-      this._state = 'idle';
-      this._pose = clonePose(POSES.idle);
-      this._fromPose = clonePose(this._pose);
-      this._toPose = clonePose(this._pose);
-      this._morphStart = performance.now();
-      this._morphDuration = 0;
-      this._morphEase = EASE.outQuint;
-
-      this._wander = {x:0, y:0};
-      this._wanderTarget = {x:0, y:0};
-      this._nextWanderAt = performance.now() + 500;
-      this._pointer = {x:0, y:0, active:false, lastMove:0};
-      this._look = {x:0, y:0};
-      this._headFollowPose = {x:0,y:0,rot:0};
-      this._headFollowVel = {x:0,y:0,rot:0};
-      this._headCenteringUntil = 0;
-      this._eyeMicro = {lX:0,lY:0,rX:0,rY:0};
-      this._blink = 1;
-      this._blinkAnim = null;
-      this._nextBlinkAt = performance.now() + 1800 + Math.random()*1800;
-      this._inputPhase = 0;
-      this._eyeNod = null;
-      this._eyeBob = null;
-      this._angryEyeDrop = null;
-      this._surpriseShake = null;
-      this._expressionLock = false;
-      this._transitionToken = 0;
-      this._inputWanted = false;
-      this._sleeping = false;
-      this._idleTimer = null;
-      this._pendingWaits = new Map();
-      this._boredRoutine = null;
-      this._boredLookSpeed = null;
-      this._autoSleepMs = Number(this.getAttribute('auto-sleep')) || 0;
-      this._lastActivity = performance.now();
-      this._running = true;
-      this._framePaused = false;
-      this._lastFrame = 0;
-      this._raf = 0;
-      this._dragJelly = {
-        active:false, returning:false, snapped:false, moved:false, pointerId:null,
-        startX:0, startY:0, hotX:120, hotY:120, targetX:0, targetY:0, x:0, y:0, vx:0, vy:0,
-        targetStretch:0, stretch:0, stretchVel:0, angle:0, threshold:52,
-        ux:0, uy:0, anchorX:50, anchorY:50, shear:0, targetShear:0, shearVel:0,
-        targetPullX:0, targetPullY:0, pullX:0, pullY:0, pullVX:0, pullVY:0,
-        maxDist:0, angryThreshold:32, pendingReaction:null, intent:'angry'
-      };
-      this._suppressClick = false;
-      this._boundDragStart = e => this._onDragStart(e);
-      this._boundClickCapture = e => this._onClickCapture(e);
-      this._renderShell();
-    }
-
-    connectedCallback() {
-      registerConnectedFace(this);
-      this.addEventListener('pointerdown', this._boundDragStart);
-      this.addEventListener('click', this._boundClickCapture, true);
-      this._running = !document.hidden;
-      this._lastActivity = performance.now();
-      this._resumeFrames();
-    }
-
-    disconnectedCallback() {
-      // This callback is captured when the custom element is defined, so the
-      // runtime teardown must be entered from the registered core lifecycle.
-      this._runtimeDisconnecting = true;
-      try {
-        unregisterConnectedFace(this);
-        this.removeEventListener('pointerdown', this._boundDragStart);
-        this.removeEventListener('click', this._boundClickCapture, true);
-        // Removal cancels work; reattachment starts idle with appearance settings intact.
-        this._resetToIdle(false);
-        this._blinkAnim = null;
-        this._blink = 1;
-        this._pointer.active = false;
-        this._pointer.influence = 0;
-        const drag = this._dragJelly;
-        if (drag.pointerId != null) {
-          try { this.releasePointerCapture(drag.pointerId); } catch (_) {}
-        }
-        drag.active = false;
-        drag.pointerId = null;
-        this._finishDragReturn(null);
-        this._suppressClick = false;
-        this._running = false;
-        cancelAnimationFrame(this._raf);
-        this._raf = 0;
-      } finally {
-        this._teardownRuntime?.();
-        this._runtimeDisconnecting = false;
-      }
-    }
-
-    static get observedAttributes() { return ['color','size','auto-sleep']; }
-    attributeChangedCallback(name, oldV, newV) {
-      if (oldV === newV) return;
-      if (name === 'color') this._applyColor(newV);
-      if (name === 'size') this.style.setProperty('--face-size', `${Number(newV)||112}px`);
-      if (name === 'auto-sleep') {
-        this._autoSleepMs = Number(newV) || 0;
-        this._scheduleAutoSleep?.();
-      }
-    }
-
-    _applyColor(value) {
-      const color = value || '#08090b';
-      for (const part of [this._head, this._leftTop, this._rightTop, this._leftBottom, this._rightBottom, this._antennaDot]) {
-        if (part) part.setAttribute('fill', color);
-      }
-    }
-
-    _renderShell() {
-      this.shadowRoot.innerHTML = `
-        <style>
-          :host{display:inline-block;width:var(--face-size,112px);height:var(--face-size,112px);contain:layout style;overflow:visible;cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:manipulation}
-          svg{display:block;width:100%;height:100%;overflow:visible}
-          #dragMotion{transform-box:view-box;transform-origin:120px 120px;will-change:transform}
-          #headFollow{will-change:transform}
-          #headMotion{transform-origin:120px 120px;will-change:transform}
-          #inputL,#inputR{opacity:1}
-        </style>
-        <svg viewBox="0 0 240 240" role="img" aria-label="Agent robot avatar">
-          <defs>
-            <path id="headShape" d="M 120.00 20.00 L 132.80 20.05 L 139.87 20.20 L 145.68 20.44 L 150.79 20.78 L 155.43 21.22 L 159.71 21.76 L 163.69 22.40 L 167.44 23.14 L 170.99 23.97 L 174.34 24.90 L 177.53 25.93 L 180.57 27.07 L 183.46 28.30 L 186.22 29.63 L 188.85 31.06 L 191.36 32.59 L 193.75 34.22 L 196.03 35.96 L 198.19 37.80 L 200.25 39.75 L 202.20 41.81 L 204.04 43.97 L 205.78 46.25 L 207.41 48.64 L 208.94 51.15 L 210.37 53.78 L 211.70 56.54 L 212.93 59.43 L 214.07 62.47 L 215.10 65.66 L 216.03 69.01 L 216.86 72.56 L 217.60 76.31 L 218.24 80.29 L 218.78 84.57 L 219.22 89.21 L 219.56 94.32 L 219.80 100.13 L 219.95 107.20 L 220.00 120.00 L 219.95 132.80 L 219.80 139.87 L 219.56 145.68 L 219.22 150.79 L 218.78 155.43 L 218.24 159.71 L 217.60 163.69 L 216.86 167.44 L 216.03 170.99 L 215.10 174.34 L 214.07 177.53 L 212.93 180.57 L 211.70 183.46 L 210.37 186.22 L 208.94 188.85 L 207.41 191.36 L 205.78 193.75 L 204.04 196.03 L 202.20 198.19 L 200.25 200.25 L 198.19 202.20 L 196.03 204.04 L 193.75 205.78 L 191.36 207.41 L 188.85 208.94 L 186.22 210.37 L 183.46 211.70 L 180.57 212.93 L 177.53 214.07 L 174.34 215.10 L 170.99 216.03 L 167.44 216.86 L 163.69 217.60 L 159.71 218.24 L 155.43 218.78 L 150.79 219.22 L 145.68 219.56 L 139.87 219.80 L 132.80 219.95 L 120.00 220.00 L 107.20 219.95 L 100.13 219.80 L 94.32 219.56 L 89.21 219.22 L 84.57 218.78 L 80.29 218.24 L 76.31 217.60 L 72.56 216.86 L 69.01 216.03 L 65.66 215.10 L 62.47 214.07 L 59.43 212.93 L 56.54 211.70 L 53.78 210.37 L 51.15 208.94 L 48.64 207.41 L 46.25 205.78 L 43.97 204.04 L 41.81 202.20 L 39.75 200.25 L 37.80 198.19 L 35.96 196.03 L 34.22 193.75 L 32.59 191.36 L 31.06 188.85 L 29.63 186.22 L 28.30 183.46 L 27.07 180.57 L 25.93 177.53 L 24.90 174.34 L 23.97 170.99 L 23.14 167.44 L 22.40 163.69 L 21.76 159.71 L 21.22 155.43 L 20.78 150.79 L 20.44 145.68 L 20.20 139.87 L 20.05 132.80 L 20.00 120.00 L 20.05 107.20 L 20.20 100.13 L 20.44 94.32 L 20.78 89.21 L 21.22 84.57 L 21.76 80.29 L 22.40 76.31 L 23.14 72.56 L 23.97 69.01 L 24.90 65.66 L 25.93 62.47 L 27.07 59.43 L 28.30 56.54 L 29.63 53.78 L 31.06 51.15 L 32.59 48.64 L 34.22 46.25 L 35.96 43.97 L 37.80 41.81 L 39.75 39.75 L 41.81 37.80 L 43.97 35.96 L 46.25 34.22 L 48.64 32.59 L 51.15 31.06 L 53.78 29.63 L 56.54 28.30 L 59.43 27.07 L 62.47 25.93 L 65.66 24.90 L 69.01 23.97 L 72.56 23.14 L 76.31 22.40 L 80.29 21.76 L 84.57 21.22 L 89.21 20.78 L 94.32 20.44 L 100.13 20.20 L 107.20 20.05 Z"/>
-            <clipPath id="headClip"><use href="#headShape" transform="translate(7.2 7.2) scale(.94)"/></clipPath>
-            <clipPath id="eyeMaskClip" clipPathUnits="userSpaceOnUse"><rect x="-40" y="-54" width="80" height="108"/></clipPath>
-          </defs>
-          <g id="dragMotion">
-            <g id="headFollow">
-              <g id="headMotion">
-              <use id="head" href="#headShape" fill="#08090b" transform="translate(7.2 7.2) scale(.94)"/>
-              <g clip-path="url(#headClip)">
-                <g id="leftEye" transform="translate(86 126)">
-                  <ellipse id="leftBase" cx="0" cy="0" rx="27" ry="29" fill="#fff"/>
-                  <rect id="leftInputBase" x="-6" y="-39" width="12" height="78" rx="3" fill="#fff" opacity="0"/>
-                  <g clip-path="url(#eyeMaskClip)">
-                    <rect id="leftTop" x="-70" y="-96" width="140" height="60" fill="#08090b"/>
-                    <rect id="leftBottom" x="-70" y="36" width="140" height="60" fill="#08090b"/>
-                  </g>
-                </g>
-                <g id="rightEye" transform="translate(154 126)">
-                  <ellipse id="rightBase" cx="0" cy="0" rx="27" ry="29" fill="#fff"/>
-                  <rect id="rightInputBase" x="-6" y="-39" width="12" height="78" rx="3" fill="#fff" opacity="0"/>
-                  <g clip-path="url(#eyeMaskClip)">
-                    <rect id="rightTop" x="-70" y="-96" width="140" height="60" fill="#08090b"/>
-                    <rect id="rightBottom" x="-70" y="36" width="140" height="60" fill="#08090b"/>
-                  </g>
-                </g>
-              </g>
-            </g>
-          </g>
-        </g>
-        </svg>`;
-      this._headShape = this.shadowRoot.getElementById('headShape');
-      this._dragMotion = this.shadowRoot.getElementById('dragMotion');
-      this._headFollow = this.shadowRoot.getElementById('headFollow');
-      this._headMotion = this.shadowRoot.getElementById('headMotion');
-      this._head = this.shadowRoot.getElementById('head');
-      this._leftEye = this.shadowRoot.getElementById('leftEye');
-      this._rightEye = this.shadowRoot.getElementById('rightEye');
-      this._leftBase = this.shadowRoot.getElementById('leftBase');
-      this._rightBase = this.shadowRoot.getElementById('rightBase');
-      this._leftInputBase = this.shadowRoot.getElementById('leftInputBase');
-      this._rightInputBase = this.shadowRoot.getElementById('rightInputBase');
-      this._leftTop = this.shadowRoot.getElementById('leftTop');
-      this._rightTop = this.shadowRoot.getElementById('rightTop');
-      this._leftBottom = this.shadowRoot.getElementById('leftBottom');
-      this._rightBottom = this.shadowRoot.getElementById('rightBottom');
-      this._applyColor(this.getAttribute('color'));
-      this._baseHeadPathD = this._headShape.getAttribute('d');
-      this._baseHeadPoints = this._parseHeadPoints(this._baseHeadPathD);
-    }
-
-    _parseHeadPoints(d) {
-      const nums = (d.match(/-?\d*\.?\d+/g) || []).map(Number);
-      const pts = [];
-      for (let i = 0; i < nums.length - 1; i += 2) pts.push({x: nums[i], y: nums[i+1]});
-      return pts;
-    }
-
-    _pointsToPath(points) {
-      if (!points.length) return this._baseHeadPathD || '';
-      let d = `M ${points[0].x.toFixed(2)} ${points[0].y.toFixed(2)}`;
-      for (let i = 1; i < points.length; i++) d += ` L ${points[i].x.toFixed(2)} ${points[i].y.toFixed(2)}`;
-      return `${d} Z`;
-    }
-
-    _clientToLocal(clientX, clientY) {
-      const r = this.getBoundingClientRect();
-      return {
-        x: clamp(((clientX - r.left) / Math.max(1, r.width)) * 240, 0, 240),
-        y: clamp(((clientY - r.top) / Math.max(1, r.height)) * 240, 0, 240),
-      };
-    }
-
-    _applyHeadDeform() {
-      const j = this._dragJelly;
-      if (!this._headShape || !this._baseHeadPoints?.length) return;
-      const amount = Math.hypot(j.pullX, j.pullY);
-      if (amount < 0.015) {
-        this._headShape.setAttribute('d', this._baseHeadPathD);
-        return;
-      }
-      const radius = (50 + amount * 0.8) * 0.92;
-      const pts = this._baseHeadPoints.map(p => {
-        const dx = p.x - j.hotX;
-        const dy = p.y - j.hotY;
-        const w = Math.exp(-(dx*dx + dy*dy) / (2 * radius * radius));
-        return {x:p.x + j.pullX * w, y:p.y + j.pullY * w};
-      });
-      this._headShape.setAttribute('d', this._pointsToPath(pts));
-    }
-
-    _onVisibility() {
-      this._running = !document.hidden;
-      if (this._running) this._resumeFrames();
-      else {
-        cancelAnimationFrame(this._raf);
-        this._raf = 0;
-      }
-    }
-
-    _onClickCapture(e) {
-      if (!this._suppressClick) return;
-      e.preventDefault();
-      e.stopImmediatePropagation();
-      this._suppressClick = false;
-    }
-
-    _onPointerMove(e) {
-      const r = this.getBoundingClientRect();
-      const cx = r.left + r.width / 2;
-      const cy = r.top + r.height / 2;
-      const dx = e.clientX - cx;
-      const dy = e.clientY - cy;
-      const near = Math.max(r.width, r.height) * 2.55;
-      const dist = Math.hypot(dx, dy);
-      const influence = clamp(1 - dist / near, 0, 1);
-      this._pointer.x = clamp(dx * .42, -48, 48);
-      this._pointer.y = clamp(dy * .38, -34, 34);
-      this._pointer.active = influence > 0.001;
-      this._pointer.influence = influence;
-      this._pointer.lastMove = performance.now();
-      if ((this._pointer.influence||0) > 0.65 && this._boredRoutine) { this._boredRoutine = null; this._boredLookSpeed = null; }
-    }
-
-    _onDragStart(e) {
-      if (e.button != null && e.button !== 0) return;
-      const r = this.getBoundingClientRect();
-      const j = this._dragJelly;
-      j.active = true;
-      j.returning = false;
-      j.snapped = false;
-      j.moved = false;
-      j.pointerId = e.pointerId;
-      j.startX = e.clientX;
-      j.startY = e.clientY;
-      const local = this._clientToLocal(e.clientX, e.clientY);
-      j.hotX = local.x;
-      j.hotY = local.y;
-      j.targetX = j.x;
-      j.targetY = j.y;
-      j.targetStretch = j.stretch;
-      j.targetShear = j.shear;
-      j.targetPullX = j.pullX;
-      j.targetPullY = j.pullY;
-      j.threshold = clamp(r.width * 0.40, 24, 46);
-      j.maxDist = 0;
-      j.pendingReaction = null;
-      j.intent = 'angry';
-      j.angryThreshold = Math.max(j.threshold * 0.76, 22);
-      this._suppressClick = false;
-      this._boredRoutine = null;
-      this._boredLookSpeed = null;
-      this._wanderTarget.x = this._wanderTarget.y = 0;
-      try { this.setPointerCapture(e.pointerId); } catch (_) {}
-    }
-
-    _onDragMove(e) {
-      const j = this._dragJelly;
-      if (!j.active || e.pointerId !== j.pointerId) return;
-      const dx = e.clientX - j.startX;
-      const dy = e.clientY - j.startY;
-      const dist = Math.hypot(dx, dy);
-      j.maxDist = Math.max(j.maxDist, dist);
-      if (dist > 2.5) {
-        j.moved = true;
-        this._suppressClick = true;
-      }
-      const r = this.getBoundingClientRect();
-      const size = Math.max(1, Math.max(r.width, r.height));
-      const localScale = 240 / size;
-      const pdx = dx * localScale;
-      const pdy = dy * localScale;
-      const cx = 120, cy = 120;
-      const rx = j.hotX - cx;
-      const ry = j.hotY - cy;
-      const rl = Math.max(1, Math.hypot(rx, ry));
-      const rux = rx / rl;
-      const ruy = ry / rl;
-      const radial = pdx * rux + pdy * ruy;
-      const tangent = -pdx * ruy + pdy * rux;
-      const motionLen = Math.max(1, Math.hypot(pdx, pdy));
-      j.ux = pdx / motionLen;
-      j.uy = pdy / motionLen;
-      j.angle = Math.atan2(j.uy, j.ux);
-      j.intent = radial < -6 ? 'success' : 'angry';
-      const gain = dist > j.threshold * .60 ? 0.24 : 0.19;
-      j.targetPullX = clamp(pdx * gain, -25, 25);
-      j.targetPullY = clamp(pdy * gain, -25, 25);
-      j.targetX = clamp(dx * 0.065, -5.2, 5.2);
-      j.targetY = clamp(dy * 0.065, -5.2, 5.2);
-      j.targetStretch = clamp((radial / 240) * .08, -.028, .052);
-      j.targetShear = clamp((tangent / 240) * .050, -.022, .022);
-      j.anchorX = clamp(50 - (rux * 31), 15, 85);
-      j.anchorY = clamp(50 - (ruy * 31), 15, 85);
-    }
-
-    _onDragEnd(e) {
-      const j = this._dragJelly;
-      if (!j.active || e.pointerId !== j.pointerId) return;
-      j.active = false;
-      try { this.releasePointerCapture(e.pointerId); } catch (_) {}
-      j.pointerId = null;
-      const reactionThreshold = Math.max(j.angryThreshold, 22);
-      j.pendingReaction = j.maxDist >= reactionThreshold ? j.intent : null;
-      j.returning = true;
-      j.targetX = 0;
-      j.targetY = 0;
-      j.targetStretch = 0;
-      j.targetShear = 0;
-      j.targetPullX = 0;
-      j.targetPullY = 0;
-    }
-
-    _finishDragReturn(reaction) {
-      const j = this._dragJelly;
-      j.returning = false;
-      j.pendingReaction = null;
-      j.x = j.y = j.vx = j.vy = 0;
-      j.stretch = j.stretchVel = 0;
-      j.shear = j.shearVel = 0;
-      j.pullX = j.pullY = j.pullVX = j.pullVY = 0;
-      if (this._dragMotion) this._dragMotion.style.transform = '';
-      if (this._headShape) this._headShape.setAttribute('d', this._baseHeadPathD);
-      if (reaction === 'angry') this.angry({fromDrag:true});
-      else if (reaction === 'success') this.success({fromDrag:true});
-    }
-
-    _updateDragJelly(dt) {
-      const j = this._dragJelly;
-      const dtS = Math.min(dt, 34) / 1000;
-      if (j.active) {
-        const fast = Math.min(1, dt / 14);
-        const k = 0.36 + 0.30 * fast;
-        j.x = lerp(j.x, j.targetX, k);
-        j.y = lerp(j.y, j.targetY, k);
-        j.stretch = lerp(j.stretch, j.targetStretch, k*.85);
-        j.shear = lerp(j.shear, j.targetShear, k*.80);
-        j.pullX = lerp(j.pullX, j.targetPullX, k*.95);
-        j.pullY = lerp(j.pullY, j.targetPullY, k*.95);
-      } else if (j.returning) {
-        const kx = 135, dx = 8.2;
-        const ax = -j.x * kx - j.vx * dx;
-        const ay = -j.y * kx - j.vy * dx;
-        j.vx += ax * dtS;
-        j.vy += ay * dtS;
-        j.x += j.vx * dtS;
-        j.y += j.vy * dtS;
-        const ks = 128, ds = 7.5;
-        const as = -j.stretch * ks - j.stretchVel * ds;
-        j.stretchVel += as * dtS;
-        j.stretch += j.stretchVel * dtS;
-        const kh = 118, dh = 7.2;
-        const ah = -j.shear * kh - j.shearVel * dh;
-        j.shearVel += ah * dtS;
-        j.shear += j.shearVel * dtS;
-        const kp = 118, dp = 7.1;
-        const apx = -j.pullX * kp - j.pullVX * dp;
-        const apy = -j.pullY * kp - j.pullVY * dp;
-        j.pullVX += apx * dtS;
-        j.pullVY += apy * dtS;
-        j.pullX += j.pullVX * dtS;
-        j.pullY += j.pullVY * dtS;
-
-        const visuallyRecovered = Math.abs(j.x) < 0.34 && Math.abs(j.y) < 0.34 && Math.abs(j.stretch) < 0.008 && Math.abs(j.shear) < 0.0035 && Math.abs(j.pullX) < 0.40 && Math.abs(j.pullY) < 0.40;
-        if (j.pendingReaction && visuallyRecovered) {
-          this._finishDragReturn(j.pendingReaction);
-        } else if (Math.abs(j.x) < 0.02 && Math.abs(j.y) < 0.02 && Math.abs(j.vx) < 0.04 && Math.abs(j.vy) < 0.04 && Math.abs(j.stretch) < 0.001 && Math.abs(j.stretchVel) < 0.003 && Math.abs(j.shear) < 0.0005 && Math.abs(j.shearVel) < 0.002 && Math.abs(j.pullX) < 0.03 && Math.abs(j.pullY) < 0.03 && Math.abs(j.pullVX) < 0.06 && Math.abs(j.pullVY) < 0.06) {
-          this._finishDragReturn(null);
-        }
-      }
-      j.stretch = clamp(j.stretch, -0.035, 0.055);
-      j.shear = clamp(j.shear, -0.026, 0.026);
-      j.pullX = clamp(j.pullX, -26, 26);
-      j.pullY = clamp(j.pullY, -26, 26);
-      this._applyHeadDeform();
-      if (this._dragMotion) {
-        const sx = 1 + j.stretch;
-        const sy = 1 - j.stretch * 0.30;
-        const shearDeg = j.shear * 180 / Math.PI;
-        this._dragMotion.style.transformOrigin = `${j.anchorX.toFixed(2)}% ${j.anchorY.toFixed(2)}%`;
-        this._dragMotion.style.transform = `translate(${j.x.toFixed(2)}px, ${j.y.toFixed(2)}px) rotate(${j.angle.toFixed(4)}rad) scale(${sx.toFixed(4)}, ${sy.toFixed(4)}) skewY(${shearDeg.toFixed(3)}deg) rotate(${(-j.angle).toFixed(4)}rad)`;
-      }
-    }
-
-    noteActivity(wake=true) {
-      this._lastActivity = performance.now();
-      this._resumeFrames();
-      if (wake && this._sleeping) this.wake();
-    }
-
-    play(name) {
-      const action = String(name || '').trim().toLowerCase();
-      switch (action) {
-        case 'idle': return this.reset();
-        case 'bored': return this.bored();
-        case 'input': return this.input(true);
-        case 'send': return this.send();
-        case 'success': return this.success();
-        case 'error': return this.error();
-        case 'angry': return this.angry();
-        case 'surprise': return this.surprise();
-        case 'sleep': return this.sleep();
-        case 'wake': return this.wake();
-        default: throw new Error(`Unknown Agent Robot Avatar action: ${name}`);
-      }
-    }
-
-    reset() {
-      return this._resetToIdle();
-    }
-
-    _resetToIdle(notify = true) {
-      this._resetExtensionEffects?.();
-      this._inputWanted = false;
-      ++this._transitionToken;
-      this._cancelPendingWaits();
-      this._boredRoutine = null;
-      this._boredLookSpeed = null;
-      this._sleeping = false;
-      this._eyeNod = null;
-      this._eyeBob = null;
-      this._angryEyeDrop = null;
-      this._surpriseShake = null;
-      this.setState('idle', { notify, duration: notify ? 320 : 0 });
-      return this;
-    }
-
-    setState(name, opts={}) {
-      if (!POSES[name]) throw new Error(`Unknown AgentFace state: ${name}`);
-      this._resumeFrames();
-      this._state = name;
-      this._sleeping = name === 'sleep';
-      if (name === 'idle' && !opts.keepGazeLock) this._releaseExpressionLock();
-      this._startMorph(POSES[name], opts.duration ?? (name==='surprise'?170:320), opts.ease || EASE.outQuint);
-      if (opts.notify !== false) this.dispatchEvent(new CustomEvent('face-state', {detail:{state:name}}));
-      return this;
-    }
-
-    _startMorph(target, duration, ease) {
-      this._fromPose = clonePose(this._pose);
-      this._toPose = clonePose(target);
-      this._morphStart = performance.now();
-      this._morphDuration = Math.max(0, duration);
-      this._morphEase = ease;
-    }
-
-    async success(opts={}) {
-      const fromDrag = !!opts.fromDrag;
-      this.noteActivity();
-      this._inputWanted = false;
-      if (fromDrag) {
-        ++this._transitionToken;
-        this._expressionLock = true;
-        this._eyeMicro.lX = this._eyeMicro.lY = 0;
-        this._eyeMicro.rX = this._eyeMicro.rY = 0;
-        this._wanderTarget.x = this._wanderTarget.y = 0;
-        this._headCenteringUntil = performance.now() + 120;
-        this._look.x = 0;
-        this._look.y = 0;
-      } else {
-        if (!(await this._prepareExpression({normalizePose:true, duration:180, pause:320}))) return;
-      }
-      const token = this._transitionToken;
-      this.setState('happy', {duration: fromDrag ? 180 : 220, keepGazeLock:true});
-      this._eyeBob = {start: performance.now(), duration: 620, amp: 8};
-      this._animateHead([
-        {transform:'translateY(0px)'},
-        {transform:'translateY(-2.4px)', offset:.42},
-        {transform:'translateY(0px)'}
-      ], 760);
-      await this._wait(980);
-      if (token !== this._transitionToken) return;
-      this._eyeBob = null;
-      if (this._state==='happy') await this._returnToIdle(520);
-    }
-
-    async error() {
-      this.noteActivity();
-      this._inputWanted = false;
-      if (!(await this._prepareExpression({normalizePose:true, duration:180, pause:320}))) return;
-      const token = this._transitionToken;
-      this.setState('sad', {duration:320, keepGazeLock:true});
-      this._eyeBob = {start: performance.now(), duration: 700, amp: 7};
-      this._animateHead([
-        {transform:'translateY(0px)'},
-        {transform:'translateY(2.6px)', offset:.46},
-        {transform:'translateY(0px)'}
-      ], 820);
-      await this._wait(1180);
-      if (token !== this._transitionToken) return;
-      this._eyeBob = null;
-      if (this._state==='sad') {
-        await this._returnToIdle(560);
-      }
-    }
-
-    async angry(opts={}) {
-      const fromDrag = !!opts.fromDrag;
-      this.noteActivity();
-      this._inputWanted = false;
-      if (fromDrag) {
-        ++this._transitionToken;
-        this._expressionLock = true;
-        this._eyeMicro.lX = this._eyeMicro.lY = 0;
-        this._eyeMicro.rX = this._eyeMicro.rY = 0;
-        this._wanderTarget.x = this._wanderTarget.y = 0;
-        this._headCenteringUntil = performance.now() + 120;
-        this._look.x = 0;
-        this._look.y = 0;
-      } else {
-        if (!(await this._prepareExpression({normalizePose:true, duration:180, pause:320}))) return;
-      }
-      const token = this._transitionToken;
-      this.setState('angry', {duration: fromDrag ? 180 : 280, keepGazeLock:true});
-      this._angryEyeDrop = {start: performance.now(), duration:680, amount:4.8};
-      this._animateHead([
-        {transform:'translateY(0px)'},
-        {transform:'translateY(2.6px)', offset:.46},
-        {transform:'translateY(0px)'}
-      ], 820);
-      await this._wait(980);
-      if (token !== this._transitionToken) return;
-      this._angryEyeDrop = null;
-      if (this._state==='angry') await this._returnToIdle(500);
-    }
-
-    async surprise() {
-      this.noteActivity();
-      this._inputWanted = false;
-      if (!(await this._prepareExpression({normalizePose:true, duration:180, pause:320}))) return;
-      const token = this._transitionToken;
-      this._surpriseShake = null;
-      const pre = {...POSES.idle, w:34, h:36, rx:18};
-      this._startMorph(pre, 235, EASE.inOutCubic);
-      await this._wait(235);
-      if (token !== this._transitionToken || this._state!=='idle') return;
-      this.setState('surprise', {duration:175, ease:EASE.outQuint, keepGazeLock:true});
-      this._animateHead([{transform:'scale(1)'},{transform:'scale(1.035)'}], 175);
-      await this._wait(175);
-      if (token !== this._transitionToken || this._state!=='surprise') return;
-      this._surpriseShake = {start: performance.now(), duration:420};
-      await this._wait(420);
-      if (token !== this._transitionToken) return;
-      this._surpriseShake = null;
-      if (this._state==='surprise') {
-        this._animateHead([{transform:'scale(1.035)'},{transform:'scale(1)'}], 430);
-        await this._returnToIdle(430, EASE.inOutCubic);
-      }
-    }
-
-    async send() {
-      this.noteActivity();
-      this._inputWanted = false;
-      if (!(await this._prepareExpression({normalizePose:true, duration:180, pause:320}))) return;
-      const token = this._transitionToken;
-      this._eyeNod = {start: performance.now(), duration: 760};
-      this._animateHead([
-        {transform:'translateY(0px)'},
-        {transform:'translateY(5px)', offset:.52},
-        {transform:'translateY(0px)'}
-      ], 920);
-      await this._wait(860);
-      if (token !== this._transitionToken) return;
-      this._eyeNod = null;
-      this._releaseExpressionLock();
-    }
-
-    async sleep() {
-      if (this._sleeping) return;
-      if (!(await this._prepareExpression({normalizePose:true, duration:160}))) return;
-      const token = this._transitionToken;
-      this._blinkAnim = null;
-      this._blink = 1;
-      this._nextBlinkAt = performance.now() + 10000;
-      this.setState('sleepy', {duration:940, ease:EASE.inOutCubic, keepGazeLock:true});
-      await this._wait(980);
-      if (token !== this._transitionToken || this._state !== 'sleepy') return;
-      const reopen = {...POSES.idle, topY:-22, bottomY:36};
-      this._startMorph(reopen, 105, EASE.outQuint);
-      await this._wait(120);
-      if (token !== this._transitionToken || this._state !== 'sleepy') return;
-      this.setState('sleepy', {duration:820, ease:EASE.inOutCubic, keepGazeLock:true});
-      await this._wait(870);
-      if (token !== this._transitionToken || this._state !== 'sleepy') return;
-      await this._wait(120);
-      if (token !== this._transitionToken || this._state !== 'sleepy') return;
-      this._animateHead([{transform:'translateY(0)'},{transform:'translateY(4px)'}],980);
-      this._startMorph(POSES.sleep, 980, EASE.inOutCubic);
-      this._state = 'sleep';
-      this.dispatchEvent(new CustomEvent('face-state', {detail:{state:'sleep'}}));
-      this._sleeping = true;
-      this._nextBlinkAt = performance.now() + 3200 + Math.random()*2200;
-    }
-
-    async wake() {
-      if (!this._sleeping && this._state!=='sleep') return;
-      const token = ++this._transitionToken;
-      this._expressionLock = true;
-      this._sleeping = false;
-      this._animateHead([
-        {transform:'translateY(4px) scale(1)'},
-        {transform:'translateY(-2px) scale(1.015)', offset:.55},
-        {transform:'translateY(0) scale(1)'}
-      ], 500);
-      this.setState('sleepy', {duration:240, keepGazeLock:true});
-      await this._wait(260);
-      if (token !== this._transitionToken) return;
-      this.setState('surprise', {duration:120, keepGazeLock:true});
-      await this._wait(190);
-      if (token !== this._transitionToken) return;
-      await this._returnToIdle(300);
-      if (token !== this._transitionToken) return;
-      this._lastActivity = performance.now();
-    }
-
-    async input(active=true) {
-      this.noteActivity();
-      if (active) {
-        if (this._inputWanted || this._state==='input') return;
-        this._inputWanted = true;
-        if (!(await this._prepareExpression({normalizePose:true, duration:140}))) return;
-        if (!this._inputWanted) return;
-        this.setState('input', {duration:210, keepGazeLock:true});
-      } else {
-        this._inputWanted = false;
-        ++this._transitionToken;
-        if (this._state==='input') this.setState('idle', {duration:260});
-        else this._releaseExpressionLock();
-      }
-    }
-
-    _animateHead(frames, duration) {
-      if (!this._headMotion.animate) return;
-      const token = this._transitionToken;
-      const anim = this._headMotion.animate(frames, {duration, easing:'cubic-bezier(.16,1,.3,1)', fill:'forwards'});
-      anim.onfinish = () => {
-        if (token === this._transitionToken) {
-          this._headMotion.style.transform = frames[frames.length-1].transform || '';
-        }
-      };
-      return anim;
-    }
-
-    _wait(ms) {
-      return new Promise(resolve => {
-        const timer = setTimeout(() => {
-          this._pendingWaits.delete(timer);
-          resolve();
-        }, ms);
-        this._pendingWaits.set(timer, resolve);
-      });
-    }
-
-    _cancelPendingWaits() {
-      for (const [timer, resolve] of this._pendingWaits) {
-        clearTimeout(timer);
-        resolve();
-      }
-      this._pendingWaits.clear();
-    }
-
-    async _returnToIdle(duration=320, ease=EASE.outQuint) {
-      const token = this._transitionToken;
-      this.setState('idle', {duration, ease, keepGazeLock:true});
-      this._headCenteringUntil = Math.max(this._headCenteringUntil || 0, performance.now() + duration);
-      await this._wait(duration);
-      if (token === this._transitionToken && this._state === 'idle') this._releaseExpressionLock();
-    }
-
-    async _prepareExpression({normalizePose=true, duration=180, pause=320}={}) {
-      const token = ++this._transitionToken;
-      this._expressionLock = true;
-      this._eyeMicro.lX = this._eyeMicro.lY = 0;
-      this._eyeMicro.rX = this._eyeMicro.rY = 0;
-      this._wanderTarget.x = this._wanderTarget.y = 0;
-      this._headCenteringUntil = performance.now() + duration + pause;
-      if (normalizePose && this._state !== 'idle') {
-        this.setState('idle', {duration:Math.min(140, duration), keepGazeLock:true});
-      }
-      await this._wait(duration);
-      if (token !== this._transitionToken) return false;
-      if (pause > 0) await this._wait(pause);
-      return token === this._transitionToken;
-    }
-
-    async bored() {
-      this.noteActivity();
-      this._inputWanted = false;
-      this._sleeping = false;
-      if (!(await this._prepareExpression({normalizePose:true, duration:180, pause:620}))) return;
-      this._expressionLock = false;
-      this._look.x = 0;
-      this._look.y = 0;
-      this._wander.x = 0;
-      this._wander.y = 0;
-      this._startBoredRoutine(performance.now());
-    }
-
-    _startBoredRoutine(now) {
-      this._boredRoutine = {
-        index: 0,
-        nextAt: now,
-        steps: [
-          {x:-18,y:-11,hold:1400,lookSpeed:2},
-          {x:18,y:-11,hold:1400,lookSpeed:2},
-          {x:0,y:0,hold:320,lookSpeed:2},
-        ]
-      };
-    }
-
-    _updateBored(now) {
-      if (!this._boredRoutine) return false;
-      if (now < this._boredRoutine.nextAt) return true;
-      const step = this._boredRoutine.steps[this._boredRoutine.index];
-      if (!step) {
-        this._boredRoutine = null;
-        this._boredLookSpeed = null;
-        this._wanderTarget.x = this._wanderTarget.y = 0;
-        return false;
-      }
-      this._wanderTarget.x = step.x;
-      this._wanderTarget.y = step.y;
-      this._boredLookSpeed = step.lookSpeed ?? null;
-      this._boredRoutine.index += 1;
-      this._boredRoutine.nextAt = now + step.hold;
-      return true;
-    }
-
-    _releaseExpressionLock() {
-      this._expressionLock = false;
-      this._headCenteringUntil = 0;
-    }
-
-    _updateMorph(now) {
-      if (!this._morphDuration) {
-        this._pose = clonePose(this._toPose);
-        return;
-      }
-      const t = clamp((now - this._morphStart) / this._morphDuration, 0, 1);
-      const k = this._morphEase(t);
-      const p = {};
-      for (const key of Object.keys(this._toPose)) p[key] = lerp(this._fromPose[key], this._toPose[key], k);
-      this._pose = p;
-      if (t >= 1) this._morphDuration = 0;
-    }
-
-    _updateBlink(now) {
-      if (this._sleeping || this._state === 'input') return;
-      if (this._blinkAnim) {
-        const t = clamp((now - this._blinkAnim.start) / this._blinkAnim.duration, 0, 1);
-        this._blink = t < .5 ? lerp(1,.08,t*2) : lerp(.08,1,(t-.5)*2);
-        if (t >= 1) {
-          this._blinkAnim = null;
-          this._blink = 1;
-          this._nextBlinkAt = now + 1900 + Math.random()*2600;
-        }
-      } else if (!this._expressionLock && now >= this._nextBlinkAt) {
-        this._blinkAnim = {start:now,duration:150+Math.random()*70};
-      }
-    }
-
-    _updateLook(now, dt) {
-      this._updateBored(now);
-      const pointerFresh = (now - this._pointer.lastMove) < 900;
-      if (!this._expressionLock && !this._boredRoutine && !this._sleeping && this._state!=='input' && now >= this._nextWanderAt) {
-        const ampX = 12 + Math.random()*13;
-        const ampY = 5 + Math.random()*9;
-        this._wanderTarget.x = (Math.random()*2-1)*ampX;
-        this._wanderTarget.y = (Math.random()*2-1)*ampY;
-        this._nextWanderAt = now + 1150 + Math.random()*1900;
-      }
-      const draggingJelly = this._dragJelly.active || this._dragJelly.returning;
-      const pointerMix = (!this._expressionLock && !this._boredRoutine && pointerFresh && this._pointer.active && !this._sleeping && this._state!=='input')
-        ? Math.pow(this._pointer.influence || 0, 1.6)
-        : 0;
-      const targetX = this._expressionLock ? 0 : lerp(this._wanderTarget.x, this._pointer.x, pointerMix);
-      const targetY = this._expressionLock ? 0 : lerp(this._wanderTarget.y, this._pointer.y, pointerMix);
-      const lookSpeed = this._expressionLock ? 0.40 : (draggingJelly ? 0.42 : (this._boredRoutine && this._boredLookSpeed != null ? this._boredLookSpeed : (pointerMix > 0.05 ? 0.28 : 0.16)));
-      const kL = 1 - Math.pow(1 - clamp(lookSpeed,0.02,.9), dt/16.67);
-      this._look.x = lerp(this._look.x, targetX, kL);
-      this._look.y = lerp(this._look.y, targetY, kL);
-      if (this._sleeping) {
-        this._look.x *= .92;
-        this._look.y *= .92;
-      }
-    }
-
-    _autoSleep(now) {
-      if (!this._autoSleepMs || this._sleeping || this._expressionLock || ['input','happy','sad','surprise'].includes(this._state)) return;
-      if (now - this._lastActivity > this._autoSleepMs) this.sleep();
-    }
-
-    _updateHeadFollow(now, dt) {
-      const pointerFresh = (now - this._pointer.lastMove) < 900;
-      const pointerInRange = pointerFresh && this._pointer.active && (this._pointer.influence || 0) > 0.03;
-      const headCentering = now < (this._headCenteringUntil || 0);
-      const jellyBusy = this._dragJelly.active || this._dragJelly.returning;
-      const canFollowPointer = pointerInRange && !jellyBusy && !this._sleeping && !this._boredRoutine && !headCentering && !this._expressionLock;
-      const srcX = canFollowPointer ? this._pointer.x : this._look.x;
-      const srcY = canFollowPointer ? this._pointer.y : this._look.y;
-      const nx = clamp(srcX / 48, -1, 1);
-      const ny = clamp(srcY / 34, -1, 1);
-      const diag = clamp(nx * ny, -1, 1);
-      const targetRot = diag * 8;
-      const targetX = canFollowPointer ? nx * 4.2 : 0;
-      const targetY = canFollowPointer ? ny * 4.2 : 0;
-
-      const dtS = Math.min(dt, 34) / 1000;
-      const rotStiffness = canFollowPointer ? 70 : 56;
-      const rotDamping = canFollowPointer ? 15 : 13;
-      const aRot = (targetRot - this._headFollowPose.rot) * rotStiffness - this._headFollowVel.rot * rotDamping;
-      this._headFollowVel.rot += aRot * dtS;
-      this._headFollowPose.rot += this._headFollowVel.rot * dtS;
-      const stiffness = canFollowPointer ? 95 : 80;
-      const damping = canFollowPointer ? 16 : 14;
-      const ax = (targetX - this._headFollowPose.x) * stiffness - this._headFollowVel.x * damping;
-      const ay = (targetY - this._headFollowPose.y) * stiffness - this._headFollowVel.y * damping;
-      this._headFollowVel.x += ax * dtS;
-      this._headFollowVel.y += ay * dtS;
-      this._headFollowPose.x += this._headFollowVel.x * dtS;
-      this._headFollowPose.y += this._headFollowVel.y * dtS;
-
-      if (!canFollowPointer) {
-        if (Math.abs(this._headFollowPose.x) < 0.01 && Math.abs(this._headFollowVel.x) < 0.01) { this._headFollowPose.x = 0; this._headFollowVel.x = 0; }
-        if (Math.abs(this._headFollowPose.y) < 0.01 && Math.abs(this._headFollowVel.y) < 0.01) { this._headFollowPose.y = 0; this._headFollowVel.y = 0; }
-        if (Math.abs(this._headFollowPose.rot) < 0.01 && Math.abs(this._headFollowVel.rot) < 0.01) { this._headFollowPose.rot = 0; this._headFollowVel.rot = 0; }
-      }
-
-      if (this._headFollow) {
-        const a = this._headFollowPose.rot.toFixed(2);
-        const tx = this._headFollowPose.x.toFixed(2);
-        const ty = this._headFollowPose.y.toFixed(2);
-        this._headFollow.setAttribute('transform', `translate(${tx} ${ty}) translate(120 120) rotate(${a}) translate(-120 -120)`);
-      }
-    }
-
-    _draw(now) {
-      const p = this._pose;
-      let nodY = 0;
-      let nodScaleY = 1;
-      if (this._eyeNod) {
-        const elapsed = now - this._eyeNod.start;
-        let depth = 0;
-        if (elapsed < 150) depth = elapsed / 150;
-        else if (elapsed < 300) depth = 1 - (elapsed - 150) / 150;
-        else if (elapsed < 450) depth = (elapsed - 300) / 150;
-        else if (elapsed < 760) depth = 1 - (elapsed - 450) / 310;
-        else { depth = 0; this._eyeNod = null; }
-        depth = clamp(depth, 0, 1);
-        nodY = 31 * depth;
-        nodScaleY = 1 - .30 * depth;
-      }
-
-      let angryDropY = 0;
-      if (this._angryEyeDrop) {
-        const t = clamp((now - this._angryEyeDrop.start) / this._angryEyeDrop.duration, 0, 1);
-        const settle = 1 - Math.exp(-5.2 * t) * Math.cos(8.6 * t);
-        angryDropY = this._angryEyeDrop.amount * settle;
-        if (t >= 1) angryDropY = this._angryEyeDrop.amount;
-      }
-
-      let emotionBobY = 0;
-      if (this._eyeBob) {
-        const t = clamp((now - this._eyeBob.start) / this._eyeBob.duration, 0, 1);
-        const cycles = 2;
-        emotionBobY = Math.sin(t * Math.PI * cycles * 2) * this._eyeBob.amp * (1 - 0.38*t);
-        if (t >= 1) this._eyeBob = null;
-      }
-
-      let surpriseScale = 1;
-      if (this._surpriseShake) {
-        const t = clamp((now - this._surpriseShake.start) / this._surpriseShake.duration, 0, 1);
-        surpriseScale = 1 + 0.022 * Math.sin(t * Math.PI * 8) * (1 - 0.18*t);
-        if (t >= 1) this._surpriseShake = null;
-      }
-
-      const blinkH = Math.max(2.6, p.h * this._blink * nodScaleY * surpriseScale);
-      const yAdjust = (p.h - blinkH) * 0.02;
-      const cursorPeriod = 530;
-      const inputBlinkOn = this._state==='input' ? ((Math.floor(now / (cursorPeriod/2)) % 2) === 0) : true;
-      const inputPulseL = this._state==='input' ? (inputBlinkOn ? 1 : 0) : 1;
-      const inputPulseR = inputPulseL;
-
-      const jellyEyeOffset = (cx, cy) => {
-        const j = this._dragJelly;
-        const amount = Math.hypot(j.pullX, j.pullY);
-        if (amount < 0.05) return {x:0, y:0};
-        const radius = (50 + amount * 0.8) * 0.92;
-        const dx = cx - j.hotX;
-        const dy = cy - j.hotY;
-        const w = Math.exp(-(dx*dx + dy*dy) / (2 * radius * radius)) * 0.24;
-        return {x: j.pullX * w, y: j.pullY * w};
-      };
-
-      const setEye = (base, inputBase, top, bottom, side, cx, microX, microY, opacity) => {
-        const isInput = this._state === 'input';
-        const projectedX = cx + this._look.x + microX;
-        const edgeDistance = side==='L' ? (projectedX - 32) : (208 - projectedX);
-        const edgeFactor = clamp(1 - edgeDistance / 58, 0, 1);
-        const baseW = p.w * surpriseScale;
-        const baseH = blinkH;
-        const w = baseW * (1 - 0.22 * edgeFactor * edgeFactor);
-        const h = baseH * (1 - 0.08 * edgeFactor * edgeFactor);
-        const inwardShift = ((baseW - w) * 0.58) * (side==='L' ? 1 : -1);
-
-        if (isInput) {
-          base.setAttribute('opacity', '0');
-          inputBase.setAttribute('x', (-p.w/2).toFixed(2));
-          inputBase.setAttribute('y', (-p.h/2 + yAdjust).toFixed(2));
-          inputBase.setAttribute('width', p.w.toFixed(2));
-          inputBase.setAttribute('height', p.h.toFixed(2));
-          inputBase.setAttribute('rx', '3');
-          inputBase.setAttribute('opacity', opacity.toFixed(3));
-        } else {
-          inputBase.setAttribute('opacity', '0');
-          base.setAttribute('cx', '0');
-          base.setAttribute('cy', yAdjust.toFixed(2));
-          base.setAttribute('rx', (w/2).toFixed(2));
-          base.setAttribute('ry', (h/2).toFixed(2));
-          base.setAttribute('opacity', opacity.toFixed(3));
-        }
-        const topY = p.topY;
-        const bottomY = p.bottomY;
-        const ta = side==='L' ? p.topAL : p.topAR;
-        const ba = side==='L' ? p.bottomAL : p.bottomAR;
-        top.setAttribute('y', (topY-90).toFixed(2));
-        top.setAttribute('height', '90');
-        top.setAttribute('transform', `rotate(${ta.toFixed(2)} 0 ${topY.toFixed(2)})`);
-        bottom.setAttribute('y', bottomY.toFixed(2));
-        bottom.setAttribute('height', '90');
-        bottom.setAttribute('transform', `rotate(${ba.toFixed(2)} 0 ${bottomY.toFixed(2)})`);
-        const jelly = jellyEyeOffset(cx, 126);
-        return `translate(${(cx + this._look.x + microX + jelly.x + (isInput ? 0 : inwardShift)).toFixed(2)} ${(126 + this._look.y + microY + jelly.y + nodY + angryDropY + emotionBobY).toFixed(2)})`;
-      };
-
-      const inputCenter = this._state==='input';
-      const surpriseSpread = this._state==='surprise' ? 3.4 * EASE.outQuint(clamp((p.w - 34) / (POSES.surprise.w - 34), 0, 1)) : 0;
-      const leftCX = inputCenter ? 120 : 86 - surpriseSpread;
-      const rightCX = inputCenter ? 120 : 154 + surpriseSpread;
-      this._leftEye.setAttribute('transform', setEye(this._leftBase,this._leftInputBase,this._leftTop,this._leftBottom,'L',leftCX,this._eyeMicro.lX,this._eyeMicro.lY,inputPulseL));
-      this._rightEye.setAttribute('transform', setEye(this._rightBase,this._rightInputBase,this._rightTop,this._rightBottom,'R',rightCX,this._eyeMicro.rX,this._eyeMicro.rY,inputPulseR));
-    }
-
-    _resumeFrames() {
-      if (!this.isConnected || document.hidden || this._raf) return;
-      this._running = true;
-      this._framePaused = false;
-      this._lastFrame = performance.now();
-      this._raf = requestAnimationFrame(this._loop);
-    }
-
-    _canPauseFrames(now) {
-      if (!this._sleeping || this._state !== 'sleep') return false;
-      if (now - this._morphStart < this._morphDuration) return false;
-      if (this._dragJelly.active || this._dragJelly.returning) return false;
-      if (this._waitingFx || this._inspectFx || this._failureFx || this._warningFx || this._systemErrorShake) return false;
-      const animations = this._headMotion?.getAnimations?.() || [];
-      return !animations.some(animation => animation.playState === 'running' || animation.playState === 'pending');
-    }
-
-    _loop = (ts=performance.now()) => {
-      if (!this._running || !this.isConnected) {
-        this._raf = 0;
-        return;
-      }
-      if (ts - this._lastFrame >= 33) {
-        const dt = Math.min(66, ts - (this._lastFrame || ts-33));
-        this._lastFrame = ts;
-        this._updateMorph(ts);
-        this._updateBlink(ts);
-        this._updateLook(ts, dt);
-        this._updateHeadFollow(ts, dt);
-        this._updateDragJelly(dt);
-        this._draw(ts);
-      }
-      if (this._canPauseFrames(ts)) {
-        this._framePaused = true;
-        this._raf = 0;
-        return;
-      }
-      this._raf = requestAnimationFrame(this._loop);
-    };
-  }
-
-  if (typeof customElements !== 'undefined' && !customElements.get('agent-robot-avatar')) {
-    customElements.define('agent-robot-avatar', AgentFace);
-  }
-  if (typeof window !== 'undefined') window.AgentRobotAvatar = AgentFace;
-  return AgentFace;
-})();
-
-export { AgentRobotAvatar };
-export default AgentRobotAvatar;
+const AgentRobotAvatar = (() => {
+  const HTMLElementBase = typeof HTMLElement === 'undefined' ? class {} : HTMLElement;
+  const EASE = {
+    outQuint: t => 1 - Math.pow(1 - t, 5),
+    inOutCubic: t => t < 0.5 ? 4*t*t*t : 1 - Math.pow(-2*t + 2, 3)/2,
+  };
+
+  const POSES = {
+    idle: {
+      w: 54, h: 58, rx: 27,
+      topY: -36, bottomY: 36,
+      topAL: 0, topAR: 0, bottomAL: 0, bottomAR: 0,
+      scale: 1,
+    },
+    happy: {
+      w: 58, h: 58, rx: 29,
+      topY: -36, bottomY: 0,
+      topAL: 0, topAR: 0, bottomAL: 0, bottomAR: 0,
+      scale: 1,
+    },
+    sad: {
+      w: 58, h: 58, rx: 29,
+      topY: -5, bottomY: 36,
+      topAL: -16, topAR: 16, bottomAL: 0, bottomAR: 0,
+      scale: 1,
+    },
+    angry: {
+      w: 58, h: 58, rx: 29,
+      topY: -5, bottomY: 36,
+      topAL: 16, topAR: -16, bottomAL: 0, bottomAR: 0,
+      scale: 1,
+    },
+    sleepy: {
+      w: 58, h: 56, rx: 28,
+      topY: 0, bottomY: 36,
+      topAL: 0, topAR: 0, bottomAL: 0, bottomAR: 0,
+      scale: 1,
+    },
+    input: {
+      w: 12, h: 78, rx: 2,
+      topY: -44, bottomY: 44,
+      topAL: 0, topAR: 0, bottomAL: 0, bottomAR: 0,
+      scale: 1,
+    },
+    sleep: {
+      w: 62, h: 10, rx: 2,
+      topY: -20, bottomY: 20,
+      topAL: 0, topAR: 0, bottomAL: 0, bottomAR: 0,
+      scale: 1,
+    },
+    surprise: {
+      w: 68, h: 68, rx: 34,
+      topY: -40, bottomY: 40,
+      topAL: 0, topAR: 0, bottomAL: 0, bottomAR: 0,
+      scale: 1,
+    },
+  };
+
+  const clamp = (v, a, b) => Math.max(a, Math.min(b, v));
+  const lerp = (a, b, t) => a + (b - a) * t;
+  const clonePose = p => ({...p});
+  const DEFAULT_SIZE = 112;
+  const parseSize = value => {
+    const text = String(value ?? '').trim();
+    if (!/^(?:\d+(?:\.\d+)?|\.\d+)(?:px)?$/i.test(text)) return DEFAULT_SIZE;
+    const numeric = Number.parseFloat(text);
+    return Number.isFinite(numeric) && numeric > 0 ? numeric : DEFAULT_SIZE;
+  };
+  const connectedFaces = new Set();
+
+  const forEachConnectedFace = callback => {
+    for (const face of connectedFaces) {
+      if (face.isConnected) callback(face);
+    }
+  };
+
+  const handleGlobalPointerMove = event => {
+    forEachConnectedFace(face => {
+      face._onPointerMove(event);
+      if (face._dragJelly.active || face._gestureFx?.held) face._onDragMove(event);
+    });
+  };
+  const handleGlobalPointerDown = event => forEachConnectedFace(face => {
+    if (typeof face._noteEnvironmentActivity === 'function') face._noteEnvironmentActivity(event);
+    else face.noteActivity();
+  });
+  const handleGlobalKeyDown = event => forEachConnectedFace(face => {
+    if (typeof face._noteEnvironmentActivity === 'function') face._noteEnvironmentActivity(event);
+    else face.noteActivity();
+  });
+  const handleGlobalPointerEnd = event => {
+    forEachConnectedFace(face => {
+      if (face._dragJelly.active || face._gestureFx?.held) face._onDragEnd(event);
+    });
+  };
+  const handleGlobalVisibility = () => forEachConnectedFace(face => face._onVisibility());
+
+  function registerConnectedFace(face) {
+    if (connectedFaces.has(face)) return;
+    const first = connectedFaces.size === 0;
+    connectedFaces.add(face);
+    if (!first) return;
+
+    window.addEventListener('pointermove', handleGlobalPointerMove, {passive:true});
+    window.addEventListener('pointerdown', handleGlobalPointerDown, {passive:true});
+    window.addEventListener('keydown', handleGlobalKeyDown, {passive:true});
+    window.addEventListener('pointerup', handleGlobalPointerEnd, {passive:true});
+    window.addEventListener('pointercancel', handleGlobalPointerEnd, {passive:true});
+    document.addEventListener('visibilitychange', handleGlobalVisibility);
+  }
+
+  function unregisterConnectedFace(face) {
+    connectedFaces.delete(face);
+    if (connectedFaces.size > 0) return;
+
+    window.removeEventListener('pointermove', handleGlobalPointerMove);
+    window.removeEventListener('pointerdown', handleGlobalPointerDown);
+    window.removeEventListener('keydown', handleGlobalKeyDown);
+    window.removeEventListener('pointerup', handleGlobalPointerEnd);
+    window.removeEventListener('pointercancel', handleGlobalPointerEnd);
+    document.removeEventListener('visibilitychange', handleGlobalVisibility);
+  }
+
+  class AgentFace extends HTMLElementBase {
+    constructor() {
+      super();
+      this.attachShadow({mode: 'open'});
+      this._state = 'idle';
+      this._pose = clonePose(POSES.idle);
+      this._fromPose = clonePose(this._pose);
+      this._toPose = clonePose(this._pose);
+      this._morphStart = performance.now();
+      this._morphDuration = 0;
+      this._morphEase = EASE.outQuint;
+
+      this._wander = {x:0, y:0};
+      this._wanderTarget = {x:0, y:0};
+      this._nextWanderAt = performance.now() + 500;
+      this._pointer = {x:0, y:0, active:false, lastMove:0};
+      this._look = {x:0, y:0};
+      this._headFollowPose = {x:0,y:0,rot:0};
+      this._headFollowVel = {x:0,y:0,rot:0};
+      this._headCenteringUntil = 0;
+      this._eyeMicro = {lX:0,lY:0,rX:0,rY:0};
+      this._blink = 1;
+      this._blinkAnim = null;
+      this._nextBlinkAt = performance.now() + 1800 + Math.random()*1800;
+      this._inputPhase = 0;
+      this._eyeNod = null;
+      this._eyeBob = null;
+      this._angryEyeDrop = null;
+      this._surpriseShake = null;
+      this._expressionLock = false;
+      this._transitionToken = 0;
+      this._inputWanted = false;
+      this._sleeping = false;
+      this._idleTimer = null;
+      this._pendingWaits = new Map();
+      this._boredRoutine = null;
+      this._boredLookSpeed = null;
+      this._autoSleepMs = Number(this.getAttribute('auto-sleep')) || 0;
+      this._lastActivity = performance.now();
+      this._running = true;
+      this._framePaused = false;
+      this._lastFrame = 0;
+      this._raf = 0;
+      this._dragJelly = {
+        active:false, returning:false, snapped:false, moved:false, pointerId:null,
+        startX:0, startY:0, hotX:120, hotY:120, targetX:0, targetY:0, x:0, y:0, vx:0, vy:0,
+        targetStretch:0, stretch:0, stretchVel:0, angle:0, threshold:52,
+        ux:0, uy:0, anchorX:50, anchorY:50, shear:0, targetShear:0, shearVel:0,
+        targetPullX:0, targetPullY:0, pullX:0, pullY:0, pullVX:0, pullVY:0,
+        maxDist:0, angryThreshold:32, pendingReaction:null, intent:'angry'
+      };
+      this._suppressClick = false;
+      this._boundDragStart = e => this._onDragStart(e);
+      this._boundClickCapture = e => this._onClickCapture(e);
+      this._renderShell();
+    }
+
+    connectedCallback() {
+      registerConnectedFace(this);
+      this.addEventListener('pointerdown', this._boundDragStart);
+      this.addEventListener('click', this._boundClickCapture, true);
+      this._running = !document.hidden;
+      this._lastActivity = performance.now();
+      this._resumeFrames();
+    }
+
+    disconnectedCallback() {
+      // This callback is captured when the custom element is defined, so the
+      // runtime teardown must be entered from the registered core lifecycle.
+      this._runtimeDisconnecting = true;
+      try {
+        unregisterConnectedFace(this);
+        this.removeEventListener('pointerdown', this._boundDragStart);
+        this.removeEventListener('click', this._boundClickCapture, true);
+        // Removal cancels work; reattachment starts idle with appearance settings intact.
+        this._resetToIdle(false);
+        this._blinkAnim = null;
+        this._blink = 1;
+        this._pointer.active = false;
+        this._pointer.influence = 0;
+        const drag = this._dragJelly;
+        if (drag.pointerId != null) {
+          try { this.releasePointerCapture(drag.pointerId); } catch (_) {}
+        }
+        drag.active = false;
+        drag.pointerId = null;
+        this._finishDragReturn(null);
+        this._suppressClick = false;
+        this._running = false;
+        cancelAnimationFrame(this._raf);
+        this._raf = 0;
+      } finally {
+        this._teardownRuntime?.();
+        this._runtimeDisconnecting = false;
+      }
+    }
+
+    static get observedAttributes() { return ['color','size','auto-sleep']; }
+    attributeChangedCallback(name, oldV, newV) {
+      if (oldV === newV) return;
+      if (name === 'color') this._applyColor(newV);
+      if (name === 'size') this._syncSizeAttribute();
+      if (name === 'auto-sleep') {
+        this._autoSleepMs = Number(newV) || 0;
+        this._scheduleAutoSleep?.();
+      }
+    }
+
+    _syncSizeAttribute() {
+      if (!this.hasAttribute('size')) {
+        this.style.removeProperty('--face-size');
+        return DEFAULT_SIZE;
+      }
+      const size = parseSize(this.getAttribute('size'));
+      this.style.setProperty('--face-size', `${size}px`);
+      return size;
+    }
+
+    _applyColor(value) {
+      const color = value || '#08090b';
+      for (const part of [this._head, this._leftTop, this._rightTop, this._leftBottom, this._rightBottom, this._antennaDot]) {
+        if (part) part.setAttribute('fill', color);
+      }
+    }
+
+    _renderShell() {
+      this.shadowRoot.innerHTML = `
+        <style>
+          :host{display:inline-block;width:var(--face-size,112px);height:var(--face-size,112px);contain:layout style;overflow:visible;cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:manipulation}
+          svg{display:block;width:100%;height:100%;overflow:visible}
+          #dragMotion{transform-box:view-box;transform-origin:120px 120px;will-change:transform}
+          #headFollow{will-change:transform}
+          #headMotion{transform-origin:120px 120px;will-change:transform}
+          #inputL,#inputR{opacity:1}
+        </style>
+        <svg viewBox="0 0 240 240" role="img" aria-label="Agent robot avatar">
+          <defs>
+            <path id="headShape" d="M 120.00 20.00 L 132.80 20.05 L 139.87 20.20 L 145.68 20.44 L 150.79 20.78 L 155.43 21.22 L 159.71 21.76 L 163.69 22.40 L 167.44 23.14 L 170.99 23.97 L 174.34 24.90 L 177.53 25.93 L 180.57 27.07 L 183.46 28.30 L 186.22 29.63 L 188.85 31.06 L 191.36 32.59 L 193.75 34.22 L 196.03 35.96 L 198.19 37.80 L 200.25 39.75 L 202.20 41.81 L 204.04 43.97 L 205.78 46.25 L 207.41 48.64 L 208.94 51.15 L 210.37 53.78 L 211.70 56.54 L 212.93 59.43 L 214.07 62.47 L 215.10 65.66 L 216.03 69.01 L 216.86 72.56 L 217.60 76.31 L 218.24 80.29 L 218.78 84.57 L 219.22 89.21 L 219.56 94.32 L 219.80 100.13 L 219.95 107.20 L 220.00 120.00 L 219.95 132.80 L 219.80 139.87 L 219.56 145.68 L 219.22 150.79 L 218.78 155.43 L 218.24 159.71 L 217.60 163.69 L 216.86 167.44 L 216.03 170.99 L 215.10 174.34 L 214.07 177.53 L 212.93 180.57 L 211.70 183.46 L 210.37 186.22 L 208.94 188.85 L 207.41 191.36 L 205.78 193.75 L 204.04 196.03 L 202.20 198.19 L 200.25 200.25 L 198.19 202.20 L 196.03 204.04 L 193.75 205.78 L 191.36 207.41 L 188.85 208.94 L 186.22 210.37 L 183.46 211.70 L 180.57 212.93 L 177.53 214.07 L 174.34 215.10 L 170.99 216.03 L 167.44 216.86 L 163.69 217.60 L 159.71 218.24 L 155.43 218.78 L 150.79 219.22 L 145.68 219.56 L 139.87 219.80 L 132.80 219.95 L 120.00 220.00 L 107.20 219.95 L 100.13 219.80 L 94.32 219.56 L 89.21 219.22 L 84.57 218.78 L 80.29 218.24 L 76.31 217.60 L 72.56 216.86 L 69.01 216.03 L 65.66 215.10 L 62.47 214.07 L 59.43 212.93 L 56.54 211.70 L 53.78 210.37 L 51.15 208.94 L 48.64 207.41 L 46.25 205.78 L 43.97 204.04 L 41.81 202.20 L 39.75 200.25 L 37.80 198.19 L 35.96 196.03 L 34.22 193.75 L 32.59 191.36 L 31.06 188.85 L 29.63 186.22 L 28.30 183.46 L 27.07 180.57 L 25.93 177.53 L 24.90 174.34 L 23.97 170.99 L 23.14 167.44 L 22.40 163.69 L 21.76 159.71 L 21.22 155.43 L 20.78 150.79 L 20.44 145.68 L 20.20 139.87 L 20.05 132.80 L 20.00 120.00 L 20.05 107.20 L 20.20 100.13 L 20.44 94.32 L 20.78 89.21 L 21.22 84.57 L 21.76 80.29 L 22.40 76.31 L 23.14 72.56 L 23.97 69.01 L 24.90 65.66 L 25.93 62.47 L 27.07 59.43 L 28.30 56.54 L 29.63 53.78 L 31.06 51.15 L 32.59 48.64 L 34.22 46.25 L 35.96 43.97 L 37.80 41.81 L 39.75 39.75 L 41.81 37.80 L 43.97 35.96 L 46.25 34.22 L 48.64 32.59 L 51.15 31.06 L 53.78 29.63 L 56.54 28.30 L 59.43 27.07 L 62.47 25.93 L 65.66 24.90 L 69.01 23.97 L 72.56 23.14 L 76.31 22.40 L 80.29 21.76 L 84.57 21.22 L 89.21 20.78 L 94.32 20.44 L 100.13 20.20 L 107.20 20.05 Z"/>
+            <clipPath id="headClip"><use href="#headShape" transform="translate(7.2 7.2) scale(.94)"/></clipPath>
+            <clipPath id="eyeMaskClip" clipPathUnits="userSpaceOnUse"><rect x="-40" y="-54" width="80" height="108"/></clipPath>
+          </defs>
+          <g id="dragMotion">
+            <g id="headFollow">
+              <g id="headMotion">
+              <use id="head" href="#headShape" fill="#08090b" transform="translate(7.2 7.2) scale(.94)"/>
+              <g clip-path="url(#headClip)">
+                <g id="leftEye" transform="translate(86 126)">
+                  <ellipse id="leftBase" cx="0" cy="0" rx="27" ry="29" fill="#fff"/>
+                  <rect id="leftInputBase" x="-6" y="-39" width="12" height="78" rx="3" fill="#fff" opacity="0"/>
+                  <g clip-path="url(#eyeMaskClip)">
+                    <rect id="leftTop" x="-70" y="-96" width="140" height="60" fill="#08090b"/>
+                    <rect id="leftBottom" x="-70" y="36" width="140" height="60" fill="#08090b"/>
+                  </g>
+                </g>
+                <g id="rightEye" transform="translate(154 126)">
+                  <ellipse id="rightBase" cx="0" cy="0" rx="27" ry="29" fill="#fff"/>
+                  <rect id="rightInputBase" x="-6" y="-39" width="12" height="78" rx="3" fill="#fff" opacity="0"/>
+                  <g clip-path="url(#eyeMaskClip)">
+                    <rect id="rightTop" x="-70" y="-96" width="140" height="60" fill="#08090b"/>
+                    <rect id="rightBottom" x="-70" y="36" width="140" height="60" fill="#08090b"/>
+                  </g>
+                </g>
+              </g>
+            </g>
+          </g>
+        </g>
+        </svg>`;
+      this._headShape = this.shadowRoot.getElementById('headShape');
+      this._dragMotion = this.shadowRoot.getElementById('dragMotion');
+      this._headFollow = this.shadowRoot.getElementById('headFollow');
+      this._headMotion = this.shadowRoot.getElementById('headMotion');
+      this._head = this.shadowRoot.getElementById('head');
+      this._leftEye = this.shadowRoot.getElementById('leftEye');
+      this._rightEye = this.shadowRoot.getElementById('rightEye');
+      this._leftBase = this.shadowRoot.getElementById('leftBase');
+      this._rightBase = this.shadowRoot.getElementById('rightBase');
+      this._leftInputBase = this.shadowRoot.getElementById('leftInputBase');
+      this._rightInputBase = this.shadowRoot.getElementById('rightInputBase');
+      this._leftTop = this.shadowRoot.getElementById('leftTop');
+      this._rightTop = this.shadowRoot.getElementById('rightTop');
+      this._leftBottom = this.shadowRoot.getElementById('leftBottom');
+      this._rightBottom = this.shadowRoot.getElementById('rightBottom');
+      this._applyColor(this.getAttribute('color'));
+      this._baseHeadPathD = this._headShape.getAttribute('d');
+      this._baseHeadPoints = this._parseHeadPoints(this._baseHeadPathD);
+    }
+
+    _parseHeadPoints(d) {
+      const nums = (d.match(/-?\d*\.?\d+/g) || []).map(Number);
+      const pts = [];
+      for (let i = 0; i < nums.length - 1; i += 2) pts.push({x: nums[i], y: nums[i+1]});
+      return pts;
+    }
+
+    _pointsToPath(points) {
+      if (!points.length) return this._baseHeadPathD || '';
+      let d = `M ${points[0].x.toFixed(2)} ${points[0].y.toFixed(2)}`;
+      for (let i = 1; i < points.length; i++) d += ` L ${points[i].x.toFixed(2)} ${points[i].y.toFixed(2)}`;
+      return `${d} Z`;
+    }
+
+    _clientToLocal(clientX, clientY) {
+      const r = this.getBoundingClientRect();
+      return {
+        x: clamp(((clientX - r.left) / Math.max(1, r.width)) * 240, 0, 240),
+        y: clamp(((clientY - r.top) / Math.max(1, r.height)) * 240, 0, 240),
+      };
+    }
+
+    _applyHeadDeform() {
+      const j = this._dragJelly;
+      if (!this._headShape || !this._baseHeadPoints?.length) return;
+      const amount = Math.hypot(j.pullX, j.pullY);
+      if (amount < 0.015) {
+        this._headShape.setAttribute('d', this._baseHeadPathD);
+        return;
+      }
+      const radius = (50 + amount * 0.8) * 0.92;
+      const pts = this._baseHeadPoints.map(p => {
+        const dx = p.x - j.hotX;
+        const dy = p.y - j.hotY;
+        const w = Math.exp(-(dx*dx + dy*dy) / (2 * radius * radius));
+        return {x:p.x + j.pullX * w, y:p.y + j.pullY * w};
+      });
+      this._headShape.setAttribute('d', this._pointsToPath(pts));
+    }
+
+    _onVisibility() {
+      this._running = !document.hidden;
+      if (this._running) this._resumeFrames();
+      else {
+        this._cancelGesture?.();
+        cancelAnimationFrame(this._raf);
+        this._raf = 0;
+      }
+    }
+
+    _onClickCapture(e) {
+      if (!this._suppressClick) return;
+      e.preventDefault();
+      e.stopImmediatePropagation();
+      this._suppressClick = false;
+    }
+
+    _onPointerMove(e) {
+      const r = this.getBoundingClientRect();
+      const cx = r.left + r.width / 2;
+      const cy = r.top + r.height / 2;
+      const dx = e.clientX - cx;
+      const dy = e.clientY - cy;
+      const near = Math.max(r.width, r.height) * 2.55;
+      const dist = Math.hypot(dx, dy);
+      const influence = clamp(1 - dist / near, 0, 1);
+      this._pointer.x = clamp(dx * .42, -48, 48);
+      this._pointer.y = clamp(dy * .38, -34, 34);
+      this._pointer.active = influence > 0.001;
+      this._pointer.influence = influence;
+      this._pointer.lastMove = performance.now();
+      if ((this._pointer.influence||0) > 0.65 && this._boredRoutine) { this._boredRoutine = null; this._boredLookSpeed = null; }
+    }
+
+    _onDragStart(e) {
+      if (e.button != null && e.button !== 0) return;
+      const r = this.getBoundingClientRect();
+      const j = this._dragJelly;
+      j.active = true;
+      j.returning = false;
+      j.snapped = false;
+      j.moved = false;
+      j.pointerId = e.pointerId;
+      j.startX = e.clientX;
+      j.startY = e.clientY;
+      const local = this._clientToLocal(e.clientX, e.clientY);
+      j.hotX = local.x;
+      j.hotY = local.y;
+      j.targetX = j.x;
+      j.targetY = j.y;
+      j.targetStretch = j.stretch;
+      j.targetShear = j.shear;
+      j.targetPullX = j.pullX;
+      j.targetPullY = j.pullY;
+      j.threshold = clamp(r.width * 0.40, 24, 46);
+      j.maxDist = 0;
+      j.pendingReaction = null;
+      j.intent = 'angry';
+      j.angryThreshold = Math.max(j.threshold * 0.76, 22);
+      this._suppressClick = false;
+      this._boredRoutine = null;
+      this._boredLookSpeed = null;
+      this._wanderTarget.x = this._wanderTarget.y = 0;
+      try { this.setPointerCapture(e.pointerId); } catch (_) {}
+    }
+
+    _onDragMove(e) {
+      const j = this._dragJelly;
+      if (!j.active || e.pointerId !== j.pointerId) return;
+      const dx = e.clientX - j.startX;
+      const dy = e.clientY - j.startY;
+      const dist = Math.hypot(dx, dy);
+      j.maxDist = Math.max(j.maxDist, dist);
+      if (dist > 2.5) {
+        j.moved = true;
+        this._suppressClick = true;
+      }
+      const r = this.getBoundingClientRect();
+      const size = Math.max(1, Math.max(r.width, r.height));
+      const localScale = 240 / size;
+      const pdx = dx * localScale;
+      const pdy = dy * localScale;
+      const cx = 120, cy = 120;
+      const rx = j.hotX - cx;
+      const ry = j.hotY - cy;
+      const rl = Math.max(1, Math.hypot(rx, ry));
+      const rux = rx / rl;
+      const ruy = ry / rl;
+      const radial = pdx * rux + pdy * ruy;
+      const tangent = -pdx * ruy + pdy * rux;
+      const motionLen = Math.max(1, Math.hypot(pdx, pdy));
+      j.ux = pdx / motionLen;
+      j.uy = pdy / motionLen;
+      j.angle = Math.atan2(j.uy, j.ux);
+      j.intent = radial < -6 ? 'success' : 'angry';
+      const gain = dist > j.threshold * .60 ? 0.24 : 0.19;
+      j.targetPullX = clamp(pdx * gain, -25, 25);
+      j.targetPullY = clamp(pdy * gain, -25, 25);
+      j.targetX = clamp(dx * 0.065, -5.2, 5.2);
+      j.targetY = clamp(dy * 0.065, -5.2, 5.2);
+      j.targetStretch = clamp((radial / 240) * .08, -.028, .052);
+      j.targetShear = clamp((tangent / 240) * .050, -.022, .022);
+      j.anchorX = clamp(50 - (rux * 31), 15, 85);
+      j.anchorY = clamp(50 - (ruy * 31), 15, 85);
+    }
+
+    _onDragEnd(e) {
+      const j = this._dragJelly;
+      if (!j.active || e.pointerId !== j.pointerId) return;
+      j.active = false;
+      try { this.releasePointerCapture(e.pointerId); } catch (_) {}
+      j.pointerId = null;
+      const reactionThreshold = Math.max(j.angryThreshold, 22);
+      j.pendingReaction = j.maxDist >= reactionThreshold ? j.intent : null;
+      j.returning = true;
+      j.targetX = 0;
+      j.targetY = 0;
+      j.targetStretch = 0;
+      j.targetShear = 0;
+      j.targetPullX = 0;
+      j.targetPullY = 0;
+    }
+
+    _finishDragReturn(reaction) {
+      const j = this._dragJelly;
+      j.returning = false;
+      j.pendingReaction = null;
+      j.x = j.y = j.vx = j.vy = 0;
+      j.stretch = j.stretchVel = 0;
+      j.shear = j.shearVel = 0;
+      j.pullX = j.pullY = j.pullVX = j.pullVY = 0;
+      if (this._dragMotion) this._dragMotion.style.transform = '';
+      if (this._headShape) this._headShape.setAttribute('d', this._baseHeadPathD);
+      if (reaction === 'angry') this.angry({fromDrag:true});
+      else if (reaction === 'success') this.success({fromDrag:true});
+    }
+
+    _updateDragJelly(dt) {
+      const j = this._dragJelly;
+      const dtS = Math.min(dt, 34) / 1000;
+      if (j.active) {
+        const fast = Math.min(1, dt / 14);
+        const k = 0.36 + 0.30 * fast;
+        j.x = lerp(j.x, j.targetX, k);
+        j.y = lerp(j.y, j.targetY, k);
+        j.stretch = lerp(j.stretch, j.targetStretch, k*.85);
+        j.shear = lerp(j.shear, j.targetShear, k*.80);
+        j.pullX = lerp(j.pullX, j.targetPullX, k*.95);
+        j.pullY = lerp(j.pullY, j.targetPullY, k*.95);
+      } else if (j.returning) {
+        const kx = 135, dx = 8.2;
+        const ax = -j.x * kx - j.vx * dx;
+        const ay = -j.y * kx - j.vy * dx;
+        j.vx += ax * dtS;
+        j.vy += ay * dtS;
+        j.x += j.vx * dtS;
+        j.y += j.vy * dtS;
+        const ks = 128, ds = 7.5;
+        const as = -j.stretch * ks - j.stretchVel * ds;
+        j.stretchVel += as * dtS;
+        j.stretch += j.stretchVel * dtS;
+        const kh = 118, dh = 7.2;
+        const ah = -j.shear * kh - j.shearVel * dh;
+        j.shearVel += ah * dtS;
+        j.shear += j.shearVel * dtS;
+        const kp = 118, dp = 7.1;
+        const apx = -j.pullX * kp - j.pullVX * dp;
+        const apy = -j.pullY * kp - j.pullVY * dp;
+        j.pullVX += apx * dtS;
+        j.pullVY += apy * dtS;
+        j.pullX += j.pullVX * dtS;
+        j.pullY += j.pullVY * dtS;
+
+        const visuallyRecovered = Math.abs(j.x) < 0.34 && Math.abs(j.y) < 0.34 && Math.abs(j.stretch) < 0.008 && Math.abs(j.shear) < 0.0035 && Math.abs(j.pullX) < 0.40 && Math.abs(j.pullY) < 0.40;
+        if (j.pendingReaction && visuallyRecovered) {
+          this._finishDragReturn(j.pendingReaction);
+        } else if (Math.abs(j.x) < 0.02 && Math.abs(j.y) < 0.02 && Math.abs(j.vx) < 0.04 && Math.abs(j.vy) < 0.04 && Math.abs(j.stretch) < 0.001 && Math.abs(j.stretchVel) < 0.003 && Math.abs(j.shear) < 0.0005 && Math.abs(j.shearVel) < 0.002 && Math.abs(j.pullX) < 0.03 && Math.abs(j.pullY) < 0.03 && Math.abs(j.pullVX) < 0.06 && Math.abs(j.pullVY) < 0.06) {
+          this._finishDragReturn(null);
+        }
+      }
+      j.stretch = clamp(j.stretch, -0.035, 0.055);
+      j.shear = clamp(j.shear, -0.026, 0.026);
+      j.pullX = clamp(j.pullX, -26, 26);
+      j.pullY = clamp(j.pullY, -26, 26);
+      this._applyHeadDeform();
+      if (this._dragMotion) {
+        const sx = 1 + j.stretch;
+        const sy = 1 - j.stretch * 0.30;
+        const shearDeg = j.shear * 180 / Math.PI;
+        this._dragMotion.style.transformOrigin = `${j.anchorX.toFixed(2)}% ${j.anchorY.toFixed(2)}%`;
+        this._dragMotion.style.transform = `translate(${j.x.toFixed(2)}px, ${j.y.toFixed(2)}px) rotate(${j.angle.toFixed(4)}rad) scale(${sx.toFixed(4)}, ${sy.toFixed(4)}) skewY(${shearDeg.toFixed(3)}deg) rotate(${(-j.angle).toFixed(4)}rad)`;
+      }
+    }
+
+    noteActivity(wake=true) {
+      this._lastActivity = performance.now();
+      this._resumeFrames();
+      if (wake && this._sleeping) this.wake();
+    }
+
+    play(name) {
+      const action = String(name || '').trim().toLowerCase();
+      switch (action) {
+        case 'idle': return this.reset();
+        case 'bored': return this.bored();
+        case 'input': return this.input(true);
+        case 'send': return this.send();
+        case 'success': return this.success();
+        case 'error': return this.error();
+        case 'angry': return this.angry();
+        case 'surprise': return this.surprise();
+        case 'sleep': return this.sleep();
+        case 'wake': return this.wake();
+        default: throw new Error(`Unknown Agent Robot Avatar action: ${name}`);
+      }
+    }
+
+    reset() {
+      return this._resetToIdle();
+    }
+
+    _resetToIdle(notify = true) {
+      this._resetExtensionEffects?.();
+      this._inputWanted = false;
+      ++this._transitionToken;
+      this._cancelPendingWaits();
+      this._boredRoutine = null;
+      this._boredLookSpeed = null;
+      this._sleeping = false;
+      this._eyeNod = null;
+      this._eyeBob = null;
+      this._angryEyeDrop = null;
+      this._surpriseShake = null;
+      this.setState('idle', { notify, duration: notify ? 320 : 0 });
+      return this;
+    }
+
+    setState(name, opts={}) {
+      if (!POSES[name]) throw new Error(`Unknown AgentFace state: ${name}`);
+      this._resumeFrames();
+      this._state = name;
+      this._sleeping = name === 'sleep';
+      if (name === 'idle' && !opts.keepGazeLock) this._releaseExpressionLock();
+      this._startMorph(POSES[name], opts.duration ?? (name==='surprise'?170:320), opts.ease || EASE.outQuint);
+      if (opts.notify !== false) this.dispatchEvent(new CustomEvent('face-state', {detail:{state:name}}));
+      return this;
+    }
+
+    _startMorph(target, duration, ease) {
+      this._fromPose = clonePose(this._pose);
+      this._toPose = clonePose(target);
+      this._morphStart = performance.now();
+      this._morphDuration = Math.max(0, duration);
+      this._morphEase = ease;
+    }
+
+    async success(opts={}) {
+      const fromDrag = !!opts.fromDrag;
+      this.noteActivity();
+      this._inputWanted = false;
+      if (fromDrag) {
+        ++this._transitionToken;
+        this._expressionLock = true;
+        this._eyeMicro.lX = this._eyeMicro.lY = 0;
+        this._eyeMicro.rX = this._eyeMicro.rY = 0;
+        this._wanderTarget.x = this._wanderTarget.y = 0;
+        this._headCenteringUntil = performance.now() + 120;
+        this._look.x = 0;
+        this._look.y = 0;
+      } else {
+        if (!(await this._prepareExpression({normalizePose:true, duration:180, pause:320}))) return;
+      }
+      const token = this._transitionToken;
+      this.setState('happy', {duration: fromDrag ? 180 : 220, keepGazeLock:true});
+      this._eyeBob = {start: performance.now(), duration: 620, amp: 8};
+      this._animateHead([
+        {transform:'translateY(0px)'},
+        {transform:'translateY(-2.4px)', offset:.42},
+        {transform:'translateY(0px)'}
+      ], 760);
+      await this._wait(980);
+      if (token !== this._transitionToken) return;
+      this._eyeBob = null;
+      if (this._state==='happy') await this._returnToIdle(520);
+    }
+
+    async error() {
+      this.noteActivity();
+      this._inputWanted = false;
+      if (!(await this._prepareExpression({normalizePose:true, duration:180, pause:320}))) return;
+      const token = this._transitionToken;
+      this.setState('sad', {duration:320, keepGazeLock:true});
+      this._eyeBob = {start: performance.now(), duration: 700, amp: 7};
+      this._animateHead([
+        {transform:'translateY(0px)'},
+        {transform:'translateY(2.6px)', offset:.46},
+        {transform:'translateY(0px)'}
+      ], 820);
+      await this._wait(1180);
+      if (token !== this._transitionToken) return;
+      this._eyeBob = null;
+      if (this._state==='sad') {
+        await this._returnToIdle(560);
+      }
+    }
+
+    async angry(opts={}) {
+      const fromDrag = !!opts.fromDrag;
+      this.noteActivity();
+      this._inputWanted = false;
+      if (fromDrag) {
+        ++this._transitionToken;
+        this._expressionLock = true;
+        this._eyeMicro.lX = this._eyeMicro.lY = 0;
+        this._eyeMicro.rX = this._eyeMicro.rY = 0;
+        this._wanderTarget.x = this._wanderTarget.y = 0;
+        this._headCenteringUntil = performance.now() + 120;
+        this._look.x = 0;
+        this._look.y = 0;
+      } else {
+        if (!(await this._prepareExpression({normalizePose:true, duration:180, pause:320}))) return;
+      }
+      const token = this._transitionToken;
+      this.setState('angry', {duration: fromDrag ? 180 : 280, keepGazeLock:true});
+      this._angryEyeDrop = {start: performance.now(), duration:680, amount:4.8};
+      this._animateHead([
+        {transform:'translateY(0px)'},
+        {transform:'translateY(2.6px)', offset:.46},
+        {transform:'translateY(0px)'}
+      ], 820);
+      await this._wait(980);
+      if (token !== this._transitionToken) return;
+      this._angryEyeDrop = null;
+      if (this._state==='angry') await this._returnToIdle(500);
+    }
+
+    async surprise() {
+      this.noteActivity();
+      this._inputWanted = false;
+      if (!(await this._prepareExpression({normalizePose:true, duration:180, pause:320}))) return;
+      const token = this._transitionToken;
+      this._surpriseShake = null;
+      const pre = {...POSES.idle, w:34, h:36, rx:18};
+      this._startMorph(pre, 235, EASE.inOutCubic);
+      await this._wait(235);
+      if (token !== this._transitionToken || this._state!=='idle') return;
+      this.setState('surprise', {duration:175, ease:EASE.outQuint, keepGazeLock:true});
+      this._animateHead([{transform:'scale(1)'},{transform:'scale(1.035)'}], 175);
+      await this._wait(175);
+      if (token !== this._transitionToken || this._state!=='surprise') return;
+      this._surpriseShake = {start: performance.now(), duration:420};
+      await this._wait(420);
+      if (token !== this._transitionToken) return;
+      this._surpriseShake = null;
+      if (this._state==='surprise') {
+        this._animateHead([{transform:'scale(1.035)'},{transform:'scale(1)'}], 430);
+        await this._returnToIdle(430, EASE.inOutCubic);
+      }
+    }
+
+    async send() {
+      this.noteActivity();
+      this._inputWanted = false;
+      if (!(await this._prepareExpression({normalizePose:true, duration:180, pause:320}))) return;
+      const token = this._transitionToken;
+      this._eyeNod = {start: performance.now(), duration: 760};
+      this._animateHead([
+        {transform:'translateY(0px)'},
+        {transform:'translateY(5px)', offset:.52},
+        {transform:'translateY(0px)'}
+      ], 920);
+      await this._wait(860);
+      if (token !== this._transitionToken) return;
+      this._eyeNod = null;
+      this._releaseExpressionLock();
+    }
+
+    async sleep() {
+      if (this._sleeping) return;
+      if (!(await this._prepareExpression({normalizePose:true, duration:160}))) return;
+      const token = this._transitionToken;
+      this._blinkAnim = null;
+      this._blink = 1;
+      this._nextBlinkAt = performance.now() + 10000;
+      this.setState('sleepy', {duration:940, ease:EASE.inOutCubic, keepGazeLock:true});
+      await this._wait(980);
+      if (token !== this._transitionToken || this._state !== 'sleepy') return;
+      const reopen = {...POSES.idle, topY:-22, bottomY:36};
+      this._startMorph(reopen, 105, EASE.outQuint);
+      await this._wait(120);
+      if (token !== this._transitionToken || this._state !== 'sleepy') return;
+      this.setState('sleepy', {duration:820, ease:EASE.inOutCubic, keepGazeLock:true});
+      await this._wait(870);
+      if (token !== this._transitionToken || this._state !== 'sleepy') return;
+      await this._wait(120);
+      if (token !== this._transitionToken || this._state !== 'sleepy') return;
+      this._animateHead([{transform:'translateY(0)'},{transform:'translateY(4px)'}],980);
+      this._startMorph(POSES.sleep, 980, EASE.inOutCubic);
+      this._state = 'sleep';
+      this.dispatchEvent(new CustomEvent('face-state', {detail:{state:'sleep'}}));
+      this._sleeping = true;
+      this._nextBlinkAt = performance.now() + 3200 + Math.random()*2200;
+    }
+
+    async wake() {
+      if (!this._sleeping && this._state!=='sleep') return;
+      const token = ++this._transitionToken;
+      this._expressionLock = true;
+      this._sleeping = false;
+      this._animateHead([
+        {transform:'translateY(4px) scale(1)'},
+        {transform:'translateY(-2px) scale(1.015)', offset:.55},
+        {transform:'translateY(0) scale(1)'}
+      ], 500);
+      this.setState('sleepy', {duration:240, keepGazeLock:true});
+      await this._wait(260);
+      if (token !== this._transitionToken) return;
+      this.setState('surprise', {duration:120, keepGazeLock:true});
+      await this._wait(190);
+      if (token !== this._transitionToken) return;
+      await this._returnToIdle(300);
+      if (token !== this._transitionToken) return;
+      this._lastActivity = performance.now();
+    }
+
+    async input(active=true) {
+      this.noteActivity();
+      if (active) {
+        if (this._inputWanted || this._state==='input') return;
+        this._inputWanted = true;
+        if (!(await this._prepareExpression({normalizePose:true, duration:140}))) return;
+        if (!this._inputWanted) return;
+        this.setState('input', {duration:210, keepGazeLock:true});
+      } else {
+        this._inputWanted = false;
+        ++this._transitionToken;
+        if (this._state==='input') this.setState('idle', {duration:260});
+        else this._releaseExpressionLock();
+      }
+    }
+
+    _animateHead(frames, duration) {
+      if (!this._headMotion.animate) return;
+      const token = this._transitionToken;
+      const anim = this._headMotion.animate(frames, {duration, easing:'cubic-bezier(.16,1,.3,1)', fill:'forwards'});
+      anim.onfinish = () => {
+        if (token === this._transitionToken) {
+          this._headMotion.style.transform = frames[frames.length-1].transform || '';
+        }
+      };
+      return anim;
+    }
+
+    _wait(ms) {
+      return new Promise(resolve => {
+        const timer = setTimeout(() => {
+          this._pendingWaits.delete(timer);
+          resolve();
+        }, ms);
+        this._pendingWaits.set(timer, resolve);
+      });
+    }
+
+    _cancelPendingWaits() {
+      for (const [timer, resolve] of this._pendingWaits) {
+        clearTimeout(timer);
+        resolve();
+      }
+      this._pendingWaits.clear();
+    }
+
+    async _returnToIdle(duration=320, ease=EASE.outQuint) {
+      const token = this._transitionToken;
+      this.setState('idle', {duration, ease, keepGazeLock:true});
+      this._headCenteringUntil = Math.max(this._headCenteringUntil || 0, performance.now() + duration);
+      await this._wait(duration);
+      if (token === this._transitionToken && this._state === 'idle') this._releaseExpressionLock();
+    }
+
+    async _prepareExpression({normalizePose=true, duration=180, pause=320}={}) {
+      const token = ++this._transitionToken;
+      this._expressionLock = true;
+      this._eyeMicro.lX = this._eyeMicro.lY = 0;
+      this._eyeMicro.rX = this._eyeMicro.rY = 0;
+      this._wanderTarget.x = this._wanderTarget.y = 0;
+      this._headCenteringUntil = performance.now() + duration + pause;
+      if (normalizePose && this._state !== 'idle') {
+        this.setState('idle', {duration:Math.min(140, duration), keepGazeLock:true});
+      }
+      await this._wait(duration);
+      if (token !== this._transitionToken) return false;
+      if (pause > 0) await this._wait(pause);
+      return token === this._transitionToken;
+    }
+
+    async bored() {
+      this.noteActivity();
+      this._inputWanted = false;
+      this._sleeping = false;
+      if (!(await this._prepareExpression({normalizePose:true, duration:180, pause:620}))) return;
+      this._expressionLock = false;
+      this._look.x = 0;
+      this._look.y = 0;
+      this._wander.x = 0;
+      this._wander.y = 0;
+      this._startBoredRoutine(performance.now());
+    }
+
+    _startBoredRoutine(now) {
+      this._boredRoutine = {
+        index: 0,
+        nextAt: now,
+        steps: [
+          {x:-18,y:-11,hold:1400,lookSpeed:2},
+          {x:18,y:-11,hold:1400,lookSpeed:2},
+          {x:0,y:0,hold:320,lookSpeed:2},
+        ]
+      };
+    }
+
+    _updateBored(now) {
+      if (!this._boredRoutine) return false;
+      if (now < this._boredRoutine.nextAt) return true;
+      const step = this._boredRoutine.steps[this._boredRoutine.index];
+      if (!step) {
+        this._boredRoutine = null;
+        this._boredLookSpeed = null;
+        this._wanderTarget.x = this._wanderTarget.y = 0;
+        return false;
+      }
+      this._wanderTarget.x = step.x;
+      this._wanderTarget.y = step.y;
+      this._boredLookSpeed = step.lookSpeed ?? null;
+      this._boredRoutine.index += 1;
+      this._boredRoutine.nextAt = now + step.hold;
+      return true;
+    }
+
+    _releaseExpressionLock() {
+      this._expressionLock = false;
+      this._headCenteringUntil = 0;
+    }
+
+    _updateMorph(now) {
+      if (!this._morphDuration) {
+        this._pose = clonePose(this._toPose);
+        return;
+      }
+      const t = clamp((now - this._morphStart) / this._morphDuration, 0, 1);
+      const k = this._morphEase(t);
+      const p = {};
+      for (const key of Object.keys(this._toPose)) p[key] = lerp(this._fromPose[key], this._toPose[key], k);
+      this._pose = p;
+      if (t >= 1) this._morphDuration = 0;
+    }
+
+    _updateBlink(now) {
+      if (this._sleeping || this._state === 'input') return;
+      if (this._blinkAnim) {
+        const t = clamp((now - this._blinkAnim.start) / this._blinkAnim.duration, 0, 1);
+        this._blink = t < .5 ? lerp(1,.08,t*2) : lerp(.08,1,(t-.5)*2);
+        if (t >= 1) {
+          this._blinkAnim = null;
+          this._blink = 1;
+          this._nextBlinkAt = now + 1900 + Math.random()*2600;
+        }
+      } else if (!this._expressionLock && now >= this._nextBlinkAt) {
+        this._blinkAnim = {start:now,duration:150+Math.random()*70};
+      }
+    }
+
+    _updateLook(now, dt) {
+      this._updateBored(now);
+      const pointerFresh = (now - this._pointer.lastMove) < 900;
+      const antennaGaze = this._gestureFx?.kind === 'antenna-drag' && this._gestureFx.held;
+      const gazeLocked = this._expressionLock && !antennaGaze;
+      if (!this._expressionLock && !this._boredRoutine && !this._sleeping && this._state!=='input' && now >= this._nextWanderAt) {
+        const ampX = 12 + Math.random()*13;
+        const ampY = 5 + Math.random()*9;
+        this._wanderTarget.x = (Math.random()*2-1)*ampX;
+        this._wanderTarget.y = (Math.random()*2-1)*ampY;
+        this._nextWanderAt = now + 1150 + Math.random()*1900;
+      }
+      const draggingJelly = this._dragJelly.active || this._dragJelly.returning;
+      const pointerMix = (!gazeLocked && !this._boredRoutine && pointerFresh && this._pointer.active && !this._sleeping && this._state!=='input')
+        ? Math.pow(this._pointer.influence || 0, 1.6)
+        : 0;
+      const targetX = antennaGaze ? this._gestureFx.gazeX : (gazeLocked ? 0 : lerp(this._wanderTarget.x, this._pointer.x, pointerMix));
+      const targetY = antennaGaze ? this._gestureFx.gazeY : (gazeLocked ? 0 : lerp(this._wanderTarget.y, this._pointer.y, pointerMix));
+      const lookSpeed = antennaGaze ? 0.42 : (gazeLocked ? 0.40 : (draggingJelly ? 0.42 : (this._boredRoutine && this._boredLookSpeed != null ? this._boredLookSpeed : (pointerMix > 0.05 ? 0.28 : 0.16))));
+      const kL = 1 - Math.pow(1 - clamp(lookSpeed,0.02,.9), dt/16.67);
+      this._look.x = lerp(this._look.x, targetX, kL);
+      this._look.y = lerp(this._look.y, targetY, kL);
+      if (this._sleeping) {
+        this._look.x *= .92;
+        this._look.y *= .92;
+      }
+    }
+
+    _autoSleep(now) {
+      if (!this._autoSleepMs || this._sleeping || this._expressionLock || ['input','happy','sad','surprise'].includes(this._state)) return;
+      if (now - this._lastActivity > this._autoSleepMs) this.sleep();
+    }
+
+    _updateHeadFollow(now, dt) {
+      const pointerFresh = (now - this._pointer.lastMove) < 900;
+      const pointerInRange = pointerFresh && this._pointer.active && (this._pointer.influence || 0) > 0.03;
+      const headCentering = now < (this._headCenteringUntil || 0);
+      const jellyBusy = this._dragJelly.active || this._dragJelly.returning;
+      const canFollowPointer = pointerInRange && !jellyBusy && !this._sleeping && !this._boredRoutine && !headCentering && !this._expressionLock;
+      const srcX = canFollowPointer ? this._pointer.x : this._look.x;
+      const srcY = canFollowPointer ? this._pointer.y : this._look.y;
+      const nx = clamp(srcX / 48, -1, 1);
+      const ny = clamp(srcY / 34, -1, 1);
+      const diag = clamp(nx * ny, -1, 1);
+      const targetRot = diag * 8;
+      const targetX = canFollowPointer ? nx * 4.2 : 0;
+      const targetY = canFollowPointer ? ny * 4.2 : 0;
+
+      const dtS = Math.min(dt, 34) / 1000;
+      const rotStiffness = canFollowPointer ? 70 : 56;
+      const rotDamping = canFollowPointer ? 15 : 13;
+      const aRot = (targetRot - this._headFollowPose.rot) * rotStiffness - this._headFollowVel.rot * rotDamping;
+      this._headFollowVel.rot += aRot * dtS;
+      this._headFollowPose.rot += this._headFollowVel.rot * dtS;
+      const stiffness = canFollowPointer ? 95 : 80;
+      const damping = canFollowPointer ? 16 : 14;
+      const ax = (targetX - this._headFollowPose.x) * stiffness - this._headFollowVel.x * damping;
+      const ay = (targetY - this._headFollowPose.y) * stiffness - this._headFollowVel.y * damping;
+      this._headFollowVel.x += ax * dtS;
+      this._headFollowVel.y += ay * dtS;
+      this._headFollowPose.x += this._headFollowVel.x * dtS;
+      this._headFollowPose.y += this._headFollowVel.y * dtS;
+
+      if (!canFollowPointer) {
+        if (Math.abs(this._headFollowPose.x) < 0.01 && Math.abs(this._headFollowVel.x) < 0.01) { this._headFollowPose.x = 0; this._headFollowVel.x = 0; }
+        if (Math.abs(this._headFollowPose.y) < 0.01 && Math.abs(this._headFollowVel.y) < 0.01) { this._headFollowPose.y = 0; this._headFollowVel.y = 0; }
+        if (Math.abs(this._headFollowPose.rot) < 0.01 && Math.abs(this._headFollowVel.rot) < 0.01) { this._headFollowPose.rot = 0; this._headFollowVel.rot = 0; }
+      }
+
+      if (this._headFollow) {
+        const a = this._headFollowPose.rot.toFixed(2);
+        const tx = this._headFollowPose.x.toFixed(2);
+        const ty = this._headFollowPose.y.toFixed(2);
+        this._headFollow.setAttribute('transform', `translate(${tx} ${ty}) translate(120 120) rotate(${a}) translate(-120 -120)`);
+      }
+    }
+
+    _draw(now) {
+      const p = this._pose;
+      let nodY = 0;
+      let nodScaleY = 1;
+      if (this._eyeNod) {
+        const elapsed = now - this._eyeNod.start;
+        let depth = 0;
+        if (elapsed < 150) depth = elapsed / 150;
+        else if (elapsed < 300) depth = 1 - (elapsed - 150) / 150;
+        else if (elapsed < 450) depth = (elapsed - 300) / 150;
+        else if (elapsed < 760) depth = 1 - (elapsed - 450) / 310;
+        else { depth = 0; this._eyeNod = null; }
+        depth = clamp(depth, 0, 1);
+        nodY = 31 * depth;
+        nodScaleY = 1 - .30 * depth;
+      }
+
+      let angryDropY = 0;
+      if (this._angryEyeDrop) {
+        const t = clamp((now - this._angryEyeDrop.start) / this._angryEyeDrop.duration, 0, 1);
+        const settle = 1 - Math.exp(-5.2 * t) * Math.cos(8.6 * t);
+        angryDropY = this._angryEyeDrop.amount * settle;
+        if (t >= 1) angryDropY = this._angryEyeDrop.amount;
+      }
+
+      let emotionBobY = 0;
+      if (this._eyeBob) {
+        const t = clamp((now - this._eyeBob.start) / this._eyeBob.duration, 0, 1);
+        const cycles = 2;
+        emotionBobY = Math.sin(t * Math.PI * cycles * 2) * this._eyeBob.amp * (1 - 0.38*t);
+        if (t >= 1) this._eyeBob = null;
+      }
+
+      let surpriseScale = 1;
+      if (this._surpriseShake) {
+        const t = clamp((now - this._surpriseShake.start) / this._surpriseShake.duration, 0, 1);
+        surpriseScale = 1 + 0.022 * Math.sin(t * Math.PI * 8) * (1 - 0.18*t);
+        if (t >= 1) this._surpriseShake = null;
+      }
+
+      const blinkH = Math.max(2.6, p.h * this._blink * nodScaleY * surpriseScale);
+      const yAdjust = (p.h - blinkH) * 0.02;
+      const cursorPeriod = 530;
+      const inputBlinkOn = this._state==='input' ? ((Math.floor(now / (cursorPeriod/2)) % 2) === 0) : true;
+      const inputPulseL = this._state==='input' ? (inputBlinkOn ? 1 : 0) : 1;
+      const inputPulseR = inputPulseL;
+
+      const jellyEyeOffset = (cx, cy) => {
+        const j = this._dragJelly;
+        const amount = Math.hypot(j.pullX, j.pullY);
+        if (amount < 0.05) return {x:0, y:0};
+        const radius = (50 + amount * 0.8) * 0.92;
+        const dx = cx - j.hotX;
+        const dy = cy - j.hotY;
+        const w = Math.exp(-(dx*dx + dy*dy) / (2 * radius * radius)) * 0.24;
+        return {x: j.pullX * w, y: j.pullY * w};
+      };
+
+      const setEye = (base, inputBase, top, bottom, side, cx, microX, microY, opacity) => {
+        const isInput = this._state === 'input';
+        const projectedX = cx + this._look.x + microX;
+        const edgeDistance = side==='L' ? (projectedX - 32) : (208 - projectedX);
+        const edgeFactor = clamp(1 - edgeDistance / 58, 0, 1);
+        const baseW = p.w * surpriseScale;
+        const baseH = blinkH;
+        const w = baseW * (1 - 0.22 * edgeFactor * edgeFactor);
+        const h = baseH * (1 - 0.08 * edgeFactor * edgeFactor);
+        const inwardShift = ((baseW - w) * 0.58) * (side==='L' ? 1 : -1);
+
+        if (isInput) {
+          base.setAttribute('opacity', '0');
+          inputBase.setAttribute('x', (-p.w/2).toFixed(2));
+          inputBase.setAttribute('y', (-p.h/2 + yAdjust).toFixed(2));
+          inputBase.setAttribute('width', p.w.toFixed(2));
+          inputBase.setAttribute('height', p.h.toFixed(2));
+          inputBase.setAttribute('rx', '3');
+          inputBase.setAttribute('opacity', opacity.toFixed(3));
+        } else {
+          inputBase.setAttribute('opacity', '0');
+          base.setAttribute('cx', '0');
+          base.setAttribute('cy', yAdjust.toFixed(2));
+          base.setAttribute('rx', (w/2).toFixed(2));
+          base.setAttribute('ry', (h/2).toFixed(2));
+          base.setAttribute('opacity', opacity.toFixed(3));
+        }
+        const topY = p.topY;
+        const bottomY = p.bottomY;
+        const ta = side==='L' ? p.topAL : p.topAR;
+        const ba = side==='L' ? p.bottomAL : p.bottomAR;
+        top.setAttribute('y', (topY-90).toFixed(2));
+        top.setAttribute('height', '90');
+        top.setAttribute('transform', `rotate(${ta.toFixed(2)} 0 ${topY.toFixed(2)})`);
+        bottom.setAttribute('y', bottomY.toFixed(2));
+        bottom.setAttribute('height', '90');
+        bottom.setAttribute('transform', `rotate(${ba.toFixed(2)} 0 ${bottomY.toFixed(2)})`);
+        const jelly = jellyEyeOffset(cx, 126);
+        return `translate(${(cx + this._look.x + microX + jelly.x + (isInput ? 0 : inwardShift)).toFixed(2)} ${(126 + this._look.y + microY + jelly.y + nodY + angryDropY + emotionBobY).toFixed(2)})`;
+      };
+
+      const inputCenter = this._state==='input';
+      const surpriseSpread = this._state==='surprise' ? 3.4 * EASE.outQuint(clamp((p.w - 34) / (POSES.surprise.w - 34), 0, 1)) : 0;
+      const leftCX = inputCenter ? 120 : 86 - surpriseSpread;
+      const rightCX = inputCenter ? 120 : 154 + surpriseSpread;
+      this._leftEye.setAttribute('transform', setEye(this._leftBase,this._leftInputBase,this._leftTop,this._leftBottom,'L',leftCX,this._eyeMicro.lX,this._eyeMicro.lY,inputPulseL));
+      this._rightEye.setAttribute('transform', setEye(this._rightBase,this._rightInputBase,this._rightTop,this._rightBottom,'R',rightCX,this._eyeMicro.rX,this._eyeMicro.rY,inputPulseR));
+    }
+
+    _resumeFrames() {
+      if (!this.isConnected || document.hidden || this._raf) return;
+      this._running = true;
+      this._framePaused = false;
+      this._lastFrame = performance.now();
+      this._raf = requestAnimationFrame(this._loop);
+    }
+
+    _canPauseFrames(now) {
+      if (!this._sleeping || this._state !== 'sleep') return false;
+      if (now - this._morphStart < this._morphDuration) return false;
+      if (this._dragJelly.active || this._dragJelly.returning) return false;
+      if (this._waitingFx || this._inspectFx || this._failureFx || this._warningFx || this._systemErrorShake) return false;
+      const animations = this._headMotion?.getAnimations?.() || [];
+      return !animations.some(animation => animation.playState === 'running' || animation.playState === 'pending');
+    }
+
+    _loop = (ts=performance.now()) => {
+      if (!this._running || !this.isConnected) {
+        this._raf = 0;
+        return;
+      }
+      if (ts - this._lastFrame >= 33) {
+        const dt = Math.min(66, ts - (this._lastFrame || ts-33));
+        this._lastFrame = ts;
+        this._updateMorph(ts);
+        this._updateBlink(ts);
+        this._updateLook(ts, dt);
+        this._updateHeadFollow(ts, dt);
+        this._updateDragJelly(dt);
+        this._draw(ts);
+      }
+      if (this._canPauseFrames(ts)) {
+        this._framePaused = true;
+        this._raf = 0;
+        return;
+      }
+      this._raf = requestAnimationFrame(this._loop);
+    };
+  }
+
+  if (typeof customElements !== 'undefined' && !customElements.get('agent-robot-avatar')) {
+    customElements.define('agent-robot-avatar', AgentFace);
+  }
+  if (typeof window !== 'undefined') window.AgentRobotAvatar = AgentFace;
+  return AgentFace;
+})();
+
+export { AgentRobotAvatar };
+export default AgentRobotAvatar;