Initial version

108 files changed, 7469 insertions, 0 deletions

diff --git a/html/lib/canvas/Canvas.js b/html/lib/canvas/Canvas.js
new file mode 100644
index 0000000..408047a
--- /dev/null
+++ b/html/lib/canvas/Canvas.js
@@ -0,0 +1,68 @@
+/**
+	_enyo.Canvas_ is a control that generates a <canvas> HTML tag. It may
+	contain other canvas components that are derived not from
+	<a href="#enyo.Control">enyo.Control</a>, but from 
+	<a href="#enyo.canvas.Control">enyo.canvas.Control</a>.  These aren't true
+	controls in the sense of being DOM elements; they are, rather, shapes drawn
+	into the canvas.
+*/
+enyo.kind({
+	name: "enyo.Canvas",
+	kind: enyo.Control,
+	tag: "canvas",
+	attributes: {
+		//* Width of the canvas element
+		width: 500,
+		//* Height of the canvas element
+		height: 500
+	},
+	defaultKind: "enyo.canvas.Control",
+	//* @protected
+	generateInnerHtml: function() {
+		return '';
+	},
+	teardownChildren: function() {
+	},
+	rendered: function() {
+		this.renderChildren();
+	},
+	/*
+		addChild and removeChild of Control kind assumes children are Controls.
+		CanvasControls are not, so we use UiComponent's version, the superkind of Control
+	*/
+	addChild: function() {
+		enyo.UiComponent.prototype.addChild.apply(this, arguments);
+	},
+	removeChild: function() {
+		enyo.UiComponent.prototype.removeChild.apply(this, arguments);
+	},
+	renderChildren: function(inContext) {
+		var ctx = inContext;
+		var canvas = this.hasNode();
+		if (!ctx) {
+			if (canvas.getContext) {
+				ctx = canvas.getContext('2d');
+			}
+		}
+		if (ctx) {
+			for (var i=0, c; c=this.children[i]; i++) {
+				c.render(ctx);
+			}
+		}
+	},
+	//* @public
+	/**
+		Refreshes the canvas context, clears existing drawings, and redraws all
+		of the children.
+	*/
+	update: function() {
+		var canvas = this.hasNode();
+		if (canvas.getContext) {
+			var ctx = canvas.getContext('2d');
+			var b = this.getBounds();
+			// clear canvas
+			ctx.clearRect(0, 0, b.width, b.height);
+			this.renderChildren(ctx);
+		}
+	}
+});
diff --git a/html/lib/canvas/CanvasControl.js b/html/lib/canvas/CanvasControl.js
new file mode 100644
index 0000000..ce16446
--- /dev/null
+++ b/html/lib/canvas/CanvasControl.js
@@ -0,0 +1,52 @@
+/**
+	The base kind for items that live inside an
+	<a href="#enyo.Canvas">enyo.Canvas</a> control.
+
+	If you're using this kind directly, you may implement an _onRender_ event
+	handler in the owner to handle drawing into the canvas.
+
+	If you're deriving a new kind based on this one, override the _renderSelf_
+	method and use that for your drawing code.
+*/
+enyo.kind({
+	name: "enyo.canvas.Control",
+	kind: enyo.UiComponent,
+	defaultKind: "enyo.canvas.Control",
+	published: {
+		//* Structure with l (left), t (top), w (width), and h (height) members.
+		//* The default constructor sets those properties to random values.
+		bounds: null
+	},
+	events: {
+		//* Event providing hook to render this control. The event structure 
+		//* includes a _context_ member holding the active canvas context.
+		onRender: ""
+	},
+	//* @protected
+	constructor: function() {
+		this.bounds = {l: enyo.irand(400), t: enyo.irand(400), w: enyo.irand(100), h: enyo.irand(100)};
+		this.inherited(arguments);
+	},
+	importProps: function(inProps) {
+		this.inherited(arguments);
+		if (inProps.bounds) {
+			enyo.mixin(this.bounds, inProps.bounds);
+			delete inProps.bounds;
+		}
+	},
+	renderSelf: function(inContext) {
+		this.doRender({context: inContext});
+	},
+	render: function(inContext) {
+		if (this.children.length) {
+			this.renderChildren(inContext);
+		} else {
+			this.renderSelf(inContext);
+		}
+	},
+	renderChildren: function(inContext) {
+		for (var i=0, c; c=this.children[i]; i++) {
+			c.render(inContext);
+		}
+	}
+});
diff --git a/html/lib/canvas/Circle.js b/html/lib/canvas/Circle.js
new file mode 100644
index 0000000..dfe8283
--- /dev/null
+++ b/html/lib/canvas/Circle.js
@@ -0,0 +1,14 @@
+/**
+	Canvas control that draws a circle fitting the parameters specified in the
+	_bounds_ property.
+*/
+enyo.kind({
+	name: "enyo.canvas.Circle",
+	kind: enyo.canvas.Shape,
+	//@ protected
+	renderSelf: function(ctx) {
+		ctx.beginPath();
+		ctx.arc(this.bounds.l, this.bounds.t, this.bounds.w, 0, Math.PI*2);
+		this.draw(ctx);
+	}
+});
diff --git a/html/lib/canvas/Image.js b/html/lib/canvas/Image.js
new file mode 100644
index 0000000..018f275
--- /dev/null
+++ b/html/lib/canvas/Image.js
@@ -0,0 +1,26 @@
+/**
+	Canvas control that draws an image, stretched to fit the rectangle specified
+	by the _bounds_ property.
+*/
+enyo.kind({
+	name: "enyo.canvas.Image",
+	kind: enyo.canvas.Control,
+	published: {
+		//* Source URL for the image
+		src: ""
+	},
+	//* @protected
+	create: function() {
+		this.image = new Image();
+		this.inherited(arguments);
+		this.srcChanged();
+	},
+	srcChanged: function() {
+		if (this.src) {
+			this.image.src = this.src;
+		}
+	},
+	renderSelf: function(ctx) {
+		ctx.drawImage(this.image, this.bounds.l, this.bounds.t);
+	}
+});
\ No newline at end of file
diff --git a/html/lib/canvas/Rectangle.js b/html/lib/canvas/Rectangle.js
new file mode 100644
index 0000000..8f53412
--- /dev/null
+++ b/html/lib/canvas/Rectangle.js
@@ -0,0 +1,25 @@
+/**
+	Canvas control that draws a rectangle fitting the parameters specified in
+	the _bounds_ property.
+*/
+enyo.kind({
+	name: "enyo.canvas.Rectangle",
+	kind: enyo.canvas.Shape,
+	published: {
+		clear: false
+	},
+	//* @protected
+	renderSelf: function(ctx) {
+		if (this.clear) {
+			ctx.clearRect(this.bounds.l, this.bounds.t, this.bounds.w, this.bounds.h);
+		} else {
+			this.draw(ctx);
+		}
+	},
+	fill: function(ctx) {
+		ctx.fillRect(this.bounds.l, this.bounds.t, this.bounds.w, this.bounds.h);
+	},
+	outline: function(ctx) {
+		ctx.strokeRect(this.bounds.l, this.bounds.t, this.bounds.w, this.bounds.h);
+	}
+});
diff --git a/html/lib/canvas/Shape.js b/html/lib/canvas/Shape.js
new file mode 100644
index 0000000..14b0d9a
--- /dev/null
+++ b/html/lib/canvas/Shape.js
@@ -0,0 +1,37 @@
+/**
+	The base kind for shapes that can be drawn into the canvas.
+	This doesn't have a default rendering, but an event handler
+	may call the _draw_ method on it.
+
+	Kinds derived from this one should provide their own implementation of
+	_renderSelf_.  If more complex operations are needed for filled mode or
+	outline	mode, override the _fill_ or _outline_ methods, respectively.
+*/
+enyo.kind({
+	name: "enyo.canvas.Shape",
+	kind: enyo.canvas.Control,
+	published: {
+		//* Color used to draw the interior of the shape
+		color: "red",
+		//* Color used to draw the outline of the shape
+		outlineColor: ""
+	},
+	//* @protected
+	fill: function(inContext) {
+		inContext.fill();
+	},
+	outline: function(inContext) {
+		inContext.stroke();
+	},
+	//* @public
+	draw: function(inContext) {
+		if (this.color) {
+			inContext.fillStyle = this.color;
+			this.fill(inContext);
+		}
+		if (this.outlineColor) {
+			inContext.strokeStyle = this.outlineColor;
+			this.outline(inContext);
+		}
+	}
+});
diff --git a/html/lib/canvas/Text.js b/html/lib/canvas/Text.js
new file mode 100644
index 0000000..a470be9
--- /dev/null
+++ b/html/lib/canvas/Text.js
@@ -0,0 +1,25 @@
+//* Canvas control that draws a text string.
+enyo.kind({
+	name: "enyo.canvas.Text",
+	kind: enyo.canvas.Shape,
+	published: {
+		//* The text to draw
+		text: "",
+		//* CSS font specification used to select a font for drawing
+		font: "12pt Arial",
+		//* Text alignment within the rectangle specified by the _bounds_ property
+		align: "left"
+	},
+	//* @protected
+	renderSelf: function(ctx) {
+		ctx.textAlign = this.align;
+		ctx.font = this.font;
+		this.draw(ctx);
+	},
+	fill: function(ctx) {
+		ctx.fillText(this.text, this.bounds.l, this.bounds.t);
+	},
+	outline: function(ctx) {
+		ctx.strokeText(this.text, this.bounds.l, this.bounds.t);
+	}
+});
diff --git a/html/lib/canvas/package.js b/html/lib/canvas/package.js
new file mode 100644
index 0000000..0c62c5d
--- /dev/null
+++ b/html/lib/canvas/package.js
@@ -0,0 +1,9 @@
+enyo.depends(
+	"Canvas.js",
+	"CanvasControl.js",
+	"Shape.js",
+	"Circle.js",
+	"Rectangle.js",
+	"Text.js",
+	"Image.js"
+);
diff --git a/html/lib/fu/package.js b/html/lib/fu/package.js
new file mode 100644
index 0000000..3d8cebe
--- /dev/null
+++ b/html/lib/fu/package.js
@@ -0,0 +1,3 @@
+enyo.depends(
+	"build/fu.css"
+);
diff --git a/html/lib/fu/source/button.css b/html/lib/fu/source/button.css
new file mode 100644
index 0000000..e478a9d
--- /dev/null
+++ b/html/lib/fu/source/button.css
@@ -0,0 +1,48 @@
+.theme-fu button:focus,
+.theme-fu .button:focus {
+	outline: none;
+}
+
+.theme-fu button,
+.theme-fu .button {
+	position: relative;
+	cursor: pointer;
+	/**/
+	color: #404040;
+	background-color: #CDCDCD;
+	/**/
+	/*margin: 2px 8px 2px 1px;*/
+	padding: 0.5em 0.7em;
+	border: 0;
+	-moz-border-radius: .2em;
+	border-radius: .2em;
+	/**/
+	-webkit-box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.5);
+	-moz-box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.5);
+	box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.5);
+}
+
+.theme-fu.dark button,
+.theme-fu.dark .button {
+	background-color: #484848;
+	color: #ababab;
+}
+
+.theme-fu button:enabled:hover, .theme-fu button:hover, 
+.theme-fu .button:enabled:hover, .theme-fu .button:hover {
+	background-color: #C0C0C0;
+}
+
+.theme-fu.dark button:enabled:hover, .theme-fu.dark button:hover, 
+.theme-fu.dark .button:enabled:hover, .theme-fu.dark .button:hover {
+	background-color: #383838;
+}
+
+.theme-fu button:enabled:active, .theme-fu button:active,
+.theme-fu .active, .theme-fu .button:enabled:active, .theme-fu .button:active {
+	top: 1px;
+	left: 1px;
+	-webkit-box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.5);
+	-moz-box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.5);
+	box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.5);
+}
\ No newline at end of file
diff --git a/html/lib/fu/source/input.css b/html/lib/fu/source/input.css
new file mode 100644
index 0000000..c04e49d
--- /dev/null
+++ b/html/lib/fu/source/input.css
@@ -0,0 +1,30 @@
+/*.theme-fu input:focus,*/
+.theme-fu .input:focus,
+.theme-fu .input.focus {
+	outline: none;
+}
+
+/*.theme-fu input,*/
+.theme-fu .input {
+	padding: 0.6em;
+	border: 0;
+	border-radius: 6px;
+	/**/
+	-webkit-box-shadow: inset 1px 1px 5px rgba(0, 0, 0, 0.5);
+	-moz-box-shadow: inset 1px 1px 5px rgba(0, 0, 0, 0.5);
+	box-shadow: inset 1px 1px 5px rgba(0, 0, 0, 0.5);
+}
+
+/*
+.theme-fu .input:enabled:hover, .theme-fu .input:hover {
+	background-color: #C0C0C0;
+}
+
+.theme-fu active, .theme-fu .input:enabled:active, theme-fu .input:active {
+	top: 1px;
+	left: 1px;
+	-webkit-box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.5);
+	-moz-box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.5);
+	box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.5);
+}
+*/
\ No newline at end of file
diff --git a/html/lib/fu/source/package.js b/html/lib/fu/source/package.js
new file mode 100644
index 0000000..557ba04
--- /dev/null
+++ b/html/lib/fu/source/package.js
@@ -0,0 +1,5 @@
+enyo.depends(
+	"button.css",
+	"input.css",
+	"tab.css"
+);
diff --git a/html/lib/fu/source/tab.css b/html/lib/fu/source/tab.css
new file mode 100644
index 0000000..425e9f1
--- /dev/null
+++ b/html/lib/fu/source/tab.css
@@ -0,0 +1,47 @@
+.theme-fu .tabbar {
+	/*
+	background-color: #C3C3C3;
+	*/
+	white-space: nowrap;
+	position: relative;
+}
+
+.theme-fu .tab.focus, .theme-fu .tab:focus {
+	outline: none;
+}
+
+.theme-fu .tab {
+	cursor: pointer;
+	display: inline-block;
+	white-space: nowrap;
+	/**/
+	color: #606060;
+	background-color: #C3C3C3;
+	/**/
+	margin: 0;
+	padding: 0.5em 0.7em;
+	border: 1px solid rgba(50, 50, 50, 0.2);
+	border-top: none;
+	border-left: none;
+	border-radius: 0 0 5px 5px;
+	/**/
+	box-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.3);
+}
+
+.theme-fu .tab.hover, .tab:enabled:hover {
+	background-color: #C0C0C0;
+}
+
+.theme-fu .tab.active, .theme-fu .active-tab-bg {
+	background-color: #D7D7D7;
+}
+
+.theme-fu .tab.active {
+	/*
+	background-color: #D7D7D7;
+	Xfont-weight: bold;
+	*/
+	box-shadow: none;
+	box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.3);
+	color: Black;
+}
\ No newline at end of file
diff --git a/html/lib/layout/fittable/package.js b/html/lib/layout/fittable/package.js
new file mode 100644
index 0000000..3fae95b
--- /dev/null
+++ b/html/lib/layout/fittable/package.js
@@ -0,0 +1,3 @@
+enyo.depends(
+	"source"
+);
\ No newline at end of file
diff --git a/html/lib/layout/fittable/source/FittableColumns.js b/html/lib/layout/fittable/source/FittableColumns.js
new file mode 100644
index 0000000..d28b6fe
--- /dev/null
+++ b/html/lib/layout/fittable/source/FittableColumns.js
@@ -0,0 +1,41 @@
+/**
+	_enyo.FittableColumns_ provides a container in which items are laid out in a
+	set of vertical columns, with most items having natural size, but one
+	expanding to fill the remaining space. The one that expands is labeled with
+	the attribute _fit: true_.
+
+	For example, the following code will align three components as columns, with
+	the second filling the available container space between the first and third:
+
+		enyo.kind({
+			kind: "FittableColumns",
+			components: [
+				{content: "1"},
+				{content: "2", fit:true},
+				{content: "3"}
+			]
+		});
+
+	Alternatively, you may set a kind's _layoutKind_ property to
+	<a href="#enyo.FittableColumnsLayout">enyo.FittableColumnsLayout</a>
+	to use a different base kind while still employing the fittable	layout
+	strategy, e.g.:
+
+		enyo.kind({
+		  kind: enyo.Control,
+		  layoutKind: "FittableColumnsLayout",
+			components: [
+				{content: "1"},
+				{content: "2", fit:true},
+				{content: "3"}
+			]
+		});
+*/
+
+enyo.kind({
+	name: "enyo.FittableColumns",
+	layoutKind: "FittableColumnsLayout",
+	/** By default, items in columns stretch to fit vertically; set to true to
+		avoid this behavior. */
+	noStretch: false
+});
diff --git a/html/lib/layout/fittable/source/FittableLayout.css b/html/lib/layout/fittable/source/FittableLayout.css
new file mode 100644
index 0000000..cdc24b8
--- /dev/null
+++ b/html/lib/layout/fittable/source/FittableLayout.css
@@ -0,0 +1,69 @@
+.enyo-fittable-rows-layout {
+	position: relative;
+}
+
+.enyo-fittable-rows-layout > * {
+	box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	/* float when not stretched */
+	float: left;
+	clear: both;
+}
+
+/* non-floating when stretched */
+.enyo-fittable-rows-layout.enyo-stretch > * {
+	float: none;
+	clear: none;
+}
+
+/* setting to enforce margin collapsing */
+/* NOTE: rows cannot have margin left/right */
+.enyo-fittable-rows-layout.enyo-stretch.enyo-margin-expand > * {
+	float: left;
+	clear: both;
+	width: 100%;
+	/* note: harsh resets */
+	margin-left: 0 !important;
+	margin-right: 0 !important;
+}
+
+.enyo-fittable-columns-layout {
+	position: relative;
+	text-align: left;
+	white-space: nowrap;
+}
+
+.enyo-fittable-columns-layout.enyo-center {
+	text-align: center;
+}
+
+.enyo-fittable-columns-layout > * {
+	box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	vertical-align: top;
+	display: inline-block;
+	white-space: normal;
+}
+
+.enyo-fittable-columns-layout.enyo-tool-decorator > * {
+	vertical-align: middle;
+}
+
+/* repair clobbered white-space setting for pre, code */
+.enyo-fittable-columns-layout > pre, .enyo-fittable-columns-layout > code {
+	white-space: pre;
+}
+
+.enyo-fittable-columns-layout > .enyo-fittable-columns-layout, .enyo-fittable-columns-layout > .onyx-toolbar-inline {
+	white-space: nowrap;
+}
+
+/* NOTE: columns cannot have margin top/bottom */
+.enyo-fittable-columns-layout.enyo-stretch > * {
+	height: 100%;
+	/* note: harsh resets */
+	margin-top: 0 !important;
+	margin-bottom: 0 !important;
+}
\ No newline at end of file
diff --git a/html/lib/layout/fittable/source/FittableLayout.js b/html/lib/layout/fittable/source/FittableLayout.js
new file mode 100644
index 0000000..6045e65
--- /dev/null
+++ b/html/lib/layout/fittable/source/FittableLayout.js
@@ -0,0 +1,265 @@
+/** 
+	_enyo.FittableLayout_ provides the base positioning and boundary logic for
+	the fittable layout strategy. The fittable layout strategy is based on
+	laying out items in either a set of rows or a set of columns, with most of
+	the items having natural size, but one item expanding to fill the remaining
+	space. The item that expands is labeled with the attribute _fit: true_.
+
+	For example, in the following kind, the second component fills the available
+	space in the container between the first and third components.
+
+		enyo.kind({
+			kind: "FittableRows",
+			components: [
+				{content: "1"},
+				{content: "2", fit:true},
+				{content: "3"}
+			]
+		});
+	
+	<a href="#enyo.FittableColumnsLayout">enyo.FittableColumnsLayout</a> and
+	<a href="#enyo.FittableRowsLayout">enyo.FittableRowsLayout</a> (or their
+	subkinds) are used for layout rather than _enyo.FittableLayout_ because they
+	specify properties that _enyo.FittableLayout_ expects to be available when
+	laying items out.
+*/
+enyo.kind({
+	name: "enyo.FittableLayout",
+	kind: "Layout",
+	//* @protected
+	calcFitIndex: function() {
+		for (var i=0, c$=this.container.children, c; c=c$[i]; i++) {
+			if (c.fit && c.showing) {
+				return i;
+			}
+		}
+	},
+	getFitControl: function() {
+		var c$=this.container.children;
+		var f = c$[this.fitIndex];
+		if (!(f && f.fit && f.showing)) {
+			this.fitIndex = this.calcFitIndex();
+			f = c$[this.fitIndex];
+		}
+		return f;
+	},
+	getLastControl: function() {
+		var c$=this.container.children;
+		var i = c$.length-1;
+		var c = c$[i];
+		while ((c=c$[i]) && !c.showing) {
+			i--;
+		}
+		return c;
+	},
+	_reflow: function(measure, cMeasure, mAttr, nAttr) {
+		this.container.addRemoveClass("enyo-stretch", !this.container.noStretch);
+		var f = this.getFitControl();
+		// no sizing if nothing is fit.
+		if (!f) {
+			return;
+		}
+		//
+		// determine container size, available space
+		var s=0, a=0, b=0, p;
+		var n = this.container.hasNode();
+		// calculate available space
+		if (n) {
+			// measure 1
+			p = enyo.FittableLayout.calcPaddingExtents(n);
+			// measure 2
+			s = n[cMeasure] - (p[mAttr] + p[nAttr]);
+			//console.log("overall size", s);
+		}
+		//
+		// calculate space above fitting control
+		// measure 3
+		var fb = f.getBounds();
+		// offset - container padding.
+		a = fb[mAttr] - ((p && p[mAttr]) || 0);
+		//console.log("above", a);
+		//
+		// calculate space below fitting control
+		var l = this.getLastControl();
+		if (l) {
+			// measure 4
+			var mb = enyo.FittableLayout.getComputedStyleValue(l.hasNode(), "margin", nAttr) || 0;
+			if (l != f) {
+				// measure 5
+				var lb = l.getBounds();
+				// fit offset + size
+				var bf = fb[mAttr] + fb[measure];
+				// last offset + size + ending margin
+				var bl = lb[mAttr] + lb[measure] + mb;
+				// space below is bottom of last item - bottom of fit item.
+				b = bl - bf;
+			} else {
+				b = mb;
+			}
+		}
+		
+		// calculate appropriate size for fit control
+		var fs = s - (a + b);
+		//console.log(f.id, fs);
+		// note: must be border-box;
+		f.applyStyle(measure, fs + "px");
+	},
+	//* @public
+	/**
+		Updates the layout to reflect any changes to contained components or the
+		layout container.
+	*/
+	reflow: function() {
+		if (this.orient == "h") {
+			this._reflow("width", "clientWidth", "left", "right");
+		} else {
+			this._reflow("height", "clientHeight", "top", "bottom");
+		}
+	},
+	statics: {
+		//* @protected
+		_ieCssToPixelValue: function(inNode, inValue) {
+			var v = inValue;
+			// From the awesome hack by Dean Edwards
+			// http://erik.eae.net/archives/2007/07/27/18.54.15/#comment-102291
+			var s = inNode.style;
+			// store style and runtime style values
+			var l = s.left;
+			var rl = inNode.runtimeStyle && inNode.runtimeStyle.left;
+			// then put current style in runtime style.
+			if (rl) {
+				inNode.runtimeStyle.left = inNode.currentStyle.left;
+			}
+			// apply given value and measure its pixel value
+			s.left = v;
+			v = s.pixelLeft;
+			// finally restore previous state
+			s.left = l;
+			if (rl) {
+				s.runtimeStyle.left = rl;
+			}
+			return v;
+		},
+		_pxMatch: /px/i,
+		getComputedStyleValue: function(inNode, inProp, inBoundary, inComputedStyle) {
+			var s = inComputedStyle || enyo.dom.getComputedStyle(inNode);
+			if (s) {
+				return parseInt(s.getPropertyValue(inProp + "-" + inBoundary));
+			} else if (inNode && inNode.currentStyle) {
+				var v = inNode.currentStyle[inProp + enyo.cap(inBoundary)];
+				if (!v.match(this._pxMatch)) {
+					v = this._ieCssToPixelValue(inNode, v);
+				}
+				return parseInt(v);
+			}
+			return 0;
+		},
+		//* Gets the boundaries of a node's margin or padding box.
+		calcBoxExtents: function(inNode, inBox) {
+			var s = enyo.dom.getComputedStyle(inNode);
+			return {
+				top: this.getComputedStyleValue(inNode, inBox, "top", s),
+				right: this.getComputedStyleValue(inNode, inBox, "right", s),
+				bottom: this.getComputedStyleValue(inNode, inBox, "bottom", s),
+				left: this.getComputedStyleValue(inNode, inBox, "left", s)
+			};
+		},
+		//* Gets the calculated padding of a node.
+		calcPaddingExtents: function(inNode) {
+			return this.calcBoxExtents(inNode, "padding");
+		},
+		//* Gets the calculated margin of a node.
+		calcMarginExtents: function(inNode) {
+			return this.calcBoxExtents(inNode, "margin");
+		}
+	}
+});
+
+/** 
+	_enyo.FittableColumnsLayout_ provides a container in which items are laid
+	out in a set of vertical columns, with most of the items having natural
+	size, but one expanding to fill the remaining space. The one that expands is
+	labeled with the attribute _fit: true_.
+
+	_enyo.FittableColumnsLayout_ is meant to be used as a value for the
+	_layoutKind_ property of other kinds. _layoutKind_ provides a way to add
+	layout behavior in a pluggable fashion while retaining the ability to use a
+	specific base kind.
+	
+	For example, the following code will align three components as columns, with
+	the second filling the available container space between the first and third.
+
+		enyo.kind({
+		  kind: enyo.Control,
+		  layoutKind: "FittableColumnsLayout",
+			components: [
+				{content: "1"},
+				{content: "2", fit:true},
+				{content: "3"}
+			]
+		});
+	
+	Alternatively, if a specific base kind is not needed, then instead of
+	setting the _layoutKind_ attribute, you can set the base kind to
+	<a href="#enyo.FittableColumns">enyo.FittableColumns</a>:
+
+		enyo.kind({
+			kind: "FittableColumns",
+			components: [
+				{content: "1"},
+				{content: "2", fit:true},
+				{content: "3"}
+			]
+		});
+*/
+enyo.kind({
+	name: "enyo.FittableColumnsLayout",
+	kind: "FittableLayout",
+	orient: "h",
+	layoutClass: "enyo-fittable-columns-layout"
+});
+
+
+/** 
+	_enyo.FittableRowsLayout_ provides a container in which items are laid out
+	in a set of horizontal rows, with most of the items having natural size, but
+	one expanding to fill the remaining space. The one that expands is labeled
+	with the attribute _fit: true_.
+
+	_enyo.FittableRowsLayout_ is meant to be used as a value for the
+	_layoutKind_ property of other kinds. _layoutKind_ provides a way to add
+	layout behavior in a pluggable fashion while retaining the ability to use a
+	specific base kind.
+
+	For example, the following code will align three components as rows, with
+	the second filling the available container space between the first and third.
+
+		enyo.kind({
+		  kind: enyo.Control,
+		  layoutKind: "FittableRowsLayout",
+			components: [
+				{content: "1"},
+				{content: "2", fit:true},
+				{content: "3"}
+			]
+		});
+
+	Alternatively, if a specific base kind is not needed, then instead of
+	setting the _layoutKind_ attribute, you can set the base kind to
+	<a href="#enyo.FittableRows">enyo.FittableRows</a>:
+
+		enyo.kind({
+			kind: "FittableRows",
+			components: [
+				{content: "1"},
+				{content: "2", fit:true},
+				{content: "3"}
+			]
+		});	
+*/
+enyo.kind({
+	name: "enyo.FittableRowsLayout",
+	kind: "FittableLayout",
+	layoutClass: "enyo-fittable-rows-layout",
+	orient: "v"
+});
diff --git a/html/lib/layout/fittable/source/FittableRows.js b/html/lib/layout/fittable/source/FittableRows.js
new file mode 100644
index 0000000..985f82d
--- /dev/null
+++ b/html/lib/layout/fittable/source/FittableRows.js
@@ -0,0 +1,40 @@
+/**
+	_enyo.FittableRows_ provides a container in which items are laid out in a
+	set	of horizontal rows, with most of the items having natural size, but one
+	expanding to fill the remaining space. The one that expands is labeled with
+	the attribute _fit: true_.
+	
+	For example, the following code will align three components as rows, with
+	the second filling the available container space between the first and third.
+
+		enyo.kind({
+			kind: "FittableRows",
+			components: [
+				{content: "1"},
+				{content: "2", fit:true},
+				{content: "3"}
+			]
+		});
+
+	Alternatively, you may set a kind's _layoutKind_ property to
+	<a href="#enyo.FittableRowsLayout">enyo.FittableRowsLayout</a>
+	to use a different base kind while still employing the fittable layout
+	strategy, e.g.:
+
+		enyo.kind({
+		  kind: enyo.Control,
+		  layoutKind: "FittableRowsLayout",
+			components: [
+				{content: "1"},
+				{content: "2", fit:true},
+				{content: "3"}
+			]
+		});
+*/
+enyo.kind({
+	name: "enyo.FittableRows",
+	layoutKind: "FittableRowsLayout",
+	/** By default, items in rows stretch to fit horizontally; set to true to
+		avoid this behavior. */
+	noStretch: false
+});
diff --git a/html/lib/layout/fittable/source/design.js b/html/lib/layout/fittable/source/design.js
new file mode 100644
index 0000000..ab94505
--- /dev/null
+++ b/html/lib/layout/fittable/source/design.js
@@ -0,0 +1,23 @@
+/** 
+	Description to make fittable kinds available in Ares.
+*/
+Palette.model.push(
+	{name: "fittable", items: [
+		{name: "FittableRows", title: "Vertical stacked layout", icon: "package_new.png", stars: 4.5, version: 2.0, blurb: "Stack of vertical rows, one of which can be made to fit.",
+			inline: {kind: "FittableRows", style: "height: 80px; position: relative;", padding: 4, components: [
+				{style: "background-color: lightblue; border: 1px dotted blue; height: 15px;"},
+				{style: "background-color: lightblue; border: 1px dotted blue;", fit: true},
+				{style: "background-color: lightblue; border: 1px dotted blue; height: 15px;"}
+			]},
+			config: {content: "$name", isContainer: true, kind: "FittableRows", padding: 10, margin: 10}
+		},
+		{name: "FittableColumns", title: "Horizontal stacked layout", icon: "package_new.png", stars: 4.5, version: 2.0, blurb: "Stack of horizontal columns, one of which can be made to fit.",
+			inline: {kind: "FittableColumns", style: "height: 60px; position: relative;", padding: 4, components: [
+				{style: "background-color: lightblue; border: 1px dotted blue; width: 20px;"},
+				{style: "background-color: lightblue; border: 1px dotted blue;", fit: true},
+				{style: "background-color: lightblue; border: 1px dotted blue; width: 20px;"}
+			]},
+			config: {content: "$name", isContainer: true, kind: "FittableColumns", padding: 10, margin: 10}
+		}
+	]}
+);
\ No newline at end of file
diff --git a/html/lib/layout/fittable/source/package.js b/html/lib/layout/fittable/source/package.js
new file mode 100644
index 0000000..74201af
--- /dev/null
+++ b/html/lib/layout/fittable/source/package.js
@@ -0,0 +1,6 @@
+enyo.depends(
+	"FittableLayout.css",
+	"FittableLayout.js",
+	"FittableRows.js",
+	"FittableColumns.js"
+);
\ No newline at end of file
diff --git a/html/lib/layout/list/package.js b/html/lib/layout/list/package.js
new file mode 100644
index 0000000..f1de4f2
--- /dev/null
+++ b/html/lib/layout/list/package.js
@@ -0,0 +1,3 @@
+enyo.depends(
+	"source/"
+);
\ No newline at end of file
diff --git a/html/lib/layout/list/source/AlphaJumpList.js b/html/lib/layout/list/source/AlphaJumpList.js
new file mode 100644
index 0000000..6b6e326
--- /dev/null
+++ b/html/lib/layout/list/source/AlphaJumpList.js
@@ -0,0 +1,37 @@
+/**
+	A control that presents an alphabetic panel that you can select from, in
+	order to perform actions based on the item selected.
+	
+		{kind: "AlphaJumpList", onSetupItem: "setupItem",
+			onAlphaJump: "alphaJump",
+			components: [
+				{name: "divider"},
+				{kind: "onyx.Item"}
+			]
+		}
+	
+*/
+enyo.kind({
+	name: "enyo.AlphaJumpList",
+	kind: "List",
+	//* @protected
+	scrollTools: [
+		{name: "jumper", kind: "AlphaJumper"}
+	],
+	initComponents: function() {
+		this.createChrome(this.scrollTools);
+		this.inherited(arguments);
+	},
+	rendered: function() {
+		this.inherited(arguments);
+		this.centerJumper();
+	},
+	resizeHandler: function() {
+		this.inherited(arguments);
+		this.centerJumper();
+	},
+	centerJumper: function() {
+		var b = this.getBounds(), sb = this.$.jumper.getBounds();
+		this.$.jumper.applyStyle("top", ((b.height - sb.height) / 2) + "px");
+	}
+});
\ No newline at end of file
diff --git a/html/lib/layout/list/source/AlphaJumper.css b/html/lib/layout/list/source/AlphaJumper.css
new file mode 100644
index 0000000..df1265c
--- /dev/null
+++ b/html/lib/layout/list/source/AlphaJumper.css
@@ -0,0 +1,36 @@
+.enyo-alpha-jumper {
+	text-transform: uppercase;
+	font-size: 11px;
+	xborder-radius: 12px;
+	position: absolute;
+	xbackground: white;
+	text-align: center;
+	right: 10px;
+	z-index: 1;
+	color: #333;
+	padding: 0 14px;
+}
+
+.enyo-alpha-jumper > *:first-child {
+	padding-top: 4px;
+	border-radius: 12px 12px 0 0;
+	border-top: 1px solid #333;
+}
+
+.enyo-alpha-jumper > *:last-child {
+	padding-bottom: 4px;
+	border-radius: 0 0 12px 12px;
+	border-bottom: 1px solid #333;
+}
+
+.enyo-alpha-jumper > * {
+	background: #eee;
+	padding: 1px 4px;
+	border-right: 1px solid #333;
+	border-left: 1px solid #333;
+}
+
+.enyo-alpha-jumper > .active {
+	background: #333;
+	color: white;
+}
\ No newline at end of file
diff --git a/html/lib/layout/list/source/AlphaJumper.js b/html/lib/layout/list/source/AlphaJumper.js
new file mode 100644
index 0000000..2f85d00
--- /dev/null
+++ b/html/lib/layout/list/source/AlphaJumper.js
@@ -0,0 +1,70 @@
+enyo.kind({
+	name: "enyo.AlphaJumper",
+	classes: "enyo-alpha-jumper enyo-border-box",
+	published: {
+		marker: null
+	},
+	events: {
+		onAlphaJump: ""
+	},
+	handlers: {
+		ondown: "down",
+		onmove: "move",
+		onup: "up"
+	},
+	initComponents: function() {
+		for (var s="A".charCodeAt(0), i=s; i<s+26; i++) {
+			this.createComponent({content: String.fromCharCode(i)});
+		}
+		this.inherited(arguments);
+	},
+	down: function(inSender, inEvent) {
+		if (this.tracking) {
+			enyo.dispatcher.release();
+		}
+		this.tracking = true;
+		if (this.hasNode()) {
+			var b = this.node.getBoundingClientRect();
+			// IE8 does not return width
+			var w = (b.width === undefined) ? (b.right - b.left) : b.width;
+			this.x = b.left + w/2;
+		}
+		enyo.dispatcher.capture(this);
+		this.track(inEvent);
+	},
+	move: function(inSender, inEvent) {
+		if (this.tracking) {
+			this.track(inEvent);
+		}
+	},
+	up: function() {
+		if (this.tracking) {
+			enyo.dispatcher.release();
+			this.setMarker(null);
+			this.tracking = false;
+		}
+	},
+	track: function(inEvent) {
+		var n = document.elementFromPoint(this.x, inEvent.pageY);
+		var c = this.nodeToControl(n);
+		if (c) {
+			this.setMarker(c);
+		}
+	},
+	nodeToControl: function(inNode) {
+		for (var i=0, c$=this.controls, c; c=c$[i]; i++) {
+			if (inNode == c.hasNode()) {
+				return c;
+			}
+		}
+	},
+	markerChanged: function(inLast) {
+		if (inLast) {
+			inLast.removeClass("active");
+		}
+		if (this.marker) {
+			this.marker.addClass("active");
+			this.doAlphaJump({letter: this.marker.getContent(), index: this.marker.indexInContainer()});
+		}
+	}
+});
\ No newline at end of file
diff --git a/html/lib/layout/list/source/FlyweightRepeater.js b/html/lib/layout/list/source/FlyweightRepeater.js
new file mode 100644
index 0000000..01e6d80
--- /dev/null
+++ b/html/lib/layout/list/source/FlyweightRepeater.js
@@ -0,0 +1,175 @@
+/**
+	A control that displays a repeating list of rows, suitable for displaying
+	medium-sized lists (up to ~100 items). A flyweight strategy is employed to
+	render one set of row controls, as needed, for as many rows as are contained
+	in the repeater.
+
+	The FlyweightRepeater's _components_ block contains the controls to be used
+	for a single row. This set of controls will be rendered for each row. You
+	may customize row rendering by handling the _onSetupItem_ event.
+
+	The controls inside a FlyweightRepeater are non-interactive. This means that
+	calling methods that would normally cause rendering to occur (e.g.,
+	_setContent_) will not do so. However, you can force a row to render by
+	calling	_renderRow(inRow)_.
+	
+	In addition, you can force a row to be temporarily interactive by calling
+	_prepareRow(inRow)_. Call the _lockRow_ method when the	interaction is
+	complete.
+	
+	For more information, see the documentation on
+	[Lists](https://github.com/enyojs/enyo/wiki/Lists)
+	in the Enyo Developer Guide.
+*/
+enyo.kind({
+	name: "enyo.FlyweightRepeater",
+	published: {
+		//* Number of rows to render
+		count: 0,
+		//* If true, multiple selections are allowed
+		multiSelect: false,
+		//* If true, the selected item will toggle
+		toggleSelected: false
+	},
+	events: {
+		/**
+			Fires once per row at render time, with event object: 
+			_{index: <index of row>, selected: <true if row is selected>}_
+		*/
+		onSetupItem: ""
+	},
+	components: [
+		{kind: "Selection", onSelect: "selectDeselect", onDeselect: "selectDeselect"},
+		{name: "client"}
+	],
+	rowOffset: 0,
+	bottomUp: false,
+	//* @protected
+	create: function() {
+		this.inherited(arguments);
+		this.multiSelectChanged();
+	},
+	multiSelectChanged: function() {
+		this.$.selection.setMulti(this.multiSelect);
+	},
+	setupItem: function(inIndex) {
+		this.doSetupItem({index: inIndex, selected: this.isSelected(inIndex)});
+	},
+	//* Renders the list.
+	generateChildHtml: function() {
+		var h = "";
+		this.index = null;
+		// note: can supply a rowOffset 
+		// and indicate if rows should be rendered top down or bottomUp
+		for (var i=0, r=0; i<this.count; i++) {
+			r = this.rowOffset + (this.bottomUp ? this.count - i-1 : i);
+			this.setupItem(r);
+			this.$.client.setAttribute("index", r);
+			h += this.inherited(arguments);
+			this.$.client.teardownRender();
+		}
+		return h;
+	},
+	previewDomEvent: function(inEvent) {
+		var i = this.index = this.rowForEvent(inEvent);
+		inEvent.rowIndex = inEvent.index = i;
+		inEvent.flyweight = this;
+	},
+	decorateEvent: function(inEventName, inEvent, inSender) {
+		// decorate event with index found via dom iff event does not already contain an index.
+		var i = (inEvent && inEvent.index != null) ? inEvent.index : this.index;
+		if (inEvent && i != null) {
+			inEvent.index = i;
+			inEvent.flyweight = this;
+		}
+		this.inherited(arguments);
+	},
+	tap: function(inSender, inEvent) {
+		if (this.toggleSelected) {
+			this.$.selection.toggle(inEvent.index);
+		} else {
+			this.$.selection.select(inEvent.index);
+		}
+	},
+	selectDeselect: function(inSender, inEvent) {
+		this.renderRow(inEvent.key);
+	},
+	//* @public
+	//* Returns the repeater's _selection_ component.
+	getSelection: function() {
+		return this.$.selection;
+	},
+	//* Gets the selection state for the given row index.
+	isSelected: function(inIndex) {
+		return this.getSelection().isSelected(inIndex);
+	},
+	//* Renders the row specified by _inIndex_.
+	renderRow: function(inIndex) {
+		//this.index = null;
+		var node = this.fetchRowNode(inIndex);
+		if (node) {
+			this.setupItem(inIndex);
+			node.innerHTML = this.$.client.generateChildHtml();
+			this.$.client.teardownChildren();
+		}
+	},
+	//* Fetches the DOM node for the given row index.
+	fetchRowNode: function(inIndex) {
+		if (this.hasNode()) {
+			var n$ = this.node.querySelectorAll('[index="' + inIndex + '"]');
+			return n$ && n$[0];
+		}
+	},
+	//* Fetches the DOM node for the given event.
+	rowForEvent: function(inEvent) {
+		var n = inEvent.target;
+		var id = this.hasNode().id;
+		while (n && n.parentNode && n.id != id) {
+			var i = n.getAttribute && n.getAttribute("index");
+			if (i !== null) {
+				return Number(i);
+			}
+			n = n.parentNode;
+		}
+		return -1;
+	},
+	//* Prepares the row specified by _inIndex_ such that changes made to the
+	//* controls inside the repeater will be rendered for the given row.
+	prepareRow: function(inIndex) {
+		var n = this.fetchRowNode(inIndex);
+		enyo.FlyweightRepeater.claimNode(this.$.client, n);
+	},
+	//* Prevents rendering of changes made to controls inside the repeater.
+	lockRow: function() {
+		this.$.client.teardownChildren();
+	},
+	//* Prepares the row specified by _inIndex_ such that changes made to the 
+	//* controls in the row will be rendered in the given row; then performs the
+	//* function _inFunc_, and, finally, locks the row.
+	performOnRow: function(inIndex, inFunc, inContext) {
+		if (inFunc) {
+			this.prepareRow(inIndex);
+			enyo.call(inContext || null, inFunc);
+			this.lockRow();
+		}
+	},
+	statics: {
+		//* Associates a flyweight rendered control (_inControl_) with a
+		//* rendering context specified by _inNode_.
+		claimNode: function(inControl, inNode) {
+			var n = inNode && inNode.querySelectorAll("#" + inControl.id);
+			n = n && n[0];
+			// FIXME: consider controls generated if we found a node or tag: null, the later so can teardown render
+			inControl.generated = Boolean(n || !inControl.tag);
+			inControl.node = n;
+			if (inControl.node) {
+				inControl.rendered();
+			} else {
+				//enyo.log("Failed to find node for",  inControl.id, inControl.generated);
+			}
+			for (var i=0, c$=inControl.children, c; c=c$[i]; i++) {
+				this.claimNode(c, inNode);
+			}
+		}
+	}
+});
\ No newline at end of file
diff --git a/html/lib/layout/list/source/List.css b/html/lib/layout/list/source/List.css
new file mode 100644
index 0000000..72da968
--- /dev/null
+++ b/html/lib/layout/list/source/List.css
@@ -0,0 +1,15 @@
+.enyo-list {
+	position: relative;
+}
+
+.enyo-list-port {
+	overflow: hidden;
+	position: relative;
+	height: 10000000px;
+}
+
+.enyo-list-page {
+	position: absolute;
+	left: 0;
+	right: 0;
+}
\ No newline at end of file
diff --git a/html/lib/layout/list/source/List.js b/html/lib/layout/list/source/List.js
new file mode 100644
index 0000000..c4252b9
--- /dev/null
+++ b/html/lib/layout/list/source/List.js
@@ -0,0 +1,368 @@
+/**
+	A control that displays a scrolling list of rows, suitable for displaying
+	very large lists. _enyo.List_ is optimized such that only a small portion of
+	the list is rendered at a given time. A flyweight pattern is employed, in
+	which controls placed inside the list are created once, but rendered for
+	each list item.  For this reason, it's best to use only simple controls in
+	a List, such as <a href="#enyo.Control">enyo.Control</a> and
+	<a href="#enyo.Image">enyo.Image</a>.
+
+	A List's _components_ block contains the controls to be used for a single
+	row. This set of controls will be rendered for each row. You may customize
+	row rendering by handling the _onSetupItem_ event.
+
+	Events fired from within list rows contain the _index_ property, which may
+	be used to identify the row	from which the event originated.
+
+	The controls inside a List are non-interactive. This means that calling
+	methods that would normally cause rendering to occur (e.g., _setContent_)
+	will not do so. However, you can force a row to render by calling
+	_renderRow(inRow)_.
+
+	In addition, you can force a row to be temporarily interactive by calling
+	_prepareRow(inRow)_. Call the _lockRow_ method when the interaction is
+	complete.
+
+	For more information, see the documentation on
+	[Lists](https://github.com/enyojs/enyo/wiki/Lists)
+	in the Enyo Developer Guide.
+*/
+enyo.kind({
+	name: "enyo.List",
+	kind: "Scroller",
+	classes: "enyo-list",
+	published: {
+		/**
+			The number of rows contained in the list. Note that as the amount of
+			list data changes, _setRows_ can be called to adjust the number of
+			rows. To re-render the list at the current position when the count
+			has changed, call the _refresh_ method.
+		*/
+		count: 0,
+		/**
+			The number of rows to be shown on a given list page segment. 
+			There is generally no need to adjust this value.
+		*/
+		rowsPerPage: 50,
+		/**
+			If true, renders the list such that row 0 is at the bottom of the
+			viewport and the beginning position of the list is scrolled to the
+			bottom
+		*/
+		bottomUp: false,
+		//* If true, multiple selections are allowed
+		multiSelect: false,
+		//* If true, the selected item will toggle
+		toggleSelected: false,
+		//* If true, the list will assume all rows have the same height for optimization
+		fixedHeight: false
+	},
+	events: {
+		/**
+			Fires once per row at render time, with event object:
+			_{index: <index of row>}_
+		*/
+		onSetupItem: ""
+	},
+	handlers: {
+		onAnimateFinish: "animateFinish"
+	},
+	//* @protected
+	rowHeight: 0,
+	listTools: [
+		{name: "port", classes: "enyo-list-port enyo-border-box", components: [
+			{name: "generator", kind: "FlyweightRepeater", canGenerate: false, components: [
+				{tag: null, name: "client"}
+			]},
+			{name: "page0", allowHtml: true, classes: "enyo-list-page"},
+			{name: "page1", allowHtml: true, classes: "enyo-list-page"}
+		]}
+	],
+	create: function() {
+		this.pageHeights = [];
+		this.inherited(arguments);
+		this.getStrategy().translateOptimized = true;
+		this.bottomUpChanged();
+		this.multiSelectChanged();
+		this.toggleSelectedChanged();
+	},
+	createStrategy: function() {
+		this.controlParentName = "strategy";
+		this.inherited(arguments);
+		this.createChrome(this.listTools);
+		this.controlParentName = "client";
+		this.discoverControlParent();
+	},
+	rendered: function() {
+		this.inherited(arguments);
+		this.$.generator.node = this.$.port.hasNode();
+		this.$.generator.generated = true;
+		this.reset();
+	},
+	resizeHandler: function() {
+		this.inherited(arguments);
+		this.refresh();
+	},
+	bottomUpChanged: function() {
+		this.$.generator.bottomUp = this.bottomUp;
+		this.$.page0.applyStyle(this.pageBound, null);
+		this.$.page1.applyStyle(this.pageBound, null);
+		this.pageBound = this.bottomUp ? "bottom" : "top";
+		if (this.hasNode()) {
+			this.reset();
+		}
+	},
+	multiSelectChanged: function() {
+		this.$.generator.setMultiSelect(this.multiSelect);
+	},
+	toggleSelectedChanged: function() {
+		this.$.generator.setToggleSelected(this.toggleSelected);
+	},
+	countChanged: function() {
+		if (this.hasNode()) {
+			this.updateMetrics();
+		}
+	},
+	updateMetrics: function() {
+		this.defaultPageHeight = this.rowsPerPage * (this.rowHeight || 100);
+		this.pageCount = Math.ceil(this.count / this.rowsPerPage);
+		this.portSize = 0;
+		for (var i=0; i < this.pageCount; i++) {
+			this.portSize += this.getPageHeight(i);
+		}
+		this.adjustPortSize();
+	},
+	generatePage: function(inPageNo, inTarget) {
+		this.page = inPageNo;
+		var r = this.$.generator.rowOffset = this.rowsPerPage * this.page;
+		var rpp = this.$.generator.count = Math.min(this.count - r, this.rowsPerPage);
+		var html = this.$.generator.generateChildHtml();
+		inTarget.setContent(html);
+		var pageHeight = inTarget.getBounds().height;
+		// if rowHeight is not set, use the height from the first generated page
+		if (!this.rowHeight && pageHeight > 0) {
+			this.rowHeight = Math.floor(pageHeight / rpp);
+			this.updateMetrics();
+		}
+		// update known page heights
+		if (!this.fixedHeight) {
+			var h0 = this.getPageHeight(inPageNo);
+			if (h0 != pageHeight && pageHeight > 0) {
+				this.pageHeights[inPageNo] = pageHeight;
+				this.portSize += pageHeight - h0;
+			}
+		}
+	},
+	update: function(inScrollTop) {
+		var updated = false;
+		// get page info for position
+		var pi = this.positionToPageInfo(inScrollTop);
+		// zone line position
+		var pos = pi.pos + this.scrollerHeight/2;
+		// leap-frog zone position
+		var k = Math.floor(pos/Math.max(pi.height, this.scrollerHeight) + 1/2) + pi.no;
+		// which page number for page0 (even number pages)?
+		var p = k % 2 == 0 ? k : k-1;
+		if (this.p0 != p && this.isPageInRange(p)) {
+			//this.log("update page0", p);
+			this.generatePage(p, this.$.page0);
+			this.positionPage(p, this.$.page0);
+			this.p0 = p;
+			updated = true;
+		}
+		// which page number for page1 (odd number pages)?
+		p = k % 2 == 0 ? Math.max(1, k-1) : k;
+		// position data page 1
+		if (this.p1 != p && this.isPageInRange(p)) {
+			//this.log("update page1", p);
+			this.generatePage(p, this.$.page1);
+			this.positionPage(p, this.$.page1);
+			this.p1 = p;
+			updated = true;
+		}
+		if (updated && !this.fixedHeight) {
+			this.adjustBottomPage();
+			this.adjustPortSize();
+		}
+	},
+	updateForPosition: function(inPos) {
+		this.update(this.calcPos(inPos));
+	},
+	calcPos: function(inPos) {
+		return (this.bottomUp ? (this.portSize - this.scrollerHeight - inPos) : inPos);
+	},
+	adjustBottomPage: function() {
+		var bp = this.p0 >= this.p1 ? this.$.page0 : this.$.page1;
+		this.positionPage(bp.pageNo, bp);
+	},
+	adjustPortSize: function() {
+		this.scrollerHeight = this.getBounds().height;
+		var s = Math.max(this.scrollerHeight, this.portSize);
+		this.$.port.applyStyle("height", s + "px");
+	},
+	positionPage: function(inPage, inTarget) {
+		inTarget.pageNo = inPage;
+		var y = this.pageToPosition(inPage);
+		inTarget.applyStyle(this.pageBound, y + "px");
+	},
+	pageToPosition: function(inPage) {
+		var y = 0;
+		var p = inPage;
+		while (p > 0) {
+			p--;
+			y += this.getPageHeight(p);
+		}
+		return y;
+	},
+	positionToPageInfo: function(inY) {
+		var page = -1;
+		var p = this.calcPos(inY);
+		var h = this.defaultPageHeight;
+		while (p >= 0) {
+			page++;
+			h = this.getPageHeight(page);
+			p -= h;
+		}
+		//page = Math.min(page, this.pageCount-1);
+		return {no: page, height: h, pos: p+h};
+	},
+	isPageInRange: function(inPage) {
+		return inPage == Math.max(0, Math.min(this.pageCount-1, inPage));
+	},
+	getPageHeight: function(inPageNo) {
+		return this.pageHeights[inPageNo] || this.defaultPageHeight;
+	},
+	invalidatePages: function() {
+		this.p0 = this.p1 = null;
+		// clear the html in our render targets
+		this.$.page0.setContent("");
+		this.$.page1.setContent("");
+	},
+	invalidateMetrics: function() {
+		this.pageHeights = [];
+		this.rowHeight = 0;
+		this.updateMetrics();
+	},
+	scroll: function(inSender, inEvent) {
+		var r = this.inherited(arguments);
+		this.update(this.getScrollTop());
+		return r;
+	},
+	//* @public
+	scrollToBottom: function() {
+		this.update(this.getScrollBounds().maxTop);
+		this.inherited(arguments);
+	},
+	setScrollTop: function(inScrollTop) {
+		this.update(inScrollTop);
+		this.inherited(arguments);
+		this.twiddle();
+	},
+	getScrollPosition: function() {
+		return this.calcPos(this.getScrollTop());
+	},
+	setScrollPosition: function(inPos) {
+		this.setScrollTop(this.calcPos(inPos));
+	},
+	//* Scrolls to a specific row.
+	scrollToRow: function(inRow) {
+		var page = Math.floor(inRow / this.rowsPerPage);
+		var pageRow = inRow % this.rowsPerPage;
+		var h = this.pageToPosition(page);
+		// update the page
+		this.updateForPosition(h);
+		// call pageToPosition again and this time should return the right pos since the page info is populated
+		h = this.pageToPosition(page);
+		this.setScrollPosition(h);
+		if (page == this.p0 || page == this.p1) {
+			var rowNode = this.$.generator.fetchRowNode(inRow);
+			if (rowNode) {
+				// calc row offset
+				var offset = rowNode.offsetTop;
+				if (this.bottomUp) {
+					offset = this.getPageHeight(page) - rowNode.offsetHeight - offset;
+				}
+				var y = this.getScrollPosition() + offset;
+				this.setScrollPosition(y);
+			}
+		}
+	},
+	//* Scrolls to the beginning of the list.
+	scrollToStart: function() {
+		this[this.bottomUp ? "scrollToBottom" : "scrollToTop"]();
+	},
+	//* Scrolls to the end of the list.
+	scrollToEnd: function() {
+		this[this.bottomUp ? "scrollToTop" : "scrollToBottom"]();
+	},
+	//* Re-renders the list at the current position.
+	refresh: function() {
+		this.invalidatePages();
+		this.update(this.getScrollTop());
+		this.stabilize();
+
+		//FIXME: Necessary evil for Android 4.0.4 refresh bug
+		if (enyo.platform.android === 4) {
+			this.twiddle();
+		}
+	},
+	//* Re-renders the list from the beginning.
+	reset: function() {
+		this.getSelection().clear();
+		this.invalidateMetrics();
+		this.invalidatePages();
+		this.stabilize();
+		this.scrollToStart();
+	},
+	/**
+		Returns the _selection_ component that manages the selection state for
+		this list.
+	*/
+	getSelection: function() {
+		return this.$.generator.getSelection();
+	},
+	//* Sets the selection state for the given row index. 
+	select: function(inIndex, inData) {
+		return this.getSelection().select(inIndex, inData);
+	},
+	//* Gets the selection state for the given row index.
+	isSelected: function(inIndex) {
+		return this.$.generator.isSelected(inIndex);
+	},
+	/**
+		Re-renders the specified row. Call after making modifications to a row,
+		to force it to render.
+	*/
+	renderRow: function(inIndex) {
+		this.$.generator.renderRow(inIndex);
+	},
+	//* Prepares the row to become interactive.
+	prepareRow: function(inIndex) {
+		this.$.generator.prepareRow(inIndex);
+	},
+	//* Restores the row to being non-interactive.
+	lockRow: function() {
+		this.$.generator.lockRow();
+	},
+	/**
+		Performs a set of tasks by running the function _inFunc_ on a row (which
+		must be interactive at the time the tasks are performed). Locks the	row
+		when done.
+	*/
+	performOnRow: function(inIndex, inFunc, inContext) {
+		this.$.generator.performOnRow(inIndex, inFunc, inContext);
+	},
+	//* @protected
+	animateFinish: function(inSender) {
+		this.twiddle();
+		return true;
+	},
+	// FIXME: Android 4.04 has issues with nested composited elements; for example, a SwipeableItem, 
+	// can incorrectly generate taps on its content when it has slid off the screen;
+	// we address this BUG here by forcing the Scroller to "twiddle" which corrects the bug by
+	// provoking a dom update.
+	twiddle: function() {
+		var s = this.getStrategy();
+		enyo.call(s, "twiddle");
+	}
+});
diff --git a/html/lib/layout/list/source/PulldownList.css b/html/lib/layout/list/source/PulldownList.css
new file mode 100644
index 0000000..89f6da0
--- /dev/null
+++ b/html/lib/layout/list/source/PulldownList.css
@@ -0,0 +1,60 @@
+.enyo-list-pulldown {
+	position: absolute;
+	bottom: 100%;
+	left: 0;
+	right: 0;
+}
+
+.enyo-puller {
+	position: relative;
+	height: 50px;
+	font-size: 22px;
+	color: #444;
+	padding: 20px 0 0px 34px;
+}
+
+.enyo-puller-text {
+	position: absolute;
+	left: 80px;
+	top: 22px;
+}
+
+.enyo-puller-arrow {
+	position: relative;
+	background: #444;
+	width: 7px;
+	height: 28px;
+	transition: transform 0.3s;
+	-webkit-transition: -webkit-transform 0.3s;
+	-moz-transition: -moz-transform 0.3s;
+	-o-transition: -o-transform 0.3s;
+	-ms-transition: -ms-transform 0.3s;
+}
+
+.enyo-puller-arrow:after {
+	content: " ";
+	height: 0;
+	width: 0;
+	position: absolute;
+	border: 10px solid transparent;
+	border-bottom-color: #444;
+	bottom: 100%;
+	left: 50%;
+	margin-left: -10px;
+}
+
+.enyo-puller-arrow-up {
+	transform: rotate(0deg);
+	-webkit-transform: rotate(0deg);
+	-moz-transform: rotate(0deg);
+	-o-transform: rotate(0deg);
+	-ms-transform: rotate(0deg);
+}
+
+.enyo-puller-arrow-down {
+	transform: rotate(180deg);
+	-webkit-transform: rotate(180deg);
+	-moz-transform: rotate(180deg);
+	-o-transform: rotate(180deg);
+	-ms-transform: rotate(180deg);
+}
\ No newline at end of file
diff --git a/html/lib/layout/list/source/PulldownList.js b/html/lib/layout/list/source/PulldownList.js
new file mode 100644
index 0000000..8d0dab1
--- /dev/null
+++ b/html/lib/layout/list/source/PulldownList.js
@@ -0,0 +1,180 @@
+/**
+A list that provides a pull-to-refresh feature, which allows new data to be
+retrieved and updated in the list.
+
+PulldownList provides the onPullRelease event to allow an application to start
+retrieving new data.  The onPullComplete event indicates that the pull is
+complete and it's time to update the list with the new data.
+
+	{name: "list", kind: "PulldownList", onSetupItem: "setupItem",
+		onPullRelease: "pullRelease", onPullComplete: "pullComplete",
+		components: [
+			{name: "item"}
+		]}
+
+	pullRelease: function() {
+		this.search();
+	},
+	processSearchResults: function(inRequest, inResponse) {
+		this.results = inResponse.results;
+		this.$.list.setCount(this.results.length);
+		this.$.list.completePull();
+	},
+	pullComplete: function() {
+		this.$.list.reset();
+	}
+*/
+enyo.kind({
+	name: "enyo.PulldownList",
+	kind: "List",
+	touch: true,
+	pully: null,
+	pulldownTools: [
+		{name: "pulldown", classes: "enyo-list-pulldown", components: [
+			{name: "puller", kind: "Puller"}
+		]}
+	],
+	events: {
+		onPullStart: "",
+		onPullCancel: "",
+		onPull: "",
+		onPullRelease: "",
+		onPullComplete: ""
+	},
+	handlers: {
+		onScrollStart: "scrollStartHandler",
+		onScroll: "scrollHandler",
+		onScrollStop: "scrollStopHandler",
+		ondragfinish: "dragfinish"
+	},
+	//
+	pullingMessage: "Pull down to refresh...",
+	pulledMessage: "Release to refresh...",
+	loadingMessage: "Loading...",
+	//
+	pullingIconClass: "enyo-puller-arrow enyo-puller-arrow-down",
+	pulledIconClass: "enyo-puller-arrow enyo-puller-arrow-up",
+	loadingIconClass: "",
+	//* @protected
+	create: function() {
+		var p = {kind: "Puller", showing: false, text: this.loadingMessage, iconClass: this.loadingIconClass, onCreate: "setPully"};
+		this.listTools.splice(0, 0, p);
+		this.inherited(arguments);
+		this.setPulling();
+	},
+	initComponents: function() {
+		this.createChrome(this.pulldownTools);
+		this.accel = enyo.dom.canAccelerate();
+		this.translation = this.accel ? "translate3d" : "translate";
+		this.inherited(arguments);
+	},
+	setPully: function(inSender, inEvent) {
+		this.pully = inEvent.originator;
+	},
+	scrollStartHandler: function() {
+		this.firedPullStart = false;
+		this.firedPull = false;
+		this.firedPullCancel = false;
+	},
+	scrollHandler: function(inSender) {
+		if (this.completingPull) {
+			this.pully.setShowing(false);
+		}
+		var s = this.getStrategy().$.scrollMath;
+		var over = s.y;
+		if (s.isInOverScroll() && over > 0) {
+			enyo.dom.transformValue(this.$.pulldown, this.translation, "0," + over + "px" + (this.accel ? ",0" : ""));
+			if (!this.firedPullStart) {
+				this.firedPullStart = true;
+				this.pullStart();
+				this.pullHeight = this.$.pulldown.getBounds().height;
+			}
+			if (over > this.pullHeight && !this.firedPull) {
+				this.firedPull = true;
+				this.firedPullCancel = false;
+				this.pull();
+			}
+			if (this.firedPull && !this.firedPullCancel && over < this.pullHeight) {
+				this.firedPullCancel = true;
+				this.firedPull = false;
+				this.pullCancel();
+			}
+		}
+	},
+	scrollStopHandler: function() {
+		if (this.completingPull) {
+			this.completingPull = false;
+			this.doPullComplete();
+		}
+	},
+	dragfinish: function() {
+		if (this.firedPull) {
+			var s = this.getStrategy().$.scrollMath;
+			s.setScrollY(s.y - this.pullHeight);
+			this.pullRelease();
+		}
+	},
+	//* @public
+	//* To signal that the list should execute pull completion.  This usually be called after the application has received the new data.
+	completePull: function() {
+		this.completingPull = true;
+		this.$.strategy.$.scrollMath.setScrollY(this.pullHeight);
+		this.$.strategy.$.scrollMath.start();
+	},
+	//* @protected
+	pullStart: function() {
+		this.setPulling();
+		this.pully.setShowing(false);
+		this.$.puller.setShowing(true);
+		this.doPullStart();
+	},
+	pull: function() {
+		this.setPulled();
+		this.doPull();
+	},
+	pullCancel: function() {
+		this.setPulling();
+		this.doPullCancel();
+	},
+	pullRelease: function() {
+		this.$.puller.setShowing(false);
+		this.pully.setShowing(true);
+		this.doPullRelease();
+	},
+	setPulling: function() {
+		this.$.puller.setText(this.pullingMessage);
+		this.$.puller.setIconClass(this.pullingIconClass);
+	},
+	setPulled: function() {
+		this.$.puller.setText(this.pulledMessage);
+		this.$.puller.setIconClass(this.pulledIconClass);
+	}
+});
+
+enyo.kind({
+	name: "enyo.Puller",
+	classes: "enyo-puller",
+	published: {
+		text: "",
+		iconClass: ""
+	},
+	events: {
+		onCreate: ""
+	},
+	components: [
+		{name: "icon"},
+		{name: "text", tag: "span", classes: "enyo-puller-text"}
+	],
+	create: function() {
+		this.inherited(arguments);
+		this.doCreate();
+		this.textChanged();
+		this.iconClassChanged();
+	},
+	textChanged: function() {
+		this.$.text.setContent(this.text);
+	},
+	iconClassChanged: function() {
+		this.$.icon.setClasses(this.iconClass);
+	}
+});
\ No newline at end of file
diff --git a/html/lib/layout/list/source/Selection.js b/html/lib/layout/list/source/Selection.js
new file mode 100644
index 0000000..8581f8d
--- /dev/null
+++ b/html/lib/layout/list/source/Selection.js
@@ -0,0 +1,141 @@
+/**
+	_enyo.Selection_ is used to manage row selection state for lists. It
+	provides selection state management for both single-select and multi-select
+	lists.
+
+		// The following is an excerpt from enyo.FlyweightRepeater.
+		enyo.kind({
+			name: "enyo.FlyweightRepeater",
+			...
+			components: [
+				{kind: "Selection", onSelect: "selectDeselect", onDeselect: "selectDeselect"},
+				...
+			],
+			tap: function(inSender, inEvent) {
+				...
+				// mark the tapped row as selected
+				this.$.selection.select(inEvent.index);
+				...
+			},
+			selectDeselect: function(inSender, inEvent) {
+				// this is where a row selection highlight might be applied
+				this.renderRow(inEvent.key);
+			}
+			...
+		})
+*/
+enyo.kind({
+	name: "enyo.Selection",
+	kind: enyo.Component,
+	published: {
+		//* If true, multiple selections are allowed.
+		multi: false
+	},
+	events: {
+		/**
+			Fires when an item is selected.
+
+				{kind: "Selection", onSelect: "selectRow"...
+				...
+				selectRow: function(inSender, inKey, inPrivateData) {
+					...
+
+			_inKey_ is whatever key was used to register 
+			the selection (usually a row index).
+
+			_inPrivateData_ references data registered
+			with this key by the code that made the original selection.
+		*/
+		onSelect: "",
+		/**
+			Fires when an item is deselected.
+
+				{kind: "Selection", onSelect: "deselectRow"...
+				...
+				deselectRow: function(inSender, inKey, inPrivateData)
+					...
+
+			_inKey_ is whatever key was used to request
+			the deselection (usually a row index).
+
+			_inPrivateData_ references data registered
+			with this key by the code that made the selection.
+		*/
+		onDeselect: "",
+		//* Sent when selection changes (but not when the selection is cleared).
+		onChange: ""
+	},
+	//* @protected
+	create: function() {
+		this.clear();
+		this.inherited(arguments);
+	},
+	multiChanged: function() {
+		if (!this.multi) {
+			this.clear();
+		}
+		this.doChange();
+	},
+	highlander: function(inKey) {
+		if (!this.multi) {
+			this.deselect(this.lastSelected);
+		}
+	},
+	//* @public
+	//* Removes all selections.
+	clear: function() {
+		this.selected = {};
+	},
+	//* Returns true if the _inKey_ row is selected.
+	isSelected: function(inKey) {
+		return this.selected[inKey];
+	},
+	//* Manually sets a row's state to selected or unselected.
+	setByKey: function(inKey, inSelected, inData) {
+		if (inSelected) {
+			this.selected[inKey] = (inData || true);
+			this.lastSelected = inKey;
+			this.doSelect({key: inKey, data: this.selected[inKey]});
+		} else {
+			var was = this.isSelected(inKey);
+			delete this.selected[inKey];
+			this.doDeselect({key: inKey, data: was});
+		}
+		this.doChange();
+	},
+	//* Deselects a row.
+	deselect: function(inKey) {
+		if (this.isSelected(inKey)) {
+			this.setByKey(inKey, false);
+		}
+	},
+	/**
+		Selects a row. If the _multi_ property is set to false, _select_ will
+		also deselect the previous selection.
+	*/
+	select: function(inKey, inData) {
+		if (this.multi) {
+			this.setByKey(inKey, !this.isSelected(inKey), inData);
+		} else if (!this.isSelected(inKey)) {
+			this.highlander();
+			this.setByKey(inKey, true, inData);
+		}
+	},
+	/**
+		Toggles selection state for a row. If the _multi_ property is set to
+		false, toggling a selection on will deselect the previous selection.
+	*/
+	toggle: function(inKey, inData) {
+		if (!this.multi && this.lastSelected != inKey) {
+			this.deselect(this.lastSelected);
+		}
+		this.setByKey(inKey, !this.isSelected(inKey), inData);
+	},
+	/**
+		Returns the selection as a hash in which each selected item has a value;
+		unselected items are undefined.
+	*/
+	getSelected: function() {
+		return this.selected;
+	}
+});
diff --git a/html/lib/layout/list/source/package.js b/html/lib/layout/list/source/package.js
new file mode 100644
index 0000000..391e38e
--- /dev/null
+++ b/html/lib/layout/list/source/package.js
@@ -0,0 +1,7 @@
+enyo.depends(
+	"FlyweightRepeater.js",
+	"List.css",
+	"List.js",
+	"PulldownList.css",
+	"PulldownList.js"
+);
\ No newline at end of file
diff --git a/html/lib/layout/list/source/wip-package.js b/html/lib/layout/list/source/wip-package.js
new file mode 100644
index 0000000..bafc093
--- /dev/null
+++ b/html/lib/layout/list/source/wip-package.js
@@ -0,0 +1,6 @@
+enyo.depends(
+	// Add wip controls here
+	"AlphaJumper.css",
+	"AlphaJumper.js",
+	"AlphaJumpList.js"
+);
\ No newline at end of file
diff --git a/html/lib/layout/package.js b/html/lib/layout/package.js
new file mode 100644
index 0000000..7f9777f
--- /dev/null
+++ b/html/lib/layout/package.js
@@ -0,0 +1,7 @@
+enyo.depends(
+	"fittable",
+	"list",
+	"slideable",
+	"panels",
+	"tree"
+);
\ No newline at end of file
diff --git a/html/lib/layout/panels/package.js b/html/lib/layout/panels/package.js
new file mode 100644
index 0000000..f1de4f2
--- /dev/null
+++ b/html/lib/layout/panels/package.js
@@ -0,0 +1,3 @@
+enyo.depends(
+	"source/"
+);
\ No newline at end of file
diff --git a/html/lib/layout/panels/source/Panels.css b/html/lib/layout/panels/source/Panels.css
new file mode 100644
index 0000000..2e79349
--- /dev/null
+++ b/html/lib/layout/panels/source/Panels.css
@@ -0,0 +1,12 @@
+.enyo-panels {
+}
+
+.enyo-panels-fit-narrow {
+}
+
+@media all and (max-width: 800px) {
+	.enyo-panels-fit-narrow > * {
+		min-width: 100%;
+		max-width: 100%;
+	}
+}
\ No newline at end of file
diff --git a/html/lib/layout/panels/source/Panels.js b/html/lib/layout/panels/source/Panels.js
new file mode 100644
index 0000000..d2e2ecc
--- /dev/null
+++ b/html/lib/layout/panels/source/Panels.js
@@ -0,0 +1,386 @@
+/**
+The enyo.Panels kind is designed to satisfy a variety of common use cases for
+application layout.  Using enyo.Panels, controls may be arranged as (among other
+things) a carousel, a set of collapsing panels, a card stack that fades between
+panels, or a grid.
+
+Any Enyo control may be placed inside an enyo.Panels, but by convention we refer
+to each of these controls as a "panel."  From the set of panels in an enyo.Panels,
+one is considered active.  The active panel is set by index using the *setIndex*
+method.  The actual layout of the panels typically changes each time the active
+panel is set, such that the new active panel has the most prominent position.
+
+For more information, see the [Panels documentation](https://github.com/enyojs/enyo/wiki/Panels)
+in the Enyo Developer Guide.
+*/
+enyo.kind({
+	name: "enyo.Panels",
+	classes: "enyo-panels",
+	published: {
+		/**
+			The index of the active panel. The layout of panels is controlled by
+			the layoutKind, but as a rule, the active panel is displayed in the
+			most prominent position. For example, in the (default) CardArranger
+			layout, the active panel is shown and the other panels are hidden.
+		*/
+		index: 0,
+		//* Controls whether the user can drag between panels.
+		draggable: true,
+		//* Controls whether the panels animate when transitioning; for example,
+		//* when _setIndex_ is called.
+		animate: true,
+		//* Controls whether panels "wrap around" when moving past the end. Actual effect depends upon the arranger in use.
+		wrap: false,
+		//* Sets the arranger kind to be used for dynamic layout.
+		arrangerKind: "CardArranger",
+		//* By default, each panel will be sized to fit the Panels' width when 
+		//* the screen size is narrow enough (less than ~800px). Set to false
+		//* to avoid this behavior.
+		narrowFit: true
+	},
+	events: {
+		/**
+			Fires at the start of a panel transition.
+			This event fires when _setIndex_ is called and also during dragging.
+		*/
+		onTransitionStart: "",
+		/**
+			Fires at the end of a panel transition.
+			This event fires when _setIndex_ is called and also during dragging.
+		*/
+		onTransitionFinish: ""
+	},
+	//* @protected
+	handlers: {
+		ondragstart: "dragstart",
+		ondrag: "drag",
+		ondragfinish: "dragfinish"
+	},
+	tools: [
+		{kind: "Animator", onStep: "step", onEnd: "completed"}
+	],
+	fraction: 0,
+	create: function() {
+		this.transitionPoints = [];
+		this.inherited(arguments);
+		this.arrangerKindChanged();
+		this.avoidFitChanged();
+		this.indexChanged();
+	},
+	initComponents: function() {
+		this.createChrome(this.tools);
+		this.inherited(arguments);
+	},
+	arrangerKindChanged: function() {
+		this.setLayoutKind(this.arrangerKind);
+	},
+	avoidFitChanged: function() {
+		this.addRemoveClass("enyo-panels-fit-narrow", this.narrowFit);
+	},
+	removeControl: function(inControl) {
+		this.inherited(arguments);
+		if (this.controls.length > 1 && this.isPanel(inControl)) {
+			this.setIndex(Math.max(this.index - 1, 0));
+			this.flow();
+			this.reflow();
+		}
+	},
+	isPanel: function() {
+		// designed to be overridden in kinds derived from Panels that have 
+		// non-panel client controls
+		return true;
+	},
+	flow: function() {
+		this.arrangements = [];
+		this.inherited(arguments);
+	},
+	reflow: function() {
+		this.arrangements = [];
+		this.inherited(arguments);
+		this.refresh();
+	},
+	//* @public
+	/**
+		Returns an array of contained panels.
+		Subclasses can override this if they don't want the arranger to layout all of their children
+	*/
+	getPanels: function() {
+		var p = this.controlParent || this;
+		return p.children;
+	},
+	//* Returns a reference to the active panel--i.e., the panel at the specified index.
+	getActive: function() {
+		var p$ = this.getPanels();
+		return p$[this.index];
+	},
+	/**
+		Returns a reference to the <a href="#enyo.Animator">enyo.Animator</a> 
+		instance used to animate panel transitions. The Panels' animator can be used
+		to set the duration of panel transitions, e.g.:
+		
+			this.getAnimator().setDuration(1000);
+	*/
+	getAnimator: function() {
+		return this.$.animator;
+	},
+	/**
+		Sets the active panel to the panel specified by the given index.
+		Note that if the _animate_ property is set to true, the active panel 
+		will animate into view.
+	*/
+	setIndex: function(inIndex) {
+		// override setIndex so that indexChanged is called 
+		// whether this.index has actually changed or not
+		this.setPropertyValue("index", inIndex, "indexChanged");
+	},
+	/**
+		Sets the active panel to the panel specified by the given index. 
+		Regardless of the value of the _animate_ property, the transition to the
+		next panel will not animate and will be immediate.
+	*/
+	setIndexDirect: function(inIndex) {
+		this.setIndex(inIndex);
+		this.completed();
+	},
+	//* Transitions to the previous panel--i.e., the panel whose index value is
+	//* one less than that of the current active panel.
+	previous: function() {
+		this.setIndex(this.index-1);
+	},
+	//* Transitions to the next panel--i.e., the panel whose index value is one
+	//* greater than that of the current active panel.
+	next: function() {
+		this.setIndex(this.index+1);
+	},
+	//* @protected
+	clamp: function(inValue) {
+		var l = this.getPanels().length-1;
+		if (this.wrap) {
+			// FIXME: dragging makes assumptions about direction and from->start indexes.
+			//return inValue < 0 ? l : (inValue > l ? 0 : inValue);
+			return inValue;
+		} else {
+			return Math.max(0, Math.min(inValue, l));
+		}
+	},
+	indexChanged: function(inOld) {
+		this.lastIndex = inOld;
+		this.index = this.clamp(this.index);
+		if (!this.dragging) {
+			if (this.$.animator.isAnimating()) {
+				this.completed();
+			}
+			this.$.animator.stop();
+			if (this.hasNode()) {
+				if (this.animate) {
+					this.startTransition();
+					this.$.animator.play({
+						startValue: this.fraction
+					});
+				} else {
+					this.refresh();
+				}
+			}
+		}
+	},
+	step: function(inSender) {
+		this.fraction = inSender.value;
+		this.stepTransition();
+	},
+	completed: function() {
+		if (this.$.animator.isAnimating()) {
+			this.$.animator.stop();
+		}
+		this.fraction = 1;
+		this.stepTransition();
+		this.finishTransition();
+	},
+	dragstart: function(inSender, inEvent) {
+		if (this.draggable && this.layout && this.layout.canDragEvent(inEvent)) {
+			inEvent.preventDefault();
+			this.dragstartTransition(inEvent);
+			this.dragging = true;
+			this.$.animator.stop();
+			return true;
+		}
+	},
+	drag: function(inSender, inEvent) {
+		if (this.dragging) {
+			inEvent.preventDefault();
+			this.dragTransition(inEvent);
+		}
+	},
+	dragfinish: function(inSender, inEvent) {
+		if (this.dragging) {
+			this.dragging = false;
+			inEvent.preventTap();
+			this.dragfinishTransition(inEvent);
+		}
+	},
+	dragstartTransition: function(inEvent) {
+		if (!this.$.animator.isAnimating()) {
+			var f = this.fromIndex = this.index;
+			this.toIndex = f - (this.layout ? this.layout.calcDragDirection(inEvent) : 0);
+		} else {
+			this.verifyDragTransition(inEvent);
+		}
+		this.fromIndex = this.clamp(this.fromIndex);
+		this.toIndex = this.clamp(this.toIndex);
+		//this.log(this.fromIndex, this.toIndex);
+		this.fireTransitionStart();
+		if (this.layout) {
+			this.layout.start();
+		}
+	},
+	dragTransition: function(inEvent) {
+		// note: for simplicity we choose to calculate the distance directly between
+		// the first and last transition point.
+		var d = this.layout ? this.layout.calcDrag(inEvent) : 0;
+		var t$ = this.transitionPoints, s = t$[0], f = t$[t$.length-1];
+		var as = this.fetchArrangement(s);
+		var af = this.fetchArrangement(f);
+		var dx = this.layout ? this.layout.drag(d, s, as, f, af) : 0;
+		var dragFail = d && !dx;
+		if (dragFail) {
+			//this.log(dx, s, as, f, af);
+		}
+		this.fraction += dx;
+		var fr = this.fraction;
+		if (fr > 1 || fr < 0 || dragFail) {
+			if (fr > 0 || dragFail) {
+				this.dragfinishTransition(inEvent);
+			}
+			this.dragstartTransition(inEvent);
+			this.fraction = 0;
+			// FIXME: account for lost fraction
+			//this.dragTransition(inEvent);
+		}
+		this.stepTransition();
+	},
+	dragfinishTransition: function(inEvent) {
+		this.verifyDragTransition(inEvent);
+		this.setIndex(this.toIndex);
+		// note: if we're still dragging, then we're at a transition boundary 
+		// and should fire the finish event
+		if (this.dragging) {
+			this.fireTransitionFinish();
+		}
+	},
+	verifyDragTransition: function(inEvent) {
+		var d = this.layout ? this.layout.calcDragDirection(inEvent) : 0;
+		var f = Math.min(this.fromIndex, this.toIndex);
+		var t = Math.max(this.fromIndex, this.toIndex);
+		if (d > 0) {
+			var s = f;
+			f = t;
+			t = s;
+		}
+		if (f != this.fromIndex) {
+			this.fraction = 1 - this.fraction;
+		}
+		//this.log("old", this.fromIndex, this.toIndex, "new", f, t);
+		this.fromIndex = f;
+		this.toIndex = t;
+	},
+	refresh: function() {
+		if (this.$.animator.isAnimating()) {
+			this.$.animator.stop();
+		}
+		this.startTransition();
+		this.fraction = 1;
+		this.stepTransition();
+		this.finishTransition();
+	},
+	startTransition: function() {
+		this.fromIndex = this.fromIndex != null ? this.fromIndex : this.lastIndex || 0;
+		this.toIndex = this.toIndex != null ? this.toIndex : this.index;
+		//this.log(this.id, this.fromIndex, this.toIndex);
+		if (this.layout) {
+			this.layout.start();
+		}
+		this.fireTransitionStart();
+	},
+	finishTransition: function() {
+		if (this.layout) {
+			this.layout.finish();
+		}
+		this.transitionPoints = [];
+		this.fraction = 0;
+		this.fromIndex = this.toIndex = null;
+		this.fireTransitionFinish();
+	},
+	fireTransitionStart: function() {
+		var t = this.startTransitionInfo;
+		if (this.hasNode() && (!t || (t.fromIndex != this.fromIndex || t.toIndex != this.toIndex))) {
+			this.startTransitionInfo = {fromIndex: this.fromIndex, toIndex: this.toIndex};
+			this.doTransitionStart(enyo.clone(this.startTransitionInfo));
+		}
+	},
+	fireTransitionFinish: function() {
+		var t = this.finishTransitionInfo;
+		if (this.hasNode() && (!t || (t.fromIndex != this.lastIndex || t.toIndex != this.index))) {
+			this.finishTransitionInfo = {fromIndex: this.lastIndex, toIndex: this.index};
+			this.doTransitionFinish(enyo.clone(this.finishTransitionInfo));
+		}
+		this.lastIndex=this.index;
+	},
+	// gambit: we interpolate between arrangements as needed.
+	stepTransition: function() {
+		if (this.hasNode()) {
+			// select correct transition points and normalize fraction.
+			var t$ = this.transitionPoints;
+			var r = (this.fraction || 0) * (t$.length-1);
+			var i = Math.floor(r);
+			r = r - i;
+			var s = t$[i], f = t$[i+1];
+			// get arrangements and lerp between them
+			var s0 = this.fetchArrangement(s);
+			var s1 = this.fetchArrangement(f);
+			this.arrangement = s0 && s1 ? enyo.Panels.lerp(s0, s1, r) : (s0 || s1);
+			if (this.arrangement && this.layout) {
+				this.layout.flowArrangement();
+			}
+		}
+	},
+	fetchArrangement: function(inName) {
+		if ((inName != null) && !this.arrangements[inName] && this.layout) {
+			this.layout._arrange(inName);
+			this.arrangements[inName] = this.readArrangement(this.getPanels());
+		}
+		return this.arrangements[inName];
+	},
+	readArrangement: function(inC) {
+		var r = [];
+		for (var i=0, c$=inC, c; (c=c$[i]); i++) {
+			r.push(enyo.clone(c._arranger));
+		}
+		return r;
+	},
+	statics: {
+		isScreenNarrow: function() {
+			return enyo.dom.getWindowWidth() <= 800;
+		},
+		lerp: function(inA0, inA1, inFrac) {
+			var r = [];
+			for (var i=0, k$=enyo.keys(inA0), k; (k=k$[i]); i++) {
+				r.push(this.lerpObject(inA0[k], inA1[k], inFrac));
+			}
+			return r;
+		},
+		lerpObject: function(inNew, inOld, inFrac) {
+			var b = enyo.clone(inNew), n, o;
+			// inOld might be undefined when deleting panels
+			if (inOld) {
+				for (var i in inNew) {
+					n = inNew[i];
+					o = inOld[i];
+					if (n != o) {
+						b[i] = n - (n - o) * inFrac;
+					}
+				}
+			}
+			return b;
+		}
+	}
+});
+
diff --git a/html/lib/layout/panels/source/arrangers/Arranger.css b/html/lib/layout/panels/source/arrangers/Arranger.css
new file mode 100644
index 0000000..4d23be0
--- /dev/null
+++ b/html/lib/layout/panels/source/arrangers/Arranger.css
@@ -0,0 +1,29 @@
+.enyo-arranger {
+	position: relative;
+	overflow: hidden;
+}
+
+.enyo-arranger.enyo-fit {
+	position: absolute;
+}
+
+.enyo-arranger > * {
+	position: absolute;
+	left: 0;
+	top: 0;
+	box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+}
+
+.enyo-arranger-fit > * {
+	/*
+	override any width/height set on panels
+	*/
+	width: 100% !important;
+	height: 100% !important;
+	min-width: 0 !important;
+	max-width: auto !important;
+	min-height: 0 !important;
+	max-height: auto !important;
+}
diff --git a/html/lib/layout/panels/source/arrangers/Arranger.js b/html/lib/layout/panels/source/arrangers/Arranger.js
new file mode 100644
index 0000000..b10f6b8
--- /dev/null
+++ b/html/lib/layout/panels/source/arrangers/Arranger.js
@@ -0,0 +1,226 @@
+/**
+	_enyo.Arranger_ is an <a href="#enyo.Layout">enyo.Layout</a> that considers
+	one of the controls it lays out as active. The other controls are placed
+	relative to the active control as makes sense for the layout.
+
+	Arranger supports dynamic layouts, meaning it's possible to transition
+	between its layouts	via animation. Typically, arrangers should lay out
+	controls using CSS transforms, since these are optimized for animation. To
+	support this, the controls in an Arranger are absolutely positioned, and
+	the Arranger kind has an `accelerated` property, which marks controls for
+	CSS compositing. The default setting of "auto" ensures that this will occur
+	if enabled by the platform.
+
+	For more information, see the documentation on
+	[Arrangers](https://github.com/enyojs/enyo/wiki/Arrangers)
+	in the Enyo	Developer Guide.
+*/
+enyo.kind({
+	name: "enyo.Arranger",
+	kind: "Layout",
+	layoutClass: "enyo-arranger",
+	/**
+		Sets controls being laid out to use CSS compositing. A setting of "auto"
+		will mark controls for compositing if the platform supports it.
+	*/
+	accelerated: "auto",
+	//* Property of the drag event used to calculate the amount a drag moves the layout
+	dragProp: "ddx",
+	//* Property of the drag event used to calculate the direction of a drag
+	dragDirectionProp: "xDirection",
+	//* Property of the drag event used to calculate whether a drag should occur
+	canDragProp: "horizontal",
+	/**
+		If set to true, transitions between non-adjacent arrangements will go
+		through the intermediate arrangements. This is useful when direct
+		transitions between arrangements would be visually jarring.
+	*/
+	incrementalPoints: false,
+	/**
+		Called when removing an arranger (for example, when switching a Panels
+		control to a different arrangerKind). Subclasses should implement this
+		function to reset whatever properties they've changed on child controls.
+		You *must* call the superclass implementation in your subclass's
+		_destroy_ function.
+	*/
+	destroy: function() {
+		var c$ = this.container.getPanels();
+		for (var i=0, c; c=c$[i]; i++) {
+			c._arranger = null;
+		}
+		this.inherited(arguments);
+	},
+	//* @public
+	/**
+		Arranges the given array of controls (_inC_) in the layout specified by
+		_inName_. When implementing this method, rather than apply styling
+		directly to controls, call _arrangeControl(inControl, inArrangement)_
+		with an _inArrangement_	object with styling settings. These will then be
+		applied via the	_flowControl(inControl, inArrangement)_ method.
+	*/
+	arrange: function(inC, inName) {
+	},
+	/**
+		Sizes the controls in the layout. This method is called only at reflow
+		time. Note that sizing is separated from other layout done in the
+		_arrange_ method because it is expensive and not suitable for dynamic
+		layout.
+	*/
+	size: function() {
+	},
+	/**
+		Called when a layout transition begins. Implement this method to perform
+		tasks that should only occur when a transition starts; for example, some
+		controls could be shown or hidden. In addition, the	_transitionPoints_
+		array may be set on the container to dictate the named arrangments
+		between which the transition occurs.
+	*/
+	start: function() {
+		var f = this.container.fromIndex, t = this.container.toIndex;
+		var p$ = this.container.transitionPoints = [f];
+		// optionally add a transition point for each index between from and to.
+		if (this.incrementalPoints) {
+			var d = Math.abs(t - f) - 2;
+			var i = f;
+			while (d >= 0) {
+				i = i + (t < f ? -1 : 1);
+				p$.push(i);
+				d--;
+			}
+		}
+		p$.push(this.container.toIndex);
+	},
+	/**
+		Called when a layout transition completes. Implement this method to
+		perform tasks that should only occur when a transition ends; for
+		example, some controls could be shown or hidden.
+	*/
+	finish: function() {
+	},
+	//* @protected
+	canDragEvent: function(inEvent) {
+		return inEvent[this.canDragProp];
+	},
+	calcDragDirection: function(inEvent) {
+		return inEvent[this.dragDirectionProp];
+	},
+	calcDrag: function(inEvent) {
+		return inEvent[this.dragProp];
+	},
+	drag: function(inDp, inAn, inA, inBn, inB) {
+		var f = this.measureArrangementDelta(-inDp, inAn, inA, inBn, inB);
+		return f;
+	},
+	measureArrangementDelta: function(inX, inI0, inA0, inI1, inA1) {
+		var d = this.calcArrangementDifference(inI0, inA0, inI1, inA1);
+		var s = d ? inX / Math.abs(d) : 0;
+		s = s * (this.container.fromIndex > this.container.toIndex ? -1 : 1);
+		//enyo.log("delta", s);
+		return s;
+	},
+	//* @public
+	/**
+	Called when dragging the layout, this method returns the difference in
+	pixels between the arrangement _inA0_ for layout setting _inI0_	and
+	arrangement _inA1_ for layout setting _inI1_. This data is used to calculate
+	the percentage that a drag should move the layout between two active states.
+	*/
+	calcArrangementDifference: function(inI0, inA0, inI1, inA1) {
+	},
+	//* @protected
+	_arrange: function(inIndex) {
+		var c$ = this.getOrderedControls(inIndex);
+		this.arrange(c$, inIndex);
+	},
+	arrangeControl: function(inControl, inArrangement) {
+		inControl._arranger = enyo.mixin(inControl._arranger || {}, inArrangement);
+	},
+	flow: function() {
+		this.c$ = [].concat(this.container.getPanels());
+		this.controlsIndex = 0;
+		for (var i=0, c$=this.container.getPanels(), c; c=c$[i]; i++) {
+			enyo.dom.accelerate(c, this.accelerated);
+			if (enyo.platform.safari) {
+				// On Safari-desktop, sometimes having the panel's direct child set to accelerate isn't sufficient
+				// this is most often the case with Lists contained inside another control, inside a Panels
+				var grands=c.children;
+				for (var j=0, kid; kid=grands[j]; j++) {
+					enyo.dom.accelerate(kid, this.accelerated);
+				}
+			} 
+		}
+	},
+	reflow: function() {
+		var cn = this.container.hasNode();
+		this.containerBounds = cn ? {width: cn.clientWidth, height: cn.clientHeight} : {};
+		this.size();
+	},
+	flowArrangement: function() {
+		var a = this.container.arrangement;
+		if (a) {
+			for (var i=0, c$=this.container.getPanels(), c; c=c$[i]; i++) {
+				this.flowControl(c, a[i]);
+			}
+		}
+	},
+	//* @public
+	/**
+		Lays out the control (_inControl_) according to the settings stored in
+		the	_inArrangment_ object. By default, _flowControl_ will apply settings
+		of left, top, and opacity. This method should only be implemented to
+		apply other settings made via _arrangeControl_.
+	*/
+	flowControl: function(inControl, inArrangement) {
+		enyo.Arranger.positionControl(inControl, inArrangement);
+		var o = inArrangement.opacity;
+		if (o != null) {
+			enyo.Arranger.opacifyControl(inControl, o);
+		}
+	},
+	//* @protected
+	// Gets an array of controls arranged in state order.
+	// note: optimization, dial around a single array.
+	getOrderedControls: function(inIndex) {
+		var whole = Math.floor(inIndex);
+		var a = whole - this.controlsIndex;
+		var sign = a > 0;
+		var c$ = this.c$ || [];
+		for (var i=0; i<Math.abs(a); i++) {
+			if (sign) {
+				c$.push(c$.shift());
+			} else {
+				c$.unshift(c$.pop());
+			}
+		}
+		this.controlsIndex = whole;
+		return c$;
+	},
+	statics: {
+		// Positions a control via transform: translateX/Y if supported and falls back to left/top if not.
+		positionControl: function(inControl, inBounds, inUnit) {
+			var unit = inUnit || "px";
+			if (!this.updating) {
+				if (enyo.dom.canTransform() && !enyo.platform.android) {
+					var l = inBounds.left, t = inBounds.top;
+					var l = enyo.isString(l) ? l : l && (l + unit);
+					var t = enyo.isString(t) ? t : t && (t + unit);
+					enyo.dom.transform(inControl, {translateX: l || null, translateY: t || null});
+				} else {
+					inControl.setBounds(inBounds, inUnit);
+				}
+			}
+		},
+		opacifyControl: function(inControl, inOpacity) {
+			var o = inOpacity;
+			// FIXME: very high/low settings of opacity can cause a control to
+			// blink so cap this here.
+			o = o > .99 ? 1 : (o < .01 ? 0 : o);
+			// note: we only care about ie8
+			if (enyo.platform.ie < 9) {
+				inControl.applyStyle("filter", "progid:DXImageTransform.Microsoft.Alpha(Opacity=" + (o * 100) + ")");
+			} else {
+				inControl.applyStyle("opacity", o);
+			}
+		}
+	}
+});
diff --git a/html/lib/layout/panels/source/arrangers/CardArranger.js b/html/lib/layout/panels/source/arrangers/CardArranger.js
new file mode 100644
index 0000000..28b94b2
--- /dev/null
+++ b/html/lib/layout/panels/source/arrangers/CardArranger.js
@@ -0,0 +1,49 @@
+/**
+	_enyo.CardArranger_ is an <a href="#enyo.Arranger">enyo.Arranger</a> that
+	displays only one active control. The non-active controls are hidden with
+	_setShowing(false)_. Transitions between arrangements are handled by fading
+	from one control to the next.
+*/
+enyo.kind({
+	name: "enyo.CardArranger",
+	kind: "Arranger",
+	layoutClass: "enyo-arranger enyo-arranger-fit",
+	calcArrangementDifference: function(inI0, inA0, inI1, inA1) {
+		return this.containerBounds.width;
+	},
+	arrange: function(inC, inName) {
+		for (var i=0, c, b, v; c=inC[i]; i++) {
+			v = (i == 0) ? 1 : 0;
+			this.arrangeControl(c, {opacity: v});
+		}
+	},
+	start: function() {
+		this.inherited(arguments);
+		var c$ = this.container.getPanels();
+		for (var i=0, c; c=c$[i]; i++) {
+			var wasShowing=c.showing;
+			c.setShowing(i == this.container.fromIndex || i == (this.container.toIndex));
+			if (c.showing && !wasShowing) {
+				c.resized();
+			}
+		}
+		
+	},
+	finish: function() {
+		this.inherited(arguments);
+		var c$ = this.container.getPanels();
+		for (var i=0, c; c=c$[i]; i++) {
+			c.setShowing(i == this.container.toIndex);
+		}
+	},
+	destroy: function() {
+		var c$ = this.container.getPanels();
+		for (var i=0, c; c=c$[i]; i++) {
+			enyo.Arranger.opacifyControl(c, 1);
+			if (!c.showing) {
+				c.setShowing(true);
+			}
+		}
+		this.inherited(arguments);
+	}
+});
diff --git a/html/lib/layout/panels/source/arrangers/CardSlideInArranger.js b/html/lib/layout/panels/source/arrangers/CardSlideInArranger.js
new file mode 100644
index 0000000..7700557
--- /dev/null
+++ b/html/lib/layout/panels/source/arrangers/CardSlideInArranger.js
@@ -0,0 +1,62 @@
+/**
+	_enyo.CardSlideInArranger_ is an <a href="#enyo.Arranger">enyo.Arranger</a>
+	that displays only one active control. The non-active controls are hidden
+	with _setShowing(false)_. Transitions between arrangements are handled by
+	sliding the new control	over the current one.
+	
+	Note that CardSlideInArranger always slides controls in from the right. If 	
+	you want an arranger that slides to the right and left, try 
+	<a href="#enyo.LeftRightArranger">enyo.LeftRightArranger</a>.
+*/
+enyo.kind({
+	name: "enyo.CardSlideInArranger",
+	kind: "CardArranger",
+	start: function() {
+		var c$ = this.container.getPanels();
+		for (var i=0, c; c=c$[i]; i++) {
+			var wasShowing=c.showing;
+			c.setShowing(i == this.container.fromIndex || i == (this.container.toIndex));
+			if (c.showing && !wasShowing) {
+				c.resized();
+			}
+		}
+		var l = this.container.fromIndex;
+		var i = this.container.toIndex;
+		this.container.transitionPoints = [
+			i + "." + l + ".s",
+			i + "." + l + ".f"
+		];
+	},
+	finish: function() {
+		this.inherited(arguments);
+		var c$ = this.container.getPanels();
+		for (var i=0, c; c=c$[i]; i++) {
+			c.setShowing(i == this.container.toIndex);
+		}
+	},
+	arrange: function(inC, inName) {
+		var p = inName.split(".");
+		var f = p[0], s= p[1], starting = (p[2] == "s");
+		var b = this.containerBounds.width;
+		for (var i=0, c$=this.container.getPanels(), c, v; c=c$[i]; i++) {
+			v = b;
+			if (s == i) {
+				v = starting ? 0 : -b;
+			}
+			if (f == i) {
+				v = starting ? b : 0;
+			}
+			if (s == i && s == f) {
+				v = 0;
+			}
+			this.arrangeControl(c, {left: v});
+		}
+	},
+	destroy: function() {
+		var c$ = this.container.getPanels();
+		for (var i=0, c; c=c$[i]; i++) {
+			enyo.Arranger.positionControl(c, {left: null});
+		}
+		this.inherited(arguments);
+	}
+});
diff --git a/html/lib/layout/panels/source/arrangers/CarouselArranger.js b/html/lib/layout/panels/source/arrangers/CarouselArranger.js
new file mode 100644
index 0000000..3a2f26a
--- /dev/null
+++ b/html/lib/layout/panels/source/arrangers/CarouselArranger.js
@@ -0,0 +1,109 @@
+/**
+	_enyo.CarouselArranger_ is an <a href="#enyo.Arranger">enyo.Arranger</a>
+	that displays the active control, along with some number of inactive
+	controls to fill the available space. The active control is positioned on
+	the left side of the container, and the rest of the views are laid out to
+	the right.
+
+	One of the controls may have _fit: true_ set, in which case it will take up
+	any remaining space after all of the other controls have been sized.
+
+	For best results with CarouselArranger, you should set a minimum width for
+	each control via a CSS style, e.g., _min-width: 25%_ or _min-width: 250px_.
+
+	Transitions between arrangements are handled by sliding the new controls in
+	from the right and sliding the old controls off to the left.
+*/
+enyo.kind({
+	name: "enyo.CarouselArranger",
+	kind: "Arranger",
+	size: function() {
+		var c$ = this.container.getPanels();
+		var padding = this.containerPadding = this.container.hasNode() ? enyo.FittableLayout.calcPaddingExtents(this.container.node) : {};
+		var pb = this.containerBounds;
+		pb.height -= padding.top + padding.bottom;
+		pb.width -= padding.left + padding.right;
+		// used space
+		var fit;
+		for (var i=0, s=0, m, c; c=c$[i]; i++) {
+			m = enyo.FittableLayout.calcMarginExtents(c.hasNode());
+			c.width = c.getBounds().width;
+			c.marginWidth = m.right + m.left;
+			s += (c.fit ? 0 : c.width) + c.marginWidth;
+			if (c.fit) {
+				fit = c;
+			}
+		}
+		if (fit) {
+				var w = pb.width - s;
+				fit.width = w >= 0 ? w : fit.width;
+			}
+		for (var i=0, e=padding.left, m, c; c=c$[i]; i++) {
+			c.setBounds({top: padding.top, bottom: padding.bottom, width: c.fit ? c.width : null});
+		}
+	},
+	arrange: function(inC, inName) {
+		if (this.container.wrap) {
+			this.arrangeWrap(inC, inName);
+		} else {
+			this.arrangeNoWrap(inC, inName);
+		}
+	},
+	arrangeNoWrap: function(inC, inName) {
+		var c$ = this.container.getPanels();
+		var s = this.container.clamp(inName);
+		var nw = this.containerBounds.width;
+		// do we have enough content to fill the width?
+		for (var i=s, cw=0, c; c=c$[i]; i++) {
+			cw += c.width + c.marginWidth;
+			if (cw > nw) {
+				break;
+			}
+		}
+		// if content width is less than needed, adjust starting point index and offset
+		var n = nw - cw;
+		var o = 0;
+		if (n > 0) {
+			var s1 = s;
+			for (var i=s-1, aw=0, c; c=c$[i]; i--) {
+				aw += c.width + c.marginWidth;
+				if (n - aw <= 0) {
+					o = (n - aw);
+					s = i;
+					break;
+				}
+			}
+		}
+		// arrange starting from needed index with detected offset so we fill space
+		for (var i=0, e=this.containerPadding.left + o, w, c; c=c$[i]; i++) {
+			w = c.width + c.marginWidth;
+			if (i < s) {
+				this.arrangeControl(c, {left: -w});
+			} else {
+				this.arrangeControl(c, {left: Math.floor(e)});
+				e += w;
+			}
+		}
+	},
+	arrangeWrap: function(inC, inName) {
+		for (var i=0, e=this.containerPadding.left, m, c; c=inC[i]; i++) {
+			this.arrangeControl(c, {left: e});
+			e += c.width + c.marginWidth;
+		}
+	},
+	calcArrangementDifference: function(inI0, inA0, inI1, inA1) {
+		var i = Math.abs(inI0 % this.c$.length);
+		return inA0[i].left - inA1[i].left;
+	},
+	destroy: function() {
+		var c$ = this.container.getPanels();
+		for (var i=0, c; c=c$[i]; i++) {
+			enyo.Arranger.positionControl(c, {left: null, top: null});
+			c.applyStyle("top", null);
+			c.applyStyle("bottom", null);
+			c.applyStyle("left", null);
+			c.applyStyle("width", null);
+		}
+		this.inherited(arguments);
+	}	
+});
diff --git a/html/lib/layout/panels/source/arrangers/CollapsingArranger.js b/html/lib/layout/panels/source/arrangers/CollapsingArranger.js
new file mode 100644
index 0000000..799c94b
--- /dev/null
+++ b/html/lib/layout/panels/source/arrangers/CollapsingArranger.js
@@ -0,0 +1,80 @@
+/**
+	_enyo.CollapsingArranger_ is an <a href="#enyo.Arranger">enyo.Arranger</a>
+	that displays the active control, along with some number of inactive
+	controls to fill the available space. The active control is positioned on
+	the left side of the container and the rest of the views are laid out to the
+	right. The last control, if visible, will expand to fill whatever space is
+	not taken up by the previous controls.
+
+	For best results with CollapsingArranger, you should set a minimum width
+	for each control via a CSS style, e.g., _min-width: 25%_ or
+	_min-width: 250px_.
+
+	Transitions between arrangements are handled by sliding the new control	in
+	from the right and collapsing the old control to the left.
+*/
+enyo.kind({
+	name: "enyo.CollapsingArranger",
+	kind: "CarouselArranger",
+	size: function() {
+		this.clearLastSize();
+		this.inherited(arguments);
+	},
+	//* @protected
+	// clear size from last if it's not actually the last
+	// (required for adding another control)
+	clearLastSize: function() {
+		for (var i=0, c$=this.container.getPanels(), c; c=c$[i]; i++) {
+			if (c._fit && i != c$.length-1) {
+				c.applyStyle("width", null);
+				c._fit = null;
+			}
+		}
+	},
+	//* @public
+	arrange: function(inC, inIndex) {
+		var c$ = this.container.getPanels();
+		for (var i=0, e=this.containerPadding.left, m, c; c=c$[i]; i++) {
+			this.arrangeControl(c, {left: e});
+			if (i >= inIndex) {
+				e += c.width + c.marginWidth;
+			}
+			// FIXME: overdragging-ish
+			if (i == c$.length - 1 && inIndex < 0) {
+				this.arrangeControl(c, {left: e - inIndex});
+			}
+		}
+	},
+	calcArrangementDifference: function(inI0, inA0, inI1, inA1) {
+		var i = this.container.getPanels().length-1;
+		return Math.abs(inA1[i].left - inA0[i].left);
+	},
+	flowControl: function(inControl, inA) {
+		this.inherited(arguments);
+		if (this.container.realtimeFit) {
+			var c$ = this.container.getPanels();
+			var l = c$.length-1;
+			var last = c$[l];
+			if (inControl == last) {
+				this.fitControl(inControl, inA.left);
+			}
+		}
+		
+	},
+	finish: function() {
+		this.inherited(arguments);
+		if (!this.container.realtimeFit && this.containerBounds) {
+			var c$ = this.container.getPanels();
+			var a$ = this.container.arrangement;
+			var l = c$.length-1;
+			var c = c$[l];
+			this.fitControl(c, a$[l].left);
+		}
+	},
+	//* @protected
+	fitControl: function(inControl, inOffset) {
+		inControl._fit = true;
+		inControl.applyStyle("width", (this.containerBounds.width - inOffset) + "px");
+		inControl.resized();
+	}
+});
diff --git a/html/lib/layout/panels/source/arrangers/OtherArrangers.js b/html/lib/layout/panels/source/arrangers/OtherArrangers.js
new file mode 100644
index 0000000..533bac3
--- /dev/null
+++ b/html/lib/layout/panels/source/arrangers/OtherArrangers.js
@@ -0,0 +1,202 @@
+/**
+	_enyo.LeftRightArranger_ is an <a href="#enyo.Arranger">enyo.Arranger</a>
+	that displays the active control and some of the previous and next controls.
+	The active control is centered horizontally in the container, and the
+	previous and next controls are laid out to the left and right, respectively.
+
+	Transitions between arrangements are handled by sliding the new control
+	in from the right and sliding the active control out to the left.
+*/
+enyo.kind({
+	name: "enyo.LeftRightArranger",
+	kind: "Arranger",
+	//* The margin width (i.e., how much of the previous and next controls
+	//* are visible) in pixels 
+	margin: 40,
+	//* @protected
+	axisSize: "width",
+	offAxisSize: "height",
+	axisPosition: "left",
+	constructor: function() {
+		this.inherited(arguments);
+		this.margin = this.container.margin != null ? this.container.margin : this.margin;
+	},
+	//* @public
+	size: function() {
+		var c$ = this.container.getPanels();
+		var port = this.containerBounds[this.axisSize];
+		var box = port - this.margin -this.margin;
+		for (var i=0, b, c; c=c$[i]; i++) {
+			b = {};
+			b[this.axisSize] = box;
+			b[this.offAxisSize] = "100%";
+			c.setBounds(b);
+		}
+	},
+	arrange: function(inC, inIndex) {
+		var o = Math.floor(this.container.getPanels().length/2);
+		var c$ = this.getOrderedControls(Math.floor(inIndex)-o);
+		var box = this.containerBounds[this.axisSize] - this.margin -this.margin;
+		var e = this.margin - box * o;
+		var m = (c$.length - 1) / 2;
+		for (var i=0, c, b, v; c=c$[i]; i++) {
+			b = {};
+			b[this.axisPosition] = e;
+			b.opacity  = (i == 0 || i == c$.length-1) ? 0 : 1;
+			this.arrangeControl(c, b);
+			e += box;
+		}
+	},
+	calcArrangementDifference: function(inI0, inA0, inI1, inA1) {
+		var i = Math.abs(inI0 % this.c$.length);
+		//enyo.log(inI0, inI1);
+		return inA0[i][this.axisPosition] - inA1[i][this.axisPosition];
+	},
+	destroy: function() {
+		var c$ = this.container.getPanels();
+		for (var i=0, c; c=c$[i]; i++) {
+			enyo.Arranger.positionControl(c, {left: null, top: null});
+			enyo.Arranger.opacifyControl(c, 1);
+			c.applyStyle("left", null);
+			c.applyStyle("top", null);
+			c.applyStyle("height", null);
+			c.applyStyle("width", null);
+		}
+		this.inherited(arguments);
+	}
+});
+
+/**
+	_enyo.TopBottomArranger_ is an <a href="#enyo.Arranger">enyo.Arranger</a>
+	that displays the active control and some of the previous and next controls.
+	The active control is centered vertically in the container, and the previous
+	and next controls are laid out above and below, respectively.
+
+	Transitions between arrangements are handled by sliding the new control
+	in from the bottom and sliding the active control out the top.
+*/
+enyo.kind({
+	name: "enyo.TopBottomArranger",
+	kind: "LeftRightArranger",
+	dragProp: "ddy",
+	dragDirectionProp: "yDirection",
+	canDragProp: "vertical",
+	//* @protected
+	axisSize: "height",
+	offAxisSize: "width",
+	axisPosition: "top"
+});
+
+/**
+	_enyo.SpiralArranger_ is an <a href="#enyo.Arranger">enyo.Arranger</a> that
+	arranges controls in a spiral. The active control is positioned on top and
+	the other controls are laid out in a spiral pattern below.
+
+	Transitions between arrangements are handled by rotating the new control
+	up from below and rotating the active control down to the end of the spiral.
+*/
+enyo.kind({
+	name: "enyo.SpiralArranger",
+	kind: "Arranger",
+	//* Always go through incremental arrangements when transitioning
+	incrementalPoints: true,
+	//* The amount of space between successive controls
+	inc: 20,
+	size: function() {
+		var c$ = this.container.getPanels();
+		var b = this.containerBounds;
+		var w = this.controlWidth = b.width/3;
+		var h = this.controlHeight = b.height/3;
+		for (var i=0, c; c=c$[i]; i++) {
+			c.setBounds({width: w, height: h});
+		}
+	},
+	arrange: function(inC, inName) {
+		var s = this.inc;
+		for (var i=0, l=inC.length, c; c=inC[i]; i++) {
+			var x = Math.cos(i/l * 2*Math.PI) * i * s + this.controlWidth;
+			var y = Math.sin(i/l * 2*Math.PI) * i * s + this.controlHeight;
+			this.arrangeControl(c, {left: x, top: y});
+		}
+	},
+	start: function() {
+		this.inherited(arguments);
+		var c$ = this.getOrderedControls(this.container.toIndex);
+		for (var i=0, c; c=c$[i]; i++) {
+			c.applyStyle("z-index", c$.length - i);
+		}
+	},
+	calcArrangementDifference: function(inI0, inA0, inI1, inA1) {
+		return this.controlWidth;
+	},
+	destroy: function() {
+		var c$ = this.container.getPanels();
+		for (var i=0, c; c=c$[i]; i++) {
+			c.applyStyle("z-index", null);
+			enyo.Arranger.positionControl(c, {left: null, top: null});
+			c.applyStyle("left", null);
+			c.applyStyle("top", null);
+			c.applyStyle("height", null);
+			c.applyStyle("width", null);
+		}
+		this.inherited(arguments);
+	}
+});
+
+
+/**
+	_enyo.GridArranger_ is an <a href="#enyo.Arranger">enyo.Arranger</a> that
+	arranges controls in a grid. The active control is positioned at the
+	top-left of the grid and the other controls are laid out from left to right
+	and then from top to bottom.
+
+	Transitions between arrangements are handled by moving the active control to
+	the end of the grid and shifting the other controls	to the left, or up to
+	the previous row, to fill the space.
+*/
+enyo.kind({
+	name: "enyo.GridArranger",
+	kind: "Arranger",
+	//* Always go through incremental arrangements when transitioning
+	incrementalPoints: true,
+	//* @public
+	//* Column width
+	colWidth: 100,
+	//* Column height
+	colHeight: 100,
+	size: function() {
+		var c$ = this.container.getPanels();
+		var w=this.colWidth, h=this.colHeight;
+		for (var i=0, c; c=c$[i]; i++) {
+			c.setBounds({width: w, height: h});
+		}
+	},
+	arrange: function(inC, inIndex) {
+		var w=this.colWidth, h=this.colHeight;
+		var cols = Math.floor(this.containerBounds.width / w);
+		var c;
+		for (var y=0, i=0; i<inC.length; y++) {
+			for (var x=0; (x<cols) && (c=inC[i]); x++, i++) {
+				this.arrangeControl(c, {left: w*x, top: h*y});
+			}
+		}
+	},
+	flowControl: function(inControl, inA) {
+		this.inherited(arguments);
+		enyo.Arranger.opacifyControl(inControl, inA.top % this.colHeight != 0 ? 0.25 : 1);
+	},
+	calcArrangementDifference: function(inI0, inA0, inI1, inA1) {
+		return this.colWidth;
+	},
+	destroy: function() {
+		var c$ = this.container.getPanels();
+		for (var i=0, c; c=c$[i]; i++) {
+			enyo.Arranger.positionControl(c, {left: null, top: null});
+			c.applyStyle("left", null);
+			c.applyStyle("top", null);
+			c.applyStyle("height", null);
+			c.applyStyle("width", null);
+		}
+		this.inherited(arguments);
+	}
+});
diff --git a/html/lib/layout/panels/source/arrangers/package.js b/html/lib/layout/panels/source/arrangers/package.js
new file mode 100644
index 0000000..135b754
--- /dev/null
+++ b/html/lib/layout/panels/source/arrangers/package.js
@@ -0,0 +1,9 @@
+enyo.depends(
+	"Arranger.js",
+	"Arranger.css",
+	"CardArranger.js",
+	"CardSlideInArranger.js",
+	"CarouselArranger.js",
+	"CollapsingArranger.js",
+	"OtherArrangers.js"
+);
\ No newline at end of file
diff --git a/html/lib/layout/panels/source/package.js b/html/lib/layout/panels/source/package.js
new file mode 100644
index 0000000..270146f
--- /dev/null
+++ b/html/lib/layout/panels/source/package.js
@@ -0,0 +1,5 @@
+enyo.depends(
+	"arrangers",
+	"Panels.css",
+	"Panels.js"
+);
\ No newline at end of file
diff --git a/html/lib/layout/slideable/package.js b/html/lib/layout/slideable/package.js
new file mode 100644
index 0000000..f8b32e7
--- /dev/null
+++ b/html/lib/layout/slideable/package.js
@@ -0,0 +1,3 @@
+enyo.depends(
+	"source"
+);
diff --git a/html/lib/layout/slideable/source/Slideable.js b/html/lib/layout/slideable/source/Slideable.js
new file mode 100644
index 0000000..4ef0a08
--- /dev/null
+++ b/html/lib/layout/slideable/source/Slideable.js
@@ -0,0 +1,312 @@
+/**
+	Slideable is a control that can be dragged either horizontally or vertically
+	between a minimum and a maximum value.  When released from dragging, a
+	Slideable will animate to its minimum or maximum position, depending on the
+	direction of the drag.
+
+	The *min* value specifies a position left of or above the	initial position,
+	to which the Slideable may be dragged.
+	The *max* value specifies a position right of or below the initial position,
+	to which the Slideable may be dragged.
+	The *value* property specifies the current position of the Slideable,
+	between the minimum and maximum positions.
+
+	*min*, *max*, and *value* may be specified in units of "px" or "%".
+	
+	The *axis* property controls whether the Slideable slides left-right (h) or
+	up-down (v).
+
+	The following control is placed 90% off the screen to the right, and slides
+	to its natural position.
+
+		{kind: "enyo.Slideable", value: -90, min: -90, unit: "%",
+			classes: "enyo-fit", style: "width: 300px;",
+			components: [
+				{content: "stuff"}
+			]
+		}
+*/
+enyo.kind({
+	name: "enyo.Slideable",
+	kind: "Control",
+	published: {
+		//* Direction of sliding; can be "h" or "v"
+		axis: "h",
+		//* A value between min and max to position the Slideable
+		value: 0,
+		//* Unit for min, max, and value; can be "px" or "%"
+		unit: "px",
+		//* A minimum value to slide to
+		min: 0,
+		//* A maximum value to slide to
+		max: 0,
+		accelerated: "auto",
+		//* Set to false to prevent the Slideable from dragging with elasticity past its min/max value.
+		overMoving: true,
+		//* Set to false to disable dragging.
+		draggable: true
+	},
+	events: {
+		//* Fires when the Slideable finishes animating.
+		onAnimateFinish: "",
+		onChange: ""
+	},
+	// Set to true to prevent a drag from bubbling beyond the Slideable.
+	preventDragPropagation: false,
+	//* @protected
+	tools: [
+		{kind: "Animator", onStep: "animatorStep", onEnd: "animatorComplete"}
+	],
+	handlers: {
+		ondragstart: "dragstart",
+		ondrag: "drag",
+		ondragfinish: "dragfinish"
+	},
+	kDragScalar: 1,
+	dragEventProp: "dx",
+	unitModifier: false,
+	canTransform: false,
+	//* @protected
+	create: function() {
+		this.inherited(arguments);
+		this.acceleratedChanged();
+		this.transformChanged();
+		this.axisChanged();
+		this.valueChanged();
+		this.addClass("enyo-slideable");
+	},
+	initComponents: function() {
+		this.createComponents(this.tools);
+		this.inherited(arguments);
+	},
+	rendered: function() {
+		this.inherited(arguments);
+		this.canModifyUnit();
+		this.updateDragScalar();
+	},
+	resizeHandler: function() {
+		this.inherited(arguments);
+		this.updateDragScalar();
+	},
+	canModifyUnit: function() {
+		if (!this.canTransform) {
+			var b = this.getInitialStyleValue(this.hasNode(), this.boundary);
+			// If inline style of "px" exists, while unit is "%"
+			if (b.match(/px/i) && (this.unit === "%")) {
+				// Set unitModifier - used to over-ride "%"
+				this.unitModifier = this.getBounds()[this.dimension];
+			}
+		}
+	},
+	getInitialStyleValue: function(inNode, inBoundary) {
+		var s = enyo.dom.getComputedStyle(inNode);
+		if (s) {
+			return s.getPropertyValue(inBoundary);
+		} else if (inNode && inNode.currentStyle) {
+			return inNode.currentStyle[inBoundary];
+		}
+		return "0";
+	},
+	updateBounds: function(inValue, inDimensions) {
+		var inBounds = {};
+		inBounds[this.boundary] = inValue;
+		this.setBounds(inBounds, this.unit);
+		
+		this.setInlineStyles(inValue, inDimensions);
+	},
+	updateDragScalar: function() {
+		if (this.unit == "%") {
+			var d = this.getBounds()[this.dimension];
+			this.kDragScalar = d ? 100 / d : 1;
+
+			if (!this.canTransform) {
+				this.updateBounds(this.value, 100);
+			}
+		}
+	},
+	transformChanged: function() {
+		this.canTransform = enyo.dom.canTransform();
+	},
+	acceleratedChanged: function() {
+		if (!(enyo.platform.android > 2)) {
+			enyo.dom.accelerate(this, this.accelerated);
+		}
+	},
+	axisChanged: function() {
+		var h = this.axis == "h";
+		this.dragMoveProp = h ? "dx" : "dy";
+		this.shouldDragProp = h ? "horizontal" : "vertical";
+		this.transform = h ? "translateX" : "translateY";
+		this.dimension = h ? "width" : "height";
+		this.boundary = h ? "left" : "top";
+	},
+	setInlineStyles: function(inValue, inDimensions) {
+		var inBounds = {};
+		
+		if (this.unitModifier) {
+			inBounds[this.boundary] = this.percentToPixels(inValue, this.unitModifier);
+			inBounds[this.dimension] = this.unitModifier;
+			this.setBounds(inBounds);
+		} else {
+			if (inDimensions) {
+				inBounds[this.dimension] = inDimensions;
+			} else {
+				inBounds[this.boundary] = inValue;
+			}
+			this.setBounds(inBounds, this.unit);
+		}
+	},
+	valueChanged: function(inLast) {
+		var v = this.value;
+		if (this.isOob(v) && !this.isAnimating()) {
+				this.value = this.overMoving ? this.dampValue(v) : this.clampValue(v);
+		}
+		// FIXME: android cannot handle nested compositing well so apply acceleration only if needed
+		// desktop chrome doesn't like this code path so avoid...
+		if (enyo.platform.android > 2) {
+			if (this.value) {
+				if (inLast === 0 || inLast === undefined) {
+					enyo.dom.accelerate(this, this.accelerated);
+				}
+			} else {
+				enyo.dom.accelerate(this, false);
+			}
+		}
+
+		// If platform supports transforms
+		if (this.canTransform) {
+			enyo.dom.transformValue(this, this.transform, this.value + this.unit);
+		// else update inline styles
+		} else {
+			this.setInlineStyles(this.value, false);
+		}
+		this.doChange();
+	},
+	getAnimator: function() {
+		return this.$.animator;
+	},
+	isAtMin: function() {
+		return this.value <= this.calcMin();
+	},
+	isAtMax: function() {
+		return this.value >= this.calcMax();
+	},
+	calcMin: function() {
+		return this.min;
+	},
+	calcMax: function() {
+		return this.max;
+	},
+	clampValue: function(inValue) {
+		var min = this.calcMin();
+		var max = this.calcMax();
+		return Math.max(min, Math.min(inValue, max));
+	},
+	dampValue: function(inValue) {
+		return this.dampBound(this.dampBound(inValue, this.min, 1), this.max, -1);
+	},
+	dampBound: function(inValue, inBoundary, inSign) {
+		var v = inValue;
+		if (v * inSign < inBoundary * inSign) {
+			v = inBoundary + (v - inBoundary) / 4;
+		}
+		return v;
+	},
+	percentToPixels: function(value, dimension) {
+		return Math.floor((dimension / 100) * value);
+	},
+	pixelsToPercent: function(value) {
+		var boundary = this.unitModifier ? this.getBounds()[this.dimension] : this.container.getBounds()[this.dimension];
+		return (value / boundary) * 100;
+	},
+	// dragging
+	shouldDrag: function(inEvent) {
+		return this.draggable && inEvent[this.shouldDragProp];
+	},
+	isOob: function(inValue) {
+		return inValue > this.calcMax() || inValue < this.calcMin();
+	},
+	dragstart: function(inSender, inEvent) {
+		if (this.shouldDrag(inEvent)) {
+			inEvent.preventDefault();
+			this.$.animator.stop();
+			inEvent.dragInfo = {};
+			this.dragging = true;
+			this.drag0 = this.value;
+			this.dragd0 = 0;
+			return this.preventDragPropagation;
+		}
+	},
+	drag: function(inSender, inEvent) {
+		if (this.dragging) {
+			inEvent.preventDefault();
+			var d = this.canTransform ? inEvent[this.dragMoveProp] * this.kDragScalar : this.pixelsToPercent(inEvent[this.dragMoveProp]);
+			var v = this.drag0 + d;
+			var dd = d - this.dragd0;
+			this.dragd0 = d;
+			if (dd) {
+				inEvent.dragInfo.minimizing = dd < 0;
+			}
+			this.setValue(v);
+			return this.preventDragPropagation;
+		}
+	},
+	dragfinish: function(inSender, inEvent) {
+		if (this.dragging) {
+			this.dragging = false;
+			this.completeDrag(inEvent);
+			inEvent.preventTap();
+			return this.preventDragPropagation;
+		}
+	},
+	completeDrag: function(inEvent) {
+		if (this.value !== this.calcMax() && this.value != this.calcMin()) {
+			this.animateToMinMax(inEvent.dragInfo.minimizing);
+		}
+	},
+	// animation
+	isAnimating: function() {
+		return this.$.animator.isAnimating();
+	},
+	play: function(inStart, inEnd) {
+		this.$.animator.play({
+			startValue: inStart,
+			endValue: inEnd,
+			node: this.hasNode()
+		});
+	},
+	//* @public
+	//* Animates to the given value.
+	animateTo: function(inValue) {
+		this.play(this.value, inValue);
+	},
+	//* Animates to the minimum value.
+	animateToMin: function() {
+		this.animateTo(this.calcMin());
+	},
+	//* Animates to the maximum value.
+	animateToMax: function() {
+		this.animateTo(this.calcMax());
+	},
+	//* @protected
+	animateToMinMax: function(inMin) {
+		if (inMin) {
+			this.animateToMin();
+		} else {
+			this.animateToMax();
+		}
+	},
+	animatorStep: function(inSender) {
+		this.setValue(inSender.value);
+		return true;
+	},
+	animatorComplete: function(inSender) {
+		this.doAnimateFinish(inSender);
+		return true;
+	},
+	//* @public
+	//* Toggles between min and max with animation.
+	toggleMinMax: function() {
+		this.animateToMinMax(!this.isAtMin());
+	}
+});
diff --git a/html/lib/layout/slideable/source/package.js b/html/lib/layout/slideable/source/package.js
new file mode 100644
index 0000000..8c4ec43
--- /dev/null
+++ b/html/lib/layout/slideable/source/package.js
@@ -0,0 +1,3 @@
+enyo.depends(
+	"Slideable.js"
+);
diff --git a/html/lib/layout/tree/package.js b/html/lib/layout/tree/package.js
new file mode 100644
index 0000000..1ec0cd0
--- /dev/null
+++ b/html/lib/layout/tree/package.js
@@ -0,0 +1,3 @@
+enyo.depends(
+	"source"
+);
\ No newline at end of file
diff --git a/html/lib/layout/tree/source/Node.css b/html/lib/layout/tree/source/Node.css
new file mode 100644
index 0000000..718a2e6
--- /dev/null
+++ b/html/lib/layout/tree/source/Node.css
@@ -0,0 +1,28 @@
+.enyo-node {
+	cursor: default;
+	padding: 4px;
+}
+
+.enyo-node img {
+	vertical-align: middle;
+	padding-right: 6px;
+}
+
+.enyo-node-box {
+	overflow: hidden;
+}
+
+.enyo-node-client {
+	position: relative;
+}
+
+.enyo-animate .enyo-node-box, .enyo-animate .enyo-node-client {
+	transition-property: height, top;
+	transition-duration: 0.2s, 0.2s;
+	-moz-transition-property: height, top;
+	-moz-transition-duration: 0.2s, 0.2s;
+	-o-transition-property: height, top;
+	-o-transition-duration: 0.2s, 0.2s;
+	-webkit-transition-property: height, top;
+	-webkit-transition-duration: 0.2s, 0.2s;
+}
diff --git a/html/lib/layout/tree/source/Node.js b/html/lib/layout/tree/source/Node.js
new file mode 100644
index 0000000..ff79c9a
--- /dev/null
+++ b/html/lib/layout/tree/source/Node.js
@@ -0,0 +1,269 @@
+/**
+	_enyo.Node_ is a control that creates structured trees based on Enyo's child
+	component hierarchy format, e.g.:
+
+		{kind: "Node", icon: "images/folder-open.png", content: "Tree",
+			expandable: true, expanded: true, components: [
+				{icon: "images/file.png", content: "Alpha"},
+				{icon: "images/folder-open.png", content: "Bravo",
+					expandable: true, expanded: false, components: [
+						{icon: "images/file.png", content: "Bravo-Alpha"},
+						{icon: "images/file.png", content: "Bravo-Bravo"},
+						{icon: "images/file.png", content: "Bravo-Charlie"}
+					]
+				}
+			]
+		}
+
+	The default kind of components within a node is itself _enyo.Node_, so only
+	the	top-level node of the tree needs to be explicitly defined as such.
+
+	When an expandable tree node expands, an _onExpand_ event is sent; when it
+	is tapped, a _nodeTap_ event is sent.
+
+	When the optional property _onlyIconExpands_ is set to true, expandable
+	nodes may only be opened by tapping the icon; tapping the content label
+	will fire the _nodeTap_ event, but will not expand the node.
+*/
+
+enyo.kind({
+	name: "enyo.Node",
+	published: {
+		//* @public
+		//* Whether or not the Node is expandable and has child branches
+		expandable: false,
+		//* Open/closed state of the current Node
+		expanded: false,
+		//* Path to image to be used as the icon for this Node
+		icon: "",
+		/**
+			Optional flag that, when true, causes the Node to expand only when
+			the icon is tapped; not when the contents are tapped
+		*/
+		onlyIconExpands: false,
+		//* @protected
+		//* Adds or removes the Enyo-selected CSS class.
+		selected: false
+	},
+	style: "padding: 0 0 0 16px;",
+	content: "Node",
+	defaultKind: "Node",
+	classes: "enyo-node",
+	components: [
+		{name: "icon", kind: "Image", showing: false},
+		{kind: "Control", name: "caption", Xtag: "span", style: "display: inline-block; padding: 4px;", allowHtml: true},
+		{kind: "Control", name: "extra", tag: 'span', allowHtml: true}
+	],
+	childClient: [
+		{kind: "Control", name: "box", classes: "enyo-node-box", Xstyle: "border: 1px solid orange;", components: [
+			{kind: "Control", name: "client", classes: "enyo-node-client", Xstyle: "border: 1px solid lightblue;"}
+		]}
+	],
+	handlers: {
+		ondblclick: "dblclick"
+	},
+	events: {
+		//* @public
+		//* Fired when the Node is tapped
+		onNodeTap: "nodeTap",
+		//* Fired when the Node is double-clicked
+		onNodeDblClick: "nodeDblClick",
+		/**
+			Fired when the Node expands or contracts, as indicated by the
+			'expanded' property in the event data
+		*/
+		onExpand: "nodeExpand",
+		//* Fired when the Node is destroyed
+		onDestroyed: "nodeDestroyed"
+	},
+	//
+	//* @protected
+	create: function() {
+		this.inherited(arguments);
+		//this.expandedChanged();
+		//this.levelChanged();
+		this.selectedChanged();
+		this.iconChanged();
+	},
+	destroy: function() {
+		this.doDestroyed();
+		this.inherited(arguments);
+	},
+	initComponents: function() {
+		// TODO: optimize to create the childClient on demand
+		//this.hasChildren = this.components;
+		if (this.expandable) {
+			this.kindComponents = this.kindComponents.concat(this.childClient);
+		}
+		this.inherited(arguments);
+	},
+	//
+	contentChanged: function() {
+		//this.$.caption.setContent((this.expandable ? (this.expanded ? "-" : "+") : "") + this.content);
+		this.$.caption.setContent(this.content);
+	},
+	iconChanged: function() {
+		this.$.icon.setSrc(this.icon);
+		this.$.icon.setShowing(Boolean(this.icon));
+	},
+	selectedChanged: function() {
+		this.addRemoveClass("enyo-selected", this.selected);
+	},
+	rendered: function() {
+		this.inherited(arguments);
+		if (this.expandable && !this.expanded) {
+			this.quickCollapse();
+		}
+	},
+	//
+	addNodes: function(inNodes) {
+		this.destroyClientControls();
+		for (var i=0, n; n=inNodes[i]; i++) {
+			this.createComponent(n);
+		}
+		this.$.client.render();
+	},
+	addTextNodes: function(inNodes) {
+		this.destroyClientControls();
+		for (var i=0, n; n=inNodes[i]; i++) {
+			this.createComponent({content: n});
+		}
+		this.$.client.render();
+	},
+	//
+	tap: function(inSender, inEvent) {
+		if(!this.onlyIconExpands) {
+			this.toggleExpanded();
+			this.doNodeTap();
+		} else {
+			if((inEvent.target==this.$.icon.hasNode())) {
+				this.toggleExpanded();
+			} else {
+				this.doNodeTap();
+			}
+		}
+		return true;
+	},
+	dblclick: function(inSender, inEvent) {
+		this.doNodeDblClick();
+		return true;
+	},
+	//
+	toggleExpanded: function() {
+		this.setExpanded(!this.expanded);
+	},
+	quickCollapse: function() {
+		this.removeClass("enyo-animate");
+		this.$.box.applyStyle("height", "0");
+		var h = this.$.client.getBounds().height;
+		this.$.client.setBounds({top: -h});
+	},
+	_expand: function() {
+		this.addClass("enyo-animate");
+		var h = this.$.client.getBounds().height;
+		this.$.box.setBounds({height: h});
+		this.$.client.setBounds({top: 0});
+		setTimeout(enyo.bind(this, function() {
+			// things may have happened in the interim, make sure
+			// we only fix height if we are still expanded
+			if (this.expanded) {
+				this.removeClass("enyo-animate");
+				this.$.box.applyStyle("height", "auto");
+			}
+		}), 225);
+	},
+	_collapse: function() {
+		// disable transitions
+		this.removeClass("enyo-animate");
+		// fix the height of our box (rather than 'auto'), this
+		// gives webkit something to lerp from
+		var h = this.$.client.getBounds().height;
+		this.$.box.setBounds({height: h});
+		// yield the thead so DOM can make those changes (without transitions)
+		setTimeout(enyo.bind(this, function() {
+			// enable transitions
+			this.addClass("enyo-animate");
+			// shrink our box to 0
+			this.$.box.applyStyle("height", "0");
+			// slide the contents up
+			this.$.client.setBounds({top: -h});
+		}), 25);
+	},
+	expandedChanged: function(inOldExpanded) {
+		if (!this.expandable) {
+			this.expanded = false;
+		} else {
+			var event = {expanded: this.expanded};
+			this.doExpand(event);
+			if (!event.wait) {
+				this.effectExpanded();
+			}
+		}
+	},
+	effectExpanded: function() {
+		if (this.$.client) {
+			if (!this.expanded) {
+				this._collapse();
+			} else {
+				this._expand();
+			}
+		}
+		//this.contentChanged();
+	}/*,
+	//
+	//
+	levelChanged: function() {
+		this.applyStyle("padding-left", 16 + "px");
+	},
+	toggleChildren: function() {
+		if (this.$.list) {
+			this.$.list.setShowing(this.expanded);
+		}
+	},
+	renderNodes: function(inNodes) {
+		var list = this.createComponent({name: "list", container: this});
+		for (var i=0, n; n=inNodes[i]; i++) {
+			n.setLevel(this.level + 1);
+			n.setContainer(list);
+			n.render();
+		}
+		list.render();
+	},
+	//* @public
+	addNodes: function(inNodes) {
+		this.renderNodes(inNodes);
+		this.toggleChildren();
+	},
+	removeNodes: function() {
+		if (this.$.list) {
+			this.$.list.destroy();
+		}
+	},
+	hasVisibleChildren: function() {
+		return this.expanded && this.$.list && this.$.list.controls.length > 0;
+	},
+	fetchParent: function() {
+		return this.level > 0 && this.container.container;
+	},
+	fetchChildren: function() {
+		return this.$.list && this.$.list.controls;
+	},
+	fetchFirstChild: function() {
+		return this.$.list && this.$.list.controls[0];
+	},
+	fetchLastChild: function() {
+		return this.$.list && this.$.list.controls[this.$.list.controls.length-1];
+	},
+	fetchPrevSibling: function() {
+		var i = this.container.controls.indexOf(this);
+		return this.level > 0 && this.container.controls[i-1];
+	},
+	fetchNextSibling: function() {
+		var i = this.container.controls.indexOf(this);
+		return this.level > 0 && this.container.controls[i+1];
+	},
+	getVisibleBounds: function() {
+		return this.$.client.getBounds();
+	}
+	*/
+});
\ No newline at end of file
diff --git a/html/lib/layout/tree/source/package.js b/html/lib/layout/tree/source/package.js
new file mode 100644
index 0000000..5986bea
--- /dev/null
+++ b/html/lib/layout/tree/source/package.js
@@ -0,0 +1,4 @@
+enyo.depends(
+	"Node.css",
+	"Node.js"
+);
\ No newline at end of file
diff --git a/html/lib/onyx/design/inline-controlled.html b/html/lib/onyx/design/inline-controlled.html
new file mode 100644
index 0000000..b233d19
--- /dev/null
+++ b/html/lib/onyx/design/inline-controlled.html
@@ -0,0 +1,230 @@
+<!doctype html>
+<html>
+<head>
+	<title>controlled inline: onyx toolbar design</title>
+	<link href="../source/css/onyx.css" rel="stylesheet" type="text/css" />
+	<style>
+		/*
+			the 'inline' class sets up a left-to-right container, with vertically centered children
+		*/
+		.inline {
+			white-space: nowrap;
+		}
+		.inline > * { 
+			display: inline-block;
+			vertical-align: middle;
+		}
+		.icon {
+			width: 32px;
+			height: 32px;
+			background-image: url(menu-icon-bookmark.png);
+		}
+		.bord {
+			border: 1px solid lightblue;
+		}
+		.big {
+			font-size: 48px;
+		}
+		.pad {
+			padding: 8px;
+		}
+		.bg {
+			background: orange;
+		}
+		/*
+			We can control line-height so that vertical-align: middle 
+			becomes true center. Otherwise, when line-height is in effect
+			(i.e. if the actual height is less than line height), 
+			user agents pad the line unevenly.
+		*/
+		.lhc {
+			line-height: 0;
+		}
+		/*
+			Defeat line-height control above for children
+		*/
+		.lhc > * {
+			line-height: normal;
+		}
+		/*
+			Enforce line-height 0 for an inline child of an inline (FIXME: fiddly)
+		*/
+		.lhc .lhc {
+			line-height: 0px;
+		}
+		/**/
+		.h {
+			height: 64px;
+		}
+		/*
+			It's useful to be able to abut toolbars in an inline context
+			and not worry about varying heights.
+			Generally icons are the largest elements in a toolbar, and will
+			drive the height to this size.
+			We can't set a min-size directly on the toolbar because it
+			breaks centering (due to interation with line-height).
+			For some scenarios a developer may want to override the height value.
+		*/
+		.stent {
+			/*
+				the point of the stent is to force the box height to some minimum, similar
+				to line-height, but with proper vertical centering
+			*/
+			height: 72px;
+			/* the width is 0, but it adds some size to the inline because of ? */
+			width: 0px;
+			visibility: hidden;
+		}
+		.stent-fix {
+			/* stent imparts mystery width to it's parent */
+			/* setting font-size doesn't affect the mystery width */
+			/*font-size: 0px;*/
+			/* floating the stent prevents it from stenting */
+			/*float: left;*/
+			/* on non-mozilla, mystery size can be removed this way, but the actual pixels needed depends on font size */
+			/*margin-right: -6px;*/
+			/* on non-mozilla, this gets us within a few pixels for tested fonts */
+			margin-right: -0.25em;
+		}
+		/* */
+		.stenty > * {
+			min-height: 56px;
+		}
+	</style>
+</head>
+<body>
+	<label>"inline" tests</label>
+	<br /><br />
+
+	<div>
+		<label>combo content: when the text is larger than non-text objects, vertical centering goes wonky</label>
+		<div class="inline bord big">
+			<div>Text in Div</div>
+			<input />
+			<div class="icon"></div>
+		</div>
+		<br />
+
+		<label>... it's possible to control line-height in such a way to repair centering</label>
+		<div class="inline bord big lhc">
+			<div>Text in Div</div>
+			<input />
+			<div class="icon"></div>
+		</div>
+		<br />
+
+		<hr />
+
+		<label>but now setting height or min-height on toolbar breaks centering</label>
+		<div class="inline bord lhc bg big h">
+			<div>Text in Div</div>
+			<input />
+			<div class="icon"></div>
+		</div>
+		<br />
+
+		<div class="inline bord big lhc">
+			<div class="inline bord lhc bg h">
+				<div>Text in Div</div>
+				<input />
+				<div class="icon"></div>
+			</div>
+			<div class="inline bord lhc bg h">
+				<input />
+				<div class="icon"></div>
+			</div>
+		</div>
+		<br />
+
+		<hr />
+
+		<label>control height on children instead of toolbar</label>
+		<div class="inline bord big lhc">
+			<div class="inline bord lhc bg">
+				<div>Text in Div</div>
+				<input />
+				<div class="icon"></div>
+			</div>
+			<div class="inline bord lhc bg">
+				<input />
+				<div class="icon"></div>
+			</div>
+		</div>
+		<br />
+		<div class="inline bord big lhc">
+			<div class="inline bord lhc bg stenty">
+				<div>Text in Div</div>
+				<input />
+				<div class="icon"></div>
+			</div>
+			<div class="inline bord lhc bg stenty">
+				<input />
+				<div class="icon"></div>
+			</div>
+		</div>
+		<br />
+
+		<hr />
+
+		<label>it's possible to use a stent to effect min-height, but for unknown reasons, even a 0-width stent affects parent width</label>
+		<div class="inline bord big lhc">
+			<div class="inline bord lhc bg">
+				<div>Text in Div</div>
+				<input />
+				<div class="icon"></div>
+			</div>
+			<div class="inline bord lhc bg">
+				<input />
+				<div class="icon"></div>
+			</div>
+		</div>
+		<br />
+		<div class="inline bord big lhc">
+			<div class="inline bord lhc bg">
+				<div class="stent"></div>
+				<div>Text in Div</div>
+				<input />
+				<div class="icon"></div>
+			</div>
+			<div class="inline bord lhc bg">
+				<div class="stent"></div>
+				<input />
+				<div class="icon"></div>
+			</div>
+		</div>
+		<br />
+
+		<label>using img as stent node makes no difference</label>
+		<div class="inline bord big lhc">
+			<div class="inline bord lhc bg">
+				<img class="stent" />
+				<div>Text in Div</div>
+				<input />
+				<div class="icon"></div>
+			</div>
+			<div class="inline bord lhc bg">
+				<img class="stent" />
+				<input />
+				<div class="icon"></div>
+			</div>
+		</div>
+		<br />
+
+		<label>using negative margin on stent can approximate 0 width</label>
+		<div class="inline bord big lhc">
+			<div class="inline bord lhc bg">
+				<div class="stent stent-fix"></div>
+				<div>Text in Div</div>
+				<input />
+				<div class="icon"></div>
+			</div>
+			<div class="inline bord lhc bg">
+				<div class="stent stent-fix"></div>
+				<input />
+				<div class="icon"></div>
+			</div>
+		</div>
+		<br />
+	</div>
+</body>
+</html>
diff --git a/html/lib/onyx/design/inline.html b/html/lib/onyx/design/inline.html
new file mode 100644
index 0000000..41466e8
--- /dev/null
+++ b/html/lib/onyx/design/inline.html
@@ -0,0 +1,102 @@
+<!doctype html>
+<html>
+<head>
+	<title>inline: onyx toolbar design</title>
+	<link href="../source/css/onyx.css" rel="stylesheet" type="text/css" />
+	<style>
+		/*
+			the 'inline' class sets up a left-to-right container, with vertically centered children
+		*/
+		.inline {
+			white-space: nowrap;
+		}
+		.inline > * { 
+			display: inline-block;
+			vertical-align: middle;
+		}
+		.icon {
+			width: 32px;
+			height: 32px;
+			background-image: url(menu-icon-bookmark.png);
+		}
+		.bord {
+			border: 1px solid lightblue;
+		}
+		.big {
+			font-size: 48px;
+		}
+		.pad {
+			padding: 8px;
+		}
+		.mh {
+			min-height: 124px;
+		}
+		.lh {
+			line-height: 86px;
+		}
+	</style>
+</head>
+<body>
+	<label>"inline" tests</label>
+	<br /><br />
+	<div>
+		<label>no content</label>
+		<div class="inline bord"></div>
+		<br />
+
+		<label>text only content</label>
+		<div class="inline bord">Text</div>
+		<br />
+
+		<label>div content</label>
+		<div class="inline bord">
+			<div>Text in Div</div>
+		</div>
+		<br />
+
+		<label>input content</label>
+		<div class="inline bord">
+			<input class="" />
+		</div>
+		<br />
+
+		<label>icon content</label>
+		<div class="inline bord">
+			<div class="icon"></div>
+		</div>
+		<br />
+
+		<label>combo content</label>
+		<div class="inline bord">
+			<div>Text in Div</div>
+			<input class="" />
+			<div class="icon"></div>
+		</div>
+		<br />
+
+		<label>combo content: when the text is larger than non-text objects, vertical centering goes wonky</label>
+		<div class="inline bord big">
+			<div>Text in Div</div>
+			<input class="" />
+			<div class="icon"></div>
+		</div>
+		<br />
+
+		<label>controlling height</label>
+		<div class="inline bord big mh">
+			<div>Text in Div</div>
+			<input class="" />
+			<div class="icon"></div>
+		</div>
+		<br />
+
+		<label>controlling line-height</label>
+		<div class="inline bord big lh pad">
+			<div>Text in Div</div>
+			<input class="" />
+			<div class="icon"></div>
+		</div>
+		<br />
+	</div>
+</body>
+</html>
diff --git a/html/lib/onyx/design/menu-icon-bookmark.png b/html/lib/onyx/design/menu-icon-bookmark.png
new file mode 100644
index 0000000..81d2344
--- /dev/null
+++ b/html/lib/onyx/design/menu-icon-bookmark.png
diff --git a/html/lib/onyx/design/toolbar-extended.html b/html/lib/onyx/design/toolbar-extended.html
new file mode 100644
index 0000000..edbfda1
--- /dev/null
+++ b/html/lib/onyx/design/toolbar-extended.html
@@ -0,0 +1,243 @@
+
+<!doctype html>
+<html>
+<head>
+	<title>onyx toolbar design</title>
+	<link href="../source/css/onyx.css" rel="stylesheet" type="text/css" />
+	<style>
+		/*
+			the 'inline' class attempts to setup a left-to-right container, with vertically centered children
+		*/
+		.toolbar > *, .inline > * { 
+			display: inline-block;
+			vertical-align: middle;
+		}
+		.toolbar, .inline {
+			white-space: nowrap;
+			/*
+				We want to control line-height so that vertical-align: middle 
+				becomes true center. Otherwise, when line-height is in effect
+				(i.e. if the actual height is less than line height), 
+				user agents pad the line unevenly.
+			*/
+			line-height: 0;
+		}
+		.toolbar > *, .inline > * {
+			/*
+				Defeat line-height control above for children
+			*/
+			line-height: normal;
+		}
+		.toolbar .inline, .inline .inline {
+			/*
+				Enforce line-height 0 for an inline child of an inline (FIXME: fiddly)
+			*/
+			line-height: 0px;
+		}
+		/*
+			toolbar is just an inline context with specific styling
+		*/
+		.toolbar {
+			padding: 8px;
+			/**/
+			box-sizing: border-box;
+			-webkit-box-sizing: border-box;
+			-moz-box-sizing: border-box;
+			-ms-box-sizing: border-box;
+		}
+		/*
+			It's useful to be able to abut toolbars in an inline context
+			and not worry about varying heights.
+			Generally icons are the largest elements in a toolbar, and will
+			drive the height to this size.
+			We can't set a min-size directly on the toolbar because it
+			breaks centering (due to interation with line-height).
+			For some scenarios a developer may want to override the height value.
+		*/
+		.stent {
+			visibility: none;
+			width: 0px;
+			height: 34px;
+		}
+		/* */
+		.onyx .toolbar {
+			padding: 8px;
+			/**/
+			border: 1px solid #3A3A3A;
+			background: #4C4C4C url(../images/gradient.png) repeat-x 0 bottom;
+			color: white;
+		}
+		/* */
+		button {
+			/* only needed for IE */
+			line-height: normal !important;
+		}
+		.icon {
+			width: 32px;
+			height: 32px;
+			background-image: url(menu-icon-bookmark.png);
+		}
+		/* */
+		/*
+			for display/debug only, not part of the design 
+		*/
+		.big {
+			font-size: 42px;
+		}
+		.bord {
+			border: 1px solid lightblue;
+		}
+		.bg {
+			background-color: Red;
+		}
+		.bg .toolbar {
+			background-color: white;
+		}
+		.lh0 {
+			line-height: 0px;
+		}
+		.lhn {
+			line-height: normal;
+		}
+	</style>
+</head>
+<body>
+	<div class="onyx">
+		<label>no content</label>
+		<div class="toolbar"></div>
+		<br />
+		<label>text only content (padding is ignored due to line height control)</label>
+		<div class="toolbar">Text</div>
+		<br />
+		<label>div content</label>
+		<div class="toolbar">
+			<div>Text in Div</div>
+		</div>
+		<br />
+		<label>input content</label>
+		<div class="toolbar">
+			<input class="" />
+		</div>
+		<br />
+		<label>input content</label>
+		<div class="toolbar">
+			<div class="icon"></div>
+		</div>
+		<br />
+		<label>input content</label>
+		<div class="toolbar">
+			<img src="menu-icon-bookmark.png" height="32"/>
+		</div>
+		<br />
+		<label>div content with min-height on toolbar (centering improper on tested user agents)</label>
+		<div class="toolbar" style="min-height: 50px;">
+			<div>Text in Div</div>
+		</div>
+		<br />
+		<label>div content with stent</label>
+		<div class="toolbar">
+			<div class="stent"></div>
+			<div>Text in Div</div>
+		</div>
+		<br />
+		<label>stented toolbars abutting in inline context, as long as the stent is the largest item the bars align. There should be no red color visible above or below each toolbar.</label>
+		<div class="inline" style="background-color: Red;">
+			<div class="toolbar">
+				<div class="stent"></div>
+				<div>Text in Div</div>
+			</div>
+			<div class="toolbar">
+				<div class="stent"></div>
+				<input class="" />
+			</div>
+			<div class="toolbar">
+				<div class="stent"></div>
+				<div class="icon"></div>
+			</div>
+			<div class="toolbar">
+				<div class="stent"></div>
+				<img src="menu-icon-bookmark.png" height="32"/>
+			</div>
+		</div>
+	</div>
+	<hr />
+	<div class="bord toolbar">
+		<div class="bord">div</div>
+		<input class="bord" />
+		<div class="bord icon"></div>
+	</div>
+	<br />
+	<div class="bord toolbar big">
+		<div class="bord">div</div>
+		<input class="bord" />
+		<div class="bord icon"></div>
+	</div>
+	<br />
+	<div class="bord toolbar big lh0">
+		<div class="bord lhn">div</div>
+		<input class="bord" />
+		<div class="bord icon"></div>
+	</div>
+	<br />
+	<div class="bord toolbar big lh0">
+		<div class="bord lhn">div</div>
+		<input class="bord" />
+	</div>
+	<br />
+	<br />
+	<div class="toolbar bord">
+		<div class="bord">div</div>
+		<input class="bord" />
+		<div class="bord inline">
+			<div class="bord">div</div>
+			<input class="bord" />
+			<div class="bord icon"></div>
+		</div>
+		<button>Button</button>
+		<div class="bord icon"></div>
+		<img class="bord" src="menu-icon-bookmark.png" height="32"/>
+	</div>
+	<br />
+	<div class="toolbar bord big">
+		<div class="bord">div</div>
+		<div class="bord inline">
+			<div class="bord">div</div>
+			<input class="bord" />
+			<div class="bord icon"></div>
+		</div>
+		<button>Button</button>
+		<div class="bord icon"></div>
+		<img class="bord"src="menu-icon-bookmark.png" height="32"/>
+	</div>
+	<br />
+	<div class="toolbar big bord">
+		<div class="bord">div</div>
+	</div>
+	<br />
+	<div class="inline bord big bg">
+		<div class="toolbar bord">
+			<div class="bord">div</div>
+		</div>
+		<div class="toolbar bord">
+			<div class="icon"></div>
+		</div>
+		<div class="toolbar bord">
+			<div class="inline">
+				<div class="icon"></div>
+			</div>
+		</div>
+		<div class="toolbar bord">
+			<div class="bord">div</div>
+			<input class="bord" />
+			<div class="inline">
+				<div class="bord">div</div>
+				<input class="bord" />
+				<div class="icon"></div>
+			</div>
+			<button>Button</button>
+			<div class="icon"></div>
+			<img src="menu-icon-bookmark.png" height="32"/>
+		</div>
+	</div>
+</body>
+</html>
diff --git a/html/lib/onyx/design/toolbar.html b/html/lib/onyx/design/toolbar.html
new file mode 100644
index 0000000..495524d
--- /dev/null
+++ b/html/lib/onyx/design/toolbar.html
@@ -0,0 +1,110 @@
+<!doctype html>
+<html>
+<head>
+	<title>inline: onyx toolbar design</title>
+	<link href="../source/css/onyx.css" rel="stylesheet" type="text/css" />
+	<style>
+		/*
+			the 'inline' class sets up a left-to-right container, with vertically centered children
+		*/
+		.inline {
+			white-space: nowrap;
+		}
+		.inline > * { 
+			display: inline-block;
+			vertical-align: middle;
+		}
+		/**/
+		.toolbar {
+			padding: 8px;
+			border: 1px solid #3A3A3A;
+			background: #4C4C4C url(../images/gradient.png) repeat-x 0 bottom;
+			color: white;
+		}
+		/**/
+		.icon {
+			width: 32px;
+			height: 32px;
+			background-image: url(menu-icon-bookmark.png);
+		}
+		.bord {
+			border: 1px solid lightblue;
+		}
+		.big {
+			font-size: 48px;
+		}
+		.pad {
+			padding: 8px;
+		}
+		.mh {
+			min-height: 124px;
+		}
+		.lh {
+			line-height: 86px;
+		}
+	</style>
+</head>
+<body>
+	<label>"toolbar" tests</label>
+	<br /><br />
+	<div>
+		<label>no content</label>
+		<div class="inline toolbar"></div>
+		<br />
+
+		<label>text only content</label>
+		<div class="inline toolbar">Text</div>
+		<br />
+
+		<label>div content</label>
+		<div class="inline toolbar">
+			<div>Text in Div</div>
+		</div>
+		<br />
+
+		<label>input content</label>
+		<div class="inline toolbar">
+			<input class="" />
+		</div>
+		<br />
+
+		<label>icon content</label>
+		<div class="inline toolbar">
+			<div class="icon"></div>
+		</div>
+		<br />
+
+		<label>combo content</label>
+		<div class="inline toolbar">
+			<div>Text in Div</div>
+			<input class="" />
+			<div class="icon"></div>
+		</div>
+		<br />
+
+		<label>combo content: when the text is larger than non-text objects, vertical centering goes wonky</label>
+		<div class="inline toolbar big">
+			<div>Text in Div</div>
+			<input class="" />
+			<div class="icon"></div>
+		</div>
+		<br />
+
+		<label>controlling height</label>
+		<div class="inline toolbar big mh">
+			<div>Text in Div</div>
+			<input class="" />
+			<div class="icon"></div>
+		</div>
+		<br />
+
+		<label>controlling line-height</label>
+		<div class="inline toolbar big lh pad">
+			<div>Text in Div</div>
+			<input class="" />
+			<div class="icon"></div>
+		</div>
+		<br />
+	</div>
+</body>
+</html>
diff --git a/html/lib/onyx/images/checkbox.png b/html/lib/onyx/images/checkbox.png
new file mode 100644
index 0000000..9176591
--- /dev/null
+++ b/html/lib/onyx/images/checkbox.png
diff --git a/html/lib/onyx/images/grabbutton.png b/html/lib/onyx/images/grabbutton.png
new file mode 100644
index 0000000..66ee64d
--- /dev/null
+++ b/html/lib/onyx/images/grabbutton.png
diff --git a/html/lib/onyx/images/gradient-invert.png b/html/lib/onyx/images/gradient-invert.png
new file mode 100644
index 0000000..44ab5ac
--- /dev/null
+++ b/html/lib/onyx/images/gradient-invert.png
diff --git a/html/lib/onyx/images/gradient.png b/html/lib/onyx/images/gradient.png
new file mode 100644
index 0000000..5856258
--- /dev/null
+++ b/html/lib/onyx/images/gradient.png
diff --git a/html/lib/onyx/images/more.png b/html/lib/onyx/images/more.png
new file mode 100644
index 0000000..4ad77a3
--- /dev/null
+++ b/html/lib/onyx/images/more.png
diff --git a/html/lib/onyx/images/progress-button-cancel.png b/html/lib/onyx/images/progress-button-cancel.png
new file mode 100644
index 0000000..2d2306c
--- /dev/null
+++ b/html/lib/onyx/images/progress-button-cancel.png
diff --git a/html/lib/onyx/images/search-input-cancel.png b/html/lib/onyx/images/search-input-cancel.png
new file mode 100644
index 0000000..8056b4a
--- /dev/null
+++ b/html/lib/onyx/images/search-input-cancel.png
diff --git a/html/lib/onyx/images/search-input-search.png b/html/lib/onyx/images/search-input-search.png
new file mode 100644
index 0000000..36bf1b5
--- /dev/null
+++ b/html/lib/onyx/images/search-input-search.png
diff --git a/html/lib/onyx/images/slider-handle.png b/html/lib/onyx/images/slider-handle.png
new file mode 100644
index 0000000..09e12fb
--- /dev/null
+++ b/html/lib/onyx/images/slider-handle.png
diff --git a/html/lib/onyx/images/spinner-dark.gif b/html/lib/onyx/images/spinner-dark.gif
new file mode 100644
index 0000000..ee78695
--- /dev/null
+++ b/html/lib/onyx/images/spinner-dark.gif
diff --git a/html/lib/onyx/images/spinner-light.gif b/html/lib/onyx/images/spinner-light.gif
new file mode 100644
index 0000000..ddb7ff1
--- /dev/null
+++ b/html/lib/onyx/images/spinner-light.gif
diff --git a/html/lib/onyx/package.js b/html/lib/onyx/package.js
new file mode 100644
index 0000000..82636d4
--- /dev/null
+++ b/html/lib/onyx/package.js
@@ -0,0 +1,8 @@
+enyo.depends(
+	// $lib/onxy loads the debug code for now, probably it should load the built code as below
+	"source"
+	/*
+	"build/onyx.css",
+	"build/onyx.js"
+	*/
+);
\ No newline at end of file
diff --git a/html/lib/onyx/source/Button.js b/html/lib/onyx/source/Button.js
new file mode 100644
index 0000000..b13c334
--- /dev/null
+++ b/html/lib/onyx/source/Button.js
@@ -0,0 +1,18 @@
+/**
+	A button in the onyx style. The color of the button may be customized by
+	applying a background color.
+	
+	The *onyx-affirmative*, *onyx-negative*, and *onyx-blue* classes provide
+	some built-in presets.
+
+		{kind: "onyx.Button", content: "Button"},
+		{kind: "onyx.Button", content: "Affirmative", classes: "onyx-affirmative"},
+		{kind: "onyx.Button", content: "Negative", classes: "onyx-negative"},
+		{kind: "onyx.Button", content: "Blue", classes: "onyx-blue"},
+		{kind: "onyx.Button", content: "Custom", style: "background-color: purple; color: #F1F1F1;"}
+*/
+enyo.kind({
+	name: "onyx.Button",
+	kind: "enyo.Button",
+	classes: "onyx-button enyo-unselectable"
+});
\ No newline at end of file
diff --git a/html/lib/onyx/source/Checkbox.js b/html/lib/onyx/source/Checkbox.js
new file mode 100644
index 0000000..2b6143b
--- /dev/null
+++ b/html/lib/onyx/source/Checkbox.js
@@ -0,0 +1,35 @@
+/**
+	A box that shows or hides a check mark when clicked.
+	The onChange event is fired when it is clicked. Use getValue() to fetch
+	the checked status.
+	
+		{kind: "onyx.Checkbox", onchange: "checkboxClicked"}
+	
+		checkboxClicked: function(inSender) {
+			if (inSender.getValue()) {
+				 this.log("I've been checked!");
+			}
+		}
+*/
+enyo.kind({
+	name: "onyx.Checkbox",
+	classes: "onyx-checkbox",
+	//* @protected
+	kind: enyo.Checkbox,
+	tag: "div",
+	handlers: {
+		ondown:"downHandler",
+		// prevent double onchange bubble in IE
+		onclick: ""
+	},
+	downHandler: function(inSender, e) {
+		if (!this.disabled) {
+			this.setChecked(!this.getChecked());
+			this.bubble("onchange");
+		}
+		return true;
+	},
+	tap: function(inSender, e) {
+		return !this.disabled;
+	}
+});
diff --git a/html/lib/onyx/source/Drawer.js b/html/lib/onyx/source/Drawer.js
new file mode 100644
index 0000000..3db5afd
--- /dev/null
+++ b/html/lib/onyx/source/Drawer.js
@@ -0,0 +1,75 @@
+/**
+	A control that appears or disappears based on its _open_ property. 
+	It appears or disappears with a sliding animation whose direction is
+	determined by the _orient_ property.
+*/
+enyo.kind({
+	name: "onyx.Drawer",
+	published: {
+		//* The visibility state of the drawer's associated control
+		open: true,
+		//* "v" for vertical animation; "h" for horizontal animation
+		orient: "v"
+	},
+	style: "overflow: hidden; position: relative;",
+	tools: [
+		{kind: "Animator", onStep: "animatorStep", onEnd: "animatorEnd"},
+		{name: "client", style: "position: relative;", classes: "enyo-border-box"}
+	],
+	create: function() {
+		this.inherited(arguments);
+		this.openChanged();
+	},
+	initComponents: function() {
+		this.createChrome(this.tools);
+		this.inherited(arguments);
+	},
+	openChanged: function() {
+		this.$.client.show();
+		if (this.hasNode()) {
+			if (this.$.animator.isAnimating()) {
+				this.$.animator.reverse();
+			} else {
+				var v = this.orient == "v";
+				var d = v ? "height" : "width";
+				var p = v ? "top" : "left";
+				// unfixing the height/width is needed to properly 
+				// measure the scrollHeight/Width DOM property, but
+				// can cause a momentary flash of content on some browsers
+				this.applyStyle(d, null);
+				var s = this.hasNode()[v ? "scrollHeight" : "scrollWidth"];
+				this.$.animator.play({
+					startValue: this.open ? 0 : s,
+					endValue: this.open ? s : 0,
+					dimension: d,
+					position: p
+				});
+			}
+		} else {
+			this.$.client.setShowing(this.open);
+		}
+	},
+	animatorStep: function(inSender) {
+		if (this.hasNode()) {
+			var d = inSender.dimension;
+			this.node.style[d] = this.domStyles[d] = inSender.value + "px";
+		}
+		var cn = this.$.client.hasNode();
+		if (cn) {
+			var p = inSender.position;
+			var o = (this.open ? inSender.endValue : inSender.startValue);
+			cn.style[p] = this.$.client.domStyles[p] = (inSender.value - o) + "px";
+		}
+		if (this.container) {
+			this.container.resized();
+		}
+	},
+	animatorEnd: function() {
+		if (!this.open) {
+			this.$.client.hide();
+		}
+		if (this.container) {
+			this.container.resized();
+		}
+	}
+});
\ No newline at end of file
diff --git a/html/lib/onyx/source/FlyweightPicker.js b/html/lib/onyx/source/FlyweightPicker.js
new file mode 100644
index 0000000..4adfab4
--- /dev/null
+++ b/html/lib/onyx/source/FlyweightPicker.js
@@ -0,0 +1,110 @@
+/**
+	_onyx.FlyweightPicker_, a subkind of <a href="#onyx.Picker">onyx.Picker</a>,
+	is a picker	that employs the flyweight pattern. It is used to display a
+	large list of selectable items.	As with
+	<a href="#enyo.FlyweightRepeater">enyo.FlyweightRepeater</a>,
+	the _onSetupItem_ event allows for customization of item rendering.
+
+	To initialize the FlyweightPicker to a particular value, call _setSelected_
+	with the index of the item you wish to select, and call _setContent_ with
+	the item that should be shown in the activator button.
+
+	FlyweightPicker will send an _onSelect_ event with a selected item's
+	information. This can be received by a client application to determine which
+	item was selected.
+
+		enyo.kind({
+			handlers: {
+				onSelect: "itemSelected"
+			},
+			components: [
+				{kind: "onyx.PickerDecorator", components: [
+					{},
+					{name: "yearPicker", kind: "onyx.FlyweightPicker", count: 200,
+						onSetupItem: "setupYear", components: [
+							{name: "year"}
+						]
+					}
+				]}
+			],
+			create: function() {
+				var d = new Date();
+				var y = d.getYear();
+				this.$.yearPicker.setSelected(y);
+				this.$.year.setContent(1900+y);
+			},
+			setupYear: function(inSender, inEvent) {
+				this.$.year.setContent(1900+inEvent.index);
+			},
+			itemSelected: function(inSender, inEvent) {
+				enyo.log("Picker Item Selected: " + inEvent.selected.content);
+			}
+		})
+ */
+enyo.kind({
+	name: "onyx.FlyweightPicker",
+	kind: "onyx.Picker",
+	classes: "onyx-flyweight-picker",
+	published: {
+		//* How many rows to render
+		count: 0
+	},
+	events: {
+		//* Sends the row index, and the row control, for decoration.
+		onSetupItem: "",
+		onSelect: ""
+	},
+	handlers: {
+		onSelect: "itemSelect"
+	},
+	components: [
+		{name: "scroller", kind: "enyo.Scroller", strategyKind: "TouchScrollStrategy", components: [
+			{name: "client", kind: "FlyweightRepeater", ontap: "itemTap"}
+		]}
+	],
+	scrollerName: "scroller",
+	create: function() {
+		this.inherited(arguments);
+		this.countChanged();
+	},
+	rendered: function() {
+		this.inherited(arguments);
+		this.selectedChanged();
+	},
+	scrollToSelected: function() {
+		var n = this.$.client.fetchRowNode(this.selected);
+		this.getScroller().scrollToNode(n, !this.menuUp);
+	},
+	countChanged: function() {
+		this.$.client.count = this.count;
+	},
+	processActivatedItem: function(inItem) {
+		this.item = inItem;
+	},
+	selectedChanged: function(inOld) {
+		if (!this.item) {
+			return;
+		}
+		if (inOld !== undefined) {
+			this.item.removeClass("selected");
+			this.$.client.renderRow(inOld);
+		}
+		this.item.addClass("selected");
+		this.$.client.renderRow(this.selected);
+		// need to remove the class from control to make sure it won't apply to other rows
+		this.item.removeClass("selected");
+		var n = this.$.client.fetchRowNode(this.selected);
+		this.doChange({selected: this.selected, content: n && n.textContent || this.item.content});
+	},
+	itemTap: function(inSender, inEvent) {
+		this.setSelected(inEvent.rowIndex);
+		//Send the select event that we want the client to receive.
+		this.doSelect({selected: this.item, content: this.item.content})
+	},
+	itemSelect: function(inSender, inEvent) {
+		//Block all select events that aren't coming from this control. This is to prevent select events from MenuItems since they won't have the correct value in a Flyweight context.
+		if (inEvent.originator != this) {
+			return true;
+		}
+	}
+});
diff --git a/html/lib/onyx/source/Grabber.js b/html/lib/onyx/source/Grabber.js
new file mode 100644
index 0000000..0fd74f5
--- /dev/null
+++ b/html/lib/onyx/source/Grabber.js
@@ -0,0 +1,19 @@
+/**
+	A control styled to indicate that an object can be grabbed and moved.  It
+	should only be used in this limited context--to indicate that dragging the
+	object will result in movement.
+
+		{kind: "onyx.Toolbar", components: [
+			{kind: "onyx.Grabber", ondragstart: "grabberDragstart",
+				ondrag: "grabberDrag", ondragfinish: "grabberDragFinish"},
+			{kind: "onyx.Button", content: "More stuff"}
+		]}
+
+	When using a Grabber inside a Fittable control, be sure to set "noStretch: true"
+	on the Fittable or else give it an explicit height.  Otherwise, the Grabber
+	may not be visible.
+*/
+enyo.kind({
+	name: "onyx.Grabber",
+	classes: "onyx-grabber"
+});
\ No newline at end of file
diff --git a/html/lib/onyx/source/Groupbox.js b/html/lib/onyx/source/Groupbox.js
new file mode 100644
index 0000000..77a0ada
--- /dev/null
+++ b/html/lib/onyx/source/Groupbox.js
@@ -0,0 +1,37 @@
+/**
+	A Groupbox displays controls as a vertically stacked group.
+
+	A header may be added by placing an <a href="#onyx.GroupboxHeader">onyx.GroupboxHeader</a> as the first control in the Groupbox.
+
+		{kind: "onyx.Groupbox", components: [
+			{kind: "onyx.GroupboxHeader", content: "Sounds"},
+				{components: [
+					{content: "System Sounds"},
+					{kind: "onyx.ToggleButton", value: true}
+				]},
+				{kind: "onyx.InputDecorator", components: [
+					{kind: "onyx.Input"}
+				]}
+			]}
+		]}
+
+*/
+enyo.kind({
+	name: "onyx.Groupbox",
+	classes: "onyx-groupbox"
+});
+
+/**
+	A GroupboxHeader is designed to be placed inside an <a href="#onyx.Groupbox">onyx.Groupbox</a>. When a header for a group is desired,
+	make a GroupboxHeader the first control inside a Groupbox.
+
+		{kind: "onyx.Groupbox", components: [
+			{kind: "onyx.GroupboxHeader", content: "Sounds"},
+			{content: "Yawn"},
+			{content: "Beep"}
+		]}
+*/
+enyo.kind({
+	name: "onyx.GroupboxHeader",
+	classes: "onyx-groupbox-header"
+});
\ No newline at end of file
diff --git a/html/lib/onyx/source/Icon.js b/html/lib/onyx/source/Icon.js
new file mode 100644
index 0000000..ea10a99
--- /dev/null
+++ b/html/lib/onyx/source/Icon.js
@@ -0,0 +1,31 @@
+/**
+	A control that displays an icon. The icon image is specified by setting the
+	*src* property to a URL.
+
+	In onyx, icons have a size of 32x32 pixels. Since the icon image is applied
+	as a CSS background, the height and width of an icon must be set if an image
+	of a different size is used.
+
+		{kind: "onyx.Icon", src: "images/search.png"}
+
+	When an icon should act like a button, use an <a href="#onyx.IconButton">onyx.IconButton</a>.
+
+*/
+enyo.kind({
+	name: "onyx.Icon",
+	published: {
+		// url path specifying the icon image
+		src: ""
+	},
+	classes: "onyx-icon",
+	//* @protected
+	create: function() {
+		this.inherited(arguments);
+		if (this.src) {
+			this.srcChanged();
+		}
+	},
+	srcChanged: function() {
+		this.applyStyle("background-image", "url(" + enyo.path.rewrite(this.src) + ")");
+	}
+});
\ No newline at end of file
diff --git a/html/lib/onyx/source/IconButton.js b/html/lib/onyx/source/IconButton.js
new file mode 100644
index 0000000..7d852c5
--- /dev/null
+++ b/html/lib/onyx/source/IconButton.js
@@ -0,0 +1,38 @@
+/**
+	An icon that acts like a button. The icon image is specified by setting the
+	*src* property to a URL.
+
+		{kind: "onyx.IconButton", src: "images/search.png", ontap: "buttonTap"}
+	
+	If you want to combine an icon with text inside a button, use an 
+	<a href="#onyx.Icon">onyx.Icon</a> inside an
+	<a href="#onyx.Button">onyx.Button</a>, e.g.:
+
+		{kind: "onyx.Button", ontap: "buttonTap", components: [
+			{kind: "onyx.Icon", src: "images/search.png"},
+			{content: "Button"}
+		]}
+
+	The image associated with the *src* property of the IconButton is assumed
+	to be 32x64-pixel strip with the top half showing the button's normal state
+	and the bottom half showing its state when hovered-over or active.
+*/
+enyo.kind({
+	name: "onyx.IconButton",
+	kind: "onyx.Icon",
+	published: {
+		active: false
+	},
+	classes: "onyx-icon-button",
+	//* @protected
+	rendered: function() {
+		this.inherited(arguments);
+		this.activeChanged();
+	},
+	tap: function() {
+		this.setActive(true);
+	},
+	activeChanged: function() {
+		this.bubble("onActivate");
+	}
+});
diff --git a/html/lib/onyx/source/Input.js b/html/lib/onyx/source/Input.js
new file mode 100644
index 0000000..a1ebe53
--- /dev/null
+++ b/html/lib/onyx/source/Input.js
@@ -0,0 +1,20 @@
+/**
+	An onyx-styled input control. In addition to the features of
+	<a href="#enyo.Input">enyo.Input</a>, onyx.Input has a *defaultFocus*
+	property that can be set to true to	focus the input when it's rendered.
+	Only one input should be set as the *defaultFocus*.
+
+	Typically, an onyx.Input is placed inside an
+	<a href="#onyx.InputDecorator">onyx.InputDecorator</a>, which provides
+	styling, e.g.:
+
+		{kind: "onyx.InputDecorator", components: [
+			{kind: "onyx.Input", placeholder: "Enter some text...", onchange: "inputChange"}
+		]}
+
+*/
+enyo.kind({
+	name: "onyx.Input",
+	kind: "enyo.Input",
+	classes: "onyx-input"
+});
diff --git a/html/lib/onyx/source/InputDecorator.js b/html/lib/onyx/source/InputDecorator.js
new file mode 100644
index 0000000..7dded2d
--- /dev/null
+++ b/html/lib/onyx/source/InputDecorator.js
@@ -0,0 +1,46 @@
+/**
+	_onyx.InputDecorator_ is a control that provides input styling. Any controls
+	in the InputDecorator will appear to be inside an area styled as an	input.
+	Usually, an InputDecorator surrounds an	<a href="#onyx.Input">onyx.Input</a>.
+
+		{kind: "onyx.InputDecorator", components: [
+			{kind: "onyx.Input"}
+		]}
+
+	Other controls, such as buttons, may be placed to the right or left of the
+	input control, e.g.:
+
+		{kind: "onyx.InputDecorator", components: [
+			{kind: "onyx.IconButton", src: "search.png"},
+			{kind: "onyx.Input"},
+			{kind: "onyx.IconButton", src: "cancel.png"}
+		]}
+
+	Note that the InputDecorator fits around the content inside it. If the
+	decorator is sized, then its contents will likely need to be sized as well.
+
+		{kind: "onyx.InputDecorator", style: "width: 500px;", components: [
+			{kind: "onyx.Input", style: "width: 100%;"}
+		]}
+*/
+enyo.kind({
+	name: "onyx.InputDecorator",
+	kind: "enyo.ToolDecorator",
+	tag: "label",
+	classes: "onyx-input-decorator",
+	//* @protected
+	handlers: {
+		onDisabledChange: "disabledChange",
+		onfocus: "receiveFocus",
+		onblur: "receiveBlur"
+	},
+	receiveFocus: function() {
+		this.addClass("onyx-focused");
+	},
+	receiveBlur: function() {
+		this.removeClass("onyx-focused");
+	},
+	disabledChange: function(inSender, inEvent) {
+		this.addRemoveClass("onyx-disabled", inEvent.originator.disabled);
+	}
+});
\ No newline at end of file
diff --git a/html/lib/onyx/source/Item.js b/html/lib/onyx/source/Item.js
new file mode 100644
index 0000000..377fb5b
--- /dev/null
+++ b/html/lib/onyx/source/Item.js
@@ -0,0 +1,60 @@
+/**
+	A control designed to display a group of stacked items, typically used in
+	lists. Items are displayed with small guide lines between them; by default,
+	they are highlighted when tapped. Set *tapHighlight* to false to prevent the
+	highlighting.
+
+		{kind: "onyx.Item", tapHighlight: false}
+*/
+enyo.kind({
+	name: "onyx.Item",
+	classes: "onyx-item",
+	tapHighlight: true,
+	handlers: {
+		onhold: "hold",
+		onrelease: "release"
+	},
+	//* @public
+	hold: function(inSender, inEvent) {
+		if (this.tapHighlight) {
+			onyx.Item.addFlyweightClass(this.controlParent || this, "onyx-highlight", inEvent);
+		}
+	},
+	//* @public
+	release: function(inSender, inEvent) {
+		if (this.tapHighlight) {
+			onyx.Item.removeFlyweightClass(this.controlParent || this, "onyx-highlight", inEvent);
+		}
+	},
+	//* @protected
+	statics: {
+		addFlyweightClass: function(inControl, inClass, inEvent, inIndex) {
+			var flyweight = inEvent.flyweight;
+			if (flyweight) {
+				var index = inIndex != undefined ? inIndex : inEvent.index;
+				flyweight.performOnRow(index, function() {
+					if (!inControl.hasClass(inClass)) {
+						inControl.addClass(inClass);
+					} else {
+						inControl.setClassAttribute(inControl.getClassAttribute());
+					}
+				});
+				inControl.removeClass(inClass);
+			}
+		},
+		// FIXME: dry
+		removeFlyweightClass: function(inControl, inClass, inEvent, inIndex) {
+			var flyweight = inEvent.flyweight;
+			if (flyweight) {
+				var index = inIndex != undefined ? inIndex : inEvent.index;
+				flyweight.performOnRow(index, function() {
+					if (!inControl.hasClass(inClass)) {
+						inControl.setClassAttribute(inControl.getClassAttribute());
+					} else {
+						inControl.removeClass(inClass);
+					}
+				});
+			}
+		}
+	}
+});
\ No newline at end of file
diff --git a/html/lib/onyx/source/Menu.js b/html/lib/onyx/source/Menu.js
new file mode 100644
index 0000000..53353a0
--- /dev/null
+++ b/html/lib/onyx/source/Menu.js
@@ -0,0 +1,130 @@
+/**
+	_onyx.Menu_ is a subkind of <a href="#onyx.Popup">onyx.Popup</a> that
+	displays a list of <a href="#onyx.MenuItems">onyx.MenuItems</a> and looks
+	like a popup menu. It is meant to be used in conjunction with an
+	<a href="#onyx.MenuDecorator">onyx.MenuDecorator</a>. The decorator couples
+	the menu with an activating control, which may be a button or any other
+	control with an _onActivate_ event. When the control is activated, the menu
+	shows itself in the correct position relative to the activator.
+
+		{kind: "onyx.MenuDecorator", components: [
+			{content: "Show menu"},
+			{kind: "onyx.Menu", components: [
+				{content: "1"},
+				{content: "2"},
+				{classes: "onyx-menu-divider"},
+				{content: "3"},
+			]}
+		]}
+
+	A menu may be floated by setting the _floating_ property to true. When a
+	menu is not floating (the default), it will scroll with the activating
+	control, but may be obscured by surrounding content with a higher z-index.
+	When floating, it will never be obscured, but it will not scroll with the
+	activating button.
+ */
+enyo.kind({
+	name: "onyx.Menu",
+	kind: "onyx.Popup",
+	modal: true,
+	defaultKind: "onyx.MenuItem",
+	classes: "onyx-menu",
+	showOnTop: false,
+	handlers: {
+		onActivate: "itemActivated",
+		onRequestShowMenu: "requestMenuShow",
+		onRequestHideMenu: "requestHide"
+	},
+	itemActivated: function(inSender, inEvent) {
+		inEvent.originator.setActive(false);
+		return true;
+	},
+	showingChanged: function() {
+		this.inherited(arguments);
+		this.adjustPosition(true);
+	},
+	requestMenuShow: function(inSender, inEvent) {
+		if (this.floating) {
+			var n = inEvent.activator.hasNode();
+			if (n) {
+				var r = this.activatorOffset = this.getPageOffset(n);
+				this.applyPosition({top: r.top + (this.showOnTop ? 0 : r.height), left: r.left, width: r.width});
+			}
+		}
+		this.show();
+		return true;
+	},
+	applyPosition: function(inRect) {
+		var s = ""
+		for (n in inRect) {
+			s += (n + ":" + inRect[n] + (isNaN(inRect[n]) ? "; " : "px; "));
+		}
+		this.addStyles(s);
+	},
+	getPageOffset: function(inNode) {
+		// getBoundingClientRect returns top/left values which are relative to the viewport and not absolute
+		var r = inNode.getBoundingClientRect();
+
+		// IE8 doesn't return window.page{X/Y}Offset & r.{height/width}
+		// FIXME: Perhaps use an alternate universal method instead of conditionals 
+		var pageYOffset = (window.pageYOffset === undefined) ? document.documentElement.scrollTop : window.pageYOffset;
+		var pageXOffset = (window.pageXOffset === undefined) ? document.documentElement.scrollLeft : window.pageXOffset;
+		var rHeight = (r.height === undefined) ? (r.bottom - r.top) : r.height;
+		var rWidth = (r.width === undefined) ? (r.right - r.left) : r.width;
+
+		return {top: r.top + pageYOffset, left: r.left + pageXOffset, height: rHeight, width: rWidth};
+	},	
+	//* @protected
+	/* Adjusts the menu position to fit inside the current window size. 
+	   belowActivator determines whether to position the top of the menu below or on top of the activator
+	*/
+	adjustPosition: function(belowActivator) {
+		if (this.showing && this.hasNode()) {
+			this.removeClass("onyx-menu-up");
+						
+			//reset the left position before we get the bounding rect for proper horizontal calculation
+			this.floating ? enyo.noop : this.applyPosition({left: "auto"});
+							
+			var b = this.node.getBoundingClientRect();
+			var bHeight = (b.height === undefined) ? (b.bottom - b.top) : b.height;
+			var innerHeight = (window.innerHeight === undefined) ? document.documentElement.clientHeight : window.innerHeight;
+			var innerWidth = (window.innerWidth === undefined) ? document.documentElement.clientWidth : window.innerWidth;			
+			
+			//position the menu above the activator if it's getting cut off, but only if there's more room above
+			this.menuUp = (b.top + bHeight > innerHeight) && ((innerHeight - b.bottom) < (b.top - bHeight));
+			this.addRemoveClass("onyx-menu-up", this.menuUp);
+			
+			//if floating, adjust the vertical positioning
+			if (this.floating) {
+				var r = this.activatorOffset;
+				//if the menu doesn't fit below the activator, move it up
+				if (this.menuUp) {
+					this.applyPosition({top: (r.top - bHeight + (this.showOnTop ? r.height : 0)), bottom: "auto"});
+				}
+				else {
+					//if the top of the menu is above the top of the activator and there's room to move it down, do so
+					if ((b.top < r.top) && (r.top + (belowActivator ? r.height : 0) + bHeight < innerHeight))
+					{
+						this.applyPosition({top: r.top + (this.showOnTop ? 0 : r.height), bottom: "auto"});
+					}
+				}
+			}
+			
+			//adjust the horizontal positioning to keep the menu from being cut off on the right
+			if ((b.right) > innerWidth) {
+				if (this.floating){
+					this.applyPosition({left: r.left-(b.left + b.width - innerWidth)});
+				} else {
+					this.applyPosition({left: -(b.right - innerWidth)});
+				}					
+			}			
+		}
+	},
+	resizeHandler: function() {
+		this.inherited(arguments);			
+		this.adjustPosition(true);	
+	},
+	requestHide: function(){
+		this.setShowing(false);
+	}
+});
\ No newline at end of file
diff --git a/html/lib/onyx/source/MenuDecorator.js b/html/lib/onyx/source/MenuDecorator.js
new file mode 100644
index 0000000..e348821
--- /dev/null
+++ b/html/lib/onyx/source/MenuDecorator.js
@@ -0,0 +1,60 @@
+/**
+	A control that activates an <a href="#onyx.Menu">onyx.Menu</a>. It loosely
+	couples the Menu with an activating control, which may be a button or any
+	other control with an _onActivate_ event. The decorator must surround both
+	the	activating control and the menu itself.	When the control is activated,
+	the	menu shows itself in the correct position relative to the activator.
+	
+		{kind: "onyx.MenuDecorator", components: [
+			{content: "Show menu"},
+			{kind: "onyx.Menu", components: [
+				{content: "1"},
+				{content: "2"},
+				{classes: "onyx-menu-divider"},
+				{content: "3"},
+			]}
+		]}
+ */
+enyo.kind({
+	name: "onyx.MenuDecorator",
+	kind: "onyx.TooltipDecorator",
+	defaultKind: "onyx.Button",
+	// selection on ios prevents tap events, so avoid.
+	classes: "onyx-popup-decorator enyo-unselectable",
+	handlers: {
+		onActivate: "activated",
+		onHide: "menuHidden"
+	},
+	activated: function(inSender, inEvent) {
+		this.requestHideTooltip();
+		if (inEvent.originator.active) {
+			this.menuActive = true;
+			this.activator = inEvent.originator;
+			this.activator.addClass("active");
+			this.requestShowMenu();
+		}
+	},
+	requestShowMenu: function() {
+		this.waterfallDown("onRequestShowMenu", {activator: this.activator});
+	},
+	requestHideMenu: function() {
+		this.waterfallDown("onRequestHideMenu");
+	},
+	menuHidden: function() {
+		this.menuActive = false;
+		if (this.activator) {
+			this.activator.setActive(false);
+			this.activator.removeClass("active");
+		}
+	},
+	enter: function(inSender) {
+		if (!this.menuActive) {
+			this.inherited(arguments);
+		}
+	},
+	leave: function(inSender, inEvent) {
+		if (!this.menuActive) {
+			this.inherited(arguments);
+		}
+	}
+});
\ No newline at end of file
diff --git a/html/lib/onyx/source/MenuItem.js b/html/lib/onyx/source/MenuItem.js
new file mode 100644
index 0000000..1272292
--- /dev/null
+++ b/html/lib/onyx/source/MenuItem.js
@@ -0,0 +1,41 @@
+/**
+	_MenuItem_ is a button styled to look like a menu item, intended for use in
+	an <a href="#onyx.Menu">onyx.Menu</a>. When the MenuItem is tapped, it
+	tells the menu to hide itself and sends an _onSelect_ event with its
+	content and a reference to itself. This event and its properties may be
+	received by a client application to determine which menu item was selected.
+
+		enyo.kind({
+			handlers: {
+				onSelect: "itemSelected"
+			},
+			components: [
+				{kind: "onyx.MenuDecorator", components: [
+					{content: "Open Menu (floating)"},
+					{kind: "onyx.Menu", floating: true, components: [
+						{content: "1"},
+						{content: "2"},
+						{classes: "onyx-menu-divider"},
+						{content: "3"},
+					]}
+				]}
+			],
+			itemSelected: function(inSender, inEvent) {
+				enyo.log("Menu Item Selected: " + inEvent.originator.content);
+			}
+		})
+ */
+enyo.kind({
+	name: "onyx.MenuItem",
+	kind: "enyo.Button",
+	tag: "div",
+	classes: "onyx-menu-item",
+	events: {
+		onSelect: ""
+	},
+	tap: function(inSender) {
+		this.inherited(arguments);
+		this.bubble("onRequestHideMenu");
+		this.doSelect({selected:this, content:this.content});
+	}
+});
\ No newline at end of file
diff --git a/html/lib/onyx/source/MoreToolbar.js b/html/lib/onyx/source/MoreToolbar.js
new file mode 100644
index 0000000..83afb68
--- /dev/null
+++ b/html/lib/onyx/source/MoreToolbar.js
@@ -0,0 +1,141 @@
+/**
+	onyx.MoreToolbar is a kind of <a href="#onyx.Toolbar">onyx.Toolbar</a> that can adapt to different screen sizes by moving overflowing controls and content into an <a href="#onyx.Menu">onyx.Menu</a>
+
+		{kind: "onyx.MoreToolbar", components: [
+			{content: "More Toolbar", unmoveable: true},
+			{kind: "onyx.Button", content: "Alpha"},
+			{kind: "onyx.Button", content: "Beta"},
+			{kind: "onyx.Button", content: "Gamma", unmoveable: true},
+			{kind: "onyx.Button", content: "Epsilon"}
+		]},
+		
+	A control can be forced to never move to the menu by setting the optional unmovable property to true (default is false).
+	
+	Optionally you can specify a class to be applied to the menu via the menuClass property. You can also specify a class for items that have been moved via the the movedClass property.
+*/
+
+enyo.kind({
+	name: "onyx.MoreToolbar",
+	//* @public
+	classes: "onyx-toolbar onyx-more-toolbar",
+	//* style class to be applied to the menu
+	menuClass: "",
+	//* style class to be applied to individual controls moved from the toolbar to the menu
+	movedClass: "",
+	//* @protected
+	layoutKind: "FittableColumnsLayout",
+	noStretch: true,
+	handlers: {
+		onHide: "reflow"
+	},
+	tools: [
+		{name: "client", fit: true, classes: "onyx-toolbar-inline"},
+		{name: "nard", kind: "onyx.MenuDecorator", showing: false, onActivate: "activated", components: [
+			{kind: "onyx.IconButton", classes: "onyx-more-button"},
+			{name: "menu", kind: "onyx.Menu", classes: "onyx-more-menu", prepend: true}
+		]}
+	],
+	initComponents: function() {
+		if(this.menuClass && this.menuClass.length>0 && !this.$.menu.hasClass(this.menuClass)) {
+			this.$.menu.addClass(this.menuClass);
+		}
+		this.createChrome(this.tools);
+		this.inherited(arguments);
+	},
+	reflow: function() {
+		this.inherited(arguments);
+		if (this.isContentOverflowing()) {
+			this.$.nard.show();
+			if (this.popItem()) {
+				this.reflow();
+			}
+		} else if (this.tryPushItem()) {
+			this.reflow();
+		} else if (!this.$.menu.children.length) {
+			this.$.nard.hide();
+			this.$.menu.hide();
+		}
+	},
+	activated: function(inSender, inEvent) {
+		this.addRemoveClass("active",inEvent.originator.active);
+	},
+	popItem: function() {
+		var c = this.findCollapsibleItem();
+		if (c) {
+			//apply movedClass is needed
+			if(this.movedClass && this.movedClass.length>0 && !c.hasClass(this.movedClass)) {
+				c.addClass(this.movedClass);
+			}
+			this.$.menu.addChild(c);
+			var p = this.$.menu.hasNode();
+			if (p && c.hasNode()) {
+				c.insertNodeInParent(p);
+			}
+			return true;
+		}
+	},
+	pushItem: function() {
+		var c$ = this.$.menu.children;
+		var c = c$[0];
+		if (c) {
+			//remove any applied movedClass
+			if(this.movedClass && this.movedClass.length>0 && c.hasClass(this.movedClass)) {
+				c.removeClass(this.movedClass);
+			}
+			this.$.client.addChild(c);
+			var p = this.$.client.hasNode();
+			if (p && c.hasNode()) {
+				var nextChild = undefined;
+				var currIndex;
+				for(var i=0; i<this.$.client.children.length; i++) {
+					var curr = this.$.client.children[i];
+					if(curr.toolbarIndex!=undefined && curr.toolbarIndex!=i) {
+						nextChild = curr;
+						currIndex = i;
+						break;
+					}
+				}
+				if(nextChild && nextChild.hasNode()) {
+					c.insertNodeInParent(p, nextChild.node);
+					var newChild = this.$.client.children.pop();
+					this.$.client.children.splice(currIndex, 0, newChild);
+				} else {
+					c.appendNodeToParent(p);
+				}
+			}
+			return true;
+		}
+	},
+	tryPushItem: function() {
+		if (this.pushItem()) {
+			if (!this.isContentOverflowing()) {
+				return true;
+			} else {
+				this.popItem();
+			}
+		}
+	},
+	isContentOverflowing: function() {
+		if (this.$.client.hasNode()) {
+			var c$ = this.$.client.children;
+			var n = c$[c$.length-1].hasNode();
+			if(n) {
+				//Workaround: scrollWidth value not working in Firefox, so manually compute
+				//return (this.$.client.node.scrollWidth > this.$.client.node.clientWidth);
+				return ((n.offsetLeft + n.offsetWidth) > this.$.client.node.clientWidth);
+			}
+		}
+	},
+	findCollapsibleItem: function() {
+		var c$ = this.$.client.children;
+		for (var i=c$.length-1; c=c$[i]; i--) {
+			if (!c.unmoveable) {
+				return c;
+			} else {
+				if(c.toolbarIndex==undefined) {
+					c.toolbarIndex = i;
+				}
+			}
+		}
+	}
+});
diff --git a/html/lib/onyx/source/Picker.js b/html/lib/onyx/source/Picker.js
new file mode 100644
index 0000000..7e758c0
--- /dev/null
+++ b/html/lib/onyx/source/Picker.js
@@ -0,0 +1,87 @@
+/**
+	_onyx.Picker_, a subkind of <a href="#onyx.Menu">onyx.Menu</a>, is used to
+	display	a list of items that can be selected. It is meant to be used in
+	conjunction with an	<a href="#onyx.PickerDecorator">onyx.PickerDecorator</a>.
+	The decorator loosely couples the Picker with an
+	<a href="#onyx.PickerButton">onyx.PickerButton</a>--a button that, when
+	tapped, shows the picker. Once an item is selected, the list of items closes,
+	but the item stays selected and the PickerButton displays the choice that
+	was made.
+
+	To initialize the Picker to a particular value, set the _active_ property to
+	true for the item that should be selected.
+	
+		{kind: "onyx.PickerDecorator", components: [
+			{}, //this uses the defaultKind property of PickerDecorator to inherit from PickerButton
+			{kind: "onyx.Picker", components: [
+				{content: "Gmail", active: true},
+				{content: "Yahoo"},
+				{content: "Outlook"},
+				{content: "Hotmail"}
+			]}
+		]}
+
+	Each item in the list is an <a href="#onyx.MenuItem">onyx.MenuItem</a>, so
+	an _onSelect_ event with the item can be listened to by a client application
+	to determine which picker item was selected.
+ */
+enyo.kind({
+	name: "onyx.Picker",
+	kind: "onyx.Menu",
+	classes: "onyx-picker enyo-unselectable",
+	published: {
+		selected: null,
+		maxHeight: "200px"
+	},
+	events: {
+		onChange: ""
+	},
+	components: [
+		{name: "client", kind: "enyo.Scroller", strategyKind: "TouchScrollStrategy"}
+	],
+	floating: true,
+	showOnTop: true,
+	scrollerName: "client",
+	create: function() {
+		this.inherited(arguments);
+		this.maxHeightChanged();
+	},
+	getScroller: function() {
+		return this.$[this.scrollerName];
+	},
+	maxHeightChanged: function() {
+		this.getScroller().setMaxHeight(this.maxHeight);
+	},
+	showingChanged: function() {
+		this.getScroller().setShowing(this.showing);
+		this.inherited(arguments);
+		if (this.showing && this.selected) {
+			this.scrollToSelected();
+		}
+	},
+	scrollToSelected: function() {
+		this.getScroller().scrollToControl(this.selected, !this.menuUp);
+	},
+	itemActivated: function(inSender, inEvent) {
+		this.processActivatedItem(inEvent.originator)
+		return this.inherited(arguments);
+	},
+	processActivatedItem: function(inItem) {
+		if (inItem.active) {
+			this.setSelected(inItem);
+		}
+	},
+	selectedChanged: function(inOld) {
+		if (inOld) {
+			inOld.removeClass("selected");
+		}
+		if (this.selected) {
+			this.selected.addClass("selected");
+			this.doChange({selected: this.selected, content: this.selected.content});
+		};
+	},
+	resizeHandler: function() {
+		this.inherited(arguments);			
+		this.adjustPosition(false);
+	}
+});
diff --git a/html/lib/onyx/source/PickerButton.js b/html/lib/onyx/source/PickerButton.js
new file mode 100644
index 0000000..c5f5730
--- /dev/null
+++ b/html/lib/onyx/source/PickerButton.js
@@ -0,0 +1,16 @@
+/**
+	_onyx.PickerButton_ is a button that, when tapped, shows an
+	<a href="#onyx.Picker">onyx.Picker</a>. Once an item is selected, the list
+	of items closes, but the item stays selected and the PickerButton displays
+	the choice that was made.
+ */
+enyo.kind({
+	name: "onyx.PickerButton",
+	kind: "onyx.Button",
+	handlers: {
+		onChange: "change"
+	},
+	change: function(inSender, inEvent) {
+		this.setContent(inEvent.content);
+	}
+});
\ No newline at end of file
diff --git a/html/lib/onyx/source/PickerDecorator.js b/html/lib/onyx/source/PickerDecorator.js
new file mode 100644
index 0000000..bf16109
--- /dev/null
+++ b/html/lib/onyx/source/PickerDecorator.js
@@ -0,0 +1,30 @@
+/**
+	A control that activates an <a href="#onyx.Picker">onyx.Picker</a>. It
+	loosely couples the Picker with an activating
+	<a href="#onyx.PickerButton">onyx.PickerButton</a>. The decorator must
+	surround both the activating button and the picker itself. When the button
+	is activated, the picker shows itself in the correct position relative to
+	the activator.
+	
+		{kind: "onyx.PickerDecorator", components: [
+			{}, //this uses the defaultKind property of PickerDecorator to inherit from PickerButton
+			{kind: "onyx.Picker", components: [
+				{content: "Gmail", active: true},
+				{content: "Yahoo"},
+				{content: "Outlook"},
+				{content: "Hotmail"}
+			]}
+		]}
+ */
+enyo.kind({
+	name: "onyx.PickerDecorator",
+	kind: "onyx.MenuDecorator",
+	classes: "onyx-picker-decorator",
+	defaultKind: "onyx.PickerButton",
+	handlers: {
+		onChange: "change"
+	},
+	change: function(inSender, inEvent) {
+		this.waterfallDown("onChange", inEvent);
+	}
+});
diff --git a/html/lib/onyx/source/Popup.js b/html/lib/onyx/source/Popup.js
new file mode 100644
index 0000000..105431a
--- /dev/null
+++ b/html/lib/onyx/source/Popup.js
@@ -0,0 +1,87 @@
+/**
+	An enhanced popup with built-in scrim and z-index handling. To avoid
+	obscuring popup contents, scrims require the dialog to be floating;
+	otherwise, they won't render. Modal popups get a transparent scrim by
+	default, unless the modal popup isn't floating. To get a translucent scrim
+	when modal, specify _scrim: true, scrimWhenModal: false_.
+*/
+enyo.kind({
+	name: "onyx.Popup",
+	kind: "Popup",
+	classes: "onyx-popup",
+	published: {
+		/**
+			Determines whether a scrim will appear when the dialog is modal.
+			Note that modal scrims are transparent, so you won't see them.
+		*/
+		scrimWhenModal: true,
+		//* Determines whether or not to display a scrim. Only displays scrims
+		//* when floating.
+		scrim: false,
+		/**
+			Optional class name to apply to the scrim. Be aware that the scrim
+			is a singleton and you will be modifying the scrim instance used for
+			other popups.
+		*/
+		scrimClassName: ""
+	},
+	//* @protected
+	statics: { count: 0 },
+	defaultZ: 120,
+	showingChanged: function() {
+		if(this.showing) {
+			onyx.Popup.count++;
+			this.applyZIndex();
+		}
+		else {
+			if(onyx.Popup.count > 0) {
+				onyx.Popup.count--;
+			}
+		}
+		this.showHideScrim(this.showing);
+		this.inherited(arguments);
+	},
+	showHideScrim: function(inShow) {
+		if (this.floating && (this.scrim || (this.modal && this.scrimWhenModal))) {
+			var scrim = this.getScrim();
+			if (inShow) {
+				// move scrim to just under the popup to obscure rest of screen
+				var i = this.getScrimZIndex();
+				this._scrimZ = i;
+				scrim.showAtZIndex(i);
+			} else {
+				scrim.hideAtZIndex(this._scrimZ);
+			}
+			enyo.call(scrim, "addRemoveClass", [this.scrimClassName, scrim.showing]);
+		}
+	},
+	getScrimZIndex: function() {
+		// Position scrim directly below popup
+		return this.findZIndex()-1;
+	},
+	getScrim: function() {
+		// show a transparent scrim for modal popups if scrimWhenModal is true
+		// if scrim is true, then show a regular scrim.
+		if (this.modal && this.scrimWhenModal && !this.scrim) {
+			return onyx.scrimTransparent.make();
+		}
+		return onyx.scrim.make();
+	},
+	applyZIndex: function() {
+		// Adjust the zIndex so that popups will properly stack on each other.
+		this._zIndex = onyx.Popup.count * 2 + this.findZIndex() + 1;
+		// leave room for scrim
+		this.applyStyle("z-index", this._zIndex);
+	},
+	findZIndex: function() {
+		// a default z value
+		var z = this.defaultZ;
+		if (this._zIndex) {
+			z = this._zIndex;
+		} else if (this.hasNode()) {
+			// Re-use existing zIndex if it has one
+			z = Number(enyo.dom.getComputedStyleValue(this.node, "z-index")) || z;
+		}
+		return (this._zIndex = z);
+	}
+});
\ No newline at end of file
diff --git a/html/lib/onyx/source/ProgressBar.js b/html/lib/onyx/source/ProgressBar.js
new file mode 100644
index 0000000..5a41fac
--- /dev/null
+++ b/html/lib/onyx/source/ProgressBar.js
@@ -0,0 +1,92 @@
+/**
+	A control that shows the current progress of a process in a horizontal bar.
+	
+		{kind: "onyx.ProgressBar", progress: 10}
+	
+	To animate progress changes, call the *animateProgressTo* method:
+	
+		this.$.progressBar.animateProgressTo(50);
+		
+	You may customize the color of the bar by applying a style via the
+	*barClasses* property, e.g.:
+	
+		{kind: "onyx.ProgressBar", barClasses: "onyx-dark"}
+	
+	When the *showStripes* property is true (the default), stripes are shown in
+	the progress bar; when *animateStripes* is true (also the default), these
+	stripes are animated. The animated stripes use CSS3 gradients and animation
+	to produce the effects.  In browsers that don't support these features, the
+	effects will not be visible.
+*/
+enyo.kind({
+	name: "onyx.ProgressBar",
+	classes: "onyx-progress-bar",
+	published: {
+		progress: 0,
+		min: 0,
+		max: 100,
+		barClasses: "",
+		showStripes: true,
+		animateStripes: true
+	},
+	events: {
+		onAnimateProgressFinish: ""
+	},
+	components: [
+		{name: "progressAnimator", kind: "Animator", onStep: "progressAnimatorStep", onEnd: "progressAnimatorComplete"},
+		{name: "bar", classes: "onyx-progress-bar-bar"}
+	],
+	//* @protected
+	create: function() {
+		this.inherited(arguments);
+		this.progressChanged();
+		this.barClassesChanged();
+		this.showStripesChanged();
+		this.animateStripesChanged();
+	},
+	barClassesChanged: function(inOld) {
+		this.$.bar.removeClass(inOld);
+		this.$.bar.addClass(this.barClasses);
+	},
+	showStripesChanged: function() {
+		this.$.bar.addRemoveClass("striped", this.showStripes);
+	},
+	animateStripesChanged: function() {
+		this.$.bar.addRemoveClass("animated", this.animateStripes);
+	},
+	progressChanged: function() {
+		this.progress = this.clampValue(this.min, this.max, this.progress);
+		var p = this.calcPercent(this.progress);
+		this.updateBarPosition(p);
+	},
+	clampValue: function(inMin, inMax, inValue) {
+		return Math.max(inMin, Math.min(inValue, inMax));
+	},
+	calcRatio: function(inValue) {
+		return (inValue - this.min) / (this.max - this.min);
+	},
+	calcPercent: function(inValue) {
+		return this.calcRatio(inValue) * 100;
+	},
+	updateBarPosition: function(inPercent) {
+		this.$.bar.applyStyle("width", inPercent + "%");
+	},
+	//* @public
+	//* Animates progress to the given value.
+	animateProgressTo: function(inValue) {
+		this.$.progressAnimator.play({
+			startValue: this.progress,
+			endValue: inValue,
+			node: this.hasNode()
+		});
+	},
+	//* @protected
+	progressAnimatorStep: function(inSender) {
+		this.setProgress(inSender.value);
+		return true;
+	},
+	progressAnimatorComplete: function(inSender) {
+		this.doAnimateProgressFinish(inSender);
+		return true;
+	}
+});
\ No newline at end of file
diff --git a/html/lib/onyx/source/ProgressButton.js b/html/lib/onyx/source/ProgressButton.js
new file mode 100644
index 0000000..05779e0
--- /dev/null
+++ b/html/lib/onyx/source/ProgressButton.js
@@ -0,0 +1,28 @@
+/**
+	A progress bar that can have controls inside of it and has a cancel button on the right.
+	
+		{kind: "onyx.ProgressButton"},
+		{kind: "onyx.ProgressButton", barClasses: "onyx-light", progress: 20, components: [
+			{content: "0"},
+			{content: "100", style: "float: right;"}
+		]}
+
+*/
+enyo.kind({
+	name: "onyx.ProgressButton",
+	kind: "onyx.ProgressBar",
+	classes: "onyx-progress-button",
+	events: {
+		onCancel: ""
+	},
+	components: [
+		{name: "progressAnimator", kind: "Animator", onStep: "progressAnimatorStep", onEnd: "progressAnimatorComplete"},
+		{name: "bar", classes: "onyx-progress-bar-bar onyx-progress-button-bar"},
+		{name: "client", classes: "onyx-progress-button-client"},
+		{kind: "onyx.Icon", src: "$lib/onyx/images/progress-button-cancel.png", classes: "onyx-progress-button-icon", ontap: "cancelTap"}
+	],
+	//* @protected
+	cancelTap: function() {
+		this.doCancel();
+	}
+});
diff --git a/html/lib/onyx/source/RadioButton.js b/html/lib/onyx/source/RadioButton.js
new file mode 100644
index 0000000..972f23f
--- /dev/null
+++ b/html/lib/onyx/source/RadioButton.js
@@ -0,0 +1,8 @@
+/**
+	A radio button designed for use within an <a href="#onyx.RadioGroup">onyx.RadioGroup</a>.
+*/
+enyo.kind({
+	name: "onyx.RadioButton",
+	kind: "Button",
+	classes: "onyx-radiobutton"
+});
diff --git a/html/lib/onyx/source/RadioGroup.js b/html/lib/onyx/source/RadioGroup.js
new file mode 100644
index 0000000..50f0124
--- /dev/null
+++ b/html/lib/onyx/source/RadioGroup.js
@@ -0,0 +1,18 @@
+/**
+	A group of <a href="#onyx.RadioButton">onyx.RadioButton</a> objects
+	laid out horizontally. Within the same radio group, tapping on one radio button
+	will release any previously tapped radio button.
+	
+		{kind: "onyx.RadioGroup", components: [
+			{content: "foo", active: true},
+			{content: "bar"},
+			{content: "baz"}
+		]}
+*/
+enyo.kind({
+	name: "onyx.RadioGroup",
+	kind: "Group",
+	highlander: true,
+	defaultKind: "onyx.RadioButton"
+});
+
diff --git a/html/lib/onyx/source/RichText.js b/html/lib/onyx/source/RichText.js
new file mode 100644
index 0000000..8a7f388
--- /dev/null
+++ b/html/lib/onyx/source/RichText.js
@@ -0,0 +1,22 @@
+/**
+	An onyx-styled RichText control. In addition to the features of
+	<a href="#enyo.RichText">enyo.RichText</a>, onyx.RichText has a
+	*defaultFocus* property that can be set to true to focus the RichText when
+	it's rendered. Only one RichText should be set as the *defaultFocus*.
+
+	Typically, an onyx.RichText is placed inside an
+	<a href="#onyx.InputDecorator">onyx.InputDecorator</a>, which provides
+	styling, e.g.:
+
+		{kind: "onyx.InputDecorator", components: [
+			{kind: "onyx.RichText", style: "width: 100px;", onchange: "inputChange"}
+		]}
+
+	Note that RichTexts must be explicitly sized for width.  In addition,
+	RichText is not supported on Android < 3.
+*/
+enyo.kind({
+	name: "onyx.RichText",
+	kind: "enyo.RichText",
+	classes: "onyx-richtext"
+});
diff --git a/html/lib/onyx/source/Scrim.js b/html/lib/onyx/source/Scrim.js
new file mode 100644
index 0000000..e2cdb29
--- /dev/null
+++ b/html/lib/onyx/source/Scrim.js
@@ -0,0 +1,93 @@
+enyo.kind({
+	name: "onyx.Scrim",
+	showing: false,
+	classes: "onyx-scrim enyo-fit",
+	floating: false,
+	//* @protected
+	create: function() {
+		this.inherited(arguments);
+		this.zStack = [];
+		if (this.floating) {
+			this.setParent(enyo.floatingLayer);
+		}
+	},
+	showingChanged: function() {
+	// auto render when shown.
+		if (this.floating && this.showing && !this.hasNode()) {
+			this.render();
+		}
+		this.inherited(arguments);
+		//this.addRemoveClass(this.showingClassName, this.showing);
+	},
+	//* @protected
+	addZIndex: function(inZIndex) {
+		if (enyo.indexOf(inZIndex, this.zStack) < 0) {
+			this.zStack.push(inZIndex);
+		}
+	},
+	removeZIndex: function(inControl) {
+		enyo.remove(inControl, this.zStack);
+	},
+	//* @public
+	//* Show Scrim at the specified ZIndex.  Note: If you use showAtZIndex you
+	//*  must call hideAtZIndex to properly unwind the zIndex stack
+	showAtZIndex: function(inZIndex) {
+		this.addZIndex(inZIndex);
+		if (inZIndex !== undefined) {
+			this.setZIndex(inZIndex);
+		}
+		this.show();
+	},
+	//* Hide Scrim at the specified ZIndex
+	hideAtZIndex: function(inZIndex) {
+		this.removeZIndex(inZIndex);
+		if (!this.zStack.length) {
+			this.hide();
+		} else {
+			var z = this.zStack[this.zStack.length-1];
+			this.setZIndex(z);
+		}
+	},
+	//* @protected
+	// Set scrim to show at `inZIndex`
+	setZIndex: function(inZIndex) {
+		this.zIndex = inZIndex;
+		this.applyStyle("z-index", inZIndex);
+	},
+	make: function() {
+		return this;
+	}
+});
+
+//* @protected
+//
+// Scrim singleton exposing a subset of Scrim API. 
+// is replaced with a proper enyo.Scrim instance.
+//
+enyo.kind({
+	name: "onyx.scrimSingleton",
+	kind: null,
+	constructor: function(inName, inProps) {
+		this.instanceName = inName;
+		enyo.setObject(this.instanceName, this);
+		this.props = inProps || {};
+	},
+	make: function() {
+		var s = new onyx.Scrim(this.props);
+		enyo.setObject(this.instanceName, s);
+		return s;
+	},
+	showAtZIndex: function(inZIndex) {
+		var s = this.make();
+		s.showAtZIndex(inZIndex);
+	},
+	// in case somebody does this out of order
+	hideAtZIndex: enyo.nop,
+	show: function() {
+		var s = this.make();
+		s.show();
+	}
+});
+
+new onyx.scrimSingleton("onyx.scrim", {floating: true, classes: "onyx-scrim-translucent"});
+new onyx.scrimSingleton("onyx.scrimTransparent", {floating: true, classes: "onyx-scrim-transparent"});
diff --git a/html/lib/onyx/source/Slider.js b/html/lib/onyx/source/Slider.js
new file mode 100644
index 0000000..037adb0
--- /dev/null
+++ b/html/lib/onyx/source/Slider.js
@@ -0,0 +1,109 @@
+/**
+	A control that presents a range of selection options in the form of a
+	horizontal slider with a control knob.  The knob may be tapped and dragged
+	to the desired location.
+	
+		{kind: "onyx.Slider", value: 30}
+	
+	The *onChanging* event is fired when dragging the control knob.
+	The *onChange* event is fired when the position is set, either by finishing
+	a drag or by tapping the bar.
+*/
+enyo.kind({
+	name: "onyx.Slider",
+	kind: "onyx.ProgressBar",
+	classes: "onyx-slider",
+	published: {
+		value: 0,
+		lockBar: true,
+		tappable: true
+	},
+	events: {
+		onChange: "",
+		onChanging: "",
+		onAnimateFinish: ""
+	},
+	showStripes: false,
+	//* @protected
+	handlers: {
+		ondragstart: "dragstart",
+		ondrag: "drag",
+		ondragfinish: "dragfinish"
+	},
+	moreComponents: [
+		{kind: "Animator", onStep: "animatorStep", onEnd: "animatorComplete"},
+		{classes: "onyx-slider-taparea"},
+		{name: "knob", classes: "onyx-slider-knob"}
+	],
+	create: function() {
+		this.inherited(arguments);
+		this.createComponents(this.moreComponents);
+		this.valueChanged();
+	},
+	valueChanged: function() {
+		this.value = this.clampValue(this.min, this.max, this.value);
+		var p = this.calcPercent(this.value);
+		this.updateKnobPosition(p);
+		if (this.lockBar) {
+			this.setProgress(this.value);
+		}
+	},
+	updateKnobPosition: function(inPercent) {
+		this.$.knob.applyStyle("left", inPercent + "%");
+	},
+	calcKnobPosition: function(inEvent) {
+		var x = inEvent.clientX - this.hasNode().getBoundingClientRect().left;
+		return (x / this.getBounds().width) * (this.max - this.min) + this.min;
+	},
+	dragstart: function(inSender, inEvent) {
+		if (inEvent.horizontal) {
+			inEvent.preventDefault();
+			this.dragging = true;
+			return true;
+		}
+	},
+	drag: function(inSender, inEvent) {
+		if (this.dragging) {
+			var v = this.calcKnobPosition(inEvent);
+			this.setValue(v);
+			this.doChanging({value: this.value});
+			return true;
+		}
+	},
+	dragfinish: function(inSender, inEvent) {
+		this.dragging = false;
+		inEvent.preventTap();
+		this.doChange({value: this.value});
+		return true;
+	},
+	tap: function(inSender, inEvent) {
+		if (this.tappable) {
+			var v = this.calcKnobPosition(inEvent);
+			this.tapped = true;
+			this.animateTo(v);
+			return true;
+		}
+	},
+	//* @public
+	//* Animates to the given value.
+	animateTo: function(inValue) {
+		this.$.animator.play({
+			startValue: this.value,
+			endValue: inValue,
+			node: this.hasNode()
+		});
+	},
+	//* @protected
+	animatorStep: function(inSender) {
+		this.setValue(inSender.value);
+		return true;
+	},
+	animatorComplete: function(inSender) {
+		if (this.tapped) {
+			this.tapped = false;
+			this.doChange({value: this.value});
+		}
+		this.doAnimateFinish(inSender);
+		return true;
+	}
+});
\ No newline at end of file
diff --git a/html/lib/onyx/source/Spinner.js b/html/lib/onyx/source/Spinner.js
new file mode 100644
index 0000000..3bb923e
--- /dev/null
+++ b/html/lib/onyx/source/Spinner.js
@@ -0,0 +1,31 @@
+/**
+	A control that displays a spinner animation to indicate that activity is
+	taking place. By default, onyx.Spinner will display a light spinner,
+	suitable for displaying against a dark background. To render a dark spinner
+	to be shown on a lighter background, add the "onyx-light" class to the
+	spinner:
+	
+		{kind: "onyx.Spinner", classes: "onyx-light"}
+	
+	Typically, a spinner is shown to indicate activity and hidden to indicate
+	that the activity has ended. The spinner animation will automatically start
+	when a spinner is shown. If you wish, you may control the animation directly
+	by calling the *start*, *stop*, and *toggle* methods.
+*/
+enyo.kind({
+	name: "onyx.Spinner",
+	classes: "onyx-spinner",
+	//* @public
+	//* Stops the spinner animation.
+	stop: function() {
+		this.setShowing(false);
+	},
+	//* Starts the spinner animation.
+	start: function() {
+		this.setShowing(true);
+	},
+	//* Toggles the spinner animation on or off.
+	toggle: function() {
+		this.setShowing(!this.getShowing());
+	}
+});
diff --git a/html/lib/onyx/source/SwipeableItem.js b/html/lib/onyx/source/SwipeableItem.js
new file mode 100644
index 0000000..efa8811
--- /dev/null
+++ b/html/lib/onyx/source/SwipeableItem.js
@@ -0,0 +1,142 @@
+/**
+	An item that slides to the left to reveal Delete and Cancel buttons. Pressing the Cancel button will slide the item back into place and generate
+	an onCancel event. Pressing the Delete button will immediately position the content back in place and generate an onDelete event.
+
+	A SwipeableItem contains methods for styling its content and these should be used to effect styling on the row content. Add css classes via
+	the contentClasses property and the methods add|remove|has|addRemove<ContentClass>. Alter css styles via the applyContentStyle method.
+
+		{kind: "onyx.SwipeableItem", onCancel: "canceled", onDelete: "deleted"}
+
+*/
+enyo.kind({
+	name: "onyx.SwipeableItem",
+	kind: "onyx.Item",
+	classes: "onyx-swipeable-item",
+	published: {
+		//* Add custom CSS classes via the contentClasses property to style the SwipeableItem's content
+		contentClasses: "",
+		//* Set to true to prevent a drag from bubbling beyond the SwipeableItem.
+		preventDragPropagation: false
+	},
+	defaultContentClasses: "onyx-swipeable-item-content",
+	handlers: {
+		ondown: "down"
+	},
+	events: {
+		/**
+			Fires when a SwipeableItem's delete button has been triggered
+			This event does not fire when programatically deleting a SwipeableItem instance
+		*/
+		onDelete: "",
+		/**
+			Fires when a SwipeableItem's cancel button has been triggered
+			This event does not fire when selecting a second SwipeableItem, causing the first to cancel itself programatically
+		*/
+		onCancel: ""
+	},
+	components: [
+		{name: "client", kind: "Slideable", min: -100, unit: "%", ondragstart: "clientDragStart"},
+		{name: "confirm", kind: "onyx.Toolbar", canGenerate: false, classes: "onyx-swipeable-item-confirm enyo-fit", style: "text-align: center;", ontap: "confirmTap", components: [
+			{kind: "onyx.Button", content: "Delete", ontap: "deleteTap"},
+			{kind: "onyx.Button", content: "Cancel", ontap: "cancelTap"}
+		]}
+	],
+	//* @protected
+	swiping: -1,
+	create: function() {
+		this.inherited(arguments);
+		this.contentClassesChanged();
+	},
+	//* @public
+	//* Resets the sliding position of the SwipeableItem currently displaying confirmation options
+	reset: function() {
+		this.applyStyle("position", null);
+		this.$.confirm.setShowing(false);
+		// stop animating if we reset.
+		this.$.client.getAnimator().stop();
+		this.$.client.setValue(0);
+	},
+	//* @protected
+	contentClassesChanged: function() {
+		this.$.client.setClasses(this.defaultContentClasses + " " + this.contentClasses);
+	},
+	//* @public
+	//* Applies a single style value to the SwipeableItem
+	applyContentStyle: function(inStyle, inValue) {
+		this.$.client.applyStyle(inStyle, inValue);
+	},
+	//* Applies a CSS class to the SwipeableItem's contentClasses
+	addContentClass: function(inClass) {
+		this.$.client.addClass(inClass);
+	},
+	//* Removes a CSS class to the SwipeableItem's contentClasses
+	removeContentClass: function(inClass) {
+		this.$.client.removeClass(inClass);
+	},
+	//* Returns true if the _class_ attribute contains a substring matching _inClass_
+	hasContentClass: function(inClass) {
+		return this.$.client.hasClass(inClass);
+	},
+	/**
+		Adds or removes substring _inClass_ from the _class_ attribute of this object based
+		on the value of _inTrueToAdd_.
+
+		If _inTrueToAdd_ is truthy, then _inClass_ is added; otherwise, _inClass_ is removed.
+	*/
+	addRemoveContentClass: function(inClass, inAdd) {
+		this.$.client.addRemoveClass(inClass, inAdd);
+	},
+	//* @protected
+	generateHtml: function() {
+		this.reset();
+		return this.inherited(arguments);
+	},
+	contentChanged: function() {
+		this.$.client.setContent(this.content);
+	},
+	confirmTap: function() {
+		return true;
+	},
+	deleteTap: function(inSender, inEvent) {
+		this.reset();
+		this.doDelete();
+		return true;
+	},
+	cancelTap: function(inSender, inEvent) {
+		this.$.client.animateToMax();
+		this.doCancel();
+		return true;
+	},
+	down: function(inSender, inEvent) {
+		// on down, remove swiping state
+		var last = this.swiping;
+		this.swiping = inEvent.index;
+		var flyweight = inEvent.flyweight;
+		if (this.swiping != last && last >= 0 && flyweight) {
+			flyweight.performOnRow(last, enyo.bind(this, function() {
+				this.reset();
+			}));
+		}
+	},
+	clientDragStart: function(inSender, inEvent) {
+		if (inSender.dragging) {
+			var flyweight = inEvent.flyweight;
+			if (flyweight) {
+				flyweight.prepareRow(inEvent.index);
+				// if needed, render confirm.
+				// NOTE: position relative so can enyo-fit confirm; apply only when confirm needed
+				// because it's a known rendering slowdown.
+				this.applyStyle("position", "relative");
+				this.$.confirm.setShowing(true);
+				if (!this.$.confirm.hasNode()) {
+					// NOTE: prepend so Slideable will be on top.
+					this.$.confirm.prepend = true;
+					this.$.confirm.render();
+					this.$.confirm.prepend = false;
+				}
+				// note: can't teardown.
+			}
+		}
+		return this.preventDragPropagation;
+	}
+});
\ No newline at end of file
diff --git a/html/lib/onyx/source/TabPanels.js b/html/lib/onyx/source/TabPanels.js
new file mode 100644
index 0000000..ae4d6da
--- /dev/null
+++ b/html/lib/onyx/source/TabPanels.js
@@ -0,0 +1,128 @@
+/**
+enyo.TabPanels is a subkind of <a href="#enyo.Panels">enyo.Panels</a> that
+displays a set of tabs, which allow navigation between the individual panels.
+Unlike enyo.Panels, by default, the user cannot drag between the panels of a
+TabPanels. This behavior can be enabled by setting *draggable* to true.
+
+Here's an example:
+
+		enyo.kind({
+			name: "App",
+			kind: "TabPanels",
+			fit: true,
+			components: [
+				{kind: "MyStartPanel"},
+				{kind: "MyMiddlePanel"},
+				{kind: "MyLastPanel"}
+			]
+		});
+		new App().write();
+*/
+enyo.kind({
+	name: "enyo.TabPanels",
+	kind: "Panels",
+	//* @protected
+	draggable: false,
+	tabTools: [
+		{name: "scroller", kind: "Scroller", maxHeight: "100px", strategyKind: "TranslateScrollStrategy", thumb: false, vertical: "hidden", horizontal: "auto", components: [
+			{name: "tabs", kind: "onyx.RadioGroup", style: "text-align: left; white-space: nowrap", controlClasses: "onyx-tabbutton", onActivate: "tabActivate"}
+		]},
+		{name: "client", fit: true, kind: "Panels", classes: "enyo-tab-panels", onTransitionStart: "clientTransitionStart"}
+	],
+	create: function() {
+		this.inherited(arguments);
+		this.$.client.getPanels = enyo.bind(this, "getClientPanels");
+		this.draggableChanged();
+		this.animateChanged();
+		this.wrapChanged();
+	},
+	initComponents: function() {
+		this.createChrome(this.tabTools);
+		this.inherited(arguments);
+	},
+	getClientPanels: function() {
+		return this.getPanels();
+	},
+	flow: function() {
+		this.inherited(arguments);
+		this.$.client.flow();
+	},
+	reflow: function() {
+		this.inherited(arguments);
+		this.$.client.reflow();
+	},
+	draggableChanged: function() {
+		this.$.client.setDraggable(this.draggable);
+		this.draggable = false;
+	},
+	animateChanged: function() {
+		this.$.client.setAnimate(this.animate);
+		this.animate = false;
+	},
+	wrapChanged: function() {
+		this.$.client.setWrap(this.wrap);
+		this.wrap = false;
+	},
+	isPanel: function(inControl) {
+		var n = inControl.name;
+		return !(n == "tabs" || n == "client" || n == "scroller");
+	},
+	addControl: function(inControl) {
+		this.inherited(arguments);
+		if (this.isPanel(inControl)) {
+			var c = inControl.caption || ("Tab " + this.$.tabs.controls.length);
+			var t = inControl._tab = this.$.tabs.createComponent({content: c});
+			if (this.hasNode()) {
+				t.render();
+			}
+		}
+	},
+	removeControl: function(inControl) {
+		if (this.isPanel(inControl) && inControl._tab) {
+			inControl._tab.destroy();
+		}
+		this.inherited(arguments);
+	},
+	layoutKindChanged: function() {
+		if (!this.layout) {
+			this.layout = enyo.createFromKind("FittableRowsLayout", this);
+		}
+		this.$.client.setLayoutKind(this.layoutKind);
+	},
+	indexChanged: function() {
+		// FIXME: initialization order problem
+		if (this.$.client.layout) {
+			this.$.client.setIndex(this.index);
+		}
+		this.index = this.$.client.getIndex();
+	},
+	tabActivate: function(inSender, inEvent) {
+		if (this.hasNode()) {
+			if (inEvent.originator.active) {
+				var i = inEvent.originator.indexInContainer();
+				if (this.getIndex() != i) {
+					this.setIndex(i);
+				}
+			}
+		}
+	},
+	clientTransitionStart: function(inSender, inEvent) {
+		var i = inEvent.toIndex;
+		var t = this.$.tabs.getClientControls()[i];
+		if (t && t.hasNode()) {
+			this.$.tabs.setActive(t);
+			var tn = t.node;
+			var tl = tn.offsetLeft;
+			var tr = tl + tn.offsetWidth;
+			var sb = this.$.scroller.getScrollBounds();
+			if (tr < sb.left || tr > sb.left + sb.clientWidth) {
+				this.$.scroller.scrollToControl(t);
+			}
+		}
+		return true;
+	},
+	startTransition: enyo.nop,
+	finishTransition: enyo.nop,
+	stepTransition: enyo.nop,
+	refresh: enyo.nop
+});
\ No newline at end of file
diff --git a/html/lib/onyx/source/TextArea.js b/html/lib/onyx/source/TextArea.js
new file mode 100644
index 0000000..0a50808
--- /dev/null
+++ b/html/lib/onyx/source/TextArea.js
@@ -0,0 +1,19 @@
+/**
+	An onyx-styled TextArea control. In addition to the features of
+	<a href="#enyo.TextArea">enyo.TextArea</a>, onyx.TextArea has a
+	*defaultFocus* property that can be set to true to focus the TextArea when
+	it's rendered. Only one TextArea should be set as the *defaultFocus*.
+
+	Typically, an onyx.TextArea is placed inside an
+	<a href="#onyx.InputDecorator">onyx.InputDecorator</a>, which provides
+	styling, e.g.:
+
+		{kind: "onyx.InputDecorator", components: [
+			{kind: "onyx.TextArea", onchange: "inputChange"}
+		]}
+*/
+enyo.kind({
+	name: "onyx.TextArea",
+	kind: "enyo.TextArea",
+	classes: "onyx-textarea"
+});
diff --git a/html/lib/onyx/source/ToggleButton.js b/html/lib/onyx/source/ToggleButton.js
new file mode 100644
index 0000000..cbc5fa3
--- /dev/null
+++ b/html/lib/onyx/source/ToggleButton.js
@@ -0,0 +1,114 @@
+/**
+	A control that looks like a switch with labels for two states. Each time a ToggleButton is tapped,
+	it switches its value and fires an onChange event.
+	
+		{kind: "onyx.ToggleButton", onContent: "foo", offContent: "bar", onChange: "buttonToggle"}
+	
+		buttonToggle: function(inSender, inEvent) {
+			this.log("Toggled to value " + inEvent.value);
+		}
+	
+	To find out the value of the button, use getValue:
+	
+		queryToggleValue: function() {
+			return this.$.toggleButton.getValue();
+		}
+		
+	The color of the toggle button can be customized by applying a background color:
+	
+		{kind: "onyx.ToggleButton", style: "background-color: #35A8EE;"}
+*/
+enyo.kind({
+	name: "onyx.ToggleButton",
+	classes: "onyx-toggle-button",
+	published: {
+		active: false,
+		value: false,
+		onContent: "On",
+		offContent: "Off",
+		disabled: false
+	},
+	events: {
+		/**
+			The onChange event fires when the user changes the value of the toggle button, 
+			but not when the value is changed programmatically.
+		*/
+		onChange: ""
+	},
+	//* @protected
+	handlers: {
+		ondragstart: "dragstart",
+		ondrag: "drag",
+		ondragfinish: "dragfinish"
+	},
+	components: [
+		{name: "contentOn", classes: "onyx-toggle-content on"},
+		{name: "contentOff", classes: "onyx-toggle-content off"},
+		{classes: "onyx-toggle-button-knob"}
+	],
+	create: function() {
+		this.inherited(arguments);
+		this.value = Boolean(this.value || this.active);
+		this.onContentChanged();
+		this.offContentChanged();
+		this.disabledChanged();
+	},
+	rendered: function() {
+		this.inherited(arguments);
+		this.valueChanged();
+	},
+	valueChanged: function() {
+		this.addRemoveClass("off", !this.value);
+		this.$.contentOn.setShowing(this.value);
+		this.$.contentOff.setShowing(!this.value);
+		this.setActive(this.value);
+	},
+	activeChanged: function() {
+		this.setValue(this.active);
+		this.bubble("onActivate");
+	},
+	onContentChanged: function() {
+		this.$.contentOn.setContent(this.onContent || "");
+		this.$.contentOn.addRemoveClass("empty", !this.onContent);
+	},
+	offContentChanged: function() {
+		this.$.contentOff.setContent(this.offContent || "");
+		this.$.contentOff.addRemoveClass("empty", !this.onContent);
+	},
+	disabledChanged: function() {
+		this.addRemoveClass("disabled", this.disabled);
+	},
+	updateValue: function(inValue) {
+		if (!this.disabled) {
+			this.setValue(inValue);
+			this.doChange({value: this.value});
+		}
+	},
+	tap: function() {
+		this.updateValue(!this.value);
+	},
+	dragstart: function(inSender, inEvent) {
+		if (inEvent.horizontal) {
+			inEvent.preventDefault();
+			this.dragging = true;
+			this.dragged = false;
+			return true;
+		}
+	},
+	drag: function(inSender, inEvent) {
+		if (this.dragging) {
+			var d = inEvent.dx;
+			if (Math.abs(d) > 10) {
+				this.updateValue(d > 0);
+				this.dragged = true;
+			}
+			return true;
+		}
+	},
+	dragfinish: function(inSender, inEvent) {
+		this.dragging = false;
+		if (this.dragged) {
+			inEvent.preventTap();
+		}
+	}
+})
diff --git a/html/lib/onyx/source/Toolbar.js b/html/lib/onyx/source/Toolbar.js
new file mode 100644
index 0000000..d28e18b
--- /dev/null
+++ b/html/lib/onyx/source/Toolbar.js
@@ -0,0 +1,26 @@
+/**
+	A horizontal bar containing controls used to perform common UI actions.
+	
+	A Toolbar customizes the styling of the controls it hosts, including
+	buttons, icons, and inputs.
+	
+		{kind: "onyx.Toolbar", components: [
+			{kind: "onyx.Button", content: "Favorites"},
+			{kind: "onyx.InputDecorator", components: [
+				{kind: "onyx.Input", placeholder: "Enter a search term..."}
+			]},
+			{kind: "onyx.IconButton", src: "go.png"}
+		]}
+	
+	Note that it's possible to style a set of controls to look like they are in
+	a toolbar without having the container itself look like a toolbar. To do so,
+	apply the "onyx-toolbar-inline"	CSS class to the container that houses the
+	controls.
+*/
+enyo.kind({
+	name: "onyx.Toolbar",
+	classes: "onyx onyx-toolbar onyx-toolbar-inline",
+	handlers: {
+		onHide: "render"
+	}
+});
\ No newline at end of file
diff --git a/html/lib/onyx/source/Tooltip.js b/html/lib/onyx/source/Tooltip.js
new file mode 100644
index 0000000..9cbe4e4
--- /dev/null
+++ b/html/lib/onyx/source/Tooltip.js
@@ -0,0 +1,80 @@
+/**
+	_onyx.Tooltip_ is a kind of <a href="#onyx.Popup">onyx.Popup</a> that works
+	with an	<a href="#onyx.TooltipDecorator">onyx.TooltipDecorator</a>. It
+	automatically displays a tooltip when the user hovers over the decorator.
+	The tooltip is positioned around the decorator where there is available
+	window space. 
+
+		{kind: "onyx.TooltipDecorator", components: [
+			{kind: "onyx.Button", content: "Tooltip"},
+			{kind: "onyx.Tooltip", content: "I'm a tooltip for a button."}
+		]}
+
+	You may manually display the tooltip by calling its _show_ method.
+*/
+enyo.kind({
+	name: "onyx.Tooltip",
+	kind: "onyx.Popup",
+	classes: "onyx-tooltip below left-arrow",
+	autoDismiss: false,
+	showDelay: 500,
+	defaultLeft: -6, //default margin-left value
+	handlers: {
+		onRequestShowTooltip: "requestShow",
+		onRequestHideTooltip: "requestHide"
+	},
+	requestShow: function() {
+		this.showJob = setTimeout(enyo.bind(this, "show"), this.showDelay);
+		return true;
+	},
+	cancelShow: function() {
+		clearTimeout(this.showJob);
+	},
+	requestHide: function() {
+		this.cancelShow();
+		return this.inherited(arguments);
+	},
+	showingChanged: function() {
+		this.cancelShow();
+		this.adjustPosition(true);
+		this.inherited(arguments);
+	},
+	applyPosition: function(inRect) {
+		var s = ""
+		for (n in inRect) {
+			s += (n + ":" + inRect[n] + (isNaN(inRect[n]) ? "; " : "px; "));
+		}
+		this.addStyles(s);
+	},	
+	adjustPosition: function(belowActivator) {
+		if (this.showing && this.hasNode()) {
+			var b = this.node.getBoundingClientRect();
+
+			//when the tooltip bottom goes below the window height move it above the decorator
+			if (b.top + b.height > window.innerHeight) {
+				this.addRemoveClass("below", false);
+				this.addRemoveClass("above", true);	
+			} else 	{
+				this.addRemoveClass("above", false);
+				this.addRemoveClass("below", true);	
+			}
+			
+			//when the tooltip's right edge is out of the window, align it's right edge with the decorator left edge (approx)
+			if (b.left + b.width > window.innerWidth){
+				this.applyPosition({'margin-left': -b.width, bottom: "auto"});	
+				//use the right-arrow
+				this.addRemoveClass("left-arrow", false);
+				this.addRemoveClass("right-arrow", true);						
+			}
+		}
+	},
+	resizeHandler: function() {
+		//reset the tooltip to align it's left edge with the decorator
+		this.applyPosition({'margin-left': this.defaultLeft, bottom: "auto"});
+		this.addRemoveClass("left-arrow", true);
+		this.addRemoveClass("right-arrow", false);
+		
+		this.adjustPosition(true);
+		this.inherited(arguments);			
+	}
+});
diff --git a/html/lib/onyx/source/TooltipDecorator.js b/html/lib/onyx/source/TooltipDecorator.js
new file mode 100644
index 0000000..a97167d
--- /dev/null
+++ b/html/lib/onyx/source/TooltipDecorator.js
@@ -0,0 +1,44 @@
+/**
+	A control that activates an <a href="#onyx.Tooltip">onyx.Tooltip</a>. It
+	surrounds a control such as a button and displays the tooltip when the
+	control generates an _onEnter_ event:
+
+		{kind: "onyx.TooltipDecorator", components: [
+			{kind: "onyx.Button", content: "Tooltip"},
+			{kind: "onyx.Tooltip", content: "I'm a tooltip for a button."}
+		]}
+
+	Here's an example with an <a href="#onyx.Input">onyx.Input</a> control and a
+	decorator around the input:
+
+		{kind: "onyx.TooltipDecorator", components: [
+			{kind: "onyx.InputDecorator", components: [
+				{kind: "onyx.Input", placeholder: "Just an input..."}
+			]},
+			{kind: "onyx.Tooltip", content: "I'm a tooltip for an input."}
+		]}
+*/
+enyo.kind({
+	name: "onyx.TooltipDecorator",
+	defaultKind: "onyx.Button",
+	classes: "onyx-popup-decorator",
+	handlers: {
+		onenter: "enter",
+		onleave: "leave"
+	},
+	enter: function() {
+		this.requestShowTooltip();
+	},
+	leave: function() {
+		this.requestHideTooltip();
+	},
+	tap: function() {
+		this.requestHideTooltip();
+	},
+	requestShowTooltip: function() {
+		this.waterfallDown("onRequestShowTooltip");
+	},
+	requestHideTooltip: function() {
+		this.waterfallDown("onRequestHideTooltip");
+	}
+});
\ No newline at end of file
diff --git a/html/lib/onyx/source/css/onyx.css b/html/lib/onyx/source/css/onyx.css
new file mode 100644
index 0000000..4ebde3c
--- /dev/null
+++ b/html/lib/onyx/source/css/onyx.css
@@ -0,0 +1,896 @@
+/* onyx.css - combined CSS file for all released Onyx controls.
+   converted from single files to get around IE bug that allows
+   a maximum of 31 style sheets to be loaded before silently failing */
+
+.onyx {
+	color: #333333;
+	font-family: 'Helvetica Neue', 'Nimbus Sans L', Arial, sans-serif;
+	/*font-family: Prelude, Prelude Medium, Segoe UI, Neue Helvetica, Arial, Helvetica, Sans-Serif;**/
+	font-size: 20px;
+	cursor: default;
+	background-color: #EAEAEA;
+	/* remove automatic tap highlight color */
+	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+/* prevent IE from inheriting line-height for these elements */
+.onyx button, .onyx label, .onyx input {
+	line-height: normal;
+}
+
+.onyx-selected {
+	background-color: #C4E3FE;
+}
+
+/* Icon.css */
+.onyx-icon {
+	width: 32px;
+	height: 32px;
+	background-repeat: no-repeat;
+	display: inline-block;
+	vertical-align: middle;
+}
+
+.onyx-icon.active, .onyx-icon:active:hover {
+	background-position: 0 -32px;
+}
+
+/* Button.css */
+.onyx-button {
+	outline: 0;
+	/**/
+	color: #292929;
+	font-size: 16px;
+	text-align: center;
+	white-space: nowrap;
+	/**/
+	margin: 0;
+	padding: 6px 18px;
+	overflow: hidden;
+	/**/
+	border-radius: 3px;
+	/* for IE8 */
+	border: 1px solid #777;
+	border: 1px solid rgba(15, 15, 15, 0.2);
+	/*
+		The border and the gradient interact in a strange way that
+		causes the bottom-border (top if the gradient is aligned top)
+		to be lighter than other borders.
+		We can fix it by using the darker bottom border below, but
+		then there are a few rogue pixels that end up very dark.
+	*/
+	/* border-bottom: 1px solid rgba(15, 15, 15, 0.5); */
+	box-shadow: inset 0px 1px 0px rgba(255,255,255,0.2);
+	/*
+		box-shadow: 0px 1px 0px rgba(164,164,164,0.1), inset 0px 1px 1px rgba(164,164,164,0.35);
+		text-shadow: 0 -1px 1px rgba(0,0,0,0.2);
+	 	background-color: #E1E1E1;
+	*/
+	/**/
+	background: #E1E1E1 url(../../images/gradient.png) repeat-x bottom;
+	background-size: contain;
+	/**/
+	text-overflow: ellipsis;
+	/* the following cause arcane problems on IE */
+	/*
+	min-width: 14px;
+	min-height: 20px;
+	*/
+}
+
+/*
+	IE8 can't handle these selectors in tandem:
+	.onyx-button.active, .onyx-button:active:not([disabled]) {
+
+	the effect is as if .onyx-button.active doesn't exist
+*/
+.onyx-button.active {
+	background-image: url(../../images/gradient-invert.png);
+	background-position: top;
+	border-top: 1px solid rgba(15, 15, 15, 0.6);
+	box-shadow: inset 0px 1px 0px rgba(0,0,0,0.1);
+}
+
+.onyx-button:active:hover:not([disabled]) {
+	background-image: url(../../images/gradient-invert.png);
+	background-position: top;
+	border-top: 1px solid rgba(15, 15, 15, 0.6);
+	box-shadow: inset 0px 1px 0px rgba(0,0,0,0.1);
+}
+
+.onyx-button[disabled] {
+	opacity: 0.4;
+}
+
+.onyx-button > img {
+	padding: 0px 3px;
+}
+
+/* optional */
+
+button.onyx-button.onyx-affirmative {
+	background-color: #91BA07;
+	color: #F1F1F1;
+}
+
+button.onyx-button.onyx-negative {
+	background-color: #C51616;
+	color: #F1F1F1;
+}
+
+button.onyx-button.onyx-blue {
+	background-color: #35A8EE;
+	color: #F1F1F1;
+}
+
+/* Checkbox.css */
+.onyx-checkbox {
+	cursor: pointer;
+	height: 32px;
+	width: 32px;
+	background: url(../../images/checkbox.png) no-repeat; 
+	/* reset for ? */
+	margin: 0px;
+	/* these entries cause toggle-button and checkbox to line up properly*/
+	display: inline-block;
+	vertical-align: middle;
+}
+
+.onyx-checkbox[checked] {
+	background-position: 0px -32px;
+}
+
+.onyx-checkbox[disabled] {
+	opacity: 0.4;
+}
+
+/* Grabber.css */
+.onyx-grabber {
+	background: url(../../images/grabbutton.png) no-repeat center;
+	width: 23px;
+	height: 27px;
+}
+
+/* Popup.css */
+.onyx-popup {
+	font-size: 16px;
+	box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
+	border: 1px solid rgba(0,0,0,0.2);
+	border-radius: 8px;
+	padding: 6px;
+	color: white;
+	background: #4C4C4C url(../../images/gradient.png) repeat-x 0 bottom;
+}
+
+.onyx-popup-decorator {
+	position: relative;
+}
+
+/* Groupbox.css */
+.onyx-groupbox {
+}
+
+.onyx-groupbox > * {
+	display: block;
+	/*box-shadow: inset 0px 1px 1px rgba(255,255,255,0.5);*/
+	border-color: #aaaaaa;
+	border-style: solid;
+	border-width: 0 1px 1px 1px;
+	/*padding: 10px;*/
+	/* reset styles that make 'item' look bad if they happen to be there */
+	border-radius: 0;
+	margin: 0;
+}
+
+.onyx-groupbox > *:first-child {
+	border-top-color: #aaaaaa;
+	border-width: 1px;
+	border-radius: 4px 4px 0 0;
+}
+
+.onyx-groupbox > *:last-child {
+	border-radius: 0 0 4px 4px;
+}
+
+.onyx-groupbox > *:first-child:last-child {
+	border-radius: 4px;
+}
+
+.onyx-groupbox-header {
+	padding: 2px 10px;
+	/**/
+	color: white;
+	font-family: Segoe UI, Neue Helvetica, Helvectica, Arial, sans-serif;
+	font-size: 14px;
+	font-weight: bold;
+	text-transform: uppercase;
+	/**/
+	background-color: #343434;
+	border: none;
+	background: #4c4c4c url(../../images/gradient.png) repeat-x 0 10px;
+}
+
+.onyx-groupbox .onyx-input-decorator {
+	display: block;
+}
+
+.onyx-groupbox > .onyx-input-decorator {
+	border-color: #aaaaaa;
+	border-width: 0 1px 1px 1px;
+	border-radius: 0;
+}
+
+.onyx-groupbox > .onyx-input-decorator:first-child {
+	border-width: 1px;
+	border-radius: 4px 4px 0 0;
+}
+
+.onyx-groupbox > .onyx-input-decorator:last-child {
+	border-radius: 0 0 4px 4px;
+}
+
+.onyx-groupbox > .onyx-input-decorator:first-child:last-child {
+	border-radius: 4px;
+}
+
+/* Input.css */
+.onyx-input-decorator {
+	padding: 6px 8px 10px 8px;
+	border-radius: 3px;
+	border: 1px solid;
+	border-color: rgba(0,0,0,0.1);
+	margin: 0;
+}
+
+.onyx-input-decorator.onyx-focused {
+	box-shadow: inset 0px 1px 4px rgba(0,0,0,0.3);
+	border-color: rgba(0,0,0,0.3);
+	background-color: white;
+}
+
+.onyx-input-decorator.onyx-disabled {
+	/* FIXME: needed to color a disabled input placeholder. */
+	/*-webkit-text-fill-color: #888;*/
+	opacity: 0.4;
+}
+
+.onyx-input-decorator > input {
+	/* reset */
+	margin: 0;
+	padding: 0;
+	border: none;
+	outline: none;
+	cursor: pointer;
+	background-color: transparent;
+	font-size: 16px;
+	box-shadow: none;
+	/* FIXME: hack for styling reset on Android */
+	/* -webkit-appearance: caret;*/
+}
+
+.onyx-input-decorator.onyx-focused > input {
+	cursor: text;
+}
+
+.onyx-input-decorator.onyx-disabled > input {
+	cursor: default;
+}
+
+/* Menu.css */
+.onyx-menu, .onyx.onyx-menu {
+	min-width: 160px;
+	top: 100%;
+	left: 0;
+	margin-top: 2px;
+	padding: 3px 0;
+	border-radius: 3px;
+}
+
+.onyx-menu.onyx-menu-up {
+	top: auto;
+	bottom: 100%;
+	margin-top: 0;
+	margin-bottom: 2px;
+}
+
+.onyx-toolbar .onyx-menu {
+	margin-top: 11px;
+	border-radius: 0 0 3px 3px;
+}
+
+
+.onyx-toolbar .onyx-menu.onyx-menu-up {
+	margin-top: 0;
+	margin-bottom: 10px;
+	border-radius: 3px 3px 0 0;
+}
+
+.onyx-menu-item {
+	display: block;
+	padding: 10px;
+}
+
+.onyx-menu-item:hover {
+	background: #284152;
+}
+
+.onyx-menu-divider, .onyx-menu-divider:hover {
+	margin: 6px 0;
+	padding: 0;
+	border-bottom: 1px solid #aaa;
+}
+
+/* customize a toolbar to support menus */
+.onyx-menu-toolbar, .onyx-toolbar.onyx-menu-toolbar {
+	z-index: 10; 
+	overflow: visible;
+	position: relative;
+}
+
+/* Picker.css */
+.onyx-picker-decorator .onyx-button {
+	padding: 10px 18px;
+}
+
+.onyx-picker {
+	top: 0;
+	margin-top: -3px;
+	min-width: 0;
+	width: 100%;
+	box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	color: black;
+	background: #E1E1E1;
+}
+
+.onyx-picker.onyx-menu-up {
+	top: auto;
+	bottom: 0;
+	margin-top: 3px;
+	margin-bottom: -3px;
+}
+
+.onyx-picker .onyx-menu-item {
+	text-align: center;
+}
+
+.onyx-picker .onyx-menu-item:hover {
+	background-color: transparent;
+}
+
+.onyx-picker .onyx-menu-item.selected, .onyx-picker .onyx-menu-item.active, .onyx-picker .onyx-menu-item:active:hover {
+	border-top: 1px solid rgba(0, 0, 0, 0.1);
+	background-color: #cde7fe;
+	box-shadow: inset 0px 0px 3px rgba(0, 0, 0, 0.2);
+}
+
+.onyx-picker .onyx-menu-item {
+	border-top: 1px solid rgba(255,255,255,0.5);
+	border-bottom: 1px solid rgba(0,0,0,0.2);
+}
+
+.onyx-picker:not(.onyx-flyweight-picker) .onyx-menu-item:first-child, .onyx-flyweight-picker :first-child > .onyx-menu-item {
+	border-top: none;
+}
+
+.onyx-picker:not(.onyx-flyweight-picker) .onyx-menu-item:last-child, .onyx-flyweight-picker :last-child > .onyx-menu-item {
+	border-bottom: none;
+}
+
+/* TextArea.css */
+.onyx-input-decorator > textarea {
+	/* reset */
+	margin: 0;
+	padding: 0;
+	border: none;
+	outline: none;
+	cursor: pointer;
+	background-color: transparent;
+	font-size: 16px;
+	box-shadow: none;
+	/* Remove scrollbars and resize handle */
+	resize: none;
+	overflow: auto;
+	/* FIXME: hack for styling reset on Android */
+	/* -webkit-appearance: caret;*/
+}
+
+.onyx-input-decorator.onyx-focused > textarea {
+	cursor: text;
+}
+
+.onyx-input-decorator.onyx-disabled > textarea {
+	cursor: default;
+}
+
+.onyx-textarea {
+	/* need >=50px for scrollbar to be usable on mac */
+	min-height: 50px;
+}
+
+/* RichText.css */
+.onyx-input-decorator > .onyx-richtext {
+	/* reset */
+	margin: 0;
+	padding: 0;
+	border: none;
+	outline: none;
+	cursor: pointer;
+	background-color: transparent;
+	font-size: 16px;
+	min-height: 20px;
+	min-width: 100px;
+	box-shadow: none;
+	/* FIXME: hack for styling reset on Android */
+	/* -webkit-appearance: caret;*/
+}
+
+.onyx-input-decorator.onyx-focused > .onyx-richtext {
+	cursor: text;
+}
+
+.onyx-input-decorator.onyx-disabled > .onyx-richtext {
+	cursor: default;
+}
+
+/* RadioButton.css */
+.onyx-radiobutton {
+	padding: 8px 12px;
+	margin: 0;
+	outline: 0;
+	/**/
+	font-size: 16px;
+	text-shadow: 0 1px 1px rgba(0,0,0,0.2);
+	text-align: center;
+	/**/
+	background: #E7E7E7 url(../../images/gradient.png) repeat-x bottom;
+	/* IE8 */
+	border: 1px solid #333;
+	border: 1px solid rgba(15, 15, 15, 0.2);
+	/* turn off right-border in a way IE8 ignores, because IE8 does not support :last-child */
+	border-right-color: rgba(0,0,0,0);
+	box-shadow: inset 1px 1px 0px rgba(255, 255, 255, 0.2);
+}
+
+.onyx-radiobutton:first-child {
+	border-radius: 3px 0 0 3px;
+}
+
+.onyx-radiobutton:last-child {
+	border-radius: 0px 3px 3px 0px;
+	/* IE8 */
+	border-right: 1px solid #333;
+	border-right: 1px solid rgba(15, 15, 15, 0.2);
+}
+
+.onyx-radiobutton.active {
+	color: White;
+	background: #0091F2 url(../../images/gradient-invert.png) repeat-x top;
+	border-top: 1px solid rgba(15, 15, 15, 0.6);
+	box-shadow: inset 1px 2px 2px rgba(0, 0, 0, 0.2);
+}
+
+/* Scrim.css */
+.onyx-scrim {
+	z-index: 1;
+	/*
+		note: by using pointer-events we allow tapping on scrim
+		while it is fading out; however, this requires any showing classes
+		to set pointer events to auto or scrim will not function as expected.
+	*/
+	pointer-events: none;
+}
+
+.onyx-scrim.onyx-scrim-translucent{
+	pointer-events: auto;
+	background-color: rgb(0,0,0);
+	opacity: 0.65;
+	filter: alpha(opacity=65);
+}
+
+.onyx-scrim.onyx-scrim-transparent {
+	pointer-events: auto;
+	background: transparent;
+}
+
+/* TabButton.css */
+.onyx-radiobutton.onyx-tabbutton {
+	padding: 8px 34px;
+	font-size: 20px;
+	border-radius: 0px;
+}
+
+/* ToggleButton.css */
+.onyx-toggle-button {
+	display: inline-block;
+	height: 32px;
+	line-height: 32px;
+	min-width: 64px;
+	vertical-align: middle;
+	text-align: center;
+	/* */
+	border-radius: 3px;
+	box-shadow: inset 0px 1px 3px rgba(0,0,0,0.4);
+	background: #8BBA3D url(../../images/gradient-invert.png) repeat-x bottom;
+	background-size: auto 100%;
+	/* label */
+	color: white;
+	font-size: 14px;
+	font-weight: bold;
+	text-transform: uppercase;
+}
+
+.onyx-toggle-button.off {
+	background-color: #B1B1B1 !important;
+}
+
+.onyx-toggle-button-knob {
+	display: inline-block;
+	width: 30px;
+	height: 30px;
+	margin: 1px;
+	border-radius: 3px;
+	background: #F6F6F6 url(../../images/gradient.png) repeat-x;
+	background-size: auto 100%;
+}
+
+.onyx-toggle-button .onyx-toggle-button-knob {
+	box-shadow: -1px 0px 4px rgba(0,0,0,0.35), inset 0 -1px 0 rgba(0,0,0,0.4);
+	float: right;
+}
+
+.onyx-toggle-button.off .onyx-toggle-button-knob {
+	box-shadow: 1px 0px 4px rgba(0,0,0,0.35), inset 0 -1px 0 rgba(0,0,0,0.4);
+	float: left;
+}
+
+.onyx-toggle-button.disabled {
+	opacity: 0.4;
+}
+
+.onyx-toggle-content {
+	min-width: 32px;
+	padding: 0 6px;
+}
+
+.onyx-toggle-content.empty {
+	padding: 0;
+}
+
+.onyx-toggle-content.off {
+	float: right;
+}
+
+.onyx-toggle-content.on {
+	float: left;
+}
+
+/* Toolbar.css */
+.onyx-toolbar {
+	/*
+		line-height is unreliable for centering, instead
+		use vertical-align: middle to align
+		elements along a common centerline and use
+		padding to fill out the space.
+	*/
+	padding: 9px 8px 10px 8px;
+	/**/
+	border: 1px solid #3A3A3A;
+	background: #4C4C4C url(../../images/gradient.png) repeat-x 0 bottom;
+	color: white;
+	/**/
+	white-space: nowrap;
+	overflow: hidden;
+}
+
+.onyx-toolbar-inline > * {
+	display: inline-block;
+	vertical-align: middle;
+	margin: 4px 6px 5px;
+	box-sizing: border-box;
+}
+
+.onyx-toolbar .onyx-icon-button {
+	margin: 3px 2px 1px;
+}
+
+.onyx-toolbar .onyx-button {
+	color: #F2F2F2;
+	background-color: #555656;
+	border-color: rgba(15, 15, 15, 0.5);
+	margin-top: 0;
+	margin-bottom: 0;
+	height: 36px;
+}
+
+.onyx-toolbar .onyx-input-decorator {
+	margin: 1px 3px;
+	box-shadow: inset 0px 1px 4px rgba(0,0,0,0.1);
+	background-color: rgba(0, 0, 0, 0.1);
+	padding: 0px 6px 5px 6px;
+}
+
+.onyx-toolbar .onyx-input-decorator.onyx-focused {
+	box-shadow: inset 0px 1px 4px rgba(0,0,0,0.3);
+	background-color: white;
+}
+
+.onyx-toolbar .onyx-input-decorator .onyx-input {
+	color: #e5e5e5;
+	font-size: 14px;
+}
+
+.onyx-toolbar .onyx-input-decorator .onyx-input:focus {
+	color: #000;
+}
+
+.onyx-toolbar .onyx-input-decorator .onyx-input:focus::-webkit-input-placeholder {
+	color: #ddd;
+}
+
+/* Tooltip.css */	
+.onyx-tooltip {
+	z-index: 20;
+	left: 0;
+	padding: 4px 6px;
+	margin-top: 4px;
+	margin-left: -6px;
+	box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
+	border: 1px solid rgba(0,0,0,0.2);
+	color: white;
+	background: #216593 url(../../images/gradient.png) repeat-x 0 bottom;
+	border-radius: 3px;
+	white-space: nowrap;
+}
+
+/*move the tooltip over to the right when displaying the right arrow so it aligns better with the decorator*/
+.onyx-tooltip.right-arrow {
+	left: 30px;
+}
+
+/*prep the left & right arrows using before & after - left arrow uses before & right arrow uses after*/
+.onyx-tooltip::before {
+	content: '';
+	border-left: 6px solid transparent;
+	border-right: 6px solid transparent;
+	position: absolute;
+	top: -6px;
+	left: 16px;
+}
+
+.onyx-tooltip::after {
+	content: '';
+	border-left: 6px solid transparent;
+	border-right: 6px solid transparent;
+	position: absolute;
+	top: -6px;
+	margin-left: -12px;	
+}
+
+/*The following 3 rules handle the left & right arrows when the tooltip is displayed below the activator*/
+.onyx-tooltip.below {
+	top: 100%;
+}
+
+.onyx-tooltip.below.right-arrow::after {
+	border-bottom: 6px solid #1D587F;
+	top: -6px;
+}
+
+.onyx-tooltip.below.left-arrow::before {
+	border-bottom: 6px solid #1D587F;
+	top: -6px;
+}
+
+/*The following 3 rules handle the left & right arrows when the tooltip is displayed above the activator*/
+.onyx-tooltip.above {
+	top: -100%;
+}
+
+.onyx-tooltip.above.right-arrow::after {
+	content: '';
+	border-top: 6px solid #1D587F;
+	top: 100%;
+}
+
+.onyx-tooltip.above.left-arrow::before {
+	content: '';
+	border-top: 6px solid #1D587F;
+	top: 100%;
+}
+
+/* ProgressBar.css */
+.onyx-progress-bar {
+	margin: 8px;
+	height: 8px;
+	border: 1px solid rgba(15, 15, 15, 0.2);
+	border-radius: 3px;
+	background: #B8B8B8 url(../../images/gradient-invert.png) repeat-x;
+	background-size: auto 100%;
+}
+
+.onyx-progress-bar-bar {
+	height: 100%;
+	border-radius: 3px;
+	background: #58ABEF url(../../images/gradient.png) repeat-x;
+	background-size: auto 100%;
+}
+
+.onyx-progress-bar-bar.striped {
+	background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
+	background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+	background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+	background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+	background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+	background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+	background-size: 40px 40px;
+}
+
+.onyx-progress-bar-bar.striped.animated {
+	-webkit-animation: progress-bar-stripes 2s linear infinite;
+	-moz-animation: progress-bar-stripes 2s linear infinite;
+	animation: progress-bar-stripes 2s linear infinite;
+}
+
+@-webkit-keyframes progress-bar-stripes {
+  from {
+    background-position: 0 0;
+  }
+  to {
+    background-position: 40px 0;
+  }
+}
+
+@-moz-keyframes progress-bar-stripes {
+  from {
+    background-position: 0 0;
+  }
+  to {
+    background-position: 40px 0;
+  }
+}
+
+@keyframes progress-bar-stripes {
+  from {
+    background-position: 0 0;
+  }
+  to {
+    background-position: 40px 0;
+  }
+}
+
+/* optional */
+
+.onyx-dark {
+	background-color: #626368;
+}
+
+.onyx-light {
+	background-color: #cacaca;
+}
+
+/* ProgressButton.css */
+.onyx-progress-button {
+	position: relative;
+	height: 36px;
+	line-height: 36px;
+	color: #F1F1F1;
+	font-size: 16px;
+	text-overflow: ellipsis;
+}
+
+.onyx-progress-button-bar {
+	height: 36px;
+}
+
+.onyx-progress-button-icon {
+	display: inline-block;
+	position: absolute;
+	top: 2px;
+	right: 0;
+}
+
+.onyx-progress-button-client {
+	display: inline-block;
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 36px;
+	margin-left: 8px;
+}
+
+.onyx-progress-button-client > * {
+	display: inline-block;
+}
+
+/* Slider.css */
+.onyx-slider {
+	position: relative;
+	margin: 8px 20px;
+}
+
+.onyx-slider-taparea {
+	position: absolute;
+	top: -11px;
+	height: 28px;
+	width: 100%;
+}
+
+.onyx-slider-knob {
+	position: relative;
+	height: 40px;
+	width: 40px;
+	background: url(../../images/slider-handle.png) left top no-repeat;
+	margin: -23px -20px;
+}
+
+.onyx-slider-knob.active, .onyx-slider-knob:active:hover {
+	background-position: 0 -40px;
+}
+
+/* Item.css */
+.onyx-item {
+	padding: 14px;
+}
+
+.onyx-highlight, .onyx-highlight.onyx-swipeable-item-content {
+	background-color: #DEDFDF;
+}
+
+.enyo-selected, .enyo-selected.onyx-swipeable-item-content {
+	background-color: #C4E3FE;
+}
+
+.onyx-item.onyx-swipeable-item {
+	overflow: hidden;
+	padding: 0;
+}
+
+.onyx-swipeable-item-content {
+	background-color: #EAEAEA;
+	box-sizing: border-box;
+	padding: 18px 6px;
+	min-height: 40px;
+}
+
+/* Spinner.css */
+.onyx-spinner {
+	width: 58px;
+	height: 59px;
+	display: inline-block;
+	background: url(../../images/spinner-dark.gif) no-repeat 0 0;
+}
+
+.onyx-spinner.onyx-light {
+	background: url(../../images/spinner-light.gif) no-repeat 0 0;
+}
+
+/* MoreToolbar.css */
+.onyx-more-toolbar {
+	overflow: visible;
+	position: relative;
+	z-index: 10;
+}
+
+.onyx-more-toolbar.active {
+	z-index:11;
+}
+
+.onyx-more-menu {
+	left: auto;
+	right: 0px;
+	min-width: 0;
+}
+
+.onyx-more-toolbar .onyx-more-menu > * {
+	float: right;
+	clear: both;
+	margin: 5px;
+	margin-top: 5px;
+	margin-bottom: 5px;
+}
+
+.onyx-more-button {
+	background-image: url(../../images/more.png);
+	margin: 4px 6px 5px;
+}
diff --git a/html/lib/onyx/source/css/package.js b/html/lib/onyx/source/css/package.js
new file mode 100644
index 0000000..a0e03d4
--- /dev/null
+++ b/html/lib/onyx/source/css/package.js
@@ -0,0 +1,3 @@
+enyo.depends(
+	"onyx.css"
+);
diff --git a/html/lib/onyx/source/design.js b/html/lib/onyx/source/design.js
new file mode 100644
index 0000000..430dc70
--- /dev/null
+++ b/html/lib/onyx/source/design.js
@@ -0,0 +1,66 @@
+//* @protected
+// This is an in-progress design description of the Onyx controls for use in the Ares designer tool.
+Palette.model.push(
+	{name: "onyx", items: [
+		{name: "onyx.Button", title: "Foofoofoo", icon: "box_software.png", stars: 4, version: 2.0, blurb: "Use as a simple page header, or add an optional navigation menu.",
+			inline: {content: "onyx.Button", kind: "onyx.Button"},
+			config: {content: "$name", isContainer: true, kind: "onyx.Button"}
+		},
+		{name: "onyx.InputDecorator", title: "Foofoofoo", icon: "box_software.png", stars: 4, version: 2.0, blurb: "Use as a simple page header, or add an optional navigation menu.",
+			inline: {kind: "onyx.InputDecorator", components: [
+				{kind: "Input", placeholder: "Enter text here"}
+			]},
+			config: {kind: "onyx.InputDecorator", components: [
+				{kind: "Input", placeholder: "Enter text here"}
+			]}
+		},
+		{name: "onyx.Input", title: "Foofoofoo", icon: "box_software.png", stars: 4, version: 2.0, blurb: "Use as a simple page header, or add an optional navigation menu.",
+			inline: {value: "onyx.Input", kind: "onyx.Input"},
+			config: {kind: "onyx.Input"}
+		},
+		{name: "onyx.ToggleButton", title: "Foofoofoo", icon: "box_software.png", stars: 4, version: 2.0, blurb: "Use as a simple page header, or add an optional navigation menu.",
+			inline: {kind: "onyx.ToggleButton"},
+			config: {kind: "onyx.ToggleButton"}
+		},
+		{name: "onyx.Checkbox", title: "Foofoofoo", icon: "box_software.png", stars: 4, version: 2.0, blurb: "Use as a simple page header, or add an optional navigation menu.",
+			inline: {kind: "onyx.Checkbox"},
+			config: {kind: "onyx.Checkbox"}
+		},
+		{name: "onyx.RadioGroup", 
+			inline: {kind: "onyx.RadioGroup", components: [
+				{content: "A"},
+				{content: "B"},
+				{content: "C"}
+			]},
+			config: {kind: "onyx.RadioGroup", isContainer: true, components: [
+				{content: "RadioButton"}
+			]}
+		},
+		{name: "onyx.RadioButton", 
+			inline: {content: "RadioButton", kind: "onyx.RadioButton"},
+			config: {content: "$name", kind: "onyx.RadioButton"}
+		},
+		{name: "onyx.Toolbar", title: "Foofoofoo", icon: "box_software.png", stars: 4, version: 2.0, blurb: "Use as a simple page header, or add an optional navigation menu.",
+			inline: {kind: "onyx.Toolbar"},
+			config: {isContainer: true, kind: "onyx.Toolbar"}
+		},
+		{name: "onyx.Grabber", title: "Foofoofoo", icon: "box_software.png", stars: 4, version: 2.0, blurb: "Use as a simple page header, or add an optional navigation menu.",
+			inline: {kind: "onyx.Grabber", style: "background-color: #333; padding: 4px 12px;"},
+			config: {kind: "onyx.Grabber"}
+		},
+		{name: "onyx.Groupbox", title: "Foofoofoo", icon: "box_software.png", stars: 4, version: 2.0, blurb: "Use as a simple page header, or add an optional navigation menu.",
+			inline: {kind: "onyx.Groupbox", components: [
+				{content: "Header", kind: "onyx.GroupboxHeader"}, 
+				{content: "Item", style: "padding: 10px;"}
+			]},
+			config: {kind: "onyx.Groupbox", isContainer: true, components: [
+				{content: "Header", kind: "onyx.GroupboxHeader", isContainer: true}, 
+				{content: "Item", style: "padding: 10px;"}
+			]}
+		},
+		{name: "onyx.GroupboxHeader", title: "Foofoofoo", icon: "box_software.png", stars: 4, version: 2.0, blurb: "Use as a simple page header, or add an optional navigation menu.",
+			inline: {content: "Header", kind: "onyx.GroupboxHeader"},
+			config: {content: "$name", kind: "onyx.GroupboxHeader", isContainer: true}
+		}
+	]}
+);
\ No newline at end of file
diff --git a/html/lib/onyx/source/package.js b/html/lib/onyx/source/package.js
new file mode 100644
index 0000000..4a5ff50
--- /dev/null
+++ b/html/lib/onyx/source/package.js
@@ -0,0 +1,37 @@
+enyo.depends(
+	"css/",
+	"Icon.js",
+	"Button.js",
+	"IconButton.js",
+	"Checkbox.js",
+	"Drawer.js",
+	"Grabber.js",
+	"Groupbox.js",
+	"Input.js",
+	"Popup.js",
+	"TextArea.js",
+	"RichText.js",
+	"InputDecorator.js",
+	"Tooltip.js",
+	"TooltipDecorator.js",
+	"MenuDecorator.js",
+	"Menu.js",
+	"MenuItem.js",
+	"PickerDecorator.js",
+	"PickerButton.js",
+	"Picker.js",
+	"FlyweightPicker.js",	
+	"RadioButton.js",
+	"RadioGroup.js",
+	"ToggleButton.js",
+	"Toolbar.js",
+	"Tooltip.js",
+	"TooltipDecorator.js",
+	"ProgressBar.js",
+	"ProgressButton.js",
+	"Scrim.js",
+	"Slider.js",
+	"Item.js",
+	"Spinner.js",
+	"MoreToolbar.js"
+);
diff --git a/html/lib/onyx/source/wip-package.js b/html/lib/onyx/source/wip-package.js
new file mode 100644
index 0000000..7901550
--- /dev/null
+++ b/html/lib/onyx/source/wip-package.js
@@ -0,0 +1,4 @@
+enyo.depends(
+	"SwipeableItem.js",
+	"TabPanels.js"
+);
\ No newline at end of file