diff --git a/app/scripts/CatLab/Easelbone/EaselJS/Pinner.js b/app/scripts/CatLab/Easelbone/EaselJS/Pinner.js
new file mode 100644
index 0000000..4bb8c7f
--- /dev/null
+++ b/app/scripts/CatLab/Easelbone/EaselJS/Pinner.js
@@ -0,0 +1,211 @@
+define(
+    ['easeljs', 'CatLab/Easelbone/Utilities/DirtyFlag'],
+    function (createjs, DirtyFlag) {
+
+        'use strict';
+
+        // Pin state lives on the shared stage object so that separate easelbone
+        // bundles (game + library) rendering onto the SAME stage cooperate: both
+        // read/write stage._pinnedElements and stage._pinContainer, and whichever
+        // RootView owns the tick loop drives the sync for all of them.
+
+        function ensureState(stage) {
+            if (!stage._pinnedElements) {
+                stage._pinnedElements = [];
+            }
+            return stage._pinnedElements;
+        }
+
+        function ensureContainer(stage) {
+            if (stage._pinContainer && stage._pinContainer.stage === stage) {
+                return stage._pinContainer;
+            }
+            // Fallback for contexts with no designated pin layer (e.g. a
+            // standalone library portal with no blackout): a last-child
+            // container on the stage.
+            var container = new createjs.Container();
+            stage.addChild(container);
+            stage._pinContainer = container;
+            return container;
+        }
+
+        var Pinner = {
+
+            _props: {},
+
+            setContainer: function (stage, container) {
+                stage._pinContainer = container;
+            },
+
+            // Retry pinning on each tick until obj is attached to a stage.
+            // Gives up after ~5s (300 ticks) so a never-attached object can't
+            // leak a permanent retry loop.
+            _deferPin: function (obj, attempt) {
+                if (obj.stage) {
+                    Pinner.pin(obj);
+                    return;
+                }
+                if (attempt >= 300) {
+                    return;
+                }
+                createjs.Ticker.on('tick', function () {
+                    Pinner._deferPin(obj, attempt + 1);
+                }, null, true);
+            },
+
+            pin: function (obj) {
+                var stage = obj.stage;
+                if (!stage) {
+                    // Not on a stage yet. We can't rely on obj's 'added'
+                    // event here: obj is typically addChild'd to its
+                    // placeholder BEFORE pinToTop is called, so 'added' has
+                    // already fired and will NOT fire again when an ancestor
+                    // (the placeholder) is later attached to the stage. Retry
+                    // on the ticker until obj is actually on a stage.
+                    Pinner._deferPin(obj, 0);
+                    return;
+                }
+
+                // Idempotent: a second pin() on an object that's already
+                // pinned must not re-derive the anchor from obj.parent, since
+                // that's now the pin container, not the original anchor --
+                // which would orphan the real record (wrong key for
+                // _removeByAnchor) and push a bogus, never-torn-down one.
+                if (Pinner._isPinned(stage, obj)) {
+                    return;
+                }
+
+                var anchor = obj.parent;
+                if (!anchor) {
+                    return;
+                }
+
+                ensureState(stage);
+
+                // Re-pin replaces: drop any existing pin on the same anchor so a
+                // re-rendered QR (removeAllChildren + regenerate) never stacks.
+                Pinner._removeByAnchor(stage, anchor);
+
+                var wrapper = new createjs.Container();
+                var record = { obj: obj, anchor: anchor, wrapper: wrapper };
+
+                ensureContainer(stage).addChild(wrapper);
+                wrapper.addChild(obj); // reparents obj out of anchor; obj's own transform/regX/regY untouched
+
+                stage._pinnedElements.push(record);
+
+                // Immediate sync: correctly placed even without a running tick.
+                Pinner._syncRecord(stage, record);
+
+                // Reparenting doesn't itself mark the RootView dirty; under
+                // dirtyRendering:true this ensures the pin paints next frame
+                // instead of waiting for an unrelated event or the heartbeat.
+                DirtyFlag.invalidate();
+            },
+
+            unpin: function (obj) {
+                var stage = obj.stage;
+                var records = stage && stage._pinnedElements;
+                if (!records) {
+                    return;
+                }
+                for (var i = 0; i < records.length; i++) {
+                    if (records[i].obj === obj) {
+                        Pinner._restore(records[i]);
+                        records.splice(i, 1);
+                        DirtyFlag.invalidate();
+                        return;
+                    }
+                }
+            },
+
+            _isPinned: function (stage, obj) {
+                var records = stage._pinnedElements;
+                if (!records) {
+                    return false;
+                }
+                for (var i = 0; i < records.length; i++) {
+                    if (records[i].obj === obj) {
+                        return true;
+                    }
+                }
+                return false;
+            },
+
+            sync: function (stage) {
+                var records = stage._pinnedElements;
+                if (!records || records.length === 0) {
+                    return false;
+                }
+                for (var i = records.length - 1; i >= 0; i--) {
+                    var record = records[i];
+                    // Auto-teardown: anchor removed from the stage.
+                    if (record.anchor.stage !== stage) {
+                        Pinner._restore(record);
+                        records.splice(i, 1);
+                        continue;
+                    }
+                    Pinner._syncRecord(stage, record);
+                }
+                return records.length > 0;
+            },
+
+            _removeByAnchor: function (stage, anchor) {
+                var records = stage._pinnedElements;
+                for (var i = records.length - 1; i >= 0; i--) {
+                    if (records[i].anchor === anchor) {
+                        Pinner._restore(records[i]);
+                        records.splice(i, 1);
+                    }
+                }
+            },
+
+            _restore: function (record) {
+                if (record.obj.parent) {
+                    record.obj.parent.removeChild(record.obj);
+                }
+                if (record.wrapper.parent) {
+                    record.wrapper.parent.removeChild(record.wrapper);
+                }
+                if (record.anchor && record.anchor.stage) {
+                    record.anchor.addChild(record.obj);
+                }
+            },
+
+            _syncRecord: function (stage, record) {
+                var wrapper = record.wrapper;
+
+                // Callers can hide all pinned overlays (e.g. while a modal is
+                // open over the pinned QR) by setting stage._pinsHidden.
+                wrapper.visible = !stage._pinsHidden;
+
+                var container = wrapper.parent;
+                if (!container) {
+                    return;
+                }
+
+                // Carry the anchor's bounds so bounds-sizing children (e.g. Fill) size correctly.
+                var bounds = record.anchor.getBounds();
+                if (bounds) {
+                    wrapper.setBounds(0, 0, bounds.width, bounds.height);
+                }
+
+                // Place the wrapper in the anchor's coordinate space:
+                //   wrapperLocal = pinContainerConcatenated^-1 * anchorConcatenated
+                var local = container.getConcatenatedMatrix().invert()
+                    .appendMatrix(record.anchor.getConcatenatedMatrix());
+
+                var props = local.decompose(Pinner._props);
+                wrapper.x = props.x;
+                wrapper.y = props.y;
+                wrapper.scaleX = props.scaleX;
+                wrapper.scaleY = props.scaleY;
+                wrapper.rotation = props.rotation;
+                wrapper.skewX = props.skewX;
+                wrapper.skewY = props.skewY;
+            }
+        };
+
+        return Pinner;
+    }
+);
diff --git a/app/scripts/CatLab/Easelbone/FrontController.js b/app/scripts/CatLab/Easelbone/FrontController.js
index 47feba5..cf9f555 100644
--- a/app/scripts/CatLab/Easelbone/FrontController.js
+++ b/app/scripts/CatLab/Easelbone/FrontController.js
@@ -31,7 +31,9 @@ define(
         'CatLab/Easelbone/Utilities/GlobalProperties',
         'CatLab/Easelbone/Utilities/MovieClipHelper',
 
-        'CatLab/FakeWebremote/Models/KeyboardUser'
+        'CatLab/FakeWebremote/Models/KeyboardUser',
+
+        'CatLab/Easelbone/EaselJS/Pinner'
     ],
     function (
         Loader,
@@ -65,7 +67,9 @@ define(
         GlobalProperties,
         MovieClipHelper,
 
-        KeyboardUser
+        KeyboardUser,
+
+        Pinner
     ) {
 
         return {
@@ -110,6 +114,14 @@ define(
                 }
             },
 
+            pinToTop: function (displayObject) {
+                return Pinner.pin(displayObject);
+            },
+
+            unpinFromTop: function (displayObject) {
+                return Pinner.unpin(displayObject);
+            },
+
             FakeWebremote: {
                 KeyboardUser: KeyboardUser
             },
diff --git a/app/scripts/CatLab/Easelbone/Views/Root.js b/app/scripts/CatLab/Easelbone/Views/Root.js
index 11a9118..78a52db 100755
--- a/app/scripts/CatLab/Easelbone/Views/Root.js
+++ b/app/scripts/CatLab/Easelbone/Views/Root.js
@@ -4,9 +4,10 @@ define(
         'easeljs',
 
         'CatLab/Easelbone/Views/Layer',
-        'CatLab/Easelbone/Utilities/DirtyFlag'
+        'CatLab/Easelbone/Utilities/DirtyFlag',
+        'CatLab/Easelbone/EaselJS/Pinner'
     ],
-    function (Backbone, createjs, Layer, DirtyFlag) {
+    function (Backbone, createjs, Layer, DirtyFlag, Pinner) {
         var i;
         var layer;
 
@@ -150,6 +151,16 @@ define(
                 return this.layerMap[name];
             },
 
+            /**
+             * Designate the container that pinToTop reparents objects into.
+             * Lets the host control z-order (e.g. above the smiley layer but
+             * below a blackout overlay).
+             * @param container
+             */
+            setPinContainer: function (container) {
+                Pinner.setContainer(this.stage, container);
+            },
+
             /**
              * Set a view on the main layer.
              * @param view
@@ -239,6 +250,7 @@ define(
                     // Direct paints (render/resize) also reset the heartbeat.
                     this._lastPaintTime = createjs.Ticker.getTime();
                 }
+                Pinner.sync(this.stage);
                 this.stage.update();
             },
 
diff --git a/dist/scripts/easelbone.js b/dist/scripts/easelbone.js
index 4628c45..0325f6e 100644
--- a/dist/scripts/easelbone.js
+++ b/dist/scripts/easelbone.js
@@ -8,7 +8,8 @@ define("CatLab/Easelbone/Utilities/MovieClipHelper",["easeljs","CatLab/Easelbone
 define("CatLab/Easelbone/Views/Base",["backbone","easeljs","CatLab/Easelbone/Utilities/GlobalProperties","CatLab/Easelbone/Utilities/MovieClipHelper","CatLab/Easelbone/Utilities/Deferred"],(function(e,t,i,r,n){"use strict";return e.View.extend({el:"div",easelScreen:null,setRootView:function(e){this.set("root",e)},getWidth:function(){return this.getStage().canvas.width},getHeight:function(){return this.getStage().canvas.height},getStage:function(){return void 0!==this.el.stage?this.el.stage:void 0!==this.el.getStage?this.el.getStage():void 0},setScreen:function(e){return this.easelScreen=e,this},getScreen:function(){return this.easelScreen},hasLabeledFrame:function(e,t){if(void 0===t&&(t=this.easelScreen),!t)throw new Error("hasLabeledFrame requires a screen to be set or a container to be provided.");return r.hasLabeledFrame(e,t)},jumpToFrame:function(e,t){if(void 0===t&&(t=this.easelScreen)&&!t.parent){var i=new n;return this._pendingFrameJumps||(this._pendingFrameJumps=[]),this._pendingFrameJumps.push({label:e,deferred:i}),i.promise()}if(!t)throw new Error("hasLabeledFrame requires a screen to be set or a container to be provided.");return r.jumpToFrame(e,t)},_replayPendingFrameJumps:function(){if(this._pendingFrameJumps){var e=this._pendingFrameJumps;this._pendingFrameJumps=null,e.forEach(function(e){this.jumpToFrame(e.label).done((function(){e.deferred.resolve()}))}.bind(this))}},pause:function(e){if(void 0===e&&(e=this.easelScreen),!e)throw new Error("pause requires a screen to be set or a container to be provided.");return r.pause(this.easelScreen)},resume:function(e){if(void 0===e&&(e=this.easelScreen),!e)throw new Error("resume requires a screen to be set or a container to be provided.");return r.resume(this.easelScreen)},scale:function(e){var t=this.getScale();e.scaleX=t.x,e.scaleY=t.y},getScale:function(e,t,r){null==e&&(e=i.getWidth()),null==t&&(t=i.getHeight()),void 0===r&&(r=!1);var n=this.getWidth()/e,a=this.getHeight()/t,s=r?Math.max(n,a):Math.min(n,a);return{x:s,y:s}},addCenter:function(e,r,n,a,s){null==r&&(r=i.getWidth()),null==n&&(n=i.getHeight()),null==s&&(s=1);var h=this.getScale(r,n,a),o=!0;if(this.getWidth()===r&&this.getHeight()===n&&(o=!1),o&&(h.x=h.x*s,h.y=h.y*s,e.x=(this.getWidth()-r*h.x)/2,e.y=(this.getHeight()-n*h.y)/2,e.scaleX=h.x,e.scaleY=h.y),this.el.addChild(e),o){var l=new t.Graphics;e.x>=1&&(l.beginFill(this.getBackground()).drawRect(0,0,Math.ceil(e.x),this.getHeight()),l.beginFill(this.getBackground()).drawRect(this.getWidth()-Math.ceil(e.x),0,Math.ceil(e.x),this.getHeight())),e.y>=1&&(l.beginFill(this.getBackground()).drawRect(0,0,this.getWidth(),Math.ceil(e.y)),l.beginFill(this.getBackground()).drawRect(0,this.getHeight()-Math.ceil(e.y),this.getWidth(),Math.ceil(e.y)));var d=new t.Shape(l);this.el.addChild(d)}},clear:function(){this.el.removeAllChildren();var e=new t.Graphics;e.beginFill(this.getBackground()).drawRect(0,0,this.getWidth(),this.getHeight());var i=new t.Shape(e);this.el.addChild(i)},getBackground:function(){return"#000000"},render:function(){if(this.easelScreen)return this.addCenter(this.easelScreen),this._replayPendingFrameJumps(),this;var e=new t.Container;e.setBounds(0,0,this.getWidth(),this.getHeight());var i=new t.BigText("easelbone view: no screen set and render function was not overridden...","Arial","#000000");e.addChild(i),this.el.addChild(e)},findPlaceholders:function(e,t){return void 0===t&&(t=[],this.easelScreen&&t.push(this.easelScreen)),r.findPlaceholders(e,t)},findTextPlaceholders:function(e,t){return this.findPlaceholdersPreferPostfix(e,t,"text")},findPlaceholdersPreferPostfix:function(e,t,i){var r=[];return Array.isArray(e)?e.forEach((function(e){r.push(e+".text"),r.push(e)})):(r.push(e+".text"),r.push(e)),this.findPlaceholders(r,t)},findFromNames:function(e,t){return void 0===t&&(t=[],this.easelScreen&&t.push(this.easelScreen)),r.findFromNames(e,t)},findFromNameInContainer:function(e,t,i){return r.findFromNameInContainer(e,t,i)},forEachNamedChild:function(e,t){return r.forEachNamedChild(e,t)},tick:function(){return!0},afterRender:function(){},onRemove:function(){},scrollIntoView:function(e){for(var t=e;t.parent;){if(void 0!==t._parentScrollArea)return void t._parentScrollArea.focus(e,200);t=t.parent}}})}));
 define("CatLab/Easelbone/Views/LoadingView",["CatLab/Easelbone/Views/Base"],(function(t){"use strict";var e=new Image;e.crossOrigin="anonymous",e.src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAWCAYAAAA1vze2AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAA3XAAAN1wFCKJt4AAAAB3RJTUUH3wMRCycoY5y7DgAAAeBJREFUSMel1j9sTlEYBvD3fv2DIqmmmmjTBSXVkYSBhAixWNRmMYvBgMZQSUeLQWIw2hqLWIRBYpCIQYcyYDBJNAQpBk21P8u5cdzcfv1835Pc3JznOed9zn3f95zciCbAAbzEIk5VtI04jxmMRzvAKD76i1VszvSZTFvESDsmk1jxLyYz/UtFu7pWrEYTn9EafUcyGIiIgYo23o5Jdw23kt79NVrR1AQNbEEe+F0WtMSLiIiiKN5HxGqdluL1oB89JdGFabzGLWxKfB9ms5zfqdTsYqbNoT+LN5tqdq+cfLrSQUcrOxrGCLoqJg1sxxg2ZPyZSsNcCTyvdMlUdABMpc2W+NyIiP2VecMtBjuMEzVSX2U82B0RSxHRk5H5gTsbEbcjYig1wpuI2BoRx7I5cxFxqCiK5URtq3SawINKui6nxfvwU2u4npneqGjzkQr3LRFPMZil40eLJnfLxsAQHuErHpfx1sr5Xnxq0WS6Wf2anfhzKb/r4XeqVcvt14sL//EFJZ6Uh3g9gzF80D7u4yQm1rzU8DYi9kRnWE333WBRFN/rarIQnaMREb/SU5uu3VjWOS6haFaX41iqWbjQosE8eltpgAk8TKf9FXYl/kgawzMcTPxOXMPN/B8gxx+XbHMxap3gAwAAAABJRU5ErkJggg==";var i=0,s={x:{start:0,end:100},y:{start:0,end:100}},a={x:s.x.end/2,y:s.y.end/2},n=[],h=!1;return t.extend({initialize:function(t){this.gameVersion=null,void 0!==t.gameVersion&&(this.gameVersion=t.gameVersion),this.dRotation=0,this.speed=10,this.angle=Math.random()*Math.PI*2,this.targetAngle=null,this.flippedX=!1,this.flippedY=!1,this.rotationSpeedRad=.2,this.screenMargin=50},render:function(){s={x:{start:0,end:this.el.stage.canvas.width},y:{start:0,end:this.el.stage.canvas.height}},this.loadingText=new createjs.Text("Loading","15px monospace","#ffffff"),this.loadingText.textAlign="center",this.loadingText.lineHeight=20,this.el.addChild(this.loadingText),this.versionText=null,this.gameVersion&&(this.versionText=new createjs.Text("v"+this.gameVersion,"12px monospace","#ffffff"),this.el.addChild(this.versionText),this.versionText.cache(-100,-100,200,200),this.loadingText.cache(-100,-100,200,200)),this.el.setBounds(0,0,this.el.stage.canvas.width,this.el.stage.canvas.height),this.updatePositions(),a={x:Math.random()*(s.x.end-2*this.screenMargin)+this.screenMargin,y:Math.random()*(s.y.end-2*this.screenMargin)+this.screenMargin}},tick:function(){this.updatePositions();var t=this.angle;null!==this.targetAngle&&(t=this.targetAngle),(a.x<s.x.start+this.screenMargin&&Math.cos(t)<0||a.x>s.x.end-this.screenMargin&&Math.cos(t)>0)&&(this.targetAngle=Math.PI-t),(a.y<s.y.start+this.screenMargin&&Math.sin(t)<0||a.y>s.y.end-this.screenMargin&&Math.sin(t)>0)&&(this.targetAngle=2*Math.PI-t),null!==this.targetAngle&&(this.targetAngle-this.angle>this.rotationSpeedRad?this.angle+=this.rotationSpeedRad:this.targetAngle-this.angle<0-this.rotationSpeedRad?this.angle-=this.rotationSpeedRad:this.targetAngle=null);var e=Math.cos(this.angle)*this.speed,h=Math.sin(this.angle)*this.speed;a.x+=e,a.y+=h,++i%6==0&&this.addPaw();for(var r=0;r<n.length;r++)n[r].alpha-=1/40;var g=[];for(r=0;r<n.length;r++)n[r].alpha>0&&g.push(n[r]);return n=g,!0},updatePositions:function(){this.loadingText.x=this.el.getBounds().width/2,this.loadingText.y=this.el.getBounds().height/2,this.versionText&&(this.versionText.x=this.el.getBounds().width-60,this.versionText.y=this.el.getBounds().height-20)},stop:function(){},start:function(){},addPaw:function(){var t=10;(h=!h)&&(t*=-1);var i=new createjs.Bitmap(e),s=this.angle;i.regX=10,i.regY=10,i.x=a.x+Math.cos(s+Math.PI/2)*t,i.y=a.y+Math.sin(s+Math.PI/2)*t,i.scaleX=20/e.width,i.scaleY=20/e.height,i.rotation=(s+Math.PI/2)*(180/Math.PI),this.el.addChild(i),n.push(i)},setProgress:function(t){t=Math.floor(100*t),this.loadingText.text="Loading\n"+t+"%",this.loadingText.cache(-100,-100,200,200)}})}));
 define("CatLab/Easelbone/Views/Layer",["easeljs","underscore","backbone","CatLab/Easelbone/Utilities/Deferred"],(function(e,i,t,n){var r=function(n){i.extend(this,t.Events),void 0===n&&(n={}),void 0!==n.container?this.container=n.container:this.container=new e.Container,this.view=null};return r.prototype.setView=function(i){var t=this.view;this.view=i;var n=new e.Container;this.view.setElement(n),this.container.addChild(n),this.view.on("all",function(e){this.trigger("view:"+e)}.bind(this)),this.view.trigger("stage:added"),t&&this.container.children.length>0&&this.container.setChildIndex(t.el,this.container.children.length-1),t&&this._destroyView(t).then((function(){t=null}))},r.prototype.clearView=function(){this.view&&this._destroyView(this.view).pipe(function(){this.view=null}.bind(this))},r.prototype._destroyView=function(e){return this._waitForViewDestroy(e).pipe(function(){null!==e&&(e.trigger("stage:removed"),this.container.removeChild(e.el),e=null)}.bind(this))},r.prototype._waitForViewDestroy=function(e){var i=new n;return e&&void 0!==e.hasLabeledFrame&&void 0!==e.easelScreen&&e.easelScreen&&e.hasLabeledFrame("view:destroy")?(e.jumpToFrame("view:destroy").then((function(){i.resolve()})),i.promise()):(i.resolve(),i.promise())},r.prototype.render=function(){this.view&&(this.view.el.removeAllChildren(),this.view.trigger("render:before"),this.view.render(),this.view.trigger("render"),this.view.trigger("render:after"))},r.prototype.tick=function(e){return!!this.view&&this.view.tick(e)},r}));
-define("CatLab/Easelbone/Views/Root",["backbone","easeljs","CatLab/Easelbone/Views/Layer","CatLab/Easelbone/Utilities/DirtyFlag"],(function(i,t,e,n){var a;return i.View.extend({stage:null,container:null,hudcontainer:null,view:null,hud:null,maxCanvasSize:null,width:null,height:null,initialize:function(i){this.initializeRootView(i)},initializeRootView:function(i){if(void 0!==i.canvas)this.canvas=i.canvas,this.container=this.canvas.parentNode;else{if(void 0===i.container)throw new Error("Container must be defined for root view.");this.canvas=document.createElement("canvas"),this.container=i.container,this.container.appendChild(this.canvas)}if(void 0!==i.width&&void 0!==i.height&&(this.width=i.width,this.height=i.height),this.stage=this.createStage(i),this.layers=[],this.layerMap={},this.dirty=!1,this.mainLayer=this.nextLayer("main"),this.snapToPixel=void 0!==i.snapToPixel&&i.snapToPixel,this.dirtyRendering=void 0!==i.dirtyRendering&&!!i.dirtyRendering,this.heartbeatInterval=1e3,this._lastPaintTime=0,this.dirtyRendering){this.stage.tickOnUpdate=!1,n.installMovieClipHook(t);var e=this.invalidate.bind(this);this.stage.on("stagemousedown",e),this.stage.on("stagemouseup",e),this.stage.on("stagemousemove",e)}t.Ticker.addEventListener("tick",function(i){t.Ticker.paused||this.tick(i)}.bind(this)),this.resize()},createStage:function(i){var e;return(e=void 0!==i.webgl&&i.webgl?new t.StageGL(this.canvas):new t.Stage(this.canvas)).snapToPixelEnabled=this.snapToPixel,e},setMaxCanvasSize:function(i,t){this.maxCanvasSize=[i,t]},nextLayer:function(i){void 0===i&&(i="Layer"+this.layers.length);var t=new e;return t.container.snapToPixel=this.snapToPixel,this.stage.addChild(t.container),this.layers.push(t),this.layerMap[i]=t,t},getLayer:function(i){return this.layerMap[i]},setView:function(i){this.mainLayer.setView(i),this.render()},invalidate:function(){n.invalidate()},tick:function(i){for(this.trigger("tick:before",i),this.dirty=!1,a=0;a<this.layers.length;a++)this.layers[a].tick(i)&&(this.dirty=!0);this.dirtyRendering?(this.stage.tick(i),n.consume()&&(this.dirty=!0),void 0!==t.Tween&&t.Tween.hasActiveTweens&&t.Tween.hasActiveTweens()&&(this.dirty=!0),i.time-this._lastPaintTime>=this.heartbeatInterval&&(this.dirty=!0),this.dirty&&(this._lastPaintTime=i.time,this.update())):this.dirty&&this.update(),this.trigger("tick:after")},render:function(){for(a=0;a<this.layers.length;a++)this.layers[a].render();return this.update(),this},update:function(){this.dirtyRendering&&(this._lastPaintTime=t.Ticker.getTime()),this.stage.update()},fullscreen:function(){},resize:function(){this.width&&this.height?(this.canvas.width=this.width,this.canvas.height=this.height):void 0!==this.container?(this.canvas.width=this.container.offsetWidth,this.canvas.height=this.container.offsetHeight):(this.canvas.width=window.innerWidth,this.canvas.height=window.innerHeight),null!==this.maxCanvasSize&&(this.canvas.width=Math.min(this.canvas.width,this.maxCanvasSize[0]),this.canvas.height=Math.min(this.canvas.height,this.maxCanvasSize[1])),this.render()},alert:function(i,t){alert(i),t()},confirm:function(i,t){t(confirm(i))}})}));
+define("CatLab/Easelbone/EaselJS/Pinner",["easeljs","CatLab/Easelbone/Utilities/DirtyFlag"],(function(n,e){"use strict";var r={_props:{},setContainer:function(n,e){n._pinContainer=e},_deferPin:function(e,i){e.stage?r.pin(e):i>=300||n.Ticker.on("tick",(function(){r._deferPin(e,i+1)}),null,!0)},pin:function(i){var t=i.stage;if(t){if(!r._isPinned(t,i)){var a=i.parent;if(a){!function(n){n._pinnedElements||(n._pinnedElements=[]),n._pinnedElements}(t),r._removeByAnchor(t,a);var o=new n.Container,s={obj:i,anchor:a,wrapper:o};(function(e){if(e._pinContainer&&e._pinContainer.stage===e)return e._pinContainer;var r=new n.Container;return e.addChild(r),e._pinContainer=r,r})(t).addChild(o),o.addChild(i),t._pinnedElements.push(s),r._syncRecord(t,s),e.invalidate()}}}else r._deferPin(i,0)},unpin:function(n){var i=n.stage,t=i&&i._pinnedElements;if(t)for(var a=0;a<t.length;a++)if(t[a].obj===n)return r._restore(t[a]),t.splice(a,1),void e.invalidate()},_isPinned:function(n,e){var r=n._pinnedElements;if(!r)return!1;for(var i=0;i<r.length;i++)if(r[i].obj===e)return!0;return!1},sync:function(n){var e=n._pinnedElements;if(!e||0===e.length)return!1;for(var i=e.length-1;i>=0;i--){var t=e[i];t.anchor.stage===n?r._syncRecord(n,t):(r._restore(t),e.splice(i,1))}return e.length>0},_removeByAnchor:function(n,e){for(var i=n._pinnedElements,t=i.length-1;t>=0;t--)i[t].anchor===e&&(r._restore(i[t]),i.splice(t,1))},_restore:function(n){n.obj.parent&&n.obj.parent.removeChild(n.obj),n.wrapper.parent&&n.wrapper.parent.removeChild(n.wrapper),n.anchor&&n.anchor.stage&&n.anchor.addChild(n.obj)},_syncRecord:function(n,e){var i=e.wrapper;i.visible=!n._pinsHidden;var t=i.parent;if(t){var a=e.anchor.getBounds();a&&i.setBounds(0,0,a.width,a.height);var o=t.getConcatenatedMatrix().invert().appendMatrix(e.anchor.getConcatenatedMatrix()).decompose(r._props);i.x=o.x,i.y=o.y,i.scaleX=o.scaleX,i.scaleY=o.scaleY,i.rotation=o.rotation,i.skewX=o.skewX,i.skewY=o.skewY}}};return r}));
+define("CatLab/Easelbone/Views/Root",["backbone","easeljs","CatLab/Easelbone/Views/Layer","CatLab/Easelbone/Utilities/DirtyFlag","CatLab/Easelbone/EaselJS/Pinner"],(function(i,t,e,n,a){var s;return i.View.extend({stage:null,container:null,hudcontainer:null,view:null,hud:null,maxCanvasSize:null,width:null,height:null,initialize:function(i){this.initializeRootView(i)},initializeRootView:function(i){if(void 0!==i.canvas)this.canvas=i.canvas,this.container=this.canvas.parentNode;else{if(void 0===i.container)throw new Error("Container must be defined for root view.");this.canvas=document.createElement("canvas"),this.container=i.container,this.container.appendChild(this.canvas)}if(void 0!==i.width&&void 0!==i.height&&(this.width=i.width,this.height=i.height),this.stage=this.createStage(i),this.layers=[],this.layerMap={},this.dirty=!1,this.mainLayer=this.nextLayer("main"),this.snapToPixel=void 0!==i.snapToPixel&&i.snapToPixel,this.dirtyRendering=void 0!==i.dirtyRendering&&!!i.dirtyRendering,this.heartbeatInterval=1e3,this._lastPaintTime=0,this.dirtyRendering){this.stage.tickOnUpdate=!1,n.installMovieClipHook(t);var e=this.invalidate.bind(this);this.stage.on("stagemousedown",e),this.stage.on("stagemouseup",e),this.stage.on("stagemousemove",e)}t.Ticker.addEventListener("tick",function(i){t.Ticker.paused||this.tick(i)}.bind(this)),this.resize()},createStage:function(i){var e;return(e=void 0!==i.webgl&&i.webgl?new t.StageGL(this.canvas):new t.Stage(this.canvas)).snapToPixelEnabled=this.snapToPixel,e},setMaxCanvasSize:function(i,t){this.maxCanvasSize=[i,t]},nextLayer:function(i){void 0===i&&(i="Layer"+this.layers.length);var t=new e;return t.container.snapToPixel=this.snapToPixel,this.stage.addChild(t.container),this.layers.push(t),this.layerMap[i]=t,t},getLayer:function(i){return this.layerMap[i]},setPinContainer:function(i){a.setContainer(this.stage,i)},setView:function(i){this.mainLayer.setView(i),this.render()},invalidate:function(){n.invalidate()},tick:function(i){for(this.trigger("tick:before",i),this.dirty=!1,s=0;s<this.layers.length;s++)this.layers[s].tick(i)&&(this.dirty=!0);this.dirtyRendering?(this.stage.tick(i),n.consume()&&(this.dirty=!0),void 0!==t.Tween&&t.Tween.hasActiveTweens&&t.Tween.hasActiveTweens()&&(this.dirty=!0),i.time-this._lastPaintTime>=this.heartbeatInterval&&(this.dirty=!0),this.dirty&&(this._lastPaintTime=i.time,this.update())):this.dirty&&this.update(),this.trigger("tick:after")},render:function(){for(s=0;s<this.layers.length;s++)this.layers[s].render();return this.update(),this},update:function(){this.dirtyRendering&&(this._lastPaintTime=t.Ticker.getTime()),a.sync(this.stage),this.stage.update()},fullscreen:function(){},resize:function(){this.width&&this.height?(this.canvas.width=this.width,this.canvas.height=this.height):void 0!==this.container?(this.canvas.width=this.container.offsetWidth,this.canvas.height=this.container.offsetHeight):(this.canvas.width=window.innerWidth,this.canvas.height=window.innerHeight),null!==this.maxCanvasSize&&(this.canvas.width=Math.min(this.canvas.width,this.maxCanvasSize[0]),this.canvas.height=Math.min(this.canvas.height,this.maxCanvasSize[1])),this.render()},alert:function(i,t){alert(i),t()},confirm:function(i,t){t(confirm(i))}})}));
 define("CatLab/Easelbone/Views/Navigatable",["underscore","CatLab/Easelbone/Views/Base"],(function(t,i){return i.extend({ORIENTATION:{VERTICAL:"vertical",HORIZONTAL:"horizontal"},DefaultControls:{navigation:["left","right"],toggle:["a"],manipulation:["down","up"],back:["b","back"]},initialize:function(t){this.initializeNavigable(t)},initializeNavigable:function(i){i=i||{},this._users=[],this._remoteViews=[],this._currentIndex=-1,this._current=null,this._options=[],this._backCallback=null,this._controls=t.extend({},this.DefaultControls),void 0!==i.orientation&&(i.orientation===this.ORIENTATION.VERTICAL?(this._controls.navigation=["up","down"],this._controls.manipulation=["left","right"]):(this._controls.navigation=["left","right"],this._controls.manipulation=["up","down"])),this.resetOptions()},initializeNavigatable:function(t){this.initializeNavigable(t)},setUsers:function(t){this._users=t;for(var i=0;i<this._users.length;i++)this.setWebremoteControls(this._users[i])},clearUsers:function(){for(var t=0;t<this._remoteViews.length;t++)this.clearWebremoteControlsInView(this._remoteViews[t]);this._users=[],this._remoteViews=[]},setWebremoteControls:function(t){var i=t.setView("catlab-nes");this._remoteViews.push(i),this.setWebremoteControlsInView(i)},setWebremoteControlsInView:function(t){t.control(this._controls.navigation[0]).click(function(t){this.previous(t)}.bind(this)),t.control(this._controls.navigation[1]).click(function(t){this.next(t)}.bind(this));for(var i=0;i<this._controls.toggle.length;i++)(function(i){t.control(this._controls.toggle[i]).click(function(t){this.keyInput(this._controls.toggle[i],t)}.bind(this))}).bind(this)(i);for(i=0;i<this._controls.back.length;i++)(function(i){t.control(this._controls.back[i]).click(function(t){this.triggerBack(t)}.bind(this))}).bind(this)(i);t.control(this._controls.manipulation[0]).click(function(t){this.keyInput("down",t)}.bind(this)),t.control(this._controls.manipulation[1]).click(function(t){this.keyInput("up",t)}.bind(this))},clearWebremoteControlsInView:function(t){t.control(this._controls.navigation[0]).off("click"),t.control(this._controls.navigation[1]).off("click");for(var i=0;i<this._controls.toggle.length;i++)(function(i){t.control(this._controls.toggle[i]).off("click")}).bind(this)(i);for(i=0;i<this._controls.back.length;i++)(function(i){t.control(this._controls.back[i]).off("click")}).bind(this)(i);t.control(this._controls.manipulation[0]).off("click"),t.control(this._controls.manipulation[1]).off("click")},setBack:function(t){this._backCallback=t},triggerBack:function(t){null!==this._backCallback&&this._backCallback(t)},next:function(t){0!==this._options.length&&this.activate((this._currentIndex+1)%this._options.length)},previous:function(t){if(0!==this._options.length){var i=this._currentIndex-1;i<0&&(i=this._options.length-1),this.activate(i)}},keyInput:function(t,i){this._current&&this._current.keyInput(t,i)},resetOptions:function(){this._options=[]},addControl:function(t){this._options.push(t),1===this._options.length?setTimeout(function(){this.activate(0,!1)}.bind(this),1):t.deactivate(!1)},activate:function(t,i){void 0===i&&(i=!0),-1!==this._currentIndex&&null!==this._currentIndex&&this._options[this._currentIndex].deactivate(i),this._currentIndex=t,this._options[t].activate(i),this._current=this._options[t],this.scrollIntoView(this._current.element)}})}));
 define("CatLab/Easelbone/Controls/Base",["underscore","backbone"],(function(t,e){var i=function(i){this.checked=!1,this.active=!1,this.element=i,t.extend(this,e.Events)};return i.prototype.activate=function(t){this.active=!0,this.update(t)},i.prototype.deactivate=function(t){this.active=!1,this.update(t)},i.prototype.update=function(t){void 0===t&&(t=!0);var e;e=this.active?this.checked?"Hit":"Over":this.checked?"Down":"Up",this.gotoWithAnimate(e,t)},i.prototype.gotoWithAnimate=function(t,e){e||!this.element.timeline.resolve(t+"-NoAnim")?this.element.gotoAndPlay(t):this.element.gotoAndPlay(t+"-NoAnim")},i}));
 define("CatLab/Easelbone/Utilities/Path",[],(function(){var t,i=function(t,i){this.start={x:t.x,y:t.y},this.end={x:i.x,y:i.y},this.distance={x:i.x-t.x,y:i.y-t.y},this.orientation=this.distance.x>this.distance.y?"horizontal":"vertical",this.indicatorSize={x:0,y:0}};return i.prototype.getPosition=function(t){return isNaN(t)&&(t=0),{x:this.start.x+(this.distance.x-this.indicatorSize.x)*t,y:this.start.y+(this.distance.y-this.indicatorSize.y)*t}},i.prototype.getValue=function(i,n){return t="horizontal"===this.orientation?(i-this.start.x)/this.distance.x:(n-this.start.y)/this.distance.y,Math.max(0,Math.min(1,t))},i.prototype.position=function(t,i){var n=this.getPosition(i);t.x=n.x,t.y=n.y},i.prototype.setIndicatorSize=function(t,i){this.indicatorSize={x:t,y:i}},i}));
@@ -34,5 +35,5 @@ define("CatLab/FakeWebremote/Models/User",[],(function(){return function(t){var
 define("CatLab/FakeWebremote/Models/Control",[],(function(){return function(t,n){var i,e,r=0,s={},o=t,c=[];this.id=t,this.pushed=function(){return 0===r},this.scale=function(){return r},this.update=function(t){r>0&&0==t&&this.trigger("click"),r=t},this.getLabel=function(){return'<span class="control-label '+e+'">'+o+"</span>"},this.setStaticLabel=function(t,n){return o=t,e=n,this},this.setLabel=function(i,e){return n.emit("button:label",{id:t,label:i}),this},this.click=function(t){return this.on("click",t),this},this.on=function(t,n){return void 0===s[t]&&(s[t]=[]),s[t].push(n),this},this.trigger=function(t){var n=[];if(void 0!==s[t])for(i=0;i<s[t].length;i++)n.push(s[t][i]);for(i=0;i<n.length;i++)try{n[i]()}catch(t){console.log(t)}return this},this.off=function(t){return s[t]=[],this},this.clearEvents=function(){return s={},this},this.addDomElement=function(t){var n=this,i=[];return i.push(t.addEventListener("click",(function(){n.trigger("click")}))),c.push({element:t,listeners:i}),this},this.clearDomElements=function(){for(var t=0;t<c.length;t++)for(var n=0;n<c[t].listeners.length;n++)c[t].element.removeEventListener("click",c[t].listeners[n]);return c=[],this},this.isLocalAuthentication=function(){return!1},this.log=function(t){n.log("["+this.id+"] "+t)}}}));
 define("CatLab/FakeWebremote/Models/ControlUser",["CatLab/FakeWebremote/Models/User","CatLab/FakeWebremote/Models/Control"],(function(t,o){var e=function(t){this.initialize(t)};return(e.prototype=t).setWebcontrol=function(t){this.Webcontrol=t},e.prototype.initialize=function(t){this.controls={},this.currentView=null,this.color="orange",this.colorName="orange",this.tmpid=null,this.active=!1,this.userdata=t,this.profiledata={},this.access_token=null},e.prototype.clearControls=function(){if(null!=this.currentView)for(var t=this.Webcontrol.getViewLabels(this.currentView),o=0;o<t.length;o++)this.control(t[o].id).setStaticLabel(t[o].label,"mobile")},e.prototype.clearEvents=function(){for(this.tmpid in this.controls)this.controls.hasOwnProperty(this.tmpid)&&this.controls[this.tmpid].clearEvents()},e.prototype.trigger=function(t,o){"button:down"==t?this.control(o.id).update(1):"button:up"==t?this.control(o.id).update(0):"user:login"==t?this.login(o):"user:logout"==t&&this.logout(o)},e.prototype.emit=function(t,o){return this.Webcontrol._playerEmit(this,t,o),!0},e.prototype.control=function(t){return void 0===this.controls[t]&&(this.controls[t]=new o(t,this)),this.controls[t]},e.prototype.getId=function(){return this.userdata.id},e.prototype.getName=function(){return"User "+this.getId()},e.prototype.getType=function(){return"mobile"},e.prototype.getIcon=function(){return"fa fa-mobile-phone"},e.prototype.login=function(t){var o=this;this.access_token=t.access_token,this.Webcontrol.getOAuthClient((function(t){t.profile(o.access_token,(function(t){o.profiledata=t.user}))}))},e.prototype.getData=function(){return this.profiledata},e.prototype.logout=function(t){this.profiledata=null,this.access_token=null},e.prototype.setColor=function(t,o){this.color=t,this.colorName=o,this.emit("color:set",{color:t,name:o})},e.prototype.getColor=function(){return this.color},e.prototype.getColorName=function(){return this.colorName},e.prototype.isActive=function(){return this.active},e.prototype.toggleActive=function(){this.active=!this.active,this.setLabel()},e.prototype.setActive=function(t){this.active=t,this.setLabel()},e.prototype.setLabel=function(){1==this.active?this.control("join-game").setLabel("LEAVE"):this.control("join-game").setLabel("JOIN")},e.prototype.setView=function(t){this.currentView=t,this.clearControls(),this.emit("view:set",{id:t})},e.prototype.setUserData=function(t,o){console.log("Setting user data: ",t,o)},e.prototype.isLocalAuthentication=function(){return!0},e.prototype.log=function(t){console.log("[u:"+this.getId()+"] "+t)},e}));
 define("CatLab/FakeWebremote/Models/KeyboardUser",["CatLab/FakeWebremote/Models/ControlUser"],(function(e){var t=function(e){void 0===e&&(e=[{id:"up",label:"↑",key:38},{id:"down",label:"↓",key:40},{id:"right",label:"→",key:39},{id:"left",label:"←",key:37},{id:"a",label:"A",key:65},{id:"b",label:"B",key:66},{id:"x",label:"X",key:88},{id:"y",label:"Y",key:89},{id:"join-game",label:"SPACE",key:32},{id:"start-game",label:"ENTER",key:13}]),this.keys=e,this.initialize({id:"keyboard"});var t,n=this,i=0;function o(o){for(i=0;i<e.length;i++)if(e[i].key==o)return t=n.control(e[i].id);return null}document.addEventListener("keydown",(function(e){(t=o(e.keyCode))&&t.update(1)})),document.addEventListener("keyup",(function(e){(t=o(e.keyCode))&&t.update(0)})),this.clearControls=function(){for(var t=0;t<e.length;t++)this.control(e[t].id).setStaticLabel(e[t].label,"keyboard")},this.getType=function(){return"keyboard"},this.getIcon=function(){return"fa fa-keyboard-o"},this.setView=function(e){return this.clearControls(),this},this.emit=function(e,t){return!1},this.isLocalAuthentication=function(){return!1},this.clearControls()};return(t.prototype=new e).constructor=t,t}));
-define("CatLab/Easelbone/FrontController",["CatLab/Easelbone/Utilities/Loader","CatLab/Easelbone/Views/LoadingView","CatLab/Easelbone/Views/Root","CatLab/Easelbone/Views/Base","CatLab/Easelbone/Views/Layer","CatLab/Easelbone/Views/Navigatable","CatLab/Easelbone/Controls/Slider","CatLab/Easelbone/Controls/Checkbox","CatLab/Easelbone/Controls/Button","CatLab/Easelbone/Controls/Selectbox","CatLab/Easelbone/Controls/ScrollBar","CatLab/Easelbone/Controls/ScrollArea","CatLab/Easelbone/Controls/List","CatLab/Easelbone/Controls/FloatContainer","CatLab/Easelbone/Controls/GridFill","CatLab/Easelbone/EaselJS/DisplayObjects/BigText","CatLab/Easelbone/EaselJS/DisplayObjects/EmojiText","CatLab/Easelbone/EaselJS/DisplayObjects/Placeholder","CatLab/Easelbone/EaselJS/DisplayObjects/Background","CatLab/Easelbone/EaselJS/Filters/ColorSwapFilter","CatLab/Easelbone/EaselJS/DisabledButtonHelper","CatLab/Easelbone/Utilities/GlobalProperties","CatLab/Easelbone/Utilities/MovieClipHelper","CatLab/FakeWebremote/Models/KeyboardUser"],(function(e,a,l,o,t,s,b,i,r,n,C,E,L,c,d,S,p,F,B,u,w,x,y,g){return{initialize:function(){},setProperties:function(e){x.set(e)},Views:{Root:l,Base:o,Layer:t,Navigatable:s,Loading:a},Controls:{Slider:b,Checkbox:i,Button:r,Selectbox:n,ScrollBar:C,ScrollArea:E,List:L,FloatContainer:c,GridFill:d},EaselJS:{BigText:S,EmojiText:p,Placeholder:F,Fill:B,DisabledButtonHelper:w,Filters:{ColorSwapFilter:u}},FakeWebremote:{KeyboardUser:g},Loader:e,Helpers:{MovieClipHelper:y}}}));
+define("CatLab/Easelbone/FrontController",["CatLab/Easelbone/Utilities/Loader","CatLab/Easelbone/Views/LoadingView","CatLab/Easelbone/Views/Root","CatLab/Easelbone/Views/Base","CatLab/Easelbone/Views/Layer","CatLab/Easelbone/Views/Navigatable","CatLab/Easelbone/Controls/Slider","CatLab/Easelbone/Controls/Checkbox","CatLab/Easelbone/Controls/Button","CatLab/Easelbone/Controls/Selectbox","CatLab/Easelbone/Controls/ScrollBar","CatLab/Easelbone/Controls/ScrollArea","CatLab/Easelbone/Controls/List","CatLab/Easelbone/Controls/FloatContainer","CatLab/Easelbone/Controls/GridFill","CatLab/Easelbone/EaselJS/DisplayObjects/BigText","CatLab/Easelbone/EaselJS/DisplayObjects/EmojiText","CatLab/Easelbone/EaselJS/DisplayObjects/Placeholder","CatLab/Easelbone/EaselJS/DisplayObjects/Background","CatLab/Easelbone/EaselJS/Filters/ColorSwapFilter","CatLab/Easelbone/EaselJS/DisabledButtonHelper","CatLab/Easelbone/Utilities/GlobalProperties","CatLab/Easelbone/Utilities/MovieClipHelper","CatLab/FakeWebremote/Models/KeyboardUser","CatLab/Easelbone/EaselJS/Pinner"],(function(e,a,o,l,t,s,n,b,i,r,C,E,L,p,c,S,d,u,F,B,w,x,y,J,g){return{initialize:function(){},setProperties:function(e){x.set(e)},Views:{Root:o,Base:l,Layer:t,Navigatable:s,Loading:a},Controls:{Slider:n,Checkbox:b,Button:i,Selectbox:r,ScrollBar:C,ScrollArea:E,List:L,FloatContainer:p,GridFill:c},EaselJS:{BigText:S,EmojiText:d,Placeholder:u,Fill:F,DisabledButtonHelper:w,Filters:{ColorSwapFilter:B}},pinToTop:function(e){return g.pin(e)},unpinFromTop:function(e){return g.unpin(e)},FakeWebremote:{KeyboardUser:J},Loader:e,Helpers:{MovieClipHelper:y}}}));
 define("easelbone",["CatLab/Easelbone/FrontController"],(function(e){return e}));
diff --git a/package-lock.json b/package-lock.json
index 23be03a..e192115 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "easelbone",
-  "version": "1.2.7",
+  "version": "1.2.8",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "easelbone",
-      "version": "1.2.7",
+      "version": "1.2.8",
       "dependencies": {
         "backbone": "^1.*",
         "catlab-easeljs": "^1.0.2",
diff --git a/package.json b/package.json
index b2b9ff7..1353656 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "easelbone",
-  "version": "1.2.7",
+  "version": "1.2.8",
   "main": "dist/scripts/easelbone.js",
   "author": "CatLab Interactive",
   "devDependencies": {
@@ -30,11 +30,12 @@
   },
   "scripts": {
     "update": "node_modules/.bin/bower update",
-    "start" : "grunt",
-    "build" : "grunt",
-    "bump" : "grunt bump",
-    "bump:minor" : "grunt bump:minor",
+    "start": "grunt",
+    "build": "grunt",
+    "bump": "grunt bump",
+    "bump:minor": "grunt bump:minor",
     "smoke": "node tools/smoke-test.js",
-    "test:baseline": "node tools/baseline-test.js"
+    "test:baseline": "node tools/baseline-test.js",
+    "test:pin": "node tools/pin-test.js"
   }
 }
diff --git a/tools/fixtures/pin-baseline.html b/tools/fixtures/pin-baseline.html
new file mode 100644
index 0000000..e7b3bdd
--- /dev/null
+++ b/tools/fixtures/pin-baseline.html
@@ -0,0 +1,174 @@
+<!DOCTYPE html>
+<html>
+<head lang="en">
+    <title>Pinner baseline fixture</title>
+    <style>body { margin: 0; }</style>
+</head>
+<body>
+<canvas id="canvas" width="400" height="400"></canvas>
+<script src="/app/scripts/vendor/requirejs/require.js"></script>
+<script>
+    // Fixture for tools/pin-test.js.
+    //
+    // Layout (bottom -> top layer order):
+    //   layer 0 (main): black background
+    //   layer 1: RED anchor box (50x50) at (100,100); a GREEN child box is
+    //            added to it, then pinned.
+    //   layer 2: a full-canvas BLUE occluder (simulates the smiley layer).
+    //   pin layer (layer 3): the GREEN box is reparented here by pinToTop.
+    //
+    // If pinning works, the GREEN box paints on TOP of the BLUE occluder at
+    // the anchor's position. Moving the anchor moves the GREEN box.
+    //
+    // window.__ready flips true after first paint.
+    // window.__moveAnchor(dx,dy) shifts the anchor and repaints.
+    // window.__rePinNewBox() pins a NEW green box to the SAME anchor
+    //   (simulates a re-render that regenerates the pinned content).
+    // window.__pinAgain() calls pinToTop again on the CURRENTLY pinned box
+    //   (idempotent re-pin of the same instance).
+    // window.__pinnedCount() returns stage._pinnedElements.length.
+    // window.__removeAnchor() removes the anchor from its layer (auto-teardown).
+    require.config({ baseUrl: '/app/scripts/' });
+    require(['main'], function () {
+        require([
+            'easeljs',
+            'CatLab/Easelbone/Views/Root',
+            'CatLab/Easelbone/FrontController'
+        ], function (createjs, RootView, easelbone) {
+            // FrontController returns the easelbone namespace object (the same
+            // object the built bundle exposes as `easelbone`), including
+            // pinToTop / unpinFromTop.
+
+            var root = new RootView({ canvas: document.getElementById('canvas') });
+
+            // layer 1: anchor + green child
+            var anchorLayer = root.nextLayer('anchor');
+            var anchor = new createjs.Container();
+            anchor.x = 100; anchor.y = 100;
+            anchor.setBounds(0, 0, 50, 50);
+            var red = new createjs.Shape();
+            red.graphics.beginFill('#ff0000').drawRect(0, 0, 50, 50);
+            anchor.addChild(red);
+
+            var green = new createjs.Shape();
+            green.__id = 1;
+            green.graphics.beginFill('#00ff00').drawRect(0, 0, 50, 50);
+            anchor.addChild(green);
+            anchorLayer.container.addChild(anchor);
+
+            // layer 2: full blue occluder
+            var occLayer = root.nextLayer('occluder');
+            var blue = new createjs.Shape();
+            blue.graphics.beginFill('#0000ff').drawRect(0, 0, 400, 400);
+            occLayer.container.addChild(blue);
+
+            // pin layer: above occluder
+            var pinLayer = root.nextLayer('pin');
+            root.setPinContainer(pinLayer.container);
+
+            // main layer background (layer 0)
+            var bg = new createjs.Shape();
+            bg.graphics.beginFill('#000').drawRect(0, 0, 400, 400);
+            root.getLayer('main').container.addChild(bg);
+
+            easelbone.pinToTop(green);
+            var currentPinned = green;
+            var nextId = 2;
+
+            window.__moveAnchor = function (dx, dy) {
+                anchor.x += dx; anchor.y += dy;
+                root.render();
+            };
+
+            // Suppression: hide/show all pinned overlays (e.g. while a modal is
+            // open) via the stage flag the Pinner honors.
+            window.__setPinsHidden = function (b) {
+                root.stage._pinsHidden = b;
+                root.render();
+            };
+
+            // Simulates a re-render that regenerates the pinned content: a
+            // brand-new object instance pinned to the SAME anchor. Should
+            // replace (not stack on top of) the previously pinned box.
+            window.__rePinNewBox = function () {
+                var box = new createjs.Shape();
+                box.__id = nextId++;
+                box.graphics.beginFill('#00ff00').drawRect(0, 0, 50, 50);
+                anchor.addChild(box);
+                easelbone.pinToTop(box);
+                currentPinned = box;
+                root.render();
+                return box.__id;
+            };
+
+            // Calls pinToTop again on the object that's already pinned
+            // (same instance) -- must be a no-op, not a second record.
+            window.__pinAgain = function () {
+                easelbone.pinToTop(currentPinned);
+                root.render();
+            };
+
+            window.__pinnedCount = function () {
+                return root.stage._pinnedElements ? root.stage._pinnedElements.length : 0;
+            };
+
+            window.__pinnedRecordId = function () {
+                var records = root.stage._pinnedElements;
+                return (records && records.length) ? records[0].obj.__id : null;
+            };
+
+            // Returns [width, height] of the pinned record's wrapper bounds,
+            // or null. Proves the wrapper carries the anchor's bounds (so a
+            // bounds-sizing child, e.g. a Fill, would size to the anchor's
+            // dimensions rather than falling back to a 100x100 default).
+            window.__wrapperBounds = function () {
+                var records = root.stage._pinnedElements;
+                if (!records || !records.length || !records[0].wrapper) {
+                    return null;
+                }
+                var b = records[0].wrapper.getBounds();
+                return b ? [b.width, b.height] : null;
+            };
+
+            // Removes the anchor from the stage entirely; sync() should
+            // auto-teardown the pin on the next render.
+            window.__removeAnchor = function () {
+                anchorLayer.container.removeChild(anchor);
+                root.render();
+            };
+
+            // Deferral: pin an object whose anchor is NOT yet on the stage.
+            // The object is addChild'd to its anchor (so its 'added' event has
+            // already fired) BEFORE pinToTop is called and BEFORE the anchor is
+            // attached to a layer. pinToTop must retry on the ticker and only
+            // complete once the anchor is on the stage.
+            var deferAnchor = null, deferBox = null;
+            window.__deferSetup = function () {
+                deferAnchor = new createjs.Container();
+                deferAnchor.x = 250; deferAnchor.y = 250;
+                deferAnchor.setBounds(0, 0, 40, 40);
+                deferBox = new createjs.Shape();
+                deferBox.__id = 999;
+                deferBox.graphics.beginFill('#00ff00').drawRect(0, 0, 40, 40);
+                deferAnchor.addChild(deferBox); // 'added' fires here, before pinToTop
+                easelbone.pinToTop(deferBox);   // deferBox.getStage() is null -> must defer
+            };
+            window.__deferAttach = function () {
+                anchorLayer.container.addChild(deferAnchor); // now on the stage
+                root.render();
+            };
+            window.__deferBoxPinned = function () {
+                var records = root.stage._pinnedElements || [];
+                for (var i = 0; i < records.length; i++) {
+                    if (records[i].obj === deferBox) { return true; }
+                }
+                return false;
+            };
+
+            root.render();
+            window.__ready = true;
+        });
+    });
+</script>
+</body>
+</html>
diff --git a/tools/pin-test.js b/tools/pin-test.js
new file mode 100644
index 0000000..4d6655f
--- /dev/null
+++ b/tools/pin-test.js
@@ -0,0 +1,124 @@
+/**
+ * Behavioral test for Pinner (pinToTop).
+ *
+ * Renders tools/fixtures/pin-baseline.html headlessly and checks:
+ *  - the pinned GREEN box paints ON TOP of the BLUE occluder at the anchor
+ *  - moving the anchor moves the pinned box with it
+ *
+ * Serves the repository root itself; no external server needed.
+ * Usage: node tools/pin-test.js [port]
+ */
+var spawn = require('child_process').spawn;
+var chromium = require('playwright').chromium;
+
+var FIXTURE = 'tools/fixtures/pin-baseline.html';
+var PORT = parseInt(process.argv[2], 10) || 8125;
+
+function pixel(page, x, y) {
+    return page.evaluate(function (p) {
+        var ctx = document.getElementById('canvas').getContext('2d');
+        var d = ctx.getImageData(p.x, p.y, 1, 1).data;
+        return [d[0], d[1], d[2]];
+    }, { x: x, y: y });
+}
+
+function isGreen(rgb) { return rgb[1] > 150 && rgb[0] < 100 && rgb[2] < 100; }
+
+async function main() {
+    var server = spawn('node', ['node_modules/http-server/bin/http-server', '.', '-p', String(PORT), '-c-1'], { stdio: 'ignore' });
+    await new Promise(function (r) { setTimeout(r, 1500); });
+    var browser = await chromium.launch();
+    var failures = [];
+    try {
+        var page = await browser.newPage();
+        var errors = [];
+        page.on('pageerror', function (e) { errors.push(e.message); });
+        page.on('console', function (m) { if (m.type() === 'error') errors.push(m.text()); });
+        await page.goto('http://localhost:' + PORT + '/' + FIXTURE, { waitUntil: 'load', timeout: 30000 });
+        await page.waitForFunction('window.__ready === true', { timeout: 10000 });
+
+        // Anchor at (100,100), box 50x50 -> center (125,125) should be GREEN
+        // (pinned box on top of the blue occluder).
+        var center = await pixel(page, 125, 125);
+        if (!isGreen(center)) { failures.push('expected GREEN at (125,125), got ' + center); }
+
+        // Wrapper must carry the anchor's bounds (50x50) so a bounds-sizing
+        // child (e.g. a Fill/QR) sizes itself to the anchor's box instead of
+        // falling back to a 100x100 default. This requires a per-pin wrapper
+        // container -- it fails against pre-fix code that reparents obj
+        // directly into the (bounds-less) pin container.
+        // Suppression: hiding pins makes the pinned wrapper invisible; restoring shows it.
+        await page.evaluate('window.__setPinsHidden(true)');
+        var hiddenSpot = await pixel(page, 125, 125);
+        if (isGreen(hiddenSpot)) { failures.push('pins hidden: expected GREEN hidden at (125,125), still green'); }
+        await page.evaluate('window.__setPinsHidden(false)');
+        var shownSpot = await pixel(page, 125, 125);
+        if (!isGreen(shownSpot)) { failures.push('pins shown: expected GREEN to return at (125,125), got ' + shownSpot); }
+
+        var wrapperBounds = await page.evaluate('window.__wrapperBounds()');
+        if (!wrapperBounds || wrapperBounds[0] !== 50 || wrapperBounds[1] !== 50) {
+            failures.push('expected wrapper bounds [50,50], got ' + JSON.stringify(wrapperBounds));
+        }
+
+        // Move anchor +100,+0 -> old center now blue, new center green.
+        await page.evaluate('window.__moveAnchor(100, 0)');
+        await page.waitForTimeout(200);
+        var oldSpot = await pixel(page, 125, 125);
+        var newSpot = await pixel(page, 225, 125);
+        if (isGreen(oldSpot)) { failures.push('expected GREEN to have LEFT (125,125), still green'); }
+        if (!isGreen(newSpot)) { failures.push('expected GREEN at moved (225,125), got ' + newSpot); }
+
+        // Anchor is now at (200,100), center (225,125).
+
+        // Re-pin replace: a NEW object instance pinned to the SAME anchor
+        // must replace the old pinned record (no stacking/leak) and render
+        // on top at the anchor.
+        var newId = await page.evaluate('window.__rePinNewBox()');
+        var countAfterRepin = await page.evaluate('window.__pinnedCount()');
+        var recordIdAfterRepin = await page.evaluate('window.__pinnedRecordId()');
+        var repinSpot = await pixel(page, 225, 125);
+        if (countAfterRepin !== 1) { failures.push('re-pin replace: expected 1 tracked record, got ' + countAfterRepin); }
+        if (recordIdAfterRepin !== newId) { failures.push('re-pin replace: expected tracked record to be the NEW box (id ' + newId + '), got ' + recordIdAfterRepin); }
+        if (!isGreen(repinSpot)) { failures.push('re-pin replace: expected GREEN at (225,125), got ' + repinSpot); }
+
+        // Idempotent re-pin: calling pinToTop twice on the SAME
+        // already-pinned object must not create a second record.
+        await page.evaluate('window.__pinAgain()');
+        await page.evaluate('window.__pinAgain()');
+        var countAfterIdempotent = await page.evaluate('window.__pinnedCount()');
+        var idempotentSpot = await pixel(page, 225, 125);
+        if (countAfterIdempotent !== 1) { failures.push('idempotent re-pin: expected 1 tracked record, got ' + countAfterIdempotent); }
+        if (!isGreen(idempotentSpot)) { failures.push('idempotent re-pin: expected GREEN to still render at (225,125), got ' + idempotentSpot); }
+
+        // Auto-teardown: removing the anchor from the stage must drop the
+        // pin on the next render (no more paint, no tracked record).
+        await page.evaluate('window.__removeAnchor()');
+        await page.waitForTimeout(200);
+        var countAfterRemoveAnchor = await page.evaluate('window.__pinnedCount()');
+        var teardownSpot = await pixel(page, 225, 125);
+        if (countAfterRemoveAnchor !== 0) { failures.push('auto-teardown: expected 0 tracked records, got ' + countAfterRemoveAnchor); }
+        if (isGreen(teardownSpot)) { failures.push('auto-teardown: expected GREEN to be gone at (225,125), still green'); }
+
+        // Deferral: pinning an object whose anchor isn't on the stage yet must
+        // retry and complete once the anchor is attached. Regression guard for
+        // the bug where pin() relied on obj's 'added' event, which had already
+        // fired before pinToTop was called and never fired again. Runs after
+        // auto-teardown so its extra record doesn't skew the count above.
+        await page.evaluate('window.__deferSetup()');
+        var pinnedBeforeAttach = await page.evaluate('window.__deferBoxPinned()');
+        if (pinnedBeforeAttach) { failures.push('deferred pin: box should NOT be pinned before its anchor is on the stage'); }
+        await page.evaluate('window.__deferAttach()');
+        await page.waitForTimeout(500);
+        var pinnedAfterAttach = await page.evaluate('window.__deferBoxPinned()');
+        if (!pinnedAfterAttach) { failures.push('deferred pin: box should be pinned after its anchor is attached to the stage'); }
+
+        if (errors.length) { failures.push('page errors: ' + errors.join('; ')); }
+        await page.close();
+    } finally {
+        await browser.close();
+        server.kill();
+    }
+    if (failures.length) { console.error('FAIL\n' + failures.join('\n')); process.exit(1); }
+    console.log('PASS');
+}
+main();