diff --git a/.eslintignore b/.eslintignore index 57fedb0da..e657b6260 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1,2 +1,4 @@ apps/animclk/V29.LBM.js apps/banglerun/rollup.config.js +apps/schoolCalendar/fullcalendar/main.js +apps/authentiwatch/qr_packed.js diff --git a/.gitignore b/.gitignore index d2001bf41..47233d1f5 100644 --- a/.gitignore +++ b/.gitignore @@ -7,4 +7,5 @@ appdates.csv .vscode .idea/ _config.yml - +tests/Layout/bin/tmp.* +tests/Layout/testresult.bmp diff --git a/README.md b/README.md index 49f616964..20ae8afb2 100644 --- a/README.md +++ b/README.md @@ -1,10 +1,10 @@ Bangle.js App Loader (and Apps) ================================ -[![Build Status](https://travis-ci.org/espruino/BangleApps.svg?branch=master)](https://travis-ci.org/espruino/BangleApps) +[![Build Status](https://app.travis-ci.com/espruino/BangleApps.svg?branch=master)](https://app.travis-ci.com/github/espruino/BangleApps) * Try the **release version** at [banglejs.com/apps](https://banglejs.com/apps) -* Try the **development version** at [github.io](https://espruino.github.io/BangleApps/) +* Try the **development version** at [espruino.github.io](https://espruino.github.io/BangleApps/) **All software (including apps) in this repository is MIT Licensed - see [LICENSE](LICENSE)** By submitting code to this repository you confirm that you are happy with it being MIT licensed, @@ -49,25 +49,25 @@ easily distinguish between file types, we use the following: ## Adding your app to the menu -* Come up with a unique (all lowercase, no spaces) name, we'll assume `7chname`. Bangle.js +* Come up with a unique (all lowercase, no spaces) name, we'll assume `myappid`. Bangle.js is limited to 28 char filenames and appends a file extension (eg `.js`) so please try and keep filenames short to avoid overflowing the buffer. -* Create a folder called `apps/`, lets assume `apps/7chname` +* Create a folder called `apps/`, lets assume `apps/myappid` * We'd recommend that you copy files from 'Example Applications' (below) as a base, or... -* `apps/7chname/app.png` should be a 48px icon -* Use http://www.espruino.com/Image+Converter to create `apps/7chname/app-icon.js`, using a 1 bit, 4 bit or 8 bit Web Palette "Image String" +* `apps/myappid/app.png` should be a 48px icon +* Use http://www.espruino.com/Image+Converter to create `apps/myappid/app-icon.js`, using a 1 bit, 4 bit or 8 bit Web Palette "Image String" * Create an entry in `apps.json` as follows: ``` -{ "id": "7chname", +{ "id": "myappid", "name": "My app's human readable name", "shortName" : "Short Name", "icon": "app.png", "description": "A detailed description of my great app", "tags": "", "storage": [ - {"name":"7chname.app.js","url":"app.js"}, - {"name":"7chname.img","url":"app-icon.js","evaluate":true} + {"name":"myappid.app.js","url":"app.js"}, + {"name":"myappid.img","url":"app-icon.js","evaluate":true} ], }, ``` @@ -95,12 +95,12 @@ Be aware of the delay between commits and updates on github.io - it can take a f Using the 'Storage' icon in [the Web IDE](https://www.espruino.com/ide/) (4 discs), upload your files into the places described in your JSON: -* `app-icon.js` -> `7chname.img` +* `app-icon.js` -> `myappid.img` Now load `app.js` up in the editor, and click the down-arrow to the bottom right of the `Send to Espruino` icon. Click `Storage` and then either choose -`7chname.app.js` (if you'd uploaded your app previously), or `New File` -and then enter `7chname.app.js` as the name. +`myappid.app.js` (if you'd uploaded your app previously), or `New File` +and then enter `myappid.app.js` as the name. Now, clicking the `Send to Espruino` icon will load the app directly into Espruino **and** will automatically run it. @@ -115,10 +115,13 @@ and set it to `Load default application`. ## Example Applications To make the process easier we've come up with some example applications that you can use as a base -when creating your own. Just come up with a unique 7 character name, copy `apps/_example_app` -or `apps/_example_widget` to `apps/7chname`, and add `apps/_example_X/add_to_apps.json` to +when creating your own. Just come up with a unique name (ideally lowercase, under 20 chars), copy `apps/_example_app` +or `apps/_example_widget` to `apps/myappid`, and add `apps/_example_X/add_to_apps.json` to `apps.json`. +**Note:** the max filename length is 28 chars, so we suggest an app ID of under +20 so that when `.app.js`/etc gets added to the end the filename isn't cropped. + **If you're making a widget** please start the name with `wid` to make it easy to find! @@ -192,8 +195,8 @@ and which gives information about the app for the Launcher. ``` { "name":"Short Name", // for Bangle.js menu - "icon":"*7chname", // for Bangle.js menu - "src":"-7chname", // source file + "icon":"*myappid", // for Bangle.js menu + "src":"-myappid", // source file "type":"widget/clock/app/bootloader", // optional, default "app" // if this is 'widget' then it's not displayed in the menu // if it's 'clock' then it'll be loaded by default at boot time @@ -217,8 +220,10 @@ and which gives information about the app for the Launcher. { "id": "appid", // 7 character app id "name": "Readable name", // readable name "shortName": "Short name", // short name for launcher - "icon": "icon.png", // icon in apps/ + "version": "0v01", // the version of this app "description": "...", // long description (can contain markdown) + "icon": "icon.png", // icon in apps/ + "screenshots" : [ { url:"screenshot.png" } ], // optional screenshot for app "type":"...", // optional(if app) - // 'app' - an application // 'widget' - a widget @@ -226,7 +231,9 @@ and which gives information about the app for the Launcher. // 'bootloader' - code that runs at startup only // 'RAM' - code that runs and doesn't upload anything to storage "tags": "", // comma separated tag list for searching + "supports": ["BANGLEJS2"], // List of device IDs supported, either BANGLEJS or BANGLEJS2 "dependencies" : { "notify":"type" } // optional, app 'types' we depend on + "dependencies" : { "messages":"app" } // optional, depend on a specific app ID // for instance this will use notify/notifyfs is they exist, or will pull in 'notify' "readme": "README.md", // if supplied, a link to a markdown-style text file // that contains more information about this app (usage, etc) @@ -259,6 +266,9 @@ and which gives information about the app for the Launcher. // (eg it's evaluated as JS) "noOverwrite":true // if supplied, this file will not be overwritten if it // already exists + "supports": ["BANGLEJS2"]// if supplied, this file will ONLY be uploaded to the device + // types named in the array. This allows different versions of + // the app to be uploaded for different platforms }, ] "data": [ // list of files the app writes to @@ -306,10 +316,10 @@ version of what's in `apps.json`: + + + + + + + +

Authentiwatch

+
+

No watch comms.

+
+
+ + + +
+
+
+
+
+
+ +
+
+ + + + diff --git a/apps/authentiwatch/qr_packed.js b/apps/authentiwatch/qr_packed.js new file mode 100644 index 000000000..28b1bddd0 --- /dev/null +++ b/apps/authentiwatch/qr_packed.js @@ -0,0 +1,107 @@ +/* Packed with Google Closure +* +* Ported to JavaScript by Lazar Laszlo 2011 +* lazarsoft@gmail.com, www.lazarsoft.info +* +* Copyright 2007 ZXing authors +* +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +*/ +var qrcode=function(){"use strict";function a(h,b){this.count=h;this.dataCodewords=b;this.__defineGetter__("Count",function(){return this.count});this.__defineGetter__("DataCodewords",function(){return this.dataCodewords})}function f(h,b,e){this.ecCodewordsPerBlock=h;this.ecBlocks=e?[b,e]:Array(b);this.__defineGetter__("ECCodewordsPerBlock",function(){return this.ecCodewordsPerBlock});this.__defineGetter__("TotalECCodewords",function(){return this.ecCodewordsPerBlock*this.NumBlocks});this.__defineGetter__("NumBlocks", +function(){for(var d=0,c=0;cMath.abs(d-b);if(h){var a=b;b=e;e=a;a=d;d=c;c=a}for(var m=Math.abs(d-b),f=Math.abs(c-e),q=-m>>1,k=ed?(h=b/(b-d),d=0):d>=g.width&&(h=(g.width-1-b)/(d-b),d=g.width-1);c=Math.floor(e-(c-e)*h);h=1;0>c?(h=e/(e-c),c=0):c>=g.height&&(h=(g.height-1-e)/(c-e),c=g.height-1);d=Math.floor(b+(d-b)*h);a+=this.sizeOfBlackWhiteBlackRun(b,e,d,c);return a-1};this.calculateModuleSizeOneWay=function(b,e){var d=this.sizeOfBlackWhiteBlackRunBothWays(Math.floor(b.X), +Math.floor(b.Y),Math.floor(e.X),Math.floor(e.Y)),c=this.sizeOfBlackWhiteBlackRunBothWays(Math.floor(e.X),Math.floor(e.Y),Math.floor(b.X),Math.floor(b.Y));return isNaN(d)?c/7:isNaN(c)?d/7:(d+c)/14};this.calculateModuleSize=function(b,e,d){return(this.calculateModuleSizeOneWay(b,e)+this.calculateModuleSizeOneWay(b,d))/2};this.distance=function(b,e){var d=b.X-e.X,c=b.Y-e.Y;return Math.sqrt(d*d+c*c)};this.computeDimension=function(b,e,d,c){e=Math.round(this.distance(b,e)/c);b=Math.round(this.distance(b, +d)/c);b=(e+b>>1)+7;switch(b&3){case 0:b++;break;case 2:b--;break;case 3:throw"Error";}return b};this.findAlignmentInRegion=function(b,e,d,c){c=Math.floor(c*b);var h=Math.max(0,e-c);e=Math.min(g.width-1,e+c);if(e-h<3*b)throw"Error";var a=Math.max(0,d-c);return(new R(this.image,h,a,e-h,Math.min(g.height-1,d+c)-a,b,this.resultPointCallback)).find()};this.createTransform=function(b,e,d,c,h){h-=3.5;var a;if(null!=c){var p=c.X;c=c.Y;var f=a=h-3}else p=e.X-b.X+d.X,c=e.Y-b.Y+d.Y,f=a=h;return z.quadrilateralToQuadrilateral(3.5, +3.5,h,3.5,f,a,3.5,h,b.X,b.Y,e.X,e.Y,p,c,d.X,d.Y)};this.sampleGrid=function(b,e,d){return F.sampleGrid3(b,d,e)};this.processFinderPatternInfo=function(b){var e=b.TopLeft,d=b.TopRight;b=b.BottomLeft;var c=this.calculateModuleSize(e,d,b);if(1>c)throw"Error";var h=this.computeDimension(e,d,b,c),a=k.getProvisionalVersionForDimension(h),m=a.DimensionForVersion-7,f=null;if(0>3&3);this.dataMask=h&7;this.__defineGetter__("ErrorCorrectionLevel",function(){return this.errorCorrectionLevel});this.__defineGetter__("DataMask",function(){return this.dataMask});this.GetHashCode=function(){return this.errorCorrectionLevel.ordinal()<< +3|this.dataMask};this.Equals=function(b){return this.errorCorrectionLevel==b.errorCorrectionLevel&&this.dataMask==b.dataMask}}function C(h,b,e){this.ordinal_Renamed_Field=h;this.bits=b;this.name=e;this.__defineGetter__("Bits",function(){return this.bits});this.__defineGetter__("Name",function(){return this.name});this.ordinal=function(){return this.ordinal_Renamed_Field}}function I(h,b){b||(b=h);if(1>h||1>b)throw"Both dimensions must be greater than 0";this.width=h;this.height=b;var e=h>>5;0!=(h& +31)&&e++;this.rowSize=e;this.bits=Array(e*b);for(e=0;e>5)],d&31)&1)};this.set_Renamed=function(d,c){this.bits[c*this.rowSize+ +(d>>5)]|=1<<(d&31)};this.flip=function(d,c){this.bits[c*this.rowSize+(d>>5)]^=1<<(d&31)};this.clear=function(){for(var d=this.bits.length,c=0;cc||0>d)throw"Left and top must be nonnegative";if(1>b||1>e)throw"Height and width must be at least 1";e=d+e;b=c+b;if(b>this.height||e>this.width)throw"The region must fit inside the matrix";for(;c>5)]|=1<<(a&31)}}function G(a,b){this.numDataCodewords= +a;this.codewords=b;this.__defineGetter__("NumDataCodewords",function(){return this.numDataCodewords});this.__defineGetter__("Codewords",function(){return this.codewords})}function T(a){var b=a.Dimension;if(21>b||1!=(b&3))throw"Error BitMatrixParser";this.bitMatrix=a;this.parsedFormatInfo=this.parsedVersion=null;this.copyBit=function(e,d,c){return this.bitMatrix.get_Renamed(e,d)?c<<1|1:c<<1};this.readFormatInformation=function(){if(null!=this.parsedFormatInfo)return this.parsedFormatInfo;for(var e= +0,d=0;6>d;d++)e=this.copyBit(d,8,e);e=this.copyBit(7,8,e);e=this.copyBit(8,8,e);e=this.copyBit(8,7,e);for(d=5;0<=d;d--)e=this.copyBit(8,d,e);this.parsedFormatInfo=r.decodeFormatInformation(e);if(null!=this.parsedFormatInfo)return this.parsedFormatInfo;for(var c=this.bitMatrix.Dimension,e=0,b=c-8,d=c-1;d>=b;d--)e=this.copyBit(d,8,e);for(d=c-7;d>2;if(6>=d)return k.getVersionForNumber(d);for(var d=0,c=e-11,b=5;0<=b;b--)for(var a=e-9;a>=c;a--)d=this.copyBit(a,b,d);this.parsedVersion=k.decodeVersionInformation(d);if(null!=this.parsedVersion&&this.parsedVersion.DimensionForVersion==e)return this.parsedVersion;d=0;for(a=5;0<=a;a--)for(b=e-9;b>=c;b--)d=this.copyBit(a,b,d);this.parsedVersion=k.decodeVersionInformation(d);if(null!= +this.parsedVersion&&this.parsedVersion.DimensionForVersion==e)return this.parsedVersion;throw"Error readVersion";};this.readCodewords=function(){var b=this.readFormatInformation(),d=this.readVersion(),c=H.forReference(b.DataMask),b=this.bitMatrix.Dimension;c.unmaskBitMatrix(this.bitMatrix,b);for(var c=d.buildFunctionPattern(),a=!0,h=Array(d.TotalCodewords),m=0,f=0,g=0,k=b-1;0t;t++)c.get_Renamed(k-t,v)||(g++,f<<=1,this.bitMatrix.get_Renamed(k- +t,v)&&(f|=1),8==g&&(h[m++]=f,f=g=0));a^=1}if(m!=d.TotalCodewords)throw"Error readCodewords";return h}}function w(a,b){if(null==b||0==b.length)throw"System.ArgumentException";this.field=a;var e=b.length;if(1c.length){var b=d,d=c;c=b}for(var b=Array(c.length),e=c.length-d.length,h=0;hc)throw"System.ArgumentException";if(0==d)return this.field.Zero;for(var b=this.coefficients.length,e=Array(b+c),a=0;a=c.Degree&&!b.Zero;)var a=b.Degree-c.Degree, +h=this.field.multiply(b.getCoefficient(b.Degree),e),f=c.multiplyByMonomial(a,h),a=this.field.buildMonomial(a,h),d=d.addOrSubtract(a),b=b.addOrSubtract(f);return[d,b]}}function n(a){this.expTable=Array(256);this.logTable=Array(256);for(var b=1,e=0;256>e;e++)this.expTable[e]=b,b<<=1,256<=b&&(b^=a);for(e=0;255>e;e++)this.logTable[this.expTable[e]]=e;a=Array(1);a[0]=0;this.zero=new w(this,Array(a));a=Array(1);a[0]=1;this.one=new w(this,Array(a));this.__defineGetter__("Zero",function(){return this.zero}); +this.__defineGetter__("One",function(){return this.one});this.buildMonomial=function(d,c){if(0>d)throw"System.ArgumentException";if(0==c)return this.zero;for(var b=Array(d+1),e=0;e>b:(a>>b)+(2<<~b)}function U(a,b,e){this.x=a;this.y=b;this.count=1;this.estimatedModuleSize=e;this.__defineGetter__("EstimatedModuleSize",function(){return this.estimatedModuleSize});this.__defineGetter__("Count",function(){return this.count});this.__defineGetter__("X",function(){return this.x});this.__defineGetter__("Y",function(){return this.y});this.incrementCount=function(){this.count++}; +this.aboutEquals=function(d,c,b){return Math.abs(c-this.y)<=d&&Math.abs(b-this.x)<=d?(d=Math.abs(d-this.estimatedModuleSize),1>=d||1>=d/this.estimatedModuleSize):!1}}function V(a){this.bottomLeft=a[0];this.topLeft=a[1];this.topRight=a[2];this.__defineGetter__("BottomLeft",function(){return this.bottomLeft});this.__defineGetter__("TopLeft",function(){return this.topLeft});this.__defineGetter__("TopRight",function(){return this.topRight})}function S(){this.image=null;this.possibleCenters=[];this.hasSkipped= +!1;this.crossCheckStateCount=[0,0,0,0,0];this.resultPointCallback=null;this.__defineGetter__("CrossCheckStateCount",function(){this.crossCheckStateCount[0]=0;this.crossCheckStateCount[1]=0;this.crossCheckStateCount[2]=0;this.crossCheckStateCount[3]=0;this.crossCheckStateCount[4]=0;return this.crossCheckStateCount});this.foundPatternCross=function(a){for(var b=0,e=0;5>e;e++){var d=a[e];if(0==d)return!1;b+=d}if(7>b)return!1;b=Math.floor((b<m)return NaN;for(;0<=m&&!c[b+m*g.width]&&l[1]<=e;)l[1]++,m--;if(0>m||l[1]>e)return NaN;for(;0<=m&&c[b+m*g.width]&&l[0]<=e;)l[0]++,m--;if(l[0]>e)return NaN;for(m=a+1;m=e)return NaN;for(;m=e||5*Math.abs(l[0]+l[1]+l[2]+l[3]+l[4]-d)>=2*d?NaN:this.foundPatternCross(l)?this.centerFromEnd(l,m):NaN};this.crossCheckHorizontal=function(a,b,e,d){for(var c=this.image,h=g.width,l=this.CrossCheckStateCount,m=a;0<=m&&c[m+b*g.width];)l[2]++,m--;if(0>m)return NaN;for(;0<=m&&!c[m+b*g.width]&&l[1]<=e;)l[1]++,m--;if(0>m||l[1]>e)return NaN;for(;0<=m&&c[m+b*g.width]&&l[0]<= +e;)l[0]++,m--;if(l[0]>e)return NaN;for(m=a+1;m=e)return NaN;for(;m=e||5*Math.abs(l[0]+l[1]+l[2]+l[3]+l[4]-d)>=d?NaN:this.foundPatternCross(l)?this.centerFromEnd(l,m):NaN};this.handlePossibleCenter=function(a,b,e){var d=a[0]+a[1]+a[2]+a[3]+a[4];e=this.centerFromEnd(a,e);b=this.crossCheckVertical(b,Math.floor(e),a[2],d);if(!isNaN(b)&&(e=this.crossCheckHorizontal(Math.floor(e), +Math.floor(b),a[2],d),!isNaN(e))){a=d/7;for(var d=!1,c=this.possibleCenters.length,h=0;ha)throw"Couldn't find enough finder patterns (found "+a+")";if(3a&&this.possibleCenters.splice(d,1)}3d.count?-1:c.count=a)return 0;for(var b=null,e=0;e=K)if(null==b)b=d;else return this.hasSkipped=!0,Math.floor((Math.abs(b.X-d.X)-Math.abs(b.Y-d.Y))/2)}return 0};this.haveMultiplyConfirmedCenters=function(){for(var a,b=0,e=0,d=this.possibleCenters.length,c=0;c=K&&(b++,e+=a.EstimatedModuleSize); +if(3>b)return!1;for(var b=e/d,p=0,c=0;cl[2]&&(m+=b-l[2]-c,f=d-1));else{do f++;while(f=d||1>=d/this.estimatedModuleSize):!1}}function R(a,b,e,d,c,f,l){this.image=a;this.possibleCenters= +[];this.startX=b;this.startY=e;this.width=d;this.height=c;this.moduleSize=f;this.crossCheckStateCount=[0,0,0];this.resultPointCallback=l;this.centerFromEnd=function(c,d){return d-c[2]-c[1]/2};this.foundPatternCross=function(c){for(var d=this.moduleSize,b=d/2,a=0;3>a;a++)if(Math.abs(d-c[a])>=b)return!1;return!0};this.crossCheckVertical=function(c,d,b,a){var e=this.image,h=g.height,f=this.crossCheckStateCount;f[0]=0;f[1]=0;f[2]=0;for(var l=c;0<=l&&e[d+l*g.width]&&f[1]<=b;)f[1]++,l--;if(0>l||f[1]>b)return NaN; +for(;0<=l&&!e[d+l*g.width]&&f[0]<=b;)f[0]++,l--;if(f[0]>b)return NaN;for(l=c+1;lb)return NaN;for(;lb||5*Math.abs(f[0]+f[1]+f[2]-a)>=2*a?NaN:this.foundPatternCross(f)?this.centerFromEnd(f,l):NaN};this.handlePossibleCenter=function(c,d,b){var a=c[0]+c[1]+c[2];b=this.centerFromEnd(c,b);d=this.crossCheckVertical(d,Math.floor(b),2*c[1],a);if(!isNaN(d)){c=(c[0]+c[1]+c[2])/3;for(var a=this.possibleCenters.length, +e=0;e>1),p=[0,0,0],k=0;k>1:-(k+1>>1));p[0]=0;p[1]=0;p[2]=0;for(var A=b;A=b?this.dataLengthMode=0:10<=b&&26>=b?this.dataLengthMode=1:27<= +b&&40>=b&&(this.dataLengthMode=2);this.getNextBits=function(b){var c,d;if(b>this.bitPointer-b+1;this.bitPointer-=b;return d}if(b>8-(b-(this.bitPointer+1));this.bitPointer-=b%8;0>this.bitPointer&&(this.bitPointer= +8+this.bitPointer);return d}if(b>8-(b-(this.bitPointer+1+8));this.bitPointer-=(b-8)%8;0>this.bitPointer&&(this.bitPointer=8+this.bitPointer);return c+e+d}return 0}; +this.NextMode=function(){return this.blockPointer>this.blocks.length-this.numErrorCorrectionCode-2?0:this.getNextBits(4)};this.getDataLength=function(b){for(var c=0;1!=b>>c;)c++;return this.getNextBits(g.sizeOfDataLengthInfo[this.dataLengthMode][c])};this.getRomanAndFigureString=function(b){var c="",d="0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ $%*+-./:".split("");do if(1c&&(d+="0"),10>c&&(d+="0"),b-=3):2==b?(c=this.getNextBits(7),10>c&&(d+="0"),b-=2):1==b&&(c=this.getNextBits(4),--b),d+=c;while(0=d+33088?d+33088:d+49472);b--}while(0< +b);return c};this.parseECIValue=function(){var b=0,c=this.getNextBits(8);0==(c&128)&&(b=c&127);128==(c&192)&&(b=this.getNextBits(8),b|=(c&63)<<8);192==(c&224)&&(b=this.getNextBits(8),b|=(c&31)<<16);return b};this.__defineGetter__("DataByte",function(){var b=[];do{var c=this.NextMode();if(0==c)if(0a)throw"Invalid data length: "+a;switch(c){case 1:c=this.getFigureString(a);for(var a=Array(c.length),e=0;ed||d>c||-1>e||e>h)throw"Error.checkAndNudgePoints ";f=!1;-1==d?(b[m]=0,f=!0):d==c&&(b[m]=c-1,f=!0);-1==e?(b[m+1]=0,f=!0):e==h&&(b[m+1]=h-1,f=!0)}f=!0;for(m=b.length-2;0<=m&&f;m-=2){d=Math.floor(b[m]);e=Math.floor(b[m+1]);if(-1>d||d>c||-1>e||e>h)throw"Error.checkAndNudgePoints ";f=!1;-1==d?(b[m]=0,f=!0):d==c&&(b[m]=c-1,f=!0);-1==e?(b[m+1]=0,f=!0):e==h&&(b[m+1]=h-1,f=!0)}},sampleGrid3:function(a,b,e){for(var d=new I(b),c=Array(b<<1),h=0;h>1)+.5,c[k+1]=m;e.transformPoints1(c);F.checkAndNudgePoints(a,c);try{for(k=0;k>1,h)}catch(q){throw"Error.checkAndNudgePoints";}}return d},sampleGridx:function(a,b,e,d,c,f,l,g,k,q,n,x,v,t,r,A,u,w){e=z.quadrilateralToQuadrilateral(e,d,c,f,l,g,k,q,n,x,v,t,r,A,u,w);return F.sampleGrid3(a,b,e)}};k.VERSION_DECODE_INFO=[31892,34236,39577,42195,48118,51042,55367,58893,63784,68472,70749,76311,79154, +84390,87683,92361,96236,102084,102881,110507,110734,117786,119615,126325,127568,133589,136944,141498,145311,150283,152622,158308,161089,167017];k.VERSIONS=[new k(1,[],new f(7,new a(1,19)),new f(10,new a(1,16)),new f(13,new a(1,13)),new f(17,new a(1,9))),new k(2,[6,18],new f(10,new a(1,34)),new f(16,new a(1,28)),new f(22,new a(1,22)),new f(28,new a(1,16))),new k(3,[6,22],new f(15,new a(1,55)),new f(26,new a(1,44)),new f(18,new a(2,17)),new f(22,new a(2,13))),new k(4,[6,26],new f(20,new a(1,80)),new f(18, +new a(2,32)),new f(26,new a(2,24)),new f(16,new a(4,9))),new k(5,[6,30],new f(26,new a(1,108)),new f(24,new a(2,43)),new f(18,new a(2,15),new a(2,16)),new f(22,new a(2,11),new a(2,12))),new k(6,[6,34],new f(18,new a(2,68)),new f(16,new a(4,27)),new f(24,new a(4,19)),new f(28,new a(4,15))),new k(7,[6,22,38],new f(20,new a(2,78)),new f(18,new a(4,31)),new f(18,new a(2,14),new a(4,15)),new f(26,new a(4,13),new a(1,14))),new k(8,[6,24,42],new f(24,new a(2,97)),new f(22,new a(2,38),new a(2,39)),new f(22, +new a(4,18),new a(2,19)),new f(26,new a(4,14),new a(2,15))),new k(9,[6,26,46],new f(30,new a(2,116)),new f(22,new a(3,36),new a(2,37)),new f(20,new a(4,16),new a(4,17)),new f(24,new a(4,12),new a(4,13))),new k(10,[6,28,50],new f(18,new a(2,68),new a(2,69)),new f(26,new a(4,43),new a(1,44)),new f(24,new a(6,19),new a(2,20)),new f(28,new a(6,15),new a(2,16))),new k(11,[6,30,54],new f(20,new a(4,81)),new f(30,new a(1,50),new a(4,51)),new f(28,new a(4,22),new a(4,23)),new f(24,new a(3,12),new a(8,13))), +new k(12,[6,32,58],new f(24,new a(2,92),new a(2,93)),new f(22,new a(6,36),new a(2,37)),new f(26,new a(4,20),new a(6,21)),new f(28,new a(7,14),new a(4,15))),new k(13,[6,34,62],new f(26,new a(4,107)),new f(22,new a(8,37),new a(1,38)),new f(24,new a(8,20),new a(4,21)),new f(22,new a(12,11),new a(4,12))),new k(14,[6,26,46,66],new f(30,new a(3,115),new a(1,116)),new f(24,new a(4,40),new a(5,41)),new f(20,new a(11,16),new a(5,17)),new f(24,new a(11,12),new a(5,13))),new k(15,[6,26,48,70],new f(22,new a(5, +87),new a(1,88)),new f(24,new a(5,41),new a(5,42)),new f(30,new a(5,24),new a(7,25)),new f(24,new a(11,12),new a(7,13))),new k(16,[6,26,50,74],new f(24,new a(5,98),new a(1,99)),new f(28,new a(7,45),new a(3,46)),new f(24,new a(15,19),new a(2,20)),new f(30,new a(3,15),new a(13,16))),new k(17,[6,30,54,78],new f(28,new a(1,107),new a(5,108)),new f(28,new a(10,46),new a(1,47)),new f(28,new a(1,22),new a(15,23)),new f(28,new a(2,14),new a(17,15))),new k(18,[6,30,56,82],new f(30,new a(5,120),new a(1,121)), +new f(26,new a(9,43),new a(4,44)),new f(28,new a(17,22),new a(1,23)),new f(28,new a(2,14),new a(19,15))),new k(19,[6,30,58,86],new f(28,new a(3,113),new a(4,114)),new f(26,new a(3,44),new a(11,45)),new f(26,new a(17,21),new a(4,22)),new f(26,new a(9,13),new a(16,14))),new k(20,[6,34,62,90],new f(28,new a(3,107),new a(5,108)),new f(26,new a(3,41),new a(13,42)),new f(30,new a(15,24),new a(5,25)),new f(28,new a(15,15),new a(10,16))),new k(21,[6,28,50,72,94],new f(28,new a(4,116),new a(4,117)),new f(26, +new a(17,42)),new f(28,new a(17,22),new a(6,23)),new f(30,new a(19,16),new a(6,17))),new k(22,[6,26,50,74,98],new f(28,new a(2,111),new a(7,112)),new f(28,new a(17,46)),new f(30,new a(7,24),new a(16,25)),new f(24,new a(34,13))),new k(23,[6,30,54,74,102],new f(30,new a(4,121),new a(5,122)),new f(28,new a(4,47),new a(14,48)),new f(30,new a(11,24),new a(14,25)),new f(30,new a(16,15),new a(14,16))),new k(24,[6,28,54,80,106],new f(30,new a(6,117),new a(4,118)),new f(28,new a(6,45),new a(14,46)),new f(30, +new a(11,24),new a(16,25)),new f(30,new a(30,16),new a(2,17))),new k(25,[6,32,58,84,110],new f(26,new a(8,106),new a(4,107)),new f(28,new a(8,47),new a(13,48)),new f(30,new a(7,24),new a(22,25)),new f(30,new a(22,15),new a(13,16))),new k(26,[6,30,58,86,114],new f(28,new a(10,114),new a(2,115)),new f(28,new a(19,46),new a(4,47)),new f(28,new a(28,22),new a(6,23)),new f(30,new a(33,16),new a(4,17))),new k(27,[6,34,62,90,118],new f(30,new a(8,122),new a(4,123)),new f(28,new a(22,45),new a(3,46)),new f(30, +new a(8,23),new a(26,24)),new f(30,new a(12,15),new a(28,16))),new k(28,[6,26,50,74,98,122],new f(30,new a(3,117),new a(10,118)),new f(28,new a(3,45),new a(23,46)),new f(30,new a(4,24),new a(31,25)),new f(30,new a(11,15),new a(31,16))),new k(29,[6,30,54,78,102,126],new f(30,new a(7,116),new a(7,117)),new f(28,new a(21,45),new a(7,46)),new f(30,new a(1,23),new a(37,24)),new f(30,new a(19,15),new a(26,16))),new k(30,[6,26,52,78,104,130],new f(30,new a(5,115),new a(10,116)),new f(28,new a(19,47),new a(10, +48)),new f(30,new a(15,24),new a(25,25)),new f(30,new a(23,15),new a(25,16))),new k(31,[6,30,56,82,108,134],new f(30,new a(13,115),new a(3,116)),new f(28,new a(2,46),new a(29,47)),new f(30,new a(42,24),new a(1,25)),new f(30,new a(23,15),new a(28,16))),new k(32,[6,34,60,86,112,138],new f(30,new a(17,115)),new f(28,new a(10,46),new a(23,47)),new f(30,new a(10,24),new a(35,25)),new f(30,new a(19,15),new a(35,16))),new k(33,[6,30,58,86,114,142],new f(30,new a(17,115),new a(1,116)),new f(28,new a(14,46), +new a(21,47)),new f(30,new a(29,24),new a(19,25)),new f(30,new a(11,15),new a(46,16))),new k(34,[6,34,62,90,118,146],new f(30,new a(13,115),new a(6,116)),new f(28,new a(14,46),new a(23,47)),new f(30,new a(44,24),new a(7,25)),new f(30,new a(59,16),new a(1,17))),new k(35,[6,30,54,78,102,126,150],new f(30,new a(12,121),new a(7,122)),new f(28,new a(12,47),new a(26,48)),new f(30,new a(39,24),new a(14,25)),new f(30,new a(22,15),new a(41,16))),new k(36,[6,24,50,76,102,128,154],new f(30,new a(6,121),new a(14, +122)),new f(28,new a(6,47),new a(34,48)),new f(30,new a(46,24),new a(10,25)),new f(30,new a(2,15),new a(64,16))),new k(37,[6,28,54,80,106,132,158],new f(30,new a(17,122),new a(4,123)),new f(28,new a(29,46),new a(14,47)),new f(30,new a(49,24),new a(10,25)),new f(30,new a(24,15),new a(46,16))),new k(38,[6,32,58,84,110,136,162],new f(30,new a(4,122),new a(18,123)),new f(28,new a(13,46),new a(32,47)),new f(30,new a(48,24),new a(14,25)),new f(30,new a(42,15),new a(32,16))),new k(39,[6,26,54,82,110,138, +166],new f(30,new a(20,117),new a(4,118)),new f(28,new a(40,47),new a(7,48)),new f(30,new a(43,24),new a(22,25)),new f(30,new a(10,15),new a(67,16))),new k(40,[6,30,58,86,114,142,170],new f(30,new a(19,118),new a(6,119)),new f(28,new a(18,47),new a(31,48)),new f(30,new a(34,24),new a(34,25)),new f(30,new a(20,15),new a(61,16)))];k.getVersionForNumber=function(a){if(1>a||40>2)}catch(b){throw"Error getVersionForNumber";}};k.decodeVersionInformation=function(a){for(var b=4294967295,e=0,d=0;d=b?this.getVersionForNumber(e):null};z.quadrilateralToQuadrilateral=function(a,b,e,d,c,f,g,m,k,q,n,x,v,t,r,u){a=this.quadrilateralToSquare(a,b,e,d,c,f,g,m);return this.squareToQuadrilateral(k, +q,n,x,v,t,r,u).times(a)};z.squareToQuadrilateral=function(a,b,e,d,c,f,g,m){var h=m-f,l=b-d+f-m;if(0==h&&0==l)return new z(e-a,c-e,a,d-b,f-d,b,0,0,1);var p=e-c,k=g-c;c=a-e+c-g;f=d-f;var n=p*h-k*f,h=(c*h-k*l)/n,l=(p*l-c*f)/n;return new z(e-a+h*e,g-a+l*g,a,d-b+h*d,m-b+l*m,b,h,l,1)};z.quadrilateralToSquare=function(a,b,e,d,c,f,g,m){return this.squareToQuadrilateral(a,b,e,d,c,f,g,m).buildAdjoint()};var N=[[21522,0],[20773,1],[24188,2],[23371,3],[17913,4],[16590,5],[20375,6],[19104,7],[30660,8],[29427, +9],[32170,10],[30877,11],[26159,12],[25368,13],[27713,14],[26998,15],[5769,16],[5054,17],[7399,18],[6608,19],[1890,20],[597,21],[3340,22],[2107,23],[13663,24],[12392,25],[16177,26],[14854,27],[9396,28],[8579,29],[11994,30],[11245,31]],B=[0,1,1,2,1,2,2,3,1,2,2,3,2,3,3,4];r.numBitsDiffering=function(a,b){a^=b;return B[a&15]+B[u(a,4)&15]+B[u(a,8)&15]+B[u(a,12)&15]+B[u(a,16)&15]+B[u(a,20)&15]+B[u(a,24)&15]+B[u(a,28)&15]};r.decodeFormatInformation=function(a){var b=r.doDecodeFormatInformation(a);return null!= +b?b:r.doDecodeFormatInformation(a^21522)};r.doDecodeFormatInformation=function(a){for(var b=4294967295,e=0,d=0;d=b?new r(e):null};C.forBits=function(a){if(0>a||a>=O.length)throw"ArgumentException";return O[a]};var Y=new C(0,1,"L"),Z=new C(1,0,"M"),aa=new C(2,3,"Q"),ba=new C(3,2,"H"),O=[Z,Y,ba,aa];G.getDataBlocks=function(a,b,e){if(a.length!=b.TotalCodewords)throw"ArgumentException"; +var d=b.getECBlocksForLevel(e);e=0;var c=d.getECBlocks();for(b=0;ba||7h)throw"ReedSolomonException Bad error location";a[h]=n.addOrSubtract(a[h],c[f])}};this.runEuclideanAlgorithm=function(a,e,d){if(a.Degree=Math.floor(d/2);){var k=a,q=b,n=h;a=e;b=f;h=g;if(a.Zero)throw"r_{i-1} was zero";e=k;g=this.field.Zero;f=a.getCoefficient(a.Degree); +for(f=this.field.inverse(f);e.Degree>=a.Degree&&!e.Zero;){var k=e.Degree-a.Degree,r=this.field.multiply(e.getCoefficient(e.Degree),f),g=g.addOrSubtract(this.field.buildMonomial(k,r));e=e.addOrSubtract(a.multiplyByMonomial(k,r))}f=g.multiply1(b).addOrSubtract(q);g=g.multiply1(h).addOrSubtract(n)}d=g.getCoefficient(0);if(0==d)throw"ReedSolomonException sigmaTilde(0) was zero";d=this.field.inverse(d);a=g.multiply2(d);d=e.multiply2(d);return[a,d]};this.findErrorLocations=function(a){var b=a.Degree;if(1== +b)return Array(a.getCoefficient(1));for(var d=Array(b),c=0,f=1;256>f&&cg.maxImgSize&&(f=d.width/d.height,e=Math.sqrt(g.maxImgSize/f),f*=e);a.width=f;a.height=e;b.drawImage(d,0,0,a.width,a.height);g.width=a.width;g.height=a.height;try{g.imagedata= +b.getImageData(0,0,a.width,a.height)}catch(y){g.result=Error("Cross domain image reading not supported in your browser! Save it to your computer then drag and drop the file!");null!=g.callback&&g.callback(g.result);return}try{g.result=g.process(b)}catch(y){console.log(y),g.result=Error("error decoding QR Code")}null!=g.callback&&g.callback(g.result)};d.onerror=function(){null!=g.callback&&g.callback(Error("Failed to load the image"))};d.src=a},isUrl:function(a){return/(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/.test(a)}, +decode_url:function(a){var b="";try{b=escape(a)}catch(e){console.log(e),b=a}a="";try{a=decodeURIComponent(b)}catch(e){console.log(e),a=b}return a},decode_utf8:function(a){return g.isUrl(a)?g.decode_url(a):a},process:function(a){var b=(new Date).getTime(),e=g.grayScaleToBitmap(g.grayscale());if(g.debug){for(var d=0;dc;c++){d[c]=Array(4);for(var f=0;4>f;f++)d[c][f]=[0,0]}for(c=0;4>c;c++)for(f= +0;4>f;f++){d[f][c][0]=255;for(var h=0;hd[f][c][1]&&(d[f][c][1]=k)}}a=Array(4);for(b=0;4>b;b++)a[b]=Array(4);for(c=0;4>c;c++)for(f=0;4>f;f++)a[f][c]=Math.floor((d[f][c][0]+d[f][c][1])/2);return a},grayScaleToBitmap:function(a){for(var b=g.getMiddleBrightnessPerArea(a),e=b.length,d=Math.floor(g.width/e),c=Math.floor(g.height/e),f=new ArrayBuffer(g.width*g.height),f=new Uint8Array(f),h=0;h=e&&d>=c?(d=a[0],e=a[1],c=a[2]):c>=d&&c>=e?(d=a[1], +e=a[0],c=a[2]):(d=a[2],e=a[0],c=a[1]);if(0>function(a,b,c){var d=b.x;b=b.y;return(c.x-d)*(a.y-b)-(c.y-b)*(a.x-d)}(e,d,c))var f=e,e=c,c=f;a[0]=e;a[1]=d;a[2]=c};return g}(); diff --git a/apps/authentiwatch/screenshot.png b/apps/authentiwatch/screenshot.png new file mode 100644 index 000000000..2a7bcbd9a Binary files /dev/null and b/apps/authentiwatch/screenshot.png differ diff --git a/apps/barclock/ChangeLog b/apps/barclock/ChangeLog index 9589a1902..316660fc6 100644 --- a/apps/barclock/ChangeLog +++ b/apps/barclock/ChangeLog @@ -5,3 +5,5 @@ 0.05: Clock does not start if app Languages is not installed 0.06: Improve accuracy 0.07: Update to use Bangle.setUI instead of setWatch +0.08: Use theme colors, Layout library +0.09: Fix time/date disappearing after fullscreen notification diff --git a/apps/barclock/clock-bar.js b/apps/barclock/clock-bar.js index 5069faa39..5d46a1cb4 100644 --- a/apps/barclock/clock-bar.js +++ b/apps/barclock/clock-bar.js @@ -3,167 +3,106 @@ * A simple digital clock showing seconds as a bar **/ // Check settings for what type our clock should be -const is12Hour = (require('Storage').readJSON('setting.json', 1) || {})['12hour'] -let locale = require('locale') +const is12Hour = (require("Storage").readJSON("setting.json", 1) || {})["12hour"]; +let locale = require("locale"); { // add some more info to locale - let date = new Date() - date.setFullYear(1111) - date.setMonth(1, 3) // februari: months are zero-indexed - const localized = locale.date(date, true) - locale.dayFirst = /3.*2/.test(localized) + let date = new Date(); + date.setFullYear(1111); + date.setMonth(1, 3); // februari: months are zero-indexed + const localized = locale.date(date, true); + locale.dayFirst = /3.*2/.test(localized); - locale.hasMeridian = false - if(typeof locale.meridian === 'function') { // function does not exists if languages app is not installed - locale.hasMeridian = (locale.meridian(date) !== '') + locale.hasMeridian = false; + if (typeof locale.meridian==="function") { // function does not exist if languages app is not installed + locale.hasMeridian = (locale.meridian(date)!==""); } - } -const screen = { - width: g.getWidth(), - height: g.getWidth(), - middle: g.getWidth() / 2, - center: g.getHeight() / 2, +Bangle.loadWidgets(); +function renderBar(l) { + if (!this.fraction) { + // zero-size fillRect stills draws one line of pixels, we don't want that + return; + } + const width = this.fraction*l.w; + g.fillRect(l.x, l.y, l.x+width-1, l.y+l.height-1); } -// hardcoded "settings" -const settings = { - time: { - color: -1, - font: '6x8', - size: (is12Hour && locale.hasMeridian) ? 6 : 8, - middle: screen.middle, - center: screen.center, - ampm: { - color: -1, - font: '6x8', - size: 2, +const Layout = require("Layout"); +const layout = new Layout({ + type: "v", c: [ + { + type: "h", c: [ + {id: "time", label: "88:88", type: "txt", font: "6x8:5", bgCol: g.theme.bg}, // size updated below + {id: "ampm", label: " ", type: "txt", font: "6x8:2", bgCol: g.theme.bg}, + ], }, - }, - date: { - color: -1, - font: 'Vector', - size: 20, - middle: screen.height - 20, // at bottom of screen - center: screen.center, - }, - bar: { - color: -1, - top: 155, // just below time - thickness: 6, // matches 24h time "pixel" size - }, + {id: "bar", type: "custom", fraction: 0, fillx: 1, height: 6, col: g.theme.fg2, render: renderBar}, + {height: 40}, + {id: "date", type: "txt", font: "10%", valign: 1}, + ], +}, {lazy: true}); +// adjustments based on screen size and whether we display am/pm +let thickness; // bar thickness, same as time font "pixel block" size +if (is12Hour) { + // Maximum font size = ( - ) / (5chars * 6px) + thickness = Math.floor((g.getWidth()-24)/(5*6)); +} else { + layout.ampm.label = ""; + thickness = Math.floor(g.getWidth()/(5*6)); } +layout.bar.height = thickness+1; +layout.time.font = "6x8:"+thickness; +layout.update(); -const SECONDS_PER_MINUTE = 60 - -const timeText = function (date) { +function timeText(date) { if (!is12Hour) { - return locale.time(date, true) + return locale.time(date, true); } - const date12 = new Date(date.getTime()) - const hours = date12.getHours() - if (hours === 0) { - date12.setHours(12) - } else if (hours > 12) { - date12.setHours(hours - 12) + const date12 = new Date(date.getTime()); + const hours = date12.getHours(); + if (hours===0) { + date12.setHours(12); + } else if (hours>12) { + date12.setHours(hours-12); } - return locale.time(date12, true) + return locale.time(date12, true); } -const ampmText = function (date) { - return is12Hour ? locale.meridian(date) : '' +function ampmText(date) { + return (is12Hour && locale.hasMeridian)? locale.meridian(date) : ""; } - -const dateText = function (date) { +function dateText(date) { const dayName = locale.dow(date, true), month = locale.month(date, true), - day = date.getDate() - const dayMonth = locale.dayFirst ? `${day} ${month}` : `${month} ${day}` - return `${dayName} ${dayMonth}` + day = date.getDate(); + const dayMonth = locale.dayFirst ? `${day} ${month}` : `${month} ${day}`; + return `${dayName} ${dayMonth}`; } -const drawDateTime = function (date) { - const t = settings.time - g.setColor(t.color) - g.setFont(t.font, t.size) - g.setFontAlign(0, 0) // centered - g.drawString(timeText(date), t.center, t.middle, true) - if (is12Hour && locale.hasMeridian) { - const a = settings.time.ampm - g.setColor(a.color) - g.setFont(a.font, a.size) - g.setFontAlign(1, -1) // right top - // at right edge of screen, aligned with time bottom - const left = screen.width - a.size * 2, - top = t.middle + t.size - a.size - g.drawString(ampmText(date), left, top, true) +draw = function draw(force) { + if (!Bangle.isLCDOn()) {return;} // no drawing, also no new update scheduled + const date = new Date(); + layout.time.label = timeText(date); + layout.ampm.label = ampmText(date); + layout.date.label = dateText(date); + const SECONDS_PER_MINUTE = 60; + layout.bar.fraction = date.getSeconds()/SECONDS_PER_MINUTE; + if (force) { + Bangle.drawWidgets(); + layout.forgetLazyState(); } + layout.render(); + // schedule update at start of next second + const millis = date.getMilliseconds(); + setTimeout(draw, 1000-millis); +}; - const d = settings.date - g.setColor(d.color) - g.setFont(d.font, d.size) - g.setFontAlign(0, 0) // centered - g.drawString(dateText(date), d.center, d.middle, true) -} - -const drawBar = function (date) { - const b = settings.bar - const seconds = date.getSeconds() - if (seconds === 0) { - // zero-size rect stills draws one line of pixels, we don't want that - return - } - const fraction = seconds / SECONDS_PER_MINUTE, - width = fraction * screen.width - g.setColor(b.color) - g.fillRect(0, b.top, width, b.top + b.thickness) -} - -const clearScreen = function () { - g.setColor(0) - const timeTop = settings.time.middle - (settings.time.size * 4) - g.fillRect(0, timeTop, screen.width, screen.height) -} - -let lastSeconds, tTick -const tick = function () { - g.reset() - const date = new Date() - const seconds = date.getSeconds() - if (lastSeconds > seconds) { - // new minute - clearScreen() - drawDateTime(date) - } - // the bar only gets larger, so drawing on top of the previous one is fine - drawBar(date) - lastSeconds = seconds - // schedule next update - const millis = date.getMilliseconds() - tTick = setTimeout(tick, 1000-millis) -} - -const start = function () { - lastSeconds = 99 // force redraw - tick() -} -const stop = function () { - if (tTick) { - clearTimeout(tTick) - tTick = undefined - } -} - -// clean app screen -g.clear() -Bangle.loadWidgets() -Bangle.drawWidgets() // Show launcher when button pressed Bangle.setUI("clock"); - -Bangle.on('lcdPower', function (on) { +Bangle.on("lcdPower", function(on) { if (on) { - start() - } else { - stop() + draw(true); } -}) -start() +}); +g.reset().clear(); +Bangle.drawWidgets(); +draw(); diff --git a/apps/barclock/screenshot.png b/apps/barclock/screenshot.png index d37ee9cae..9c2b7a50f 100644 Binary files a/apps/barclock/screenshot.png and b/apps/barclock/screenshot.png differ diff --git a/apps/barclock/screenshot_pm.png b/apps/barclock/screenshot_pm.png index a2a3f63fb..983f17aaa 100644 Binary files a/apps/barclock/screenshot_pm.png and b/apps/barclock/screenshot_pm.png differ diff --git a/apps/battleship/bangle1-battle-ship-screenshot.png b/apps/battleship/bangle1-battle-ship-screenshot.png new file mode 100644 index 000000000..56225b32d Binary files /dev/null and b/apps/battleship/bangle1-battle-ship-screenshot.png differ diff --git a/apps/bclock/bangle1-binary-clock-screenshot.png b/apps/bclock/bangle1-binary-clock-screenshot.png new file mode 100644 index 000000000..bc7ce611b Binary files /dev/null and b/apps/bclock/bangle1-binary-clock-screenshot.png differ diff --git a/apps/beebclock/bangle1-beeb-clock-screenshot.png b/apps/beebclock/bangle1-beeb-clock-screenshot.png new file mode 100644 index 000000000..00cb92e5c Binary files /dev/null and b/apps/beebclock/bangle1-beeb-clock-screenshot.png differ diff --git a/apps/berlinc/ChangeLog b/apps/berlinc/ChangeLog index 65ed0505f..9e9c1a6aa 100644 --- a/apps/berlinc/ChangeLog +++ b/apps/berlinc/ChangeLog @@ -1,3 +1,6 @@ 0.02: Modified for use with new bootloader and firmware 0.03: Shrinked size to avoid cut-off edges on the physical device. BTN3: show date. BTN1: show time in decimal. 0.04: Update to use Bangle.setUI instead of setWatch +0.05: Update *on* the minute rather than every 15 secs + Now show widgets + Make compatible with themes, and Bangle.js 2 diff --git a/apps/berlinc/berlin-clock-screenshot.png b/apps/berlinc/berlin-clock-screenshot.png new file mode 100644 index 000000000..92a4c7928 Binary files /dev/null and b/apps/berlinc/berlin-clock-screenshot.png differ diff --git a/apps/berlinc/berlin-clock.js b/apps/berlinc/berlin-clock.js index 144fa5ba7..0dd8ff8ee 100644 --- a/apps/berlinc/berlin-clock.js +++ b/apps/berlinc/berlin-clock.js @@ -1,7 +1,7 @@ // Berlin Clock see https://en.wikipedia.org/wiki/Mengenlehreuhr // https://github.com/eska-muc/BangleApps const fields = [4, 4, 11, 4]; -const offset = 20; +const offset = 24; const width = g.getWidth() - 2 * offset; const height = g.getHeight() - 2 * offset; const rowHeight = height / 4; @@ -10,11 +10,23 @@ var show_date = false; var show_time = false; var yy = 0; -rowlights = []; -time_digit = []; +var rowlights = []; +var time_digit = []; -function drawBerlinClock() { - g.clear(); +// timeout used to update every minute +var drawTimeout; + +// schedule a draw for the next minute +function queueDraw() { + if (drawTimeout) clearTimeout(drawTimeout); + drawTimeout = setTimeout(function() { + drawTimeout = undefined; + draw(); + }, 60000 - (Date.now() % 60000)); +} + +function draw() { + g.reset().clearRect(0,24,g.getWidth(),g.getHeight()); var now = new Date(); // show date below the clock @@ -24,8 +36,7 @@ function drawBerlinClock() { var day = now.getDate(); var dateString = `${yr}-${month < 10 ? '0' : ''}${month}-${day < 10 ? '0' : ''}${day}`; var strWidth = g.stringWidth(dateString); - g.setColor(1, 1, 1); - g.setFontAlign(-1,-1); + g.setColor(g.theme.fg).setFontAlign(-1,-1); g.drawString(dateString, ( g.getWidth() - strWidth ) / 2, height + offset + 4); } @@ -50,8 +61,7 @@ function drawBerlinClock() { x2 = (col + 1) * boxWidth + offset; y2 = (row + 1) * rowHeight + offset; - g.setColor(1, 1, 1); - g.drawRect(x1, y1, x2, y2); + g.setColor(g.theme.fg).drawRect(x1, y1, x2, y2); if (col < rowlights[row]) { if (row === 2) { if (((col + 1) % 3) === 0) { @@ -65,46 +75,42 @@ function drawBerlinClock() { g.fillRect(x1 + 2, y1 + 2, x2 - 2, y2 - 2); } if (row == 3 && show_time) { - g.setColor(1,1,1); - g.setFontAlign(0,0); + g.setColor(g.theme.fg).setFontAlign(0,0); g.drawString(time_digit[col],(x1+x2)/2,(y1+y2)/2); } } } + + queueDraw(); } function toggleDate() { show_date = ! show_date; - drawBerlinClock(); + draw(); } function toggleTime() { show_time = ! show_time; - drawBerlinClock(); + draw(); } -// special function to handle display switch on -Bangle.on('lcdPower', (on) => { - g.clear(); +// Stop updates when LCD is off, restart when on +Bangle.on('lcdPower',on=>{ if (on) { - Bangle.drawWidgets(); - // call your app function here - drawBerlinClock(); + draw(); // draw immediately, queue redraw + } else { // stop draw timer + if (drawTimeout) clearTimeout(drawTimeout); + drawTimeout = undefined; } }); -// refesh every 15 sec -setInterval(drawBerlinClock, 15E3); +// Show launcher when button pressed, handle up/down +Bangle.setUI("clockupdown", dir=> { + if (dir<0) toggleTime(); + if (dir>0) toggleDate(); +}); g.clear(); Bangle.loadWidgets(); Bangle.drawWidgets(); -drawBerlinClock(); -if (BTN3) { - // Toggle date display, when BTN3 is pressed - setWatch(toggleTime,BTN1, { repeat : true, edge: "falling"}); - // Toggle date display, when BTN3 is pressed - setWatch(toggleDate,BTN3, { repeat : true, edge: "falling"}); -} -// Show launcher when button pressed -Bangle.setUI("clock"); +draw(); diff --git a/apps/binwatch/Background176_center.img b/apps/binwatch/Background176_center.img new file mode 100644 index 000000000..4d4b587de Binary files /dev/null and b/apps/binwatch/Background176_center.img differ diff --git a/apps/binwatch/Background176_center.png b/apps/binwatch/Background176_center.png new file mode 100644 index 000000000..c8c1c0148 Binary files /dev/null and b/apps/binwatch/Background176_center.png differ diff --git a/apps/binwatch/Background240_center.img b/apps/binwatch/Background240_center.img new file mode 100644 index 000000000..abf95107d Binary files /dev/null and b/apps/binwatch/Background240_center.img differ diff --git a/apps/binwatch/Background240_center.png b/apps/binwatch/Background240_center.png new file mode 100644 index 000000000..c2b108f4d Binary files /dev/null and b/apps/binwatch/Background240_center.png differ diff --git a/apps/binwatch/ChangeLog b/apps/binwatch/ChangeLog new file mode 100644 index 000000000..1e54f489c --- /dev/null +++ b/apps/binwatch/ChangeLog @@ -0,0 +1,4 @@ +0.01: start of development +0.02: first running version for BangleJs2 +0.03: corrected icon, added screen shot, extended description +0.04: corrected format of background image (raw binary) diff --git a/apps/binwatch/README.md b/apps/binwatch/README.md new file mode 100644 index 000000000..52e868e21 --- /dev/null +++ b/apps/binwatch/README.md @@ -0,0 +1,47 @@ +# TheBinWatch + +Binary watch to train Your brain +Inspired by the LCD wrist watch from TecRAL from 1989 + +![](screenshot.png) +![](screenshot2.png) + +## Usage + +- swipe to left or right to change displayed text (date, time, ...) +- currently only available for BangeJs2 +- Widgets will not be shown +- If bluetooth connection is not established an icon will show up + +## How it works +Binary means that every digit can represent 2 states: 0 or 1, displayed by a black bar. + +The principle is the same like in out well known and daily used decimal system with values from 0 to 9: + +We start from the most right position with the least significant bit (binary digit) which can have the value 0 or 1 +The 2nd bit from the right can have the value 0 or 2 (sum of all bits to the right set to 1 plus 1). +This principle is valid for all the remaining bits. + +Mathematically spoken: the value of a digit is the base number of the system (10 for decimal or 2 for binary) +to the power of the position (from the right, starting with 0). +That means in numbers: 2^5 = 32, 2^4 = 16, 2^3 = 8, 2^2 = 4, 2^1 = 2, 2^0 = 1 + +The upper row represents the hours with 4 bit (2^4 = 16 possible values in total, 12 are used: 1 to 12), + the 2nd row represents the minutes with 6 bit (2^6 = 64 possible values in total, 60 are used: 0 to 59). +Same holds for the thrid row: 0-59 seconds + +To read the values of a row we summ up the vaules of set bits (black bars). +E.g. the picture above, 3rd row (seconds): +101001 +is 1 * 32 + 0 * 16 + 1 * 8 + 0 * 4 + 0 * 2 + 1 * 1 +is (only the '1' bit): 32 + 8 + 1 = 41 + +for the minutes we do the same: 32 + 1 = 33 +and the hours: 8 + 2 = 10 + +So the time is 10:33:41 (that's all) + +## TRAIN YOUR BRAIN + +Remark: more infos about the original watch including manual can be found here: +https://timeartpiece.com/watches/tech-ral-binary diff --git a/apps/binwatch/app-icon.js b/apps/binwatch/app-icon.js new file mode 100644 index 000000000..10d7e84e8 --- /dev/null +++ b/apps/binwatch/app-icon.js @@ -0,0 +1 @@ +require("heatshrink").decompress(atob("mEwwcCgEBkmSpICKCwQRRhMn/4AK+VACIU4A4PAz+27dt20ECI1IgEDCIOT+wRB2EkCIX+BwMCpE/8f+gmSvwRB2Mkz///v/5IRBpwRHwIRC5PzCIMSCIXwMQNP7dshMkyf/p+G/MgiV+CIPxCJFM8gRByf+CIIvBRIP7sCMCv/h8//C4P+g6ABCIdiCIVP/M///kFIPAj6iLCIYAOCPH4ibUC2zABdgW/8ARFUgILB2/8fwf/kB3BPobUD3/kz4pCTwMDCIrCBCIWTCINv/IREfAVJDoYpCv/JkmAv4RCYQYRM+ARCn4vCHYX+bQOQh4RBfAYRJyUBCI3/F4IFB/4RGdP4RHwDmC7/gmzaC//tbQWBR4UbfAWQgzIDfwVsR4QRCfAIRM/0DCIWSgDaDz4RBsDXDCIIdByVAfAb+CCIf/4AREjYRFgZ9D/D4DpEDfAT+Cj4REhoRJ7ARE/8PfAVJgbmDp/YWZHgv6zIkkSBYWB44sB/4CB/AREkESp4EBx4RBx0/CIPACAf5kECCIQAHPQIAB5MAgVJEYs4AwIjECIMACI0ACIv+pARCn5rDvwFDGoQRDhILDABHyoARBgKeCARQQBCKIA==")) \ No newline at end of file diff --git a/apps/binwatch/app.js b/apps/binwatch/app.js new file mode 100644 index 000000000..28d7a06a5 --- /dev/null +++ b/apps/binwatch/app.js @@ -0,0 +1,379 @@ +/*************************************************** +* BINARY WATCH +* for Bangle 1 / 2 +* inspired by RAL tec binary wrist watch +* +* TODO: +* - vibrate on full hour +* - +****************************************************/ + +/* reuqirements */ +require("Font7x11Numeric7Seg").add(Graphics); +require("Font5x7Numeric7Seg").add(Graphics); + +/* constants and definitions */ + +/* Bangle 2: 176 x 176 */ + +/* month images */ + +var month = [ + /* JAN */ {width : 53, height : 24, bpp : 1, buffer : require("heatshrink").decompress(atob("AAMf/0D8AFBkM/9EvwMAgcM/3B30YgE4uEOh354EB4eAuFz90Ah0cgeDx9wgFw8Ecjk7wEDw8A8AIBgEcnEHg4IBgFh4EYnEDHYMF/8AwBID/BODgN/4EgAoI0BgODwExGgkDzg0FAII0D88A8PAnAIBAIMOgPBBAPAiBpCgPAQIOAmFwg0P/B5BwcAiE/JYYAHA"))}, + /* FEB */ {width : 51, height : 24, bpp : 1, buffer : require("heatshrink").decompress(atob("v/8n/+g/+if/hP/wM/8c/4Of8Ez/FwgE4gEHgFOAYUA8Ed4ADBgEcge4AYMAgeAu4DCgFwhwQBEIMOgPcAYMAgPAjN/4G/8EX/kf/EP/kB/+F/8C/+Ar/xGQkBGTE7wADBMIMHMotMgEGv+A7/hEYOf/EH/hvBh6FBIIKYFA"))}, + /* MAR */ {width : 52, height : 23, bpp : 1, buffer : require("heatshrink").decompress(atob("v/4j/+gf/hP/gV/6FP/HP8kz/cGv8OgHDwFwuEE8McnEHg8A905BgcO8ecBiM4BgMwuEGoeEi/8gX/wE4gH/4Ef/AMFx0QDIcA8BADnEOgIzCufABgk+Bglx+AMEh+OBgdwvnghk4gcGgfsgFDgEQoEeSgvg"))}, + /* APR */ {width : 52, height : 23, bpp : 1, buffer : require("heatshrink").decompress(atob("v/4j/4gf/hP/oV/4FP/HP9kz/EGv8OgPDwEguEE8EcnEHg8A9wMCuFwhwMTgAMBmFwg1f+EX/kC/+D/8A//AJIIMFxwZCgFwgAmCgEHnBNDgFz4AMEnwMEuPwBgkPxwMDuF88EMBgMGgfsgFDRgNAjyUF8A="))}, + /* MAY */ {width : 52, height : 24, bpp : 1, buffer : require("heatshrink").decompress(atob("v/4j/+AoMJ/8Cv/QAwPP8kz/cEgEugHDwFwsEG8McnEHg8A905BgVwh3jzgMRnAMBmAMBoeEi/8BgNgnEA//Ah/4BgcB/+OiAZCBgPgIARTB90BGYUAhwMahk4gYMBpkAocAiEP+CSDIAOAAwYMB"))}, + /* JUN */ {width : 53, height : 24, bpp : 1, buffer : require("heatshrink").decompress(atob("AAcD8ADBkMAhEvwIJBhkA4O+jEAnFwh0O/PAgPDwFwufugEOjkDwePuEAuHgjkcneAgeHgHgBAMAjk4g8HBAMAsPAjE4gY7BggCBwBPLkACBGgMBweAmI0EgecGgoBBGgfngHh4E4BAIBBh0B4IIB4EQmEEBAPA/0An5qBg0P/ED/xNBiAKBh6PCAAw="))}, + /* JUL */ {width : 53, height : 24, bpp : 1, buffer : require("heatshrink").decompress(atob("AA8hgEImAFBgcMgHB4AGBnFwh0OAoMB4eAuFwAwMOjkDweAAwNw8EcjggCw8A8HgAwMcnEHg40CsPAjE4AwUEAQIgCABMgGgcBGgMBGgo/BGggKBGgYBB8PAnA0BBQMOgJpC4EQmEENIX+gE/wFn/EP/ED/0Cv/gBQMP8EP/5QGA"))}, + /* AUG */ {width : 52, height : 24, bpp : 1, buffer : require("heatshrink").decompress(atob("n/8AocE/+gAgMP/1n+0QgGA//HgHhwEYl/wuEOjkDw8Ag4MB4E4uEABilhBgcv/EcgOCgEB/+AwBBB/AMBAgMCj/ngFgAwNw/wmCgImBBgIzDhwzFBikGhkBgUAs0AkEf4EH+A3Bgf+gBLBAwIMD"))}, + /* SEP */ {width : 51, height : 23, bpp : 1, buffer : require("heatshrink").decompress(atob("h/4j//g/+gf/wn/4M/8ABB5/wmf4mEAjkAg8Ap0AgeAgHgjvAgFwBwMD3EAhwOCu8AgIOCh3ggE4BwMB7gjCBwMYv/Ar/wi/8j/8IYMB/+BIYIODDwIyCLIMHGQYGB8JBDB4IyCAoMDw5BDB4JBDgEEMoZ6Cn/A8A6B8FP/kYgEf/EH/4eCA"))}, + /* OCT */ {width : 50, height : 23, bpp : 1, buffer : require("heatshrink").decompress(atob("h/gg/+j//w/8gf/h//+H+gF/wP//OAkHADAXgjlwAoU4g8cAgMYh0B44pCgeAuIYBgfADAnwnEDDAUcghCDgRMIsACBkAYFGKZKDngYFgJjBwAYCPgX4DAMHPgQYBgB8C8EGgAA="))}, + /* NOV */ {width : 51, height : 24, bpp : 1, buffer : require("heatshrink").decompress(atob("vkAgf4AoMX4GA/+ABIN8mEP8EggP350MgMGgF+vvDwFw8Ef4+4uEOjgiBu8OgIOBv8A8PAnFwEQMcnEHBwP8gOHgFh4EdHYNAgEQgJLFggFEhPAjFwg0cg4jDGQPnGQk8GQkPI4IyB8PDKwYOB+BWBMoMHnkOgHAn+A98BwEIh/4jnAHgX+gaGBAAcggAA=="))}, + /* DEC */ {width : 49, height : 23, bpp : 1, buffer : require("heatshrink").decompress(atob("v/gj//gP/5/4iYFC2f4hn/CAOcgMHgEBwEOgPDwEB4AJB8PAgHggeAuHggFwBoM4uEAnANBjgDBjgNBgwDBh0AiEAgowBAAQ6BwEAggFBv/BwAwBsIwWhwwDnEHAYIiBjhhDgEN/0Dn/Aj/hO4M/+Ef/JABv/8g/+A=="))}, + /* MAI */ {width : 44, height : 23, bpp : 1, buffer : require("heatshrink").decompress(atob("v/4j/+gEJ/8Cv/QgnP8kz/cA50A4eAuEc8McnEHgPOnIKD8ecBR04BQMwhlDwkX/kAoE4gH/4EABQlOiAVD8A2EgIrDBS0MnEDgHMGQMAiEEPwo="))}, + /* OKT */ {width : 51, height : 24, bpp : 1, buffer : require("heatshrink").decompress(atob("g/wAQMP//B/8DgPh//8j/AuF8n//jECh0fDAUA8PH4AGB8EcnIhBsEcgeHvkAj0DwFw98AgYjBh0dDAN4h0A4eAEgQDBl/4gFAE4MD/5OE3/ggIyBhk4gcAuAyCBIIyDIIIyDAgOAGQMBGQNwh8B4E4BwMB8BlCBIM8gF/AgMYg+Aj/wmA3B+EB/hBChiYGA"))}, + /* DEZ */ {width : 51, height : 23, bpp : 1, buffer : require("heatshrink").decompress(atob("n/wh//w//xP/gV/8F//Of4Fn/EH/04gUODAUHgHh4AFBnHgjk4BYUcgeHAoMB8eAuHgAwN4uEOjgFBh4jB4eAgED4ADBl/4gFwB4MD/4DBgQCB3/gC4PghgyBgPAGQl4gYyDjwgBGQQrBh0BGQVwDQM4F4MMLIJlEg3/gOfPAPgn/gk/+j/+h/8IoPh//gA="))} +]; + +var imgSquid = {width : 88, height : 26, bpp : 1, buffer : require("heatshrink").decompress(atob("gE/AYUYgEH////0B//gBQM8BQgDB/AKHh/A/gKBvwKBAgMOj8AnwKHBAIMBgH/BQgmCAoPnBQl4AoOAgPnwAKDuEAgYKB4YKIgfD4AKDMAMB4EDwIKIg+B8AKIgAKIh8A+AKHh0AuAKHj0AvBMG4EcgE4K458Bnh4HnEAjiOHBwMeBQpKBEgMOXQ/wBwIKDaAZQBg4KDcwT0BAAOHfgoKHgE/wDaBAAL8DA="))}; + +var imgNoBT = {width : 20, height : 20, bpp : 3, transparent : 0, buffer : require("heatshrink").decompress(atob("///8mSpM/AoP/yUT/8yuYGB5AMB/1MyYUBkmT/P85MP+USBwOT8mQ/8JBwXyoVnyGSv8//Mhk14pMn//8BYNMwmSp/+pFJkgyBDoMkkgODpOSuQOE5M/KgIOCsmfz/JknPhMyof5n+Ss/wzMhn4OBk1+smQLoWTn/mHAM/+VJz4KBwhZBEYJ/CkM8yZVBAAQxBCgP/A="))}; + +const V2_X_STEP = 26; +const V2_Y_STEP = 34; + +const V2_TIME_Y_OFFSET = 8; +const V2_HX = 36; +const V2_HY = 0 + V2_TIME_Y_OFFSET; +const V2_MX = 10; +const V2_MY = 51 + V2_TIME_Y_OFFSET; +const V2_SX = 10; +const V2_SY = 95 + V2_TIME_Y_OFFSET; +const V2_BT_X = 137; /* 145, 35 */ +const V2_BT_Y = 20; +const V2_DX = 100; +const V2_DY = 141; + +const V2_BAT_POS_X = 21; +const V2_BAT_POS_Y = 40; +const V2_BAT_SIZE_X = 13; +const V2_BAT_SIZE_Y = 2; + +const V2_SCREEN_SIZE_X = 176; +const V2_SCREEN_SIZE_Y = 176; +const V2_BACKGROUND_IMAGE = "binwatch.bg176.img"; +const V2_BG_COLOR = 0; +const V2_FG_COLOR = 1; + +/* Bangle 1: 240 x 240 */ + +const V1_X_STEP = 35; +const V1_Y_STEP = 46; + +const V1_TIME_Y_OFFSET = 41; +const V1_HX = 48; +const V1_HY = 0 + V1_TIME_Y_OFFSET; +const V1_MX = 14; +const V1_MY = 55 + V1_TIME_Y_OFFSET; +const V1_SX = 14; +const V1_SY = 110 + V1_TIME_Y_OFFSET; +const V1_BT_X = 41; +const V1_BT_Y = 14; +//var BT_X = 20, BT_Y = 14; +const V1_DX = 160; +const V1_DY = 205; + +const V1_BAT_POS_X = 175; +const V1_BAT_POS_Y = 21; +const V1_BAT_SIZE_X = 3; +const V1_BAT_SIZE_Y = 5; +const V1_SCREEN_SIZE_X = 240; +const V1_SCREEN_SIZE_Y = 240; +const V1_BACKGROUND_IMAGE = "binwatch.bg240.img"; +const V1_BG_COLOR = 1; +const V1_FG_COLOR = 0; + +/* runtime settings */ + +var x_step = 0; +var y_step = 0; + +var time_y_offset = 0; +var hx = 0, hy = 0; +var mx = 0, my = 0; +var sx = 0, sy = 0; +var bt_x = 0, bt_y = 0; +var dx = 0, dy = 0; + +var bat_pos_x, bat_pos_y, bat_size_x, bat_size_y; +var backgroundImage = ""; +var screen_size_x = 0; +var screen_size_y = 0; +var bg_color = 0; +var fg_color = 1; + +/* global variables */ + +var showDateTime = 2; /* show noting, time or date */ +var cg; +var cgimg; + +/* local functions */ + +/** + * function drawSquare(...) + * + * go through all bits and draw a square if a bit + * is set. So we get the binary representation + * of the value + * used to draw block for hours, mintutes, seconds, date + * + * @param gfx: graphic object to use + * @param x: x-coordinate of 1st the square + * @param y: y-coordinate of 1st the square + * @param data: data conatining the bit information + * @param numOfBits: number of bits to draw +*/ +function drawSquare(gfx, x, y, data, numOfBits) { + + for(i = numOfBits; i > 0 ; i--) { + if( (data & 1) != 0) { + gfx.fillRect(x + (i - 1) * x_step, y, + x + i * x_step , y + y_step); + } + data >>= 1; /* shift one bit right */ + } +} + +/** + * function drawBinary(...) + * draw the time in binary format + * default display for geeks and real men + + * @param h: hours + * @param m: minutes + * @param s: seconds +*/ +function drawBinary(gfx, hour, minute, second) { + gfx.clear(0); + + if(hour > 12) { + hour -= 12; /* we use for bit for hours so we only display 12 hours*/ + } + drawSquare(gfx, hx, hy, hour, 4); /* set hour */ + drawSquare(gfx, mx, my, minute, 6); /* set minute */ + drawSquare(gfx, sx, sy, second, 6); /* set second */ +} + +/** + * function drawTime(...) + * show time under the graphic + * for wimps and commies + * + * @param h: hours + * @param m: minutes + * @param s: seconds +*/ + +function drawTime(gfx, h, m, s) { + var time = (" "+h).substr(-2) + ":" + ("0"+m).substr(-2)+ ":" + ("0"+s).substr(-2); + + gfx.setFontAlign(0,-1); // align right bottom + gfx.setFont("7x11Numeric7Seg", 2); + gfx.drawString(time, gfx.getWidth() / 2, dy + 1, false /*clear background*/); +} + +/** + * function drawDate(...) + * show date under the graphic + * (optionally) + * + * @param gfx: graphic object to use + * @param d: date object +*/ +var vMonth = 0; +function drawDate(gfx, d) { + var dateString = "" + + ("0" + d.getDate()).substr(-2) +// + " " +// + ("0" + d.getMonth()).substr(-2) +// + " " +// + ("0" + d.getFullYear()).substr(-2) + ; + + gfx.setFontAlign(-1,-1); // align right bottom + gfx.setFont("7x11Numeric7Seg",2); /* draw the current time font */ + gfx.drawString(dateString, dx, dy + 1, false /* don't clear background*/); + gfx.drawImage(month[d.getMonth()], 40, dy); +} + +function toggleDateTime() { + showDateTime++; + if(showDateTime > 2){ + showDateTime = 0; + } +} + +function updateVTime() { + vMonth++; + if(vMonth >= 12 + 3) { + vMonth = 0; + } + second++; + if(second > 59) { + second = 0; + minute++; + if(minute > 59) { + minute = 0; + hour++; + if(hour > 12) { + hour = 0; + } + } + } +} + +/** + * function drawBattery(...) + * fill the battery symbol with blocks + * according to the battery level + * + * @param gfx: graphic object + * @param level: current battery level +*/ +function drawBattery(gfx, level) { + var pos_y = bat_pos_y - 1; + var stepLevel = Math.round((level + 10) / 20); + + for(i = 0; i < stepLevel; i++) { + pos_y -= bat_size_y + 2; + gfx.fillRect(bat_pos_x, pos_y, + bat_pos_x + bat_size_x, pos_y + bat_size_y); + } +} + +/** + * function drawBattery(...) + * fill the battery symbol with blocks + * according to the battery level + * + * @param gfx: graphic object + * @param level: current battery level +*/ +function drawBT(gfx, status) { + if(!status) { + gfx.drawImage(imgNoBT, bt_x, bt_y); + } +} +function setRuntimeValues(resolution) { + if(240 == resolution) { + x_step = V1_X_STEP; + y_step = V1_Y_STEP; + + time_y_offset = V1_TIME_Y_OFFSET; + hx = V1_HX; + hy = V1_HY; + mx = V1_MX; + my = V1_MY; + sx = V1_SX; + sy = V1_SY; + bt_x = V1_BT_X; + bt_y = V1_BT_Y; + dx = V1_DX; + dy = V1_DY; + + screen_size_x = V1_SCREEN_SIZE_X; + screen_size_y = V1_SCREEN_SIZE_Y; + backgroundImage = V1_BACKGROUND_IMAGE; + + bat_pos_x = V1_BAT_POS_X; + bat_pos_y = V1_BAT_POS_Y; + bat_size_x = V1_BAT_SIZE_X; + bat_size_y = V1_BAT_SIZE_Y; + + setWatch(toggleDateTime, BTN1, { repeat : true, edge: "falling"}); + + } else { + x_step = V2_X_STEP; + y_step = V2_Y_STEP; + + time_y_offset = V2_TIME_Y_OFFSET; + + hx = V2_HX; + hy = V2_HY; + mx = V2_MX; + my = V2_MY; + sx = V2_SX; + sy = V2_SY; + + bt_x = V2_BT_X; + bt_y = V2_BT_Y; + + dx = V2_DX; + dy = V2_DY; + + screen_size_x = V2_SCREEN_SIZE_X; + screen_size_y = V2_SCREEN_SIZE_Y; + backgroundImage = V2_BACKGROUND_IMAGE; + + bat_pos_x = V2_BAT_POS_X; + bat_pos_y = V2_BAT_POS_Y; + bat_size_x = V2_BAT_SIZE_X; + bat_size_y = V2_BAT_SIZE_Y; + + Bangle.on('swipe', function(direction) { toggleDateTime(direction);}); +} + cg = Graphics.createArrayBuffer( + screen_size_x,screen_size_y, 1, {msb:true}); + + cgimg = {width:screen_size_x, height:screen_size_y, bpp:1, + transparent:0, buffer:cg.buffer}; + +} +var hour = 0, minute = 1, second = 50; +var batVLevel = 20; + + +function draw() { + var d = new Date(); + var h = d.getHours(), m = d.getMinutes(), s = d.getSeconds(); + g.reset(); + + drawBinary(cg, h, m, s); + + switch(showDateTime) { + case 1: + drawTime(cg, h, m, s); + break; + case 2: + drawDate(cg, d); + break; + default: + cg.drawImage(imgSquid, cg.getWidth() / 2 - 44, dy); + } + drawBattery(cg, /*batVLevel*/ E.getBattery()); + + batVLevel += 2; + if(batVLevel > 100) { + batVLevel = 0; + } + updateVTime(); + g.clear(); + g.drawImages([{image:cgimg}, + {image:require("Storage").read(backgroundImage)} + ]); + drawBT(g, NRF.getSecurityStatus().connected); +// Bangle.drawWidgets(); + const millis = d.getMilliseconds(); + setTimeout(draw, 1000-millis); + // Bangle.loadWidgets(); +} + +// Show launcher when button pressed +Bangle.setUI("clock"); +setRuntimeValues(g.getWidth()); +g.reset().clear(); +Bangle.loadWidgets(); +Bangle.drawWidgets(); +draw(); diff --git a/apps/binwatch/app.png b/apps/binwatch/app.png new file mode 100644 index 000000000..e1a0c88ff Binary files /dev/null and b/apps/binwatch/app.png differ diff --git a/apps/binwatch/bt-icon.png b/apps/binwatch/bt-icon.png new file mode 100644 index 000000000..cba9b5973 Binary files /dev/null and b/apps/binwatch/bt-icon.png differ diff --git a/apps/binwatch/screenshot.png b/apps/binwatch/screenshot.png new file mode 100644 index 000000000..ebab4670e Binary files /dev/null and b/apps/binwatch/screenshot.png differ diff --git a/apps/binwatch/screenshot2.png b/apps/binwatch/screenshot2.png new file mode 100644 index 000000000..fa171d253 Binary files /dev/null and b/apps/binwatch/screenshot2.png differ diff --git a/apps/blackjack/bangle1-black-jack-game-screenshot.png b/apps/blackjack/bangle1-black-jack-game-screenshot.png new file mode 100644 index 000000000..532b784f4 Binary files /dev/null and b/apps/blackjack/bangle1-black-jack-game-screenshot.png differ diff --git a/apps/blobclk/bangle1-large-digit-blob-clock-screenshot.png b/apps/blobclk/bangle1-large-digit-blob-clock-screenshot.png new file mode 100644 index 000000000..fcad01e50 Binary files /dev/null and b/apps/blobclk/bangle1-large-digit-blob-clock-screenshot.png differ diff --git a/apps/blobclk/bangle2-large-digit-blob-clock-screenshot.png b/apps/blobclk/bangle2-large-digit-blob-clock-screenshot.png new file mode 100644 index 000000000..5cf48bda7 Binary files /dev/null and b/apps/blobclk/bangle2-large-digit-blob-clock-screenshot.png differ diff --git a/apps/boldclk/README.md b/apps/boldclk/README.md new file mode 100644 index 000000000..0e7865b99 --- /dev/null +++ b/apps/boldclk/README.md @@ -0,0 +1,4 @@ +# Bold Clock + +![](screenshot_bold.png) + diff --git a/apps/boldclk/screenshot_bold.png b/apps/boldclk/screenshot_bold.png new file mode 100644 index 000000000..4024fca40 Binary files /dev/null and b/apps/boldclk/screenshot_bold.png differ diff --git a/apps/boot/ChangeLog b/apps/boot/ChangeLog index d3ec47139..98f80efd9 100644 --- a/apps/boot/ChangeLog +++ b/apps/boot/ChangeLog @@ -29,3 +29,14 @@ 0.28: Fix double clock load after settings are changed 0.29: Update boot0 to avoid code block (faster execution) Fix issues where 'Uncaught Error: Function not found' could happen with multiple .boot.js +0.30: Remove 'Get GPS time' at boot. Latest firmwares keep time through reboots, so this is not needed now +0.31: Add polyfills for g.wrapString, g.imageMetrics, g.stringMetrics +0.32: Fix single quote error in g.wrapString polyfill + improve g.stringMetrics polyfill + Fix issue where re-running bootupdate could disable existing polyfills +0.33: Add E.showScroller polyfill +0.34: Use Storage.hash if available + Rearrange NRF.setServices to allow .boot.js files to add services (eg ANCS) +0.35: Add Bangle.appRect polyfill + Don't set beep vibration up on Bangle.js 2 (built in) +0.36: Add comments to .boot0 to make debugging a bit easier diff --git a/apps/boot/bootloader.js b/apps/boot/bootloader.js index 138258c5a..3cf885ac9 100644 --- a/apps/boot/bootloader.js +++ b/apps/boot/bootloader.js @@ -15,25 +15,5 @@ if (!clockApp) { clockApp = require("Storage").read(clockApp.src); } if (!clockApp) clockApp=`E.showMessage("No Clock Found");setWatch(()=>{Bangle.showLauncher();}, BTN2, {repeat:false,edge:"falling"});`; -// check to see if our clock is wrong - if it is use GPS time -if ((new Date()).getFullYear()<2000) { - E.showMessage("Searching for\nGPS time"); - Bangle.on("GPS",function cb(g) { - Bangle.setGPSPower(0); - Bangle.removeListener("GPS",cb); - if (!g.time || (g.time.getFullYear()<2000) || - (g.time.getFullYear()>2200)) { - // GPS receiver's time not set - just boot clock anyway - eval(clockApp); - delete clockApp; - return; - } - // We have a GPS time. Set time and reboot (to load alarms properly) - setTime(g.time.getTime()/1000); - load(); - }); - Bangle.setGPSPower(1); -} else { - eval(clockApp); - delete clockApp; -} +eval(clockApp); +delete clockApp; diff --git a/apps/boot/bootupdate.js b/apps/boot/bootupdate.js index 199bff6e3..d642426c2 100644 --- a/apps/boot/bootupdate.js +++ b/apps/boot/bootupdate.js @@ -3,17 +3,24 @@ recalculates, but this avoids us doing a whole bunch of reconfiguration most of the time. */ E.showMessage("Updating boot0..."); var s = require('Storage').readJSON('setting.json',1)||{}; -var isB2 = process.env.HWVERSION; // Is Bangle.js 2 +var BANGLEJS2 = process.env.HWVERSION==2; // Is Bangle.js 2 var boot = ""; -var CRC = E.CRC32(require('Storage').read('setting.json'))+E.CRC32(require('Storage').list(/\.boot\.js/)); -boot += `if (E.CRC32(require('Storage').read('setting.json'))+E.CRC32(require('Storage').list(/\.boot\.js/))!=${CRC}) { eval(require('Storage').read('bootupdate.js')); throw "Storage Updated!"}\n`; +if (require('Storage').hash) { // new in 2v11 - helps ensure files haven't changed + var CRC = E.CRC32(require('Storage').read('setting.json'))+require('Storage').hash(/\.boot\.js/); + boot += `if (E.CRC32(require('Storage').read('setting.json'))+require('Storage').hash(/\\.boot\\.js/)!=${CRC})`; +} else { + var CRC = E.CRC32(require('Storage').read('setting.json'))+E.CRC32(require('Storage').list(/\.boot\.js/)); + boot += `if (E.CRC32(require('Storage').read('setting.json'))+E.CRC32(require('Storage').list(/\\.boot\\.js/))!=${CRC})`; +} +boot += ` { eval(require('Storage').read('bootupdate.js')); throw "Storage Updated!"}\n`; boot += `E.setFlags({pretokenise:1});\n`; +boot += `var bleServices = {}, bleServiceOptions = { uart : true};\n`; if (s.ble!==false) { if (s.HID) { // Human interface device if (s.HID=="joy") boot += `Bangle.HID = E.toUint8Array(atob("BQEJBKEBCQGhAAUJGQEpBRUAJQGVBXUBgQKVA3UBgQMFAQkwCTEVgSV/dQiVAoECwMA="));`; else if (s.HID=="kb") boot += `Bangle.HID = E.toUint8Array(atob("BQEJBqEBBQcZ4CnnFQAlAXUBlQiBApUBdQiBAZUFdQEFCBkBKQWRApUBdQORAZUGdQgVACVzBQcZAClzgQAJBRUAJv8AdQiVArECwA=="));` else /*kbmedia*/boot += `Bangle.HID = E.toUint8Array(atob("BQEJBqEBhQIFBxngKecVACUBdQGVCIEClQF1CIEBlQV1AQUIGQEpBZEClQF1A5EBlQZ1CBUAJXMFBxkAKXOBAAkFFQAm/wB1CJUCsQLABQwJAaEBhQEVACUBdQGVAQm1gQIJtoECCbeBAgm4gQIJzYECCeKBAgnpgQIJ6oECwA=="));`; - boot += `NRF.setServices({}, {uart:true, hid:Bangle.HID});\n`; + boot += `bleServiceOptions.hid=Bangle.HID;\n`; } } if (s.blerepl===false) { // If not programmable, force terminal off Bluetooth @@ -48,7 +55,7 @@ boot += `E.setTimeZone(${s.timezone});`; if (!Bangle.F_BEEPSET) { if (!s.vibrate) boot += `Bangle.buzz=Promise.resolve;\n` if (s.beep===false) boot += `Bangle.beep=Promise.resolve;\n` - else if (s.beep=="vib") boot += `Bangle.beep = function (time, freq) { + else if (s.beep=="vib" && !BANGLEJS2) boot += `Bangle.beep = function (time, freq) { return new Promise(function(resolve) { if ((0|freq)<=0) freq=4000; if ((0|time)<=0) time=200; @@ -81,9 +88,11 @@ if (s.quiet && s.qmTimeout) boot+=`Bangle.setLCDTimeout(${s.qmTimeout});\n`; if (s.passkey!==undefined && s.passkey.length==6) boot+=`NRF.setSecurity({passkey:${s.passkey}, mitm:1, display:1});\n`; if (s.whitelist) boot+=`NRF.on('connect', function(addr) { if (!(require('Storage').readJSON('setting.json',1)||{}).whitelist.includes(addr)) NRF.disconnect(); });\n`; // Pre-2v10 firmwares without a theme/setUI +delete g.theme; // deleting stops us getting confused by our own decl. builtins can't be deleted if (!g.theme) { boot += `g.theme={fg:-1,bg:0,fg2:-1,bg2:7,fgH:-1,bgH:0x02F7,dark:true};\n`; } +delete Bangle.setUI; // deleting stops us getting confused by our own decl. builtins can't be deleted if (!Bangle.setUI) { // assume this is just for F18 - Q3 should already have it boot += `Bangle.setUI=function(mode, cb) { if (Bangle.btnWatches) { @@ -94,7 +103,7 @@ if (Bangle.swipeHandler) { Bangle.removeListener("swipe", Bangle.swipeHandler); delete Bangle.swipeHandler; } -if (Bangle.touchandler) { +if (Bangle.touchHandler) { Bangle.removeListener("touch", Bangle.touchHandler); delete Bangle.touchHandler; } @@ -131,13 +140,66 @@ else if (mode=="updown") { throw new Error("Unknown UI mode"); };\n`; } +delete E.showScroller; // deleting stops us getting confused by our own decl. builtins can't be deleted +if (!E.showScroller) { // added in 2v11 - this is a limited functionality polyfill + boot += `E.showScroller = (function(a){function n(){g.reset();b>=l+c&&(c=1+b-l);bm||m>=a.c)break;var f=24+d*a.h;a.draw(m,{x:0,y:f,w:h,h:a.h});d+c==b&&g.setColor(g.theme.fg).drawRect(0,f,h-1,f+a.h-1).drawRect(1,f+1,h-2,f+a.h-2)}g.setColor(c?g.theme.fg:g.theme.bg);g.fillPoly([e,6,e-14,20,e+14,20]);g.setColor(a.c>l+c?g.theme.fg:g.theme.bg);g.fillPoly([e,k-7,e-14,k-21,e+14,k-21])}if(!a)return Bangle.setUI();var b=0,c=0,h=g.getWidth(), +k=g.getHeight(),e=h/2,l=Math.floor((k-48)/a.h);g.reset().clearRect(0,24,h-1,k-1);n();Bangle.setUI("updown",d=>{d?(b+=d,0>b&&(b=a.c-1),b>=a.c&&(b=0),n()):a.select(b)})});\n`; +} +delete g.imageMetrics; // deleting stops us getting confused by our own decl. builtins can't be deleted +if (!g.imageMetrics) { // added in 2v11 - this is a limited functionality polyfill + boot += `Graphics.prototype.imageMetrics=function(src) { + if (src[0]) return {width:src[0],height:src[1]}; + else if ('object'==typeof src) return { + width:("width" in src) ? src.width : src.getWidth(), + height:("height" in src) ? src.height : src.getHeight()}; + var im = E.toString(src); + return {width:im.charCodeAt(0), height:im.charCodeAt(1)}; +};\n`; +} +delete g.stringMetrics; // deleting stops us getting confused by our own decl. builtins can't be deleted +if (!g.stringMetrics) { // added in 2v11 - this is a limited functionality polyfill + boot += `Graphics.prototype.stringMetrics=function(txt) { + txt = txt.toString().split("\\n"); + return {width:Math.max.apply(null,txt.map(x=>g.stringWidth(x))), height:this.getFontHeight()*txt.length}; +};\n`; +} +delete g.wrapString; // deleting stops us getting confused by our own decl. builtins can't be deleted +if (!g.wrapString) { // added in 2v11 - this is a limited functionality polyfill + boot += `Graphics.prototype.wrapString=function(str, maxWidth) { + var lines = []; + for (var unwrappedLine of str.split("\\n")) { + var words = unwrappedLine.split(" "); + var line = words.shift(); + for (var word of words) { + if (g.stringWidth(line + " " + word) > maxWidth) { + lines.push(line); + line = word; + } else { + line += " " + word; + } + } + lines.push(line); + } + return lines; +};\n`; +} +delete Bangle.appRect; // deleting stops us getting confused by our own decl. builtins can't be deleted +if (!Bangle.appRect) { // added in 2v11 - polyfill for older firmwares + boot += `Bangle.appRect = ((y,w,h)=>({x:0,y:0,w:w,h:h,x2:w-1,y2:h-1}))(g.getWidth(),g.getHeight()); + (lw=>{ Bangle.loadWidgets = () => { lw(); Bangle.appRect = ((y,w,h)=>({x:0,y:y,w:w,h:h-y,x2:w-1,y2:h-(1+h)}))(global.WIDGETS?24:0,g.getWidth(),g.getHeight()); }; })(Bangle.loadWidgets);\n`; +} + // Append *.boot.js files +// These could change bleServices/bleServiceOptions if needed require('Storage').list(/\.boot\.js/).forEach(bootFile=>{ // we add a semicolon so if the file is wrapped in (function(){ ... }() // with no semicolon we don't end up with (function(){ ... }()(function(){ ... }() // which would cause an error! - boot += require('Storage').read(bootFile)+";\n"; + boot += "//"+bootFile+"\n"+require('Storage').read(bootFile)+";\n"; }); +// update ble +boot += `NRF.setServices(bleServices, bleServiceOptions);delete bleServices,bleServiceOptions;\n`; +// write file require('Storage').write('.boot0',boot); delete boot; E.showMessage("Reloading..."); diff --git a/apps/bthrm/ChangeLog b/apps/bthrm/ChangeLog new file mode 100644 index 000000000..5560f00bc --- /dev/null +++ b/apps/bthrm/ChangeLog @@ -0,0 +1 @@ +0.01: New App! diff --git a/apps/bthrm/README.md b/apps/bthrm/README.md new file mode 100644 index 000000000..f0c7775c2 --- /dev/null +++ b/apps/bthrm/README.md @@ -0,0 +1,45 @@ +# Bluetooth Heart Rate Monitor + +When this app is installed it overrides Bangle.js's build in heart rate monitor with an external Bluetooth one. + +HRM is requested it searches on Bluetooth for a heart rate monitor, connects, and sends data back using the `Bangle.on('HRM'` event as if it came from the on board monitor. + +This means it's compatible with many Bangle.js apps including: + +* [Heart Rate Widget](https://banglejs.com/apps/#widhrt) +* [Heart Rate Recorder](https://banglejs.com/apps/#heart) + +It it NOT COMPATIBLE with [Heart Rate Monitor](https://banglejs.com/apps/#hrm) +as that requires live sensor data (rather than just BPM readings). + +## Usage + +Just install the app, then install an app that uses the heart rate monitor. + +Once installed it'll automatically try and connect to the first bluetooth +heart rate monitor it finds. + +**To disable this and return to normal HRM, uninstall the app** + +## Compatible Heart Rate Monitors + +This works with any heart rate monitor providing the standard Bluetooth +Heart Rate Service (`180D`) and characteristic (`2A37`). + +So far it has been tested on: + +* CooSpo Bluetooth Heart Rate Monitor + +## Internals + +This replaces `Bangle.setHRMPower` with its own implementation. + +## TODO + +* Maybe a `bthrm.settings.js` and app (that calls it) to enable it to be turned on and off +* A widget to show connection state? +* Specify a specific device by address? + +## Creator + +Gordon Williams diff --git a/apps/bthrm/app-icon.js b/apps/bthrm/app-icon.js new file mode 100644 index 000000000..04a5ee610 --- /dev/null +++ b/apps/bthrm/app-icon.js @@ -0,0 +1 @@ +require("heatshrink").decompress(atob("mEw4UA///g3yy06AoIZNitUAg8AgtVqtQAgoRCAwITBAggABAoIABAgsAgIGDoIEDoApDAAwwBFIV1BYo1E+oLTAgQLGJon9BZNXBatdBYRVFBYN/r9fHoxTBBYYlEL4QLFq/a1WUgE///fr4xBv/+1Wq1EAh/3/tX6/fv/6BYOqwCzBBYf9tWq9QLF79X+oLBDIOgKgILEEIIxBGAMVNAP/BYf/BYUFBYJSB6wLC9QLBeAQLBqwLCGAL9BBYmr9X+GAILBbIIlBBYP6/wwBBYMFBYZGB/4XDGAILD34vEcwYLB15HBBYYkBBYWrFwILDKoRTCVIQLCEgQXIEgVaF44YCoRHHAAMUgQuBNgILFgECO4W/BZCPFBYinGBY6/CAArXFBY7vDAAsq1QuB0ALIOwOABY0KEgJGGGAguHDAYDBA==")) diff --git a/apps/bthrm/app.png b/apps/bthrm/app.png new file mode 100644 index 000000000..40c2ab024 Binary files /dev/null and b/apps/bthrm/app.png differ diff --git a/apps/bthrm/boot.js b/apps/bthrm/boot.js new file mode 100644 index 000000000..88e574480 --- /dev/null +++ b/apps/bthrm/boot.js @@ -0,0 +1,79 @@ +(function() { + var log = function() {};//print + var gatt; + var status; + + Bangle.isHRMOn = function() { + return (status=="searching" || status=="connecting") || (gatt!==undefined); + } + Bangle.setHRMPower = function(isOn, app) { + // Do app power handling + if (!app) app="?"; + log("setHRMPower ->", isOn, app); + if (Bangle._PWR===undefined) Bangle._PWR={}; + if (Bangle._PWR.HRM===undefined) Bangle._PWR.HRM=[]; + if (isOn && !Bangle._PWR.HRM.includes(app)) Bangle._PWR.HRM.push(app); + if (!isOn && Bangle._PWR.HRM.includes(app)) Bangle._PWR.HRM = Bangle._PWR.HRM.filter(a=>a!=app); + isOn = Bangle._PWR.HRM.length; + // so now we know if we're really on + if (isOn) { + log("setHRMPower on", app); + if (!Bangle.isHRMOn()) { + log("HRM not already on"); + status = "searching"; + NRF.requestDevice({ filters: [{ services: ['180D'] }] }).then(function(device) { + log("Found device "+device.id); + status = "connecting"; + device.on('gattserverdisconnected', function(reason) { + gatt = undefined; + }); + return device.gatt.connect(); + }).then(function(g) { + log("Connected"); + gatt = g; + return gatt.getPrimaryService(0x180D); + }).then(function(service) { + return service.getCharacteristic(0x2A37); + }).then(function(characteristic) { + log("Got characteristic"); + characteristic.on('characteristicvaluechanged', function(event) { + var dv = event.target.value; + var flags = dv.getUint8(0); + // 0 = 8 or 16 bit + // 1,2 = sensor contact + // 3 = energy expended shown + // 4 = RR interval + var bpm = (flags&1) ? (dv.getUint16(1)/100/* ? */) : dv.getUint8(1); // 8 or 16 bit + /* var idx = 2 + (flags&1); // index of next field + if (flags&8) idx += 2; // energy expended + if (flags&16) { + var interval = dv.getUint16(idx,1); // in milliseconds + }*/ + Bangle.emit('HRM',{ + bpm:bpm, + confidence:100 + }); + }); + return characteristic.startNotifications(); + }).then(function() { + log("Ready"); + status = "ok"; + }).catch(function(err) { + log("Error",err); + gatt = undefined; + status = "error"; + }); + } + } else { // not on + log("setHRMPower off", app); + if (gatt) { + log("HRM connected - disconnecting"); + status = undefined; + try {gatt.disconnect();}catch(e) { + log("HRM disconnect error", e); + } + gatt = undefined; + } + } + }; +})(); diff --git a/apps/calculator/ChangeLog b/apps/calculator/ChangeLog index c711731d7..6a3308c50 100644 --- a/apps/calculator/ChangeLog +++ b/apps/calculator/ChangeLog @@ -1,3 +1,4 @@ 0.01: New App! 0.02: fix precision rounding issue + no reset when equals pressed 0.03: Support for different screen sizes and touchscreen +0.04: Display current operation on LHS diff --git a/apps/calculator/app.js b/apps/calculator/app.js index 89520ab94..9f801cf22 100644 --- a/apps/calculator/app.js +++ b/apps/calculator/app.js @@ -199,8 +199,7 @@ function doMath(x, y, operator) { function displayOutput(num) { var len; var minusMarge = 0; - g.setColor(0); - g.fillRect(0, 0, g.getWidth(), RESULT_HEIGHT-1); + g.setBgColor(0).clearRect(0, 0, g.getWidth(), RESULT_HEIGHT-1); g.setColor(-1); if (num === Infinity || num === -Infinity || isNaN(num)) { // handle division by 0 @@ -244,6 +243,10 @@ function displayOutput(num) { } g.setFontAlign(1,0); g.drawString(num, g.getWidth()-20, RESULT_HEIGHT/2); + if (operator) { + g.setFont('Vector', 22).setFontAlign(1,0); + g.drawString(operator, g.getWidth()-1, RESULT_HEIGHT/2); + } } var wasPressedEquals = false; var hasPressedNumber = false; diff --git a/apps/calculator/screenshot_calculator.png b/apps/calculator/screenshot_calculator.png new file mode 100644 index 000000000..7a259fe2c Binary files /dev/null and b/apps/calculator/screenshot_calculator.png differ diff --git a/apps/calendar/screenshot_calendar.png b/apps/calendar/screenshot_calendar.png new file mode 100644 index 000000000..4507d77dd Binary files /dev/null and b/apps/calendar/screenshot_calendar.png differ diff --git a/apps/chargeanim/ChangeLog b/apps/chargeanim/ChangeLog index 5560f00bc..a7262b0c9 100644 --- a/apps/chargeanim/ChangeLog +++ b/apps/chargeanim/ChangeLog @@ -1 +1,2 @@ 0.01: New App! +0.02: Bangle.js 2 compatibility diff --git a/apps/chargeanim/app.js b/apps/chargeanim/app.js index c2702337a..68d0cdff5 100644 --- a/apps/chargeanim/app.js +++ b/apps/chargeanim/app.js @@ -1,8 +1,12 @@ +g.setBgColor(0, 0, 0); g.clear().flip(); -var imgbat = require("heatshrink").decompress(atob("nlWhH+AH4A/AH4AHwoAQHXQ8pHf47rF6YAXHXQ8OHVo8NHf47/Hf47/Hf47/Hf47/Hf47/Hf47r1I766Y756Z351I766ayTHco6BHfCxBHfI6CdyY7jHQQ73WIayUHcQ6DHew6EHeqxEdyo7gOwo70HQqyVHbyxFHeo6GHeY6Hdyo7cWI47zHQ6yWHbY6IHeKxIABa9MHbI6TQJo7YHUI7YWMKzbQKQYOHdYYPHcK9IWJw7sDKA7hHTA7pWKA7qDKQ7gdwwaTHcyxSHcR2ZHcwZUHcqxUHcLuEHSo7kHSw7gWLI7kHS47iHTA7fdwKxYHcQ6ZHb46bO8A76ADg7/Hf47/Hf47/Hf47/Hf47/Hf47/HbY8uHRg8tHRwA/AH4AsA==")); -var imgbubble = require("heatshrink").decompress(atob("ikQhH+AAc0AAgKEAAwRFCpgMDnVerwULCIuCCYoUGCQQQBnQ9MA4Q3GChI5DEpATIJYISKCY46LCYwANCa4UObJ7INeCoSOCpAOI")); +var imgbat = require("heatshrink").decompress(atob("nFYhBC/AH4A/AGUeACA22HEo3/G8YrTAC422HBQ2tHBI3/G/43/G/43/G/43/G/43/G/43/G+fTG+vSN+w326Q31GwI3/G9g2WG742CG/43rGwY3yGwg33RKo3bNzQ3bGwo3/G9A2GG942dG/43QGw43uGxA34IKw3VGyY3iG0I3pb8pBRG+wYPG8wYQG/42uG8oZSG/43bDKY3iDKg3cNzI3iRKo3gGyo3/G7A2WG7g2aG/43WGzA3dGzI3/G6fTGzRvcG/43/G/43/G/43/G/43/G/43/G/437HFw2IHFo2KAH4A/AH4Aa")); +var imgbubble = require("heatshrink").decompress(atob("i0UhAebgoAFCaYXNBocjAAIWNCYoVHCw4UFIZwqELJQWFKZQVOChYVzABwVaCx7wKCqIWNCg4WMChIXJCZgAnA==")); - var W=240,H=240; +var W=g.getWidth(),H=g.getHeight(); +var b2v = (W != 240)?-1:1; +var b2rot = (W != 240)?Math.PI:0; +var b2scale = W/240.0; var bubbles = []; for (var i=0;i<10;i++) { bubbles.push({y:Math.random()*H,ly:0,x:(0.5+(i<5?i:i+8))*W/18,v:0.6+Math.random(),s:0.5+Math.random()}); @@ -12,12 +16,16 @@ function anim() { /* we don't use any kind of buffering here. Just draw one image at a time (image contains a background) too, and there is minimal flicker. */ - var mx = 120, my = 120; + var mx = W/2.0, my = H/2.0; bubbles.forEach(f=>{ - f.y-=f.v;if (f.y<-24) f.y=H+8; - g.drawImage(imgbubble,f.y,f.x,{scale:f.s}); + f.y-=f.v * b2v; + if (f.y<-24) + f.y=H+8; + else if (f.y > (H+8)) + f.y=0; + g.drawImage(imgbubble,f.y,f.x,{scale:f.s * b2scale, rotate:b2rot}); }); - g.drawImage(imgbat, mx,my,{rotate:Math.sin(getTime()*2)*0.5-Math.PI/2}); + g.drawImage(imgbat, mx,my,{scale:b2scale, rotate:Math.sin(getTime()*2)*0.5-Math.PI/2 + b2rot}); g.flip(); } diff --git a/apps/chargeanim/bangle-charge-animation-screenshot.png b/apps/chargeanim/bangle-charge-animation-screenshot.png new file mode 100644 index 000000000..83ef1dbda Binary files /dev/null and b/apps/chargeanim/bangle-charge-animation-screenshot.png differ diff --git a/apps/chargeanim/bangle2-charge-animation-screenshot.png b/apps/chargeanim/bangle2-charge-animation-screenshot.png new file mode 100644 index 000000000..c3fb7c8c8 Binary files /dev/null and b/apps/chargeanim/bangle2-charge-animation-screenshot.png differ diff --git a/apps/choozi/bangle1-choozi-screenshot1.png b/apps/choozi/bangle1-choozi-screenshot1.png new file mode 100644 index 000000000..104024958 Binary files /dev/null and b/apps/choozi/bangle1-choozi-screenshot1.png differ diff --git a/apps/choozi/bangle1-choozi-screenshot2.png b/apps/choozi/bangle1-choozi-screenshot2.png new file mode 100644 index 000000000..f3b6868bf Binary files /dev/null and b/apps/choozi/bangle1-choozi-screenshot2.png differ diff --git a/apps/chronowid/README.md b/apps/chronowid/README.md index f422dd956..ec1d5dd46 100644 --- a/apps/chronowid/README.md +++ b/apps/chronowid/README.md @@ -5,11 +5,15 @@ The advantage is, that you can still see your normal watchface and other widgets The widget is always active, but only shown when the timer is on. Hours, minutes, seconds and timer status can be set with an app. -Depending on when you start the timer, it may alert up to 0,999 seconds early. This is because it checks only for full seconds. When there is less than one seconds left, it buzzes. This cannot be avoided without checking more than every second, which I would like to avoid. +When there is less than one seconds left on the timer it buzzes. + +The widget has been tested on Bangle 1 and Bangle 2 ## Screenshots -TBD +![](chrono_with_wave.jpg) +![](chrono_with_pastel.jpg) + ## Features diff --git a/apps/chronowid/chrono_with_pastel.jpg b/apps/chronowid/chrono_with_pastel.jpg new file mode 100644 index 000000000..2f5993e79 Binary files /dev/null and b/apps/chronowid/chrono_with_pastel.jpg differ diff --git a/apps/chronowid/chrono_with_wave.jpg b/apps/chronowid/chrono_with_wave.jpg new file mode 100644 index 000000000..5f35bd28b Binary files /dev/null and b/apps/chronowid/chrono_with_wave.jpg differ diff --git a/apps/cliclockJS2Enhanced/ChangeLog b/apps/cliclockJS2Enhanced/ChangeLog new file mode 100644 index 000000000..c7cb9e2c6 --- /dev/null +++ b/apps/cliclockJS2Enhanced/ChangeLog @@ -0,0 +1,2 @@ +0.01: Submitted to App Loader +0.02: Removed unneded code, added HID controlls thanks to t0m1o1 for his code :p diff --git a/apps/cliclockJS2Enhanced/app.icon.js b/apps/cliclockJS2Enhanced/app.icon.js new file mode 100644 index 000000000..b2974fe7a --- /dev/null +++ b/apps/cliclockJS2Enhanced/app.icon.js @@ -0,0 +1 @@ +require("heatshrink").decompress(atob("mEwwkBiIA/AH4A/AH4A8gAAKC8gKUC7Rf/C/PM5gDBjnBC6EcC4PBDIIbCC5/BAIIXVA4YXXAoRHUC6R3EC6KnEMAbv/C6oAKC8YA/AH4A/AH4Ax")) \ No newline at end of file diff --git a/apps/cliclockJS2Enhanced/app.js b/apps/cliclockJS2Enhanced/app.js new file mode 100644 index 000000000..70e86f3d6 --- /dev/null +++ b/apps/cliclockJS2Enhanced/app.js @@ -0,0 +1,157 @@ +var fontsize = g.getWidth()>200 ? 3 : 2; +var fontsizeTime = g.getWidth()>200 ? 4 : 4; + +var fontheight = 10*fontsize; +var fontheightTime = 10*fontsizeTime; +var locale = require("locale"); +var marginTop = 25; +var flag = false; + +var storage = require('Storage'); + +const settings = storage.readJSON('setting.json',1) || { HID: false }; + +var sendHid, next, prev, toggle, up, down, profile; +var lasty = 0; +var lastx = 0; + +if (settings.HID=="kbmedia") { + profile = 'Music'; + sendHid = function (code, cb) { + try { + NRF.sendHIDReport([1,code], () => { + NRF.sendHIDReport([1,0], () => { + if (cb) cb(); + }); + }); + } catch(e) { + print(e); + } + }; + next = function (cb) { sendHid(0x01, cb); }; + prev = function (cb) { sendHid(0x02, cb); }; + toggle = function (cb) { sendHid(0x10, cb); }; + up = function (cb) {sendHid(0x40, cb); }; + down = function (cb) { sendHid(0x80, cb); }; +} else { + E.showPrompt("Enable HID?",{title:"HID disabled"}).then(function(enable) { + if (enable) { + settings.HID = "kbmedia"; + require("Storage").write('setting.json', settings); + setTimeout(load, 1000, "hidmsicswipe.app.js"); + } else setTimeout(load, 1000); + }); +} + +if (next) { + setWatch(function(e) { + var len = e.time - e.lastTime; + E.showMessage('lock'); + setTimeout(drawApp, 1000); + Bangle.setLocked(true); + }, BTN1, { edge:"falling",repeat:true,debounce:50}); + Bangle.on('drag', function(e) { + if(!e.b){ + console.log(lasty); + console.log(lastx); + if(lasty > 40){ + writeLine('Down', 3); + // setTimeout(drawApp, 1000); + // Bluetooth.println(JSON.stringify({t:"music", n:"volumedown"})); + down(() => {}); + } + else if(lasty < -40){ + writeLine('Up', 3); + // setTimeout(drawApp, 1000); + //Bluetooth.println(JSON.stringify({t:"music", n:"volumeup"})); + + up(() => {}); + } else if(lastx < -40){ + writeLine('Prev', 3); + // setTimeout(drawApp, 1000); + // Bluetooth.println(JSON.stringify({t:"music", n:"previous"})); + prev(() => {}); + } else if(lastx > 40){ + writeLine('Next', 3); + // setTimeout(drawApp, 1000); + // Bluetooth.println(JSON.stringify({t:"music", n:"next"})); + next(() => {}); + } else if(lastx==0 && lasty==0){ + writeLine('play/pause', 3); + //setTimeout(drawApp, 1000); + // Bluetooth.println(JSON.stringify({t:"music", n:"play"})); + + toggle(() => {}); + } + lastx = 0; + lasty = 0; + } + else{ + lastx = lastx + e.dx; + lasty = lasty + e.dy; + } + }); + +} + + +let textCol = g.theme.dark ? "#0f0" : "#080"; + +function drawAll(){ + updateTime(); + updateRest(new Date()); +} + +function updateRest(now){ + writeLine(locale.dow(now),1); + writeLine(locale.date(now,1),2); +} +function updateTime(){ + if (!Bangle.isLCDOn()) return; + let now = new Date(); + writeLine(locale.time(now,1),0); + writeLine(flag?" ":"_ ",3); + flag = !flag; + if(now.getMinutes() == 0) + updateRest(now); +} +function writeLineStart(line){ + if (line==0){ + g.drawString(">",0,marginTop+(line)*fontheight); + } else { + g.drawString(">",4,marginTop+(line-1)*fontheight + fontheightTime); + + } +} + +function writeLine(str,line){ + if (line == 0){ + var y = marginTop+line*fontheightTime; + g.setFont("6x8",fontsizeTime); + g.setColor(textCol).setFontAlign(-1,-1); + g.clearRect(0,y,((str.length+1)*40),y+fontheightTime-1); + writeLineStart(line); + g.drawString(str,25,y); + } else { + var y = marginTop+(line-1)*fontheight+fontheightTime; + g.setFont("6x8",fontsize); + g.setColor(textCol).setFontAlign(-1,-1); + g.clearRect(0,y,((str.length+10)*40),y+fontheightTime-1); + writeLineStart(line); + g.drawString(str,25,y); + } + +} + +g.clear(); +Bangle.loadWidgets(); +Bangle.drawWidgets(); +drawAll(); +Bangle.on('lcdPower',function(on) { + if (on) drawAll(); +}); +var click = setInterval(updateTime, 1000); +// Show launcher when button pressed +Bangle.setUI("clockupdown", btn=>{ + drawAll(); +}); diff --git a/apps/cliclockJS2Enhanced/app.js.png b/apps/cliclockJS2Enhanced/app.js.png new file mode 100644 index 000000000..6d74fcf71 Binary files /dev/null and b/apps/cliclockJS2Enhanced/app.js.png differ diff --git a/apps/cliclockJS2Enhanced/app.png b/apps/cliclockJS2Enhanced/app.png new file mode 100644 index 000000000..e70692034 Binary files /dev/null and b/apps/cliclockJS2Enhanced/app.png differ diff --git a/apps/cliclockJS2Enhanced/screengrab.png b/apps/cliclockJS2Enhanced/screengrab.png new file mode 100644 index 000000000..fd4556fb3 Binary files /dev/null and b/apps/cliclockJS2Enhanced/screengrab.png differ diff --git a/apps/cliock/ChangeLog b/apps/cliock/ChangeLog index 66ef62eae..2a93a0d5f 100644 --- a/apps/cliock/ChangeLog +++ b/apps/cliock/ChangeLog @@ -5,3 +5,5 @@ 0.11: added Heart Rate Monitor status and ability to turn on/off 0.12: added support for different locales 0.13: Use setUI, work with smaller screens and themes +0.14: Fix BTN1 (fix #853) + Add light/dark theme support diff --git a/apps/cliock/app.js b/apps/cliock/app.js index 6853aaf6f..0fd6ea580 100644 --- a/apps/cliock/app.js +++ b/apps/cliock/app.js @@ -20,6 +20,8 @@ const HRT_FN_MODE = "fn_hrt"; let infoMode = NONE_MODE; let functionMode = NONE_FN_MODE; +let textCol = g.theme.dark ? "#0f0" : "#080"; + function drawAll(){ updateTime(); updateRest(new Date()); @@ -45,9 +47,7 @@ function writeLineStart(line){ function writeLine(str,line){ var y = marginTop+line*fontheight; g.setFont("6x8",fontsize); - //g.setColor(0,1,0); - g.setColor("#0f0"); - g.setFontAlign(-1,-1); + g.setColor(textCol).setFontAlign(-1,-1); g.clearRect(0,y,((str.length+1)*20),y+fontheight-1); writeLineStart(line); g.drawString(str,25,y); @@ -56,7 +56,7 @@ function writeLine(str,line){ function drawInfo(line) { let val; let str = ""; - let col = "#0f0"; // green + let col = textCol; // green //console.log("drawInfo(), infoMode=" + infoMode + " funcMode=" + functionMode); @@ -64,7 +64,7 @@ function drawInfo(line) { case NONE_FN_MODE: break; case HRT_FN_MODE: - col = "#0ff"; // cyan + col = g.theme.dark ? "#0ff": "#088"; // cyan str = "HRM: " + (hrtOn ? "ON" : "OFF"); drawModeLine(line,str,col); return; @@ -72,7 +72,7 @@ function drawInfo(line) { switch(infoMode) { case NONE_MODE: - col = "#fff"; + col = g.theme.bg; str = ""; break; case HRT_MODE: @@ -104,9 +104,8 @@ function drawModeLine(line, str, col) { g.setColor(col); var y = marginTop+line*fontheight; g.fillRect(0, y, 239, y+fontheight-1); - g.setColor(0); - g.setFontAlign(0, -1); - g.drawString(str, g.getWidth()/2, y); + g.setColor(g.theme.bg).setFontAlign(0, 0); + g.drawString(str, g.getWidth()/2, y+fontheight/2); } function changeInfoMode() { @@ -193,7 +192,7 @@ Bangle.on('lcdPower',function(on) { var click = setInterval(updateTime, 1000); // Show launcher when button pressed Bangle.setUI("clockupdown", btn=>{ - if (btn==0) changeInfoMode(); - if (btn==1) changeFunctionMode(); + if (btn<0) changeInfoMode(); + if (btn>0) changeFunctionMode(); drawAll(); -}); +}); \ No newline at end of file diff --git a/apps/cliock/screenshot_cli.png b/apps/cliock/screenshot_cli.png new file mode 100644 index 000000000..fe1c6299b Binary files /dev/null and b/apps/cliock/screenshot_cli.png differ diff --git a/apps/clock2x3/README.md b/apps/clock2x3/README.md new file mode 100644 index 000000000..0b5d25f9d --- /dev/null +++ b/apps/clock2x3/README.md @@ -0,0 +1,4 @@ +# 2x3 Pixel Clock + +![](screenshot_pixel.png) + diff --git a/apps/clock2x3/screenshot_pixel.png b/apps/clock2x3/screenshot_pixel.png new file mode 100644 index 000000000..4b09f06a1 Binary files /dev/null and b/apps/clock2x3/screenshot_pixel.png differ diff --git a/apps/clotris/bangle1-clock-tris-screenshot.png b/apps/clotris/bangle1-clock-tris-screenshot.png new file mode 100644 index 000000000..4b7a7257f Binary files /dev/null and b/apps/clotris/bangle1-clock-tris-screenshot.png differ diff --git a/apps/compass/ChangeLog b/apps/compass/ChangeLog index e70a5688b..4bb7838ac 100644 --- a/apps/compass/ChangeLog +++ b/apps/compass/ChangeLog @@ -1,3 +1,5 @@ 0.01: New App! 0.02: Show text if uncalibrated -0.03: Eliminate flickering \ No newline at end of file +0.03: Eliminate flickering +0.04: Fix for Bangle.js 2 and themes +0.05: Fix bearing not clearing correctly (visible in single or double digit bearings) diff --git a/apps/compass/compass.js b/apps/compass/compass.js index 9b7ed56b7..65ad83c4f 100644 --- a/apps/compass/compass.js +++ b/apps/compass/compass.js @@ -1,60 +1,72 @@ -var tg = Graphics.createArrayBuffer(120,20,1,{msb:true}); -var timg = { - width:tg.getWidth(), - height:tg.getHeight(), - bpp:1, - buffer:tg.buffer -}; - -var ag = Graphics.createArrayBuffer(160,160,2,{msb:true}); +var W = g.getWidth(); +var M = W/2; // middle of screen +// Angle buffer +var AGS = W > 200 ? 160 : 120; // buffer size +var AGM = AGS/2; // midpoint/radius +var AGH = AGM-10; // hand size +var ag = Graphics.createArrayBuffer(AGS,AGS,2,{msb:true}); var aimg = { width:ag.getWidth(), height:ag.getHeight(), bpp:2, buffer:ag.buffer, - palette:new Uint16Array([0,0x03FF,0xF800,0x001F]) + palette:new Uint16Array([ + g.theme.bg, + g.toColor("#07f"), + g.toColor("#f00"), + g.toColor("#00f")]) }; -ag.setColor(1); -ag.fillCircle(80,80,79,79); -ag.setColor(0); -ag.fillCircle(80,80,69,69); +ag.setColor(1).fillCircle(AGM,AGM,AGM-1,AGM-1); +ag.setColor(0).fillCircle(AGM,AGM,AGM-11,AGM-11); function arrow(r,c) { r=r*Math.PI/180; var p = Math.PI/2; - ag.setColor(c); - ag.fillPoly([ - 80+60*Math.sin(r), 80-60*Math.cos(r), - 80+10*Math.sin(r+p), 80-10*Math.cos(r+p), - 80+10*Math.sin(r-p), 80-10*Math.cos(r-p), + ag.setColor(c).fillPoly([ + AGM+AGH*Math.sin(r), AGM-AGH*Math.cos(r), + AGM+10*Math.sin(r+p), AGM-10*Math.cos(r+p), + AGM+10*Math.sin(r-p), AGM-10*Math.cos(r-p), ]); } +var wasUncalibrated = false; var oldHeading = 0; Bangle.on('mag', function(m) { if (!Bangle.isLCDOn()) return; - tg.clear(); - tg.setFont("6x8",1); - tg.setColor(1); + g.reset(); if (isNaN(m.heading)) { - tg.setFontAlign(0,-1); - tg.setFont("6x8",1); - tg.drawString("Uncalibrated",60,4); - tg.drawString("turn 360° around",60,12); + if (!wasUncalibrated) { + g.clearRect(0,24,W,48); + g.setFontAlign(0,-1).setFont("6x8"); + g.drawString("Uncalibrated\nturn 360° around",M,24+4); + wasUncalibrated = true; + } + } else { + if (wasUncalibrated) { + g.clearRect(0,24,W,48); + wasUncalibrated = false; + } + g.setFontAlign(0,0).setFont("6x8",3); + var y = 36; + g.clearRect(M-40,24,M+40,48); + g.drawString(Math.round(m.heading),M,y,true); } - else { - tg.setFontAlign(0,0); - tg.setFont("6x8",2); - tg.drawString(Math.round(m.heading),60,12); - } - g.drawImage(timg,0,0,{scale:2}); + ag.setColor(0); arrow(oldHeading,0); arrow(oldHeading+180,0); arrow(m.heading,2); arrow(m.heading+180,3); - g.drawImage(aimg,40,50); + g.drawImage(aimg, + (W-ag.getWidth())/2, + g.getHeight()-(ag.getHeight()+4)); oldHeading = m.heading; }); + +g.clear(); +Bangle.loadWidgets(); +Bangle.drawWidgets(); Bangle.setCompassPower(1); +Bangle.setLCDPower(1); +Bangle.setLCDTimeout(0); diff --git a/apps/compass/screenshot_compass.png b/apps/compass/screenshot_compass.png new file mode 100644 index 000000000..63579bab7 Binary files /dev/null and b/apps/compass/screenshot_compass.png differ diff --git a/apps/counter/bangle1-counter-screenshot.png b/apps/counter/bangle1-counter-screenshot.png new file mode 100644 index 000000000..1d6c471bf Binary files /dev/null and b/apps/counter/bangle1-counter-screenshot.png differ diff --git a/apps/cprassist/bangle1-CPR-assist-screenshot.png b/apps/cprassist/bangle1-CPR-assist-screenshot.png new file mode 100644 index 000000000..9d217efce Binary files /dev/null and b/apps/cprassist/bangle1-CPR-assist-screenshot.png differ diff --git a/apps/cscsensor/ChangeLog b/apps/cscsensor/ChangeLog index 7be2ed3e2..8f23fa9f3 100644 --- a/apps/cscsensor/ChangeLog +++ b/apps/cscsensor/ChangeLog @@ -2,4 +2,6 @@ 0.02: Add wheel circumference settings dialog 0.03: Save total distance traveled 0.04: Add sensor battery level indicator - +0.05: Add cadence sensor support +0.06: Now read wheel rev as well as cadence sensor + Improve connection code diff --git a/apps/cscsensor/README.md b/apps/cscsensor/README.md index a31a4dc28..9740fd9cf 100644 --- a/apps/cscsensor/README.md +++ b/apps/cscsensor/README.md @@ -9,10 +9,16 @@ Currently the app displays the following data: - maximum speed - trip distance traveled - total distance traveled -- an icon with the battery status of the remote sensor +- an icon with the battery status of the remote sensor Button 1 resets all measurements except total distance traveled. The latter gets preserved by being written to storage every 0.1 miles and upon exiting the app. If the watch app has not received an update from the sensor for at least 10 seconds, pushing button 3 will attempt to reconnect to the sensor. +Button 2 switches between the display for cycling speed and cadence. -I do not have access to a cadence sensor at the moment, so only the speed part is currently implemented. Values displayed are imperial or metric (depending on locale), -the wheel circumference can be adjusted in the global settings app. +Values displayed are imperial or metric (depending on locale), cadence is in RPM, the wheel circumference can be adjusted in the global settings app. + +# TODO + +* Use Layout Library to provide proper Bangle.js 2 support +* Turn CSC sensor support into a library +* Support for `Recorder` app, to allow CSC readings to be logged alongside GPS diff --git a/apps/cscsensor/cscsensor.app.js b/apps/cscsensor/cscsensor.app.js index 8f6c58577..e2af0db16 100644 --- a/apps/cscsensor/cscsensor.app.js +++ b/apps/cscsensor/cscsensor.app.js @@ -5,6 +5,8 @@ var characteristic; const SETTINGS_FILE = 'cscsensor.json'; const storage = require('Storage'); +const W = g.getWidth(); +const H = g.getHeight(); class CSCSensor { constructor() { @@ -28,6 +30,10 @@ class CSCSensor { this.distFactor = this.qMetric ? 1.609344 : 1; this.screenInit = true; this.batteryLevel = -1; + this.lastCrankTime = 0; + this.lastCrankRevs = 0; + this.showCadence = false; + this.cadence = 0; } reset() { @@ -40,6 +46,11 @@ class CSCSensor { this.screenInit = true; } + toggleDisplayCadence() { + this.showCadence = !this.showCadence; + this.screenInit = true; + } + setBatteryLevel(level) { if (level!=this.batteryLevel) { this.batteryLevel = level; @@ -62,11 +73,11 @@ class CSCSensor { else g.setFontVector(14).setFontAlign(0, 0, 0).setColor(0xffff).drawString("?", 16, 66); } - updateScreen() { + updateScreenRevs() { var dist = this.distFactor*(this.lastRevs-this.lastRevsStart)*this.wheelCirc/63360.0; var ddist = Math.round(100*dist)/100; var tdist = Math.round(this.distFactor*this.totaldist*10)/10; - var dspeed = Math.round(10*this.distFactor*this.speed)/10; + var dspeed = Math.round(10*this.distFactor*this.speed)/10; var dmins = Math.floor(this.movingTime/60).toString(); if (dmins.length<2) dmins = "0"+dmins; var dsecs = (Math.floor(this.movingTime) % 60).toString(); @@ -108,10 +119,52 @@ class CSCSensor { g.setColor(0).fillRect(88, 209, 238, 238); g.setColor(0xffff).drawString(tdist + " " + this.distUnit, 92, 226); } - + + updateScreenCadence() { + if (this.screenInit) { + for (var i=0; i<2; ++i) { + if ((i&1)==0) g.setColor(0, 0, 0); + else g.setColor(0x30cd); + g.fillRect(0, 48+i*32, 86, 48+(i+1)*32); + if ((i&1)==1) g.setColor(0); + else g.setColor(0x30cd); + g.fillRect(87, 48+i*32, 239, 48+(i+1)*32); + g.setColor(0.5, 0.5, 0.5).drawRect(87, 48+i*32, 239, 48+(i+1)*32).drawLine(0, 239, 239, 239);//.drawRect(0, 48, 87, 239); + g.moveTo(0, 80).lineTo(30, 80).lineTo(30, 48).lineTo(87, 48).lineTo(87, 239).lineTo(0, 239).lineTo(0, 80); + } + g.setFontAlign(1, 0, 0).setFontVector(19).setColor(1, 1, 0); + g.drawString("Cadence:", 87, 98); + this.drawBatteryIcon(); + this.screenInit = false; + } + g.setFontAlign(-1, 0, 0).setFontVector(26); + g.setColor(0).fillRect(88, 81, 238, 111); + g.setColor(0xffff).drawString(Math.round(this.cadence), 92, 98); + } + + updateScreen() { + if (!this.showCadence) { + this.updateScreenRevs(); + } else { + this.updateScreenCadence(); + } + } + updateSensor(event) { var qChanged = false; if (event.target.uuid == "0x2a5b") { + if (event.target.value.getUint8(0, true) & 0x2) { + // crank revolution - if enabled + const crankRevs = event.target.value.getUint16(1, true); + const crankTime = event.target.value.getUint16(3, true); + if (crankTime > this.lastCrankTime) { + this.cadence = (crankRevs-this.lastCrankRevs)/(crankTime-this.lastCrankTime)*(60*1024); + qChanged = true; + } + this.lastCrankRevs = crankRevs; + this.lastCrankTime = crankTime; + } + // wheel revolution var wheelRevs = event.target.value.getUint32(1, true); var dRevs = (this.lastRevs>0 ? wheelRevs-this.lastRevs : 0); if (dRevs>0) { @@ -140,7 +193,7 @@ class CSCSensor { else { this.speedFailed++; qChanged = false; - if (this.speedFailed>3) { + if (this.speedFailed>3) { this.speed = 0; qChanged = (this.lastSpeed>0); } @@ -163,69 +216,47 @@ function getSensorBatteryLevel(gatt) { }); } -function parseDevice(d) { - device = d; - g.clearRect(0, 24, 239, 239).setFontAlign(0, 0, 0).setColor(0, 1, 0).drawString("Found device", 120, 120).flip(); - device.gatt.connect().then(function(ga) { - gatt = ga; - g.clearRect(0, 24, 239, 239).setFontAlign(0, 0, 0).setColor(0, 1, 0).drawString("Connected", 120, 120).flip(); - return gatt.getPrimaryService("1816"); -}).then(function(s) { - service = s; - return service.getCharacteristic("2a5b"); -}).then(function(c) { - characteristic = c; - characteristic.on('characteristicvaluechanged', (event)=>mySensor.updateSensor(event)); - return characteristic.startNotifications(); -}).then(function() { - console.log("Done!"); - g.clearRect(0, 24, 239, 239).setColor(1, 1, 1).flip(); - setWatch(function() { mySensor.reset(); g.clearRect(0, 24, 239, 239); mySensor.updateScreen(); }, BTN1, {repeat:true, debounce:20}); - E.on('kill',()=>{ if (gatt!=undefined) gatt.disconnect(); mySensor.settings.totaldist = mySensor.totaldist; storage.writeJSON(SETTINGS_FILE, mySensor.settings); }); - setWatch(function() { if (Date.now()-mySensor.lastBangleTime>10000) connection_setup(); }, BTN3, {repeat:true, debounce:20}); getSensorBatteryLevel(gatt); - mySensor.updateScreen(); -}).catch(function(e) { - g.clearRect(0, 24, 239, 239).setColor(1, 0, 0).setFontAlign(0, 0, 0).drawString("ERROR"+e, 120, 120).flip(); - console.log(e); -})} - -function scan() { - menu = { - "": { "title": "Select sensor" }, - "re-scan": () => scan() - }; - waitMessage(); - NRF.findDevices(devices => { - devices.forEach(device =>{ - let deviceName = device.id.substring(0,17); - if (device.name) { - deviceName = device.name; - } - if (device.services!=undefined && device.services.find(e => e=="1816")) deviceName = "* "+deviceName; - menu[deviceName] = () => { E.showMenu(); parseDevice(device); } - }); - E.showMenu(menu); - }, { active: true }); -} - -function waitMessage() { - E.showMenu(); - E.showMessage("scanning"); -} - function connection_setup() { - if (mySensor.settings.autoconnect) { - NRF.setScan(); - mySensor.screenInit = true; - NRF.setScan(parseDevice, { filters: [{services:["1816"]}], timeout: 2000}); - g.clearRect(0, 24, 239, 239).setFontVector(18).setFontAlign(0, 0, 0).setColor(0, 1, 0); - g.drawString("Scanning for CSC sensor...", 120, 120); - } - else scan(); + mySensor.screenInit = true; + E.showMessage("Scanning for CSC sensor..."); + NRF.requestDevice({ filters: [{services:["1816"]}]}).then(function(d) { + device = d; + E.showMessage("Found device"); + return device.gatt.connect(); + }).then(function(ga) { + gatt = ga; + E.showMessage("Connected"); + return gatt.getPrimaryService("1816"); + }).then(function(s) { + service = s; + return service.getCharacteristic("2a5b"); + }).then(function(c) { + characteristic = c; + characteristic.on('characteristicvaluechanged', (event)=>mySensor.updateSensor(event)); + return characteristic.startNotifications(); + }).then(function() { + console.log("Done!"); + g.reset().clearRect(Bangle.appRect).flip(); + getSensorBatteryLevel(gatt); + mySensor.updateScreen(); + }).catch(function(e) { + E.showMessage(e.toString(), "ERROR"); + console.log(e); + }); } connection_setup(); -NRF.on('disconnect', connection_setup); +E.on('kill',()=>{ + if (gatt!=undefined) gatt.disconnect(); + mySensor.settings.totaldist = mySensor.totaldist; + storage.writeJSON(SETTINGS_FILE, mySensor.settings); +}); +NRF.on('disconnect', connection_setup); // restart if disconnected +Bangle.setUI("updown", d=>{ + if (d<0) { mySensor.reset(); g.clearRect(0, 48, W, H); mySensor.updateScreen(); } + if (d==0) { if (Date.now()-mySensor.lastBangleTime>10000) connection_setup(); } + if (d>0) { mySensor.toggleDisplayCadence(); g.clearRect(0, 48, W, H); mySensor.updateScreen(); } +}); Bangle.loadWidgets(); Bangle.drawWidgets(); diff --git a/apps/ctrclk/bangle1-center-clock-screenshot.png b/apps/ctrclk/bangle1-center-clock-screenshot.png new file mode 100644 index 000000000..613fa4fb5 Binary files /dev/null and b/apps/ctrclk/bangle1-center-clock-screenshot.png differ diff --git a/apps/cubescramble/ChangeLog b/apps/cubescramble/ChangeLog new file mode 100644 index 000000000..46852864a --- /dev/null +++ b/apps/cubescramble/ChangeLog @@ -0,0 +1,4 @@ +0.01: Initial Release +0.02: Replace icon with one found on https://icons8.com +0.03: Re-render icon fixing display in settings +0.04: Improved UX and display solve time diff --git a/apps/cubescramble/README.md b/apps/cubescramble/README.md new file mode 100644 index 000000000..1c1603372 --- /dev/null +++ b/apps/cubescramble/README.md @@ -0,0 +1,17 @@ +# Cube Scramble + +A random scramble generator for the 3x3 Rubik's cube with a basic timer. + +## Future features + +I'm keen to complete this project with + +* Add the ability for times to be stored and exported + +## Requests + +Please reach out if you have feature requests or notice bugs. + +## Creator + +Made by [Nathan Lisgo](https://github.com/nlisgo) diff --git a/apps/cubescramble/bangle1-cube-scramble-screenshot.png b/apps/cubescramble/bangle1-cube-scramble-screenshot.png new file mode 100644 index 000000000..5a35238e3 Binary files /dev/null and b/apps/cubescramble/bangle1-cube-scramble-screenshot.png differ diff --git a/apps/cubescramble/bangle2-cube-scramble-screenshot.png b/apps/cubescramble/bangle2-cube-scramble-screenshot.png new file mode 100644 index 000000000..ae37b4aff Binary files /dev/null and b/apps/cubescramble/bangle2-cube-scramble-screenshot.png differ diff --git a/apps/cubescramble/cube-scramble-icon.js b/apps/cubescramble/cube-scramble-icon.js new file mode 100644 index 000000000..d22d6d33b --- /dev/null +++ b/apps/cubescramble/cube-scramble-icon.js @@ -0,0 +1 @@ +require("heatshrink").decompress(atob("mEwwhC/AHcRACAWEgIXRiAXEjGIAAWBif/AAUxj3uAAXRC5cfC4fxC4nhC/4Xv+aPFC50zAAIXSiYWCC7Mda5T/JAA4Xeu4ACiMU7oACoMTVocxC4sXC4dxjoXD6LFFC//M4IXS7nMAAIXSjgWCC4vzR5gXHeoYXRiYWCC47XCu1ma4IXDa4IXLACAXdj3uAAXRjGIAAWBKYQABC5fhC4qDFC/4X/C9sda5t2szXGf5IAHC4kAC6IWEAH4A1")) diff --git a/apps/cubescramble/cube-scramble.js b/apps/cubescramble/cube-scramble.js new file mode 100644 index 000000000..73c4e95ef --- /dev/null +++ b/apps/cubescramble/cube-scramble.js @@ -0,0 +1,93 @@ +// Scramble code from: https://raw.githubusercontent.com/bjcarlson42/blog-post-sample-code/master/Rubik's%20Cube%20JavaScript%20Scrambler/part_two.js +const makeScramble = () => { + const options = ["F", "F2", "F'", "R", "R2", "R'", "U", "U2", "U'", "B", "B2", "B'", "L", "L2", "L'", "D", "D2", "D'"]; + const numOptions = [0, 1, 2, 3, 4, 5]; // 0 = F, 1 = R, 2 = U, 3 = B, 4 = L, 5 = D + const scrambleMoves = []; + let bad = true; + + while (bad) { + let scramble = []; + for (let i = 0; i < 20; i++) { + scramble.push(numOptions[getRandomInt(6)]); + } + // check if moves directly next to each other involve the same letter + for (let i = 0; i < 20 - 1; i++) { + if (scramble[i] == scramble[i + 1]) { + bad = true; + break; + } else { + bad = false; + } + } + } + // switch numbers to letters + let move; + for (let i = 0; i < 20; i++) { + switch (scramble[i]) { + case 0: + move = options[getRandomInt(3)]; // 0,1,2 + scrambleMoves.push(move); + break; + case 1: + move = options[getRandomIntBetween(3, 6)]; // 3,4,5 + scrambleMoves.push(move); + break; + case 2: + move = options[getRandomIntBetween(6, 9)]; // 6,7,8 + scrambleMoves.push(move); + break; + case 3: + move = options[getRandomIntBetween(9, 12)]; // 9,10,11 + scrambleMoves.push(move); + break; + case 4: + move = options[getRandomIntBetween(12, 15)]; // 12,13,14 + scrambleMoves.push(move); + break; + case 5: + move = options[getRandomIntBetween(15, 18)]; // 15,16,17 + scrambleMoves.push(move); + break; + } + } + return scrambleMoves; +}; + +const getRandomInt = max => Math.floor(Math.random() * Math.floor(max)); // returns up to max - 1 + +const getRandomIntBetween = (min, max) => Math.floor(Math.random() * (max - min) + min); + +const presentScramble = () => { + showPrompt(makeScramble().join(" "), { + buttons: {"solve": true, "reset": false} + }).then((v) => { + if (v) { + const start = new Date(); + showPrompt(" ", { + buttons: {"stop": true} + }).then(() => { + const time = parseFloat(((new Date()).getTime() - start.getTime()) / 1000); + showPrompt(String(time.toFixed(3)), { + buttons: {"next": true} + }).then(() => { + presentScramble(); + }); + }); + } else { + presentScramble(); + } + }); +}; + +const showPrompt = (text, options = {}) => { + options.title = options.title || "cube scramble"; + return E.showPrompt(text, options); +}; + +const init = () => { + Bangle.setLCDTimeout(0); + Bangle.setLCDPower(1); + presentScramble(); +}; + +init(); diff --git a/apps/cubescramble/cube-scramble.png b/apps/cubescramble/cube-scramble.png new file mode 100644 index 000000000..cdf4a31c2 Binary files /dev/null and b/apps/cubescramble/cube-scramble.png differ diff --git a/apps/dclock/bangle1-dev-clock-screenshot.png b/apps/dclock/bangle1-dev-clock-screenshot.png new file mode 100644 index 000000000..ac136e48e Binary files /dev/null and b/apps/dclock/bangle1-dev-clock-screenshot.png differ diff --git a/apps/dclock/bangle2-dev-clock-screenshot.png b/apps/dclock/bangle2-dev-clock-screenshot.png new file mode 100644 index 000000000..0deb6dc2e Binary files /dev/null and b/apps/dclock/bangle2-dev-clock-screenshot.png differ diff --git a/apps/demoapp/ChangeLog b/apps/demoapp/ChangeLog index 5560f00bc..53e9cf268 100644 --- a/apps/demoapp/ChangeLog +++ b/apps/demoapp/ChangeLog @@ -1 +1,2 @@ 0.01: New App! +0.02: Minor adjustment to fix out of memory errors diff --git a/apps/demoapp/app.js b/apps/demoapp/app.js index 13c043587..f1cf5af07 100644 --- a/apps/demoapp/app.js +++ b/apps/demoapp/app.js @@ -60,8 +60,8 @@ var scenes = [ }; }, function() { + Bangle.setLCDMode("120x120"); var img = require("heatshrink").decompress(atob("oNBxH+5wA/AH4A/AH4A/AH4A/AH4A/AH4A/AH4A/AH4A/AH4A/AH4A/AH4A/AH4A/AH4A/AH4A/AH4A/AHGpAAoQKv4ADCBQAeqsrAAejBw9/B4oABqt/IGepHw5CEQspALH5hBC5pAvv4/MAALFkIBWpPI6IHqpAu0Z3GfYOpRYdPQEhALYIp2FBYNVI4JAvvL4LH0yBYAFJAQQQ5Ay1JAFftBAQBYxCDv+qIGiCHIQiGnIBfOv5BJIQRAyIJkrvKEkIBrFBB4qEGIGRCNYsZAQIQV/IZDEiICRCDQVJAUIQVPC4lVIF6yJQYpAZ5t/FYvNIBepqtVIJGjIDoqBDY2pdYo3DfAhBIQLmpvIcDvIrC5oJEIAhTCGQmj5qgEC4t5e7YrBqt5BI6UFBg15v4XHbQwAQb4oAKv7NKABdVRoYATUAwnICqjZFIMdVE4+jXI4XGYCxBFFZN/M5OpCxUrvJ/ZFYmjvNVAAY+KCwpDBC6YAV5vNC9oA/AH4A/AHYA==")); - g.clear(); y = 0; var step = 4; @@ -70,8 +70,7 @@ var scenes = [ g.clear(); g.drawImage(img,60,60,{rotate:Math.sin(y*0.03)*0.5}); g.flip(); - }, 20); - Bangle.setLCDMode("120x120"); + }, 20); return function() { if (i) clearInterval(i); }; diff --git a/apps/demoapp/bangle1-demo-loop-screenshot1.png b/apps/demoapp/bangle1-demo-loop-screenshot1.png new file mode 100644 index 000000000..9618f7044 Binary files /dev/null and b/apps/demoapp/bangle1-demo-loop-screenshot1.png differ diff --git a/apps/demoapp/bangle1-demo-loop-screenshot2.png b/apps/demoapp/bangle1-demo-loop-screenshot2.png new file mode 100644 index 000000000..0d39685ba Binary files /dev/null and b/apps/demoapp/bangle1-demo-loop-screenshot2.png differ diff --git a/apps/demoapp/bangle1-demo-loop-screenshot3.png b/apps/demoapp/bangle1-demo-loop-screenshot3.png new file mode 100644 index 000000000..2a98f79a1 Binary files /dev/null and b/apps/demoapp/bangle1-demo-loop-screenshot3.png differ diff --git a/apps/demoapp/bangle1-demo-loop-screenshot4.png b/apps/demoapp/bangle1-demo-loop-screenshot4.png new file mode 100644 index 000000000..8f43cac50 Binary files /dev/null and b/apps/demoapp/bangle1-demo-loop-screenshot4.png differ diff --git a/apps/devstopwatch/bangle1-dev-stopwatch-screenshot.png b/apps/devstopwatch/bangle1-dev-stopwatch-screenshot.png new file mode 100644 index 000000000..b668794b1 Binary files /dev/null and b/apps/devstopwatch/bangle1-dev-stopwatch-screenshot.png differ diff --git a/apps/dotclock/bangle1-dot-clock-screenshot.png b/apps/dotclock/bangle1-dot-clock-screenshot.png new file mode 100644 index 000000000..767cd2d55 Binary files /dev/null and b/apps/dotclock/bangle1-dot-clock-screenshot.png differ diff --git a/apps/dotclock/bangle2-dot-clcok-screenshot.png b/apps/dotclock/bangle2-dot-clcok-screenshot.png new file mode 100644 index 000000000..3aadddb8f Binary files /dev/null and b/apps/dotclock/bangle2-dot-clcok-screenshot.png differ diff --git a/apps/dtlaunch/ChangeLog b/apps/dtlaunch/ChangeLog index 985321e91..c3102b4b9 100644 --- a/apps/dtlaunch/ChangeLog +++ b/apps/dtlaunch/ChangeLog @@ -2,3 +2,4 @@ 0.02: Multiple pages 0.03: cycle thru pages 0.04: reset to clock after 2 mins of inactivity +0.05: add Bangle 2 version diff --git a/apps/dtlaunch/README.md b/apps/dtlaunch/README.md index 70f7ff931..ba2301d91 100644 --- a/apps/dtlaunch/README.md +++ b/apps/dtlaunch/README.md @@ -3,7 +3,7 @@ ![](screenshot.jpg) In the picture above, the Settings app is selected. -## Controls +## Controls- Bangle **BTN1** - move backward through app icons on a page @@ -13,4 +13,12 @@ In the picture above, the Settings app is selected. **Swipe Left** - move to next page of app icons +**Swipe Right** - move to previous page of app icons + +## Controls- Bangle 2 + +**Touch** - icon to select, scond touch launches app + +**Swipe Left** - move to next page of app icons + **Swipe Right** - move to previous page of app icons \ No newline at end of file diff --git a/apps/dtlaunch/app.js b/apps/dtlaunch/app-b1.js similarity index 100% rename from apps/dtlaunch/app.js rename to apps/dtlaunch/app-b1.js diff --git a/apps/dtlaunch/app-b2.js b/apps/dtlaunch/app-b2.js new file mode 100644 index 000000000..674fe3677 --- /dev/null +++ b/apps/dtlaunch/app-b2.js @@ -0,0 +1,105 @@ +/* Desktop launcher +* +*/ + +var s = require("Storage"); +var apps = s.list(/\.info$/).map(app=>{var a=s.readJSON(app,1);return a&&{name:a.name,type:a.type,icon:a.icon,sortorder:a.sortorder,src:a.src};}).filter(app=>app && (app.type=="app" || app.type=="clock" || !app.type)); +apps.sort((a,b)=>{ + var n=(0|a.sortorder)-(0|b.sortorder); + if (n) return n; // do sortorder first + if (a.nameb.name) return 1; + return 0; +}); +apps.forEach(app=>{ + if (app.icon) + app.icon = s.read(app.icon); // should just be a link to a memory area + }); + +var Napps = apps.length; +var Npages = Math.ceil(Napps/4); +var maxPage = Npages-1; +var selected = -1; +var oldselected = -1; +var page = 0; +const XOFF = 24; +const YOFF = 30; + +function draw_icon(p,n,selected) { + var x = (n%2)*72+XOFF; + var y = n>1?72+YOFF:YOFF; + (selected?g.setColor(g.theme.fgH):g.setColor(g.theme.bg)).fillRect(x+10,y+2,x+60,y+52); + g.clearRect(x+12,y+4,x+59,y+51); + g.setColor(g.theme.fg); + try{g.drawImage(apps[p*4+n].icon,x+12,y+4);} catch(e){} + g.setFontAlign(0,-1,0).setFont("6x8",1); + var txt = apps[p*4+n].name.split(" "); + for (var i = 0; i < txt.length; i++) { + txt[i] = txt[i].trim(); + g.drawString(txt[i],x+36,y+54+i*8); + } +} + +function drawPage(p){ + g.reset(); + g.clearRect(0,24,175,175); + var O = 88+YOFF/2-12*(Npages/2); + for (var j=0;j{ + selected = 0; + oldselected=-1; + if (dir<0){ + ++page; if (page>maxPage) page=0; + drawPage(page); + } else { + --page; if (page<0) page=maxPage; + drawPage(page); + } +}); + +function isTouched(p,n){ + if (n<0 || n>3) return false; + var x1 = (n%2)*72+XOFF; var y1 = n>1?72+YOFF:YOFF; + var x2 = x1+71; var y2 = y1+81; + return (p.x>x1 && p.y>y1 && p.x{ + var i; + for (i=0;i<4;i++){ + if((page*4+i)=0) { + if (selected!=i){ + draw_icon(page,selected,false); + } else { + load(apps[page*4+i].src); + } + } + selected=i; + break; + } + } + } + if ((i==4 || (page*4+i)>Napps) && selected>=0) { + draw_icon(page,selected,false); + selected=-1; + } +}); + +Bangle.loadWidgets(); +Bangle.drawWidgets(); +drawPage(0); diff --git a/apps/dtlaunch/shot1.png b/apps/dtlaunch/shot1.png new file mode 100644 index 000000000..e6a9bcd3a Binary files /dev/null and b/apps/dtlaunch/shot1.png differ diff --git a/apps/dtlaunch/shot2.png b/apps/dtlaunch/shot2.png new file mode 100644 index 000000000..4c0c33c91 Binary files /dev/null and b/apps/dtlaunch/shot2.png differ diff --git a/apps/dtlaunch/shot3.png b/apps/dtlaunch/shot3.png new file mode 100644 index 000000000..1ffdf8090 Binary files /dev/null and b/apps/dtlaunch/shot3.png differ diff --git a/apps/emojuino/ChangeLog b/apps/emojuino/ChangeLog new file mode 100644 index 000000000..1c99f1970 --- /dev/null +++ b/apps/emojuino/ChangeLog @@ -0,0 +1,2 @@ +0.01: New App! +0.02: Upgraded text to images, added welcome screen and subtitles. diff --git a/apps/emojuino/README.md b/apps/emojuino/README.md new file mode 100644 index 000000000..568d06dfb --- /dev/null +++ b/apps/emojuino/README.md @@ -0,0 +1,28 @@ +# Emojuino + +Emojis & Espruino! + + +## Usage + +Select an emoji and then tap to transmit! The emoji will be recognised by [Pareto Anywhere](https://www.reelyactive.com/pareto/anywhere/) open source middleware and any other program which observes the [InteroperaBLE Identifier](https://reelyactive.github.io/interoperable-identifier/) open standard. + + +## Features + +Currently implements a tiny subset of possible [Unicode emojis](https://unicode.org/emoji/charts/full-emoji-list.html) which are advertised as an [InteroperaBLE Identifier](https://reelyactive.github.io/interoperable-identifier/) encapsulated as Eddystone UID. + + +## Controls + +Swipe left/right to select the emoji to broadcast. Tap the screen to initiate the broadcast. Emoji will flash while broadcasting, which lasts for 5 seconds. + + +## Requests + +[Contact reelyActive](https://www.reelyactive.com/contact/) for support/updates. + + +## Creator + +Developed by [jeffyactive](https://github.com/jeffyactive) of [reelyActive](https://www.reelyactive.com) diff --git a/apps/emojuino/emojuino-icon.js b/apps/emojuino/emojuino-icon.js new file mode 100644 index 000000000..d56749250 --- /dev/null +++ b/apps/emojuino/emojuino-icon.js @@ -0,0 +1 @@ +require("heatshrink").decompress(atob("mEwwkBiIAHkUoxGIwUiBxAAGiQVCAAeCkIWNCooADDBYWKDBYWEkc////+cyDBhxDCoQAD+YLDCw0YBQQVFAAYYCwIXFHQRDElGCJYgOCFw8vBwPyOgoJFGAg4BIoQWGDAhJCIwoLBHgYAGJQIjCIwguCnCRFRoeDGAZICAgOPFwaRGDAQfB/AwDBAYuCX44wDAgTrDBoIDBGYP/manBmYFBFYQPDwJeBD4iRGRoQ/FC4QqBEYIbERooTBCAeBNAIjBBQIDDAAggBG4IDDwQXBEQIDDUAgcCHASaBAYQTFMQpcFDYp+EEII9DAARRDFIIfDHIwXBVISlDC4YzD9wA0osFpwIF8lQqgWK8kAgEEBItABIIhGAAfgBoMABIoIChwX0jwED8oNBgoXFqAJBrwHD8IXEBwQNEEIYgFC4wAQ8MRC6sRC+BgULwIwHSINVpwuLC43kaAQABqgaHC4bZHAAkFqhGHGAovFAAYyDCwgwFL4IwGFxAwNFxIwG8lVCoSTEFw7bPCxAYNCxT0LIpIxMCpoyHFhI")) \ No newline at end of file diff --git a/apps/emojuino/emojuino.js b/apps/emojuino/emojuino.js new file mode 100644 index 000000000..5b7670652 --- /dev/null +++ b/apps/emojuino/emojuino.js @@ -0,0 +1,171 @@ +/** + * Copyright reelyActive 2021 + * We believe in an open Internet of Things + */ + + +// Emoji images are 96px x 96px, 4bpp (https://www.espruino.com/Image+Converter) +// and adapted from Font Awesome 5 +const GRIN = "sFgwkBiIATDwoaUFi4ynQZ4uuGDzlTF1wwaFyowYFy4wWiAvZgIutGCgubSKRecMCQudMCBeeMCAufMBxegMBwuhMBheiMBgujMBRekMBQvvF0qQIL0xgIF94unSA4vuR1CQGF94upSAovuR1SQEF94urSAY/PCBivQF5z/DEBQ+DEB5ePCJYOEMBgNNF8MBHpogNHwqBNF/4vsEAovOX7TviBhYgFD5Q/EEJoANEAY/OLxgAQPx5edAH4A/AH4A/AH4A/AEUQF1sBF/4v/F/4vviILJBRQANEZYLJHQIMKFpYABQhIiKC4QaMIhBHLF6AAVEhRQIF8ZuCF5B6GACYjMF9ZrOF8jAiKRgvvSEJROBo5gYEBw+IMCwfPB5BgWDxBPHCCBeVJxBgdJqIvJMCQcTCRAwRFxJ8KChQwODKwVJGBouKbZgXLDBQVLPBoZLDYxDMLxocQACLXOMBwARFxxgfLx5gfFyBgdLyIwcFyaRbFygwZFywwXFzAwVFzQwTFzgwRFzwxOFsIyKDSg"; +const MEH = "sFgwkBiIATDwoaUFi4ynQZ4uuGDzlTF1wwaFyowYFy4wWiAvZgIutGCgubSKRecMCQudMCBeeMCAufMBxegMBwuhMBheiMBgujMBRekMBQvvF0qQIL0xgIF94unSA4vuR1CQGF94upSAovuR1SQEF94urSAY/PCBivQF5z/DEBQ+DEB5ePCJYOEMBgNNF8MBHpogNHwqBNF/4vsEAovOX7TviBhYgFD5Q/EEJoANEAY/OLxgAQPx5edAH4A/AH4A/AH4A/AEUQF1sBF/4v/F/4vviIvtiIv/F9qeBACDgNB5ouSECAOLFyaBMKAYvrByQvgSBS/fD4jAfXxwQMADxAQF8iQLADjeGF96QoFwxgnLw4vwSEwuIMEpeJMEouKMEZeLMEYuMMEJeNMEIuOMD5ePMD4uQMDpeRGDguTSLYuUGDIuWGC4uYGCouaGCYucGCIueGJwthGRQaUA"; +const FROWN = "sFgwkBiIATDwoaUFi4ynQZ4uuGDzlTF1wwaFyowYFy4wWiAvZgIutGCgubSKRecMCQudMCBeeMCAufMBxegMBwuhMBheiMBgujMBRekMBQvvF0qQIL0xgIF94unSA4vuR1CQGF94upSAovuR1SQEF94urSAY/PCBivQF5z/DEBQ+DEB5ePCJYOEMBgNNF8MBHpogNHwqBNF/4vsEAovOX7TviBhYgFD5Q/EEJoANEAY/OLxgAQPx5edAH4A/AH4A/AH4A/AEUQF1sBF/4v/F/4vUgMRAAQZWFqwxWCgIuZGCYvSFxIcUFzYdTOZyNKSKQdCCJwuNMB5NDLzZOPIKAviCJguPJxpNEF94RLRyBONIKAvHNRQvRCKAMUJpIvOZxx9WAEbSTADReHF+CQmFxBglLxJglFxRgjLxZgjFxhghLxpghFxxgfLx5gfFyBgdLyIwcFyaRbFygwZFywwXFzAwVFzQwTFzgwRFzwxOFsIyKDSg"; +const THUMBS_UP = "sFgwkBiIAaiAiBDzYAQKYZQcLyAwsF4qSpcoxgoF4xgnRwwvxSEwvvFw4vwYEwv/F/4AOiAv/R1Av/F/6+PgIv/RzwvjLxQvkFxTujLxYvjFxaOiLxgvvR1wviR3gviR3YviFxg6iF7AwVRxowhFzUAgIvuMCSObF6YucSCJedF6IudSARQIHQheeAAIgKGAYufF+CbMF/4v/WYQv/F/6yPF/6OeF9wgNL/4v/F/4vhEQIv/R/4v/F/7ueF/4v/Xx4v/F/4v/F/4v/F/4v/F7ogOF/6OSEAgHCiAvrAwQHHRz4v/F/4v/F58QF8cBE4wPDGLYvHB5aTaKwQvUMS4vYGCx8QF5AwULwgvWYiZJQIAowXDowvYGJyqRFx4bKDRQA=="; +const THUMBS_DOWN = "sFgwkBiIAbiAoGEroAHLZgttMcK9RXEZgmFyZgHDZA/JFyogFDZQwHFqovXLiyQHB5wtaF6gubF/4v/F/4vwgIv/F7wgPF/6QTF/4v/F/4v/F/4v/F/4AdF/4v/YCIv/F/4v9EQIv/R/4v/F/7ueL+gFBiMQF8oiBE4wHHF/6QQF/4v/YigvugInBiAvrM5QvvM4gvqMFgvDMD0BF55gegJPKgIvEMDoeLF4pgdJ5QuGF7gjHABaQbFyRgbFygvZFyqQOEixgYF8RgMgIv/SH5gPYH6QfF8aQvMBgvjMBaQjMBYvkMBQv/SEAv/F/7APF/6QfF/4v/F/0BF8sQF/4vnF0rAJF9yOmSBAunF4xeoSAouqMAYTQA=="; +const HEART = "sFgwkBiIA/AH4A/AH4AogAADC1EQC4gaQCo8BIqYwRCyxdJDJoVLMJYuMGBIVNGBQYNDI5FOO5IXODI4WWI6BgGCywYTDIYVVO6gvXSAoYTDIQVTMAgYTDIJFUMAgYUACyOXAC7XWF7YurSAYvuR1iQCF/4v/F54utAH4A/AH4A/AH4A/AGMQF1sBF/4v/F58RF9sRF/4vgYFi+BMFouCF+CQqRwYvwSFQuEMFJeFMFIuGME5eHME4uIMEpeJMEouKMEZeLMEYuMMEJeNMEIuOMD5ePMD4uQMDpeRMDouSMDZeTMDYuUMDJeVMDIuWMC5eXMC4uYMCpeZMCouaMCZebMCYucMCJedF+CQQFzxgPFz5gPF8JgMXr5gPF0RgLL0ZgLF0hgJL0pgJF0xgHL05gHF1BgFL1JgFF1QwDF1gA/AH4A/AH4AJA="; +const TX = "k8XwkBiIAYEYogLHBAUIiBNKGxooKEggvJCYYHDKxAMFAoRrOCRAsHCYqbNHQibLKAauOLBCJHQw6JMQBIJBRJDWJThK5JJJi5KbpaJKFBaKEE5ybGHRhcOACEQA"; + + +// Emojis are pairs with the form [ Image String, Unicode code point ] +// For code points see https://unicode.org/emoji/charts/emoji-list.html +const EMOJIS = [ + [ GRIN, 0x1f642 ], // Slightly smiling + [ MEH, 0x1f610 ], // Neutral + [ FROWN, 0x1f641 ], // Slightly frowning + [ THUMBS_UP, 0x1f44d ], // Thumbs up + [ THUMBS_DOWN, 0x1f44e ], // Thumbs down + [ HEART, 0x02764 ], // Heart +]; +const EMOJI_TRANSMISSION_MILLISECONDS = 5000; +const BLINK_PERIOD_MILLISECONDS = 500; +const TRANSMIT_BUZZ_MILLISECONDS = 200; +const CYCLE_BUZZ_MILLISECONDS = 50; +const WELCOME_MESSAGE = 'Emojuino:\r\n\r\n< Swipe >\r\nto select\r\n\r\nTap\r\nto transmit'; + +// Non-user-configurable constants +const IMAGE_INDEX = 0; +const CODE_POINT_INDEX = 1; +const EMOJI_PX = 96; +const EMOJI_X = (g.getWidth() - EMOJI_PX) / 2; +const EMOJI_Y = (g.getHeight() - EMOJI_PX) / 2; +const TX_X = 68; +const TX_Y = 12; +const FONT_SIZE = 24; +const BTN_WATCH_OPTIONS = { repeat: true, debounce: 20, edge: "falling" }; +const UNICODE_CODE_POINT_ELIDED_UUID = [ 0x49, 0x6f, 0x49, 0x44, 0x55, + 0x54, 0x46, 0x2d, 0x33, 0x32 ]; + + + +// Global variables +let emojiIndex = 0; +let isToggleOn = false; +let isTransmitting = false; +let lastDragX = 0; +let lastDragY = 0; + + +// Cycle through emojis +function cycleEmoji(isForward) { + if(isTransmitting) { return; } + + if(isForward) { + emojiIndex = (emojiIndex + 1) % EMOJIS.length; + } + else if(--emojiIndex < 0) { + emojiIndex = EMOJIS.length - 1; + } + + drawImage(EMOJIS[emojiIndex][IMAGE_INDEX]); + Bangle.buzz(CYCLE_BUZZ_MILLISECONDS); +} + + +// Handle a touch: transmit displayed emoji +function handleTouch(zone, event) { + if(isTransmitting) { return; } + + let emoji = EMOJIS[emojiIndex]; + transmitEmoji(emoji[IMAGE_INDEX], emoji[CODE_POINT_INDEX], + EMOJI_TRANSMISSION_MILLISECONDS); + Bangle.buzz(TRANSMIT_BUZZ_MILLISECONDS); +} + + +// Transmit the given code point for the given duration in milliseconds, +// blinking the image once per second. +function transmitEmoji(image, codePoint, duration) { + let instance = [ 0x00, 0x00, (codePoint >> 24) & 0xff, + (codePoint >> 16) & 0xff, (codePoint >> 8) & 0xff, + codePoint & 0xff ]; + + require('ble_eddystone_uid').advertise(UNICODE_CODE_POINT_ELIDED_UUID, + instance); + isTransmitting = true; + drawImage(EMOJIS[emojiIndex][IMAGE_INDEX], true); + + let displayIntervalId = setInterval(toggleImage, BLINK_PERIOD_MILLISECONDS, + image); + + setTimeout(terminateEmoji, duration, displayIntervalId); +} + + +// Terminate the emoji transmission +function terminateEmoji(displayIntervalId) { + NRF.setAdvertising({ }); + isTransmitting = false; + clearInterval(displayIntervalId); + drawImage(EMOJIS[emojiIndex][IMAGE_INDEX], false); +} + + +// Toggle the display between image/off +function toggleImage(image) { + if(isToggleOn) { + drawImage(EMOJIS[emojiIndex][IMAGE_INDEX], true); + } + else { + g.clear(); + } + isToggleOn = !isToggleOn; +} + + +// Draw the given emoji +function drawImage(image, isTx) { + g.clear(); + g.drawImage(require("heatshrink").decompress(atob(image)), EMOJI_X, EMOJI_Y); + if(isTx) { + g.drawImage(require("heatshrink").decompress(atob(TX)), TX_X, TX_Y); + } + else { + g.drawString("< Swipe >", g.getWidth() / 2, g.getHeight() - FONT_SIZE); + } + g.flip(); +} + + +// Handle a drag event +function handleDrag(event) { + let isFingerReleased = (event.b === 0); + + if(isFingerReleased) { + let isHorizontalDrag = (Math.abs(lastDragX) >= Math.abs(lastDragY)) && + (lastDragX !== 0); + + if(isHorizontalDrag) { + cycleEmoji(lastDragX > 0); + } + } + else { + lastDragX = event.dx; + lastDragY = event.dy; + } +} + + +// Special function to handle display switch on +Bangle.on('lcdPower', (on) => { + if(on) { + drawImage(EMOJIS[emojiIndex][IMAGE_INDEX], false); + } +}); + + +// On start: display the first emoji and handle drag and touch events +g.clear(); +g.setFont('Vector', FONT_SIZE); +g.setFontAlign(0, 0); +g.drawString(WELCOME_MESSAGE, g.getWidth() / 2, g.getHeight() / 2); +Bangle.on('touch', handleTouch); +Bangle.on('drag', handleDrag); diff --git a/apps/emojuino/emojuino.png b/apps/emojuino/emojuino.png new file mode 100644 index 000000000..614cc025e Binary files /dev/null and b/apps/emojuino/emojuino.png differ diff --git a/apps/emojuino/screenshot-swipe.png b/apps/emojuino/screenshot-swipe.png new file mode 100644 index 000000000..a870724b9 Binary files /dev/null and b/apps/emojuino/screenshot-swipe.png differ diff --git a/apps/emojuino/screenshot-tx.png b/apps/emojuino/screenshot-tx.png new file mode 100644 index 000000000..212d41f88 Binary files /dev/null and b/apps/emojuino/screenshot-tx.png differ diff --git a/apps/emojuino/screenshot-welcome.png b/apps/emojuino/screenshot-welcome.png new file mode 100644 index 000000000..4cf1fecdf Binary files /dev/null and b/apps/emojuino/screenshot-welcome.png differ diff --git a/apps/fd6fdetect/ChangeLog b/apps/fd6fdetect/ChangeLog index 3c82c3ca7..b85df5ace 100644 --- a/apps/fd6fdetect/ChangeLog +++ b/apps/fd6fdetect/ChangeLog @@ -1 +1,2 @@ 0.1: Added source code +0.2: Added a README file diff --git a/apps/fd6fdetect/README.md b/apps/fd6fdetect/README.md new file mode 100644 index 000000000..1a7cce8bd --- /dev/null +++ b/apps/fd6fdetect/README.md @@ -0,0 +1,3 @@ +# FD6FDetect + +An app dedicated to letting you know how many Exposure Notification beacons are near you. diff --git a/apps/ffcniftya/ChangeLog b/apps/ffcniftya/ChangeLog new file mode 100644 index 000000000..18bc264a3 --- /dev/null +++ b/apps/ffcniftya/ChangeLog @@ -0,0 +1 @@ +0.01: New Clock Nifty A diff --git a/apps/ffcniftya/README.md b/apps/ffcniftya/README.md new file mode 100644 index 000000000..f1fee9b1f --- /dev/null +++ b/apps/ffcniftya/README.md @@ -0,0 +1,4 @@ +# Nifty-A Clock + +![](screenshot_nifty.png) + diff --git a/apps/ffcniftya/app-icon.js b/apps/ffcniftya/app-icon.js new file mode 100644 index 000000000..f0a2393b1 --- /dev/null +++ b/apps/ffcniftya/app-icon.js @@ -0,0 +1 @@ +require("heatshrink").decompress(atob("mEwwkEIf4A5gX/+AGEn//mIWLgP/C4gGCAAMgC5UvC4sDC4YICkIhBgMQiEBE4Uxn4XDj//iEAn/yA4ICBgUikEikYXBBAIXEn/xJYURAYMygERkQHBiYLBKYIXF+AVDC4czgUSmIXBCQgED+ZeBR4YXBLYICDC5CPGC4IAIC40zmaPDC4MSLQQXK+ayCR4QXCiRoEC44ECh4bCC4MTiTDBC6ZHOC5B3NLYcvC4kBgL5BAAUikT+BfIIrB/8ykf/eYQXBkUTI4cBW4YQCgQGDmAXDkJfEC46GBAoJKCR4geCAAMRAAZRDAoIODO4UBPRIAJR5QXWgKNCTApNDC5Mv/6/DAwR3GAAyHCC4anJIo3/+bvEa4Uia4oXHkEvC4cvIgUf+YXKHYIvEAgcPC5QSGC5UBSwYXJLYQXFkUhgABBC5Ef/4mBl4XEmETmIXKgaXBmYCBC4cTkMxiQXJS4IACL4p3MgESCwJHFR5oxCiB3FkERC5cSToQXFmUyiAZFR48Bn7zCAQMjkfykQkBN4n/XgKPBAAQgCUQIfBUwYXHFgIGCdI4XDmYADmIIEkAWJAH4A4A==")) \ No newline at end of file diff --git a/apps/ffcniftya/app.js b/apps/ffcniftya/app.js new file mode 100644 index 000000000..31742f64a --- /dev/null +++ b/apps/ffcniftya/app.js @@ -0,0 +1,95 @@ +const locale = require("locale"); +const is12Hour = (require("Storage").readJSON("setting.json", 1) || {})["12hour"]; + +/* Clock *********************************************/ +const scale = g.getWidth() / 176; + +const widget = 24; + +const viewport = { + width: g.getWidth(), + height: g.getHeight(), +} + +const center = { + x: viewport.width / 2, + y: Math.round(((viewport.height - widget) / 2) + widget), +} + +function d02(value) { + return ('0' + value).substr(-2); +} + +function draw() { + g.reset(); + g.clearRect(0, widget, viewport.width, viewport.height); + const now = new Date(); + + const hour = d02(now.getHours() - (is12Hour && now.getHours() > 12 ? 12 : 0)); + const minutes = d02(now.getMinutes()); + const day = d02(now.getDate()); + const month = d02(now.getMonth() + 1); + const year = now.getFullYear(); + + const month2 = locale.month(now, 3); + const day2 = locale.dow(now, 3); + + g.setFontAlign(1, 0).setFont("Vector", 90 * scale); + g.drawString(hour, center.x + 32 * scale, center.y - 31 * scale); + g.drawString(minutes, center.x + 32 * scale, center.y + 46 * scale); + + g.fillRect(center.x + 30 * scale, center.y - 72 * scale, center.x + 32 * scale, center.y + 74 * scale); + + g.setFontAlign(-1, 0).setFont("Vector", 16 * scale); + g.drawString(year, center.x + 40 * scale, center.y - 62 * scale); + g.drawString(month, center.x + 40 * scale, center.y - 44 * scale); + g.drawString(day, center.x + 40 * scale, center.y - 26 * scale); + g.drawString(month2, center.x + 40 * scale, center.y + 48 * scale); + g.drawString(day2, center.x + 40 * scale, center.y + 66 * scale); +} + + +/* Minute Ticker *************************************/ + +let tickTimer; + +function clearTickTimer() { + if (tickTimer) { + clearTimeout(tickTimer); + tickTimer = undefined; + } +} + +function queueNextTick() { + clearTickTimer(); + tickTimer = setTimeout(tick, 60000 - (Date.now() % 60000)); + // tickTimer = setTimeout(tick, 3000); +} + +function tick() { + draw(); + queueNextTick(); +} + +/* Init **********************************************/ + +// Clear the screen once, at startup +g.clear(); +// Start ticking +tick(); + +// Stop updates when LCD is off, restart when on +Bangle.on('lcdPower', (on) => { + if (on) { + tick(); // Start ticking + } else { + clearTickTimer(); // stop ticking + } +}); + +// Load widgets +Bangle.loadWidgets(); +Bangle.drawWidgets(); + +// Show launcher when middle button pressed +Bangle.setUI("clock"); \ No newline at end of file diff --git a/apps/ffcniftya/app.png b/apps/ffcniftya/app.png new file mode 100644 index 000000000..1cd8a49b7 Binary files /dev/null and b/apps/ffcniftya/app.png differ diff --git a/apps/ffcniftya/screenshot_nifty.png b/apps/ffcniftya/screenshot_nifty.png new file mode 100644 index 000000000..0df056223 Binary files /dev/null and b/apps/ffcniftya/screenshot_nifty.png differ diff --git a/apps/ffcniftyb/ChangeLog b/apps/ffcniftyb/ChangeLog new file mode 100644 index 000000000..dedd31452 --- /dev/null +++ b/apps/ffcniftyb/ChangeLog @@ -0,0 +1,2 @@ +0.01: New Clock Nifty B +0.02: Added configuration \ No newline at end of file diff --git a/apps/ffcniftyb/README.md b/apps/ffcniftyb/README.md new file mode 100644 index 000000000..e04243a0b --- /dev/null +++ b/apps/ffcniftyb/README.md @@ -0,0 +1,9 @@ +# Nifty Series B Clock + +- Display Time and Date +- Color Configuration + +## + +![](screenshot.png) + diff --git a/apps/ffcniftyb/app-icon.js b/apps/ffcniftyb/app-icon.js new file mode 100644 index 000000000..1aac04351 --- /dev/null +++ b/apps/ffcniftyb/app-icon.js @@ -0,0 +1 @@ +require("heatshrink").decompress(atob("mEwwkB/4A/AH4ARgMRBA3xBBIJCAYIFDAAYHGCAYJBDYQABj4PD+AXFCwgXGCAg9ECwwJBJQooGCxAXCIYQpBAgg9IC5yPCCw4XKBYIsFPwUBXQQXHAYREIF5ZEC+MfWQYXODQYTGC5ZDEOw0QMAIXMPggvSC44vRL5b8EAYIACC5i0FCwaOBC5C0DA4ZLCC5hfC/4DBIwwXKCInwgAWEKIwXJAA4XXCxYXCEwR2EgJeLR5LbCGRYXIAgzvKh7zGZg4XGIYisBA4JJCC6B5DAoYXWF6xfRC4fwAgMBC6cBU5I6CC5AECCo0QJwQXJaZJHMEYR1JC5QKBXo8QC4oCBAZAwHgKXBTQwSDBIKmGgJ3DEYheEA4ZfJKgkPdJQXHDAQWBC44eIC4QAMDA4A==")) \ No newline at end of file diff --git a/apps/ffcniftyb/app.js b/apps/ffcniftyb/app.js new file mode 100644 index 000000000..75d217ab4 --- /dev/null +++ b/apps/ffcniftyb/app.js @@ -0,0 +1,118 @@ +const locale = require("locale"); +const storage = require('Storage'); + +const is12Hour = (storage.readJSON("setting.json", 1) || {})["12hour"]; +const color = (storage.readJSON("ffcniftyb.json", 1) || {})["color"] || 63488 /* red */; + + +/* Clock *********************************************/ +const scale = g.getWidth() / 176; + +const screen = { + width: g.getWidth(), + height: g.getHeight() - 24, +}; + +const center = { + x: screen.width / 2, + y: screen.height / 2, +}; + +function d02(value) { + return ('0' + value).substr(-2); +} + +function renderEllipse(g) { + g.fillEllipse(center.x - 5 * scale, center.y - 70 * scale, center.x + 160 * scale, center.y + 90 * scale); +} + +function renderText(g) { + const now = new Date(); + + const hour = d02(now.getHours() - (is12Hour && now.getHours() > 12 ? 12 : 0)); + const minutes = d02(now.getMinutes()); + const day = d02(now.getDate()); + const month = d02(now.getMonth() + 1); + const year = now.getFullYear(); + + const month2 = locale.month(now, 3); + const day2 = locale.dow(now, 3); + + g.setFontAlign(1, 0).setFont("Vector", 90 * scale); + g.drawString(hour, center.x + 32 * scale, center.y - 31 * scale); + g.drawString(minutes, center.x + 32 * scale, center.y + 46 * scale); + + g.setFontAlign(1, 0).setFont("Vector", 16 * scale); + g.drawString(year, center.x + 80 * scale, center.y - 42 * scale); + g.drawString(month, center.x + 80 * scale, center.y - 26 * scale); + g.drawString(day, center.x + 80 * scale, center.y - 10 * scale); + g.drawString(month2, center.x + 80 * scale, center.y + 44 * scale); + g.drawString(day2, center.x + 80 * scale, center.y + 60 * scale); +} + +const buf = Graphics.createArrayBuffer(screen.width, screen.height, 1, { + msb: true +}); + +function draw() { + + const img = { + width: screen.width, + height: screen.height, + transparent: 0, + bpp: 1, + buffer: buf.buffer + }; + + // cleat screen area + g.clearRect(0, 24, g.getWidth(), g.getHeight()); + + // render outside text with ellipse + buf.clear(); + renderText(buf.setColor(1)); + renderEllipse(buf.setColor(0)); + g.setColor(color).drawImage(img, 0, 24); + + // render ellipse with inside text + buf.clear(); + renderEllipse(buf.setColor(1)); + renderText(buf.setColor(0)); + g.setColor(color).drawImage(img, 0, 24); +} + + +/* Minute Ticker *************************************/ + +let ticker; + +function stopTick() { + if (ticker) { + clearTimeout(ticker); + ticker = undefined; + } +} + +function startTick(run) { + stopTick(); + run(); + ticker = setTimeout(() => startTick(run), 60000 - (Date.now() % 60000)); + // ticker = setTimeout(() => startTick(run), 3000); +} + +/* Init **********************************************/ + +g.clear(); +startTick(draw); + +Bangle.on('lcdPower', (on) => { + if (on) { + startTick(draw); + } else { + stopTick(); + } +}); + +Bangle.loadWidgets(); +Bangle.drawWidgets(); + +Bangle.setUI("clock"); diff --git a/apps/ffcniftyb/app.png b/apps/ffcniftyb/app.png new file mode 100644 index 000000000..a6acf0121 Binary files /dev/null and b/apps/ffcniftyb/app.png differ diff --git a/apps/ffcniftyb/screenshot.png b/apps/ffcniftyb/screenshot.png new file mode 100644 index 000000000..f7d3fd678 Binary files /dev/null and b/apps/ffcniftyb/screenshot.png differ diff --git a/apps/ffcniftyb/settings.js b/apps/ffcniftyb/settings.js new file mode 100644 index 000000000..00abf80b5 --- /dev/null +++ b/apps/ffcniftyb/settings.js @@ -0,0 +1,49 @@ +(function (back) { + const storage = require('Storage'); + const SETTINGS_FILE = "ffcniftyb.json"; + + const colors = { + 65535: 'White', + 63488: 'Red', + 65504: 'Yellow', + 2047: 'Cyan', + 2016: 'Green', + 31: 'Blue', + 0: 'Black', + } + + function load(settings) { + return Object.assign(settings, storage.readJSON(SETTINGS_FILE, 1) || {}); + } + + function save(settings) { + storage.write(SETTINGS_FILE, settings) + } + + const settings = load({ + color: 63488 /* red */, + }); + + const saveColor = (color) => () => { + settings.color = color; + save(settings); + back(); + }; + + function showMenu(items, opt) { + items[''] = opt || {}; + items['< Back'] = back; + E.showMenu(items); + } + + showMenu( + Object.keys(colors).reduce((menu, color) => { + menu[colors[color]] = saveColor(color); + return menu; + }, {}), + { + title: 'Color', + selected: Object.keys(colors).indexOf(settings.color) + } + ); +}); diff --git a/apps/files/files-icon.js b/apps/files/files-icon.js index 7e55db9e0..7f7ea4d0c 100644 --- a/apps/files/files-icon.js +++ b/apps/files/files-icon.js @@ -1 +1 @@ -require("heatshrink").decompress(atob("mEwghC/AEkIxAABwUiAAwKBC6+AC6ERiIXDGBAXPGA8JzIAByQXKGA4XUA4eDmYAGJwQXVxEizAXPIgIXDwWZC6uIxIwCC6eIGAQX/C9i/FC5mCCw0yC5wAMC/4Xnx//ABf4C/Xzdw8zn4XkL/5f/L+oUDI6YX3AB4XeAH4AdA==")) +require("heatshrink").decompress(atob("mEw4cA///7c0AYMXlm3gf42s1yvb5xT/ABdJkmStu27YCCtMkCKOACJdm7YRCyARQyQRLBwIRDoARTgVLtu3K4tJl4RQkvpCJdbtwRBkm5CKGZCKGTCKGSsgR/R4gRHpIMBCInaCJIIBARAR/CJtPB5FLCI1KEhMSCLN//4AE/QRbI/5H/CI4PCGpwRXp4RIpZFDCIQiJAQIRWAH4AGA")) diff --git a/apps/files/files.js b/apps/files/files.js index 9ac6ebb35..e7b42c101 100644 --- a/apps/files/files.js +++ b/apps/files/files.js @@ -7,13 +7,9 @@ function showMainMenu() { '': { 'title': 'App Manager', }, - 'Free': { - value: undefined, - format: (v) => { - return store.getFree(); - }, - onchange: () => {} - }, + '< Back': ()=> {load();}, + 'Sort Apps': () => showSortAppsMenu(), + 'Manage Apps': ()=> showApps(), 'Compact': () => { E.showMessage('Compacting...'); try { @@ -22,9 +18,13 @@ function showMainMenu() { } showMainMenu(); }, - 'Apps': ()=> showApps(), - 'Sort Apps': () => showSortAppsMenu(), - '< Back': ()=> {load();} + 'Free': { + value: undefined, + format: (v) => { + return store.getFree(); + }, + onchange: () => {} + }, }; E.showMenu(mainmenu); } diff --git a/apps/findphone/ChangeLog b/apps/findphone/ChangeLog index 86558abf5..29100f3c1 100644 --- a/apps/findphone/ChangeLog +++ b/apps/findphone/ChangeLog @@ -1,2 +1,3 @@ 0.01: First Version 0.02: Remove HID requirement, update screen +0.03: Fix for Bangle 2, toggle find with top half of screen, exit touch bottom half of screen diff --git a/apps/findphone/README.md b/apps/findphone/README.md index c655457a2..64e719d6a 100644 --- a/apps/findphone/README.md +++ b/apps/findphone/README.md @@ -6,3 +6,8 @@ Ring your phone via GadgetBridge if you lost it somewhere. 2. Lose phone 3. Open app 4. Click any button or screen + +## On a Bangle 2 + +- You can touch the top half of the screen to toggle Find / Stop +- You can touch the bottom half of the screen to exit the app. diff --git a/apps/findphone/app.js b/apps/findphone/app.js index 34f729bc7..e5e32739a 100644 --- a/apps/findphone/app.js +++ b/apps/findphone/app.js @@ -1,13 +1,15 @@ //notify your phone +const fontSize = g.getWidth() / 8; var finding = false; function draw() { // show message - g.clear(1); - require("Font8x12").add(Graphics); - g.setFont("8x12",3); + g.clear(g.theme.bg); + g.setColor(g.theme.fg); + g.setFont("Vector", fontSize); g.setFontAlign(0,0); + if (finding) { g.drawString("Finding...", g.getWidth()/2, (g.getHeight()/2)-20); g.drawString("Click to stop", g.getWidth()/2, (g.getHeight()/2)+20); @@ -17,17 +19,37 @@ function draw() { g.flip(); } +function findPhone(v) { + Bluetooth.println(JSON.stringify({t:"findPhone", n:v})); +} + function find(){ finding = !finding; draw(); - Bluetooth.println("\n"+JSON.stringify({t:"findPhone", n:finding})); + findPhone(finding); } draw(); //register all buttons and screen to find phone setWatch(find, BTN1, {repeat:true}); -setWatch(find, BTN2, {repeat:true}); -setWatch(find, BTN3, {repeat:true}); -setWatch(find, BTN4, {repeat:true}); -setWatch(find, BTN5, {repeat:true}); + +if (process.env.HWVERSION == 1) { + setWatch(find, BTN2, {repeat:true}); + setWatch(find, BTN3, {repeat:true}); + setWatch(find, BTN4, {repeat:true}); + setWatch(find, BTN5, {repeat:true}); +} + +if (process.env.HWVERSION == 2) { + Bangle.on('touch', function(button, xy) { + + // click top part of the screen to stop start + if (xy.y < g.getHeight() / 2) { + find(); + } else { + findPhone(false); + setTimeout(load, 100); // exit in 100ms + } + }); +} diff --git a/apps/flappy/README.md b/apps/flappy/README.md new file mode 100644 index 000000000..7a8f6c548 --- /dev/null +++ b/apps/flappy/README.md @@ -0,0 +1,5 @@ +# Flappy Bird + +![](screenshot1_flappy.png) +![](screenshot2_flappy.png) + diff --git a/apps/flappy/screenshot1_flappy.png b/apps/flappy/screenshot1_flappy.png new file mode 100644 index 000000000..63b283db1 Binary files /dev/null and b/apps/flappy/screenshot1_flappy.png differ diff --git a/apps/flappy/screenshot2_flappy.png b/apps/flappy/screenshot2_flappy.png new file mode 100644 index 000000000..0c589cdec Binary files /dev/null and b/apps/flappy/screenshot2_flappy.png differ diff --git a/apps/floralclk/ChangeLog b/apps/floralclk/ChangeLog new file mode 100644 index 000000000..5560f00bc --- /dev/null +++ b/apps/floralclk/ChangeLog @@ -0,0 +1 @@ +0.01: New App! diff --git a/apps/floralclk/README.md b/apps/floralclk/README.md new file mode 100644 index 000000000..6cffc6e55 --- /dev/null +++ b/apps/floralclk/README.md @@ -0,0 +1,4 @@ +# Floral Clock + +![](screenshot_floral.png) + diff --git a/apps/floralclk/app-icon.js b/apps/floralclk/app-icon.js new file mode 100644 index 000000000..4dfc57191 --- /dev/null +++ b/apps/floralclk/app-icon.js @@ -0,0 +1 @@ +require("heatshrink").decompress(atob("mEwhE+sVin0/tVjsdim84sdro1GAQNrAAlHAYVqABk/FINosc/AoNpF4cTGoMTnIhBo1qEgIvFABJACoAvEFwJaDGoNjnFpn5eCik/DYQwBAAQwOFIMUDYKBBLwQwBnwoBBAM3GIIEBhs5E4RLBPYqMKFwU4AAM+nwCBF4SJCAwMxXII2BnBeDJogAGNQIAFBIJMBRIYvCLQK+Bow7BhsNCINjm45BXwZgHF5ITBigoBF4NpQoIwBLwLJBn8Oh0NBoU4F4J6CF4RiKR47iCtIrBiaGBEgdknMOnBABiYKBtNkKoaUIdo5hCQoKvBYgKGBGAIJBMANjhqfBHgLQBNgKcBEpAxBBA9HHoiwBF4S3BcoM4Nwdim83sVEGAINBMQIfBEASYGLII4ECISFBnEyFgKHBGwRsDHYKfBaQOGrifCXw4qBNgIEBXoQHBCQZXBnArCAQNpnBWBFwUTBINiwGkwFcsbzDEwJcFG4pcCAAMUik/EIKJBn6JBMYNpnzABsY0BwGeAAN6wLnCEQQACF4ztCF4UUJ4QNDGAKTCtMTnASBHwOezAwCveIP4ReEeQzNDFwgvDDQU/oDlDJYVkF4e8z2Hx2Px2IAAKKEGo1qnAuBtLYBBwRJCAoIuCbgVqxAsCAQWB1mBwN6AANWmSwBJwRcCDIIuDnxAGAYU5HQmPF4W84QBBvWlGoOY4TIBmMxnJGCYYc5ik+coNjn8UhsUiqRDGQQUBQQJUBz3CzAxBYYYADvWGsTZBDoNHcQUTXgU+n1pB4LmBFQSUCAoNkw4uCF4QBBF4QFBAAIFBF4IjBoBMCn84nwtCMAIABm8TnLREXYd7KQSLBzoBDAQJlBBQN5w1osU/VAQuBnCLBGQNpGYM4R4LRCAATTBRgJcCy4kBz3I5HO5HHy4JBYwRfBcYIfBoE4m5YCho0BA4M4FwzzCxCMBEIO73guB5wAC5BgBSoWAF4KQBsdkKoKNChoACik4nIuHF4i0BdQOdF4XNAQK8Cz2lqzjCnCIBFwTnBS4IrBTQQuBdoLuCBAWOdoOYWgRfC5ovDy4vDriDCAAS8CFQYADdQgvCowvDSAK0CF4SPC4QwCvVcmUymMxFwSUBFwQoDFQToBAoIsBBoSQBMASRBy6QDXwIJCSIWAFwjzDWowAKGYOHwIhBYIOezooC3YuBF4d6GAK/BYAVkF6CUExBiBYQQCBFQIvCzAvCAYM3LoUTLwIeDF5pBDSQRgCLQYDBZQZrBz1cw9iiZeCWoQvWeYQuBfIIxCLwd6w1inEULyQvFtYvFEwOB0uBz4zCX4QuBnDsCDortNCQNHL4mYFwN7ZAOIfgN6AANcsc+m6NBDoRgQFwNGo5FBx2HKoZeBHYNqsg7BqtVsS8BRoReCL6AgBSYQ1CwJWBveHZYlkmMxLwM4h05sgADPwRRCF5ouDMIKKCxwPDsk4mM4XgMTXwLvBikOYYQvOBoQOBoE/JA4DBn8UFwNim8NF4QABhsNnIvQUgVAnMOVoQ4CAANqscUidiRoMNm4zBAAQHBF6CLDO4JIBGAVHXgYiBn1jn0NGYVoAAIvBIwYvOBgM/hyxBAAQXBHYU5RANjscTLwNjLgIuBny+FF5xeBhtcPYU+DYJeDRog0CCIYSBoAvRGAMUmOHJgcbF4QuBFIUNmIBBeYItCIIRNBd54ABisUVgNED4QJBn69Dm4uBh0OnIsBoArCFBoPDHgNqoAvBL4YvCb4JeBnxiCslkDogvRNQVGGALrBVobwBfAMNXoMTigsHDINHAAIvJGIdGn9ro4FBscNMANpF4LoBm4DChq1BFAJDBDobmMMIgvDA4UULwKHBMoLlBG4MynBeBCYQfFF56MBoAbDMAKzBnETm7oBGoM4hxeCQoJfCcJC/KAgIvFMAMNAASNBsQ1BLwVqFwIeELppCBF4dq")) diff --git a/apps/floralclk/app.js b/apps/floralclk/app.js new file mode 100644 index 000000000..5fb9303a8 --- /dev/null +++ b/apps/floralclk/app.js @@ -0,0 +1,76 @@ +function getImg() { + return require("heatshrink").decompress(atob("2F0gdt23bAX4C/AWvYppB+2kAgM2IPuwgRB/2ESpJB/IIMmzYUN6EJIN1IgECChuAa9u0IIUApoUMgVAINsCoMkwBBMKYRBs0kAgMkyBBGwDOEIIUmDoqbOAS0EySDBII1sgMAIJmgLgJBithBLpMkYpmBkmBIMckyTFByQLFsBBGgRBGxJBlgmQIIOTBYtiII0AgDFEtkJkmAJQoCdgGSFAILGgRBD7QOBIIMAibUFyBBj22SpJxEtsG7cSIIfQH4QACBAMAiBBn7ZBFsEAghLBIIXAAgJBDhuBkgOCyBcFIMDFEYQRBHwDIBAQIDBIIcAIMsEAobCCII0ggA9BHQJBEyUAjZBx7TCCQYRBDtu0yVIgZBizdJgGbYpQRB2mAoBEBhuBIIlJIMWggEBkBBDsA+Bydt0gUEwFJ0wFB2CDowDrBIIltWwJBGQYIaESQZBBjZBhghBCEwmJIJGCIJNJrZBhEoMAkhBDtiDDklsgEApukIIjFCIIVATwhBggjsBkhBBOIcktEEwEN0j7EIIw+fAQWkyEIIINggEbsBBEsEkwCLBiZBJgBBi2matuEwS7BgdiII2QhMgagZBCyFIIMoCCwGAgJBJyRBG2kAgMwBgMGIM41BZANJghBGgGbC4nAhu2TQMmIMugiBBDgBBDtkAyEIIIxEDgI4coBfI2D7BgETBAUCIIKPBgBBByR3k23aUQJrH2mQBYIIDsFIIIL+BpEAwEBmxBmO4ZBEiUAgwIDYQMAAoPQoEEKAJBlfYQLHyQyIpu26VAkgOBcBBBcegJBIwVAQYgCChJBq7ZBBgVtgEbBYnApBBHgJBBgEkyEBSQ9sghBetEAiYLE7EJgAUGoLRBgMkgFJEY9AgGbILVIkECZA/aIJO0iCGBEZMAILiABgEJII8BkDOFTAM0yEJEZJZBkhBbtuAIITFE2kAIJMgwENIJSkBILmkIIQ4E0GSgEkgQOBYokEwFNUhEE6RBekiwBkAIEIINIIILUBR4cBgkAEBFAgmCILtpkh6CIIsSIILSBgCGBBYMAggFDAQqhBwBBBQDJBDyFJkwLE2mSNwJBBZARBCkkDIOe2d4JBBgIvBIIcgZYYCFCIUAEAzFYMROgyBBFgMgiQgKIIMEzZBatskyZBJ2BBCwS5DkEQgIgI0hBBgEbILZlDEBESIIMCIIcAyVAXJG0gAUBahKGWEAOkEYvCoEAgYICpEEyT7J2ECoJBg0mDIgI4DIJFAgmQgEGDo+AyTmBYrxBBwQjBXgYCB6FIeQkBkGAwBBHtkEydtkBBf2mSU4ImBBYfaIIObIIe0wmSII9gkgRBAQRBeiRBBEY1JgDyDhO28mSoAdGgMkHbgCGYoRBHkEDAoVNIIVBoEAJofYhKeGATvApEEBY1hkkABAlEbAWSgBNC4BTBgENIMPQpMmBY1AgmAQAIIBwA+BSwJBBwARBgAHBwBBjhJBG7EAIIIvBzdsgBBFyFN2kCIMvadgLOGBAOQgOwidgAwJBEyVN0ESgLFBSoYCfgJBHeoJBBgECsA+CIIqGBgAOBH0ACCsEgzZBHiAyBgFiHwIPBRoMEyFIgGABoMTfa8AgxBKkkbYo0AiUAHAJBFyUEwFAAQMAkx3X4CkBBxNoghoFKwJBBGoOSYoRBDRoUkQC4CCE4MAiEBmxBIwQIE7SAB7BBByBBDtLFBIAMBbowCERh5iBoAhBCg9BgBBFIgdIXINshIdBIgIgCagLpKgBNKAQWwEYRBBggOF6AuByFNDQ9JkEAtq9BIIpNBIJTZCIKGAgEbBwnSFwUJDQ9pIIW0IIggBpEGGRNBkmTIKACBpBBF4QKBiUBDREkIILjCDocCoE2IMEDBwnABQMCoIsIkmAAoMEyQwBDoJWBIJUBIJts5KnFgRBFhMgNxWkIIQaBgMECQMQTBJBQoA+DdIcNIIkAAANIOwIQBzYdD2mSQYcE6ATBwAdEGQ8kiZBLgQ+CVwJBCMonYFgPYhYYDCAJBGwmQg3bsBBM6QjBIJfYN4STB0jpBgTpH7VbAwhBD2xBCSoIXBoEEgFt0wyH0GSU4VNIJUSIItJiVBIIu0ywbGkxuDKAQKCGQQABa4gCBtjWBoEAyRuHQZZJBCIukGYNJk36BgVkGQm0AoXagMgIIUbIJdAL4aDJVYLFDTA0t3/SIIP+AQIqBIIkAgYFB6EJgAlBII9tkmQIIUAIJPaIIYCCpETCItptu3+RBDkgMBLAJxCgECAoOAhBBDYoyVBHwMAiDFK7dghJBFMQ1rAYKACIITaB2QOCtAtBAoMApB0BIIIyJoDIBWAwCFxJBMpdt03/IImaIIImCsEEyFN2kCWwVISgS2HoDCJWYMkTYOxIIlAIIvardt0nf5JBF2xBDDIMN2BBCiUJWxJBMpEEIJDmF7QDB0mf9MnIIXfII9NwESZQMSWw/aBAPSoBNJ7YoBII2Qgj3BCIfWAYMkyf5IIQCBFQPJCINoQYWAiEBGRPAgEENoIOI2nahJBC2AkBMYMAG4JBGv+kIILFCn/yIIlsF4MNgGQhJxHAQOApMgagJBIwEAhMgfwO0QAS7CIIv27f//2Sv8k7VJ33SpJBDtpBBhEAwENIJOCV4MCSROEwEJgD+CJAMmIIWSIIubv//6V9a4W2AQRBDwmQWwOARwJBLiUBBxEETwMABY5BG22bpO//1NkiABIgU27JrC0DgCgQ+HAQXCDIMQIJOAyQeBBY1AVoJBF7dJk//5M3/5BI2AiBfAJBKLYWQIJOgIJD3BGIIID2hBCkn//M///pII+0gEBkETIJQfBkGQhoOIDocbIJwJCzf/IIP5m/+IIu2wDpBEYrvIwBBJDoIuBL4pBM71tIIQCB/+27MmDQXAhEAzZBMwhBLiQuBL4vYhMgyVNYo03/VJYoR+BIQP5QYZBCHxQCCgmABZO0iVBghfF7TOBII9//3SpMm/6TCpO/IItIghBMthBL2AlBkgLGoIxBTYZBD+hLBHwQCCm3ZIIeAoEGIJ0CIJYaKIIm2AYNpHYNt0hBKgVAkxBMtEkgVICJGEyAaKXYM2aIQJBHYVvkmTI4VJ2xBD2kCgE2yQyJAQNgkEAoEABYmkyZBBwRBLZAKeCIIl/IIP/ZYJRB5JBC2ESgE0yTILoJBBpEANYQLBghBCwZBQyxBCyd9IIX/SYO2IIsBKQNIIJUBkDFBgEbBAVsgmSpkEIKPS7a/Byf9GYNN//+ppBE0GQIJvahMAIISDDIIVIkkDIJpQCIINtIIP5GYNJm//BgPJC4WAyEAFIRBJ7BBBAAMEBYgXBoBBPa4JBEzZBDknf9pBEgmAIJvQIIOaToPQgARCwESIIMTIJYOBTYdbtukz5BEBgQpBVQRBDgEmQAwIB4FIQAcACQMbcAKMBkgFBIJVIEwlLtu0IIoMCIIwABgM2EYvABQOAIIewEANIPoXTOgJBStIDC9JBCBgWyBQVokhBDhIjGwEBkEAaIexIIUDCIVgIJnadg0tIoQgBBIYEDMoJACboYCEJQIOBoBbCIIVJg5BY0oDBXoQJDyYECgMkgQjKwBBBgRBHghZBjZfBLhBBK2gSHDoi2BIJfAIIc2IIoCCR4MkzVJGoo4DbIILG6QGF7BrCIIcTIJZ3BIIm5II0AkkQgEEDo+gIIILG7VJAwitDIJ/aGYMSgJBCbYJBEkBBBgVIgAdHgjZCBY1pkgDBgmQFIYHBhLsBIJXbtBBEsDMBIIkkIIMSIJFsCASPI22SoBsBhILEIJyqBIIdCHYObtukIItAGo9sQYSPIVoJBBgQLFIII+KIIq7BgRBGYoRpBgzFKIJVILI5BQyUAG4MSIJTsFAQeAWwIsJ6RBIhDaJIIuQgMkwBBGpEDsEkVQx3FIJSDJUhJBNydtkiDBiZBBiZBgA")); +} +var IMAGEWIDTH = 176; +var IMAGEHEIGHT = 109; + + +Graphics.prototype.setFontDancingScript = function() { + // Actual height 44 (44 - 1) + var widths = atob("DBIhFB4bGRoeFhweDQ=="); + var font = atob("AAAAAAAAAAAAAAMAAAAAAAHgAAAAAAD4AAAAAAA+AAAAAAAHAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD4AAAAAAD8AAAAAAD+AAAAAAD/AAAAAAD/gAAAAAH/gAAAAAH/wAAAAAH/gAAAAAP/gAAAAAP/gAAAAAf/AAAAAAf/AAAAAA/+AAAAAA/+AAAAAB/+AAAAAB/8AAAAAB/8AAAAAA/4AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAH/8AAAAAf//4AAAAf///AAAAf///4AAAf////AAAf/8Af4AAP/gAA/AAP/AAADwAH+AAAAcAD+AAAAHAA+AAAABwAfAAAAAcAPAAAAAHADgAAAABwB4AAAAA8AcAAAAAOAHAAAAAHgBgAAAAHwAYAAAAD4AGAAAAD+ABwAAAD/AAcAAAD/gAHgAAH/wAA+AAP/wAAH+H//4AAB////4AAAP///4AAAA///4AAAAD//gAAAAAD8AAAAAAAAAAAGAAAAAAABwAAAAAAAcAAAAAAAHAAAAAAABwAAAAAAAcAAGAAAAPAADwAAA/wAA4AAB/8AAeAAP//AAPAD//7wAHwf//w8AB////gPAA///+ABwAf//4AAcAP/+AAADAH/wAAAAQB8AAAAAAAAAAAAAAAAAAAAAAAAAAAAADgAAAAAAB8AAAAAAAfAAAAAAAGwAAAAAABsAAAAAAAfAAAAAAAHwAAP4AAB4AAP/AAAeAAH/wAAHAAD/+AAD4AB+AgAB+AA8AAAA/gAOAAAAf8AHAAAAPvABwAAAPzwAYAAAH4eAGAAAH8HgBgAAD+B8AcAAD/AfAHAAH/AHwB4AH/gB8AP4//gAfAD///wAHwAf//wAB8AB//gAAeAAP/gAAHAAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAfwAAAAAAP+AAAAAAH/wAAAAAB/+AAAAAAcfgAAAAAEB8AB/AAAAPAA/4AAABwAf+AAAAcAP/gAAAHADwQAAABwAwABAAAcAcAAYAAHAHAAOAADwBgAHwAB4AYAD+AB+AHAB/4B/ABwB+///wAeB/P//4AH//h//8AA//4P/+AAH/4B/+AAA/8AH/AAAH8AAEAAAAAAAAAAAAAAAAAAAAAAABgAAAAAAA4AAAAAAAeAAAAAAAPAAAAAAAHwAAAAAAD8AAAAAAB/AAAAAAA/wAAAAAAe8AAAAAAPPAAAAAAHjwAAAAADw8AAAAAB4PAAwAAA8DwP+AAAeA///wAAPAP//8AAHh////AAH3////wAD////AAAB///wAAAA//88AAAAf/gPAAAAf8ADgAAAHgAA4AAAAAAAMAAAAAAAAAfwAAAAAAP+AAAAAAH/wAAAAAB/+AAAAAA8PgAAAAwEA8AAAH8AAHAAAP/AABwAA//gAAcAD/4YAAHAH/gGAABwB/ABgAAcAfgAYAAPAD4AHAADwA+ABwAB4APgAeAB+AD4AH4B/AA+AA///wAPgAP//4AD4AB//8AB+AAP/+AAfgAB//AAHwAAH/AAB8AAAAAAAeAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA4AAAAAAf/4AAAAA///gAAAB///+AAAB////wAAB////+AAA//+B/gAA//8AD8AAf+OAAPAAP8HAABwAH8BgAAcAD8A4AAHAB+AOAABwAeADgAAcAPAA4AAHADgAOAADwBwADgAA8AcAA8AA+AGAAPgAfgBgAD+A/wAYAAf//4AGAAH//8ABwAA//+AAfgAH//AAD4AAf/AAAcAAA+AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMAAAAAAAHAA/AAAABwB/wAwAA8B/8AeAAPB//AHwADx//gB8AA9//wAfAAP/4IAHwAD/wAAB8AB/wAAAPAB/gAAADwB/wAAAA8A/8AAAAPA/PAAAADw/DwAAAA8/A8AAAAP/AOAAAAD/ADgAAAB/gAwAAAAAAAAAAAAAAAAABAAAAAAAH/AAAAAAD/4AAAAAB//AAAAAA//4AAOAAfA+AAf8APgHwAP/wHgA8AH/+DwAHAD//48ABwA///eAAcAeAf/AAHAHAB/gABwBwAP4AA8AYAB/AAPAGAAf4AHgBgAP/AD4AcAHv8B8AHgD5///AA8H8H//gAP/+A//wAB/+AH/4AAP/AAf8AAA/AAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADwAAAAAAP/gAAeAAP/+AAPgAH//wAD8AD//+AAPAB///gAAwAfwD8AAMAPwAfAADADwADwAAwB4AAeAAcAcAAHgAHAHAAA4ADgBwAAOAB4AcAADAB8AHAAAwA/ABwAAcA/gAeAAGB/wAHwADh/4AA+AB//8AAP+D//8AAB////+AAAP///+AAAB///+AAAAP//8AAAAAf/4AAAAAAAAAAAAAAAAAAAAAAAAAABAAAAAAAA4AAAAAAAeAAAAADAHgAAAAB4BwAAAAAeAIAAAAAHgAAAAAABwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA"); + var scale = 1; // size multiplier for this font + g.setFontCustom(font, 46, widths, 50+(scale<<8)+(1<<16)); +} + +// timeout used to update every minute +var drawTimeout; + +// schedule a draw for the next minute +function queueDraw() { + if (drawTimeout) clearTimeout(drawTimeout); + drawTimeout = setTimeout(function() { + drawTimeout = undefined; + draw(); + }, 60000 - (Date.now() % 60000)); +} + +function draw() { + var x = g.getWidth()/2; + var y = 50; + g.reset().clearRect(0,24,g.getWidth(),g.getHeight()-IMAGEHEIGHT); + if (g.getWidth() == IMAGEWIDTH) + g.drawImage(getImg(),0,g.getHeight()-IMAGEHEIGHT); + else { + let scale = g.getWidth()/IMAGEWIDTH; + y *= scale; + g.drawImage(getImg(),0,g.getHeight()-IMAGEHEIGHT*scale,{scale:scale}); + } + + var date = new Date(); + var dateStr = require("locale").date(date); + // draw time + g.setFont("DancingScript").setFontAlign(0,0).setColor("#f00"); + g.drawString(date.getHours(), x,y); + y += 43; + g.drawString(date.getMinutes().toString().padStart(2,0), x,y); + // draw date + y += 22; + g.setFontAlign(0,0).setFont("6x8"); + var p = g.getWidth()-60; + g.clearRect(p,y-4,g.getWidth()-p,y+3); // clear the background + g.drawString(dateStr,x,y); + // queue draw in one minute + queueDraw(); +} + +// Stop updates when LCD is off, restart when on +Bangle.on('lcdPower',on=>{ + if (on) { + draw(); // draw immediately, queue redraw + } else { // stop draw timer + if (drawTimeout) clearTimeout(drawTimeout); + drawTimeout = undefined; + } +}); +// set background colour +g.setTheme({bg:"#0ff"}); +// Clear the screen once, at startup +g.clear(); +// draw immediately at first, queue update +draw(); +// Show launcher when middle button pressed +Bangle.setUI("clock"); +// Load widgets +Bangle.loadWidgets(); +Bangle.drawWidgets(); diff --git a/apps/floralclk/app.png b/apps/floralclk/app.png new file mode 100644 index 000000000..a0284226e Binary files /dev/null and b/apps/floralclk/app.png differ diff --git a/apps/floralclk/screenshot_floral.png b/apps/floralclk/screenshot_floral.png new file mode 100644 index 000000000..7a8a389ba Binary files /dev/null and b/apps/floralclk/screenshot_floral.png differ diff --git a/apps/fwupdate/ChangeLog b/apps/fwupdate/ChangeLog new file mode 100644 index 000000000..ec66c5568 --- /dev/null +++ b/apps/fwupdate/ChangeLog @@ -0,0 +1 @@ +0.01: Initial version diff --git a/apps/fwupdate/app.png b/apps/fwupdate/app.png new file mode 100644 index 000000000..1fabf06a2 Binary files /dev/null and b/apps/fwupdate/app.png differ diff --git a/apps/fwupdate/custom.html b/apps/fwupdate/custom.html new file mode 100644 index 000000000..7230a77a8 --- /dev/null +++ b/apps/fwupdate/custom.html @@ -0,0 +1,286 @@ + + + + + +

THIS IS CURRENTLY BETA - PLEASE USE THE NORMAL FIRMWARE UPDATE + INSTRUCTIONS FOR BANGLE.JS 1 AND BANGLE.JS 2

+
+

Firmware updates using the App Loader are only possible on + Bangle.js 2. For firmware updates on Bangle.js 1 please + see the Bangle.js 1 instructions

+
+ + + 

+
+    
+
+    
+  
+
diff --git a/apps/gallifr/screenshot_time.png b/apps/gallifr/screenshot_time.png
new file mode 100644
index 000000000..2754138c4
Binary files /dev/null and b/apps/gallifr/screenshot_time.png differ
diff --git a/apps/gbmusic/ChangeLog b/apps/gbmusic/ChangeLog
index ecbca5fb6..9cebf0a31 100644
--- a/apps/gbmusic/ChangeLog
+++ b/apps/gbmusic/ChangeLog
@@ -2,4 +2,6 @@
 0.02: Increase text brightness, improve controls, (try to) reduce memory usage
 0.03: Only auto-start if active app is a clock, auto close after 1 hour of inactivity
 0.04: Setting to disable touch controls, minor bugfix
-0.05: Setting to disable double/triple press control, remove touch controls setting, reduce fadeout flicker
\ No newline at end of file
+0.05: Setting to disable double/triple press control, remove touch controls setting, reduce fadeout flicker
+0.06: Bangle.js 2 support
+0.07: Fix "previous" button image
diff --git a/apps/gbmusic/README.md b/apps/gbmusic/README.md
index 4bad9b8c8..5d06164c2 100644
--- a/apps/gbmusic/README.md
+++ b/apps/gbmusic/README.md
@@ -3,7 +3,9 @@
 If you have an Android phone with Gadgetbridge, this app allows you to view
 and control music playback.
 
-![Screenshot: playing](screenshot.png) ![Screenshot: paused](screenshot_2.png)
+| Bangle.js 1                                | Bangle.js 2                                |
+|:-------------------------------------------|:-------------------------------------------|
+| ![Screenshot: Bangle 1](screenshot_v1.png) | ![Screenshot: Bangle 2](screenshot_v2.png) |
 
 Download the [latest Gadgetbridge for Android here](https://f-droid.org/packages/nodomain.freeyourgadget.gadgetbridge/).
 
@@ -23,25 +25,27 @@ Automatically load the app when you play music and close when the music stops.
 (If the app opened automatically, it closes after music has been paused for 5 minutes.)
 
 **Simple button**:
-Disable double/triple pressing Button 2: always simply toggle play/pause.
+Disable double/triple pressing Middle Button: always simply toggle play/pause.
 (For music players which handle multiple button presses themselves.)
 
 ## Controls
 
 ### Buttons
-* Button 1: Volume up
-* Button 2: 
-  - Single press: toggle play/pause 
-  - Double press: next song
-  - Triple press: previous song
+* Button 1 (*Bangle.js 1*): Volume up
+* Middle Button: 
+  - Single press: Toggle play/pause 
+  - Double press: Next song
+  - Triple press: Previous song
   - Long-press: open application launcher 
-* Button 3: Volume down
+* Button 3 (*Bangle.js 1*): Volume down
 
 ### Touch
-* Left: pause/previous song
-* Right: next song/resume
-* Center: toggle play/pause
-* Swipe: next/previous song
+* Left: Pause/previous song
+* Right: Next song/resume
+* Center: Toggle play/pause
+* Swipe left/right: Next/previous song
+* Swipe up/down (*Bangle.js 2*): Volume up/down
+
 
 ## Creator
 
diff --git a/apps/gbmusic/app.js b/apps/gbmusic/app.js
index 5f95868bb..f514dfccd 100644
--- a/apps/gbmusic/app.js
+++ b/apps/gbmusic/app.js
@@ -4,77 +4,9 @@
  **/
 let auto = false; // auto close if opened automatically
 let stat = "";
-let info = {
-  artist: "",
-  album: "",
-  track: "",
-  n: 0,
-  c: 0,
-};
 const POUT = 300000; // auto close timeout when paused: 5 minutes (in ms)
 const IOUT = 3600000; // auto close timeout for inactivity: 1 hour (in ms)
-
-///////////////////////
-// Self-repeating timeouts
-///////////////////////
-
-// Clock
-let tock = -1;
-function tick() {
-  if (!Bangle.isLCDOn()) {
-    return;
-  }
-  const now = new Date;
-  if (now.getHours()*60+now.getMinutes()!==tock) {
-    drawDateTime();
-    tock = now.getHours()*60+now.getMinutes();
-  }
-  setTimeout(tick, 1000); // we only show minute precision anyway
-}
-
-// Fade out while paused and auto closing
-let fade = null;
-function fadeOut() {
-  if (!Bangle.isLCDOn() || !fade) {
-    return;
-  }
-  drawMusic(false); // don't clear: draw over existing text to prevent flicker
-  setTimeout(fadeOut, 500);
-}
-function brightness() {
-  if (!fade) {
-    return 1;
-  }
-  return Math.max(0, 1-((Date.now()-fade)/POUT));
-}
-
-// Scroll long track names
-// use an interval to get smooth movement
-let offset = null, // scroll Offset: null = no scrolling
-  iScroll;
-function scroll() {
-  offset += 10;
-  drawScroller();
-}
-function scrollStart() {
-  if (offset!==null) {
-    return; // already started
-  }
-  offset = 0;
-  if (Bangle.isLCDOn()) {
-    if (!iScroll) {
-      iScroll = setInterval(scroll, 200);
-    }
-    drawScroller();
-  }
-}
-function scrollStop() {
-  if (iScroll) {
-    clearInterval(iScroll);
-    iScroll = null;
-  }
-  offset = null;
-}
+const BANGLE2 = process.env.HWVERSION===2;
 
 /**
  * @param {string} text
@@ -85,21 +17,22 @@ function fitText(text) {
     return Infinity;
   }
   // make a guess, then shrink/grow until it fits
-  const test = (s) => g.setFont("Vector", s).stringWidth(text);
-  let best = Math.floor(24000/test(100));
-  if (test(best)===240) { // good guess!
+  const w = Bangle.appRect.w,
+    test = (s) => g.setFont("Vector", s).stringWidth(text);
+  let best = Math.floor(100*w/test(100));
+  if (test(best)===w) { // good guess!
     return best;
   }
-  if (test(best)<240) {
+  if (test(best) 240
+  // width > w
   do {
     best--;
-  } while(test(best)>240);
+  } while(test(best)>w);
   return best;
 }
 
@@ -115,14 +48,6 @@ function textCode(text) {
   }
   return code%360;
 }
-// dark magic
-function hsv2rgb(h, s, v) {
-  const f = (n) => {
-    const k = (n+h/60)%6;
-    return v-v*s*Math.max(Math.min(k, 4-k, 1), 0);
-  };
-  return {r: f(5), g: f(3), b: f(1)};
-}
 function f2hex(f) {
   return ("00"+(Math.round(f*255)).toString(16)).substr(-2);
 }
@@ -131,38 +56,218 @@ function f2hex(f) {
  * @return {string} Semi-random color to use for given info
  */
 function infoColor(name) {
-  let h, s, v;
-  if (name==="num") {
-    // always white
-    h = 0;
-    s = 0;
-  } else {
-    // make color depend deterministically on info
-    let code = textCode(info[name]);
-    switch(name) {
-      case "track": // also use album
-        code += textCode(info.album);
-      // fallthrough
-      case "album": // also use artist
-        code += textCode(info.artist);
-    }
-    h = code%360;
-    s = 0.7;
+  // make color depend deterministically on info
+  let code = textCode(layout[name].label);
+  switch(name) {
+    case "title": // also use album and artist
+      code += textCode(layout.album.label);
+    // fallthrough
+    case "album": // also use artist
+      code += textCode(layout.artist.label);
   }
-  v = brightness();
-  const rgb = hsv2rgb(h, s, v);
-  return "#"+f2hex(rgb.r)+f2hex(rgb.g)+f2hex(rgb.b);
+  let rgb;
+  if (g.getBPP()===3) {
+    // only pick 3-bit colors, always at full brightness
+    rgb = [code&1, (code&2)/2, (code&4)/4];
+    if (g.setColor(rgb[0], rgb[1], rgb[2]).getColor()===g.theme.bg) {
+      // avoid picking the bg color
+      rgb = rgb.map(c => 1-c);
+    }
+    return "#"+f2hex(rgb[0])+f2hex(rgb[1])+f2hex(rgb[2]);
+  } else {
+    // pick any hue, adjust for brightness
+    const h = code%360, s = 0.7, b = brightness();
+    return E.HSBtoRGB(h/360, s, b);
+  }
+}
+
+/**
+ * Render scrolling title
+ * @param l
+ */
+function rScroller(l) {
+  g.setFont("Vector", Math.round(g.getHeight()*l.fsz.slice(0, -1)/100));
+  const w = g.stringWidth(l.label)+40,
+    y = l.y+l.h/2;
+  l.offset = l.offset%w;
+  g.setClipRect(l.x, l.y, l.x+l.w-1, l.y+l.h-1)
+    .setColor(l.col)
+    .setFontAlign(-1, 0) // left center
+    .clearRect(l.x, l.y, l.x+l.w-1, l.y+l.h-1)
+    .drawString(l.label, l.x-l.offset+40, y)
+    .drawString(l.label, l.x-l.offset+40+w, y);
 }
 /**
- * Remember track color until info changes
- * Because we need this every time we move the scroller
- * @return {string}
+ * Render title
+ * @param l
  */
-function trackColor() {
-  if (!("track_color" in info) || fade) {
-    info.track_color = infoColor("track");
+function rTitle(l) {
+  if (l.offset!==null) {
+    rScroller(l); // already scrolling
+    return;
   }
-  return info.track_color;
+  let size = fitText(l.label);
+  if (sizel.h) {
+    size = l.h;
+  }
+  g.setFont("Vector", size)
+    .setFontAlign(0, -1) // center top
+    .drawString(l.label, l.x+l.w/2, l.y);
+}
+/**
+ * Render icon
+ * @param l
+ */
+function rIcon(l) {
+  const x2 = l.x+l.w-1,
+    y2 = l.y+l.h-1;
+  switch(l.icon) {
+    case "pause":
+      const w13 = l.w/3;
+      g.drawRect(l.x, l.y, l.x+w13, y2);
+      g.drawRect(l.x+l.w-w13, l.y, x2, y2);
+      break;
+    case "play":
+      g.drawPoly([
+        l.x, l.y,
+        x2, l.y+l.h/2,
+        l.x, y2,
+      ], true);
+      break;
+    case "previous":
+      const w15 = l.w*1/5;
+      g.drawPoly([
+        x2, l.y,
+        l.x+w15, l.y+l.h/2,
+        x2, y2,
+      ], true);
+      g.drawRect(l.x, l.y, l.x+w15, y2);
+      break;
+    case "next":
+      const w45 = l.w*4/5;
+      g.drawPoly([
+        l.x, l.y,
+        l.x+w45, l.y+l.h/2,
+        l.x, y2,
+      ], true);
+      g.drawRect(l.x+w45, l.y, x2, y2);
+      break;
+    default: // red X
+      console.log(`Unknown icon: ${l.icon}`);
+      g.setColor("#f00")
+        .drawRect(l.x, l.y, x2, y2)
+        .drawLine(l.x, l.y, x2, y2)
+        .drawLine(l.x, y2, x2, l.y);
+  }
+}
+let layout;
+function makeUI() {
+  global.gbmusic_active = true; // we don't need our widget (needed for <2.09 devices)
+  Bangle.loadWidgets();
+  Bangle.drawWidgets();
+  delete (global.gbmusic_active);
+  const Layout = require("Layout");
+  layout = new Layout({
+    type: "v", c: [
+      {
+        type: "h", fillx: 1, c: [
+          {id: "time", type: "txt", label: "88:88", valign: -1, halign: -1, font: "8%", bgCol: g.theme.bg},
+          {fillx: 1},
+          {id: "num", type: "txt", label: "88:88", valign: -1, halign: 1, font: "12%", bgCol: g.theme.bg},
+          BANGLE2 ? {} : {id: "up", type: "txt", label: " +", font: "6x8:2"},
+        ],
+      },
+      {id: "title", type: "custom", label: "", fillx: 1, filly: 2, offset: null, font: "Vector:20%", render: rTitle, bgCol: g.theme.bg},
+      {id: "artist", type: "custom", label: "", fillx: 1, filly: 1, size: 30, render: rInfo, bgCol: g.theme.bg},
+      {id: "album", type: "custom", label: "", fillx: 1, filly: 1, size: 20, render: rInfo, bgCol: g.theme.bg},
+      {height: 10},
+      {
+        type: "h", c: [
+          {width: 3},
+          {id: "prev", type: "custom", height: 15, width: 15, icon: "previous", render: rIcon, bgCol: g.theme.bg},
+          {id: "date", type: "txt", halign: 0, valign: 1, label: "", font: "8%", fillx: 1, bgCol: g.theme.bg},
+          {id: "next", type: "custom", height: 15, width: 15, icon: "next", render: rIcon, bgCol: g.theme.bg},
+          BANGLE2 ? {width: 3} : {id: "down", type: "txt", label: " -", font: "6x8:2"},
+        ],
+      },
+      {height: 10},
+    ],
+  }, {lazy: true});
+  layout.render();
+}
+
+///////////////////////
+// Self-repeating timeouts
+///////////////////////
+
+// Clock
+let tock = -1;
+function tick() {
+  if (!BANGLE2 && !Bangle.isLCDOn()) {
+    return;
+  }
+  const now = new Date();
+  if (now.getHours()*60+now.getMinutes()!==tock) {
+    drawDateTime();
+    tock = now.getHours()*60+now.getMinutes();
+  }
+  setTimeout(tick, 1000); // we only show minute precision anyway
+}
+
+// Fade out while paused and auto closing
+let fade = null;
+function fadeOut() {
+  if (BANGLE2 || !Bangle.isLCDOn() || !fade) {
+    return;
+  }
+  layout.render();
+  setTimeout(fadeOut, 500);
+}
+function brightness() {
+  if (!fade) {
+    return 1;
+  }
+  return Math.max(0, 1-((Date.now()-fade)/POUT));
+}
+
+// Scroll long track names
+// use an interval to get smooth movement
+let iScroll;
+function scroll() {
+  layout.title.offset += 10;
+  rScroller(layout.title);
+}
+function scrollStart() {
+  if (layout.title.offset!==null) {
+    return; // already started
+  }
+  layout.title.offset = 0;
+  if (BANGLE2 || Bangle.isLCDOn()) {
+    if (!iScroll) {
+      iScroll = setInterval(scroll, 200);
+    }
+    rScroller(layout.title);
+  }
+}
+function scrollStop() {
+  if (iScroll) {
+    clearInterval(iScroll);
+    iScroll = null;
+  }
+  layout.title.offset = null;
 }
 
 ////////////////////
@@ -172,10 +277,9 @@ function trackColor() {
  * Draw date and time
  */
 function drawDateTime() {
-  const now = new Date;
+  const now = new Date();
   const l = require("locale");
   const is12 = (require("Storage").readJSON("setting.json", 1) || {})["12hour"];
-  let time;
   if (is12) {
     const d12 = new Date(now.getTime());
     const hour = d12.getHours();
@@ -184,29 +288,35 @@ function drawDateTime() {
     } else if (hour>12) {
       d12.setHours(hour-12);
     }
-    time = l.time(d12, true)+l.meridian(now);
+    layout.time.label = l.time(d12, true)+l.meridian(now);
   } else {
-    time = l.time(now, true);
+    layout.time.label = l.time(now, true);
   }
-  g.reset();
-  g.setFont("Vector", 24)
-    .setFontAlign(-1, -1) // top left
-    .clearRect(10, 30, 119, 54)
-    .drawString(time, 10, 30);
-
-  const date = require("locale").date(now, true);
-  g.setFont("Vector", 16)
-    .setFontAlign(0, 1) // bottom center
-    .setClipRect(35, 198, 199, 214)
-    .clearRect(31, 198, 199, 214)
-    .drawString(date, 119, 240-26);
+  layout.date.label = require("locale").date(now, true);
+  layout.render();
 }
 
+function drawControls() {
+  let l = layout;
+  const cc = a => (a ? "#f00" : "#0f0"); // control color: red for active, green for inactive
+  if (!BANGLE2) {
+    l.up.col = cc("volumeup" in tCommand);
+    l.down.col = cc("volumedown" in tCommand);
+  }
+  l.prev.icon = (stat==="play") ? "pause" : "previous";
+  l.prev.col = cc("prev" in tCommand || "pause" in tCommand);
+  l.next.icon = (stat==="play") ? "next" : "play";
+  l.next.col = cc("next" in tCommand || "play" in tCommand);
+  layout.render();
+}
+
+////////////////////////
+// GB event handlers
+///////////////////////
 /**
- * Draw track number and total count
- * @param {boolean} clr - Clear area before redrawing?
+ * Mangle track number and total count for display
  */
-function drawNum(clr) {
+function formatNum(info) {
   let num = "";
   if ("n" in info && info.n>0) {
     num = "#"+info.n;
@@ -214,198 +324,26 @@ function drawNum(clr) {
       num += "/"+info.c;
     }
   }
-  g.reset();
-  g.setFont("Vector", 30)
-    .setFontAlign(1, -1); // top right
-  if (clr) {
-    g.clearRect(225, 30, 120, 60);
-  }
-  g.drawString(num, 225, 30);
-}
-/**
- * Clear rectangle used by track title
- */
-function clearTrack() {
-  g.clearRect(0, 60, 239, 119);
-}
-/**
- * Draw track title
- * @param {boolean} clr - Clear area before redrawing?
- */
-function drawTrack(clr) {
-  let size = fitText(info.track);
-  if (size<25) {
-    // the title is too long: start the scroller
-    scrollStart();
-    return;
-  } else {
-    scrollStop();
-  }
-  // stationary track
-  if (size>40) {
-    size = 40;
-  }
-  g.reset();
-  g.setFont("Vector", size)
-    .setFontAlign(0, 1) // center bottom
-    .setColor(trackColor());
-  if (clr) {
-    clearTrack();
-  }
-  g.drawString(info.track, 119, 109);
-}
-/**
- * Draw scrolling track title
- */
-function drawScroller() {
-  g.reset();
-  g.setFont("Vector", 40);
-  const w = g.stringWidth(info.track)+40;
-  offset = offset%w;
-  g.setFontAlign(-1, 1) // left bottom
-    .setColor(trackColor());
-  clearTrack();
-  g.drawString(info.track, -offset+40, 109)
-    .drawString(info.track, -offset+40+w, 109);
+  return num;
 }
 
-/**
- * Draw track artist and album
- * @param {boolean} clr - Clear area before redrawing?
- */
-function drawArtistAlbum(clr) {
-  // we just use small enough fonts to make these always fit
-  // calculate stuff before clear+redraw
-  const aCol = infoColor("artist");
-  const bCol = infoColor("album");
-  let aSiz = fitText(info.artist);
-  if (aSiz>30) {
-    aSiz = 30;
-  }
-  let bSiz = fitText(info.album);
-  if (bSiz>20) {
-    bSiz = 20;
-  }
-  g.reset();
-  if (clr) {
-    g.clearRect(0, 120, 240, 189);
-  }
-  let top = 124;
-  if (info.artist) {
-    g.setFont("Vector", aSiz)
-      .setFontAlign(0, -1) // center top
-      .setColor(aCol)
-      .drawString(info.artist, 119, top);
-    top += aSiz+4; // fit album neatly under artist
-  }
-  if (info.album) {
-    g.setFont("Vector", bSiz)
-      .setFontAlign(0, -1) // center top
-      .setColor(bCol)
-      .drawString(info.album, 119, top);
-  }
-}
-
-/**
- *
- * @param {string} icon Icon name
- * @param {number} x
- * @param {number} y
- * @param {number} s Icon size
- */
-function drawIcon(icon, x, y, s) {
-  ({
-    pause: function(x, y, s) {
-      const w1 = s/3;
-      g.drawRect(x, y, x+w1, y+s);
-      g.drawRect(x+s-w1, y, x+s, y+s);
-    },
-    play: function(x, y, s) {
-      g.drawPoly([
-        x, y,
-        x+s, y+s/2,
-        x, y+s,
-      ], true);
-    },
-    previous: function(x, y, s) {
-      const w2 = s*1/5;
-      g.drawPoly([
-        x+s, y,
-        x+w2, y+s/2,
-        x+s, y+s,
-      ], true);
-      g.drawRect(x, y, x+w2, y+s);
-    },
-    next: function(x, y, s) {
-      const w2 = s*4/5;
-      g.drawPoly([
-        x, y,
-        x+w2, y+s/2,
-        x, y+s,
-      ], true);
-      g.drawRect(x+w2, y, x+s, y+s);
-    },
-  })[icon](x, y, s);
-}
-function controlColor(ctrl) {
-  return (ctrl in tCommand) ? "#ff0000" : "#008800";
-}
-function drawControl(ctrl, x, y) {
-  g.setColor(controlColor(ctrl));
-  const s = 20;
-  if (stat!==controlState) {
-    g.clearRect(x, y, x+s, y+s);
-  }
-  drawIcon(ctrl, x, y, s);
-}
-let controlState;
-function drawControls() {
-  g.reset();
-  if (stat==="play") {
-    // left touch
-    drawControl("pause", 10, 190);
-    // right touch
-    drawControl("next", 200, 190);
-  } else {
-    drawControl("previous", 10, 190);
-    drawControl("play", 200, 190);
-  }
-  g.setFont("6x8", 2);
-  // BTN1
-  g.setFontAlign(1, -1);
-  g.setColor(controlColor("volumeup"));
-  g.drawString("+", 240, 30);
-  // BTN2
-  g.setFontAlign(1, 1);
-  g.setColor(controlColor("volumedown"));
-  g.drawString("-", 240, 210);
-  controlState = stat;
-}
-
-/**
- * @param {boolean} [clr=true] Clear area before redrawing?
- */
-function drawMusic(clr) {
-  clr = !(clr===false); // undefined means yes
-  drawNum(clr);
-  drawTrack(clr);
-  drawArtistAlbum(clr);
-}
-
-////////////////////////
-// GB event handlers
-///////////////////////
 /**
  * Update music info
- * @param {Object} e - Gadgetbridge musicinfo event
+ * @param {Object} info - Gadgetbridge musicinfo event
  */
-function musicInfo(e) {
-  info = e;
-  delete (info.t);
-  offset = null;
-  if (Bangle.isLCDOn()) {
-    drawMusic();
-  }
+function musicInfo(info) {
+  scrollStop();
+  layout.title.label = info.track || "";
+  layout.album.label = info.album || "";
+  layout.artist.label = info.artist || "";
+  // color depends on all labels
+  layout.title.col = infoColor("title");
+  layout.album.col = infoColor("album");
+  layout.artist.col = infoColor("artist");
+  layout.num.label = formatNum(info);
+  layout.render();
+  rTitle(layout.title); // force redraw of title, or scroller might break
+  // reset auto exit interval
   if (tIxt) {
     clearTimeout(tIxt);
     tIxt = null;
@@ -435,7 +373,6 @@ function musicState(e) {
     tIxt = null;
   }
   fade = null;
-  delete info.track_color;
   if (auto) { // auto opened -> auto close
     switch(stat) {
       case "stop": // never actually happens with my phone :-(
@@ -444,7 +381,7 @@ function musicState(e) {
       case "play":
         // if inactive for double song duration (or an hour if unknown), load the clock
         // i.e. phone finished playing without bothering to notify the watch
-        tIxt = setTimeout(load, (info.dur*2000) || IOUT);
+        tIxt = setTimeout(load, (e.dur*2000) || IOUT);
         break;
       case "pause":
       default:
@@ -456,8 +393,7 @@ function musicState(e) {
         break;
     }
   }
-  if (Bangle.isLCDOn()) {
-    drawMusic(false); // redraw in case we were fading out but resumed play
+  if (BANGLE2 || Bangle.isLCDOn()) {
     drawControls();
   }
 }
@@ -473,30 +409,34 @@ function musicState(e) {
  */
 let tPress, nPress = 0;
 function startButtonWatches() {
-  // BTN1/3: volume control
-  // Wait for falling edge to avoid messing with volume while long-pressing BTN3
-  // to reload the watch (and same for BTN2 for consistency)
-  setWatch(() => { sendCommand("volumeup"); }, BTN1, {repeat: true, edge: "falling"});
-  setWatch(() => { sendCommand("volumedown"); }, BTN3, {repeat: true, edge: "falling"});
+  let btn = BTN1;
+  if (!BANGLE2) {
+    // BTN1/3: volume control
+    // Wait for falling edge to avoid messing with volume while long-pressing BTN3
+    // to reload the watch (and same for BTN2 for consistency)
+    setWatch(() => { sendCommand("volumeup"); }, BTN1, {repeat: true, edge: "falling"});
+    setWatch(() => { sendCommand("volumedown"); }, BTN3, {repeat: true, edge: "falling"});
+    btn = BTN2;
+  }
 
-  // BTN2: long-press for launcher, otherwise depends on number of presses
+  // middle button: long-press for launcher, otherwise depends on number of presses
   setWatch(() => {
     if (nPress===0) {
       tPress = setTimeout(() => {Bangle.showLauncher();}, 3000);
     }
-  }, BTN2, {repeat: true, edge: "rising"});
+  }, btn, {repeat: true, edge: "rising"});
   const s = require("Storage").readJSON("gbmusic.json", 1) || {};
   if (s.simpleButton) {
     setWatch(() => {
       clearTimeout(tPress);
       togglePlay();
-    }, BTN2, {repeat: true, edge: "falling"});
+    }, btn, {repeat: true, edge: "falling"});
   } else {
     setWatch(() => {
       nPress++;
       clearTimeout(tPress);
       tPress = setTimeout(handleButton2Press, 500);
-    }, BTN2, {repeat: true, edge: "falling"});
+    }, btn, {repeat: true, edge: "falling"});
   }
 }
 function handleButton2Press() {
@@ -524,7 +464,7 @@ let tCommand = {};
  */
 function sendCommand(command) {
   Bluetooth.println(JSON.stringify({t: "music", n: command}));
-  // for controlColor
+  // for control color
   if (command in tCommand) {
     clearTimeout(tCommand[command]);
   }
@@ -539,18 +479,29 @@ function sendCommand(command) {
 function togglePlay() {
   sendCommand(stat==="play" ? "pause" : "play");
 }
-function startTouchWatches() {
+function pausePrev() {
+  sendCommand(stat==="play" ? "pause" : "previous");
+}
+function nextPlay() {
+  sendCommand(stat==="play" ? "next" : "play");
+}
+
+/**
+ * Setup touch+swipe for Bangle.js 1
+ */
+function touch1() {
   Bangle.on("touch", side => {
     if (!Bangle.isLCDOn()) {return;} // for <2v10 firmware
     switch(side) {
       case 1:
-        sendCommand(stat==="play" ? "pause" : "previous");
+        pausePrev();
         break;
       case 2:
-        sendCommand(stat==="play" ? "next" : "play");
+        nextPlay();
         break;
-      case 3:
+      default:
         togglePlay();
+        break;
     }
   });
   Bangle.on("swipe", dir => {
@@ -558,16 +509,56 @@ function startTouchWatches() {
     sendCommand(dir===1 ? "previous" : "next");
   });
 }
+/**
+ * Setup touch+swipe for Bangle.js 2
+ */
+function touch2() {
+  Bangle.on("touch", (side, xy) => {
+    const ar = Bangle.appRect;
+    if (xy.xar.x+ar.w*2/3) {
+      nextPlay();
+    } else {
+      togglePlay();
+    }
+  });
+  // swiping
+  let drag;
+  Bangle.on("drag", e => {
+    if (!drag) { // start dragging
+      drag = {x: e.x, y: e.y};
+    } else if (!e.b) { // released
+      const dx = e.x-drag.x, dy = e.y-drag.y;
+      drag = null;
+      if (Math.abs(dx)>Math.abs(dy)+10) {
+        // horizontal
+        sendCommand(dx>0 ? "previous" : "next");
+      } else if (Math.abs(dy)>Math.abs(dx)+10) {
+        // vertical
+        sendCommand(dy>0 ? "volumedown" : "volumeup");
+      }
+    }
+  });
+}
+function startTouchWatches() {
+  if (BANGLE2) {
+    touch2();
+  } else {
+    touch1();
+  }
+}
 function startLCDWatch() {
+  if (BANGLE2) {
+    return; // always keep drawing
+  }
   Bangle.on("lcdPower", (on) => {
     if (on) {
       // redraw and resume scrolling
       tick();
-      drawMusic();
-      drawControls();
+      layout.render();
       fadeOut();
-      if (offset!==null) {
-        drawScroller();
+      if (offset.offset!==null) {
         if (!iScroll) {
           iScroll = setInterval(scroll, 200);
         }
@@ -585,15 +576,10 @@ function startLCDWatch() {
 /////////////////////
 // Startup
 /////////////////////
-// check for saved music stat (by widget) to load
 g.clear();
-global.gbmusic_active = true; // we don't need our widget (needed for <2.09 devices)
-Bangle.loadWidgets();
-Bangle.drawWidgets();
-delete (global.gbmusic_active);
 
 function startEmulator() {
-  if (typeof Bluetooth==="undefined") { // emulator!
+  if (typeof Bluetooth==="undefined" || typeof Bluetooth.println==="undefined") { // emulator!
     Bluetooth = {
       println: (line) => {console.log("Bluetooth:", line);},
     };
@@ -609,6 +595,7 @@ function startWatches() {
 }
 
 function start() {
+  makeUI();
   // start listening for music updates
   const _GB = global.GB;
   global.GB = (event) => {
@@ -628,43 +615,39 @@ function start() {
         return;
     }
   };
-  drawMusic();
-  drawControls();
   startWatches();
   tick();
   startEmulator();
 }
 
 function init() {
+  // check for saved music status (by widget) to load
   let saved = require("Storage").readJSON("gbmusic.load.json", true);
   require("Storage").erase("gbmusic.load.json");
   if (saved) {
     // autoloaded: load state was saved by widget
-    info = saved.info;
-    stat = saved.state;
-    delete saved;
     auto = true;
     start();
-  } else {
-    delete saved;
-    let s = require("Storage").readJSON("gbmusic.json", 1) || {};
-    if (!("autoStart" in s)) {
-      // user opened the app, but has not picked a setting yet
-      // ask them about autoloading now
-      E.showPrompt(
-        "Automatically load\n"+
-        "when playing music?\n",
-      ).then(choice => {
-        s.autoStart = choice;
-        require("Storage").writeJSON("gbmusic.json", s);
-        delete s;
-        setTimeout(start, 0);
-      });
-    } else {
-      delete s;
-      start();
-    }
+    musicInfo(saved.info);
+    musicState(saved.state);
+    return;
   }
-}
-init();
 
+  let s = require("Storage").readJSON("gbmusic.json", 1) || {};
+  if ("autoStart" in s) {
+    start();
+    return;
+  }
+
+  // user opened the app, but has not picked a autoStart setting yet
+  // ask them about autoloading now
+  E.showPrompt(
+    "Automatically load\n"+
+    "when playing music?\n"
+  ).then(choice => {
+    s.autoStart = choice;
+    require("Storage").writeJSON("gbmusic.json", s);
+    setTimeout(start, 0);
+  });
+}
+init();
\ No newline at end of file
diff --git a/apps/gbmusic/screenshot.png b/apps/gbmusic/screenshot.png
deleted file mode 100644
index 569a6a2c5..000000000
Binary files a/apps/gbmusic/screenshot.png and /dev/null differ
diff --git a/apps/gbmusic/screenshot_2.png b/apps/gbmusic/screenshot_2.png
deleted file mode 100644
index f19f8f428..000000000
Binary files a/apps/gbmusic/screenshot_2.png and /dev/null differ
diff --git a/apps/gbmusic/screenshot_v1.png b/apps/gbmusic/screenshot_v1.png
new file mode 100644
index 000000000..3b290e459
Binary files /dev/null and b/apps/gbmusic/screenshot_v1.png differ
diff --git a/apps/gbmusic/screenshot_v2.png b/apps/gbmusic/screenshot_v2.png
new file mode 100644
index 000000000..b89b5022e
Binary files /dev/null and b/apps/gbmusic/screenshot_v2.png differ
diff --git a/apps/gbridge/README.md b/apps/gbridge/README.md
index 867b736ab..03bf883d7 100644
--- a/apps/gbridge/README.md
+++ b/apps/gbridge/README.md
@@ -52,3 +52,62 @@ Activity reporting
 You'll need a Gadgetbridge release *after* version 0.50.0 for Actvity Reporting to be enabled.
 
 By default heart rate isn't reported, but it can be enabled from `Settings`, `App/Widget Settings`, `Gadgetbridge`, `Record HRM`
+
+
+## Troubleshooting
+
+1. Switch to using one of the stock watch faces like s7clk or wave on a Bangle 2.
+
+2. Check that the battery charge level is being seen by the Gadgetbridge App on the phone.  This proves that data is getting to your phone.
+
+### You can test the notifications on the Bangle
+
+First disconnect from Gadgetbridge on your phone. Then connect
+through the IDE and enter the following code.  You should get a pop
+up screen on your Bangle.  This proves that the watch is correctly
+setup for notifications.
+
+
+    GB({"t":"notify","id":1575479849,"src":"Hangouts","title":"A Name","body":"message contents"})
+
+
+NOTE: On a Bangle 2, this will fail if you have not installed 'Notifications Fullscreen'.
+
+### Check that notifications are getting through to your Bangle
+
+* Disconnect your Bangle from Gadgetbridge on your phone.
+* Connect through the IDE
+* Run the following bit of code
+
+        var log = [];
+        function GB(d) {
+          log.push(JSON.stringify(d));
+        }
+
+* Disconnect from the IDE
+* Connect your Bangle to Gadgetbridge
+* Call your phone to get a missed call
+* Disonnect your Bangle to Gadgetbridge
+* Connect through the IDE
+* Run the following bit of code
+
+        log;
+
+If notifications are getting through then you should see something like.
+
+
+        >log
+        =[
+          "{\"t\":\"call\",\"cmd\"" ... "r\":\"0191xxxxxxx\"}",
+          "{\"t\":\"call\",\"cmd\"" ... "r\":\"0191xxxxxxx\"}"
+         ]
+
+
+IMPORTANT: Now reset your Bangle using a BTN3 long press so that the GB() function is restored.
+
+## References
+
+[Bangle Gadgetbridge Page](https://www.espruino.com/Gadgetbridge)
+
+[Gadgetbridge Project Home](https://codeberg.org/Freeyourgadget/Gadgetbridge/wiki/Home)
+
diff --git a/apps/gbridge/sample_messages.js b/apps/gbridge/sample_messages.js
index be33a25b8..046ffa9e4 100644
--- a/apps/gbridge/sample_messages.js
+++ b/apps/gbridge/sample_messages.js
@@ -15,7 +15,7 @@ GB({"t":"notify","id":1592721714,"src":"ALARMCLOCKRECEIVER"})
 GB({"t":"notify-","id":1592721714})
 
 // Weather update (doesn't show a notification, not handled by gbridge app: see weather app)
-GB({"t":"weather","temp":288,"hum":94,"txt":"Light rain","wind":0,"loc":"Test City"})
+GB({"t":"weather","temp":288,"hum":94,"txt":"Light rain","wind":0,"wdir":120,"loc":"Test City"})
 
 // Nextcloud updated a file
 GB({"t":"notify","id":1594184421,"src":"Nextcloud","title":"Downloaded","body":"test.file downloaded"})
diff --git a/apps/gbridge/settings.js b/apps/gbridge/settings.js
index afd0be4fb..f9c7cde90 100644
--- a/apps/gbridge/settings.js
+++ b/apps/gbridge/settings.js
@@ -23,6 +23,7 @@
   }
   var mainmenu = {
     "" : { "title" : "Gadgetbridge" },
+    "< Back" : back,
     "Connected" : { value : NRF.getSecurityStatus().connected?"Yes":"No" },
     "Show Icon" : {
       value: settings().showIcon,
@@ -34,8 +35,7 @@
       value: !!settings().hrm,
       format: v => v?"Yes":"No",
       onchange: v => updateSetting('hrm', v)
-    },
-    "< Back" : back,
+    }    
   };
 
   var findPhone = {
diff --git a/apps/getup/bangle1-get-up-screenshot.png b/apps/getup/bangle1-get-up-screenshot.png
new file mode 100644
index 000000000..3bd950280
Binary files /dev/null and b/apps/getup/bangle1-get-up-screenshot.png differ
diff --git a/apps/gpsinfo/ChangeLog b/apps/gpsinfo/ChangeLog
index ceff7011e..381412c16 100644
--- a/apps/gpsinfo/ChangeLog
+++ b/apps/gpsinfo/ChangeLog
@@ -1,3 +1,4 @@
 0.02: Ensure screen doesn't display garbage at startup
 0.03: Show number of satellites while waiting for fix
 0.04: Add Maidenhead readout of GPS location
+0.05: Refactor to use 'layout' library for multi-device support
diff --git a/apps/gpsinfo/gps-info.js b/apps/gpsinfo/gps-info.js
index 1a8cb2fd1..df888651a 100644
--- a/apps/gpsinfo/gps-info.js
+++ b/apps/gpsinfo/gps-info.js
@@ -1,11 +1,14 @@
-var img = require("heatshrink").decompress(atob("mEwghC/AH4AKg9wC6t3u4uVC6wWBI6t3uJeVuMQCqcBLisAi4XLxAABFxAXKgc4DBAuBRhQXEDAq7MmYXEwBHEXZYXFGAOqAAKDMmczC4mIC62CC50PC4JIBkQABiIvRmURAAUSjQXSFwMoxGKC6CRFwUSVYgXLPIgXXwMYegoXLJAYXCGBnzGA0hPQIwMgYwGC6gwCC4ZIMC4gYBC604C4ZISmcRVgapQAAMhC6GIJIwXCMBcIxGDDBAuLC4IwGAARGMAAQWGmAXPJQoWMC4pwCCpoXJAB4XXAH4A/ABQA="))
+function satelliteImage() {
+  return require("heatshrink").decompress(atob("mEwxH+AH4A/AH4A/AH4AGnE4F1wvsF34wgFldcLdyMYsoACF1WJF4YxPFzOtF4wxNFzAvKSiIvU1ovIGAkJAAQucF5QxCFwYwbF4QwLrwvjYIVfrwABrtdq9Wqwvkq4oCAAtXmYvi1teE4NXrphCrxoCGAbvdSIoAHNQNeFzQvGeRQvCsowrYYNfF8YwHZQQFCF8QwGF4owjeYovBroHEMERhEF8IwNrtWryYFF8YwCq4vhGBeJF5AwaxIwKwVXFwwvandfMJeJF8M6nZiLGQIvdstfGAVlGBZkCxJeZJQIwCGIRjMFzYACGIc6r/+FsIvGGIYABEzYvPGQYvusovkAH4A/AH4A/ACo="));
+}
 
-Bangle.setGPSPower(1);
-Bangle.setLCDMode("doublebuffered");
+var Layout = require("Layout");
+var layout;
+Bangle.setGPSPower(1, "app");
 E.showMessage("Loading..."); // avoid showing rubbish on screen
 
 var lastFix = {
-  fix: 0,
+  fix: -1,
   alt: 0,
   lat: 0,
   lon: 0,
@@ -31,14 +34,14 @@ function getMaidenHead(param1,param2){
   lon = param2;
 
   lon = lon + 180;
-  t = lon/20;
+  var t = lon/20;
   fLon = Math.floor(t);
   t = (t % fLon)*10;
   sqLon = Math.floor(t);
-  t=(t-sqLon)*24;
+  t = (t-sqLon)*24;
   subLon = Math.floor(t);
   extLon = Math.floor((t-subLon)*10);
-  
+
   lat = lat + 90;
   t = lat/10;
   fLat = Math.floor(t);
@@ -51,43 +54,58 @@ function getMaidenHead(param1,param2){
   return U[fLon]+U[fLat]+sqLon+sqLat+L[subLon]+L[subLat]+extLon+extLat;
 }
 function onGPS(fix) {
+  if (lastFix.fix != fix.fix) {
+    // if fix is different, change the layout
+    if (fix.fix) {
+      layout = new Layout( {
+        type:"v", c: [
+          {type:"txt", font:"6x8:2", label:"GPS Info" },
+          {type:"img", src:satelliteImage, pad:4 },
+          {type:"txt", font:"6x8", label:"", fillx:true, id:"alt"  },
+          {type:"txt", font:"6x8", label:"", fillx:true, id:"lat" },
+          {type:"txt", font:"6x8", label:"", fillx:true, id:"lon" },
+          {type:"txt", font:"6x8", label:"", fillx:true, id:"speed" },
+          {type:"txt", font:"6x8", label:"", fillx:true, id:"time" },
+          {type:"txt", font:"6x8", label:"", fillx:true, id:"sat" },
+          {type:"txt", font:"6x8", label:"", fillx:true, id:"maidenhead" },
+        ]},{lazy:true});
+    } else {
+      layout = new Layout( {
+        type:"v", c: [
+          {type:"txt", font:"6x8:2", label:"GPS Info" },
+          {type:"img", src:satelliteImage, pad:4 },
+          {type:"txt", font:"6x8", label:"Waiting for GPS" },
+          {type:"h", c: [
+            {type:"txt", font:"10%", label:fix.satellites, pad:2, id:"sat" },
+            {type:"txt", font:"6x8", pad:3, label:"Satellites" }
+          ]},
+          {type:"txt", font:"6x8", label:"", id:"progress" }
+        ]},{lazy:true});
+    }
+    g.clearRect(0,24,g.getWidth(),g.getHeight());
+    layout.render();
+  }
   lastFix = fix;
-  g.clear();
-  g.setFontAlign(-1, -1);
-  g.drawImage(img, 20, -12);
-  g.setFont("6x8");
-  g.setFontVector(22);
-  g.drawString("GPS Info", 70, 0);
   if (fix.fix) {
     nofix = 0;
-    var alt = fix.alt;
-    var lat = fix.lat;
-    var lon = fix.lon;
-    var speed = fix.speed;
-    var time = formatTime(fix.time);
+    var locale = require("locale");
     var satellites = fix.satellites;
-    var maidenhead = getMaidenHead(lat,lon);
-    var s = 15;
-    g.setFontVector(s);
-    g.drawString("Altitude: "+alt+" m",10,36);
-    g.drawString("Lat: "+lat,10,54);
-    g.drawString("Lon: "+lon,10,72);
-    g.drawString("Speed: "+speed.toFixed(1)+" km/h",10,90);
-    g.drawString("Time: "+time,10,108);
-    g.drawString("Satellites: "+satellites,10,126);
-    g.drawString("Maidenhead: "+maidenhead,10,144);
+    var maidenhead = getMaidenHead(fix.lat,fix.lon);
+    layout.alt.label = "Altitude: "+locale.distance(fix.alt);
+    layout.lat.label = "Lat: "+fix.lat.toFixed(6);
+    layout.lon.label = "Lon: "+fix.lon.toFixed(6);
+    layout.speed.label = "Speed: "+locale.speed(fix.speed);
+    layout.time.label = "Time: "+formatTime(fix.time);
+    layout.sat.label = "Satellites: "+satellites;
+    layout.maidenhead.label = "Maidenhead: "+maidenhead;
   } else {
-    g.setFontAlign(0, 1);
-    g.setFont("6x8", 2);
-    g.drawString("Waiting for GPS", 120, 80);
+    layout.sat.label = fix.satellites;
     nofix = (nofix+1) % 4;
-    g.drawString(".".repeat(nofix) + " ".repeat(4-nofix), 120, 120);
-    // Show number of satellites:
-    g.setFontAlign(0,0);
-    g.setFont("6x8");
-    g.drawString(fix.satellites+" satellites", 120, 100);
+    layout.progress.label = ".".repeat(nofix) + " ".repeat(4-nofix);
   }
-  g.flip();
+  layout.render();
 }
 
+Bangle.loadWidgets();
+Bangle.drawWidgets();
 Bangle.on('GPS', onGPS);
diff --git a/apps/gpsrec/ChangeLog b/apps/gpsrec/ChangeLog
index 8d13df000..cb22dd13f 100644
--- a/apps/gpsrec/ChangeLog
+++ b/apps/gpsrec/ChangeLog
@@ -25,3 +25,6 @@
 0.21: Fix issue where a period of 1s recorded every 2s, 5s every 6s, and so on
 0.22: Ensure Bangle.setGPSPower uses 'gpsrec' as a tag
 0.23: Fix issue where tracks wouldn't record when running from OpenStMap if a period hadn't been set up first
+0.24: Better support for Bangle.js 2, avoid widget area for Graphs, smooth graphs more
+0.25: Fix issue where if Bangle.js 2 got a GPS fix but no reported time, errors could be caused by the widget (fix #935)
+0.26: Multiple bugfixes
diff --git a/apps/gpsrec/app.js b/apps/gpsrec/app.js
index 29594289d..df3353930 100644
--- a/apps/gpsrec/app.js
+++ b/apps/gpsrec/app.js
@@ -102,7 +102,8 @@ function getTrackInfo(fn) {
   var lfactor = Math.cos(minLat*Math.PI/180);
   var ylen = (maxLat-minLat);
   var xlen = (maxLong-minLong)* lfactor;
-  var scale = xlen>ylen ? 200/xlen : 200/ylen;
+  var screenSize = g.getHeight()-48; // 24 for widgets, plus a border
+  var scale = xlen>ylen ? screenSize/xlen : screenSize/ylen;
   return {
     fn : fn,
     filename : filename,
@@ -110,6 +111,7 @@ function getTrackInfo(fn) {
     records : nl,
     minLat : minLat, maxLat : maxLat,
     minLong : minLong, maxLong : maxLong,
+    lat : (minLat+maxLat)/2, lon : (minLong+maxLong)/2,
     lfactor : lfactor,
     scale : scale,
     duration : Math.round(duration/1000)
@@ -180,16 +182,18 @@ function plotTrack(info) {
     getMapXY = osm.latLonToXY.bind(osm);
   } else {
     getMapXY = function(lat, lon) { "ram"
-      var ix = 30 + Math.round((long - info.minLong)*info.lfactor*info.scale);
-      var iy = 210 - Math.round((lat - info.minLat)*info.scale);
-      return {x:ix, y:iy};
+      return {x:cx + Math.round((long - info.lon)*info.lfactor*info.scale),
+              y:cy + Math.round((info.lat - lat)*info.scale)};
     }
   }
 
   E.showMenu(); // remove menu
+  E.showMessage("Drawing...","GPS Track "+info.fn);
+  g.flip(); // on buffered screens, draw a not saying we're busy
+  g.clear(1);
   var s = require("Storage");
   var cx = g.getWidth()/2;
-  var cy = g.getHeight()/2;
+  var cy = 24 + (g.getHeight()-24)/2;
   g.setColor(1,0.5,0.5);
   g.setFont("Vector",16);
   g.drawString("Track"+info.fn.toString()+" - Loading",10,220);
@@ -203,8 +207,8 @@ function plotTrack(info) {
     g.drawString("N",2,40);
     g.setColor(1,1,1);
   } else {
-    osm.lat = (info.minLat+info.maxLat)/2;
-    osm.lon = (info.minLong+info.maxLong)/2;
+    osm.lat = info.lat;
+    osm.lon = info.lon;
     osm.draw();
     g.setColor(0, 0, 0);
   }
@@ -245,13 +249,14 @@ function plotTrack(info) {
   g.fillCircle(ox,oy,5);
   if (info.qOSTM) g.setColor(0, 0, 0);
   else g.setColor(1,1,1);
-  g.drawString(require("locale").distance(dist),120,220);
+  g.drawString(require("locale").distance(dist),g.getWidth() / 2, g.getHeight() - 20);
   g.setFont("6x8",2);
   g.setFontAlign(0,0,3);
-  g.drawString("Back",230,200);
+  g.drawString("Back",g.getWidth() - 10, g.getHeight() - 40);
   setWatch(function() {
     viewTrack(info.fn, info);
-  }, BTN3);
+  }, global.BTN3||BTN1);
+  Bangle.drawWidgets();
   g.flip();
 }
 
@@ -260,8 +265,8 @@ function plotGraph(info, style) {
   E.showMenu(); // remove menu
   E.showMessage("Calculating...","GPS Track "+info.fn);
   var filename = getFN(info.fn);
-  var infn = new Float32Array(200);
-  var infc = new Uint16Array(200);
+  var infn = new Float32Array(80);
+  var infc = new Uint16Array(80);
   var title;
   var lt = 0; // last time
   var tn = 0; // count for each time period
@@ -278,7 +283,7 @@ function plotGraph(info, style) {
     title = "Altitude (m)";
     while(l!==undefined) {
       ++nl;c=l.split(",");
-      i = Math.round(200*(c[0]/1000 - strt)/dur);
+      i = Math.round(80*(c[0]/1000 - strt)/dur);
       infn[i]+=+c[3];
       infc[i]++;
       l = f.readLine(f);
@@ -289,7 +294,7 @@ function plotGraph(info, style) {
     var t,dx,dy,d,lt = c[0]/1000;
     while(l!==undefined) {
       ++nl;c=l.split(",");
-      i = Math.round(200*(c[0]/1000 - strt)/dur);
+      i = Math.round(80*(c[0]/1000 - strt)/dur);
       t = c[0]/1000;
       p = Bangle.project({lat:c[1],lon:c[2]});
       dx = p.x-lp.x;
@@ -320,21 +325,21 @@ function plotGraph(info, style) {
   // draw
   g.clear(1).setFont("6x8",1);
   var r = require("graph").drawLine(g, infn, {
-    x:4,y:0,
+    x:4,y:24,
     width: g.getWidth()-24,
-    height: g.getHeight()-8,
+    height: g.getHeight()-(24+8),
     axes : true,
     gridy : grid,
-    gridx : 50,
+    gridx : infn.length / 3,
     title: title,
     xlabel : x=>Math.round(x*dur/(60*infn.length))+" min" // minutes
   });
   g.setFont("6x8",2);
   g.setFontAlign(0,0,3);
-  g.drawString("Back",230,200);
+  g.drawString("Back",g.getWidth() - 10, g.getHeight() - 40);
   setWatch(function() {
     viewTrack(info.fn, info);
-  }, BTN3);
+  }, global.BTN3||BTN1);
   g.flip();
 }
 
diff --git a/apps/gpsrec/widget.js b/apps/gpsrec/widget.js
index 6a47f04c5..995f5f73b 100644
--- a/apps/gpsrec/widget.js
+++ b/apps/gpsrec/widget.js
@@ -26,6 +26,7 @@
     fixToggle = !fixToggle;
     WIDGETS["gpsrec"].draw();
     if (hasFix) {
+      if (fix.time===undefined) fix.time = new Date(); // Bangle.js 2 can provide a fix before time it seems
       var period = fix.time.getTime() - lastFixTime;
       if (period+500 > settings.period*1000) { // round up
         lastFixTime = fix.time.getTime();
diff --git a/apps/gpsservice/ChangeLog b/apps/gpsservice/ChangeLog
deleted file mode 100644
index 9b415e6a7..000000000
--- a/apps/gpsservice/ChangeLog
+++ /dev/null
@@ -1,4 +0,0 @@
-0.01: New App
-0.02: Restore to SuperE mode on power off.
-0.03: dont reset to SuperE mode on power, as it prevents its general use
-0.04: Only turn GPS off if it was previously on (stops other apps/widgets that use GPS getting broken)
diff --git a/apps/gpsservice/README.md b/apps/gpsservice/README.md
deleted file mode 100644
index 061f3ba3b..000000000
--- a/apps/gpsservice/README.md
+++ /dev/null
@@ -1,141 +0,0 @@
-# GPS Service
-
-A configurable, low power GPS widget that runs in the background.
-
-NOTE: This app has been superceded by [gpssetup](https://github.com/espruino/BangleApps/blob/master/apps/gpssetup/README.md)
-
-
-## Goals
-
-To develop a low power GPS widget that runs in the background and to
-facilitate an OS grid reference display in a watch face.
-
-
-* An app that turns on the GPS and constantly displays the screen
-  will use around 75mA, the battery will last between 3-4 hours.
-
-* Using the GPS in a Widget in Super-E Power Saving Mode (PSM) with
-  the screen off most of the time, will consume around 35mA and you
-  might get 10hrs before a recharge.
-  
-* Using the GPS in Power Saving Mode On/Off (PSMOO) with suitable
-  settings can reduce the average consumption to around 15mA.  A
-  simple test using a 120s update period, 6s search period was still
-  running with 45% battery 20 hours after it started.
-
-
-## Settings
-
-The Settings App enables you set the following options for the GPS
-Service.  Go to Settings, select App/Widgets and then 'GPS Service'.
-
-- GPS - On/Off.  When this value is changed the GPS Service will be
-  powered on or off and the GPS Widget will be displayed.
-
-- Power Mode:
-
-   - SuperE - the factory default setup for the GPS. The recommended
-   power saving mode.
-
-   - PSMOO - On/Off power saving mode. Configured by interval and
-   search time. Choose this mode if you are happy to get a GPS
-   position update less often (say every 1 or 2 minutes). The longer
-   the interval the more time the GPS will spend sleeping in low
-   power mode (7mA) between obtaining fixes (35mA).  For walking in
-   open country an update once every 60 seconds is adequate to put
-   you within a 6 digit grid refernce sqaure.
-
-- update - the time between two position fix attempts.
-
-- search - the time between two acquisition attempts if the receiver
-  is unable to get a position fix.
-
-
-
-## Screenshots
-### GPS Watch face
-
-* The Age value is the number of seconds since the last position fix was received.
-
-![](gps_face.jpg)
-
-### Grid Reference Watch face
-
-* The time shown is the timestamp of the last position fix.
-* The age value is shown at the bottom of the screen. 
-
-![](osref_face.jpg)
-
-## Interface for Apps
-
-The code below demonstrates how you can setup and start the gpsservice from your own App.
-
-```js
-function test_gps_on() {
-
-  var settings = WIDGETS.gpsservice.gps_get_settings();
-
-  // change the settings to what you require
-  settings.gpsservice = true;
-  settings.update = 65;
-  settings.search = 5;
-  settings.power_mode = "PSMOO";
-  
-  WIDGETS.gpsservice.gps_set_settings(settings);
-  WIDGETS.gpsservice.reload(); // will power on
-}
-```
-
-In your app can retrieve the last fix as and when required.
-
-```js
-var fix = {
-  fix: 0,
-  alt: 0,
-  lat: 0,
-  lon: 0,
-  speed: 0,
-  time: 0,
-  satellites: 0
-};
-
-// only attempt to get gps fix if gpsservice is loaded
-if (WIDGETS.gpsservice !== undefined) {
-  fix = WIDGETS.gpsservice.gps_get_fix();
-  gps_on = WIDGETS.gpsservice.gps_get_status();
-}
-
-if (fix.fix) {
-  var time = formatTime(fix.time);
-  var age = timeSince(time);
-```
-
-When done you can turn the gpsservice off using the code below.
-
-```js
-function test_gps_off() {
-
-  var settings = WIDGETS.gpsservice.gps_get_settings();
-
-  settings.gpsservice = false;
-  settings.power_mode = "SuperE";
-  
-  WIDGETS.gpsservice.gps_set_settings(settings);
-  WIDGETS.gpsservice.reload(); // will power off
-}
-```
-
-## To Do List
-* add a logging option with options for interval between log points
-* add graphics and icons to the watch faces to make them look nicer
-
-
-## References
-
-* [UBLOX M8 Receiver Data Sheet](https://www.u-blox.com/sites/default/files/products/documents/u-blox8-M8_ReceiverDescrProtSpec_%28UBX-13003221%29.pdf)
-
-* [UBLOX Power Management App Note](https://www.u-blox.com/sites/default/files/products/documents/PowerManagement_AppNote_%28UBX-13005162%29.pdf)
-
-* Some useful code on Github and be found [here](https://portal.u-blox.com/s/question/0D52p0000925T00CAE/ublox-max-m8q-getting-stuck-when-sleeping-with-extint-pin-control)
-and [here](https://github.com/thasti/utrak/blob/master/gps.c)
-
diff --git a/apps/gpsservice/app.js b/apps/gpsservice/app.js
deleted file mode 100644
index 14bc48938..000000000
--- a/apps/gpsservice/app.js
+++ /dev/null
@@ -1,70 +0,0 @@
-Bangle.loadWidgets();
-Bangle.drawWidgets();
-
-const SETTINGS_FILE = "gpsservice.settings.json";
-let settings = require("Storage").readJSON(SETTINGS_FILE,1)||{};
-
-
-
-function updateSettings() {
-  require("Storage").write(SETTINGS_FILE, settings);
-}
-
-function reloadWidget() {
-  if (WIDGETS.gpsservice)
-    WIDGETS.gpsservice.reload();
-}
-
-function showMainMenu() {
-  var power_options = ["SuperE","PSMOO"];
-
-  const mainmenu = {
-    '': { 'title': 'GPS Service' },
-    '< Exit': ()=>{load();},
-    'GPS': {
-      value: !!settings.gpsservice,
-      format: v =>v?'On':'Off',
-      onchange: v => {
-        settings.gpsservice = v;
-	updateSettings();
-	reloadWidget();  // only when we change On/Off status
-      },
-    },
-
-    'Power Mode': {
-      value: 0 | power_options.indexOf(settings.power_mode),
-      min: 0, max: 1,
-      format: v => power_options[v],
-      onchange: v => {
-        settings.power_mode = power_options[v];
-	updateSettings();
-      },
-    },
-
-    'Update (s)': {
-      value: settings.update,
-      min: 10,
-      max: 1800,
-      step: 10,
-      onchange: v => {
-	settings.period =v;
-	updateSettings();
-      }
-    },
-    'Search (s)': {
-      value: settings.search,
-      min: 1,
-      max: 65,
-      step: 1,
-      onchange: v => {
-	settings.search = v;
-	updateSettings();
-      }
-    },
-    '< Back': ()=>{load();}
-  };
-
-  return E.showMenu(mainmenu);
-}
-
-showMainMenu();
diff --git a/apps/gpsservice/gps_face.jpg b/apps/gpsservice/gps_face.jpg
deleted file mode 100644
index 839d86895..000000000
Binary files a/apps/gpsservice/gps_face.jpg and /dev/null differ
diff --git a/apps/gpsservice/gpsservice-icon.js b/apps/gpsservice/gpsservice-icon.js
deleted file mode 100644
index b3f2dd3d4..000000000
--- a/apps/gpsservice/gpsservice-icon.js
+++ /dev/null
@@ -1 +0,0 @@
-require("heatshrink").decompress(atob("mEwghC/AH4AKg9wC6t3u4uVC6wWBI6t3uJeVuMQCqcBLisAi4XLxAABFxAXKgc4DBAuBRhQXEDAq7MmYXEwBHEXZYXFGAOqAAKDMmczC4mIC62CC50PC4JIBkQABiIvRmURAAUSjQXSFwMoxGKC6CRFwUSVYgXLPIgXXwMYegoXLJAYXCGBnzGA0hPQIwMgYwGC6gwCC4ZIMC4gYBC604C4ZISmcRVgapQAAMhC6GIJIwXCMBcIxGDDBAuLC4IwGAARGMAAQWGmAXPJQoWMC4pwCCpoXJAB4XXAH4A/ABQA="))
diff --git a/apps/gpsservice/gpsservice.png b/apps/gpsservice/gpsservice.png
deleted file mode 100644
index 970e85139..000000000
Binary files a/apps/gpsservice/gpsservice.png and /dev/null differ
diff --git a/apps/gpsservice/osref_face.jpg b/apps/gpsservice/osref_face.jpg
deleted file mode 100644
index ff1cece7c..000000000
Binary files a/apps/gpsservice/osref_face.jpg and /dev/null differ
diff --git a/apps/gpsservice/settings.js b/apps/gpsservice/settings.js
deleted file mode 100644
index 471c23163..000000000
--- a/apps/gpsservice/settings.js
+++ /dev/null
@@ -1,4 +0,0 @@
-(function(back) {
-  // just go right to our app
-  load("gpsservice.app.js");
-})();
diff --git a/apps/gpsservice/settings.json b/apps/gpsservice/settings.json
deleted file mode 100644
index 3d687f9c2..000000000
--- a/apps/gpsservice/settings.json
+++ /dev/null
@@ -1 +0,0 @@
-{"gpsservice":false, "power_mode":"SuperE", "update":120, "search":6}
diff --git a/apps/gpsservice/test-bed.js b/apps/gpsservice/test-bed.js
deleted file mode 100644
index 0713cab9b..000000000
--- a/apps/gpsservice/test-bed.js
+++ /dev/null
@@ -1,259 +0,0 @@
-
-/*
-
-test bed for working out lowest power consumption, with workable GPS
-Load into IDE and upload code to RAM when connected to watch
-
-*/
-
-
-Bangle.on('GPS-raw',function (d) {
-  if (d[0]=="$") return;
-  if (d.startsWith("\xB5\x62\x05\x01")) print("GPS ACK");
-  else if (d.startsWith("\xB5\x62\x05\x00")) print("GPS NACK");
-  // 181,98 sync chars  
-  else print("GPS",E.toUint8Array(d).join(","));
-});
-
-function writeGPScmd(cmd) {
-  var d = [0xB5,0x62]; // sync chars
-  d = d.concat(cmd);
-  var a=0,b=0;
-  for (var i=2;i {
-  var settings = {};
-  var fixToggle = false; // toggles once for each reading
-  var have_fix = false;
-  var debug = false;
-  var gpsPowerEnabled = false;
-
-  var last_fix = {
-    fix: 0,
-    alt: 0,
-    lat: 0,
-    lon: 0,
-    speed: 0,
-    time: 0,
-    satellites: 0
-  };
-
-  function gps_get_fix() { return last_fix; }
-  function gps_get_status() { return WIDGETS.gpsservice.width === 24 ? true : false;}
-  function gps_get_version() { return "0.03"; }
-
-  function log_debug(o) {
-    if (debug) console.log(o);
-  }
-
-  function gps_set_debug(v) {
-    debug = v;
-  }
-
-  // Called by the GPS widget settings to reload settings and decide what to do
-  function reload() {
-    settings = gps_get_settings();
-    log_debug(settings);
-    Bangle.removeListener('GPS',onGPS);
-
-    if (settings.gpsservice) {
-       gps_power_on();
-    } else {
-       gps_power_off();
-    }
-  }
-
-  // retrieve the settings from Storage, can be called by external apps
-  function gps_get_settings() {
-    var sets = require("Storage").readJSON("gpsservice.settings.json",1)||{};
-    sets.gpsservice = sets.gpsservice||false;
-    sets.update = sets.update||120;
-    sets.search = sets.search||5;
-    sets.power_mode = sets.power_mode||"SuperE";
-    return sets;
-  }
-
-  // pass in the required settings, can be called by external apps
-  function gps_set_settings(sets) {
-    settings.gpsservice = sets.gpsservice||false;
-    settings.update = sets.update||120;
-    settings.search = sets.search||5;
-    settings.power_mode = sets.power_mode||"SuperE";
-    require("Storage").write("gpsservice.settings.json", settings);
-  }
-
-  // issue: currently possible to call this without having set settings.gpsservice in settings file
-  function gps_power_on() {
-    have_fix = false;
-    fixToggle = false;
-    setupGPS();
-    WIDGETS.gpsservice.width = 24;
-  }
-
-  function gps_power_off() {
-    //setupSuperE();  // return to expected setup for other apps
-    if (gpsPowerEnabled) {
-      gpsPowerEnabled = false;
-      Bangle.setGPSPower(0);
-    }
-    have_fix = false;
-    fixToggle = false;
-    last_fix.fix = 0;
-    WIDGETS.gpsservice.width = 0;
-  }
-
-  // quick hack
-  function wait(ms){
-    var start = new Date().getTime();
-    var end = start;
-    while(end < start + ms) {
-      end = new Date().getTime();
-    }
-  }
-
-  function setupGPS() {
-    Bangle.setGPSPower(1);
-    gpsPowerEnabled = true;
-
-    if (settings.power_mode === "PSMOO") {
-      setupPSMOO();
-    } else {
-      setupSuperE();
-    }
-    Bangle.on('GPS',onGPS);
-  }
-
-  function setupPSMOO() {
-    log_debug("setupGPS() PSMOO");
-    UBX_CFG_RESET();
-    wait(100);
-
-    UBX_CFG_PM2(settings.update, settings.search);
-    wait(20);
-
-    UBX_CFG_RXM();
-    wait(20);
-
-    UBX_CFG_SAVE();
-    wait(20);
-  }
-
-  function setupSuperE() {
-    log_debug("setupGPS() Super-E");
-    UBX_CFG_RESET();
-    wait(100);
-
-    UBX_CFG_PMS();
-    wait(20);
-
-    UBX_CFG_SAVE();
-    wait(20);
-  }
-
-  function writeGPScmd(cmd) {
-    var d = [0xB5,0x62]; // sync chars
-    d = d.concat(cmd);
-    var a=0,b=0;
-    for (var i=2;i>8;
-    } while (i);
-
-    return bytes;
-  }
-
-
-  /*
-   * Extended Power Management
-   * update and search are in milli seconds
-   * settings are loaded little endian, lsb first
-   *
-   * https://github.com/thasti/utrak/blob/master/gps.c
-   */
-  function UBX_CFG_PM2(update,search) {
-
-    var u = int_2_bytes(update*1000);
-    var s = int_2_bytes(search*1000);
-
-    writeGPScmd([0x06, 0x3B,                /* class id */
-     44, 0,                      /* length */
-     0x01, 0x00, 0x00, 0x00,    /* v1, reserved 1..3 */
-     0x00, 0x10, 0x00, 0x00,    /* on/off-mode, update ephemeris */
-     u[3], u[2], u[1], u[0],    /* update period, ms, 120s=00 01 D4 C0, 30s= 00 00 75 30 */
-     s[3], s[2], s[1], s[0],    /* search period, ms, 120s, 20s = 00 00 4E 20, 5s = 13 88 */
-     0x00, 0x00, 0x00, 0x00,    /* grid offset */
-     0x00, 0x00,              /* on-time after first fix */
-     0x01, 0x00,                /* minimum acquisition time */
-     0x00, 0x00, 0x00, 0x00,    /* reserved 4,5 */
-     0x00, 0x00, 0x00, 0x00,    /* reserved 6 */
-     0x00, 0x00, 0x00, 0x00,    /* reserved 7 */
-     0x00, 0x00, 0x00, 0x00,    /* reserved 8,9,10 */
-     0x00, 0x00, 0x00, 0x00]);  /* reserved 11 */
-  }
-
-  // enable power saving mode, after configured with PM2
-  function UBX_CFG_RXM() {
-    writeGPScmd([0x06, 0x11,      /* UBX-CFG-RXM */
-     2, 0,            /* length */
-     0x08, 0x01]);    /* reserved, enable power save mode */
-  }
-
-
-  /*
-   * Save configuration otherwise it will reset when the GPS wakes up
-   *
-   */
-  function UBX_CFG_SAVE() {
-    writeGPScmd([0x06, 0x09,   // class id
-     0x0D, 0x00,   // length
-     0x00, 0x00, 0x00, 0x00,  // clear mask
-     0xFF, 0xFF, 0x00, 0x00,  // save mask
-     0x00, 0x00, 0x00, 0x00,  // load mask
-     0x07]);                  // b2=eeprom b1=flash b0=bat backed ram
-  }
-
-  /*
-   * Reset to factory settings using clear mask in UBX_CFG_CFG
-   * https://portal.u-blox.com/s/question/0D52p0000925T00CAE/ublox-max-m8q-getting-stuck-when-sleeping-with-extint-pin-control
-   */
-  function UBX_CFG_RESET() {
-    writeGPScmd([0x06, 0x09,   // class id
-                 0x0D, 0x00,
-     0xFF, 0xFB, 0x00, 0x00,  // clear mask
-     0x00, 0x00, 0x00, 0x00,  // save mask
-     0xFF, 0xFF, 0x00, 0x00,  // load mask
-     0x17]);
-  }
-
-  // draw the widget
-  function draw() {
-    if (!settings.gpsservice) return;
-    g.reset();
-    g.drawImage(atob("GBgCAAAAAAAAAAQAAAAAAD8AAAAAAP/AAAAAAP/wAAAAAH/8C9AAAB/8L/QAAAfwv/wAAAHS//wAAAAL//gAAAAf/+AAAAAf/4AAAAL//gAAAAD/+DwAAAB/Uf8AAAAfA//AAAACAf/wAAAAAH/0AAAAAB/wAAAAAAfAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA"),this.x,this.y);
-    if (gps_get_status() === true && have_fix) {
-      g.setColor("#00FF00");
-      g.drawImage(fixToggle ? atob("CgoCAAAAA0AAOAAD5AAPwAAAAAAAAAAAAAAAAA==") : atob("CgoCAAABw0AcOAHj5A8PwHwAAvgAB/wABUAAAA=="),this.x,this.y+14);
-    } else {
-      g.setColor("#0000FF");
-      if (fixToggle) g.setFont("6x8").drawString("?",this.x,this.y+14);
-    }
-  }
-
-  function onGPS(fix) {
-    fixToggle = !fixToggle;
-    WIDGETS.gpsservice.draw();
-    log_debug(fix);
-    last_fix.satellites = fix.satellites;
-
-    /*
-     * If we have a fix record it, we will get another soon. Apps
-     * will see the timestamp of the last fix and be able to work out
-     * if it is stale. This means an App will always have the last
-     * known fix, and we avoid saying no fix all the time.
-     *
-     */
-    if (fix.fix) {
-      last_fix.fix = fix.fix;
-      last_fix.alt = fix.alt;
-      last_fix.lat = fix.lat;
-      last_fix.lon = fix.lon;
-      last_fix.speed = fix.speed;
-      last_fix.time = fix.time;
-    }
-  }
-
-  // redraw when the LCD turns on
-  Bangle.on('lcdPower', function(on) {
-    if (on) WIDGETS.gpsservice.draw();
-  });
-
-  // add the widget
-  WIDGETS.gpsservice = {
-    area:"tl",
-    width:24,
-    draw:draw,
-    gps_power_on:gps_power_on,
-    gps_power_off:gps_power_off,
-    gps_get_status:gps_get_status,
-    gps_get_fix:gps_get_fix,
-    gps_get_version:gps_get_version,
-    gps_get_settings:gps_get_settings,
-    gps_set_settings:gps_set_settings,
-    gps_set_debug:gps_set_debug,
-    reload:function() {
-      reload();
-      Bangle.drawWidgets(); // relayout all widgets
-    }};
-
-  // load settings, set correct widget width
-  reload();
-
-})();
diff --git a/apps/gpstime/ChangeLog b/apps/gpstime/ChangeLog
index a3bd6351e..4d9bbc8a2 100644
--- a/apps/gpstime/ChangeLog
+++ b/apps/gpstime/ChangeLog
@@ -1,2 +1,3 @@
 0.03: Fix time output on new firmwares when no GPS time set (fix #104)
-0.04: Fix shown UTC time zone sign
\ No newline at end of file
+0.04: Fix shown UTC time zone sign
+0.05: Use new 'layout library for Bangle2, fix #764 by adding a back button
diff --git a/apps/gpstime/gpstime-icon.js b/apps/gpstime/gpstime-icon.js
index 665c8d5f6..99998c6c4 100644
--- a/apps/gpstime/gpstime-icon.js
+++ b/apps/gpstime/gpstime-icon.js
@@ -1 +1 @@
-require("heatshrink").decompress(atob("mEwghC/AH8A1QWVhWq0AuVAAIuVAAIwT1WinQwTFwMzmQwTCYMjlUqGCIuBlWi0UzC6JdBIoMjC4UDmAuOkYXBPAWgmczLp2ilUiVAUDC4IwLFwIUBLoJ2BFwQwM1WjCgJ1DFwQwLFwJ1B0SQCkQWDGBQXBCgK9BDgKQBAAgwJOwUzRgIDBC54wCkZdGPBwACRgguDBIIwLFxEJBQIwLFxGaBYQwKFxQwLgAWGmQuBcAQwJC48ifYYwJgUidgsyC4L7DGBIXBdohnBCgL7BcYIXIGAqMCIoL7DL5IwERgIUBLoL7BO5QXBGAK7DkWiOxQXGFwOjFoUyFxZhDgBdCCgJ1CCxYxCgBABkcqOwIuNGAQXC0S9BLpgAFXoIwBmYuPAAYwCLp4wHFyYwDFyYwDFygwCCyoA/AFQA="))
+require("heatshrink").decompress(atob("mEw4UA////G161hyd8Jf4ALlQLK1WABREC1WgBZEK32oFxPW1QuJ7QwIFwOqvQLHhW31NaBY8qy2rtUFoAuG3W61EVqALF1+qr2gqtUHQu11dawNVqo6F22q9XFBYIwEhWqz2r6oLBGAheBqwuBBYx2CFwQLGlWqgoLCMAsKLoILChR6EgQuDqkqYYsBFweqYYoLDoWnYYoLD/WVYYv8FwXqPoIwEn52BqGrPoILEh/1FwOl9SsBBYcD/pdB2uq/QvEh/8LoOu1xHFh8/gGp9WWL4oMBgWltXeO4owBgWt1ReFYYh2GYYmXEQzDD3wiHegYKIGAJRGAAguJAH4AC"))
diff --git a/apps/gpstime/gpstime.js b/apps/gpstime/gpstime.js
index a061d2e23..8c80953fa 100644
--- a/apps/gpstime/gpstime.js
+++ b/apps/gpstime/gpstime.js
@@ -1,68 +1,75 @@
-var img = require("heatshrink").decompress(atob("mEwghC/AH8A1QWVhWq0AuVAAIuVAAIwT1WinQwTFwMzmQwTCYMjlUqGCIuBlWi0UzC6JdBIoMjC4UDmAuOkYXBPAWgmczLp2ilUiVAUDC4IwLFwIUBLoJ2BFwQwM1WjCgJ1DFwQwLFwJ1B0SQCkQWDGBQXBCgK9BDgKQBAAgwJOwUzRgIDBC54wCkZdGPBwACRgguDBIIwLFxEJBQIwLFxGaBYQwKFxQwLgAWGmQuBcAQwJC48ifYYwJgUidgsyC4L7DGBIXBdohnBCgL7BcYIXIGAqMCIoL7DL5IwERgIUBLoL7BO5QXBGAK7DkWiOxQXGFwOjFoUyFxZhDgBdCCgJ1CCxYxCgBABkcqOwIuNGAQXC0S9BLpgAFXoIwBmYuPAAYwCLp4wHFyYwDFyYwDFygwCCyoA/AFQA="));
+function satelliteImage() {
+  return require("heatshrink").decompress(atob("mEwxH+AH4A/AH4A/AH4AGnE4F1wvsF34wgFldcLdyMYsoACF1WJF4YxPFzOtF4wxNFzAvKSiIvU1ovIGAkJAAQucF5QxCFwYwbF4QwLrwvjYIVfrwABrtdq9Wqwvkq4oCAAtXmYvi1teE4NXrphCrxoCGAbvdSIoAHNQNeFzQvGeRQvCsowrYYNfF8YwHZQQFCF8QwGF4owjeYovBroHEMERhEF8IwNrtWryYFF8YwCq4vhGBeJF5AwaxIwKwVXFwwvandfMJeJF8M6nZiLGQIvdstfGAVlGBZkCxJeZJQIwCGIRjMFzYACGIc6r/+FsIvGGIYABEzYvPGQYvusovkAH4A/AH4A/ACo="));
+}
+
+var fix;
 
 Bangle.setLCDPower(1);
 Bangle.setLCDTimeout(0);
+var Layout = require("Layout");
+Bangle.setGPSPower(1, "app");
+Bangle.loadWidgets();
+Bangle.drawWidgets();
+E.showMessage("Loading..."); // avoid showing rubbish on screen
 
-g.clear();
-
-var fix;
-Bangle.setGPSPower(1);
-Bangle.on('GPS',function(f) {
-  fix = f;
-  g.reset(1);
-  g.setFont("6x8",2);
-  g.setFontAlign(0,0);
-  g.clearRect(90,30,239,90);
-  if (fix.fix) {
-    g.drawString("GPS",170,40);
-    g.drawString("Acquired",170,60);
+function setGPSTime() {
+  if (fix.time!==undefined) {
+    setTime(fix.time.getTime()/1000);
+    E.showMessage("System time set", {img:require("heatshrink").decompress(atob("lEo4UBvvv///vEFBYNVAAWq1QFDBAgKGrQJD0oJDtQJD1IICqwGBFoIDByocDwAJBgQeDtWoJwcqDwWq0EAgfAgEKHoQcCBIQeBGAQaBBIQzBytaEwQJDlWlrQmBBIkK0tqBI+ptRNCBIcCBKhECBIh6CAgUL8AJHl/4BI8+3gJRl/8GJH/BI8Ah6MDLIZQB+BjGAAIoBBI84BIaVCAAaVBVIYJEWYLkEXobRDAAbRBcoYACcoT5DEwYJCtQoElWpBINaDwYcB0oJBGQIzCAYIwBDwQGBAAIcCDwYACDgQACBIYIEBQYFDA="))});
   } else {
-    g.drawString("Waiting for",170,40);
-    g.drawString("GPS Fix",170,60);
+    E.showMessage("No GPS time to set");
   }
-  g.setFont("6x8");
-  g.drawString(fix.satellites+" satellites",170,80);
 
-  g.clearRect(0,100,239,239);
-  var t = ["","","","---",""];
-  if (fix.time!==undefined)
+  Bangle.removeListener('GPS',onGPS);
+  setTimeout(function() {
+    fix = undefined;
+    layout.forgetLazyState(); // redraw all next time
+    Bangle.on('GPS',onGPS);
+  }, 2000);
+}
+
+var layout = new Layout( {
+  type:"v", c: [
+    {type:"h", c:[
+      {type:"img", src:satelliteImage },
+      { type:"v", fillx:1, c: [
+       {type:"txt", font:"6x8:2", label:"Waiting\nfor GPS", id:"status" },
+       {type:"txt", font:"6x8", label:"---", id:"sat" },
+     ]},
+    ]},
+    {type:"txt", fillx:1, filly:1, font:"6x8:2", label:"---", id:"gpstime" }
+  ]},{lazy:true, btns: [
+    { label : "Set", cb : setGPSTime},
+    { label : "Back", cb : ()=>load() }
+  ]});
+
+
+function onGPS(f) {
+  if (fix===undefined) {
+    g.clear();
+    Bangle.drawWidgets();
+  }
+  fix = f;
+  if (fix.fix) {
+    layout.status.label = "GPS\nAcquired";
+  } else {
+    layout.status.label = "Waiting\nfor GPS";
+  }
+  layout.sat.label = fix.satellites+" satellites";
+
+  var t = ["","---",""];
+  if (fix.time!==undefined) {
     t = fix.time.toString().split(" ");
-    /*
- [
-  "Sun",
-  "Nov",
-  "10",
-  "2019",
-  "15:55:35",
-  "GMT+0100"
- ]
-  */
-  //g.setFont("6x8",2);
-  //g.drawString(t[0],120,110); // day
-  g.setFont("6x8",3);
-  g.drawString(t[1]+" "+t[2],120,135); // date
-  g.setFont("6x8",2);
-  g.drawString(t[3],120,160); // year
-  g.setFont("6x8",3);
-  g.drawString(t[4],120,185); // time
-  if (fix.time) {
-    // timezone
     var tz = (new Date()).getTimezoneOffset()/-60;
     if (tz==0) tz="UTC";
     else if (tz>0) tz="UTC+"+tz;
     else tz="UTC"+tz;
-    g.setFont("6x8",2);
-    g.drawString(tz,120,210); // gmt
-    g.setFontAlign(0,0,3);
-    g.drawString("Set",230,120);
-    g.setFontAlign(0,0);
-  }
-});
 
-setInterval(function() {
-  g.drawImage(img,48,48,{scale:1.5,rotate:Math.sin(getTime()*2)/2});
-},100);
-setWatch(function() {
-  if (fix.time!==undefined)
-    setTime(fix.time.getTime()/1000);
-}, BTN2, {repeat:true});
+    t = [t[1]+" "+t[2],t[3],t[4],t[5],tz];
+  }
+
+  layout.gpstime.label = t.join("\n");
+  layout.render();
+}
+
+Bangle.on('GPS',onGPS);
diff --git a/apps/gpstouch/Changelog b/apps/gpstouch/Changelog
new file mode 100644
index 000000000..7f837e50e
--- /dev/null
+++ b/apps/gpstouch/Changelog
@@ -0,0 +1 @@
+0.01: First version
diff --git a/apps/gpstouch/README.md b/apps/gpstouch/README.md
new file mode 100644
index 000000000..7329f9833
--- /dev/null
+++ b/apps/gpstouch/README.md
@@ -0,0 +1,16 @@
+# GPS Touch
+
+- A touch controlled GPS watch for Bangle JS 2
+- Key feature is the conversion of Lat/Lon into Ordinance Servey Grid Reference
+- Swipe left and right to change the display
+- Select GPS and switch the GPS On or Off by touching twice in the top half of the display
+- Select LOGGER and switch the GPS Recorder On or Off by touching twice in the top half of the display
+- Displays the GPS time in the bottom half of the screen when the GPS is powered on, otherwise 00:00:00 
+- Select display of Course, Speed, Altitude, Longitude, Latitude, Ordinance Servey Grid Reference
+
+## Screenshots
+
+![](screenshot1.png)
+![](screenshot2.png)
+![](screenshot3.png)
+![](screenshot4.png)
diff --git a/apps/gpstouch/geotools.js b/apps/gpstouch/geotools.js
new file mode 100644
index 000000000..5adc57872
--- /dev/null
+++ b/apps/gpstouch/geotools.js
@@ -0,0 +1,128 @@
+/**
+ * 
+ * A module of Geo functions for use with gps fixes
+ *
+ * let geo = require("geotools");
+ * let os = geo.gpsToOSGrid(fix);
+ * let ref = geo.gpsToOSMapRef(fix);
+ *
+ */
+
+Number.prototype.toRad = function() { return this*Math.PI/180; };
+/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */
+/*  Ordnance Survey Grid Reference functions  (c) Chris Veness 2005-2014                          */
+/*   - www.movable-type.co.uk/scripts/gridref.js                                                  */
+/*   - www.movable-type.co.uk/scripts/latlon-gridref.html                                         */
+/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */
+function OsGridRef(easting, northing) {
+  this.easting = 0|easting;
+  this.northing = 0|northing;
+}
+OsGridRef.latLongToOsGrid = function(point) {
+  var lat = point.lat.toRad();
+  var lon = point.lon.toRad();
+
+  var a = 6377563.396, b = 6356256.909;          // Airy 1830 major & minor semi-axes
+  var F0 = 0.9996012717;                         // NatGrid scale factor on central meridian
+  var lat0 = (49).toRad(), lon0 = (-2).toRad();  // NatGrid true origin is 49�N,2�W
+  var N0 = -100000, E0 = 400000;                 // northing & easting of true origin, metres
+  var e2 = 1 - (b*b)/(a*a);                      // eccentricity squared
+  var n = (a-b)/(a+b), n2 = n*n, n3 = n*n*n;
+
+  var cosLat = Math.cos(lat), sinLat = Math.sin(lat);
+  var nu = a*F0/Math.sqrt(1-e2*sinLat*sinLat);              // transverse radius of curvature
+  var rho = a*F0*(1-e2)/Math.pow(1-e2*sinLat*sinLat, 1.5);  // meridional radius of curvature
+  var eta2 = nu/rho-1;
+
+  var Ma = (1 + n + (5/4)*n2 + (5/4)*n3) * (lat-lat0);
+  var Mb = (3*n + 3*n*n + (21/8)*n3) * Math.sin(lat-lat0) * Math.cos(lat+lat0);
+  var Mc = ((15/8)*n2 + (15/8)*n3) * Math.sin(2*(lat-lat0)) * Math.cos(2*(lat+lat0));
+  var Md = (35/24)*n3 * Math.sin(3*(lat-lat0)) * Math.cos(3*(lat+lat0));
+  var M = b * F0 * (Ma - Mb + Mc - Md);              // meridional arc
+
+  var cos3lat = cosLat*cosLat*cosLat;
+  var cos5lat = cos3lat*cosLat*cosLat;
+  var tan2lat = Math.tan(lat)*Math.tan(lat);
+  var tan4lat = tan2lat*tan2lat;
+
+  var I = M + N0;
+  var II = (nu/2)*sinLat*cosLat;
+  var III = (nu/24)*sinLat*cos3lat*(5-tan2lat+9*eta2);
+  var IIIA = (nu/720)*sinLat*cos5lat*(61-58*tan2lat+tan4lat);
+  var IV = nu*cosLat;
+  var V = (nu/6)*cos3lat*(nu/rho-tan2lat);
+  var VI = (nu/120) * cos5lat * (5 - 18*tan2lat + tan4lat + 14*eta2 - 58*tan2lat*eta2);
+
+  var dLon = lon-lon0;
+  var dLon2 = dLon*dLon, dLon3 = dLon2*dLon, dLon4 = dLon3*dLon, dLon5 = dLon4*dLon, dLon6 = dLon5*dLon;
+
+  var N = I + II*dLon2 + III*dLon4 + IIIA*dLon6;
+  var E = E0 + IV*dLon + V*dLon3 + VI*dLon5;
+
+  return new OsGridRef(E, N);
+};
+
+/*
+ * converts northing, easting to standard OS grid reference.
+ *
+ * [digits=10] - precision (10 digits = metres)
+ *   to_map_ref(8, 651409, 313177); => 'TG 5140 1317'
+ *   to_map_ref(0, 651409, 313177); => '651409,313177'
+ *
+ */
+function to_map_ref(digits, easting, northing) {
+  if (![ 0,2,4,6,8,10,12,14,16 ].includes(Number(digits))) throw new RangeError(`invalid precision '${digits}'`); // eslint-disable-line comma-spacing
+
+  let e = easting;
+  let n = northing;
+
+  // use digits = 0 to return numeric format (in metres) - note northing may be >= 1e7
+  if (digits == 0) {
+    const format = { useGrouping: false,  minimumIntegerDigits: 6, maximumFractionDigits: 3 };
+    const ePad = e.toLocaleString('en', format);
+    const nPad = n.toLocaleString('en', format);
+    return `${ePad},${nPad}`;
+  }
+
+  // get the 100km-grid indices
+  const e100km = Math.floor(e / 100000), n100km = Math.floor(n / 100000);
+
+  // translate those into numeric equivalents of the grid letters
+  let l1 = (19 - n100km) - (19 - n100km) % 5 + Math.floor((e100km + 10) / 5);
+  let l2 = (19 - n100km) * 5 % 25 + e100km % 5;
+
+  // compensate for skipped 'I' and build grid letter-pairs
+  if (l1 > 7) l1++;
+  if (l2 > 7) l2++;
+  const letterPair = String.fromCharCode(l1 + 'A'.charCodeAt(0), l2 + 'A'.charCodeAt(0));
+
+  // strip 100km-grid indices from easting & northing, and reduce precision
+  e = Math.floor((e % 100000) / Math.pow(10, 5 - digits / 2));
+  n = Math.floor((n % 100000) / Math.pow(10, 5 - digits / 2));
+
+  // pad eastings & northings with leading zeros
+  e = e.toString().padStart(digits/2, '0');
+  n = n.toString().padStart(digits/2, '0');
+
+  return `${letterPair} ${e} ${n}`;
+}
+
+/**
+ * 
+ * Module exports section, example code below
+ *
+ * let geo = require("geotools");
+ * let os = geo.gpsToOSGrid(fix);
+ * let ref = geo.gpsToOSMapRef(fix);
+ */
+
+// get easting and northings
+exports.gpsToOSGrid = function(gps_fix) {
+  return OsGridRef.latLongToOsGrid(gps_fix);
+}
+
+// string with an OS Map grid reference
+exports.gpsToOSMapRef = function(gps_fix) {
+  let os = OsGridRef.latLongToOsGrid(last_fix);
+  return to_map_ref(6, os.easting, os.northing);
+}
diff --git a/apps/gpstouch/gpstouch.app.js b/apps/gpstouch/gpstouch.app.js
new file mode 100644
index 000000000..4e49dd1e5
--- /dev/null
+++ b/apps/gpstouch/gpstouch.app.js
@@ -0,0 +1,246 @@
+const h = g.getHeight();
+const w = g.getWidth();
+let geo = require("geotools");
+let last_fix;
+let listennerCount = 0;
+
+function log_debug(o) {
+  //console.log(o);
+}
+
+function resetLastFix() {
+  last_fix = {
+    fix: 0,
+    alt: 0,
+    lat: 0,
+    lon: 0,
+    speed: 0,
+    time: 0,
+    course: 0,
+    satellites: 0
+  };
+}
+
+function processFix(fix) {
+  last_fix.time = fix.time;
+  log_debug(fix);
+
+  if (fix.fix) {
+    if (!last_fix.fix) {
+      // we dont need to suppress this in quiet mode as it is user initiated
+      Bangle.buzz(1500); // buzz on first position
+    }
+    last_fix = fix;
+  }
+}
+
+function draw() {
+  var d = new Date();
+  var da = d.toString().split(" ");
+  var time = da[4].substr(0,5);
+  var hh = da[4].substr(0,2);
+  var mm = da[4].substr(3,2);
+
+  g.reset();
+  drawTop(d,hh,mm);
+  drawInfo();
+}
+
+function drawTop(d,hh,mm) {
+  g.setFont("Vector", w/3);
+  g.setFontAlign(0, 0);
+  g.setColor(g.theme.bg);
+  g.fillRect(0, 24, w, ((h-24)/2) + 24);
+  g.setColor(g.theme.fg);
+
+  g.setFontAlign(1,0);  // right aligned
+  g.drawString(hh, (w/2) - 6, ((h-24)/4) + 24);
+  g.setFontAlign(-1,0); // left aligned
+  g.drawString(mm, (w/2) + 6, ((h-24)/4) + 24);
+
+  // for the colon
+  g.setFontAlign(0,0); // centre aligned
+  if (d.getSeconds()&1) g.drawString(":", w/2, ((h-24)/4) + 24);
+}
+
+function drawInfo() {
+  if (infoData[infoMode] && infoData[infoMode].calc) {
+    g.setFont("Vector", w/7);
+    g.setFontAlign(0, 0);
+
+    if (infoData[infoMode].get_color)
+      g.setColor(infoData[infoMode].get_color());
+    else
+      g.setColor("#0ff");
+    g.fillRect(0, ((h-24)/2) + 24 + 1, w, h);
+
+    if (infoData[infoMode].is_control)
+      g.setColor("#fff");
+    else
+      g.setColor("#000");
+
+    g.drawString((infoData[infoMode].calc()), w/2, (3*(h-24)/4) + 24);
+  }
+}
+
+const infoData = {
+  ID_LAT: {
+    calc: () => 'Lat: ' + last_fix.lat.toFixed(4),
+  },
+  ID_LON: {
+    calc: () => 'Lon: ' + last_fix.lon.toFixed(4),
+  },
+  ID_SPEED: {
+    calc: () => 'Speed: ' + last_fix.speed.toFixed(1),
+  },
+  ID_ALT: {
+    calc: () => 'Alt: ' + last_fix.alt.toFixed(0),
+  },
+  ID_COURSE: {
+    calc: () => 'Course: '+ last_fix.course.toFixed(0),
+  },
+  ID_SATS: {
+    calc: () => 'Satelites: ' + last_fix.satellites,
+  },
+  ID_TIME: {
+    calc: () => formatTime(last_fix.time),
+  },
+  OS_REF: {
+    calc: () => !last_fix.fix ? "OO 000 000" : geo.gpsToOSMapRef(last_fix),
+  },
+  GPS_POWER: {
+    calc: () => (Bangle.isGPSOn()) ? 'GPS On' : 'GPS Off',
+    action: () => toggleGPS(),
+    get_color: () => Bangle.isGPSOn() ? '#f00' : '#00f',
+    is_control: true,
+  },
+  GPS_LOGGER: {
+    calc: () => 'Logger ' + loggerStatus(),
+    action: () => toggleLogger(),
+    get_color: () => loggerStatus() == "ON" ? '#f00' : '#00f',
+    is_control: true,
+  },
+};
+
+function toggleGPS() {
+  if (loggerStatus() == "ON")
+    return;
+
+  Bangle.setGPSPower(Bangle.isGPSOn() ? 0 : 1, 'gpstouch');
+  // add or remove listenner
+  if (Bangle.isGPSOn()) {
+    if (listennerCount == 0) {
+      Bangle.on('GPS', processFix);
+      listennerCount++;
+      log_debug("listennerCount=" + listennerCount);
+    }
+  } else {
+    if (listennerCount > 0) {
+      Bangle.removeListener("GPS", processFix);
+      listennerCount--;
+      log_debug("listennerCount=" + listennerCount);
+    }
+  }
+  resetLastFix();
+}
+
+function loggerStatus() {
+  var settings = require("Storage").readJSON("gpsrec.json",1)||{};
+  if (settings == {}) return "Install";
+  return settings.recording ? "ON" : "OFF";
+}
+
+function toggleLogger() {
+  var settings = require("Storage").readJSON("gpsrec.json",1)||{};
+  if (settings == {}) return;
+
+  settings.recording = !settings.recording;
+  require("Storage").write("gpsrec.json", settings);
+
+  if (WIDGETS["gpsrec"])
+    WIDGETS["gpsrec"].reload();
+
+  if (settings.recording && listennerCount == 0) {
+    Bangle.on('GPS', processFix);
+    listennerCount++;
+    log_debug("listennerCount=" + listennerCount);
+  }
+}
+
+function formatTime(now) {
+  try {
+    var fd = now.toUTCString().split(" ");
+    return fd[4];
+  } catch (e) {
+    return "00:00:00";
+  }
+}
+
+const infoList = Object.keys(infoData).sort();
+let infoMode = infoList[0];
+
+function nextInfo() {
+  let idx = infoList.indexOf(infoMode);
+  if (idx > -1) {
+    if (idx === infoList.length - 1) infoMode = infoList[0];
+    else infoMode = infoList[idx + 1];
+  }
+}
+
+function prevInfo() {
+  let idx = infoList.indexOf(infoMode);
+  if (idx > -1) {
+    if (idx === 0) infoMode = infoList[infoList.length - 1];
+    else infoMode = infoList[idx - 1];
+  }
+}
+
+Bangle.on('swipe', dir => {
+  if (dir == 1) prevInfo(); else nextInfo();
+  draw();
+});
+
+let prevTouch = 0;
+
+Bangle.on('touch', function(button, xy) {
+  let dur = 1000*(getTime() - prevTouch);
+  prevTouch = getTime();
+
+  if (dur <= 1000 && xy.y < h/2 && infoData[infoMode].is_control) {
+    Bangle.buzz();
+    if (infoData[infoMode] && infoData[infoMode].action) {
+      infoData[infoMode].action();
+      draw();
+    }
+  }
+});
+
+// Stop updates when LCD is off, restart when on
+Bangle.on('lcdPower', on => {
+  if (secondInterval)
+    clearInterval(secondInterval);
+  secondInterval = undefined;
+  if (on)
+    secondInterval = setInterval(draw, 1000);
+  draw();
+});
+
+resetLastFix();
+
+// add listenner if already powered on, plus tag app
+if (Bangle.isGPSOn() || loggerStatus() == "ON") {
+  Bangle.setGPSPower(1, 'gpstouch');
+  if (listennerCount == 0) {
+    Bangle.on('GPS', processFix);
+    listennerCount++;
+    log_debug("listennerCount=" + listennerCount);
+  }
+}
+
+g.clear();
+var secondInterval = setInterval(draw, 1000);
+draw();
+// Show launcher when button pressed
+Bangle.setUI("clock");
+Bangle.loadWidgets();
+Bangle.drawWidgets();
diff --git a/apps/gpstouch/gpstouch.icon.js b/apps/gpstouch/gpstouch.icon.js
new file mode 100644
index 000000000..c4cf85676
--- /dev/null
+++ b/apps/gpstouch/gpstouch.icon.js
@@ -0,0 +1 @@
+require("heatshrink").decompress(atob("mEw4UA///j+EAYO/uYDB//wCYcPBA4AFh/ABZMDBbkX6gLIgtX6tQBY9VBYNVBY0BBYdABYsFqoACEgQLDitVtWpqtUBYtVq2q1WVGAQLErQLB0oLFHQNqBYIkBHgMDIwYKBAAJIDIweqz/2BYJtDBYI6Bv/9HgILHYwILGh4gBBYWfbooLF6AjPBYW//wLGL4Wv/RfGNZaDIBYibEBYizIBYjLDBYzXBd4TXCBZ60BBYRqEBZpUBBYRSFJAQLCA4b7BHgQLFgYLGIwYLEgoLBHQYLEgILBHQYLEgALBAoYLFi/UBZMHBZUD6ALKApQAFBbHwBZMP/4ABBwgIDA="))
diff --git a/apps/gpstouch/gpstouch.png b/apps/gpstouch/gpstouch.png
new file mode 100644
index 000000000..c411356ae
Binary files /dev/null and b/apps/gpstouch/gpstouch.png differ
diff --git a/apps/gpstouch/screenshot1.png b/apps/gpstouch/screenshot1.png
new file mode 100644
index 000000000..03cb1e2a9
Binary files /dev/null and b/apps/gpstouch/screenshot1.png differ
diff --git a/apps/gpstouch/screenshot2.png b/apps/gpstouch/screenshot2.png
new file mode 100644
index 000000000..a05794b34
Binary files /dev/null and b/apps/gpstouch/screenshot2.png differ
diff --git a/apps/gpstouch/screenshot3.png b/apps/gpstouch/screenshot3.png
new file mode 100644
index 000000000..9e3115d72
Binary files /dev/null and b/apps/gpstouch/screenshot3.png differ
diff --git a/apps/gpstouch/screenshot4.png b/apps/gpstouch/screenshot4.png
new file mode 100644
index 000000000..924371f5f
Binary files /dev/null and b/apps/gpstouch/screenshot4.png differ
diff --git a/apps/grocery/ChangeLog b/apps/grocery/ChangeLog
index 5560f00bc..906046782 100644
--- a/apps/grocery/ChangeLog
+++ b/apps/grocery/ChangeLog
@@ -1 +1,2 @@
 0.01: New App!
+0.02: Refactor code to store grocery list in separate file
diff --git a/apps/grocery/app.js b/apps/grocery/app.js
new file mode 100644
index 000000000..481efc3d9
--- /dev/null
+++ b/apps/grocery/app.js
@@ -0,0 +1,29 @@
+var filename = 'grocery_list.json';
+var settings = require("Storage").readJSON(filename,1)|| { products: [] };
+
+function updateSettings() {
+  require("Storage").writeJSON(filename, settings);
+  Bangle.buzz();
+}
+
+function twoChat(n){
+  if(n<10) return '0'+n;
+  return ''+n;
+}
+
+const mainMenu = settings.products.reduce(function(m, p, i){
+  const name = twoChat(p.quantity)+' '+p.name;
+  m[name] = {
+    value: p.ok,
+    format: v => v?'[x]':'[ ]',
+    onchange: v => {
+      settings.products[i].ok = v;
+      updateSettings();
+    }
+  };
+  return m;
+}, {
+  '': { 'title': 'Grocery list' }
+});
+mainMenu['< Back'] = ()=>{load();};
+E.showMenu(mainMenu);
diff --git a/apps/grocery/grocery.html b/apps/grocery/grocery.html
index 14c406d75..e717dee2e 100644
--- a/apps/grocery/grocery.html
+++ b/apps/grocery/grocery.html
@@ -105,56 +105,9 @@
       }
 
       document.getElementById("upload").addEventListener("click", function() {
-
-
-        var app = `
-var newTime = ${Date.now()}
-var products = ${JSON.stringify(products)}
-var newTime = newTime;
-var filename = 'grocery';
-var settings = require("Storage").readJSON(filename,1)|| null;
-function getSettings(){
-  return {
-    products : products,
-    date: newTime
-  };
-}
-if(!settings || !settings.date || settings.date < newTime){
-  settings = getSettings();
-  Bangle.buzz(500);
-}
-function updateSettings() {
-  require("Storage").writeJSON(filename, settings);
-  Bangle.buzz();
-}
-function twoChat(n){
-  if(n<10) return '0'+n;
-  return ''+n;
-}
-const mainMenu = settings.products.reduce(function(m, p, i){
-  const name = twoChat(p.quantity)+' '+p.name;
-  m[name] = {
-    value: p.ok,
-    format: v => v?'[x]':'[ ]',
-    onchange: v => {
-      settings.products[i].ok = v;
-      updateSettings();
-    }
-  };
-  return m;
-}, {
-  '': { 'title': 'Grocery list' }
-});
-mainMenu['< Back'] = ()=>{load();};
-E.showMenu(mainMenu);
-`;
-
-        var icon = `require("heatshrink").decompress(atob("mEwxH+AH4A/AH4AQ0QACF1nGAAIxpFoYwqFwwwnRggwGB4eFAggACLzwHCMAeF1WGAgOGw2x2IGCLzYGEF4YpBwotCFwJfWFwo1GSAYtBAIIABRq4vFMhAwBzoAFdzIuKAAOc4IAGGC4qEMZOiF44wXFxovleBYvIGCwmB0WjE4V/AgfG1IvCzujFQOjwoECF6WFwovBDYOFEwN/AgIwCAgOFBwYrBBAQEBzodCF6AAHww1CBpIODAAYvRDAWG2IEBAYYJFBxICCF6Ox1WxAAQfBAYQlCAAIOJAQIvUADQvn1WGR4RfbP4gAFBwgFCF7a5EdwQADF46/cL9wAQF94AGF85bB1TvmF47vdJ4bvFF8qPRFgLv/L7jPCaQq/fYYrvgJgoAGd/7v/F/4v/F5oAdF54weFyAA/AH4A3A="))`;
         sendCustomizedApp({
           storage:[
-            {name:"grocery.app.js", url:"app.js", content:app},
-            {name:"grocery.img", content:icon, evaluate:true},
-            {name:"grocery"}
+            { name:"grocery_list.json", content: JSON.stringify({products: products}) }
           ]
         });
       });
diff --git a/apps/hcclock/ChangeLog b/apps/hcclock/ChangeLog
index 0ca30d066..aaa55d01a 100644
--- a/apps/hcclock/ChangeLog
+++ b/apps/hcclock/ChangeLog
@@ -1,2 +1,2 @@
 0.01: base code
-
+0.02: saved settings when switching color scheme
\ No newline at end of file
diff --git a/apps/hcclock/bangle1-high-contrast-clock-screenshot.png b/apps/hcclock/bangle1-high-contrast-clock-screenshot.png
new file mode 100644
index 000000000..f3cd85e70
Binary files /dev/null and b/apps/hcclock/bangle1-high-contrast-clock-screenshot.png differ
diff --git a/apps/hcclock/hcclock.app.js b/apps/hcclock/hcclock.app.js
index 98abbc6f3..4664dd763 100644
--- a/apps/hcclock/hcclock.app.js
+++ b/apps/hcclock/hcclock.app.js
@@ -174,19 +174,52 @@ function fmtDate(day,month,year,hour)
     let ap = "(AM)";
     if(hour == 0 || hour > 12)
       ap = "(PM)";
-    return months[month] + " " + day + " " + year + " "+ ap;    
+    return months[month] + " " + day + " " + year + " "+ ap;
   }
   else
     return months[month] + ". " + day + " " + year;
 }
 
-// Handles Flipping colors, then refreshes the UI
+
+//////////////////////////////////////////
+//
+//  HANDLE COLORS + SETTINGS
+//
+
+function getColorScheme()
+{
+    let settings = require('Storage').readJSON("hcclock.json", true) || {};
+    if (!("scheme" in settings)) {
+      settings.scheme = 0;
+    }
+    return settings.scheme;
+}
+
+function setColorScheme(value)
+{
+    let settings = require('Storage').readJSON("hcclock.json", true) || {};
+    settings.scheme = value;
+    require('Storage').writeJSON('hcclock.json', settings);
+
+    if(value == 0) // White
+    {
+      bg = 255;
+      fg = 0;
+    }
+    else // Black
+    {
+      bg = 0;
+      fg = 255;
+    }
+    redraw();
+}
+
 function flipColors()
 {
-  let t = bg;
-  bg = fg;
-  fg = t;
-  redraw();
+  if(getColorScheme() == 0)
+      setColorScheme(1);
+  else
+      setColorScheme(0);
 }
 
 //////////////////////////////////////////
@@ -197,7 +230,7 @@ function flipColors()
 // Initialize
 g.clear();
 Bangle.loadWidgets();
-redraw();
+setColorScheme(getColorScheme());
 
 // Define Refresh Interval
 setInterval(updateTime, interval);
diff --git a/apps/health/ChangeLog b/apps/health/ChangeLog
new file mode 100644
index 000000000..bde4f8ab8
--- /dev/null
+++ b/apps/health/ChangeLog
@@ -0,0 +1,9 @@
+0.01: New App!
+0.02: Modified data format to include daily summaries
+0.03: Settings to turn HRM on
+0.04: Add HRM graph view
+      Don't restart HRM when changing apps if we've already got a good BPM value
+0.05: Fix daily summary calculation
+0.06: Fix daily health summary for movement (a line got deleted!)
+0.07: Added coloured bar charts
+0.08: Suppress bleed through of E.showMenu's when displaying bar charts
diff --git a/apps/health/README.md b/apps/health/README.md
new file mode 100644
index 000000000..c69e2e45b
--- /dev/null
+++ b/apps/health/README.md
@@ -0,0 +1,45 @@
+# Health Tracking
+
+Logs health data to a file every 10 minutes, and provides an app to view it
+
+**BETA - requires firmware 2v11**
+
+## Usage
+
+Once installed, health data is logged automatically.
+
+To view data, run the `Health` app from your watch.
+
+## Features
+
+Stores:
+
+* Heart rate
+* Step count
+* Movement
+
+## Settings
+
+* **Heart Rt** - Whether to monitor heart rate or not
+  * **Off** - Don't turn HRM on, but record heart rate if the HRM was turned on by another app/widget
+  * **10 Min** - Turn HRM on every 10 minutes (for each heath entry) and turn it off after 2 minutes, or when a good reading is found
+  * **Always** - Keep HRM on all the time (more accurate recording, but reduces battery life to ~36 hours)
+
+
+## Technical Info
+
+Once installed, the `health.boot.js` hooks onto the `Bangle.health` event and
+writes data to a binary file (one per month).
+
+A library (that can be used with `require("health").readXYZ` can then be used
+to grab historical health info.
+
+## TODO
+
+* `interface` page for desktop to allow data to be viewed and exported in common formats
+* More features in app:
+  * Step counting goal (ensure pedometers use this)
+  * Calendar view showing steps per day
+  * Yearly view
+  * Heart rate 'zone' graph
+  * .. other
diff --git a/apps/health/app-icon.js b/apps/health/app-icon.js
new file mode 100644
index 000000000..d522d9a9a
--- /dev/null
+++ b/apps/health/app-icon.js
@@ -0,0 +1 @@
+require("heatshrink").decompress(atob("mEw4UA///8H5AYM7/5L/ACsBqtQAgMFqtABYcVqtVAgIDBqgLDAwITBDYNVrQiEAANQEQNVtWAFIYfCE4Xq0AuEAAdX1W0BZFe1XUHQgADvWrJogAE9WtBYl66ouD2oLEtQGBFwQQBBYgeBFwYjFA4QuCBYgfCFwYLCL4IICFwacCPwetEwYLCR4QJBFwbFCU4QhBFwbMDNAYuCHQQwFFwowFFwowFFwwwEFwzNGFwjxFFwowEFw7aFBQwwDFwwwEFwwwEFw4wDBRAwBFxAwCFxAwCFxIA/AB4A="))
diff --git a/apps/health/app.js b/apps/health/app.js
new file mode 100644
index 000000000..08d6ead17
--- /dev/null
+++ b/apps/health/app.js
@@ -0,0 +1,257 @@
+function getSettings() {
+  return require("Storage").readJSON("health.json",1)||{};
+}
+
+function setSettings(s) {
+  require("Storage").writeJSON("health.json",s);
+}
+
+function menuMain() {
+  swipe_enabled = false;
+  clearButton();
+  E.showMenu({
+    "":{title:"Health Tracking"},
+    "< Back":()=>load(),
+    "Step Counting":()=>menuStepCount(),
+    "Movement":()=>menuMovement(),
+    "Heart Rate":()=>menuHRM(),
+    "Settings":()=>menuSettings()
+  });
+}
+
+function menuSettings() {
+  swipe_enabled = false;
+  clearButton();
+  var s=getSettings();
+  E.showMenu({
+    "":{title:"Health Tracking"},
+    "< Back":()=>menuMain(),
+    "Heart Rt":{
+      value : 0|s.hrm,
+      min : 0, max : 2,
+      format : v=>["Off","10 mins","Always"][v],
+      onchange : v => { s.hrm=v;setSettings(s); }
+    }
+  });
+}
+
+function menuStepCount() {
+  swipe_enabled = false;
+  clearButton();
+  E.showMenu({
+    "":{title:"Step Counting"},
+    "< Back":()=>menuMain(),
+    "per hour":()=>stepsPerHour(),
+    "per day":()=>stepsPerDay()
+  });
+}
+
+function menuMovement() {
+  swipe_enabled = false;
+  clearButton();
+  E.showMenu({
+    "":{title:"Movement"},
+    "< Back":()=>menuMain(),
+    "per hour":()=>movementPerHour(),
+    "per day":()=>movementPerDay(),
+  });
+}
+
+function menuHRM() {
+  swipe_enabled = false;
+  clearButton();
+  E.showMenu({
+    "":{title:"Heart Rate"},
+    "< Back":()=>menuMain(),
+    "per hour":()=>hrmPerHour(),
+    "per day":()=>hrmPerDay(),
+  });
+}
+
+
+function stepsPerHour() {
+  E.showMessage("Loading...");
+  var data = new Uint16Array(24);
+  require("health").readDay(new Date(), h=>data[h.hr]+=h.steps);
+  g.clear(1);
+  Bangle.drawWidgets();
+  g.reset();
+  setButton(menuStepCount);
+  barChart("HOUR", data);
+}
+
+function stepsPerDay() {
+  E.showMessage("Loading...");
+  var data = new Uint16Array(31);
+  require("health").readDailySummaries(new Date(), h=>data[h.day]+=h.steps);
+  g.clear(1);
+  Bangle.drawWidgets();
+  g.reset();
+  setButton(menuStepCount);
+  barChart("DAY", data);
+}
+
+function hrmPerHour() {
+  E.showMessage("Loading...");
+  var data = new Uint16Array(24);
+  var cnt = new Uint8Array(23);
+  require("health").readDay(new Date(), h=>{
+    data[h.hr]+=h.bpm;
+    if (h.bpm) cnt[h.hr]++;
+  });
+  data.forEach((d,i)=>data[i] = d/cnt[i]);
+  g.clear(1);
+  Bangle.drawWidgets();
+  g.reset();
+  setButton(menuHRM);
+  barChart("HOUR", data);
+}
+
+function hrmPerDay() {
+  E.showMessage("Loading...");
+  var data = new Uint16Array(31);
+  var cnt = new Uint8Array(31);
+  require("health").readDailySummaries(new Date(), h=>{
+    data[h.day]+=h.bpm;
+    if (h.bpm) cnt[h.day]++;
+  });
+  data.forEach((d,i)=>data[i] = d/cnt[i]);
+  g.clear(1);
+  Bangle.drawWidgets();
+  g.reset();
+  setButton(menuHRM);
+  barChart("DAY", data);
+}
+
+function movementPerHour() {
+  E.showMessage("Loading...");
+  var data = new Uint16Array(24);
+  require("health").readDay(new Date(), h=>data[h.hr]+=h.movement);
+  g.clear(1);
+  Bangle.drawWidgets();
+  g.reset();
+  setButton(menuMovement);
+  barChart("HOUR", data);
+}
+
+function movementPerDay() {
+  E.showMessage("Loading...");
+  var data = new Uint16Array(31);
+  require("health").readDailySummaries(new Date(), h=>data[h.day]+=h.movement);
+  g.clear(1);
+  Bangle.drawWidgets();
+  g.reset();
+  setButton(menuMovement);
+  barChart("DAY", data);
+}
+
+// Bar Chart Code
+
+const w = g.getWidth();
+const h = g.getHeight();
+
+var data_len;
+var chart_index;
+var chart_max_datum;
+var chart_label;
+var chart_data;
+var swipe_enabled = false;
+var btn;
+
+// find the max value in the array, using a loop due to array size 
+function max(arr) {
+  var m = -Infinity;
+
+  for(var i=0; i< arr.length; i++)
+    if(arr[i] > m) m = arr[i];
+  return m;
+}
+
+// find the end of the data, the array might be for 31 days but only have 2 days of data in it
+function get_data_length(arr) {
+  var nlen = arr.length;
+  
+  for(var i = arr.length - 1; i > 0 && arr[i] == 0;  i--)
+    nlen--;
+  
+  return nlen;
+}
+
+function barChart(label, dt) {
+  data_len = get_data_length(dt);
+  chart_index = Math.max(data_len - 5, -5);  // choose initial index that puts the last day on the end
+  chart_max_datum = max(dt);                 // find highest bar, for scaling
+  chart_label = label;
+  chart_data = dt;
+  drawBarChart();
+  swipe_enabled = true;
+}
+
+function drawBarChart() {
+  const bar_bot = 140;
+  const bar_width = (w - 2) / 9;  // we want 9 bars, bar 5 in the centre
+  var bar_top;
+  var bar;
+  
+  g.setColor(g.theme.bg);
+  g.fillRect(0,24,w,h);
+  
+  for (bar = 1; bar < 10; bar++) {
+    if (bar == 5) {
+      g.setFont('6x8', 2);
+      g.setFontAlign(0,-1)
+      g.setColor(g.theme.fg);
+      g.drawString(chart_label + " " + (chart_index + bar -1) + "   " + chart_data[chart_index + bar - 1], g.getWidth()/2, 150);
+      g.setColor("#00f");
+    } else {
+      g.setColor("#0ff");
+    }
+
+    // draw a fake 0 height bar if chart_index is outside the bounds of the array
+    if ((chart_index + bar - 1) >= 0 && (chart_index + bar - 1) < data_len) 
+      bar_top = bar_bot - 100 * (chart_data[chart_index + bar - 1]) / chart_max_datum;
+    else
+      bar_top = bar_bot;
+
+    g.fillRect( 1 + (bar - 1)* bar_width, bar_bot, 1 + bar*bar_width, bar_top);
+    g.setColor(g.theme.fg);
+    g.drawRect( 1 + (bar - 1)* bar_width, bar_bot, 1 + bar*bar_width, bar_top);
+  }
+}
+
+function next_bar() {
+  chart_index = Math.min(data_len - 5, chart_index + 1);
+}
+
+function prev_bar() {
+  // HOUR data starts at index 0, DAY data starts at index 1
+  chart_index = Math.max((chart_label == "DAY") ? -3 : -4, chart_index - 1);
+}
+
+Bangle.on('swipe', dir => {
+  if (!swipe_enabled) return;
+  if (dir == 1) prev_bar(); else next_bar();
+  drawBarChart();
+});
+
+// use setWatch() as Bangle.setUI("updown",..) interacts with swipes
+function setButton(fn) {
+  // cancel callback, otherwise a slight up down movement will show the E.showMenu()
+  Bangle.setUI("updown", undefined);
+  
+  if (process.env.HWVERSION == 1)
+    btn = setWatch(fn, BTN2);
+  else
+    btn = setWatch(fn, BTN1);
+}
+
+function clearButton() {
+  if (btn !== undefined) {
+    clearWatch(btn);
+    btn = undefined;
+  }
+}
+
+Bangle.loadWidgets();
+Bangle.drawWidgets();
+menuMain();
diff --git a/apps/health/app.png b/apps/health/app.png
new file mode 100644
index 000000000..04f1fee5e
Binary files /dev/null and b/apps/health/app.png differ
diff --git a/apps/health/boot.js b/apps/health/boot.js
new file mode 100644
index 000000000..386d75833
--- /dev/null
+++ b/apps/health/boot.js
@@ -0,0 +1,84 @@
+(function(){
+   var settings = require("Storage").readJSON("health.json",1)||{};
+   var hrm = 0|settings.hrm;
+   if (hrm==1) {
+     function onHealth() {
+       Bangle.setHRMPower(1, "health");
+       setTimeout(()=>Bangle.setHRMPower(0, "health"),2*60000); // give it 2 minutes
+     }
+     Bangle.on("health", onHealth);
+     Bangle.on('HRM', h => {
+       if (h.confidence>80) Bangle.setHRMPower(0, "health");
+     });
+     if (Bangle.getHealthStatus().bpmConfidence) return;
+     onHealth();
+   } else Bangle.setHRMPower(hrm!=0, "health");
+})();
+
+Bangle.on("health", health => {
+  // ensure we write health info for *last* block
+  var d = new Date(Date.now() - 590000);
+
+  const DB_RECORD_LEN = 4;
+  const DB_RECORDS_PER_HR = 6;
+  const DB_RECORDS_PER_DAY = DB_RECORDS_PER_HR*24 + 1/*summary*/;
+  const DB_RECORDS_PER_MONTH = DB_RECORDS_PER_DAY*31;
+  const DB_HEADER_LEN = 8;
+  const DB_FILE_LEN = DB_HEADER_LEN + DB_RECORDS_PER_MONTH*DB_RECORD_LEN;
+
+  function getRecordFN(d) {
+    return "health-"+d.getFullYear()+"-"+d.getMonth()+".raw";
+  }
+  function getRecordIdx(d) {
+    return (DB_RECORDS_PER_DAY*(d.getDate()-1)) +
+           (DB_RECORDS_PER_HR*d.getHours()) +
+           (0|(d.getMinutes()*DB_RECORDS_PER_HR/60));
+  }
+  function getRecordData(health) {
+    return String.fromCharCode(
+      health.steps>>8,health.steps&255, // 16 bit steps
+      health.bpm, // 8 bit bpm
+      Math.min(health.movement / 8, 255)); // movement
+  }
+
+  var rec = getRecordIdx(d);
+  var fn = getRecordFN(d);
+  var f = require("Storage").read(fn);
+  if (f) {
+    var dt = f.substr(DB_HEADER_LEN+(rec*DB_RECORD_LEN), DB_RECORD_LEN);
+    if (dt!="\xFF\xFF\xFF\xFF") {
+      print("HEALTH ERR: Already written!");
+      return;
+    }
+  } else {
+    require("Storage").write(fn, "HEALTH1\0", 0, DB_FILE_LEN); // header
+  }
+  var recordPos = DB_HEADER_LEN+(rec*DB_RECORD_LEN);
+  require("Storage").write(fn, getRecordData(health), recordPos, DB_FILE_LEN);
+  if (rec%DB_RECORDS_PER_DAY != DB_RECORDS_PER_DAY-2) return;
+  // we're at the end of the day. Read in all of the data for the day and sum it up
+  var sumPos = recordPos + DB_RECORD_LEN; // record after the current one is the sum
+  if (f.substr(sumPos, DB_RECORD_LEN)!="\xFF\xFF\xFF\xFF") {
+    print("HEALTH ERR: Daily summary already written!");
+    return;
+  }
+  health = { steps:0, bpm:0, movement:0, movCnt:0, bpmCnt:0};
+  var records = DB_RECORDS_PER_HR*24;
+  for (var i=0;i
+  
+    
+  
+  
+    

+
+    
+    
+  
+
diff --git a/apps/health/lib.js b/apps/health/lib.js
new file mode 100644
index 000000000..70305bff8
--- /dev/null
+++ b/apps/health/lib.js
@@ -0,0 +1,84 @@
+const DB_RECORD_LEN = 4;
+const DB_RECORDS_PER_HR = 6;
+const DB_RECORDS_PER_DAY = DB_RECORDS_PER_HR*24 + 1/*summary*/;
+const DB_RECORDS_PER_MONTH = DB_RECORDS_PER_DAY*31;
+const DB_HEADER_LEN = 8;
+const DB_FILE_LEN = DB_HEADER_LEN + DB_RECORDS_PER_MONTH*DB_RECORD_LEN;
+
+function getRecordFN(d) {
+  return "health-"+d.getFullYear()+"-"+d.getMonth()+".raw";
+}
+function getRecordIdx(d) {
+  return (DB_RECORDS_PER_DAY*(d.getDate()-1)) +
+         (DB_RECORDS_PER_HR*d.getHours()) +
+         (0|(d.getMinutes()*DB_RECORDS_PER_HR/60));
+}
+
+// Read all records from the given month
+exports.readAllRecords = function(d, cb) {
+  var fn = getRecordFN(d);
+  var f = require("Storage").read(fn);
+  if (f===undefined) return;
+  var idx = DB_HEADER_LEN;
+  for (var day=0;day<31;day++) {
+    for (var hr=0;hr<24;hr++) { // actually 25, see below
+      for (var m=0;m {
+        NRF.sendHIDReport([1,0], () => {
+          if (cb) cb();
+        });
+      });
+    } catch(e) {
+      print(e);
+    }
+  };
+  next = function (cb) { sendHid(0x01, cb); };
+  prev = function (cb) { sendHid(0x02, cb); };
+  toggle = function (cb) { sendHid(0x10, cb); };
+  up = function (cb) {sendHid(0x40, cb); };
+  down = function (cb) { sendHid(0x80, cb); };
+} else {
+  E.showPrompt("Enable HID?",{title:"HID disabled"}).then(function(enable) {
+    if (enable) {
+      settings.HID = "kbmedia";
+      require("Storage").write('setting.json', settings);
+      setTimeout(load, 1000, "hidmsicswipe.app.js");
+    } else setTimeout(load, 1000);
+  });
+}
+
+function drawApp() {
+  g.clear();
+  if(Bangle.isLocked()==false) E.showMessage('Swipe', 'Music');
+  else E.showMessage('Locked', 'Music');
+}
+
+if (next) {
+  setWatch(function(e) {
+    var len = e.time - e.lastTime;
+      E.showMessage('lock');
+      setTimeout(drawApp, 1000);
+      Bangle.setLocked(true);
+  }, BTN1, { edge:"falling",repeat:true,debounce:50});
+  Bangle.on('drag', function(e) {  
+    if(!e.b){
+      //console.log(lasty);
+      //console.log(lastx);
+    if(lasty >  40){
+    E.showMessage('down');
+      setTimeout(drawApp, 1000);
+      down(() => {});
+    }
+      else if(lasty < -40){
+    E.showMessage('up');
+      setTimeout(drawApp, 1000);
+      up(() => {});
+    } else if(lastx < -40){
+    E.showMessage('prev');
+      setTimeout(drawApp, 1000);
+      prev(() => {});
+    } else if(lastx > 40){
+    E.showMessage('next');
+      setTimeout(drawApp, 1000);
+      next(() => {});
+    } else if(lastx==0 && lasty==0){
+    E.showMessage('play/pause');
+      setTimeout(drawApp, 1000);
+      toggle(() => {});
+    }
+      lastx = 0;
+      lasty = 0;
+    }
+            else{
+            lastx = lastx + e.dx;
+            lasty = lasty + e.dy;
+  }
+  });
+  
+  Bangle.on("lock", function(on) {
+    if(!on){
+      E.showMessage('unlock');
+      setTimeout(drawApp, 1000);
+    }
+  });
+
+  drawApp();
+}
diff --git a/apps/hidmsicswipe/hidmsicswipe.png b/apps/hidmsicswipe/hidmsicswipe.png
new file mode 100644
index 000000000..923b5aa0e
Binary files /dev/null and b/apps/hidmsicswipe/hidmsicswipe.png differ
diff --git a/apps/hrings/bangle1-hypno-rings-screenshot.png b/apps/hrings/bangle1-hypno-rings-screenshot.png
new file mode 100644
index 000000000..66f8bcba2
Binary files /dev/null and b/apps/hrings/bangle1-hypno-rings-screenshot.png differ
diff --git a/apps/hrm/ChangeLog b/apps/hrm/ChangeLog
index d27886b15..9b390b63e 100644
--- a/apps/hrm/ChangeLog
+++ b/apps/hrm/ChangeLog
@@ -3,3 +3,4 @@
 0.03: Fix timing issues, and use 1/2 scale to keep graph on screen
 0.04: Update for new firmwares that have a 'HRM-raw' event
 0.05: Tweaks for 'HRM-raw' handling
+0.06: Add widgets
diff --git a/apps/hrm/heartrate-icon.js b/apps/hrm/heartrate-icon.js
index cadbc7dfa..20c9b15f7 100644
--- a/apps/hrm/heartrate-icon.js
+++ b/apps/hrm/heartrate-icon.js
@@ -1 +1 @@
-require("heatshrink").decompress(atob("mEwghC/AH4AThnMAAXABJoMHBwgJJAAYMFAAIJLFxImCBJIuLABYuI4gXNNZFCC6AIFkZIQA4szC6vEmdMC60sC6nDmc8C6RDBC4irLC4gTBocymgGBoYXO4UyUwNEAYKrMC4ZEBUwNMVAR7LC4dDCoYBBSYJ7DoZQCC4kCmczkc0JIVM4UzmgaBAAQWD4AXBggJBJAIkBocs4c0BAQXJJARBD4c8oc8HAKZCI4gWCVAYXEJIJoCOovNC4cMUIQPB4RFBTAYAFIwapEC4JyCZAalHGAvCJYZYCVAYuIMIhjE5heGCwxhDMYTtIFw4wFoYsGFxIwF4YuRGAh7DFxxhGFyIYKCxqrGIpwwKFx4YGCyJJFCyQYDCygA/AH4AFA="))
+require("heatshrink").decompress(atob("mEw4UA///g3yrv/7f+Jf4AJgNVoAEGAANVAAIEGCIQABoAEEBYMFAwVQAggLBioGCqgEEFIgAGFwdXBYw1Dr4LKrwLHIIVaBYxNDvXVBanVteVBZGVt+VKooLBq+19u1JItQgNW0vlBYIxEL4Ne1u18taGIN9BYUD1XvBYN62+q1a0D1d7ytttYLEWYV6BYNt93VEYKzCita6t59vqX4sFIgN70tqa4pUBTgO1vbvFgB0BKQNZawYACdYNeytdFwgwCBYJ2DFwQwCqoxBFwwABBYoKEGAKyDFwgwDFw4kDERBVDEQ4kEEQ4kDBRAYBERBuCNAoA/AA4="))
diff --git a/apps/hrm/heartrate.js b/apps/hrm/heartrate.js
index a6b8e791a..a47251010 100644
--- a/apps/hrm/heartrate.js
+++ b/apps/hrm/heartrate.js
@@ -4,13 +4,14 @@ Bangle.setHRMPower(1);
 var hrmInfo, hrmOffset = 0;
 var hrmInterval;
 var btm = g.getHeight()-1;
+var lastHrmPt = []; // last xy coords we draw a line to
 
 function onHRM(h) {
   if (counter!==undefined) {
     // the first time we're called remove
     // the countdown
     counter = undefined;
-    g.clear();
+    g.clearRect(0,24,g.getWidth(),g.getHeight());
   }
   hrmInfo = h;
   /* On 2v09 and earlier firmwares the only solution for realtime
@@ -28,7 +29,7 @@ function onHRM(h) {
 
   var px = g.getWidth()/2;
   g.setFontAlign(0,0);
-  g.clearRect(0,24,239,80);
+  g.clearRect(0,24,g.getWidth(),80);
   g.setFont("6x8").drawString("Confidence "+hrmInfo.confidence+"%", px, 75);
   var str = hrmInfo.bpm;
   g.setFontVector(40).drawString(str,px,45);
@@ -43,17 +44,18 @@ Bangle.on('HRM-raw', function(v) {
   hrmOffset++;
   if (hrmOffset>g.getWidth()) {
     hrmOffset=0;
-    g.clearRect(0,80,239,239);
-    g.moveTo(-100,0);
+    g.clearRect(0,80,g.getWidth(),g.getHeight());
+    lastHrmPt = [-100,0];
   }
 
   y = E.clip(btm-v.filt/4,btm-10,btm);
   g.setColor(1,0,0).fillRect(hrmOffset,btm, hrmOffset, y);
   y = E.clip(170 - (v.raw/2),80,btm);
-  g.setColor(g.theme.fg).lineTo(hrmOffset, y);
+  g.setColor(g.theme.fg).drawLine(lastHrmPt[0],lastHrmPt[1],hrmOffset, y);
+  lastHrmPt = [hrmOffset, y];
   if (counter !==undefined) {
     counter = undefined;
-    g.clear();
+    g.clearRect(0,24,g.getWidth(),g.getHeight());
   }
 });
 
@@ -65,7 +67,10 @@ function countDown() {
     setTimeout(countDown, 1000);
   }
 }
-g.clear().setFont("6x8",2).setFontAlign(0,0);
+g.clear();
+Bangle.loadWidgets();
+Bangle.drawWidgets();
+g.reset().setFont("6x8",2).setFontAlign(0,0);
 g.drawString("Please wait...",g.getWidth()/2,g.getHeight()/2 - 16);
 countDown();
 
@@ -79,13 +84,14 @@ function readHRM() {
   if (!hrmInfo) return;
 
   if (hrmOffset==0) {
-    g.clearRect(0,100,239,239);
-    g.moveTo(-100,0);
+    g.clearRect(0,100,g.getWidth(),g.getHeight());
+    lastHrmPt = [-100,0];
   }
   for (var i=0;i<2;i++) {
     var a = hrmInfo.raw[hrmOffset];
     hrmOffset++;
     y = E.clip(170 - (a*2),100,230);
-    g.setColor(g.theme.fg).lineTo(hrmOffset, y);
+    g.setColor(g.theme.fg).drawLine(lastHrmPt[0],lastHrmPt[1],hrmOffset, y);
+    lastHrmPt = [hrmOffset, y];
   }
 }
diff --git a/apps/impwclock/bangle1-impercise-word-clock-screenshot.png b/apps/impwclock/bangle1-impercise-word-clock-screenshot.png
new file mode 100644
index 000000000..9521c06a0
Binary files /dev/null and b/apps/impwclock/bangle1-impercise-word-clock-screenshot.png differ
diff --git a/apps/intervalTimer/ChangeLog b/apps/intervalTimer/ChangeLog
new file mode 100644
index 000000000..d62860265
--- /dev/null
+++ b/apps/intervalTimer/ChangeLog
@@ -0,0 +1 @@
+0.01: First Release
\ No newline at end of file
diff --git a/apps/intervalTimer/README.md b/apps/intervalTimer/README.md
new file mode 100644
index 000000000..d57c16e9c
--- /dev/null
+++ b/apps/intervalTimer/README.md
@@ -0,0 +1,34 @@
+# Interval Timer
+
+An interval timer for workouts and whatever else!
+
+## Usage
+
+First set the active time (i.e. the number of seconds to perform exercises).
+
+![Set Active Time](images/set-active.png)
+
+Next set the rest time (i.e. number of seconds to rest between exercises).
+
+![Set Rest Time](images/set-rest.png)
+
+Finally choose the number of sets to perform.
+
+![Set Number Sets](images/set-sets.png)
+
+Active time will be shown in red, rest time in green. The watch will buzz whenever active or rest time gets to 0.
+
+![Timer (active)](images/timer1.png)
+![Timer (rest)](images/timer2.png)
+
+You can press the physical button during timer countdown to pause the timer.
+
+![Paused](images/pause.png)
+
+View after all sets are completed. Press menu to change settings or restart to start timer again with the same settings.
+
+![Completed view](images/done.png)
+
+## Creator
+
+James Gough
diff --git a/apps/intervalTimer/app-icon.js b/apps/intervalTimer/app-icon.js
new file mode 100644
index 000000000..1ca594050
--- /dev/null
+++ b/apps/intervalTimer/app-icon.js
@@ -0,0 +1 @@
+require("heatshrink").decompress(atob("mEwwg96hWq1WgDCgXWxGZzOICqQABC4QABCyIXFDBsICIeJyfznAFBwAWPC4Of///mYYMCwgXBl4XB/4xCFxwABn4XCDAQwICw2ICwf/+YwJxGDHoQXHGARGIn/4C5QwBJAwQDC5QLCIw6GEC5BIGIwQLBJAgXGJAwXEJAgXPHgoXIEYIXFLwRIFC484C4h2DJAoIFPA+Ix4MGAAJoDHYgXKf4QXUJAYJGC5p5CF6hIBO44XNABIXGEw4AIU4rXFC5jvFc5AAHxAXGQwwAHQAIXcPCB2FC4RgOB4IXFJBxGHJB5GHJAYwKFwIXIJAIwKFwJGHGAYYICwIuIGAeImYWFmYJBFxIYEwZjC+YtCCxZJDAA4WMDBIWODIwVRAH4AXA=="))
\ No newline at end of file
diff --git a/apps/intervalTimer/app.js b/apps/intervalTimer/app.js
new file mode 100644
index 000000000..fd57dbe2b
--- /dev/null
+++ b/apps/intervalTimer/app.js
@@ -0,0 +1,306 @@
+/** 
+
+Interval Timer
+
+An app for the Bangle.js watch
+
+*/
+
+var Layout = require("Layout");
+
+// Globals
+var timerMode; // 'active' || 'rest'
+var numSets = 1;
+var activeTime = 20;
+var restTime = 10;
+var counter;
+var setsRemaining;
+var counterInterval;
+var outOfTimeTimeout;
+var timerIsPaused;
+var timerLayout;
+
+/** Called to initialize the timer layout */
+function initTimerLayout() {
+  timerLayout = new Layout( {
+    type:"v", c: [
+      {type:"txt", font:"40%", pad: 10, label:"00:00", id:"time" },
+      {type:"txt", font:"6x8:2", label:"0", id:"set" }
+      ]
+    }, {btns: [
+      {label: "Stop", cb: l => {
+          if (timerIsPaused){
+            timerIsPaused = false;
+            resumeTimer();
+          }
+          else{
+            timerIsPaused = true;
+            pauseTimer(); 
+          }
+        }
+      }
+    ]
+  });
+}
+
+/** Pauses the timer by clearing the counterInterval */
+function pauseTimer() {
+  if (counterInterval){
+    clearTimeout(counterInterval);
+    counterInterval = undefined;
+  }
+  // update layout to display "Paused"
+  timerLayout.clear(timerLayout.time);
+  timerLayout.time.label = "||";
+  timerLayout.clear(timerLayout.set);
+  timerLayout.set.label = "Paused";
+  timerLayout.render();
+}
+
+/** Reumes the timer by setting the counterInterval again */
+function resumeTimer() {
+  if (!counterInterval){
+    counterInterval = setInterval(countDown, 1000);
+  }
+  // display the timer values again.
+  timerLayout.clear(timerLayout.time);
+  timerLayout.time.label = counter;
+  timerLayout.clear(timerLayout.set);
+  timerLayout.set.label = `Sets: ${setsRemaining}`;
+  timerLayout.render();
+}
+
+/** Display 'Done' view, called when all sets are completed */
+function outOfTime() {
+  var stopLayout = new Layout( {
+  type:"v", c: [
+    {type:"txt", font:"30%", label:"Done!", id:"time" },
+  ]
+  }, {btns: [
+    // menu button allows user to modify times and sets
+    {label:"Menu", cb: l=> {
+        if (outOfTimeTimeout){
+          clearTimeout(outOfTimeTimeout);
+          outOfTimeTimeout = undefined;
+        }
+        //stopLayout.remove();
+        setup();
+      }
+    },
+    // restart button runs timer again with the same settings
+    {label:"Restart", cb: l=> {
+      if (outOfTimeTimeout){
+        clearTimeout(outOfTimeTimeout);
+        outOfTimeTimeout = undefined;
+      }
+      //stopLayout.remove();
+      timerMode = 'active';
+      startTimer();
+    }
+  }
+  ]});
+
+  if (counterInterval) return;
+  setsRemaining = numSets;
+  g.clear();
+  stopLayout.render();
+  Bangle.buzz(500);
+  Bangle.beep(200, 4000)
+    .then(() => new Promise(resolve => setTimeout(resolve,200)))
+    .then(() => Bangle.beep(200, 3000));
+}
+
+/** Function called by the counterInterval at each second.
+  Updates the timer display values.
+*/
+function countDown() {
+  // Out of time
+  if (counter<=0) {
+    if(timerMode === 'active'){
+      timerMode = 'rest';
+      startTimer();
+      return;
+    }
+    else{
+      --setsRemaining;
+      if (setsRemaining === 0){
+        clearInterval(counterInterval);
+        counterInterval = undefined;
+        //setWatch(startTimer, (process.env.HWVERSION==2) ? BTN1 : BTN2);
+        outOfTime();
+        return;
+      }
+      timerMode = 'active';
+      startTimer();
+      return;
+    }
+  }
+
+  timerLayout.clear(timerLayout.time);
+  timerLayout.time.label = counter;
+  timerLayout.render();
+  counter--;
+}
+
+/** Start the interval timer. */
+function startTimer() {
+  timerIsPaused = false;
+  g.clear();
+  if(timerMode === 'active'){
+    counter = activeTime;
+    timerLayout.time.col = '#f00';
+  }
+  else{
+    counter = restTime;
+    timerLayout.time.col = '#0f0';
+  }
+
+  timerLayout.clear(timerLayout.set);
+  timerLayout.set.label = `Sets: ${setsRemaining}`;
+  timerLayout.render();
+  Bangle.buzz();
+  countDown();
+  if (!counterInterval){
+    counterInterval = setInterval(countDown, 1000);
+  }
+}
+
+/** Menu step in which user sets the number of sets to be performed. */
+function setNumSets(){
+  g.clear();
+  var menuLayout = new Layout( {
+  type:"v", c: [
+    {type:"txt", font:"6x8:2", label:"Number Sets", id:"title" },
+    {type:"txt", font:"30%", pad: 20, label: numSets, id:"value" },
+        {type:"btn", font:"6x8:2", label:"Back", cb: l => {
+        setRestTime();
+      }
+    }
+  ]
+  }, {btns: [
+      {label:"+", cb: l=> {
+        incrementNumSets();
+      }},
+      {label:"Go", cb: l=> {
+        setsRemaining = numSets;
+        initTimerLayout();
+        startTimer();
+      }},
+      {label:"-", cb: l=>{
+        decrementNumSets();
+      }}
+  ]});
+  menuLayout.render();
+
+  const incrementNumSets = () => {
+      ++numSets;
+      menuLayout.clear(menuLayout.numSets);
+      menuLayout.value.label = numSets;
+      menuLayout.render();
+  };
+
+  const decrementNumSets = () => {
+      if(numSets === 1){
+        return; 
+      }
+      --numSets;
+      menuLayout.clear(menuLayout.numSets);
+      menuLayout.value.label = numSets;
+      menuLayout.render();
+  };
+}
+
+/** Menu step in which user sets the number of seconds of rest time for each set. */
+function setRestTime(){
+  g.clear();
+  var menuLayout = new Layout( {
+  type:"v", c: [
+    {type:"txt", font:"6x8:2", label:"Rest Time", id:"title" },
+    {type:"txt", font:"30%", pad: 20, label: restTime, id:"value" },
+    {type:"btn", font:"6x8:2", label:"Back", cb: l => {
+        setActiveTime();
+      }
+    }
+  ]
+  }, {btns: [
+      {label:"+", cb: l=> {
+        incrementRestTime();
+      }},
+      {label:"OK", cb: l=>setNumSets()},
+      {label:"-", cb: l=>{
+        decrementRestTime();
+      }}
+  ]});
+  menuLayout.render();
+
+  const incrementRestTime = () => {
+      restTime += 5;
+      menuLayout.clear(menuLayout.restTime);
+      menuLayout.value.label = restTime;
+      menuLayout.render();
+  };
+
+  const decrementRestTime = () => {
+      if(restTime === 0){
+        return; 
+      }
+      restTime -= 5;
+      menuLayout.clear(menuLayout.restTime);
+      menuLayout.value.label = restTime;
+      menuLayout.render();
+  };
+}
+
+/** Menu step in which user sets the number of seconds of active time for each set. */
+function setActiveTime(){
+  g.clear();
+  var menuLayout = new Layout( {
+  type:"v", c: [
+    {type:"txt", font:"6x8:2", label:"Active Time", id:"title" },
+    {type:"txt", font:"30%", pad: 20, label: activeTime, id:"value" }
+  ]
+  }, {btns: [
+      {font:"20%", label:"+", fillx:1, cb: l=> {
+        incrementActiveTime();
+      }},
+      {label:"OK", cb: l => setRestTime()},
+      {type:"btn", font:"20%", label:"-", fillx:1, cb: l=> {
+        decrementActiveTime();
+      }
+    }
+  ]});
+  menuLayout.render();
+
+  const incrementActiveTime = () => {
+      activeTime += 5;
+      menuLayout.clear(menuLayout.activeTime);
+      menuLayout.value.label = activeTime;
+      menuLayout.render();
+  };
+
+  const decrementActiveTime = () => {
+      if(activeTime === 0){
+        return; 
+      }
+      activeTime -= 5;
+      menuLayout.clear(menuLayout.activeTime);
+      menuLayout.value.label = activeTime;
+      menuLayout.render();
+  };
+}
+
+/** Start the setup menu, walks through setting active time, rest time, and number of sets. */
+function setup(){
+  if (timerLayout){
+    // remove timerLayout, otherwise it's pause button callback will still be registered
+    timerLayout.remove(timerLayout);
+    timerLayout = undefined;
+  }
+  Bangle.setUI(); // remove all existing input handlers
+  timerMode = 'active';
+  setActiveTime();
+}
+
+// this keeps the watch LCD lit up
+Bangle.setLCDPower(1);
+setup();
\ No newline at end of file
diff --git a/apps/intervalTimer/app.png b/apps/intervalTimer/app.png
new file mode 100644
index 000000000..782c449b3
Binary files /dev/null and b/apps/intervalTimer/app.png differ
diff --git a/apps/intervalTimer/images/done.png b/apps/intervalTimer/images/done.png
new file mode 100644
index 000000000..d210540d1
Binary files /dev/null and b/apps/intervalTimer/images/done.png differ
diff --git a/apps/intervalTimer/images/pause.png b/apps/intervalTimer/images/pause.png
new file mode 100644
index 000000000..727380799
Binary files /dev/null and b/apps/intervalTimer/images/pause.png differ
diff --git a/apps/intervalTimer/images/set-active.png b/apps/intervalTimer/images/set-active.png
new file mode 100644
index 000000000..75b86150b
Binary files /dev/null and b/apps/intervalTimer/images/set-active.png differ
diff --git a/apps/intervalTimer/images/set-rest.png b/apps/intervalTimer/images/set-rest.png
new file mode 100644
index 000000000..e33c9eb02
Binary files /dev/null and b/apps/intervalTimer/images/set-rest.png differ
diff --git a/apps/intervalTimer/images/set-sets.png b/apps/intervalTimer/images/set-sets.png
new file mode 100644
index 000000000..3d5a9107f
Binary files /dev/null and b/apps/intervalTimer/images/set-sets.png differ
diff --git a/apps/intervalTimer/images/timer1.png b/apps/intervalTimer/images/timer1.png
new file mode 100644
index 000000000..3d1cb6350
Binary files /dev/null and b/apps/intervalTimer/images/timer1.png differ
diff --git a/apps/intervalTimer/images/timer2.png b/apps/intervalTimer/images/timer2.png
new file mode 100644
index 000000000..026774ba2
Binary files /dev/null and b/apps/intervalTimer/images/timer2.png differ
diff --git a/apps/ios/ChangeLog b/apps/ios/ChangeLog
new file mode 100644
index 000000000..895f50e04
--- /dev/null
+++ b/apps/ios/ChangeLog
@@ -0,0 +1,3 @@
+0.01: New App!
+0.02: Remove messages on disconnect
+0.03: Handling of message actions (ok/clear)
diff --git a/apps/ios/app-icon.js b/apps/ios/app-icon.js
new file mode 100644
index 000000000..b74048750
--- /dev/null
+++ b/apps/ios/app-icon.js
@@ -0,0 +1 @@
+require("heatshrink").decompress(atob("mEwwZC/AGEB/4AGwARHv4RH/wQGj4QHAAP4CIoQJAAIRWg4RL8ARVn4RL/gR/CJv9BIP934DFEZH+v/0AgMv+wRK+YCBz/7C4PfCJOfAQO//JHMCIX3/d/CJ//t4RJF4JlCCIP/koRKEYh+DCIxlBCIQADCJQgCn4DCCJSbBHIIDBXYQRI/+Sp4DB7ZsCfdQRzg4RL8ARVgARLCAgRSj4QJ/ARFgF/CA/+CA0AgIRHwARHAH4AnA"))
diff --git a/apps/ios/app.js b/apps/ios/app.js
new file mode 100644
index 000000000..b210886fd
--- /dev/null
+++ b/apps/ios/app.js
@@ -0,0 +1,2 @@
+// Config app not implemented yet
+setTimeout(()=>load("messages.app.js"),10);
diff --git a/apps/ios/app.png b/apps/ios/app.png
new file mode 100644
index 000000000..79aa78f3a
Binary files /dev/null and b/apps/ios/app.png differ
diff --git a/apps/ios/boot.js b/apps/ios/boot.js
new file mode 100644
index 000000000..c3a30170d
--- /dev/null
+++ b/apps/ios/boot.js
@@ -0,0 +1,138 @@
+bleServiceOptions.ancs = true;
+Bangle.ancsMessageQueue = [];
+
+/* Handle ANCS events coming in, and fire off 'notify' events
+when we actually have all the information we need */
+E.on('ANCS',msg=>{
+  /* eg:
+  {
+    event:"add",
+    uid:42,
+    category:4,
+    categoryCnt:42,
+    silent:true,
+    important:false,
+    preExisting:true,
+    positive:false,
+    negative:true
+    } */
+
+  //console.log("ANCS",msg.event,msg.id);
+  // don't need info for remove events - pass these on
+  if (msg.event=="remove")
+    return E.emit("notify", msg);
+
+  // not a remove - we need to get the message info first
+  function ancsHandler() {
+    var msg = Bangle.ancsMessageQueue[0];
+    NRF.ancsGetNotificationInfo( msg.uid ).then( info => {
+      E.emit("notify", Object.assign(msg, info));
+      Bangle.ancsMessageQueue.shift();
+      if (Bangle.ancsMessageQueue.length)
+        ancsHandler();
+    });
+  }
+  Bangle.ancsMessageQueue.push(msg);
+  // if this is the first item in the queue, kick off ancsHandler,
+  // otherwise ancsHandler will handle the rest
+  if (Bangle.ancsMessageQueue.length==1)
+    ancsHandler();
+});
+
+// Handle ANCS events with all the data
+E.on('notify',msg=>{
+/* Info from ANCS event plus
+  "uid" : int,
+  "appId" : string,
+  "title" : string,
+  "subtitle" : string,
+  "message" : string,
+  "messageSize" : string,
+  "date" : string,
+  "posAction" : string,
+  "negAction" : string,
+  "name" : string,
+*/
+  var appNames = {
+    "com.netflix.Netflix" : "Netflix",
+    "com.google.ios.youtube" : "YouTube",
+    "com.google.hangouts" : "Hangouts",
+    "com.skype.SkypeForiPad": "Skype",
+    "com.atebits.Tweetie2": "Twitter"
+    // could also use NRF.ancsGetAppInfo(msg.appId) here
+  };
+  var unicodeRemap = {
+    '2019':"'"
+  };
+  var replacer = ""; //(n)=>print('Unknown unicode '+n.toString(16));
+  if (appNames[msg.appId]) msg.a
+  require("messages").pushMessage({
+    t : msg.event,
+    id : msg.uid,
+    src : appNames[msg.appId] || msg.appId,
+    title : msg.title&&E.decodeUTF8(msg.title, unicodeRemap, replacer),
+    subject : msg.subtitle&&E.decodeUTF8(msg.subtitle, unicodeRemap, replacer),
+    body : msg.message&&E.decodeUTF8(msg.message, unicodeRemap, replacer)
+  });
+  // TODO: posaction/negaction?
+});
+
+// Apple media service
+E.on('AMS',a=>{
+  function push(m) {
+    var msg = { t : "modify", id : "music", title:"Music" };
+    if (a.id=="artist")  msg.artist = m;
+    else if (a.id=="album")  msg.artist = m;
+    else if (a.id=="title")  msg.tracl = m;
+    else return; // duration? need to reformat
+    require("messages").pushMessage(msg);
+  }
+  if (a.truncated) NRF.amsGetMusicInfo(a.id).then(push)
+  else push(a.value);
+});
+
+// Music control
+Bangle.musicControl = cmd => {
+  // play, pause, playpause, next, prev, volup, voldown, repeat, shuffle, skipforward, skipback, like, dislike, bookmark
+  NRF.amsCommand(cmd);
+};
+// Message response
+Bangle.messageResponse = (msg,response) => {
+  if (isFinite(msg.id)) return NRF.sendANCSAction(msg.id, response);//true/false
+  // error/warn here?
+};
+// remove all messages on disconnect
+NRF.on("disconnect", () => require("messages").clearAll());
+
+/*
+// For testing...
+
+NRF.ancsGetNotificationInfo = function(uid) {
+  print("ancsGetNotificationInfo",uid);
+  return Promise.resolve({
+    "uid" : uid,
+    "appId" : "Hangouts",
+    "title" : "Hello",
+    "subtitle" : "There",
+    "message" : "Lots and lots of text",
+    "messageSize" : 100,
+    "date" : "...",
+    "posAction" : "ok",
+    "negAction" : "cancel",
+    "name" : "Fred",
+  });
+};
+
+E.emit("ANCS", {
+    event:"add",
+    uid:42,
+    category:4,
+    categoryCnt:42,
+    silent:true,
+    important:false,
+    preExisting:true,
+    positive:false,
+    negative:true
+});
+
+*/
diff --git a/apps/jbm8b_IT/bangle1-magic-8-ball-italiano-screenshot.png b/apps/jbm8b_IT/bangle1-magic-8-ball-italiano-screenshot.png
new file mode 100644
index 000000000..8bc2c7e9b
Binary files /dev/null and b/apps/jbm8b_IT/bangle1-magic-8-ball-italiano-screenshot.png differ
diff --git a/apps/largeclock/bangle1-large-clock-screenshot.png b/apps/largeclock/bangle1-large-clock-screenshot.png
new file mode 100644
index 000000000..756ae994b
Binary files /dev/null and b/apps/largeclock/bangle1-large-clock-screenshot.png differ
diff --git a/apps/launch/ChangeLog b/apps/launch/ChangeLog
index b56c9f6bb..bd8a9bd03 100644
--- a/apps/launch/ChangeLog
+++ b/apps/launch/ChangeLog
@@ -4,3 +4,5 @@
 0.04: Now displays widgets
 0.05: Use g.theme for colours
 0.06: Use Bangle.setUI for buttons
+0.07: Theme colours fix
+0.08: Merge Bangle.js 1 and 2 launchers
diff --git a/apps/launch/app.js b/apps/launch/app-bangle1.js
similarity index 94%
rename from apps/launch/app.js
rename to apps/launch/app-bangle1.js
index ab1a89fc0..3d4682e55 100644
--- a/apps/launch/app.js
+++ b/apps/launch/app-bangle1.js
@@ -16,7 +16,7 @@ function drawMenu() {
   var w = g.getWidth();
   var h = g.getHeight();
   var m = w/2;
-  var n = (h-48)/64;
+  var n = Math.floor((h-48)/64);
   if (selected>=n+menuScroll) menuScroll = 1+selected-n;
   if (selected{var a=s.readJSON(app,1);return a&&{name:a.name,type:a.type,icon:a.icon,sortorder:a.sortorder,src:a.src};}).filter(app=>app && (app.type=="app" || app.type=="clock" || !app.type));
+apps.sort((a,b)=>{
+  var n=(0|a.sortorder)-(0|b.sortorder);
+  if (n) return n; // do sortorder first
+  if (a.nameb.name) return 1;
+  return 0;
+});
+apps.forEach(app=>{
+  if (app.icon)
+    app.icon = s.read(app.icon); // should just be a link to a memory area
+});
+// FIXME: not needed after 2v11
+var font = g.getFonts().includes("12x20") ? "12x20" : "6x8:2";
+// FIXME: check not needed after 2v11
+if (g.wrapString) {
+  g.setFont(font);
+  apps.forEach(app=>app.name = g.wrapString(app.name, g.getWidth()-64).join("\n"));
+}
+
+function drawApp(i, r) {
+  var app = apps[i];
+  if (!app) return;
+  g.clearRect(r.x,r.y,r.x+r.w-1, r.y+r.h-1);
+  g.setFont(font).setFontAlign(-1,0).drawString(app.name,64,r.y+32);
+  if (app.icon) try {g.drawImage(app.icon,8,r.y+8);} catch(e){}
+}
+
+g.clear();
+Bangle.loadWidgets();
+Bangle.drawWidgets();
+
+E.showScroller({
+  h : 64, c : apps.length,
+  draw : drawApp,
+  select : i => {
+    var app = apps[i];
+    if (!app) return;
+    if (!app.src || require("Storage").read(app.src)===undefined) {
+      E.showMessage("App Source\nNot found");
+      setTimeout(drawMenu, 2000);
+    } else {
+      E.showMessage("Loading...");
+      load(app.src);
+    }
+  }
+});
diff --git a/apps/launchb2/ChangeLog b/apps/launchb2/ChangeLog
deleted file mode 100644
index 0b07ccddb..000000000
--- a/apps/launchb2/ChangeLog
+++ /dev/null
@@ -1,2 +0,0 @@
-0.01: New App!
-0.02: Fix occasional missed image when scrolling up
diff --git a/apps/launchb2/app.js b/apps/launchb2/app.js
deleted file mode 100644
index a5b265318..000000000
--- a/apps/launchb2/app.js
+++ /dev/null
@@ -1,73 +0,0 @@
-var s = require("Storage");
-var apps = s.list(/\.info$/).map(app=>{var a=s.readJSON(app,1);return a&&{name:a.name,type:a.type,icon:a.icon,sortorder:a.sortorder,src:a.src};}).filter(app=>app && (app.type=="app" || app.type=="clock" || !app.type));
-apps.sort((a,b)=>{
-  var n=(0|a.sortorder)-(0|b.sortorder);
-  if (n) return n; // do sortorder first
-  if (a.nameb.name) return 1;
-  return 0;
-});
-var APPH = 64;
-var menuScroll = 0;
-var menuShowing = false;
-var w = g.getWidth();
-var h = g.getHeight();
-var n = Math.ceil((h-24)/APPH);
-var menuScrollMax = APPH*apps.length - (h-24);
-
-apps.forEach(app=>{
-  if (app.icon)
-    app.icon = s.read(app.icon); // should just be a link to a memory area
-});
-
-function drawApp(i) {
-  var y = 24+i*APPH-menuScroll;
-  var app = apps[i];
-  if (!app || y<-APPH || y>=g.getHeight()) return;
-  g.setFont("6x8",2).setFontAlign(-1,0).drawString(app.name,64,y+32);
-  if (app.icon) try {g.drawImage(app.icon,8,y+8);} catch(e){}
-}
-
-function drawMenu() {
-  g.reset().clearRect(0,24,w-1,h-1);
-  g.setClipRect(0,24,g.getWidth()-1,g.getHeight()-1);
-  for (var i=0;i{
-  var dy = e.dy;
-  if (menuScroll - dy < 0)
-    dy = menuScroll;
-  if (menuScroll - dy > menuScrollMax)
-    dy = menuScroll - menuScrollMax;
-  if (!dy) return;
-  g.reset().setClipRect(0,24,g.getWidth()-1,g.getHeight()-1);
-  g.scroll(0,dy);
-  menuScroll -= dy;
-  if (e.dy < 0) {
-    drawApp(Math.floor((menuScroll+24+g.getHeight())/APPH)-1);
-    if (e.dy <= -APPH) drawApp(Math.floor((menuScroll+24+g.getHeight())/APPH)-2);
-  } else {
-    drawApp(Math.floor((menuScroll+24)/APPH));
-    if (e.dy >= APPH) drawApp(Math.floor((menuScroll+24)/APPH)+1);
-  }
-  g.setClipRect(0,0,g.getWidth()-1,g.getHeight()-1);
-});
-Bangle.on("touch",(_,e)=>{
-  if (e.y<20) return;
-  var i = Math.floor((e.y+menuScroll-24) / APPH);
-  var app = apps[i];
-  if (!app) return;
-  if (!app.src || require("Storage").read(app.src)===undefined) {
-    E.showMessage("App Source\nNot found");
-    setTimeout(drawMenu, 2000);
-  } else {
-    E.showMessage("Loading...");
-    load(app.src);
-  }
-});
-Bangle.loadWidgets();
-Bangle.drawWidgets();
diff --git a/apps/launchb2/app.png b/apps/launchb2/app.png
deleted file mode 100644
index 8b4e6caa2..000000000
Binary files a/apps/launchb2/app.png and /dev/null differ
diff --git a/apps/lazyclock/bangle1-lazy-clock-screenshot.png b/apps/lazyclock/bangle1-lazy-clock-screenshot.png
new file mode 100644
index 000000000..282adc289
Binary files /dev/null and b/apps/lazyclock/bangle1-lazy-clock-screenshot.png differ
diff --git a/apps/lcars/ChangeLog b/apps/lcars/ChangeLog
new file mode 100644
index 000000000..85bcbad36
--- /dev/null
+++ b/apps/lcars/ChangeLog
@@ -0,0 +1,6 @@
+0.01: Launch app.
+0.02: Swipe left/right to set an alarm.
+0.03: New design with different icons if gps, hrm or compass is on.
+0.04: Inluded LCARS Logo.
+0.05: Additional icons for (1) charging and (2) bat < 30%.
+0.06: Fix - Alarm disabled, if clock was closed
\ No newline at end of file
diff --git a/apps/lcars/README.md b/apps/lcars/README.md
new file mode 100644
index 000000000..3acaacb4d
--- /dev/null
+++ b/apps/lcars/README.md
@@ -0,0 +1,19 @@
+# LCARS clock
+
+A simple LCARS inspired clock.
+Note: To display the steps, its necessary to install
+the [Pedometer widget](https://banglejs.com/apps/#pedometer%20widget).
+
+## Features
+ * Shows the time
+ * Shows the date
+ * Shows the current battery level in %
+ * Shows the number of daily steps
+ * Swipe left/right to activate an alarm
+
+## Icons
+
Icons made by Smashicons, Freepik from www.flaticon.com

+
+
+## Creator
+Made by [David Peer](https://github.com/peerdavid)
\ No newline at end of file
diff --git a/apps/lcars/bg_large.png b/apps/lcars/bg_large.png
new file mode 100644
index 000000000..dd5bda4f3
Binary files /dev/null and b/apps/lcars/bg_large.png differ
diff --git a/apps/lcars/bg_small.png b/apps/lcars/bg_small.png
new file mode 100644
index 000000000..8030c0ddb
Binary files /dev/null and b/apps/lcars/bg_small.png differ
diff --git a/apps/lcars/lcars.app.js b/apps/lcars/lcars.app.js
new file mode 100644
index 000000000..9b7244ece
--- /dev/null
+++ b/apps/lcars/lcars.app.js
@@ -0,0 +1,280 @@
+const filename = "lcars.setting.json";
+const Storage = require("Storage");
+let settings = Storage.readJSON(filename,1) || {
+  alarm: -1,
+};
+
+/*
+ * Requirements and globals
+ */
+const locale = require('locale');
+
+var backgroundImage = {
+  width : 176, height : 151, bpp : 3,
+  transparent : 2,
+  buffer : require("heatshrink").decompress(atob("AAUEufPnnzATkAg4daIIXnz15ATvkwEDDrUAgPHQDyDghyAeQcNzJQ0cuPHATCDBDrUDJQ1AgAA3jjOF+BA4T4KDFyBB5Qf4ABQAaD9QAaD/QesH8CD/n/8Qf8//+AQfsB///GQ6D2h5BJQf6D7/yD8jl/IIIABjiD5n4/DAAWAQe8B//8QYfH//x4CD2HwMDQIf4AoP4Qesf/56BQYYFBuP/Qev//0AQYoKBn/gQecH/lwQwQADBYaDzGoZBHR4OAQehBKj5BBsuWrICDBAIAofYZBFBAZ6qIJJ6DQZBB3IAiDDgZBygJ6EIIn8IOqDKIIscuPHAQdwINkHIJEfIIPnz15AQeAINT+CHwcPAYI1BIIU8+fPAQbOqg56BQYcAgKD4IIv4RgSDCAQSD34AIC//wBYSDyO4P+IIoIB+E/8AFBQeL7B//HHYJKE+P/AoSDygF/QQJBF//4AoSDygEBQYgFBj/xZYaDzgE/PoIAE/wMDQeZBB/jICAAMcuAMDQevgQwR0CvyD3gP/BAxBEQek4A40OQe4ANQegAMQf6D/AAccQf8Ak6DFyCD/QfcDQYueIPMAuaDE+fBIPMOQYoCb8glB7dt2wCW2EAgKDFATkAg2atOmAS5eBhKDigyDZ2zHCjiD/AAMChEgwQCcQb4AiQb5BiQbscuPHATyDfyfPnnzATnwQbsBQD6DghKAeQcJoHiFBggCYQYVhdwQATgOmgVPNAnOECwAGQYIZXgM2dI1wIL2aoCDYibsF4CD/QcGYILGmyaDFwCD/QfaADQf6D/Qf6D/Qf6D/Qf6D/Qf6D/Qf6D4jCD/ADKDnILSD/Qf6DEHO6DJIP6D/Qf6D/QY8cuPHAQdAQfPz588AQeAQf8cuCD/Qf6D/Qf6D/Qf6D/Qf6D/Qf6D/Qf6D/Qf6D/Qf6D/Qf6D/Qf6D/Qf6DqoCD5HO6DJIP6D/Qf6D/QY8cuPHAQdwE7sGzCDZ+fPngCDwBBe7aD/Qf6D/Qf6D/Qf6D/Qf6D/Qf6D/Qf6D/Qf6D/Qf6D/QfcTQYvAQf6DgzVAQbECp6DE5yD5gCDFATqDCsOAIKtB00AhKDEATnwQYVt2wCXQwKDltOmAS6IC2aD82BBCQccaQbGAA=="))
+}
+
+var iconEarth = {
+  text: "EARTH",
+  width : 50, height : 50, bpp : 3,
+  buffer : require("heatshrink").decompress(atob("AFtx48ECBsDwU5k/yhARLjgjBjlzAQMQEZcIkOP/fn31IEZgCBnlz58cEpM4geugEgwU/8+WNZJHDuHHvgmBCQ8goEOnVgJoMnyV58mACItHI4X8uAFBuVHnnz4BuGxk4////Egz3IkmWvPgNw8f/prB//BghTC+AjE7848eMjNnzySBwUJkmf/BuGuPDAQIjBiPHhhTCSQnjMo0ITANJn44Dg8MuFBggCCiFBcAJ0Bv5xEh+ITo2OhHkyf/OIQdBWwVHhgjBNwUE+fP/5EEgePMoYLBhMgyVJk/+BQQdC688I4XxOIc8v//NAvr+QEBj/5NwKVBy1/QYUciPBhk1EAJrC+KeC489QYaMBgU/8BNB9+ChEjz1Jkn/QYMBDQIgCcYTCCiP/nlzJQmenMAgV4//uy/9wRaB/1J8iVCcAfHjt9TYYICnhKCgRKBw159/v//r927OIeeoASBDQccvv3791KYVDBYPLJQeCnPnz//AAP6ocEjEkXgMgJQtz79fLAP8KYkccAcJ8Gf/f/xu/cAMQ4eP5MlyQRCMolx40YsOGBAPfnnzU4KVDpKMBvz8Dh0/8me7IICgkxJQXPIgZTD58sEgcJk+eNoONnFBhk4/5uB/pcDg5KD+4mEv4CBXISVDhEn31/8/+mH7x//JQK5CAAMB4JBCnnxJQf/+fJEgkAa4L+CAQOOjMn/1bXIRxDJQXx58f//Hhlz/88EgsChMgz/Zs/+nfkyV/8huDOI6SD498NwoACi1Z8+S/Plz17/+QCI7jC+ZxBmfPnojIAAMDcYWSp//2wRJEwq2GABECjMgNYwAmA="))
+}
+
+var iconSaturn = {
+  text: "SATURN",
+  width : 50, height : 50, bpp : 3,
+  transparent : 1,
+  buffer : require("heatshrink").decompress(atob("AH4A/AEkQuPHCJ0ChEAwARNjAjBjgjOhs06Q2OEYVx4ARMhEggUMkANIDoIgBoEEgEBNxJEC6ZrBAAMwNxAjDNYcHNxIjB7dtEwIHBwRoKj158+cuPEjlwCRAjC23bpu0wRNDAAsHEYWeEwaSJ6YjCAQUNSRQjEzxQBWZMNEYlsmg2JWAIjCz95SoJuJggjDtuw6dMG5JKCz998wFBJRVNEYW0yaVBJRNhJQN9+4pCzhKJmBKC4YpB/fINxIgCzFxSoQ3J4ENm3CAQPb98wbpEcAQMYWwKYBNxMDXgc2/fv3g2IEAOAgAjBjy5CEhEMfYICBgfPnjdLjj+CgMHiC3JknDhhoINw4jCAB0IJQIANR4QjPAH4A/AFA"))
+}
+
+var iconMoon = {
+  text: "MOON",
+  width : 50, height : 50, bpp : 3,
+  transparent : 1,
+  buffer : require("heatshrink").decompress(atob("AH4AQjlx44CCCZsg8eOkHDwAQKEYgmPhEgEQM48AOIgMHEYoCB4ATI8UAmH/x04JoRuJsImHuBKLn37EwZuIgEQOI8cEpXj/yYBhE8+YNGgkYoJxITBUPnAaC///nC+FjBuIOJZEB8YeCh/8AoYACoMEEAnEjhQDPQJKJ/DCDAoi5DoLdHAoMQgLjFWYPOnngh02IwXzwDjEgPGEYS8BI4MBYoSVG4fP/nghkAgZrDkngJQqSG4gvBg4sBQgkImHihEAWwP8ZBMBEYl5/+cSoVAGQIUFh04weJn///0gj/OEw5KEz45BzhuCTYQAEgePB4IACAoJuBnAQEa4XHjxKB//xFgWHJQsCRgMDEonipwjENwUBDQNx8+evvn/hTDLw3igE+EgZxB8UOXIvEJQUfEYOfv53DEQkgga5BJQvzx84cAj+CDoNh8/eEYJKDuCSEcocnEon+/7xEgFBIIcfB4Mf/IICXI2DgDdBAAn758gCIq5Dv4zBvJuIOIfjEgvP/ARHgwdCB4P3AoTdFAAk4EYk8SQgAFTALaDSQwAGh08//vnDmBABYmEEZYAzA=="))
+}
+
+var iconMars = {
+  text: "MARS",
+  width : 50, height : 50, bpp : 3,
+  transparent : 1,
+  buffer : require("heatshrink").decompress(atob("AH4ATjlwCJ+Dh0wwAQMg0cuPHjFhCZkDps0yVJkmQCBMEjFx42atOmzQmLhMkEYQCCCREQoOGEYmmzB0IEY4CBkARGoJKBEYQCEzgSGkGSpAjDyYCCphuGiFhJQgCD8ASFgRHGAQKbB6BuHJRGeOIsINxEk6dNmARDgMEjQjHAQPnVQojIyZKB6YSDNwK5FAQt54BuDXJIjBEwK5EgxKKXgq5BJRdgXIojJAQJKMcAM0EwM2JUApDoCVFExa7FkGCgAmIkAREEwUEjAmHCIgABhEggQmFpACBCIojBEwRQCzVhwkQU4YADgQmBwQCCI4IFBCAojFAQojGJQQjDAQgRGEZICBEo4gFyUIkilFJQUYEAZrBAQMYNw5KDSQSbCNwwABgOGEwgCBsPACQ5xGwdNnARJcAVh48evvnCJK8Chs+/fv33gCRcB48cuPHCBYA/ADAA=="))
+}
+
+var iconSatellite =  {
+  text: "GPS ON",
+  width : 50, height : 50, bpp : 3,
+  transparent : 2,
+  buffer : require("heatshrink").decompress(atob("pMkyQC/ATGXhIRPyNl0gmPjlwCJ9ly1aCJ1c+fHJR1Hy1ZJR1I+fPnlx6QRLpe+/JKBr5KMuYjBJQMdCJce/fvJQW0CJUlEYQCBSpvvJQbXJjl0NwnzNxGQwEOnHhgF78+WqQyIrFx48cAQXz4ShJgAABh0+8cP//9LJEhg4jDuP3//0LhGQgYlBgeAn///5cIy8MuAmDCIP/9I4HkmCEYMOgHfCQWkCI0cuBuDgF/CIP+CI1Ny1IkeAgHANwIAB/QRFrj7BhkxEwQRC/4RFpbXDgSVBg4RCSorXDI4MJAQMfCIP8cwImDn37fwN58+kwHgLgSVFub7CI4NyBAJKDLgkuEYX78+evKtCLg0jEYRKC58JMoRcFkwjDJQTFDl65EkojEAQMdcwn/+gFC3YjEJQLXEpYRDWwQmEdI6SHAQO0CJUkx4jDF4gCIJQgRMXIjCEARIjCCJ2XEYPKCJqJBJQIROcAUpCJ0kybaDARtdCKAC2kAA="))
+}
+
+var iconAlarm = {
+  text: "TIMER",
+  width : 50, height : 50, bpp : 3,
+  transparent : 1,
+  buffer : require("heatshrink").decompress(atob("kmSpICEp//BAwCJn/+CJ8k//5CKAABCJs8uPH//x48EI5YjCAARNKEYUcv//jgFBExEnEYoAC+QmHIgIgC/gpCuPBCI2fIgU4AQXjA4P8CIuTEYZKBAolwHApXBEAWP//jxwpBAALaFDoYCIiQmDDIP4EAT+CEwnJEwYjLAQLaFEYomDKALmDNwoCIOIZuD8AkFgCYDHAQjMAQTdDNwOAEg0Dx0/cYeREZtxQYOTHgJuHOIvkXJy8DNwIACJQ8Ah4NDAAfxEZARHOIIkHg4jQAQb1CQ4KVJgEOnDIBSoIjNAQPBcAaVJcAKVBcDGOcD7OBMQM48BuH8f//JKCnhKNggRBkmfTQJxBEwhuD/gRCyVHJRlyCIVJXgYmB8ZQBAoIKBXIQmCOIt/NxAUCOIImCIgIpCBAJuDAQZEE/huIAQWTDgImBTYQGC8gRFcYpKFCI8kDwQAFCJBfBEAX/+IjBiQRIEw4jJAQc8v//NYwCIOgJrIJpA1OcwbaFAQWQA="))
+}
+
+var iconCharging =   {
+  text: "CHARGE",
+  width : 50, height : 50, bpp : 3,
+  transparent : 5,
+  buffer : require("heatshrink").decompress(atob("23btugAwUBtoICARG0h048eODQYCJ6P/AAUCCJfbo4SDxYRLtEcuPHjlwgoRJ7RnIloUHoYjDAQfAExEAwUIkACEkSAIEYwCBhZKH6EIJI0CJRFHEY0BJRWBSgf//0AJRYSE4BKLj4SE8BKLv4RD/hK/JS2AXY0gXwRKG4cMmACCJQMAg8csEFJQsBAwfasEAm379u0gFbcBfHzgFBz1xMQZKBjY/D0E2+BOChu26yVEEYdww+cgAFCg+cgIfB6RKF4HbgEIkGChEAthfCJQ0eEAIjBBAMxk6GCJQtgtyVBwRKBAQMbHAJKGXIIFCgACBhl54qVG2E+EAJKBJoWAm0WJQ6SCXgdxFgMLJQvYjeAEAUwFIUitEtJQ14NwUHgEwKYZKGwOwNYX7XgWCg3CJQ5rB4MevPnAoPDJRJrCgEG/ECAoNsJRUwoEesIIBiJKI3CVDti/CJRKVDiJHBSo0YsOGjED8AjBcAcIgdhcAXAPIUAcAYIBcA4dBAQUG8BrBgBuCgOwcBEeXIK2BBAIFBgRqBGoYAChq8CcYUE4FbUYOACQsHzgjDgwFBCIImBAQsDtwYD7cAloRI22B86YBw5QBgoRJ7dAgYEDCJaeBJoMcsARMAQNoJIIRE6A"))
+}
+
+var iconNoBattery = {
+  text: "NO BAT",
+  width : 50, height : 50, bpp : 3,
+  transparent : 1,
+  buffer : require("heatshrink").decompress(atob("kmSpIC/AWMyoQIFsmECJFJhMmA4QXByVICIwODAQ4RRFIQGD5JVLkIGDzJqMyAGDph8MiRKGyApEAoZKFyYIDQwMkSQNkQZABBhIIOOJRuEL5gRIAUKACVQMhmUSNYNDQYJTBBwYFByGTkOE5FJWYNMknCAQKYCiaSCpmGochDoSYBhMwTAZrChILBhmEzKPBF4ImBTAREBDoMmEwJVDoYjBycJFgWEJQRuLJQ1kmQCCjJlCBYbjCagaDBwyDBmBuBF4TjJAUQKINBChCDQxZBcZIIQF4NIgEAgKSDiQmEVQKMBoARBAAMCSQLLBVoxqKL4gaCChVCNwoRKOIo4CJIgABBoSMHpIRFgDdJOIJUBCAUJRgJuEAQb+DIIgRIAX4C/ASOQA"))
+}
+
+// Font to use:
+// 
+Graphics.prototype.setFontAntonioSmall = function(scale) {
+  // Actual height 18 (17 - 0)
+  g.setFontCustom(atob("AAAAAAAAAAAAAAAf4Mf/sYAMAAAAAAfgAfAAAAAfgAeAAAAAAiAAj8H/4fyEAv8f/gfiAAgAAAAD54H98eOPHn8Hz8AhwAAAP8Af+AYGAYCAf+AP8MAB8AHwA+AD4AfAAcf4A/8AwMAwMA/8Af4AAAAAwGD8f/8f8MY/cfz4PD8AHMAAAfAAeAAAAAAAAP/+f//YADAAAQABYADf//P/+AAAAAANAAPAAfwAfgAPAANAAAAAAEAAEAA/AA/AAEAAEAAAAAAZAAfAAYAAAAIAAIAAIAAIAAAAAAAAAMAAMAAAAAAAAEAB8Af4H+AfwAcAAAAAP/4f/8YAMf/8f/8H/wAAAAAAEAAMAAf/8f/8f/8AAAAAAAAAHgcfh8cH8YPMf8MPwEAAAAAAOB4eB8YYMY4Mf/8Pn4AAAAAgAHwA/wPwwf/8f/8AAwAAgAAAf54f58ZwMZwMY/8Qf4AAAAAAP/4f/8YYMYYMff8HP4AAAQAAYAAYD8Y/8f/AfgAcAAAAAAAAPv4f/8YYMY8Mf/8Pn4AAAAAAP94f98YGMcMMf/8H/wAAAAAABgwBgwAAAAAABgABg/Bg8AAAAEAAOAAbAA7gAxgBwwASAAbAAbAAbAAbAASAAAAAxwA5gAbAAPAAOAAAAPAAfHcYPcf8Af4AHgAAAAAAAB/gH/wOA4Y/MZ/sbAsbBkb/MZ/sOBsH/AAAAAAMAP8f/4fwwf4wH/8AH8AAMAAAf/8f/8YYMYYMf/8P/4ADgAAAP/4f/8YAMYAMfj8Pj4AAAAAAf/8f/8YAMYAMf/8P/4B/AAAAf/8f/8YMMYMMYIMAAAAAAf/8f/8YYAYYAYYAAAAAAAP/4f/8YAMYIMfP8Pv8AAAAAAf/8f/8AMAAMAf/8f/8f/8AAAAAAf/8f/8AAAAAAAD4AB8AAMf/8f/4f/gAAAAAAf/8f/8A+AD/gfj4eA8QAEAAAf/8f/8AAMAAMAAMAAAf/8f/8f8AB/wAB8AP8P/Af/8f/8AAAAAAf/8f/8HwAA+AAPwf/8f/8AAAAAAP/4f/8YAMYAMf/8P/4AAAAAAf/8f/8YGAYGAf8AP8ABAAAAAf/w//4wAYwAc//+f/yAAAAAAf/8f/8YMAYMAf/8f/8DA8CAAPj4fz8Y4MeeMfP8HD4YAAYAAf/8f/8YAAQAAAAAf/4f/8AAMAAMf/8f/4AAAYAAf4AP/4AP8AP8f/4fwAQAAYAAf8AP/8AD8D/8f8Af8AD/8AD8f/8f8AAAAQAEeB8P/4B/AP/4fA8QAEYAAfAAP4AB/8H/8fwAcAAAAMYD8Y/8f/MfwMcAMAAAf/+f//YADYADAAAAAAfAAf8AB/wAH8AAMQACYADf//f//AAAAA"), 32, atob("BAUHCAcTCAQFBQgGBAYFBggICAgICAgICAgEBQYGBggNCAgICAcHCAkECAgGCwkICAgIBwYICAwHBwYGBgY="), 18+(scale<<8)+(1<<16));
+}
+
+Graphics.prototype.setFontAntonioLarge = function(scale) {
+  // Actual height 34 (34 - 1)
+  g.setFontCustom(atob("AAAAAAAAAAAAAAAAAAAAAAAADwAAAAAeAAAAADwAAAAAeAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABwAAAAD+AAAAH/wAAAP/+AAAf/+AAA//8AAB//4AAD//wAAD//gAAAf/AAAAD+AAAAAcAAAAAAAAAAAAAAAAAAAAAAAAAB////gA/////AP////8D/////wfAAAA+DwAAADweAAAAeDwAAADwf////+D/////wP////8Af///+AAAAAAAAAAAAAAAAAAAAAAAAAAABwAAAAAOAAAAADwAAAAAeAAAAAHgAAAAB/////wf////+D/////wf////+D/////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP/AAPwH/4AP+B//AH/wf/4D/+D4AB/9weAAf4ODwAP8BweAP/AOD///gBwP//wAOA//4ABwB/4AAOAAAAAAAAAAAAAAAAAAAAB8AA/gA/gAH/AP8AA/8D/gAH/wfAHAA+DwA4ADweAHgAeDwB8ADwf7/+H+D/////gP/9//8A//H/+AA/AH/AAAAAAAAAAAAAAAAAABwAAAAD+AAAAD/wAAAH/+AAAH/5wAAH/wOAAP/gBwAP/gAOAD/////wf////+D/////wf////+AAAABwAAAAAOAAAAABwAAAAAAAAAAAAAAAAAAeAD//4D/Af//Af8D//4D/wf//Af+DwPAADweB4AAeDwPAADweB///+DwP///weA///8DwD//+AAAA/8AAAAAAAAAAAAAAAAAAAAAA////AA/////AP////8D/////wfgPAB+DwB4ADweAOAAeDwBwADwf+PAA+D/x///wP+H//8A/wf//AAAA//gAAAAAAAAAAAAADgAAAAAeAAAAADwAAAAAeAAAD+DwAAP/weAA//+DwA///weB///8Dx//8AAf//wAAD//gAAAf/AAAAD/AAAAAfAAAAAAAAAAAAAAAAAAAAAAAAAD/wf/wB//v//AP////8D/////weAPwAeDwA8ADwcAHAAeDwB8ADwf////+D/////wP/9//8A//H//AA/AD/AAAAAAAAAAAAAAAAAAAAAD//gfAA///D/AP//8f8D///j/weAA8A+DwADgDweAAcAeDwAHgDwf////+B/////gP////8Af///+AAP//4AAAAAAAAAAAAAAAAAAAAAAD4AfAAAfAD4AAD4AfAAAfAD4AAD4AfAAAAAAAAAAAAAA=="), 46, atob("Cg4QEBAQEBAQEBAQCQ=="), 39+(scale<<8)+(1<<16));
+}
+
+/*
+ * Draw watch face
+ */
+var drawTimeout;
+function queueDraw() {
+  if (drawTimeout) clearTimeout(drawTimeout);
+  drawTimeout = setTimeout(function() {
+    drawTimeout = undefined;
+    draw();
+  }, 60000 - (Date.now() % 60000));
+}
+
+
+function draw(){
+
+  // First handle alarm to show this correctly afterwards
+  handleAlarm();
+
+  // Next draw the watch face
+  g.reset();
+  g.clearRect(0, 24, g.getWidth(), g.getHeight());
+
+  // Draw background image
+  g.drawImage(backgroundImage, 0, 24);
+
+  // Draw symbol
+  var bat = E.getBattery();
+  var timeInMinutes = getCurrentTimeInMinutes();
+
+  var iconImg =
+      isAlarmEnabled() ? iconAlarm :
+      Bangle.isCharging() ? iconCharging :
+      bat < 30 ? iconNoBattery :
+      Bangle.isGPSOn() ? iconSatellite :
+      timeInMinutes % 4 == 0 ? iconSaturn :
+      timeInMinutes % 4 == 1 ? iconMars :
+      timeInMinutes % 4 == 2 ? iconMoon :
+      iconEarth;
+  g.drawImage(iconImg, 115, 115);
+
+  // Alarm within symbol
+  g.setFontAlign(0,0,0);
+  g.setFontAntonioSmall();
+  g.drawString(iconImg.text, 115+25, 102);
+  if(isAlarmEnabled() > 0){
+    g.drawString(getAlarmMinutes(), 115+25, 115+25);
+  }
+
+  // Write time
+  var currentDate = new Date();
+  var timeStr = locale.time(currentDate,1);
+  g.setFontAlign(0,0,0);
+  g.setFontAntonioLarge();
+  g.drawString(timeStr, 60, 55);
+
+  // Write date
+  g.setFontAlign(-1,-1, 0);
+  g.setFontAntonioSmall();
+
+  var dayName = locale.dow(currentDate, true).toUpperCase();
+  var day = currentDate.getDate();
+  g.drawString(day, 100, 35);
+  g.drawString(dayName, 100, 55);
+
+  // Draw battery
+  g.drawString("BAT:", 25, 98);
+  g.drawString(bat+ "%", 62, 98);
+
+  // Draw steps
+  var steps = getSteps();
+  g.drawString("STEP:", 25, 121);
+  g.drawString(steps, 62, 121);
+
+  // Temperature
+  g.setFontAlign(-1,-1,0);
+  g.drawString("TEMP:", 25, 144);
+  g.drawString(Math.floor(E.getTemperature()) + "C", 62, 144);
+
+  // Queue draw in one minute
+  queueDraw();
+}
+
+/*
+ * Step counter via widget
+ */
+function getSteps() {
+  if (stepsWidget() !== undefined)
+    return stepsWidget().getSteps();
+  return "???";
+}
+
+function stepsWidget() {
+  if (WIDGETS.activepedom !== undefined) {
+    return WIDGETS.activepedom;
+  } else if (WIDGETS.wpedom !== undefined) {
+    return WIDGETS.wpedom;
+  }
+  return undefined;
+}
+
+
+/*
+ * Handle alarm
+ */
+function getCurrentTimeInMinutes(){
+  return Math.floor(Date.now() / (1000*60));
+}
+
+function isAlarmEnabled(){
+ return settings.alarm > 0;
+}
+
+function getAlarmMinutes(){
+  var currentTime = getCurrentTimeInMinutes();
+  return settings.alarm - currentTime;
+}
+
+function handleAlarm(){
+  if(!isAlarmEnabled()){
+    return;
+  }
+
+  if(getAlarmMinutes() > 0){
+    return;
+  }
+
+  // Alarm
+  var t = 300;
+  Bangle.buzz(t, 1)
+  .then(() => new Promise(resolve => setTimeout(resolve, t)))
+  .then(() => Bangle.buzz(t, 1))
+  .then(() => new Promise(resolve => setTimeout(resolve, t)))
+  .then(() => Bangle.buzz(t, 1))
+  .then(() => new Promise(resolve => setTimeout(resolve, t)))
+  .then(() => Bangle.buzz(t, 1));
+
+  // Update alarm state to disabled
+  settings.alarm = -1;
+  Storage.writeJSON(filename, settings);
+}
+
+
+/*
+ * Swipe to set an alarm
+ */
+Bangle.on('swipe',function(dir) {
+  // Increase alarm
+  if(dir == -1){
+    if(isAlarmEnabled()){
+      settings.alarm += 5;
+    } else {
+      settings.alarm = getCurrentTimeInMinutes() + 5;
+    }
+  }
+
+  // Decrease alarm
+  if(dir == +1){
+    if(isAlarmEnabled() && (settings.alarm-5 > getCurrentTimeInMinutes())){
+      settings.alarm -= 5;
+    } else {
+      settings.alarm = -1;
+    }
+  }
+
+  // Update UI
+  draw();
+
+  // Update alarm state
+  Storage.writeJSON(filename, settings);
+});
+
+
+/*
+ * Stop updates when LCD is off, restart when on
+ */
+Bangle.on('lcdPower',on=>{
+  if (on) {
+    draw(); // draw immediately, queue redraw
+  } else { // stop draw timer
+    if (drawTimeout) clearTimeout(drawTimeout);
+    drawTimeout = undefined;
+  }
+});
+
+// Show launcher when middle button pressed
+Bangle.setUI("clock");
+
+// Load widgets - needed by draw
+Bangle.loadWidgets();
+
+// Clear the screen once, at startup and draw clock
+g.setTheme({bg:"#000",fg:"#fff",dark:true}).clear();
+draw();
+
+// After drawing the watch face, we can draw the widgets
+Bangle.drawWidgets();
\ No newline at end of file
diff --git a/apps/lcars/lcars.icon.js b/apps/lcars/lcars.icon.js
new file mode 100644
index 000000000..c404728e0
--- /dev/null
+++ b/apps/lcars/lcars.icon.js
@@ -0,0 +1 @@
+require("heatshrink").decompress(atob("mEwgeevPnAQsc+fPngCE+/fvoCEvAbIA4/AgFzEZwRBjwjNvBUBEZ3eCIMOEZtwCIMBEZuARYU5EZecTocHEZf0CIcBEbvgaggjKTwIAEbQpoHAAiSEeoYQHJQr1CCBJKEIgcBI4xKFaIdt3AOFgfuAYMeEYLRBj1pLQ4ICuYjBAgPbtoRHhu3AYN5VoMGzVpI49502AgPPVoM27dsK48N23cgE5CgOmzVoCI4LBzCSB8EP2wjJgILBAYMAhIjBsAjJzVwg47C7YRJEYhfBEZXmEZ53CI4q2BEAiVCkwjCNYaMGboQjDkBfDCAbdB04EBgyPDC4YAD/dt2wRCHIM5njXCCAcHboOmCIQ0B5/nfYT6DFIIjBeAcOvM8+EAjitFEYJEBAANzEYOeeowjCFgUDzwjB+YrDgAgBEYWcA4Mc+YjCvAQCgftEANuDIYOBEYXPNwIAIg4OCCgXkCBEOEZDvBEAhEB4AjF/inB8+OJQOOvILBoAjGU4IFDAQYjGbQIdCAQt4EY0DEZACDEYceEZACDC4bLBEZwCO"))
diff --git a/apps/lcars/lcars.png b/apps/lcars/lcars.png
new file mode 100644
index 000000000..167352ef4
Binary files /dev/null and b/apps/lcars/lcars.png differ
diff --git a/apps/lcars/screenshot.png b/apps/lcars/screenshot.png
new file mode 100644
index 000000000..70db639eb
Binary files /dev/null and b/apps/lcars/screenshot.png differ
diff --git a/apps/life/bangle1-game-of-life-screenshot.png b/apps/life/bangle1-game-of-life-screenshot.png
new file mode 100644
index 000000000..f6e8c78a1
Binary files /dev/null and b/apps/life/bangle1-game-of-life-screenshot.png differ
diff --git a/apps/locale/ChangeLog b/apps/locale/ChangeLog
index 3d64cf8d7..288dc6dde 100644
--- a/apps/locale/ChangeLog
+++ b/apps/locale/ChangeLog
@@ -9,3 +9,4 @@
 0.07: Improve handling of non-ASCII characters (fix #469)
 0.08: Added Mavigation units and en_NAV
 0.09: Added New Zealand en_NZ
+0.10: Apply 12hour setting to time
diff --git a/apps/locale/locale.html b/apps/locale/locale.html
index 3d806b44b..90a2e8d40 100644
--- a/apps/locale/locale.html
+++ b/apps/locale/locale.html
@@ -146,7 +146,7 @@ exports = { name : "en_GB", currencySym:"£",
           "%-m": "d.getMonth()+1",
           "%d":  "('0'+d.getDate()).slice(-2)",
           "%-d": "d.getDate()",
-          "%HH": "('0'+d.getHours()).slice(-2)",
+          "%HH": "('0'+getHours(d)).slice(-2)",
           "%MM": "('0'+d.getMinutes()).slice(-2)",
           "%SS": "('0'+d.getSeconds()).slice(-2)",
           "%A":  "day.split(',')[d.getDay()]",
@@ -178,6 +178,13 @@ var month = ${js(locale.month + ',' + locale.abmonth)};
 function round(n) {
   return n < 10 ? Math.round(n * 10) / 10 : Math.round(n);
 }
+var is12;
+function getHours(d) {
+  var h = d.getHours();
+  if (is12===undefined) is12 = (require('Storage').readJSON('setting.json',1)||{})["12hour"];
+  if (!is12) return h;
+  return (h%12==0) ? 12 : h%12;
+}
 exports = {
   name: ${js(locale.lang)},
   currencySym: ${js(locale.currency_symbol)},
diff --git a/apps/locale/locales.js b/apps/locale/locales.js
index 34f259498..9e2624b77 100644
--- a/apps/locale/locales.js
+++ b/apps/locale/locales.js
@@ -496,6 +496,24 @@ var locales = {
     day: "Vasárnap,Hétfő,Kedd,Szerda,Csütörtök,Péntek,Szombat",
     trans: { yes: "igen", Yes: "Igen", no: "nem", No: "Nem", ok: "ok", on: "be", off: "ki" }
   },
+  "oc_FR": {
+    lang: "oc_FR",
+    decimal_point: ",",
+    thousands_sep: " ",
+    currency_symbol: "€",
+    int_curr_symbol: "EUR",
+    speed: "km/h",
+    distance: { 0: "m", 1: "km" },
+    temperature: "°C",
+    ampm: { 0: "", 1: "" },
+    timePattern: { 0: "%HH:%MM:%SS ", 1: "%HH:%MM" },
+    datePattern: { 0: "%A %d %B de %Y", "1": "%d/%m/%Y" }, // dimenge 1 de març de 2020 //  01/03/2020
+    abmonth: "gen.,febr.,març,abril,mai,junh,julh,ago.,set.,oct.,nov.,dec.",
+    month: "genièr,febrièr,març,abril,mai,junh,julhet,agost,setembre,octòbre,novembre,decembre",
+    abday: "dg,dl,dm,dc,dj,dv,ds",
+    day: "dimenge,diluns,dimars,dimècres,dijòus,divendres,dissabte",
+    trans: { yes: "òc", Yes: "Òc", no: "non", No: "Non", ok: "ok", on: "on", off: "off" }
+  },  
   "pt_BR": {
     lang: "pt_BR",
     decimal_point: ",",
diff --git a/apps/magnav/ChangeLog b/apps/magnav/ChangeLog
index 35e8798c6..2b2782c7b 100644
--- a/apps/magnav/ChangeLog
+++ b/apps/magnav/ChangeLog
@@ -2,5 +2,6 @@
 0.02: Course marker
 0.03: Tilt compensation and calibration
 0.04: Fix Font size
+0.05: Inital portable version 
 
 
diff --git a/apps/magnav/README.md b/apps/magnav/README.md
index a036644fb..7ef506b2e 100644
--- a/apps/magnav/README.md
+++ b/apps/magnav/README.md
@@ -6,19 +6,20 @@ This is a tilt and roll compensated compass with a linear display. The compass w
 
 ## Calibration
 
-Correct operation of this app depends critically on calibration. When first run on a Bangle, the app will request calibration. This lasts for 30 seconds during which you should move the watch slowly through figures of 8. It is important that during calibration the watch is  fully rotated around each of it axes. If the app does give the correct direction heading or is not stable with respect to tilt and roll - redo the calibration by pressing *BTN3*. Calibration data is recorded in a storage file named `magnav.json`. 
+Correct operation of this app depends critically on calibration. When first run on a Bangle, the app will request calibration. This lasts for 20 seconds during which you should move the watch slowly through figures of 8. It is important that during calibration the watch is  fully rotated around each of it axes. If the app does give the correct direction heading or is not stable with respect to tilt and roll - redo the calibration by pressing *BTN2*. Calibration data is recorded in a storage file named `magnav.json`. 
+
+Note: Charging your Bangle due to the magnetic connector clamp seems to require recalibration afterwards for accurate readings.
 
 ## Controls
 
-*BTN1* - switches to your selected clock app.
+*BTN1* - marks the current heading with a blue circle - see screen shot. This can be used to take a bearing and then follow it..
+(Swipe UP on Bangle 2)
 
-*BTN2* - switches to the app launcher.
+*BTN2* - invokes calibration ( can be cancelled if pressed accidentally).
+(*BTN1* on Bangle 2)
 
-*BTN3* - invokes calibration ( can be cancelled if pressed accidentally)
-
-*Touch Left* - marks the current heading with a blue circle - see screen shot. This can be used to take a bearing and then follow it.
-
-*Touch Right* - cancels the marker (blue circle not displayed).
+*BTN3* - cancels the marker (blue circle not displayed)
+(swipe DOWN on Bangle 2)
 
 
 ## Support
diff --git a/apps/magnav/magnav.min.js b/apps/magnav/magnav.min.js
deleted file mode 100644
index 1d5439164..000000000
--- a/apps/magnav/magnav.min.js
+++ /dev/null
@@ -1,10 +0,0 @@
-var Yoff=80,pal2color=new Uint16Array([0,65535,2047,50712],0,2),buf=Graphics.createArrayBuffer(240,60,2,{msb:!0});Bangle.setLCDTimeout(30);function flip(b,c){g.drawImage({width:240,height:60,bpp:2,buffer:b.buffer,palette:pal2color},0,c);b.clear()}var labels="N NE E SE S SW W NW".split(" "),brg=null;
-function drawCompass(b){buf.setColor(1);buf.setFont("Vector",24);var c=b-90;0>c&&(c+=360);buf.fillRect(28,45,212,49);var a=30,d=15-c%15;15>d?a+=d:d=0;for(var e=d;e<=180-d;e+=15){var f=c+e;0==f%90?(buf.drawString(labels[Math.floor(f/45)%8],a-8,0),buf.fillRect(a-2,25,a+2,45)):0==f%45?(buf.drawString(labels[Math.floor(f/45)%8],a-12,0),buf.fillRect(a-2,30,a+2,45)):0==f%15&&buf.fillRect(a,35,a+1,45);a+=15}brg&&(b=brg-b,180b&&(b+=360),b+=120,30>b&&(b=14),210c?1:-1;180<=a&&(a=360-a,d=-d);if(2>a)return c;a=c+d*(1+Math.round(a/5));0>a&&(a+=360);360a&&(a+=360);return a}
-function reading(){var b=tiltfixread(CALIBDATA.offset,CALIBDATA.scale);heading=newHeading(b,heading);drawCompass(heading);buf.setColor(1);buf.setFont("6x8",2);buf.setFontAlign(-1,-1);buf.drawString("o",170,0);buf.setFont("Vector",54);b=Math.round(heading);var c=b.toString();buf.drawString(10>b?"00"+c:100>b?"0"+c:c,70,10);flip(buf,Yoff+80)}
-function calibrate(){var b=-32E3,c=-32E3,a=-32E3,d=32E3,e=32E3,f=32E3,k=setInterval(function(){var h=Bangle.getCompass();b=h.x>b?h.x:b;c=h.y>c?h.y:c;a=h.z>a?h.z:a;d=h.x{
+            CALIBDATA=r;
             require("Storage").write("magnav.json",r);
-            CALIBDATA = r;
-            startdraw();
-            setButtons();
+            restart()
           });
         } else {
-          startdraw();
-          setTimeout(setButtons,1000);
-        }
+          restart()
+        } 
     }   
     if (first===undefined) first=false;
     stopdraw();
-    clearWatch();
     if (first) 
         E.showAlert(msg,title).then(action.bind(null,true));
     else 
         E.showPrompt(msg,{title:title,buttons:{"Start":true,"Cancel":false}}).then(action);
 }
 
-Bangle.on('touch', function(b) { 
-    if(!candraw) return;
-    if(b==1) brg=heading;
-    if(b==2) brg=null;
- });
-
 var intervalRef;
 
 function startdraw(){
@@ -176,29 +174,17 @@ function stopdraw() {
 }
 
 function setButtons(){
-  setWatch(()=>{load();}, BTN1, {repeat:false,edge:"falling"});
-  setWatch(Bangle.showLauncher, BTN2, {repeat:false,edge:"falling"});
-  setWatch(docalibrate, BTN3, {repeat:false,edge:"falling"});
+  function actions(v){
+    if (!v) docalibrate(false);
+    else if (v==1) brg=null;
+    else brg=heading;
+  }
+  Bangle.setUI("updown",actions);
 }
 
-var SCREENACCESS = {
-      withApp:true,
-      request:function(){
-        this.withApp=false;
-        stopdraw();
-        clearWatch();
-      },
-      release:function(){
-        this.withApp=true;
-        startdraw(); 
-        setButtons();
-      }
-};
- 
 Bangle.on('lcdPower',function(on) {
-  if (!SCREENACCESS.withApp) return;
   if (on) {
-    startdraw();
+    if (!calibrating) startdraw();
   } else {
     stopdraw();
   }
@@ -209,7 +195,7 @@ Bangle.on('kill',()=>{Bangle.setCompassPower(0);});
 Bangle.loadWidgets();
 Bangle.setCompassPower(1);
 if (!CALIBDATA) 
-  docalibrate({},true);
+  docalibrate(true);
 else {  
   startdraw();
   setButtons();
@@ -217,4 +203,3 @@ else {
 
 
 
-
diff --git a/apps/magnav/magnav_b2.js b/apps/magnav/magnav_b2.js
new file mode 100644
index 000000000..e54280796
--- /dev/null
+++ b/apps/magnav/magnav_b2.js
@@ -0,0 +1,192 @@
+
+const Ypos = 40;
+
+const labels = ["N","NE","E","SE","S","SW","W","NW"];
+var brg=null;
+
+function drawCompass(course) {
+  "ram"
+  g.setColor(g.theme.fg);
+  g.setFont("Vector",18);
+  var start = course-90;
+  if (start<0) start+=360;
+  g.fillRect(16,Ypos+45,160,Ypos+49);
+  var xpos = 16;
+  var frag = 15 - start%15;
+  if (frag<15) xpos+=Math.floor((frag*4)/5); else frag = 0;
+  for (var i=frag;i<=180-frag;i+=15){
+    var res = start + i;
+    if (res%90==0) {
+      g.drawString(labels[Math.floor(res/45)%8],xpos-6,Ypos+6);
+      g.fillRect(xpos-2,Ypos+25,xpos+2,Ypos+45);
+    } else if (res%45==0) {
+      g.drawString(labels[Math.floor(res/45)%8],xpos-9,Ypos+6);
+      g.fillRect(xpos-2,Ypos+30,xpos+2,Ypos+45);
+    } else if (res%15==0) {
+      g.fillRect(xpos,Ypos+35,xpos+1,Ypos+45);
+    }
+    xpos+=12;
+  }
+  if (brg) {
+    var bpos = brg - course;
+    if (bpos>180) bpos -=360;
+    if (bpos<-180) bpos +=360;
+    bpos= Math.floor((bpos*4)/5)+88;
+    if (bpos<16) bpos = 8;
+    if (bpos>160) bpos = 170;
+    g.setColor(g.theme.fg2);
+    g.fillCircle(bpos,Ypos+45,6);
+    }
+}
+
+var heading = 0;
+function newHeading(m,h){ 
+    var s = Math.abs(m - h);
+    var delta = (m>h)?1:-1;
+    if (s>=180){s=360-s; delta = -delta;} 
+    if (s<2) return h;
+    var hd = h + delta*(1 + Math.round(s/5));
+    if (hd<0) hd+=360;
+    if (hd>360)hd-= 360;
+    return hd;
+}
+
+var candraw = false;
+var CALIBDATA = require("Storage").readJSON("magnav.json",1)||null;
+
+function tiltfixread(O,S){
+  "ram"
+  var m = Bangle.getCompass();
+  var g = Bangle.getAccel();
+  m.dx =(m.x-O.x)*S.x; m.dy=(m.y-O.y)*S.y; m.dz=(m.z-O.z)*S.z;
+  var d = Math.atan2(-m.dx,m.dy)*180/Math.PI;
+  if (d<0) d+=360;
+  var phi = Math.atan(-g.x/-g.z);
+  var cosphi = Math.cos(phi), sinphi = Math.sin(phi);
+  var theta = Math.atan(-g.y/(-g.x*sinphi-g.z*cosphi));
+  var costheta = Math.cos(theta), sintheta = Math.sin(theta);
+  var xh = m.dy*costheta + m.dx*sinphi*sintheta + m.dz*cosphi*sintheta;
+  var yh = m.dz*sinphi - m.dx*cosphi;
+  var psi = Math.atan2(yh,xh)*180/Math.PI;
+  if (psi<0) psi+=360;
+  return psi;
+}
+
+// Note actual mag is 360-m, error in firmware
+function reading() {
+  "ram"
+  g.clearRect(0,24,175,175);
+  var d = tiltfixread(CALIBDATA.offset,CALIBDATA.scale);
+  heading = newHeading(d,heading);
+  drawCompass(heading);
+  g.setColor(g.theme.fg);
+  g.setFont("6x8",2);
+  g.setFontAlign(-1,-1);
+  g.drawString("o",120,Ypos+80);
+  g.setFont("Vector",40);
+  var course = Math.round(heading);
+  var cs = course.toString();
+  cs = course<10?"00"+cs : course<100 ?"0"+cs : cs;
+  g.drawString(cs,50,Ypos+90);
+  g.setColor(g.theme.fg2);
+  g.fillPoly([88,Ypos+60,78,Ypos+80,98,Ypos+80]);
+  g.setColor(g.theme.fg);
+  g.flip();
+}
+
+function calibrate(){
+  var max={x:-32000, y:-32000, z:-32000},
+      min={x:32000, y:32000, z:32000};
+  var ref = setInterval(()=>{
+      var m = Bangle.getCompass();
+      max.x = m.x>max.x?m.x:max.x;
+      max.y = m.y>max.y?m.y:max.y;
+      max.z = m.z>max.z?m.z:max.z;
+      min.x = m.x {
+     setTimeout(()=>{
+       if(ref) clearInterval(ref);
+       var offset = {x:(max.x+min.x)/2,y:(max.y+min.y)/2,z:(max.z+min.z)/2};
+       var delta  = {x:(max.x-min.x)/2,y:(max.y-min.y)/2,z:(max.z-min.z)/2};
+       var avg = (delta.x+delta.y+delta.z)/3;
+       var scale = {x:avg/delta.x, y:avg/delta.y, z:avg/delta.z};
+       resolve({offset:offset,scale:scale});
+     },20000);
+  });
+}
+
+var calibrating=false;
+function docalibrate(first){
+    calibrating=true;
+    const title = "Calibrate";
+    const msg = "takes 20 seconds";
+    function restart() {
+        calibrating=false;
+        setButtons();
+        startdraw();
+    }
+    function action(b){
+        if (b) {
+          g.clearRect(0,24,175,175);
+          g.setColor(g.theme.fg);
+          g.setFont("Vector",18);
+          g.setFontAlign(0,-1);
+          g.drawString("Fig 8s to",88,Ypos);
+          g.drawString("Calibrate",88,Ypos+18);
+          g.flip();
+          calibrate().then((r)=>{
+            CALIBDATA=r;
+            require("Storage").write("magnav.json",r);
+            restart();
+          });
+        } else {
+          restart();
+        }
+    }   
+    if (first===undefined) first=false;
+    stopdraw();
+    if (first) 
+        E.showAlert(msg,title).then(action.bind(null,true));
+    else 
+        E.showPrompt(msg,{title:title,buttons:{"Start":true,"Cancel":false}}).then(action);
+}
+
+var intervalRef;
+
+function startdraw(){
+  g.clear(1);
+  Bangle.drawWidgets();
+  candraw = true;
+  intervalRef = setInterval(reading,200);
+}
+
+function stopdraw() {
+  candraw=false;
+  if(intervalRef) {clearInterval(intervalRef);}
+}
+
+function setButtons(){
+  function actions(v){
+    if (!v) docalibrate(false);
+    else if (v==1) brg=null;
+    else brg=heading;
+  }
+  Bangle.setUI("updown",actions);
+}
+
+Bangle.on('kill',()=>{Bangle.setCompassPower(0);});
+
+Bangle.loadWidgets();
+Bangle.setCompassPower(1);
+if (!CALIBDATA) 
+  docalibrate(true);
+else {  
+  startdraw();
+  setButtons();
+}
+
+
+
diff --git a/apps/magnav/screenshot-b2.png b/apps/magnav/screenshot-b2.png
new file mode 100644
index 000000000..63f830bfc
Binary files /dev/null and b/apps/magnav/screenshot-b2.png differ
diff --git a/apps/magnav/screenshot-light-b2.png b/apps/magnav/screenshot-light-b2.png
new file mode 100644
index 000000000..943dc392c
Binary files /dev/null and b/apps/magnav/screenshot-light-b2.png differ
diff --git a/apps/mandlebrotclock/ChangeLog b/apps/mandlebrotclock/ChangeLog
new file mode 100644
index 000000000..d7bda0d78
--- /dev/null
+++ b/apps/mandlebrotclock/ChangeLog
@@ -0,0 +1,2 @@
+0.01: Initial Release
+ 
\ No newline at end of file
diff --git a/apps/mandlebrotclock/README.md b/apps/mandlebrotclock/README.md
new file mode 100644
index 000000000..8628a61d0
--- /dev/null
+++ b/apps/mandlebrotclock/README.md
@@ -0,0 +1,9 @@
+# Mandlebrot Clock
+
+A simple clock themed on the mandlebrot set.
+
+Written by [James Milner](https://www.github.com/jameslmilner)
+
+![](app.png)
+
+ 
\ No newline at end of file
diff --git a/apps/mandlebrotclock/app.png b/apps/mandlebrotclock/app.png
new file mode 100644
index 000000000..95ab99a91
Binary files /dev/null and b/apps/mandlebrotclock/app.png differ
diff --git a/apps/mandlebrotclock/mandlebrotclock-icon.js b/apps/mandlebrotclock/mandlebrotclock-icon.js
new file mode 100644
index 000000000..a2898e734
--- /dev/null
+++ b/apps/mandlebrotclock/mandlebrotclock-icon.js
@@ -0,0 +1 @@
+require("heatshrink").decompress(atob("mEwxH+vdvwMzq8CrGCwVewNRluCxAHBAAOsxAAB1gAD1oBB2fWAAPO1mBGZIvCrECq4bBglYmglBGgIxBFQItDFQQsC2es6/XF4OrwOsqwvIt4vBxFdgder0uwUoLQRXE1oqB1nQ1nW2RbCA4PW6HP52rF5d7KoKNBmcDIYIzBrBaB1vPFAOz2RVB1ml54qB1fQFwQvB5+kwSQJWIQoExAFBRYaBB0pVCQYRiB0wDC1erFoPO5ul02sF5QnBAAYFBwbkF0ul1eIAQOqOwLlBIwL7BGIOkAANvxErF49dF4dYGoJfBLoIwD6AfBEgJbBwIEBqwGBqw4BU4Osvd1uteSBDiEFIKLDdQey6ytBEQNWAQOBwMyKYcrAAILBWIRgIEofQ1mJAoS6B2ez665B5+rLQMrq1WWBAACHwJNBCA5WCbgPQ1pYBFYOl6CMB6vP0prB1l6kguLAAWBJgKPHRIOz03Q6+z2QsBVgOrdgOlvaKBLhhiG6AUGJoJOB6GmMgPPcQLHCdAgtRSYgHFrDKBXYWBLQOk0qlBcgNWBYJdSAAcCC4qOBAILzE62l0mCIYVWvQuVAAMsAokzR4WJ1us2fW6K/BMwMrgErAQIAcq+sGAOtF4Os1vXF4I5B1mlFzSQELwU0xGtAIOzF4LCBBgOrLbYwDwUuwVeYIiRB6ukwLBDF7QwCwVYKgJgBGAOt6PW54vB1i7cq2rVoNYFQJfCMAXW62rM4QWDGoPXMwNWAgIMDAw2B67XDlezwUAgYsCwWJLwK9B1YnBwLSEAwIeCBgXXBoQGDHgMr64vEDIOIwNXSAJfBF4RgB1elfQK+GqweCGIIvBCgJUCF4QHBF4rqBRIS/BxKOC1qPB54wBF4pSDE4IjCcAQ6BGYIPCNYYYCl1SKYI0BMwIvBDoIvBPgR1EDgdWKAINDFwIECFoIABbItRulYMYhfCF4Y8BCoYbBAANWEYJfCZALuCIgi/GveeRoIuBXgOt1uy6HV5+kF4olBAAIeBGIIDCAAILCRQYMCNgWs0uqEQOs2fQ6+y63R0vJ1d7q+IUwgAXNoOl5xeBGAOrdYPW6A5BHQWteAovXwWq569BVoWl0ur0g8BVAMrq2lU4gAVq2m1gvC1gwBSAOrLgSiECgIvZq+CKwPWL4IvBXoPQ0uBXQxiBLzCHCW4ItBxGt2fXMAN71iJGYK8r1jqBF4PXL4QvB62r1a+BF4yXBFytWxGB0us6/XdoWzF4TKBwKPGH4IwULgIoB55eB2YGCXoPQ5xeBq+BvUkOolXGAMBXaOCruCwXQ2es1ovC0vP0ulKoOmwWsSgI2BwV70rKBHQIuORgWkwWl2QvBAAXX1YJBwOrAQOAvYxBHoN65HOBQIIBqyeGFgZEBwJ2BKgIqC1ogC2XW0osB1fQ62k5+qMgJoBC4PQfgLYBEYIABNoNWljjCHgNeBgWr63W2QvBxOJBIWr54uCYgL0BLAIsCBIIKB1T+BVwN8WAJcBNQIABIgQGB1fX2RdBXoOJFQWzSIOz1uzAoIwBFgXX2ZHBOIRDCWAOBRgQtC53P1OB0wlBMgQuBdwQAF1oxBEwI7B1p0CBgIIBAAPP0mBcgNWBYOkBYbfB6wtCxCaFGYQKBAoQvBOQIACHoey2ey6D2D0uC0yIBLIILB0pJBEIU6wU0FQbEBF4hnFA4ZlBNoRhCGAJYBHYSKD1eyEYJfBrxfCAwNeAILVBwZZExIABGATNCGARvBCoIMBFwJzDAIderFYwWJsgyBCoI1BAYIABF4QeBL4IvDOIIvDL4PPBYIuCKQQRBEAWsrE0AocQAQJpBGgRNCIQIECCQQzD6Gr0qMBbwYADJ4ZUBl1YBAVelwpBNIQDBFIImCl2CagIVBAATkC5/WFwhLFFoMtwM0E4MtltevggBgcDwITCrEzxEulz5CDgNkMIer6GyLogsCwWmI4MzrFXGAMEA=="))
\ No newline at end of file
diff --git a/apps/mandlebrotclock/mandlebrotclock.js b/apps/mandlebrotclock/mandlebrotclock.js
new file mode 100644
index 000000000..16cc8dfb8
--- /dev/null
+++ b/apps/mandlebrotclock/mandlebrotclock.js
@@ -0,0 +1,34 @@
+// MIT License - James Milner 2021
+
+const mandlebrotBmp = {
+  width: 176,
+  height: 176,
+  bpp: 8,
+  transparent: 254,
+  buffer: require("heatshrink").decompress(
+    atob(
+      "mdXkoAFmctgMBmcsq4EBAAkslsIgWCmcJrGCq8zrwCBrsICwwABhEsrwADrACBq8JgcDhMtDwIABhUKmlexGIsmIAgIKBxGsrwMCnQACBIIBBAQIGB1eIr4IBxIAC1mr1mt2et1mz2es63Q6/W63X6ACB0nO5vH0V5q+BxGCwN6q0rV8kyVwsySoKlCWAKWGq4OBlqLBmdYrtXgQFBroBBC40CEQOCQYKqCAAKVBZ4MthNe1mCNYM0hVeRQIGCmicBAYKuBV4VeVwKdCxFlsoJBBgSvFXAOkV4OPVwQAB1er6+yVgK1B1Wq52q0ejztWwOA1dWRQKvklksV4ssltXVQwAEXIKwCAIMCAAkIDYNemSxDBgdXP4NYVoaqBRIOCTgOIBwIFBiFYAwSnCnQSBmkQiE0YQLFBXQKuCCoOJ1gmBr4VB1gMBWAIEBWwSvD1mj54EB560B63W5/O53N0ecV4N6vUsVkYACq6vFlddmczV5pnBAQOCV4qxCq9YYAMIgMtboLDBli8BlqsBmizBV4qnCWASrBVwVkxClBB4VeToQHCU4KmBT4IIBsgHB1eyVYgAC1oHBWAeyAYOr1StB6qvBVwOjvNXvddq9WqxbBV8auFAAItBltXVhFXTgJvCrFYlqvHAAISBB4MswLVBrAKBruImavChSWBr06CYOCTwIABxE0WAM0rAyCCAKjBYoWIsqnCXwKjDB4OrBQKkDWQKvDW4XPWIavC5/P62q0avB5uivWBvVXwGlwOrqyvjq6vHmczrqvHgKVBMoKNBWgMIVIaoCmYGCroFBYgOIT4ILBq9elqvBRwKhBVIQFBAYU6BgYIBAoM6nWCVwKpCAQKnCBIKvCI4KnBAoSiB2WzVQWt1qlB6HW6wIBCgQGB0nX6CvB52j0d5wIABq4+BwKvkVw+BTwMzlkCliuEXYNeNoVeq6mDgUtr0JloIDBoLFBUAYnBhMDgcJwQICwSYDFIIFDAgSfDCYLmBxFkBwNkTYSeDUYgEBV4OtWAIAB2Wr6C1C6/X63X1nP0nO1YGBBIPV5/P0eizlzp5/Bq5FBwErV9IwBUgKvBUQKwFmY9Cr1YX4SnEgQZBBAqvCmctls0EoIeBAgKlCTAQEDWQSqCWYQKCAQeJBQIAC2QDCVQWJ1qjCAoILDZYPWAwOr6/QVASmBAoIDBVYOq53N0YABzl5p9WHoOBvSvtWAMt1mCV4q7CVoKlFmadBAwYJEr2CmcJhIlBBASVBT4WlQAIAEBgNkUQK0CsqwDBYIIB1mtSwOA56cBWQIhD2ezXQWr62yAAOz64MC2fPVwPW0YPBVoPW52p6nNAYPN0WczqvBwOrq0rV9adBlqRDmdXWIkIBwK/BAwKlCXQNdDAIADq9dTASuCEYMJmiWCV4WkSYKPBSISlB1ivCslfA4OJBYQMBAAXW0lWvWk1fQ2SzBWIaZBVYPWAYOz1ioBAgXP1QLBAQuk0fV0ej46uBAIKvCvVWgCvpTgKoBVYSlBRwIFBWAYACUQICClmBTIKvFrB6BV4demkKV4OsVwSXBwF5vSUBqyQDV4LLCWoQGBXoQCB2Ws6GqvVXq+j5/P66oD2ezW4YMB1er6+r1TEBXoIBB665B52r6oSB6qyB5vG4yvCq97WASxBV80rmddN4NYlqtBwUtV4IBBliwHAATEDWIgFBEQMzV4NdWAM0iACBr2CS4PPWAJiBqGqT4OzWQanCAQOr1oLBWgPW6HO0aBBQAPOUQQMBTwIpBUgOq0idBVIYMBAgWq6HWVAPO1SuB54oB5uj0SvBqGBAAOC1mAlavmkssFgKvBr2BgUIAIMIq9YmcyV4wCCmdYTYOsmawCZoIXBVwMJEoOIW4IABTYKfC5/NztXq965+yBIOJU4IPBVQSrB2a8D1V6ruCq9P0epWAKpB6GsAQIGB1N6vSgCXoKzC63OV4ILBVIIAB1OjzquBAAOi42cucsq0twWtwNPV88llqMBmdXliVBAAawBBIMsVwoUBTQICCr2CmYNBgYADV4KtCnU6V4SVB6yFCmd55vP1iwCVgQGBA4YWC63QV4LHBktzRgKSB1QCBUQOqT4Ojq1dq4OCBgILBCQKrDCoIECCwPNAQOd0WcvN5p8llmB1l6qyvhlctlklq4DBAAKaBSYQABmcIWAUzT4SyCBINe1esr00VoKxCr0thKuDlqnBxAQBWIOIr6ZCN4NXrt5PIXWVQPWAIqsCBYKKCvWClslp9zvKxB0d65qyCSYNdwOBqwNBXoYCBUYOq5oVB56rB5rsB0fMV4XGzlzudJV4NWV0UAEwKdBlstgMlgKuBq6fBlgMBWoajBCYNelkCXQMzxGIr2IrEJAANXUYNXq8DmcJmasBxE6AQIACS4V5q0zp6EBTwPP6GrUwPQ5+rA4LDB6wFCRQNWwMzliiBGINzq1XWYS1CwMtgQqCAAt60SqBA4fHWAIHB42jVwNzzmduclRAKwClavglqQBLQNXlkBFwOCVIStBloFChFdmifB1YXBAIINBXQM0lqvCAAKwBxC9BAgIOB1gDBV4mr0l7YYNzPQPO5yiBVYXP0lW5y5C5/WAgPO0edPgLgCxGrrsIWgNWzuczlQwNYBAVzvWd0Wizt6rt6zisEVQIABzgQB42ivOcp9zpLiBrus0tWV8EzrCVBSgKvCL4KpCq4DCAAUzmgSBY4QMClk0OwKrBBoNYAgOCEIOsUwKsBWQWCxFk1mswFWp9Qq9POAKwB5uq0eqUYN6qGd1POA4OqAQILBQANXwMshEzWoOCAQNdqF5udPwI4BBQNXrtWBQKXBwIFBW4Wi0YDCVgOc4wSBZ4IDBpMllkz1erV8QABrstq9XWAQCBgUISQKuDllXT4IJBAAOChC5BWwUJlqkCWgbDBBoIXEAwKvB2XP0iiBwR6BPAWdvNXvIEBuaOBQ4N6XIOq1PHCYN5p8lksCluB1eAvWATwNPBgKMBls0VAIABqFPq2INgNPvKiBGgOddYIABAgKuCuYABEQMmlgpBV0CvClqhClszVoKuBAIK8CBgVe1iQBq4KBTAIaBBQIEBVIUQhSvBhSmBxE0mk6nS1BDwIAB1gAB5+qq1dPQVzqFdmVXRAVPlmCdANQzujAASFDQAMCq+CxOswGkxAkBXYUIhNY1elq2BLwNX1esS4LCBD4IFBVIN4VYOc4C8Budyp9JEYKvBCQMsV76UBlihChCwBWIMCGANerGCq4NBSASlCAAIbBZAUzA4KvBmkKAANeNAIHBVgNenVk1lkxGJWAfOvSRBllJq9druBwQ5BliuBwNXW4Nzzud0WiQgLFBV4UImeIQIN71mHmZhBBYMtfQOrveAwJNBIYSYBq8lGYK0CuYnBAAIGCAYIuBkrNBwWrqyvfxFYU4MzSoL2BmeCAwKgBWANeBYKfBVwYOBB4MtgYABBINXC4SvCYoRrBVwM6xGrxCtC2ey62kq1zWAKuBk0lq8twKJBwOI0qHDq9WvN4zqACkrABmYPBvVWq2AqzGBrpNBZoVWlYlBmkzV4Wkq97hOrB4MsUoIABVglJAAMlk0CNAJRBV76eCVYMIAYJGCToKYBUoSkDUYK7DhK8CBYS+CUAKqBAAgICnQNBr1kV4IAC5/O0d6lldqxuBkqlBwOsWQN6ZAJKBryFBQAQRBCQNdCIKiBMIMyvWCwScBdoOrBYVWagOCHwIXCW4IQBZoMyll7q0lpKtBF4klgUICwLSBV70tlkBMQNXVwKDBmYABq9XTYK3CV4ddBANYVIJcBX4MJryGBDoJlBmkQiCvD1gMExOsAIOy6CwCzt5vOdT4MrluCmmC1mlwOrwVYwNdlklYgMsk0CCQOIUQakCbIOlZ4WkBgUr0i5B1eqSgMsW4OJ2a1BrtX1dXVIYAFgUCEoIkDADkBAANXP4NXSgKtBRoKbCrCvCrqoBW4NehS0BBYWsAQIFBUIM0nQEBXgIJBPQOIsqyBAAvW54BB53H0eizucudQwNXlrLB0lXvSWBwAKBgSOBRQQQBsmBV4ukvV6qwADlYKBAAYMBW4OAwGrwAHBWoK+BFoTgBAAMmgKuBhBwBDYQAdTIKbClszrEDVQM0rCRBAIKXDBAKhBxE0hTABBQIIBwUKBYQCBWASrBAYKuCxOJVYOz2Wz1ez1nQ6HOWAPG0WcvNPkpsBrydBlaLBwKJBJwMJrGIWwJDBxHQvUsMIIUBC4IABOZYMBli1CvUqleB2fWGANX0qyBkwBClivCmeBvQpMV6VYr0zq8zR4NerqqCAASSBmiZBTwQBCU4OrUISvBWoICBVwM6VwQNBAYNkV4QXB1qvBAAOr1fP5/O0fN0awBudJkz1B1l6TAMyRIKpBmhPBw9WruA0iTBq0yPzLKBWgOAEINW1mkvcsAAMCVoIABV4NeCAKvdgWCVgYAFS4KTBSga1CmgUCiCdCnQIBXwUQV4KqC1llAoVfsgHBxIBBAQOr2Ws5/W5+q53N5quBvFPktXwOrT4KcEq2BHwOC1mAlaJBlasZAAwkBFwOr1QxBwFXVgKwBloABmmBIgoAYmbSBTwRgBMYQFBVwOr1YFCVok6wVYUwIICXwYABYwmIxIiD1ioBWIWr2fW6+r63QV4OjV4OdudJV4V6UAKDFwIgBvYMBVcAAGGoIABdQNXQ4MJhMtAIM0wQ4er00QIWrRwSJDAAOdBQiaCV4NewSuCDoM6BAIZBDwymBAAIHB2ezGAS1B6HQ63W1fP6qvB0d5q8sVwOrwKuFAAOA0itpAAkyvV6H4OBWAMtVwM0rxGIACtXq+I1beBP4SDBAgXPvIECxKbCUwWCxCwBVQIABnQNBsjMFU4Os1oDBWgOz1apB2QEBVYPP53O0fH0eivNWwLhC1l6UgsrqyttGQujvVeq80mavCxFWkgqbrCTD1iwB1eqvN50mqGoOr2SUBTwWIP4QABr2CAgQKCCAIGBaYizE1nW2ey6/QWYPQ54AB0epVwOcvNPlkthM0wN6qxREVuCxGvVdr06V4eBIwoAWr0zrCaC0uj0d/52qvVzqGd56VExKkBVAS1CXYK8CVwTFB1VW0ioB2QBBAQOsVAKsBAIPP6Gq5w2BAAOiztzp8lgUIq4kBWAwA1WIeCrwABsuIeDlXlteEoOI1esAIKGC515vOjRAKvCPYI4Br+IWoKrDxLBE1eAq2jUwKxB1YlB5+j5ywDFoKuBvV5zoABVwSvCmZFB595OYMkWPeBwWJAAOtwKvbhFXmk0TYKXBSYey1fOztQ0eq0gLDVQSvCDIWsxKlB2anCvNXDIOqVYIAC0dWvSxB1StBVwOjqGBp6tBq0smUCq6uC1mlqxpbAETuBOYOJNgNWETVemkzrGCWAaxD2SLCq1z0nQBIQOCHYIDCCoQGB2QEBDINXUwOdWQXO5t6rtW0fN1WpVoOjztWwMmlkswIABq9ew4EBvRnbAEsrq2C2ez6+lezU0WAMthKwEsmsbIOqp9Xq9Q0fQ2QJBAAIDDVAQHD63W5/P52dqFdq95VAPHaQNXua4BAAPN0eizlPVIKtDwGrxGrq0rlit/WAmB6/X574aq+CUIMzVoM0wSwBxCYB0l5RgOd53P2SnFxOJVgeyVoOs6HQ5yeBZYOBqCwB0S3Bq9WWAN5WQIJBztPlksmeIwAPBWYOlV4Kr/AApLB63V0hLZlkthEzrEtmk0r06V4fQ595qCvC5/WWASqCVgQSB0gOBAAPO1WjTgNXxFXp6nBvNPkzjBkoJCzmcudPkslliqBwFPMoNWU/4AImWk53NJrMBmder0zVwOCnVeV4NkTwPQ1SwBvOq5/QBIKyBAAOs63W1fPvWjVgQACq1XwOBmclp4ABUQWBBYMsBIVPpMlk0tHANdlcAlYCBAH4AIlek42eJzEswVeq5yBAAU6WYOI1imB5+jWAKgB5yxB1YMB64CB5/P515q2dztXuedvNPFQOCmcBq8ykslVgOrwOClksq4JBXQMChM0xGrq0sUf6wNvWcqyvYVQUJhMtWoOCO4KvB2SgB0dzT4OjWgOqWIIBC5+qBQVdqFPmcsqErUAOCwMthFXq8shEJr2rwGIq9emcCk0Crq7BXgOALrCw3q1PlYaWOoMzWAMtWIK2CV4KwB1ejq1QTYNQmdW0fO1asB53OvN6qFWwSiBruBU4NdruI1eIawOBwVYFIOswF6xCoBq8CgVXwV6q96V34ARqsrV69dq8zPoMzgYEBWAes2Wrq16zudp6bBp+j4/OVwPNztWUwStBUgNW1gDB1YBBwGsVIOr1ml0qiBq2l0mAdYMJmleGIMALa4A6lcskoYVgUsgVXwUtgdYVoM0xCvB5+kvKmB1V6qFQllQzt60ej0SuBqC8Bp8rEIOBr0tEIWC0l6VISoBAYMrmQDBvQUBCIOIZQKu/ACkslqvWAAMshCyBr1YxFYPYOrvN51XQWgOqVINzq8sVQKrCvOdzoCBvIHBrrWBmczhFe1iuBfQNXAYIAEZgOssmJV34AYrpXVQgKwBhEzr0JhM0r1eV4OsAIOs2WyWIOjqysBq4ACvK5B44CBXoMlq8lAAMmawOswCrCJBFWwOzYAYA/ACsrwKvVlsClquCrCuCr2CxGIVwOsQYIAB1VWzqlBvStC5wAB1XN0VzXINPAAKwBq+B0tWq1VHhNW5+kV34AZqtPCqcthMtq+IV4KyBrwFBAYQABxKuC2WkvOq5/PVoXP1fP1SxBXINWud5ztzp8srrPBUAMrV5QZBSv4AalQUTq6kBmisBq8JAAKyCWYSwBsiUB1mr1es6ABB54BC63W1awCAAOizl5p9Xq4jB1dWHhUrqC8KAH4ARgITSgUyryoDAAMthKsBnU0mirBWIKwC2QCC6wBC2XP1fW5+q53N4+i0WduclgVXxGAV5kzSX4AwgUChEsrusrCIBlstWYOsr00xGCr2IxKxD1mzAYWr2fW6+r6HW53O0fN0edp8sq9YxGrV5dWlZ+/V+MBWIMzq8tgSuDmeCmgEBnU6xFkxC5BWIKvBxOs2SvB63QWAPV5/O5uivNXruBwOswCj/AH0sVwIACmctmatBhMJhU0wU6sleVQOCr2JVYIABxCuB1nQ62z2XP62q52q0edp8sr2lvVXq1WOX4A8mcCgKuBhFXryuBWIM0mirBAQIADxFlxAAC1iuB1mrAQKvB6HQ52j4+cucswLCBwOAvSwHlUqPn4Ahg6vQgIABlksUIM0hMtAYNewWIWgQABwSXBslfr6vB1mJxOt2Ws63X62q53N0edqFdwOCDQWqq0rlY5DldXRn4AzlivDQgKpBhMJmYEBr2IAAILBiAGBVQK5BAgWr1uJ1nQ2er5/P5yuBvNPwNdrsIhOBvV7wFWAAdQWogA/AD9PB5yuChEtVINerEzWAKxBmimCWgM0WoWrV4usV4IAB2avBVoNQp8sq8llgBBmeBEYOB1el1WjqyK/AElVqqvOgUsrteq8zrCxBWActW4M0hU0WIM6nQPBryrBAASsB2ey1nP1V6q+BAAKyBp8lksJZwLPC1nWwErRX4AlwIONVQKoBQIICBAASwDhNXmleVwSwDxGJAIKuC2WzTYPP0mjvNWqFQvNzudPlmBq8IboKxB1dWRH4AmmcyBxtXq8tAQKBBxGsxFehMDgcJXIIHBWQKxCxGIsqvB1ivBVwOrWAWq1Oj0ei0WdziwCgUChEJnWsvUrRH4AmgMtNJkshB/BAAUtwWrU4KuBgczwSnBV4QEBX4VlsgEBAAS0C6ywC5ywEzqwBkosBmgtBqyv/AFEslgNLVogABmaiBr0zV4UtU4U6miwGslfryvE6HX5/P6ywC46xBV4jUBwNXqyG/AFErldPV5ctmcsWAgABVwVXr1ewSpBrywBWIKpC1iwCW4Ws1fW2fQWIPP5ujV4OcV4LvBbgOBvUrQ34Apq1PNhUzrEzq6vDAAcDmeCsirBUIKwEAoSvBVwOs2Wz2eyAAOq63P5yvB0WiVwMllmBwLBBV/6vszl6BhNXlszmauGlteAAOCAQKiB1mIV4U0r06nSuE1ivB1nW1fQ6Gq52j0ecq1XhFdwN7vVWqyE/V9Z3BNxNYVpFXVQNYmkJAIWrV4UQVwKrBxAABXYOy1us5/XAAPW5/O1XHV4NPq9XwOBq4+BkiE/AFek5ukmILHUoNXVgUzlszwSuBmcJAAdYUoNeiCvBVIOIsuIxOJXgOJ1mr6/Q5/P1XO1Oj0Wduclk0JwOkq1WlaD/AFd653PwBwHliwBr1dluC1gFBr0thMtrADBhMKmk0VwNewWIV4SrBAAa5B2SyB5/O0ejzmcvNPkslGAOI1d6kiD/AFdW1fW6FWBY0Cq9XrFYmkzxCEBmaqBWgSvChUQmitBAAKmBsoDCAAfWVwPWV4N5q1zudQkssgUImmIwA9HAH4Aller6/X1ZyGgUClirBmczr00VISvBmk0Voa7BXAVeU4NkAYWz2er2SvB6HV53OztXqzbBbwIqBnSvBlaC/V9uBQoOzwNQV49XltXrFYT4MtV4SwCmmCVwU6AAWI1gOBAYOs2QAB1fW62q52j0VzlmBwKtBAYITB0ksQX4Atq2z1uJ1lWlavFAAMzmiZBr2CVwKwDVYOIAQIPBxCwCVoYAB63Q54ABVwOp0edV4OCwISBvVWq+AvI6EAH6vq1mJAAOBWAkBWAajDr0zlqvBltXBASvDAAQTBV4Wy63P0isBAAOj0d5VwOB1mA1mBV4MAlbqFAH6vqwOJR4KwFgSwCmeC1amCWISwCmanCwU0mmCVoTSBWAKuCq2dzqtB0edp9XEwOAvStBVwIABlav/V+U6T4NXq0kV4KwCq9ewQMCVANeV4IABXYawCr2s1lkVwOy0igBEoNXp95vNPruHwOlwOAwFWlh8/AGUrwKuBSQM6wSMBgCtBWAUsAAMIluC1lemauBlq2CVYNeDoOCVoIKB1nQ1WjvNXwVXrtXAANdmc0wOr1iwBH4aA/V99WwSQBAANert5q0BWASvBmctgSvBVAMJgcDWIIYCV4a1BVwQAC5+jq9WVoVzp9QktXwOCr2rcYMsqyzDAH6vsvSQBlsthMzr2BV4SwCrtXWgUtWgKuBV4NXWoMKmkQiCsCxGJWAer0mj0d6zudzmcvNPlmBq8zwN60uB0iv/V+FWrqvBhKwCq96VoMsAAMzXIMIWISuCBAIABxADCwSuCsmJxOs2es62r5/O53N4/H0ecudXlkmgVXDIWrV/6vwvWBmkJhEthCyBwUBgNXrterEzUYVXAAc01YJBV4eIAAVlTIOs1oCB63Q6vP1XO0fN0V5qFPkssq8JmmIwCv/V+FWwMzV4IAChOBlksrqiCABKnCmk0r06nVeVANkr4DB1mJV4PW1fQ5/PWAIABztzWAMChFewOBlaA/V996wFXhECAAcIrEzmahBr2CmcthIABmdYwSwCnSuBxFkWAKqBBYNkxOIAwOr2eyVwOq53O4+i0WcV4Msls0xGlqyA/V99WwMzV4SyDVwKWBAAStCrE0AYKqCXgIEBVwU6CoasB1mz2YCB1nP63Q1fO0ejV4VXq+BEIOkV/6vxvSvCk0lgMmgVerEtq4DCVwS0EUQSvBrCzBAINewSYBVwWyWAXW1nQ62q53NV4Odp8lruA1dXqyv/V+Gk0mAlkCkoADr0zmigBwUzVIU0mgEBmmI1avCAoKpCAYIEB2WsxIIB5/X63X6HP0nO0ejztzp8swN6Vv6vzq2BmcCgKvEgUCq9exFeq6vCU4MKAAILCVwK/BVwVlxGJVgOr1oDB6GzAwPW5/P1WjvNQkquBAAKwBHwKA/V+NXgSsCp9JpKvBluITgNYV4MzVIOCVIMQAAQFBVwOsVwKvD1gDD1mz1fP62q515GgI1Bq+CWIWAvUrQP4Atq2k1WBliuBpNPp8lV4NXV4UzV4VerwHBWYKsBAAVeCQNlsirCAAStCAAPWAAPO52jvNQGYUzq7WB1lWV/6vv1es0tWkqtBp9zuavBVAVelsDhMtVgQACAoOCBAerxFfVIIAB2Ws1aqB1nPAAWq1Wj0edvNzpMmgUJa4N6liB/AFssq2BlsmktJVoKvDgUtAAMDV4NX1imBmiwEUwIJBWQQHC2YAB1ez63XWYPP6vP53N0eizlzp8lk0zwOAqyv/AF1Wq1XwKuBp59BzqvDgStBgctV4M0wStCr06UwOIsqzBXAauBWAQCBVoKxC1XO0fN0SvBvKvBgSvBwMrlaB/AFkrq2r1dXk1JudzvPAzkzltXAANdr1dUIMQAQKsBUwOr1iuCxOsAAKvB1mt1nW2WsV4PP5+r53NAAOj0V4vFPFgSvBwNWQX6vtwOz1hzBp9PvOcued1ihBrE0rAEBVIU0mleUgNesgIB1mJV4OyVAK1B1qrBVgXO1XO53P0fHVwOizt5p8slkJrGI1d6laD/AFdWwCWBwNWVwWcvPGToMthM0hMzVwSyBAgKiBAgavC1es2YAB1mrWgOr0fO1IBB0ej5vHVwOcztzp8lk0ChI8CV/6wuwNdllPuatB0XG0VYrysBnU0mivFxFk1gABVwIABxOs1qwC1fWAAPOvV7vOj46tBWIIuBuYABV4MlhFXV4N6qyC/AFUrllWvWBqyvC0WizvGUwMJlteWgKtEAAKqCAAWt2awBWIKwB2SxB5+qztXqDXBAAWcqAyBAAKuBksCmbdB0qv/AFatC0qvDvKwBzmjVIUJq6uEVAWy1mk6wGDV4Or2Wr6wKC6HQV4NWrtPzudzmdvNQwKsClkCAALgCHwMrQv6vq0uIxOsq9Wued0XG0XNltdxEzhOCV4Wr1Wr1fP5151es62yAIOs64CB63X6HP5+q52jvNdq9PbgNzp8lq6sCq8zhEIV4WIWAKF/AFN6wNkwWlwWBvOcznG4/NgUzr0thIDBQIOs0l/vN5q155yjBWQOsWQPW2es54EB1SwB0educsWIMskslk0zwIGBFoVXmk0nTdBV/4Apq161dePQOBTQOi1PN0ejlsChKBBxCvCWAOs1V6WAOj5yhBVAIBB1fP6AFB1eq5whB0V5lddwMthEzhFdcgIABwIDCxFkxOywEsQ/6xqwFXk1PVwOiVwKcBVIIADwU0V4OI2Ws5+jq1zzt5vKlB56yC1YcB5yuB4+jzlzljdBEQICBwWrvVdAQOBwGB0us2XX1dWQv4AmlcrV4NXwKXBzivBRYPO6tehIACr2ImmCV4Os1nQ1V6mYABuejC4IADAwKtC0S/Bp8srul0qlBwOsVgMrq1WAQQAB0rMBBYKJ/AEtQNoOA0h8Buei0fNAAKUBVgSyBmk0WIOsryvB59/vIABqFXqFQVQQABvS4B0Wcp4ABpMlloeB1Y2BvSsCeY0yq2kztWRP4Akg1W52BxCuBqF5zmi4+jVwKvDVoKuBr06SQKyB1ek5+q0edq9WAIK2Budzq1PXokllksls0xGkTwNWkhHKldWli8GAH4AdM4OIwSbCq1zzmj0eqVwOjV4NXVgOIAQIECV4Os2XW5/PvIYBvN6UwNXruClkyp9PkoIBmddVwOsV4KePlkzRf4Ajq2AwU0mmC1ctwN6SwPP1SeBmawBVQNkr00VwOsWoKwBWIPQWIPO1SyCq8swOBlkllksruBxGrDYOAVyAABrsqRn4Ahll62WClsJQQNeV4XN53OV4NYV4MJwWsWATEBWQIAB2axGWAOdqFXxFYlszwWIvWkvQCBVyQABCaYA/AB1Wq2BrszgUsAgKDB0fOS4PP60zgavBryqB1iwBTIIAB1mz1qwB62s5+qWAVzlmI1eCwWHwGAq8rkiuUAH6xm0uBllPud5R4PN53Q63W1ctgawCmiyBmlYVgNkAQIAF1fW1XNztQq8zruBr1eWgNWGgKu/AG0rPQdXvWBp+dVwPO53P5/Q5/WVwMDltXSoKXCVgVeWIWy2ez63XDAPOvNWp9PmUChEtmmIq1WVzEHSP4AdPIIABvV6q2Bq2d4/N52k6vW5+q2SuBhOCxCsBr06AAKrBWoKzB2ey1iuC6HOaIOdvNPkslmeC1erGIJQXlcqSX4AbleA1eAq+s6GBwWBzuj53O1fQ1mr5+zmajBwWsxE6mixCBIK3B1my1oVBWYIkB1XO4+jziwClstYYOAV7EAwKT/ADdW0ut1eCr2BWYNQ0fH52k62r63X62zB4KwCr00V4KuCxAACVgOJWYOz5/Q5/O1Oj0SvCgUzZwN6lZSYmYaZAH6uBq2BVgMtlqaBwNz0ej53P62qV4XXmivCUoM6AwIEB1mIxIABVwICB1jKC1XOEYOdp8sVwM0VwNWKbMsliV/ADErwGAwMzhEIhMzr17uedV4XP1SVBWAMJhMKrCgBr00mmCWANlWAms6Gy63W6AdBV4VWq9XwOHwN7V7VWuYcaV3t61et1kzgUChGBxFWBYKvB62s2Wz2es1c0WANe1avDryoBslkAYOsCgWy1jMB52p4+izlzksmmdYxGrV7bVBWH6uWq2kSoNXlkBksswKiBq+BvXO5+r2eyAQOzmkKhM0xGIVwKvBAoOsr6wCCoKvBVwOqQ4Oj0WdudPksCmeCV7mq5+Alab/V6ixCwNXgUlAAKsBAAMyq+q6HWSwKvChQACiAACV4IABaAICB1mt1nQ6Gr0d5zudziuDmcImYTBvSRZqxCB1aw/VypbCvWBrslp9zud6BAOjwGr6GyV4Oy2eymlYVQIDBVAOIAAQFC1mIxKyB6HOvVXq9Qp9PlklkytBCYWkqyvZ1mJ1uBqyw/KyKvEwGIq8sued0Wj0ep53PVwOsAIIAB2aoEAAapCAYIABCgXW63P0d5qAqBq+BmcImeC1er0l5V7ErV4NksmsWH6uROIhcB0mBrtzVoPNVoXP63X6GsxIAB1leWAM6mk6nVeVwNlWAez2Wz1ez1nQ1QlBztPlirBDgOswFWRoNXR69WwOIr00dYIjBUP4AMleA596OgNWq9Xq2AwNW0eq52q5/P2aUBAAOJ1YCBNgOCmiyCr2rxFkBgISCAQOy2QeB1SwB0V5qEsq+CwCKBVa5YDvWBVwMtH4JVBErYAulVWKoOI1mkq+kwOrvWlV4XO1fW63Q2erWISzCDAOIOINer06nQGBV4ILBxLCBDgPWV4PO1Op0edp8lgVYG4NWTIpaUqxYBr0zhMJV4OB0l6E4oA/NIdW1eCnWJKQOCr2swGIrqvB1SOBSYSsBAAWs1esVYKwCxAAECQSyB1my1jOC53N4+ivKvBq4yClhFEq6wTq16vWChMIgUIq8zE4UkaSquwqwABwFemeIKYMJwWsvVdllX0nO6CYB2SoBTIYBBxE0miyBmgZBxOJCAQAC62y2bOB5/O52j0d5qElk0Jr2rqyGFIgKORLQOrwOBlsCAAMIhFYBAJnCWP5TE0ulq+AmcCq9XKoNXKoVQzujRwKYDUAOJxAGCsisBAAVexALD63WYAPW6Gr6CuC5vH0V5cIMzq+IHgKGBVwek0iNQUAWBmktwMCkzXBLwJZBwC8BvUsV39WwGARQJLBlklAAcChOCwNW0fO56XB6+r1uJWQivBwVeAAIiBV4Wr0mq1XP6AAB6yuB0YACzlzkszCoKEBCwOAWQWlFoOlAoMkLRl65+kwUzVoQAClldq9ewJCBwCv+llW0hnBr00wVXKgNJp9JV4MIruBvSvC1ey2QWB1urV4s0nU6VoWJNgOs0lQvOj1QdBAQPOztWvN5udPllXQAOIZYQFBVoWCaAV6ldWlZYFki7BV4OrZoOHLIlPktXA4MshM0xAUBCoIhGAGcrmVWNINemcJUoMsp9zP4JVCwVWzqvC1mzAIOyAYKvCAYNlr1knVe1iUCB4OrqywC52q1Wp4+dqAwBlktq6sCmcsH4NewIIBwQFBnWsvV60mAVAVPAYNWwF6AYOBmldrtXVwRaBLYQABhFe0oYDEIMkVmroEKgOBmcCgSuCvOducswKwBp6RB0fP5+yU4IAExNlAAOCRAKWBsiyBAAPP515lgeCAAWdp4pBVoNXlksq8zko+BluImkIq8IhEzxGCEYOywFQKgN61elBIOrvWBlpZBrsyLQWczl5WIUzwN7q+AwIYBva0BPQiuuq4HFq2lwRzBKYOdzpTBp5gBk1Jp9Wq+j1avCxOsxAABAYasBAAVkBQOs63Q5+jvNQa4N5AANzPgQ2BcoIsBAYNJktXw6zBlkmgQGCrE61mAq0qq16G4NecAOBrxYBkssrtPLQOivCwCBQOCwOBwGsJwOBZoN6WQKtuq15GIwJBwFdllzzmc0QABvVdwVXllXruBqyvDOQYABUwSvEAwOt2es2XP1SwBmdPlijBQoNeFQLlBXANWAYNzGQLnBktJWwMzq8IhFYw+rwFXvWlxEzlte1deCoNPuYABVoIADzjiDrpbBwUtrBQBEYMrPASspUYN61eqV41W0l6wKABKgOj0fH0awBwIABRgOAV4KcB1lkr1kWQM6r2swS5BxGJxOr1us62r5/O0edToNemaZBcQMsXAKJCzroBzqwCIAKXBkrABkoJBmYwBvWAG4MsgSdB1ZXBud4zipB0fGLYKvCq4lBlkmAYMChE0xGBPYaEBqyyjlcsE4NWwGsQAKvFGoKOBr1dq+dKQOp1SNB0d5q960YCB56tBxABBsms1eInSwBryuBBgQCBV4PQ5+qaQMswVVwKfEqFQFwPN47kBGYIJBua3BztPq1Pp8lk0trzyCr0Cli6CfgMruauB0fH5vNE4LZBqC9BD4NPqDTBaIOBvaoEwGkvSJBmUqVjjSCq2kfAJRBr2sFgI1CkgRBBYMJllzOoPOAAPP5/O0mkAoOkwGr2TPBUoesryvBnTOBry5B2YRBAIOraAVzliFBwFXkqIBzl5q2j1XN5wCBcYVPSwIABzt5vNzp8mmeC0uCVIMmTQVPWINPzquBVoQ2BAYIlBrrUCEISvBmeBPQKLCYAOz0uB0gJBlksla+EVaAABq16vQHBUAKJBrEJQgOBwDdBq1XCYOAxEzV4R5B1fW5/QWIPQ6Gs63WTQKtCAAauCry4EVoQeB5ySBVwNXwQABMQKICcQWq5+qcoKvCHwPH5vH0axCqCLBwSPBkokBTYOdvFPY4QYBEoImBAQIlCzogBAAOcudJk0tr2rqx2BAAOrr2CLIIJC0l6lgMBAQSfBllVU4QKBDgYABagIZB1ijBll6E4NXmcChMzxGrvWk1ekvd6wOswOBq1553P6ywBSoICBTIQACUoNeAgKwDr1kxGJCQfQTIedliMBp8skyHBvLfCGIIAB6o0B52pV4KKB1WpXwPHWAIcBV4MsktPp9QZ4LQBvNdq4nB0blB52r1TYBWgPNXYWjV4LMBLYOsvaLCq+BrC5B0t6q+ASgOB0qCB0ukvMsmUrV4S1BqBOB0urSwIWBJgOIEAN6wFXgQABhEzwOACAOICQIWB0mBmdXvRRBSYPWPoOzVgesxOIsixBfoJYBWoKwBBoLDD595PYN5qEzll5zoIBqCOB0Z/BVwQVBcYPVYwN6BoSVBXALPBp9Xw9ehEluecXgSbCp9dp+j1OqEAJXB5/WWQLfBBgIUBq1Xrp4B1aDB1eIwVXhECq+CvQOBNAKXCxOzCgKtDAAcrwBvBDwNeTYNYmeCwDQBwNXkoABFIOBFINdmczRwOk0uCmVzOIJ6BSoICB2etFIKvDsoEBmgACWINemisCAQPQNgKlBU4SABAAWdqGjVoTeBboOycQXP0mkHgIAB1azBRgIABmZUBqF50XH4+q1PNb4NXq5XBHIKtC5/VFAIyB53NYoN5p8sPQOlq2k1lehNXgUlWAKUBrsJQwRpB1mAliuGAAMswOInU0hNemcIFYK1Crslp9Pkq0Bk0slkCgUJrAPBCQRXB5/Q6/WU4OJTQKvBrylBWYICBVoMQAAKwCYYKZB1iuBvI7BvJ9B1WqAQOpXQOd5qgCGAOyV4PXDoKRB6C0B6C4B52jvV5uczwWBlgnBFAIABFIQQBa4XQ1Wr6wiBAwPVV4PO0mj0V5kstEQOlwOAwUskoABkzRBgUzgUIQwJnB1dXVxAABqyUBlsIDYMmaAdXllPuZXBCIK0BWoMsrqOBL4MsmSvCSYOyVgWJVINfUYSxCV4QFBrEKAYKtDVwNQUYNQQoKXCAIKXBq1Q5yuB2asB1es1aqBAwIBBBYKTBEgKPB0edp9dq9WqwoB5+qB4QQB0jKCDYPQbIJZBMAIKBD4KvCmWBRgOBawVXQwNPQoK0CAAKxBmmBvdWV5bOBlsCDIbQBq0rVoOdzmdWIIBBF4NXrurGQMmp9QCoJfB1mz2avCWANfQgOInU6U4KvBeYNehU01hmB1Wk0d5vOj1Wjv6kBTYPQWIOqvN60YJBb4LgB1oxBRwIDBWga8BDAPO5udlldp5cBDoKdBYASjB6AXC2RWBV4JbBIoI5BD4OjzlzlmBwUsqFPliuBvOcvKwBp4ACksIhJrBvSvLlbTBq6vBDQQIBllPVoOiAAguDX4KTBqGdzt60mrOoIADxGIstlAoNeVwKvEAYU0r3P0dQVgXPPYOrVoSlC6yXBvIRB56mBVIOt1uJAoLjCBQSRD62qaYL6BFgPO5yaBXoPX6AVCFwRZBcYIEBAYK0BdAIfBvNWq9WqFzOINWq150Wj0WdvK0Bua7BwNdwOlq8rV5VWwF6rqvBuYABp9XwNWzooB5vG0YsB4ywCbQOCCAIOB53PVglkUoIABA4SvCAYKqCAAM0rFe0dPvWjVgJyBPYQBBAQIABQQKwB1QNB1oKCRYKrBA4a0BSoQWB5/OV4IsB52qVwSrC66kBCwIdB2TJBAwI4BH4PP6weBvNXq6sCPgK3CAYPNQgWiziwBlkyWIN60lWV5erP4NXqDLBzjQBPoXHFIYCBFYVzktXwWCHIPO6ByCKoOsr6tBVAKvCWAStBVwK7CwUthN5DwOrVYaVDTgWIRIIGB0jfBBgIpCVwKvBF4QWBWgSRB6HP1WdmYuC5+r6/WEgSkBKYQgCGAYfB6wLBD4Ojq2BqytB5up1SAC0eq1Oj1PHQgSSBksCQwOrq8rV5MrwB4BktPzuiUYInC5pQB53O6oIC0QpCbIMrqx9BSAQADsipCwVeAAOCA4QICBwLmBmcJZoQdCPYKfDAQSgDAAYKBbYaOCFYIGBSIIHB6Gy1ZXBp9XzvN1XQ1YxB62rFASpBcQQFB1olBDwS+BDwKvBrtP0WpPoOq1QDCQoQQBQgOczqFBk0twWlqyvISIIABLgNWV4XNa4IpCV4IvBFgPNXYNzq0srtdvKQB55vBOARUBxFkA4Nemk0iEQmiKBAAQEBr0zlqvBVwYADDwIRCxCgDVoQHBxFfaYITDAwesToavC0d5q95LQOr2YABFwSkCGoY7FWoOz63Q0lWq9dqxuC5/W5/VAQS1C1KvCvNPllXV4OBUgSxFVwOk1erwGBFIOdZoLWC53Q6HV57tBBAOjzo9Bq9XubBBBoKRDOQOJsqJCVwIACWIi6Br1YhIAB0nQOAakCZwSwDslkZgeCbYgHBsozBCgKbCR4Wy6GqVwMszqOB6C5BWAWt1alCBIIeBA4KvE2QFBZ4NPZ4IfC5+qVoOrOgIEBRwPHcQNPksswJOBwGr0rOBWQStBq2ALAOH1dektPVwQpBbgQvBFQKwCFINdllPuecd4eyAAOtSYgCBVoSGBr0QhUKVoNewWCV4RuExFfBoKbBTQSqCQQTLCbQQNBVIIGCwQUCR4QmCR4NzR4Oj5+sfwS+CE4LGCHATpCZ4ZgBOgOqqyvDKIPQ67TBFoKyB1SEBzlWwNXwIACUgJYBWIUAgFW0hRBmdeCANWJIOp52kagWq1mrKQTbB0d6wVXp+dYgerNgZ9CnSUCVwQfBAoKvBAAKIBq6vCY4eIsihCC4IABPgS0CUATMCxE6F4LiDnTICDQQABKYOjvMzqF51auBb4IPDUwdfdAQIEEAmqvWj1XP62yVYPWZwOy63X56ECqFdQgMrq8zmeBRgJNB1avDwGImcIq8sCwN50T6BFgOr677C1gqBWYPOztWrtPYgKvBBQJhBfoKCBPQSvDNYOrr00U4KvBmiwBV4QOBVgKWES4IiBZoQEBEoVeiEQAgLeDwQjBDoVlSoIhBQoKvBq1QSAhNCGQa2BsllUoI3BVoQNCWAWk0mrEwInBQIOrA4XW6DZBV4NWwKDBvNzp8swMtgUtV4QABvWkwMzk0lkssmSbC5yuB6DWBF4IrBWQKvBvTRBmdWzqwC5xiCCgNkAIKBCV4QABVwUJmlYSQNXV4YACZQSlDwQcBAAKgBVwS2BAQTAFmk6RAWsV4Ws6GkvMsp6vC2Wz2ZOBr7CCY4NlCwOCEwIFBsjQDAAXQaoS9BD4OsV4Os64lB6DhBq6BC0WjvNXlahBruBwOr0l61eIwMsktPp9QwNXq965/PFQSzBFoLaBWQIbBvNWrtXp9zq15zoYBIwRQBP4U6RISLCU4QKDAwUtshoCSgJuBOwKuEiDPBDAIOCaYKIBB4YACBgWrAYRVBwGjztXvKvBF4JKCagTlCHYQGDWAINDVAKtCVgIOB2Wy1uJxKDC2er5+AzquB0fNAQN5vNzqFXgVdEgKvBmkzrtQvOczqcBCYPP62yEgIyBHAnW1nP52jEYNXDoIDBq2kYYJSCPQWCAwKXBAoKpCXAUzV4VXPIaUDAggkCiCJDEAM0hQDBbgjBBCgM6nSvD2XW5+qvJqB1SvCfgLCB1gUBXATJEAwRGCAATBEAQOtAIKDB2Wz2XX6HPGQPO53N46wBzl4p8lksCmeCwOsWwMlp+c0QRB0b5Cb4bcDAoQLC1ejp6rBvN6vNXueAV4uCSQesQgQKBVQQAElqVBBoQcBUwIICO4WChQiCsgIBmlYrwFBCAQtBV4IaCRggAB1VWvWk0iRCBoYUBnQhBdYavDBAWIsoVCZATKC2Wr1aCC2es6yDB56yCWIKcB0WcuawBhEJrzYCmavBvKsB5wZBD4ImBxImCTgLfBcQIAB6F6LoN6DAOjvNWZIKvExCvCUAMtq+CQINYVwszXgaoCrEKwRyDAQIIBhQGBAIOrKoNXGQITBV4gfBTAaLBBgOrqukMoKcEAgLoDVwZTCBYQMBWoQvBWYNfCoQhCV4SBC2XWSYKvB1fP5upV4h4BKYWlr1dmdWV4KuBJIIiBUwJiC1i1BKgTbB1mk1YTBb4Oqud6MYc6shYCwSiBgcDAYNdUoUzlstBAIWBXYM6mhnBO4IQBEYJ0BVoMJhQKCrAbClrVCCwU0iAHBmgiBEYQAB1nPvL5EAAKjDYoSuDiEQV4k6DwTwCAASvCQAKBB1oABAgPQ2eyVwPW1XO0eivKuBksIwOBmczr2rAoNQV4QWB6Gy2avCAAQtCHoQAG2WkqGqMgZfBKQWCmavCAAUtmaNDAYNYrxtCFYa9BmeIBgOCmjCBWQIGBEoYCBW4QOEHQQCDEwWr0hJCUwKnCiDABboLGCAgIKCdASlCXgWCDoOrWoaABPwiGBPoOs6/W5/PV4N5q9dlksOgUskszmUyrtXvSvBDIIAEr1fF4ItBsgFEWYurvV51auDI4VeVw0DgUJWAk0AYUKmgzBwVYlqZBWIVeAoISBYINXAwInDrouCCATkBc4TLBH4avCWwSdBBYQ6CT4IEBDQSwBG4M6A4IMBXAJiDDwJ5CawQBBVwOz2ey63W6CvDq1Xk1dwOBxFXp9zqwCCq+j5/Q62rD4LXB1j9DxFlFoQFBBQQFCWIRlDJYJPBM4SACq9erEJgQABq8zDYIQCV4QaBUASfCloMBDIKYDEgUzmYPBFALDBDwScC1grBAAS3BQwRTDc4SeCA4OCCIWrBIJXBWYK7DYAS5CAAIhBstlr9fGoWyAAOrV4IiB62q0ejvNPmeIp+Bllzzmd0ecWAOj53QZgOtV4QqB1mCFIQBCnRcBJwIHCAAS8CAAOsmkJhSYDPwQhBlqwCgVe1YHBmYQBSIQFCV4UDDYSpDVwS1BwSwBUgIHBnQcBFoIIBbYiNBVYiYCIQU0EQJaDAAU0KwIWBCoRmBEISuCNIJ0DslfboWtSQKtB2fQ5+q5ykCmbeBr1PVoPHBYN6qGj0nP2QaBFAVlEoSbCc4ZTCIYI9BAwKtDKQaOClqOBBIOrEIKvDhCTCRAKxBDAKlChIHBWAVXr1YBQSzCEgVegUtC4Q5CGYLMBhL6DUIIADSoQMDq9XrBpDVAUKAAK2DsiOBZIhxCDoKFDAYWsxOJ2WyVwIBBUYOjucswUsllXvPO5y8Cq1Xq2kV4KXDFQTwBAAIEBGwNkA4QQBsiOCXgJjCAoMJmkzPQKSBEQILBVwSwCgUzTAKgBrCjDCwIJBYgRBCV4aZCq4NBV4IvCAAjJBBYKZCfIb+BUAIeDDQISCCgQdChU0PQRxBHIMKB4S6DdgIoDWgeJ1nP63X1fW1Wq0edp8swMsued0fPXoXP0ekvOqV4VkagM6VIRYBiA2BUQI7CUgStBX4JMCmcDhKbBlpcCCQQHBlivEAAKlCSYrFDEYIQBloeBwQnBEYVXDoSQCVoktlqvBhLYCAYIsBDgL2CKANdYYZRBK4LrDhSwBCoOs1dYM4TUCAAZACDQOJAASxB5+y6HQ1XO0ejqEzq9drt6VwWs63WAQWr1ZvBAAKvCTwQACiFYHQSsCAwOCKYT3CKoKXBNYQAFVw8CrqnBSgIYBlszMAOs1QnBCAMIYIYADrEIlodBIYNXVYI1DEQMDRIYsBUgIvBXQTHDBQILBGwI8CryuBMoNYEwLeCPgopDRQNlWAIEB2ezAQKiB53N0ecp5rBp9QvWq56tCAAquDMALiDbYVeiAECXwT3CB4MJlwSBhNY1lXQAL3CAAKBBVw8Cls0BYNdCIIWBGYSFBC4cJb4KOCHIOClkzAAQZCrACBI4S8Bq9Yd4K8BFYMCH4SkBAAawCJgS9BHgIwBA4QACNgI8BQQSvDR4NksiUC2ey2XQVwOjzt5p9Xq9Q0ejq2k6AQB1mJVwyLCPIU0nRfB1bzBhTzBBoT9Bq4UBVYJ1BKwRzBNILFCSwMzroKBAAKABQgQiBA4Q3CrAEBljBEmeCwSmCxGrxEtlhhBDIQCBPYWrCYIYBrylCq+CwIDBf4IABloaCq6vBKoNXhIfBBQS+EdYKFDRQNeiEQV4WIsjoCAAKvB1WjvMzqFWqyuB1XO52rVoOz1urWALXCDgLYEAAVkSYJTBhQKCegJEBgaTBBgJqCMAMzVwNXluBwKHBBQKYCli3BDwNerssQ4RcBAYIABVwgABEgIYBrFXBwK+ChEzK4SLBZobrCAwJRCrEIcYQNBc4RvBLwIUDLIIrBVoSvDWAIhCdQOrV4M0W4q1C1nW5+jqFXq2d0YAB1XP6wABCIQABxLLBDgRABEwICCJAR+BH4UKJYZECgaPBmktMIOCD4NXRwcIlldToQJCOoMtQ4ISBB4KyBwTIBmldRIIAFFoKsCCYMCgMBFgOCwS6CrwZBTIIABq5XCUYRJBdwIACSwZFCJYSsEWgUtNIMtEQQdBAgMQAYOCnSHCTIOz2WyV4NPmd5VgPO5/P1myVwOz1irBDINlZoNenQrBVgNYcIS6CwTpCmiFBI4ZGBNIIQCDYQXBliCBQwQSBQQJ/Clh4BRYIGCAQSdBXIIcBCYSzCXgJsBBQYADFILTCmbIGIYMtDIOsCQJNBSoRRDXYLECaAJlDEoIRCNIIgBwU0PIM0iBrBRoIABE4IuB1nW5/O0dXq6vCVwPW62rB4IABDYLIDEISSBE4IGBlrqCJYIEBH4NXVoRGCSYUzq4XBBQMzQwauBAAMIrszrqRGV4gUBgWBDoKWCYIIsBAYUICYTZCAYTbBBoJMBXo53BAQIaCmb4BWoJnBAYITCA4LGCEYIFBxGrA4MDZQJ9BhQBBhQTBnTTCSYOJ1my5+k0d5mdQzvO1fQBYKlBCAOJxOIsg/BdoQGBTYTQBwUJgYABIoNYegQACCAQcBK4UtwSGCXASvFQ4KwBq6vHTATCDNQSvCloABBAIaDEYQpElhYBrDRDTQo0EYYL4BXAKsDAAUJwQgBMgJ5CQITwBOwaxCmgQBmgUBPQICC1mkvVQNYNz0eq5/P2Wr2ey1qvDsoVBmk0iAhBTgQDBGAKvCWA4SDwKIDNgMtmiyBQoaGFTwJwHYQ4QBRgQDBmdYryeEV5CcBFIcsdoJCBDoIaBIAjXBJgYAEmaUBVgZuBlqtBaISsBBQMKhSHCSAKPBDQNkTIPW5+jvNQq2j53P63WBgOzAQLECAAOCDwSyDcYOCmalBmdeLgQ3BLwIyBYgRvBLAjBCKISSEliHCCoKXBB4h/ChAQDhFdC4KXCDoLDHY40sIIQ1CAAMJq7JDYwtdCYYAENgLOBEIKBBrAMDBAMJBgKoCCAQCBnQHBTISfB6HO0dWll50fPVQWJCAQcCwQFBEgLTCbAMKrBIBGQQKBHYJdBC4KuCLIKVGOQJuDSAIGBEQKfDY4WCBwQdCUYQRDTAMtFIwAEmUsFwKvEDoNXEYlXro/DYopFBCYQUBCAUIq9YKIWs1dXlo9BNYKvBaoR2BVAOsTIUQV4Ws2Wy6HPvNXAAN5V4Oy1mtWQNfsicBnQYBTAIyBFgUKEYKvBH4OIfoQ3BXYLMBIwIKCAAQGCGYIIDCwLYClpyEE4NXlmCCoIA="
+    )
+  ),
+};
+
+function draw() {
+  g.drawImage(mandlebrotBmp);
+  // work out how to display the current time
+  const d = new Date();
+  const h = d.getHours(),
+    m = d.getMinutes();
+  const time = h + ":" + ("0" + m).substr(-2);
+
+  // Reset the state of the graphics library
+  g.reset();
+  g.setColor(1, 1, 1);
+  g.setFont("Vector", 30);
+  g.drawString(time, 70, 68, false);
+}
+
+g.clear();
+
+// draw immediately at first
+draw();
+var secondInterval = setInterval(draw, 1000);
diff --git a/apps/mandlebrotclock/mandlebrotclock.png b/apps/mandlebrotclock/mandlebrotclock.png
new file mode 100644
index 000000000..19601fe2e
Binary files /dev/null and b/apps/mandlebrotclock/mandlebrotclock.png differ
diff --git a/apps/mandlebrotclock/screenshot_mandlebrotclock.png b/apps/mandlebrotclock/screenshot_mandlebrotclock.png
new file mode 100644
index 000000000..542cff324
Binary files /dev/null and b/apps/mandlebrotclock/screenshot_mandlebrotclock.png differ
diff --git a/apps/marioclock/bangle1-mario-clock-screenshot.png b/apps/marioclock/bangle1-mario-clock-screenshot.png
new file mode 100644
index 000000000..ae2dc7800
Binary files /dev/null and b/apps/marioclock/bangle1-mario-clock-screenshot.png differ
diff --git a/apps/matrixclock/ChangeLog b/apps/matrixclock/ChangeLog
new file mode 100644
index 000000000..7cc9144b1
--- /dev/null
+++ b/apps/matrixclock/ChangeLog
@@ -0,0 +1,2 @@
+0.01: Initial Release
+0.02: Support for Bangle 2
diff --git a/apps/matrixclock/README.md b/apps/matrixclock/README.md
new file mode 100644
index 000000000..010524b60
--- /dev/null
+++ b/apps/matrixclock/README.md
@@ -0,0 +1,11 @@
+# Matrix Clock
+
+![](app.png)
+
+## Requests
+
+Please reach out to adrian@adriankirk.com if you have feature requests or notice bugs.
+
+## Creator
+
+Made by [Adrian Kirk](mailto:adrian@adriankirk.com)
diff --git a/apps/matrixclock/app.png b/apps/matrixclock/app.png
new file mode 100644
index 000000000..bc135c3ee
Binary files /dev/null and b/apps/matrixclock/app.png differ
diff --git a/apps/matrixclock/matrixclock-icon.js b/apps/matrixclock/matrixclock-icon.js
new file mode 100644
index 000000000..5d5e9cd67
--- /dev/null
+++ b/apps/matrixclock/matrixclock-icon.js
@@ -0,0 +1 @@
+require("heatshrink").decompress(atob("lEowkBBpNgEKV3Bhd2CZEGFZAgGAwUHuEGuAMIs4JFCYIBBBItmFRA7BCY4+Gs5MDCbZ3CHwQTNJgwTPB4h3LHYQTQG44Tfd4zsCCZJ3GBwQTMCwYTEgwTSbBVnCYZPDdhZSICbo7EMZbbGRZivDT54AJHIITHdYoAGBgxjCHYYnEO5QyGJpgMDbZgTLHpITJT50GOQKfTCaoMRRdITRPQQAJBgZyRC4oAFA"))
diff --git a/apps/matrixclock/matrixclock.js b/apps/matrixclock/matrixclock.js
new file mode 100644
index 000000000..ab18c13b8
--- /dev/null
+++ b/apps/matrixclock/matrixclock.js
@@ -0,0 +1,258 @@
+/**
+ * Adrian Kirk 2021-10
+ *
+ * Matrix Clock
+ *
+ * A simple clock inspired by the movie. 
+ * Text shards move down the screen as a background to the 
+ * time and date
+ **/
+const Locale = require('locale');
+
+const SHARD_COLOR =[0,1.0,0];
+const SHARD_FONT_SIZE = 12;
+const SHARD_Y_START = 30;
+const w = g.getWidth();
+
+/**
+* The text shard object is responsible for creating the 
+* shards of text that move down the screen. As the 
+* shard moves down the screen the latest character added
+* is brightest with characters being coloured darker and darker
+* going back to the eldest
+*/
+class TextShard {
+
+  constructor(x,y,length){
+    // The x and y coords of the first character of the shard
+    this.x = x;
+    this.y = y;
+    // The visible length of the shard. We don't make the
+    // whole chain visible just to save on cpu time
+    this.length = length;
+    // the list of characters making up this shard
+    this.txt = [];
+  }
+  /**
+  * The add method call adds another random character to 
+  * the chain
+  */
+  add(){
+    this.txt.push(randomChar());
+  }
+  /**
+  * The show method displays the latest shard image to the 
+  * screen with the following rules:
+  * - latest addition is brightest, oldest is darker
+  * - display up to defined length of characters only 
+  * of the shard to save cpu
+  */
+  show(){
+    g.setFontAlign(-1,-1,0);
+    for(var i=0; i this.length - 2){
+        color_strength = 0;
+      } 
+      g.setColor(color_strength*SHARD_COLOR[0],
+                 color_strength*SHARD_COLOR[1],
+                 color_strength*SHARD_COLOR[2]);
+      g.setFont("Vector",SHARD_FONT_SIZE);
+      g.drawString(this.txt[idx], this.x, this.y + idx*SHARD_FONT_SIZE); 
+    }
+  }
+  /**
+  * Method tests to see if any part of the shard chain is still 
+  * visible on the screen
+  */
+  isVisible(){
+     return (this.y + (this.txt.length - this.length - 2)*SHARD_FONT_SIZE < g.getHeight());
+  }
+  /**
+  * resets the shard back to the top of the screen
+  */
+  reset(){
+    this.y = SHARD_Y_START;
+    this.txt = [];
+  }
+}
+
+/**
+* random character chooser to be called by the shard when adding characters
+*/
+const CHAR_CODE_START = 33;
+const CHAR_CODE_LAST = 126;
+const CHAR_CODE_LENGTH = CHAR_CODE_LAST - CHAR_CODE_START;
+function randomChar(){
+  return String.fromCharCode(Math.floor(Math.random() * CHAR_CODE_LENGTH)+ CHAR_CODE_START);
+}
+
+// Now set up the shards
+// we are going to have a limited no of shards (to save cpu)
+// but randomize the x value and length every reset to make it look as if there 
+// are more
+var shards = [];
+const NO_SHARDS = 3;
+const channel_width = g.getWidth()/NO_SHARDS;
+
+function shard_x(i){
+  return i*channel_width + Math.random() * channel_width;
+}
+
+function shard_length(){
+  return Math.floor(Math.random()*5) + 3;
+}
+
+for(var i=0; i RESET_PROBABILITY){
+      shards[i].reset();
+      shards[i].length = shard_length();
+      shards[i].x = shard_x(i);
+      if(shards[i].x > DATE_X_COORD - 20){
+        shards[i].y = 50;
+      }
+    }
+    // If its still visble then add to the shard and show to screen
+    if(visible){
+      shards[i].add();
+    }
+    // we still have to show the shard even though it may be off the screen to keep the speed constant
+    shards[i].show();
+  }
+  var now = new Date();
+  // draw time. Have to draw time on every loop
+
+  g.setFont("Vector", g.getWidth() / 5);
+  g.setFontAlign(0,-1);
+  if(last_draw_time == null || now.getMinutes() != last_draw_time.getMinutes()){
+    g.setColor(g.theme.fg);
+    g.drawString(timeStr, w/2, TIME_Y_COORD);
+    timeStr = format_time(now);
+  }
+  g.setColor(SHARD_COLOR[0], SHARD_COLOR[1], SHARD_COLOR[2]);
+  g.drawString(timeStr, w/2, TIME_Y_COORD); 
+  //
+  // draw date when it changes
+  g.setFont("Vector",15);
+  g.setFontAlign(0,-1,0);
+  if(last_draw_time == null || now.getDate() != last_draw_time.getDate()){
+    g.setColor(g.theme.fg);
+    g.drawString(dateStr, w/2, DATE_Y_COORD);
+    dateStr = format_date(now);
+    g.setColor(SHARD_COLOR[0], SHARD_COLOR[1], SHARD_COLOR[2]);
+    g.drawString(dateStr, w/2, DATE_Y_COORD); 
+  }
+  last_draw_time = now;
+}
+
+function format_date(now){
+  return Locale.dow(now,1) + " " + format00(now.getDate());
+}
+
+
+function format_time(now){
+  var time = new Date(now.getTime());
+  var hours = time.getHours() % 12;
+  if(hours < 1){
+    hours = 12;
+  }
+  var am_pm;
+  if(time.getHours() < 12){
+    am_pm = "AM"; 
+  } else {
+    am_pm = "PM";
+  }
+  return format00(hours) + ":" + format00(time.getMinutes()) + " "+ am_pm;
+}
+
+function format00(num){
+    var value = (num | 0);
+    if(value > 99 || value < 0)
+        throw "must be between in range 0-99";
+    if(value < 10)
+        return "0" + value.toString();
+    else
+        return value.toString();
+}
+
+// The interval reference for updating the clock
+let intervalRef = null;
+
+function clearTimers(){
+  if(intervalRef != null) {
+    clearInterval(intervalRef);
+    intervalRef = null;
+  }
+}
+
+function shouldRedraw(){
+  return Bangle.isLCDOn();
+}
+
+function startTimers(){
+  clearTimers();
+  if (Bangle.isLCDOn()) {
+    intervalRef = setInterval(() => {
+        if (!shouldRedraw()) {
+          //console.log("draw clock callback - skipped redraw");
+        } else {
+          draw_clock();
+        }
+      }, 100
+    );
+    draw_clock();
+  } else {
+    console.log("scheduleDrawClock - skipped not visible");
+  }
+}
+
+
+Bangle.on('lcdPower', (on) => {
+  if (on) {
+    //console.log("lcdPower: on");
+    startTimers();
+  } else {
+    //console.log("lcdPower: off");
+    clearTimers();
+  }
+});
+
+Bangle.on('faceUp',function(up){
+  //console.log("faceUp: " + up + " LCD: " + Bangle.isLCDOn());
+  if (up && !Bangle.isLCDOn()) {
+    //console.log("faceUp and LCD off");
+    clearTimers();
+    Bangle.setLCDPower(true);
+  }
+});
+
+g.clear();
+Bangle.loadWidgets();
+Bangle.drawWidgets();
+
+startTimers();
+Bangle.setUI("clock");
+
+
diff --git a/apps/matrixclock/matrixclock.png b/apps/matrixclock/matrixclock.png
new file mode 100644
index 000000000..634253674
Binary files /dev/null and b/apps/matrixclock/matrixclock.png differ
diff --git a/apps/matrixclock/screenshot_matrix.png b/apps/matrixclock/screenshot_matrix.png
new file mode 100644
index 000000000..3d843848c
Binary files /dev/null and b/apps/matrixclock/screenshot_matrix.png differ
diff --git a/apps/mclock/bangle1-morphing-clock-screenshot.png b/apps/mclock/bangle1-morphing-clock-screenshot.png
new file mode 100644
index 000000000..e8a6decaa
Binary files /dev/null and b/apps/mclock/bangle1-morphing-clock-screenshot.png differ
diff --git a/apps/menusmall/ChangeLog b/apps/menusmall/ChangeLog
new file mode 100644
index 000000000..6de3d41f4
--- /dev/null
+++ b/apps/menusmall/ChangeLog
@@ -0,0 +1,2 @@
+0.01: New App!
+0.02: add `wrap` option, use Bangle.appRect
\ No newline at end of file
diff --git a/apps/menusmall/app.png b/apps/menusmall/app.png
new file mode 100644
index 000000000..094ee447c
Binary files /dev/null and b/apps/menusmall/app.png differ
diff --git a/apps/menusmall/boot.js b/apps/menusmall/boot.js
new file mode 100644
index 000000000..43c66089f
--- /dev/null
+++ b/apps/menusmall/boot.js
@@ -0,0 +1,114 @@
+"";//not entirely sure why we need this - related to how bootupdate adds these to .boot0
+E.showMenu = function(items) {
+  g.clearRect(Bangle.appRect); // clear screen if no menu supplied
+  if (!items) {
+    Bangle.setUI();
+    return;
+  }
+
+  var menuItems = Object.keys(items);
+  var options = items[""];
+  if (options) menuItems.splice(menuItems.indexOf(""),1);
+  if (!(options instanceof Object)) options = {};
+  options.fontHeight = options.fontHeight|14;
+  if (options.selected === undefined)
+    options.selected = 0;
+  var ar = Bangle.appRect;
+  var x = ar.x;
+  var x2 = ar.x2;
+  var y = ar.y;
+  var y2 = ar.y2 - 11; // padding at end for arrow
+  if (options.title)
+    y += 15;
+  var loc = require("locale");
+  var l = {
+    lastIdx : 0,
+    draw : function(rowmin,rowmax) {
+      var rows = 0|Math.min((y2-y) / options.fontHeight,menuItems.length);
+      var idx = E.clip(options.selected-(rows>>1),0,menuItems.length-rows);
+      if (idx!=l.lastIdx) rowmin=undefined; // redraw all if we scrolled
+      l.lastIdx = idx;
+      var iy = y;
+      g.reset().setFontAlign(0,-1,0);
+      g.setFontCustom(atob("AAAAAAAAAA/mAAAkAHAAAAEgA4AAAAAQATwDwDzwDwDyACAAAAOICIgREH/wRECIgI4AAAYGEhAkwDJgGSBCQwMAAAA8DoQiCEYQcyABgB6AAAkAHAAAAAfAMGCAIgAgAAgAiAIMGAfAAAAkADAB+ADAAkAAAAIABAAIAP4AIABAAIAAAABIAOAAABAAIABAAIABAAAAAGAAwAAAAQAMAGADABgAwAAAAP4CAghiEYQQEB/AAABAAQAEAA/+AAAQOEGQhCEQQcCAAAQEEAQhCEIQe8AAAAwAaAEQDCA/+ACAAAHwgiCEQQiCEPgAAD/giCEQQiCCPgAAEAAgeEMAmAHAAAAD3ghCEIQhCD3gAADwghCEIQhCD/gAABhgMMAAAMKBhgAAAIACgAiAIICAgAAAiAEQAiAEQAiAEQAAAQEBBAEQAUABAAAAQAEAAgmEIAiADgAAAD/ggCEcQkSEiQfwAAAH+DEAggDEAH+AAA/+EIQhCEIQe8AAAf8EAQgCEAQQEAAA/+EAQgCCAgP4AAA/+EIQhCEIQgCAAA/+EQAiAEQAgAAAAf8EAQgCEIQR8AAA/+AIABAAIA/+AAAgCH/wgCAAAgMEAQgCEAQ/8AAA/+AIACgBjAwGAAA/+AAQACAAQACAAA/+DAAGADAA/+AAA/+DAAGAAMA/+AAAf8EAQgCEAQf8AAA/+EIAhAEIAeAAAAf8EAQgKEAgf6AAA/+EIAhAEOAeOAAAcEEQQhCEEQQcAAAgAEAA/+EAAgAAAA/8AAQACAAQ/8AAA+AAPAAGAPA+AAAA/4AAwAYAMAAYAAw/4AAAwOBmADABmAwOAAA4AAwAB+AwA4AAAAgGEDQjiFgQwCAAA//EAIgBAAAwABgADAAGAAMAAQAAEAIgBH/4AAAgAYAEAAYAAgAAAAAQACAAQACAAQACAAAAAEAAQAAAACcAkQEiAkgD+AAA/+AQgECAgQD8AAAD8AgQECAgQCEAAAD8AgQECAQg/+AAAD8AkQEiAkQDkAAAEAD/wkAEgAkAAAADrAikEUgikHkggYAAH/wCAAgAEAAfwAAAAQECE/wACAAQAAAAIAAgAEEAk/4AAH/wAQAGADIAgwAAAAQgCH/wACAAQAAA/wEAA/wEAAfwAAA/wCAAgAEAAfwAAAfgECAgQECAfgAAA/8CEAgQECAfgAAAfgECAgQCEA/8AAA/wCAAgAEAAQAAAAYgEiAkQESARgAAAgA/8AgQECAgQAAA/gACAAQAEA/wAAA4AA4AAwA4A4AAAA/AAGAHAAGA/AAAAwwBIAGABIAwwAAA8GAbAAgAYA8AAAAgwEKAmQFCAwQAADk4jYkAEAAH/wAAEAEjYjk4AAAIACAAQABAAEAAgAIAAAA/wYgEEAYhg/yAAQAAAQH/4BBAQIABAAIAAC6AIgCCAQQCCAIgC6AAAH/4ABCAIgBAAIAADggiCEIQgiCDgAADYwkhESIhJDGwAADggiCEIQgiCDgAADggiCUIagiiDgAAEAAgAH/wgAEAAAAAgwEKCmQlCAwQAAAgwkKCmQlCAwQAAAgwEKCmQFCAwQAADAAkAEgAYAAAACcAkUEjQkiD+AAAAiEIQ/+AgQICAAAQAEAAAAAAIQBD/4QBEAIAAAYgUiEkQUSARgAAEAAQAEAAAAAYgkiCkQkSARgAAAYgEiQkaESgRgAAAQAf+AQICBFQIwAAAAEGAhQUyEoQGCAAAEGEhQUyEoQGCAAAEGAhQUyAoQGCAAA/+EIAhAEOAeOAAAH+DEAggDEAH+AAAH+DEAggDEAH+AAAH+DEAggDEAH+AAAH+DEAggDEAH+AAA/+AAQACAAQACAAAf8EAQgCEAQQEAAAf8EASgDUAUQEAAAf8EAQgCEAQQEAAA/+EIQhCEIQgCAAA/+EIUhDUISgCAAA/+EIQhCEIQgCAAA/+EIQhCEIQgCAAAgCH/wgCAAAgCH/wgCAAA/+EAQgCCAgP4AAA/+EIQhCCAgP4AAA/+DAAGAAMA/+AAA/+DAAGAAMA/+AAAf8EAQgCEAQf8AAAf8EAQgCEAQf8AAAf8EAQgCEAQf8AAAf8EAQgCEAQf8AAA/+EIAhAEOAeOAAAf+AAIgBAAIf+AAA/8AAQACAAQ/8AAA/8AAQACAAQ/8AAA/8AAQACAAQ/8AAA4AAwAB+AwA4AAAAgAEAC//kAAgAAAAf+EAAiCEQQdCAHgAAA/wCACgAkAAQAAAATgEiCkQkkAfwAAATgUiEkQUkAfwAAATgkiCkQkkAfwAAATgUiAkQUkAfwAAAAQgCH/wACAAQAAAfgECCgQkCAQgAAAfgECAgcECQQgAAAfgkCCgQkCAQgAAAfgEiCkQkiAcgAAAfgEiAkcEiQcgAAAfgUiAkQUiAcgAAAfgkiCkQkiAcgAAAAQECC/wgCAAQAAAAQUCE/wQCAAQAAAfwEBAgICCD/4gAAAAD8AgQECCQg/+CAAAAA/wCACgAkAAfwAAA/wiACgAkAAfwAAAfgECCgQkCAfgAAAfgUCEgQUCAfgAAAfgUCEgQUCEfgAAAfgUCAgQUCAfgAAA/wiACgAkAAQAAAAfwQBFAIQCAf4AAA/gACCAQgEA/wAAA/gQCEAQQEE/wAAA/gQCAAQQEA/wAAA8GAbCAggYA8AAAAgA/8AgSEDggQAAA"), 32, atob("AwIGCAgICAMFBQYIAwYDBwcFBgYHBgYGBgYDAwYHBgcHBgYGBgYGBgYEBgYGBgYGBgYGBgYGBggGBgYEBwQGBwQGBgYGBgYHBgYGBgYGBgYGBgYGBgYGBgYGBgQCBAgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABwAHCAYGBgAGBgYGAAYGBQYABgMGBgQABgYHBgAGBgYGBgYGBgYGBgYGBgYEBAYGBgYGBgYGAAYGBgYGBgYHBgYGBgYGBgYGBgYGBgYGBwcGBgYGBgYABgYGBgYGBg=="), 15);
+
+      if (rowmin===undefined && options.title)
+        g.drawString(options.title,(x+x2)/2,y-14).drawLine(x,y-2,x2,y-2).
+          setColor(g.theme.fg).setBgColor(g.theme.bg);
+      iy += 12;
+      g.setColor((idx>0)?g.theme.fg:g.theme.bg).fillPoly([72,iy,104,iy,88,iy-12]);
+      if (rowmin!==undefined) {
+        if (idxrowmax) {
+          rows = 1+rowmax-rowmin;
+        }
+      }
+      while (rows--) {
+        var name = menuItems[idx];
+        var item = items[name];
+        var hl = (idx==options.selected && !l.selectEdit);
+        g.setColor(hl ? g.theme.bgH : g.theme.bg);
+        g.fillRect(x,iy,x2,iy+options.fontHeight-1);
+        g.setColor(hl ? g.theme.fgH : g.theme.fg);
+        g.setFontAlign(-1,-1);
+        g.drawString(loc.translate(name),x+1,iy+1);
+        if ("object" == typeof item) {
+          var xo = x2;
+          var v = item.value;
+          if (item.format) v=item.format(v);
+          v = loc.translate(""+v);
+          if (l.selectEdit && idx==options.selected) {
+            xo -= 24 + 1;
+            g.setColor(g.theme.bgH).fillRect(xo-(g.stringWidth(v)+4),iy,x2,iy+options.fontHeight-1);
+            g.setColor(g.theme.fgH).drawImage("\x0c\x05\x81\x00 \x07\x00\xF9\xF0\x0E\x00@",xo,iy+(options.fontHeight-10)/2,{scale:2});
+          }
+          g.setFontAlign(1,-1);
+          g.drawString(v,xo-2,iy+1);
+        }
+        g.setColor(g.theme.fg);
+        iy += options.fontHeight;
+        idx++;
+      }
+      g.setFontAlign(-1,-1);
+      g.setColor((idxitem.max) item.value = item.wrap ? item.min : item.max;
+        if (item.onchange) item.onchange(item.value);
+        l.draw(options.selected,options.selected);
+      } else {
+        var a=options.selected;
+        options.selected = (dir+options.selected+menuItems.length)%menuItems.length;
+        l.draw(Math.min(a,options.selected), Math.max(a,options.selected));
+      }
+    }
+  };
+  l.draw();
+  Bangle.setUI("updown",dir => {
+    if (dir) l.move(dir);
+    else l.select();
+  });
+  return l;
+};
diff --git a/apps/messages/ChangeLog b/apps/messages/ChangeLog
new file mode 100644
index 000000000..87094a091
--- /dev/null
+++ b/apps/messages/ChangeLog
@@ -0,0 +1,10 @@
+0.01: New App!
+0.02: Add 'messages' library
+0.03: Fixes for Bangle.js 1
+0.04: Add require("messages").clearAll()
+0.05: Handling of message actions (ok/clear)
+0.06: New messages now go at the start (fix #898)
+      Answering true/false now exits the messages app if no new messages
+      Back now marks a message as read
+      Clicking top-left opens a menu which allows you to delete a message or mark unread
+0.07: Added settings menu with option to choose vibrate pattern and frequency (fix #909)
diff --git a/apps/messages/README.md b/apps/messages/README.md
new file mode 100644
index 000000000..c243ec06a
--- /dev/null
+++ b/apps/messages/README.md
@@ -0,0 +1,21 @@
+# Messages app
+
+**THIS APP IS CURRENTLY BETA**
+
+This app handles the display of messages and message notifications. It stores
+a list of currently received messages and allows them to be listed, viewed,
+and responded to.
+
+It is a replacement for the old `notify`/`gadgetbridge` apps.
+
+## Usage
+
+...
+
+## Requests
+
+Please file any issues on https://github.com/espruino/BangleApps/issues/new?title=messages%20app
+
+## Creator
+
+Gordon Williams
diff --git a/apps/messages/app-icon.js b/apps/messages/app-icon.js
new file mode 100644
index 000000000..6ed3c1141
--- /dev/null
+++ b/apps/messages/app-icon.js
@@ -0,0 +1 @@
+require("heatshrink").decompress(atob("mEw4UA///rkcAYP9ohL/ABMBqoAEoALDioLFqgLDBQoABERIkEBZcFBY9QBed61QAC1oLF7wLD24LF24LD7wLF1vqBQOrvQLFA4IuC9QLFD4IuC1QLGGAQOBBYwgBEwQLHvQBBEZHVq4jI7wWBHY5TLNZaDLTZazLffMBBY9ABZsABY4KCgEVBQtUBYYkGEQYA/AAwA="))
diff --git a/apps/messages/app.js b/apps/messages/app.js
new file mode 100644
index 000000000..cb2b5c2cd
--- /dev/null
+++ b/apps/messages/app.js
@@ -0,0 +1,294 @@
+/* MESSAGES is a list of:
+  {id:int,
+    src,
+    title,
+    subject,
+    body,
+    sender,
+    tel:string,
+    new:true // not read yet
+  }
+*/
+
+/* For example for maps:
+
+// a message
+{"t":"add","id":1575479849,"src":"Hangouts","title":"A Name","body":"message contents"}
+// maps
+{"t":"add","id":1,"src":"Maps","title":"0 yd - High St","body":"Campton - 11:48 ETA","img":"GhqBAAAMAAAHgAAD8AAB/gAA/8AAf/gAP/8AH//gD/98B//Pg/4B8f8Afv+PP//n3/f5//j+f/wfn/4D5/8Aef+AD//AAf/gAD/wAAf4AAD8AAAeAAADAAA="}
+// call
+{"t":"add","id":"call","src":"Phone","name":"Bob","number":"12421312",positive:true,negative:true}
+*/
+
+var Layout = require("Layout");
+var fontMedium = g.getFonts().includes("6x15")?"6x15":"6x8:2";
+var fontBig = g.getFonts().includes("12x20")?"12x20":"6x8:2";
+var fontLarge = g.getFonts().includes("6x15")?"6x15:2":"6x8:4";
+var colBg = g.theme.dark ? "#141":"#4f4";
+var colSBg1 = g.theme.dark ? "#121":"#cFc";
+var colSBg2 = g.theme.dark ? "#242":"#9F9";
+// hack for 2v10 firmware's lack of ':size' font handling
+try {
+  g.setFont("6x8:2");
+} catch (e) {
+  g._setFont = g.setFont;
+  g.setFont = function(f,s) {
+    if (f.includes(":")) {
+      f = f.split(":");
+      return g._setFont(f[0],f[1]);
+    }
+    return g._setFont(f,s);
+  };
+}
+
+
+var MESSAGES = require("Storage").readJSON("messages.json",1)||[];
+if (!Array.isArray(MESSAGES)) MESSAGES=[];
+var onMessagesModified = function(msg) {
+  // TODO: if new, show this new one
+  if (msg.new) {
+    if (WIDGETS["messages"]) WIDGETS["messages"].buzz();
+    else Bangle.buzz();
+  }
+  showMessage(msg.id);
+};
+function saveMessages() {
+  require("Storage").writeJSON("messages.json",MESSAGES)
+}
+
+function getBackImage() {
+  return atob("FhYBAAAAEAAAwAAHAAA//wH//wf//g///BwB+DAB4EAHwAAPAAA8AADwAAPAAB4AAHgAB+AH/wA/+AD/wAH8AA==");
+}
+function getPosImage() {
+  return atob("GRSBAAAAAYAAAcAAAeAAAfAAAfAAAfAAAfAAAfAAAfBgAfA4AfAeAfAPgfAD4fAA+fAAP/AAD/AAA/AAAPAAADAAAA==");
+}
+function getNegImage() {
+  return atob("FhaBADAAMeAB78AP/4B/fwP4/h/B/P4D//AH/4AP/AAf4AB/gAP/AB/+AP/8B/P4P4fx/A/v4B//AD94AHjAAMA=");
+}
+function getMessageImage(msg) {
+  if (msg.img) return atob(msg.img);
+  var s = (msg.src||"").toLowerCase();
+  if (s=="Phone") return atob("FxeBABgAAPgAAfAAB/AAD+AAH+AAP8AAP4AAfgAA/AAA+AAA+AAA+AAB+AAB+AAB+OAB//AB//gB//gA//AA/8AAf4AAPAA=");
+  if (s=="skype") return atob("GhoBB8AAB//AA//+Af//wH//+D///w/8D+P8Afz/DD8/j4/H4fP5/A/+f4B/n/gP5//B+fj8fj4/H8+DB/PwA/x/A/8P///B///gP//4B//8AD/+AAA+AA==");
+  if (s=="hangouts") return atob("FBaBAAH4AH/gD/8B//g//8P//H5n58Y+fGPnxj5+d+fmfj//4//8H//B//gH/4A/8AA+AAHAABgAAAA=");
+  if (s=="whatsapp") return atob("GBiBAAB+AAP/wAf/4A//8B//+D///H9//n5//nw//vw///x///5///4///8e//+EP3/APn/wPn/+/j///H//+H//8H//4H//wMB+AA==");
+  if (s=="telegram") return atob("GBiBAAAAAAAAAAAAAAAAAwAAHwAA/wAD/wAf3gD/Pgf+fh/4/v/z/P/H/D8P/Acf/AM//AF/+AF/+AH/+ADz+ADh+ADAcAAAMAAAAA==");
+  if (s=="twitter") return atob("GhYBAABgAAB+JgA/8cAf/ngH/5+B/8P8f+D///h///4f//+D///g///wD//8B//+AP//gD//wAP/8AB/+AB/+AH//AAf/AAAYAAA");
+  if (msg.id=="music") return atob("FhaBAH//+/////////////h/+AH/4Af/gB/+H3/7/f/v9/+/3/7+f/vB/w8H+Dwf4PD/x/////////////3//+A=");
+  if (msg.id=="back") return getBackImage();
+  return atob("HBKBAD///8H///iP//8cf//j4//8f5//j/x/8//j/H//H4//4PB//EYj/44HH/Hw+P4//8fH//44///xH///g////A==");
+}
+
+
+function showMapMessage(msg) {
+  var m;
+  var distance, street, target, eta;
+  m=msg.title.match(/(.*) - (.*)/);
+  if (m) {
+    distance = m[1];
+    street = m[2];
+  } else street=msg.title;
+  m=msg.body.match(/(.*) - (.*)/);
+  if (m) {
+    target = m[1];
+    eta = m[2];
+  } else target=msg.body;
+  layout = new Layout({ type:"v", c: [
+    {type:"txt", font:fontMedium, label:target, bgCol:colBg, fillx:1, pad:2 },
+    {type:"h", bgCol:colBg, fillx:1, c: [
+      {type:"txt", font:"6x8", label:"Towards" },
+      {type:"txt", font:fontLarge, label:street }
+    ]},
+    {type:"h",fillx:1, filly:1, c: [
+      msg.img?{type:"img",src:atob(msg.img), scale:2}:{},
+      {type:"v", fillx:1, c: [
+        {type:"txt", font:fontLarge, label:distance||"" }
+      ]},
+    ]},
+    {type:"txt", font:"6x8:2", label:eta }
+  ]});
+  g.clearRect(Bangle.appRect);
+  layout.render();
+  Bangle.setUI("updown",function() {
+    // any input to mark as not new and return to menu
+    msg.new = false;
+    saveMessages();
+    layout = undefined;
+    checkMessages({clockIfNoMsg:1,clockIfAllRead:1,showMsgIfUnread:1});
+  });
+}
+
+function showMusicMessage(msg) {
+  function fmtTime(s) {
+    var m = Math.floor(s/60);
+    s = (s%60).toString().padStart(2,0);
+    return m+":"+s;
+  }
+
+  function back() {
+    msg.new = false;
+    saveMessages();
+    layout = undefined;
+    checkMessages({clockIfNoMsg:1,clockIfAllRead:1,showMsgIfUnread:1});
+  }
+  layout = new Layout({ type:"v", c: [
+    {type:"h", fillx:1, bgCol:colBg,  c: [
+      { type:"btn", src:getBackImage, cb:back },
+      { type:"v", fillx:1, c: [
+        { type:"txt", font:fontLarge, label:msg.artist, pad:2 },
+        { type:"txt", font:fontMedium, label:msg.album, pad:2 }
+      ]}
+    ]},
+    {type:"txt", font:fontLarge, label:msg.track, fillx:1, filly:1, pad:2 },
+    Bangle.musicControl?{type:"h",fillx:1, c: [
+      {type:"btn", pad:8, label:"\0"+atob("FhgBwAADwAAPwAA/wAD/gAP/gA//gD//gP//g///j///P//////////P//4//+D//gP/4A/+AD/gAP8AA/AADwAAMAAA"), cb:()=>Bangle.musicControl("play")}, // play
+      {type:"btn", pad:8, label:"\0"+atob("EhaBAHgHvwP/wP/wP/wP/wP/wP/wP/wP/wP/wP/wP/wP/wP/wP/wP/wP/wP/wP/wP/wP3gHg"), cb:()=>Bangle.musicControl("pause")}, // pause
+      {type:"btn", pad:8, label:"\0"+atob("EhKBAMAB+AB/gB/wB/8B/+B//B//x//5//5//x//B/+B/8B/wB/gB+AB8ABw"), cb:()=>Bangle.musicControl("next")}, // next
+    ]}:{},
+    {type:"txt", font:"6x8:2", label:msg.dur?fmtTime(msg.dur):"--:--" }
+  ]});
+  g.clearRect(Bangle.appRect);
+  layout.render();
+}
+
+function showMessageSettings(msg) {
+  E.showMenu({"":{"title":"Message"},
+    "< Back" : () => showMessage(msg.id),
+    "Delete" : () => {
+      MESSAGES = MESSAGES.filter(m=>m.id!=msg.id);
+      saveMessages();
+      checkMessages({clockIfNoMsg:0,clockIfAllRead:0,showMsgIfUnread:0});
+    },
+    "Mark Unread" : () => {
+      msg.new = true;
+      saveMessages();
+      checkMessages({clockIfNoMsg:0,clockIfAllRead:0,showMsgIfUnread:0});
+    },
+  });
+}
+
+function showMessage(msgid) {
+  var msg = MESSAGES.find(m=>m.id==msgid);
+  if (!msg) return checkMessages(); // go home if no message found
+  if (msg.src=="Maps") return showMapMessage(msg);
+  if (msg.id=="music") return showMusicMessage(msg);
+  // Normal text message display
+  var title=msg.title, titleFont = fontLarge;
+  if (title) {
+    var w = g.getWidth()-40;
+    if (g.setFont(titleFont).stringWidth(title) > w)
+      titleFont = fontMedium;
+    if (g.setFont(titleFont).stringWidth(title) > w)
+      title = g.wrapString(title, w).join("\n");
+  }
+  var buttons = [
+    {type:"btn", src:getBackImage(), cb:()=>{
+      msg.new = false; // read mail
+      saveMessages();
+      checkMessages({clockIfNoMsg:1,clockIfAllRead:0,showMsgIfUnread:1});
+    }} // back
+  ];
+  if (msg.positive) {
+    buttons.push({type:"btn", src:getPosImage(), cb:()=>{
+      msg.new = false; saveMessages();
+      Bangle.messageResponse(msg,true);
+      checkMessages({clockIfNoMsg:1,clockIfAllRead:1,showMsgIfUnread:1});
+    }});
+  }
+  if (msg.negative) {
+    buttons.push({type:"btn", src:getNegImage(), cb:()=>{
+      console.log("Response");
+      msg.new = false; saveMessages();
+      Bangle.messageResponse(msg,false);
+      checkMessages({clockIfNoMsg:1,clockIfAllRead:1,showMsgIfUnread:1});
+    }});
+  }
+  layout = new Layout({ type:"v", c: [
+    {type:"h", fillx:1, bgCol:colBg,  c: [
+      { type:"btn", src:getMessageImage(msg), cb:()=>showMessageSettings(msg) },
+      { type:"v", fillx:1, c: [
+        {type:"txt", font:fontMedium, label:msg.src||"Message", bgCol:colBg, fillx:1, pad:2 },
+        title?{type:"txt", font:titleFont, label:title, bgCol:colBg, fillx:1, pad:2 }:{},
+      ]},
+    ]},
+    {type:"txt", font:fontMedium, label:msg.body||"", wrap:true, fillx:1, filly:1, pad:2 },
+    {type:"h",fillx:1, c: buttons}
+  ]});
+  g.clearRect(Bangle.appRect);
+  layout.render();
+}
+
+
+/* options = {
+  clockIfNoMsg : bool
+  clockIfAllRead : bool
+  showMsgIfUnread : bool
+}
+*/
+function checkMessages(options) {
+  options=options||{};
+  // If no messages, just show 'no messages' and return
+  if (!MESSAGES.length) {
+    if (!options.clockIfNoMsg) return E.showPrompt("No Messages",{
+      title:"Messages",
+      img:require("heatshrink").decompress(atob("kkk4UBrkc/4AC/tEqtACQkBqtUDg0VqAIGgoZFDYQIIM1sD1QAD4AIBhnqA4WrmAIBhc6BAWs8AIBhXOBAWz0AIC2YIC5wID1gkB1c6BAYFBEQPqBAYXBEQOqBAnDAIQaEnkAngaEEAPDFgo+IKA5iIOhCGIAFb7RqAIGgtUBA0VqobFgNVA")),
+      buttons : {"Ok":1}
+    }).then(() => { load() });
+    return load();
+  }
+  // we have >0 messages
+  var newMessages = MESSAGES.filter(m=>m.new);
+  // If we have a new message, show it
+  if (options.showMsgIfUnread && newMessages.length)
+    return showMessage(newMessages[0].id);
+  // no new messages - go to clock?
+  if (options.clockIfAllRead && newMessages.length==0)
+    return load();
+
+  // Otherwise show a menu
+  E.showScroller({
+    h : 48,
+    c : Math.max(MESSAGES.length+1,3), // workaround for 2v10.219 firmware (min 3 not needed for 2v11)
+    draw : function(idx, r) {"ram"
+      var msg = MESSAGES[idx-1];
+      if (msg && msg.new) g.setBgColor(colBg);
+      else g.setBgColor((idx&1) ? colSBg1 : colSBg2);
+      g.clearRect(r.x,r.y,r.x+r.w-1,r.y+r.h-1).setColor(g.theme.fg);
+      if (idx==0) msg = {id:"back", title:"< Back"};
+      if (!msg) return;
+      var x = r.x+2, title = msg.title, body = msg.body;
+      var img = getMessageImage(msg);
+      if (msg.id=="music") {
+        title = msg.artist || "Music";
+        body = msg.track;
+      }
+      if (img) {
+        g.drawImage(img, x+24, r.y+24, {rotate:0}); // force centering
+        x += 50;
+      }
+      var m = msg.title+"\n"+msg.body;
+      if (msg.src) g.setFontAlign(1,1).setFont("6x8").drawString(msg.src, r.x+r.w-2, r.y+r.h-2);
+      if (title) g.setFontAlign(-1,-1).setFont(fontBig).drawString(title, x,r.y+2);
+      if (body) {
+        g.setFontAlign(-1,-1).setFont("6x8");
+        var l = g.wrapString(body, r.w-14);
+        if (l.length>3) {
+          l = l.slice(0,3);
+          l[l.length-1]+="...";
+        }
+        g.drawString(l.join("\n"), x+10,r.y+20);
+      }
+    },
+    select : idx => {
+      if (idx==0) load();
+      else showMessage(MESSAGES[idx-1].id);
+    }
+  });
+}
+
+g.clear();
+Bangle.loadWidgets();
+Bangle.drawWidgets();
+setTimeout(() => {
+  checkMessages({clockIfNoMsg:0,clockIfAllRead:0,showMsgIfUnread:1});
+},10); // if checkMessages wants to 'load', do that
diff --git a/apps/messages/app.png b/apps/messages/app.png
new file mode 100644
index 000000000..c9177692e
Binary files /dev/null and b/apps/messages/app.png differ
diff --git a/apps/messages/lib.js b/apps/messages/lib.js
new file mode 100644
index 000000000..3094b34e1
--- /dev/null
+++ b/apps/messages/lib.js
@@ -0,0 +1,55 @@
+exports.pushMessage = function(event) {
+  /* event is:
+    {t:"add",id:int, src,title,subject,body,sender,tel, important:bool} // add new
+    {t:"add",id:int, id:"music", state, artist, track, etc} // add new
+    {t:"remove-",id:int} // remove
+    {t:"modify",id:int, title:string} // modified
+  */
+  var messages, inApp = "undefined"!=typeof MESSAGES;
+  if (inApp)
+    messages = MESSAGES; // we're in an app that has already loaded messages
+  else   // no app - load messages
+    messages = require("Storage").readJSON("messages.json",1)||[];
+  // now modify/delete as appropriate
+  var mIdx = messages.findIndex(m=>m.id==event.id);
+  if (event.t=="remove") {
+    if (mIdx>=0) messages.splice(mIdx, 1); // remove item
+    mIdx=-1;
+  } else { // add/modify
+    if (event.t=="add") event.new=true; // new message
+    if (mIdx<0) {
+      mIdx=0;
+      messages.unshift(event); // add new messages to the beginning
+    }
+    else Object.assign(messages[mIdx], event);
+  }
+  require("Storage").writeJSON("messages.json",messages);
+  // if in app, process immediately
+  if (inApp) return onMessagesModified(mIdx<0 ? {id:event.id} : messages[mIdx]);
+  // ok, saved now - we only care if it's new
+  if (event.t!="add") return;
+  // otherwise load after a delay, to ensure we have all the messages
+  if (exports.messageTimeout) clearTimeout(exports.messageTimeout);
+  exports.messageTimeout = setTimeout(function() {
+    exports.messageTimeout = undefined;
+    // if we're in a clock or it's important, go straight to messages app
+    if (Bangle.CLOCK || event.important) return load("messages.app.js");
+    if (!global.WIDGETS || !WIDGETS.messages) return Bangle.buzz(); // no widgets - just buzz to let someone know
+    WIDGETS.messages.show();
+  }, 500);
+}
+exports.clearAll = function(event) {
+  var messages, inApp = "undefined"!=typeof MESSAGES;
+  if (inApp) {
+    MESSAGES = [];
+    messages = MESSAGES; // we're in an app that has already loaded messages
+  } else   // no app - empty messages
+    messages = [];
+  // Save all messages
+  require("Storage").writeJSON("messages.json",messages);
+  // update app if in app
+  if (inApp) return onMessagesModified();
+  // if we have a widget, update it
+  if (global.WIDGETS && WIDGETS.messages)
+    WIDGETS.messages.hide();
+}
diff --git a/apps/messages/settings.js b/apps/messages/settings.js
new file mode 100644
index 000000000..ef6266cf6
--- /dev/null
+++ b/apps/messages/settings.js
@@ -0,0 +1,35 @@
+(function(back) {
+  function settings() {
+    let settings = require('Storage').readJSON("messages.settings.json", true) || {};
+    if (settings.vibrate===undefined) settings.vibrate=".";
+    if (settings.repeat===undefined) settings.repeat=4;
+    return settings;
+  }
+  function updateSetting(setting, value) {
+    let settings = require('Storage').readJSON("messages.settings.json", true) || {};
+    settings[setting] = value;
+    require('Storage').writeJSON("messages.settings.json", settings);
+  }
+
+  var vibPatterns = ["Off", ".", "-", "--", "-.-", "---"];
+  var currentVib = settings().vibrate;
+  var mainmenu = {
+    "" : { "title" : "Messages" },
+    "< Back" : back,
+    'Vibrate': {
+      value: Math.max(0,vibPatterns.indexOf(settings().vibrate)),
+      min: 0, max: vibPatterns.length,
+      format: v => vibPatterns[v]||"Off",
+      onchange: v => {
+        updateSetting("vibrate", vibPatterns[v]);
+      }
+    },
+    'Repeat': {
+      value: settings().repeat,
+      min: 2, max: 10,
+      format: v => v+"s",
+      onchange: v => updateSetting("repeat", v)
+    },
+  };
+  E.showMenu(mainmenu);
+})
diff --git a/apps/messages/widget.js b/apps/messages/widget.js
new file mode 100644
index 000000000..3a22b40fd
--- /dev/null
+++ b/apps/messages/widget.js
@@ -0,0 +1,36 @@
+
+WIDGETS["messages"]={area:"tl",width:0,draw:function() {
+  if (!this.width) return;
+  var c = (Date.now()-this.t)/1000;
+  g.reset().setBgColor((c&1) ? "#0f0" : "#030").setColor((c&1) ? "#000" : "#fff");
+  g.clearRect(this.x,this.y,this.x+this.width,this.y+23);
+  g.setFont("6x8:1x2").setFontAlign(0,0).drawString("MESSAGES", this.x+this.width/2, this.y+12);
+  //if (c<60) Bangle.setLCDPower(1); // keep LCD on for 1 minute
+  let settings = require('Storage').readJSON("messages.settings.json", true) || {};
+  if (settings.repeat===undefined) settings.repeat = 4;
+  if (c<120 && (Date.now()-this.l)>settings.repeat*1000) {
+    this.l = Date.now();
+    WIDGETS["messages"].buzz(); // buzz every 4 seconds
+  }
+  setTimeout(()=>WIDGETS["messages"].draw(), 1000);
+},show:function() {
+  WIDGETS["messages"].t=Date.now(); // first time
+  WIDGETS["messages"].l=Date.now()-10000; // last buzz
+  WIDGETS["messages"].width=64;
+  Bangle.drawWidgets();
+  Bangle.setLCDPower(1);// turns screen on
+},hide:function() {
+  delete WIDGETS["messages"].t;
+  delete WIDGETS["messages"].l;
+  WIDGETS["messages"].width=0;
+  Bangle.drawWidgets();
+},buzz:function() {
+  let v = (require('Storage').readJSON("messages.settings.json", true) || {}).vibrate || ".";
+  function b() {
+    var c = v[0];
+    v = v.substr(1);
+    if (c==".") Bangle.buzz().then(()=>setTimeout(b,100));
+    if (c=="-") Bangle.buzz(500).then(()=>setTimeout(b,100));
+  }
+  b();
+}};
diff --git a/apps/metronome/ChangeLog b/apps/metronome/ChangeLog
index 894d62940..9bd33ca4e 100644
--- a/apps/metronome/ChangeLog
+++ b/apps/metronome/ChangeLog
@@ -4,3 +4,4 @@
 0.04: App shows instructions, Widgets remain visible, color changed
 0.05: Buzz intensity and beats per bar can be changed via settings-app
 0.06: Correct string position
+0.07: Add support for Bangle.sjs2
\ No newline at end of file
diff --git a/apps/metronome/README.md b/apps/metronome/README.md
index f67b4adf1..05bd62a96 100644
--- a/apps/metronome/README.md
+++ b/apps/metronome/README.md
@@ -4,11 +4,12 @@ This metronome makes your watch blink and vibrate with a given rate.
 
 ## Usage
 
-* Tap the screen at least three times. The app calculates the mean rate of your tapping. This rate is displayed in bmp while the text blinks and the watch softly vibrates with every beat.
-* Use `BTN1` to increase the bmp value by one.
-* Use `BTN3` to decrease the bmp value by one.
+* Tap the screen at least three times. The app calculates the mean rate of your tapping. This rate is displayed in bpm while the text blinks and the watch softly vibrates with every beat.
+* Use `BTN1` to increase the bpm value by one.
+* Use `BTN3` to decrease the bpm value by one.
 * You can change the bpm value any time by tapping the screen or using `BTN1` and `BTN3`.
 * Intensity of buzzing and the beats per bar (default 4) can be changed with the settings-app. The first beat per bar will be marked in red.
+* On Bangle.js 2 tapping the center of the screen initiates bpm. in- or decreasing bpm can by 1 can be done by tapping left or right site of the screen.
 
 ## Attributions
 
diff --git a/apps/metronome/bangle1-metronome-screenshot.png b/apps/metronome/bangle1-metronome-screenshot.png
new file mode 100644
index 000000000..1d684235d
Binary files /dev/null and b/apps/metronome/bangle1-metronome-screenshot.png differ
diff --git a/apps/metronome/metronome.js b/apps/metronome/metronome.js
index e5e45559e..ffcaa1cfb 100644
--- a/apps/metronome/metronome.js
+++ b/apps/metronome/metronome.js
@@ -3,10 +3,9 @@ var cindex=0;  // index to iterate through colous
 var bpm=60;  // ininital bpm value
 var time_diffs = [1000, 1000, 1000];  //array to calculate mean bpm
 var tindex=0;  //index to iterate through time_diffs
-
-
-Bangle.setLCDTimeout(undefined);  //do not deaktivate display while running this app
-
+// set background colour
+g.setTheme({bg:"#000"});
+Bangle.setLCDTimeout(undefined);  //do not deactivate display while running this app
 const storage = require("Storage");
 const SETTINGS_FILE = 'metronome.settings.json';
 
@@ -15,7 +14,7 @@ function setting(key) {
   //define default settings
   const DEFAULTS = {
     'beatsperbar': 4,
-    'buzzintens': 0.75,
+    'buzzintens': 1.0,
   };
   if (!settings) { loadSettings(); }
   return (key in settings) ? settings[key] : DEFAULTS[key];
@@ -40,6 +39,10 @@ function changecolor() {
     7: { value: 0xFFFF, name: "White" },
   };
   g.setColor(colors[cindex].value);
+  if ((process.env.HWVERSION==2 )) {
+   g.drawLine(39,0,39,g.getWidth()/3);
+   g.drawLine(136,0,136,g.getWidth()/3);
+  }
   if (cindex == setting('beatsperbar')-1) {
     cindex = 0;
   }
@@ -50,43 +53,73 @@ function changecolor() {
 }
 
 function updateScreen() {
-  g.reset().clearRect(0, 50, 250, 150);
+  g.reset().clearRect(0, 50, 250, 120);
   changecolor();
   try {
     Bangle.buzz(50, setting('buzzintens'));
   } catch(err) {
   }
   g.setFont("Vector",40).setFontAlign(0,0);
-  g.drawString(Math.floor(bpm)+"bpm", g.getWidth()/2, 100);
+  g.drawString(Math.floor(bpm)+"bpm", g.getWidth()/2,  g.getWidth()/2);
 }
 
-Bangle.on('touch', function(button) {
-// setting bpm by tapping the screen. Uses the mean time difference between several tappings.
-  if (tindex < time_diffs.length) {
-    if (Date.now()-tStart < 5000) {
-      time_diffs[tindex] = Date.now()-tStart;
-    }
-  } else {
-    tindex=0;
-    time_diffs[tindex] = Date.now()-tStart;
-  }
-  tindex += 1;
-  mean_time = 0.0;
-  for(count = 0; count < time_diffs.length; count++) {
-    mean_time += time_diffs[count];
-  }
-  time_diff = mean_time/count;
+//Write user instructuins to screen
+function printInstructions() {
+ g.clear(1).setFont("4x6");
+ g.setColor(-1);  //set color to white
+ g.drawString('Drum the beat on the center\nof the screen to set tempo.', 30, g.getWidth()/3*2+15);
+ if(process.env.HWVERSION==1) {
+   g.drawString('Use BTN1 to increase, and\nBTN3 to decrease bpm value by 1.', 30, g.getWidth()/3*2+30);
+ }
+ else {
+   g.drawString('Touch left part of the screen\nto decrease, or the right site\nto increase bpm value by 1.', 30, g.getWidth()/3*2+30);
+ }
+}
 
-  tStart = Date.now();
-  clearInterval(time_diff);
-  bpm = (60 * 1000/(time_diff));
-  updateScreen();
-  clearInterval(interval);
-  interval = setInterval(updateScreen, 60000 / bpm);
-  return bpm;
+Bangle.on('touch', function(zone, e) {
+// setting bpm by tapping the screen. Uses the mean time difference between several tappings.
+  if ((process.env.HWVERSION==2 && e.x > 39 && e.x < 136) || process.env.HWVERSION==1){
+      if (tindex < time_diffs.length) {
+        if (Date.now()-tStart < 5000) {
+          time_diffs[tindex] = Date.now()-tStart;
+        }
+      } else {
+        tindex=0;
+        time_diffs[tindex] = Date.now()-tStart;
+      }
+      tindex += 1;
+      mean_time = 0.0;
+      for (count = 0; count < time_diffs.length; count++) {
+        mean_time += time_diffs[count];
+      }
+      time_diff = mean_time/count;
+
+      tStart = Date.now();
+      clearInterval(time_diff);
+      bpm = (60 * 1000/(time_diff));
+      updateScreen();
+      clearInterval(interval);
+      interval = setInterval(updateScreen, 60000 / bpm);
+      return bpm;
+  }
+  else if (e.x < 39) {
+    if (bpm > 1) {
+    bpm -= 1;
+    clearInterval(interval);
+    interval = setInterval(updateScreen, 60000 / bpm);
+  }
+  }
+  else if (e.x > 136) {
+    if (bpm > 1) {
+    bpm += 1;
+    clearInterval(interval);
+    interval = setInterval(updateScreen, 60000 / bpm);
+  }}
 });
 
-// enable bpm finetuning via buttons.
+
+// enable bpm finetuning
+if ((process.env.HWVERSION==1)) {
 setWatch(() => {
   bpm += 1;
   clearInterval(interval);
@@ -101,10 +134,10 @@ setWatch(() => {
   }
 }, BTN3, {repeat:true});
 
+}
 interval = setInterval(updateScreen, 60000 / bpm);
+printInstructions();
 
-g.clear(1).setFont("6x8");
-g.drawString('Touch the screen to set tempo.\nUse BTN1 to increase, and\nBTN3 to decrease bpm value by 1.', 25, 200);
 
 Bangle.loadWidgets();
 Bangle.drawWidgets();
diff --git a/apps/miclock/bangle1-mixed-clock-screenshot.png b/apps/miclock/bangle1-mixed-clock-screenshot.png
new file mode 100644
index 000000000..079aa17df
Binary files /dev/null and b/apps/miclock/bangle1-mixed-clock-screenshot.png differ
diff --git a/apps/miclock2/bangle1-mixed-clock-2-screenshot.png b/apps/miclock2/bangle1-mixed-clock-2-screenshot.png
new file mode 100644
index 000000000..29a9819c4
Binary files /dev/null and b/apps/miclock2/bangle1-mixed-clock-2-screenshot.png differ
diff --git a/apps/minionclk/bangle1-minion-clock-screenshot.png b/apps/minionclk/bangle1-minion-clock-screenshot.png
new file mode 100644
index 000000000..87038aa46
Binary files /dev/null and b/apps/minionclk/bangle1-minion-clock-screenshot.png differ
diff --git a/apps/moonphase/bangle1-moon-phase-screenshot.png b/apps/moonphase/bangle1-moon-phase-screenshot.png
new file mode 100644
index 000000000..1462cb1b3
Binary files /dev/null and b/apps/moonphase/bangle1-moon-phase-screenshot.png differ
diff --git a/apps/multiclock/ChangeLog b/apps/multiclock/ChangeLog
index 2f27f7f28..442a5277a 100644
--- a/apps/multiclock/ChangeLog
+++ b/apps/multiclock/ChangeLog
@@ -1,13 +1,12 @@
-0.01: New App!
-0.02: Separate *.face.js files for faces
-0.03: Renaming
-0.04: Bug Fixes
-0.05: Add README
-0.06: Add txt clock
-0.07: Add Time Date clock and fix font sizes
-0.08: Add pinned clock face
-0.09: Added Pedometer clock
-0.10: Added GPS and Grid Ref clock faces
-0.11: Updated Pedometer clock to retrieve steps from either wpedom or activepedom
-0.12: Removed GPS and Grid Ref clock faces, superceded by GPS setup and Walkers Clock
-0.13: Localised digi.js and timdat.js
\ No newline at end of file
+0.01: Initial version
+0.02: Add pinned clock facility
+0.03: Lnng touch switch to night clock - ANCS off, dimmed
+0.04: use theme, font heights etc
+0.05: make Bangle compatible
+0.06: add minute tick for efficiency and nifty A clock
+0.07: compatible with Bang;e.js 2
+0.08: fix minute tick bug
+0.09: use setUI clockupdown for controls + fix small display bug in nifty face
+
+
+
diff --git a/apps/multiclock/README.md b/apps/multiclock/README.md
index b1773b8df..25c997329 100644
--- a/apps/multiclock/README.md
+++ b/apps/multiclock/README.md
@@ -1,30 +1,13 @@
 # Multiclock
 
-This is a clock app that supports multiple clock faces. The user can switch between faces while retaining widget state which makes the switch fast and preserves state such as bluetooth connections. Currently there are four clock faces as shown below. To my eye, these faces look better when widgets are hidden using **widviz**. 
-
+This is a clock app that supports multiple clock faces. The user can switch between faces while retaining widget state which makes the switch fast. Currently there are four clock faces as shown below. There are currently an anlog, digital, text, big digit, time and date, and a clone of the Nifty-A-Clock faces.
 ### Analog Clock Face
-![](anaface.jpg)
-
-### Digital Clock Face
-![](digiface.jpg)
-
-### Big Digit Clock Face
-![](bigface.jpg)
-
-### Text Clock Face
-![](txtface.jpg)
-
-### Time and Date Clock Face
 
 
 ## Controls
-Clock faces are kept in a circular list.
-
-*BTN1* - switches to the next clock face.
-
-*BTN2* - switches to the app launcher.
-
-*BTN3* - switches to the previous clock face.
+Uses `setUI("clockupdown")`
+BTN1 & BTH3  switch faces on the Bangle.
+Touch upper right and lower right quadrant switch faces on the Bangle 2.
 
 ## Adding a new face
 Clock faces are described in javascript storage files named `name.face.js`. For example, the Analog Clock Face is described in `ana.face.js`. These files have the following structure:
@@ -38,7 +21,7 @@ Clock faces are described in javascript storage files named `name.face.js`. For
 	    function drawAll(){
 	       //draw background + initial state of digits, hands etc
 	    }
-    	return {init:drawAll, tick:onSecond};
+    	return {init:drawAll, tick:onSecond, tickpersec:true};
     }
     return getFace;
 })();
@@ -47,6 +30,5 @@ For those familiar with the structure of widgets, this is similar, however, ther
 
 The app at start up loads all files `*.face.js`. The simplest way of adding a face is thus to load it into `Storage` using the WebIDE. Similarly, to remove an unwanted face, simply delete it from `Storage` using the WebIDE.
 
-## Support
+If `tickpersec` is false then `tick` is only called each minute as this is more power effcient - especially on the BAngle 2.
 
-Please report bugs etc. by raising an issue [here](https://github.com/jeffmer/JeffsBangleAppsDev).
\ No newline at end of file
diff --git a/apps/multiclock/ana.js b/apps/multiclock/ana.face.js
similarity index 59%
rename from apps/multiclock/ana.js
rename to apps/multiclock/ana.face.js
index 4fd5a7251..af1c84c9f 100644
--- a/apps/multiclock/ana.js
+++ b/apps/multiclock/ana.face.js
@@ -5,54 +5,60 @@
     const p = Math.PI/2;
     const PRad = Math.PI/180;
 
+    var cx = g.getWidth()/2;
+    var cy = 12+g.getHeight()/2;
+    var scale = (g.getHeight()-24)/(240-24);  
+    scale = scale>=1 ? 1 : scale;
+
     function seconds(angle, r) {
         const a = angle*PRad;
-        const x = 120+Math.sin(a)*r;
-        const y = 134-Math.cos(a)*r;
+        const x = cx+Math.sin(a)*r;
+        const y = cy-Math.cos(a)*r;
         if (angle % 90 == 0) {
-            g.setColor(0,1,1);
+            g.setColor(g.theme.fg2);
             g.fillRect(x-6,y-6,x+6,y+6);
         } else if (angle % 30 == 0){
-            g.setColor(0,1,1);
+            g.setColor(g.theme.fg);
             g.fillRect(x-4,y-4,x+4,y+4);
         } else {
-            g.setColor(1,1,1);
+            g.setColor(g.theme.fg);
             g.fillRect(x-1,y-1,x+1,y+1);
         }
     }
 
     function hand(angle, r1,r2, r3) {
+        r1 = scale*r1; r2=scale*r2; r3 = scale*r3;
         const a = angle*PRad;
         g.fillPoly([
-            120+Math.sin(a)*r1,
-            134-Math.cos(a)*r1,
-            120+Math.sin(a+p)*r3,
-            134-Math.cos(a+p)*r3,
-            120+Math.sin(a)*r2,
-            134-Math.cos(a)*r2,
-            120+Math.sin(a-p)*r3,
-            134-Math.cos(a-p)*r3]);
+            cx+Math.sin(a)*r1,
+            cy-Math.cos(a)*r1,
+            cx+Math.sin(a+p)*r3,
+            cy-Math.cos(a+p)*r3,
+            cx+Math.sin(a)*r2,
+            cy-Math.cos(a)*r2,
+            cx+Math.sin(a-p)*r3,
+            cy-Math.cos(a-p)*r3]);
     }
 
     var minuteDate;
     var secondDate;
 
     function onSecond() {
-        g.setColor(0,0,0);
+        g.setColor(g.theme.bg);
         hand(360*secondDate.getSeconds()/60, -5, 90, 3);
         if (secondDate.getSeconds() === 0) {
             hand(360*(minuteDate.getHours() + (minuteDate.getMinutes()/60))/12, -16, 60, 7);
             hand(360*minuteDate.getMinutes()/60, -16, 86, 7);
             minuteDate = new Date();
         }
-        g.setColor(1,1,1);
+        g.setColor(g.theme.fg);
         hand(360*(minuteDate.getHours() + (minuteDate.getMinutes()/60))/12, -16, 60, 7);
         hand(360*minuteDate.getMinutes()/60, -16, 86, 7);
-        g.setColor(0,1,1);
+        g.setColor(g.theme.fg2);
         secondDate = new Date();
         hand(360*secondDate.getSeconds()/60, -5, 90, 3);
-        g.setColor(0,0,0);
-        g.fillCircle(120,134,2);
+        g.setColor(g.theme.bg);
+        g.fillCircle(cx,cy,2);
     }
 
     function drawAll() {
@@ -60,11 +66,11 @@
         // draw seconds
         g.setColor(1,1,1);
         for (let i=0;i<60;i++)
-            seconds(360*i/60, 100);
+            seconds(360*i/60, 100*scale);
         onSecond();
     }
 
-    return {init:drawAll, tick:onSecond};
+    return {init:drawAll, tick:onSecond, tickpersec:true};
  }
 
 return getFace;
diff --git a/apps/multiclock/anaface.jpg b/apps/multiclock/anaface.jpg
deleted file mode 100644
index 86aaccd54..000000000
Binary files a/apps/multiclock/anaface.jpg and /dev/null differ
diff --git a/apps/multiclock/apps_entry.json b/apps/multiclock/apps_entry.json
deleted file mode 100644
index 6383609c1..000000000
--- a/apps/multiclock/apps_entry.json
+++ /dev/null
@@ -1,19 +0,0 @@
-{ "id": "multiclock",
-    "name": "Multi Clock",
-    "icon": "multiclock.png",
-    "version":"0.06",
-    "description": "Clock with multiple faces - Big, Analogue, Digital, Text.\n Switch between faces with BT1 & BTN3",
-    "readme": "README.md",
-    "tags": "clock",
-    "type":"clock",
-    "allow_emulator":false,
-    "storage": [
-      {"name":"multiclock.app.js","url":"clock.min.js"},
-      {"name":"big.face.js","url":"big.min.js"},
-      {"name":"ana.face.js","url":"ana.min.js"},
-      {"name":"digi.face.js","url":"digi.min.js"},
-      {"name":"txt.face.js","url":"txt.min.js"},
-      {"name":"ped.face.js","url":"ped.js"},
-      {"name":"multiclock.img","url":"multiclock-icon.js","evaluate":true}
-    ]
-  },
diff --git a/apps/multiclock/big.face.js b/apps/multiclock/big.face.js
new file mode 100644
index 000000000..2db4ee4d4
--- /dev/null
+++ b/apps/multiclock/big.face.js
@@ -0,0 +1,31 @@
+(() => {
+
+    function getFace(){
+
+    const W = g.getWidth();
+    const H = g.getHeight();
+    const F = 132*H/240; // reasonable approximation
+
+    function drawTime() {
+        d = new Date()
+        g.reset();
+        var da = d.toString().split(" ");
+        var time = da[4].substr(0, 5).split(":");
+        var hours = time[0],
+          minutes = time[1];
+        g.clearRect(0,24,W-1,H-1);
+        g.setColor(g.theme.fg);
+        g.setFont("Vector",F);
+        g.setFontAlign(0,-1);
+        g.drawString(hours,W/2,24,true);
+        g.setColor(g.theme.fg2);
+        g.drawString(minutes,W/2,12+H/2,true);
+      }
+
+
+    return {init:drawTime, tick:drawTime, tickpersecond:false};
+    }
+
+  return getFace;
+
+})();
\ No newline at end of file
diff --git a/apps/multiclock/big.js b/apps/multiclock/big.js
deleted file mode 100644
index 2e83d8fb5..000000000
--- a/apps/multiclock/big.js
+++ /dev/null
@@ -1,32 +0,0 @@
-(() => {
-
-    function getFace(){
-
-    function drawTime(d) {
-        g.reset();
-        var da = d.toString().split(" ");
-        var time = da[4].substr(0, 5).split(":");
-        var hours = time[0],
-          minutes = time[1];
-        g.clearRect(0,24,239,239);
-        g.setColor(1,1,1);
-        g.setFont("Vector",132);
-        g.drawString(hours,50,24,true);
-        g.drawString(minutes,50,132,true);
-      }
-
-    function onSecond(){
-       var t = new Date();
-       if (t.getSeconds() === 0) drawTime(t);
-    }
-
-    function drawAll(){
-       drawTime(new Date());
-    }
-
-    return {init:drawAll, tick:onSecond};
-    }
-
-  return getFace;
-
-})();
\ No newline at end of file
diff --git a/apps/multiclock/bigface.jpg b/apps/multiclock/bigface.jpg
deleted file mode 100644
index 685726864..000000000
Binary files a/apps/multiclock/bigface.jpg and /dev/null differ
diff --git a/apps/multiclock/clock.info b/apps/multiclock/clock.info
new file mode 100644
index 000000000..441de1463
--- /dev/null
+++ b/apps/multiclock/clock.info
@@ -0,0 +1 @@
+{"id":"clock","name":"Clock","type":"clock","src":"clock.app.js","icon":"clock.img","version":"0.06","files":"clock.info,clock.app.js,big.face.js,ana.face.js,digi.face.js,txt.face.js"}
\ No newline at end of file
diff --git a/apps/multiclock/clock.js b/apps/multiclock/clock.js
deleted file mode 100644
index 50410f096..000000000
--- a/apps/multiclock/clock.js
+++ /dev/null
@@ -1,69 +0,0 @@
-var FACES = [];
-var STOR = require("Storage");
-STOR.list(/\.face\.js$/).forEach(face=>FACES.push(eval(require("Storage").read(face))));
-var lastface = STOR.readJSON("multiclock.json")||{pinned:0};
-var iface = lastface.pinned;
-var face = FACES[iface]();
-var intervalRefSec;
-
-function stopdraw() {
-  if(intervalRefSec) {intervalRefSec=clearInterval(intervalRefSec);}
-}
-
-function startdraw() {
-  g.clear();
-  g.reset();
-  Bangle.drawWidgets();
-  face.init();
-  intervalRefSec = setInterval(face.tick,1000);
-}
-
-function setButtons(){
-  function newFace(inc){
-    var n = FACES.length-1;
-    iface+=inc;
-    iface = iface>n?0:iface<0?n:iface;
-    stopdraw();
-    face = FACES[iface]();
-    startdraw();
-  }
-  function finish(){
-      if (lastface.pinned!=iface){
-          lastface.pinned=iface;
-          STOR.write("multiclock.json",lastface);
-      }
-      Bangle.showLauncher();
-  }
-  setWatch(finish, BTN2, {repeat:false,edge:"falling"});
-  setWatch(newFace.bind(null,1), BTN1, {repeat:true,edge:"rising"});
-  setWatch(newFace.bind(null,-1), BTN3, {repeat:true,edge:"rising"});
-}
-
-var SCREENACCESS = {
-      withApp:true,
-      request:function(){
-        this.withApp=false;
-        stopdraw();
-        clearWatch();
-      },
-      release:function(){
-        this.withApp=true;
-        startdraw(); 
-        setButtons();
-      }
-}; 
-
-Bangle.on('lcdPower',function(on) {
-  if (!SCREENACCESS.withApp) return;
-  if (on) {
-    startdraw();
-  } else {
-    stopdraw();
-  }
-});
-
-g.clear();
-Bangle.loadWidgets();
-startdraw();
-setButtons();
-
diff --git a/apps/multiclock/digi.face.js b/apps/multiclock/digi.face.js
new file mode 100644
index 000000000..21f339afc
--- /dev/null
+++ b/apps/multiclock/digi.face.js
@@ -0,0 +1,38 @@
+(() => {
+
+function getFace(){
+
+    var W = g.getWidth();
+    var H = g.getHeight();
+    var scale = W/240;
+
+    var buf = Graphics.createArrayBuffer(W,92,1,{msb:true});
+    function flip() {
+      g.setColor(g.theme.fg);
+      g.drawImage({width:buf.getWidth(),height:buf.getHeight(),buffer:buf.buffer},0,H/2-34);
+    }
+    
+    var W = g.getWidth();
+    var H = g.getHeight();
+
+    function drawTime() {
+      buf.clear();
+      buf.setColor(1);
+      var d = new Date();
+      var da = d.toString().split(" ");
+      var time = da[4];
+      buf.setFont("Vector",54*scale);
+      buf.setFontAlign(0,-1);
+      buf.drawString(time,W/2,0);
+      buf.setFont("6x8",scale<1?1:2);
+      buf.setFontAlign(0,-1);
+      var date = d.toString().substr(0,15);
+      buf.drawString(date, W/2, 70*scale);
+      flip();
+    }  
+    return {init:drawTime, tick:drawTime, tickpersec:true};
+}
+
+return getFace;
+
+})();
\ No newline at end of file
diff --git a/apps/multiclock/digi.js b/apps/multiclock/digi.js
deleted file mode 100644
index 0b2ca4aaa..000000000
--- a/apps/multiclock/digi.js
+++ /dev/null
@@ -1,33 +0,0 @@
-(() => {
-
-var locale = require("locale");
-
-function getFace(){
-
-    var buf = Graphics.createArrayBuffer(240,92,1,{msb:true});
-    function flip() {
-      g.setColor(1,1,1);
-      g.drawImage({width:buf.getWidth(),height:buf.getHeight(),buffer:buf.buffer},0,85);
-    }
-    
-    function drawTime() {
-      buf.clear();
-      buf.setColor(1);
-      var d = new Date();
-      var da = d.toString().split(" ");
-      var time = da[4];
-      buf.setFont("Vector",54);
-      buf.setFontAlign(0,-1);
-      buf.drawString(time,buf.getWidth()/2,0);
-      buf.setFont("6x8",2);
-      buf.setFontAlign(0,-1);
-      var date = locale.dow(d, 1) + " " + locale.date(d, 1);
-      buf.drawString(date, buf.getWidth()/2, 70);
-      flip();
-    }  
-    return {init:drawTime, tick:drawTime};
-}
-
-return getFace;
-
-})();
\ No newline at end of file
diff --git a/apps/multiclock/digiface.jpg b/apps/multiclock/digiface.jpg
deleted file mode 100644
index b0323bd55..000000000
Binary files a/apps/multiclock/digiface.jpg and /dev/null differ
diff --git a/apps/multiclock/dk.face.js b/apps/multiclock/dk.face.js
new file mode 100644
index 000000000..a89397a75
--- /dev/null
+++ b/apps/multiclock/dk.face.js
@@ -0,0 +1,40 @@
+(() => {
+    function getFace(){
+
+      const locale = require("locale");
+
+      var W = g.getWidth();
+      var H = g.getHeight();
+      var scale = W/240;
+        
+        function drawClock(){
+          var now=Date();
+          d=now.toString().split(' ');
+          var min=d[4].substr(3,2);
+          var sec=d[4].substr(-2);
+          var tm=d[4].substring(0,5);
+          var hr=d[4].substr(0,2);
+          lastmin=min;
+          g.reset();
+          g.clearRect(0,24,W-1,H-1);
+          g.setColor(g.theme.fg);
+          g.setFontAlign(0,-1);
+          g.setFontVector(80*scale);
+          g.drawString(tm,4+W/2,H/2+24-80*scale);
+          g.setFontVector(36*scale);
+          g.setColor(g.theme.fg2);
+          d[1] = locale.month(now,3);
+          d[0] = locale.dow(now,3);    
+          var dt=d[0]+" "+d[1]+" "+d[2];//+" "+d[3];
+          g.drawString(dt,W/2,H/2+24);
+          g.flip();
+        }
+
+
+        return {init:drawClock, tick:drawClock, tickpersec:false};
+     }
+
+    return getFace;
+
+})();
+
diff --git a/apps/multiclock/multiclock-icon.img b/apps/multiclock/multiclock-icon.img
new file mode 100644
index 000000000..57e0a935f
Binary files /dev/null and b/apps/multiclock/multiclock-icon.img differ
diff --git a/apps/multiclock/multiclock-icon.js b/apps/multiclock/multiclock-icon.js
index 41a59f503..bad6313ba 100644
--- a/apps/multiclock/multiclock-icon.js
+++ b/apps/multiclock/multiclock-icon.js
@@ -1 +1 @@
-require("heatshrink").decompress(atob("mEwwkEogA/AFGIAAQVVDKQWHDB1IC5OECx8z///mYYOBoWDCoIADnBJLFwQWGDAgwIEYU/CQXwh4EC+YwKBIOPFQYXE//4C5BGCIQgXF/5IILo4XGMIQXHLoYXIMIRGMC45IHC4KkGC45IBC4yNEC5KRBC7h2HC5B4GC5EggQXOBwvygEAl6QHC4sikRGEhGAJAgNBC75HIgZHNO48AgIJER54xCiYXKa5AxCGAjvPGA4XIwYXHbQs4C46QGGAbZDB4IXEPBQAEOwwXDJBJGEC4xILIxQwDSJCNDFwwXDMIh0ELoQXIJARhDC4hdCIw4wEDAQXDCwQuIGAgABmYXBmYHDFxIYGAAoWLJIgAGCxgYJCxwZGCqIA/AC4A="))
+require("heatshrink").decompress(atob("mEwwkEogA/AFGIAAQVVDKQWHDB1IC5OECx8z///mYYOBoWDCoIADnBJLFwQWGDAgwIEYU/CQXwh4EC+YwKBIOPFQYXE//4C5BGCIQgXF/5IILo4XGMIQXHLoYXIMIRGMC45IHC4KkGC45IBC4yNEC5KRBC7h2HC5B4GC5EggQXOBwvygEAl6QHC4sikRGEhGAJAgNBC75HIgZHNO48AgIJER54xCiYXKa5AxCGAjvPGA4XIwYXHbQs4C46QGGAbZDB4IXEPBQAEOwwXDJBJGEC4xILIxQwDSJCNDFwwXDMIh0ELoQXIJARhDC4hdCIw4wEDAQXDCwQuIGAgABmYXBmYHDFxIYGAAoWLJIgAGCxgYJCxwZGCqIA/AC4A="))
\ No newline at end of file
diff --git a/apps/multiclock/multiclock.app.js b/apps/multiclock/multiclock.app.js
new file mode 100644
index 000000000..0565a7040
--- /dev/null
+++ b/apps/multiclock/multiclock.app.js
@@ -0,0 +1,86 @@
+var FACES = [];
+var STOR = require("Storage");
+STOR.list(/\.face\.js$/).forEach(face=>FACES.push(eval(require("Storage").read(face))));
+var lastface = STOR.readJSON("clock.json") || {pinned:0}
+var iface = lastface.pinned;
+var face = FACES[iface]();
+var intervalRefSec;
+var intervalRefSec;
+var tickTimeout;
+
+function stopdraw() {
+  if(intervalRefSec) {intervalRefSec=clearInterval(intervalRefSec);}
+  if(tickTimeout) {tickTimeout=clearTimeout(tickTimeout);}
+  g.clear();
+}
+
+function queueMinuteTick() {
+  if (tickTimeout) clearTimeout(tickTimeout);
+  tickTimeout = setTimeout(function() {
+    tickTimeout = undefined;
+    face.tick();
+    queueMinuteTick();
+  }, 60000 - (Date.now() % 60000));
+}
+
+function startdraw() {
+  g.reset();
+  face.init();
+  if (face.tickpersec)
+    intervalRefSec = setInterval(face.tick,1000);
+  else 
+    queueMinuteTick();
+  Bangle.drawWidgets();
+}
+
+var SCREENACCESS = {
+  withApp:true,
+  request:function(){
+    this.withApp=false;
+    stopdraw();
+  },
+  release:function(){
+    this.withapp=true;
+    startdraw(); 
+    setButtons();
+  }
+}; 
+
+Bangle.on('lcdPower',function(b) {
+  if (!SCREENACCESS.withApp) return;
+  if (b) {
+      startdraw();
+  } else {
+      stopdraw();
+  }
+});
+
+function setButtons(){
+  function newFace(inc){
+    if (!inc) Bangle.showLauncher();
+    else  {
+      var n = FACES.length-1;
+      iface+=inc;
+      iface = iface>n?0:iface<0?n:iface;
+      stopdraw();
+      face = FACES[iface]();
+      startdraw();
+    }
+  }
+  Bangle.setUI("clockupdown", newFace);
+}
+
+E.on('kill',()=>{
+    if (iface!=lastface.pinned){
+      lastface.pinned=iface;
+      STOR.write("clock.json",lastface);
+    }
+});
+
+Bangle.loadWidgets();
+g.clear();
+startdraw();
+setButtons();
+
+
+
diff --git a/apps/multiclock/nifty.face.js b/apps/multiclock/nifty.face.js
new file mode 100644
index 000000000..54962da34
--- /dev/null
+++ b/apps/multiclock/nifty.face.js
@@ -0,0 +1,55 @@
+(() => {
+    function getFace(){
+
+        const locale = require("locale");
+        const is12Hour = (require("Storage").readJSON("setting.json", 1) || {})["12hour"];
+
+        const scale = g.getWidth() / 176;
+
+        const widget = 24;
+
+        const viewport = {
+          width: g.getWidth(),
+          height: g.getHeight(),
+        }
+
+        const center = {
+          x: viewport.width / 2,
+          y: Math.round(((viewport.height - widget) / 2) + widget),
+        }
+
+        function d02(value) {
+          return ('0' + value).substr(-2);
+        }
+        
+        function drawClock() {
+          g.reset();
+          g.clearRect(0, widget, viewport.width, viewport.height);   
+          var now = new Date(); 
+          const hour = d02(now.getHours() - (is12Hour && now.getHours() > 12 ? 12 : 0));
+          const minutes = d02(now.getMinutes());
+          const day = d02(now.getDate());
+          const month = d02(now.getMonth() + 1);
+          const year = now.getFullYear();       
+          const month2 = locale.month(now, 3);
+          const day2 = locale.dow(now, 3);      
+          g.setFontAlign(1, 0).setFont("Vector", 90 * scale);
+          g.drawString(hour, center.x + 32 * scale, center.y - 31 * scale);
+          g.drawString(minutes, center.x + 32 * scale, center.y + 46 * scale);       
+          g.fillRect(center.x + 30 * scale, center.y - 72 * scale, center.x + 32 * scale, center.y + 74 * scale);       
+          g.setFontAlign(-1, 0).setFont("Vector", 16 * scale);
+          g.drawString(year, center.x + 40 * scale, center.y - 62 * scale);
+          g.drawString(month, center.x + 40 * scale, center.y - 44 * scale);
+          g.drawString(day, center.x + 40 * scale, center.y - 26 * scale);
+          g.drawString(month2, center.x + 40 * scale, center.y + 48 * scale);
+          g.drawString(day2, center.x + 40 * scale, center.y + 66 * scale);
+        }
+
+    
+        return {init:drawClock, tick:drawClock, tickpersec:false};
+     }
+
+    return getFace;
+
+})();
+
diff --git a/apps/multiclock/ped.js b/apps/multiclock/ped.js
deleted file mode 100644
index a0f81e2e5..000000000
--- a/apps/multiclock/ped.js
+++ /dev/null
@@ -1,41 +0,0 @@
-(() => {
-
-  function getFace(){
-
-    function draw() {
-      let steps = "-";
-      let show_steps = false;
-
-      // only attempt to get steps if activepedom is loaded
-      if (WIDGETS.activepedom !== undefined) {
-        steps = WIDGETS.activepedom.getSteps();
-      } else if (WIDGETS.wpedom !== undefined) {
-        steps = WIDGETS.wpedom.getSteps();
-      }
-      
-      var d = new Date();
-      var da = d.toString().split(" ");
-      var time = da[4].substr(0,5);
-      
-      g.reset();
-      g.clearRect(0,24,239,239);
-      g.setFont("Vector", 80);
-      g.setColor(1,1,1);  // white
-      g.setFontAlign(0, -1);
-      g.drawString(time, g.getWidth()/2, 60);
-      g.setColor(0,255,0);  // green
-      g.setFont("Vector", 60);
-      g.drawString(steps, g.getWidth()/2, 160);
-    }
-
-    function onSecond(){
-      var t = new Date();
-      if ((t.getSeconds() % 5) === 0) draw();
-    }
-
-    return {init:draw, tick:onSecond};
-  }
-
-  return getFace;
-
-})();
diff --git a/apps/multiclock/screen-ana.png b/apps/multiclock/screen-ana.png
new file mode 100644
index 000000000..67d794aa3
Binary files /dev/null and b/apps/multiclock/screen-ana.png differ
diff --git a/apps/multiclock/screen-big.png b/apps/multiclock/screen-big.png
new file mode 100644
index 000000000..80544d552
Binary files /dev/null and b/apps/multiclock/screen-big.png differ
diff --git a/apps/multiclock/screen-date.png b/apps/multiclock/screen-date.png
new file mode 100644
index 000000000..21093f458
Binary files /dev/null and b/apps/multiclock/screen-date.png differ
diff --git a/apps/multiclock/screen-nifty.png b/apps/multiclock/screen-nifty.png
new file mode 100644
index 000000000..884456125
Binary files /dev/null and b/apps/multiclock/screen-nifty.png differ
diff --git a/apps/multiclock/screen-sec.png b/apps/multiclock/screen-sec.png
new file mode 100644
index 000000000..cc1149254
Binary files /dev/null and b/apps/multiclock/screen-sec.png differ
diff --git a/apps/multiclock/screen-td.png b/apps/multiclock/screen-td.png
new file mode 100644
index 000000000..edea06a2e
Binary files /dev/null and b/apps/multiclock/screen-td.png differ
diff --git a/apps/multiclock/screen-word.png b/apps/multiclock/screen-word.png
new file mode 100644
index 000000000..ad029a60f
Binary files /dev/null and b/apps/multiclock/screen-word.png differ
diff --git a/apps/multiclock/timdat.js b/apps/multiclock/timdat.js
deleted file mode 100644
index a4a93a691..000000000
--- a/apps/multiclock/timdat.js
+++ /dev/null
@@ -1,47 +0,0 @@
-(() => {
-    var locale = require("locale");
-    var dayFirst = ["en_GB", "en_IN", "en_NAV", "de_DE", "nl_NL", "fr_FR", "en_NZ", "en_AU", "de_AT", "en_IL", "es_ES", "fr_BE", "de_CH", "fr_CH", "it_CH", "it_IT", "tr_TR", "pt_BR", "cs_CZ", "pt_PT"];
-    var withDot = ["de_DE", "nl_NL", "de_AT", "de_CH", "hu_HU", "cs_CZ", "sl_SI"];
-
-    function getFace(){
-        
-        var lastmin=-1;
-        function drawClock(){
-          var d=Date();
-          if (d.getMinutes()==lastmin) return;
-          var tm=d.toString().split(' ')[4].substring(0,5);
-          lastmin=d.getMinutes();
-          g.reset();
-          g.clearRect(0,24,239,239);
-          var w=g.getWidth();
-          g.setColor(0xffff);
-          g.setFontVector(80);
-          g.drawString(tm,4+(w-g.stringWidth(tm))/2,64);
-          g.setFontVector(36);
-          g.setColor(0x07ff);
-          var dt=locale.dow(d, 1) + " ";
-          if (dayFirst.includes(locale.name)) {
-            dt+=d.getDate();
-            if (withDot.includes(locale.name)) {
-              dt+=".";
-            }
-            dt+=" " + locale.month(d, 1);
-          } else {
-            dt+=locale.month(d, 1) + " " + d.getDate();
-          }
-          g.drawString(dt,(w-g.stringWidth(dt))/2,160);
-          g.flip();
-        }
-
-        function drawFirst(){
-          lastmin=-1;
-          drawClock();
-        }
-
-        return {init:drawFirst, tick:drawClock};
-     }
-
-    return getFace;
-
-})();
-
diff --git a/apps/multiclock/txt.js b/apps/multiclock/txt.face.js
similarity index 53%
rename from apps/multiclock/txt.js
rename to apps/multiclock/txt.face.js
index 130455176..fddc07214 100644
--- a/apps/multiclock/txt.js
+++ b/apps/multiclock/txt.face.js
@@ -1,8 +1,14 @@
 (() => {
 
   function getFace(){
-      
-  function drawTime(d) {    
+  
+
+  var W = g.getWidth();
+  var H = g.getHeight();
+  var scale = W/240;
+  var F = 44 * scale;
+
+  function drawTime() {    
       function convert(n){
           var t0 = [" ","one","two","three","four","five","six","seven","eight","nine"];
           var t1 = ["ten","eleven","twelve","thirteen","fourteen","fifteen","sixteen","seventeen","eighteen","nineteen"];
@@ -13,28 +19,25 @@
           return "error";     
       }
       g.reset();
-      g.clearRect(0,40,239,210);
-      g.setColor(1,1,1);
+      g.clearRect(0,24,W-1,H-1);
+      var d = new Date();
+      g.setColor(g.theme.fg);
       g.setFontAlign(0,0);
-      g.setFont("Vector",44);
+      g.setFont("Vector",F);
       var txt = convert(d.getHours());
-      g.drawString(txt.top,120,60);
-      g.drawString(txt.bot,120,100);
+      g.setColor(g.theme.fg);
+      g.drawString(txt.top,W/2,H/2+24-2*F);
+      g.setColor(g.theme.fg2);
+      g.drawString(txt.bot,W/2,H/2+24-F);
       txt = convert(d.getMinutes());
-      g.drawString(txt.top,120,140);
-      g.drawString(txt.bot,120,180);
+      g.setColor(g.theme.fg);
+      g.drawString(txt.top,W/2,H/2+24);
+      g.setColor(g.theme.fg2);
+      g.drawString(txt.bot,W/2,H/2+24+F);
     }
 
-  function onSecond(){
-     var t = new Date();
-     if (t.getSeconds() === 0) drawTime(t);
-  }
 
-  function drawAll(){
-     drawTime(new Date());
-  }
-
-  return {init:drawAll, tick:onSecond};
+  return {init:drawTime, tick:drawTime, tickpersec:false};
   }
 
 return getFace;
diff --git a/apps/multiclock/txtface.jpg b/apps/multiclock/txtface.jpg
deleted file mode 100644
index e38341257..000000000
Binary files a/apps/multiclock/txtface.jpg and /dev/null differ
diff --git a/apps/mysticclock/bangle1-mystic-clock-screenshot.png b/apps/mysticclock/bangle1-mystic-clock-screenshot.png
new file mode 100644
index 000000000..2aff6d69a
Binary files /dev/null and b/apps/mysticclock/bangle1-mystic-clock-screenshot.png differ
diff --git a/apps/mywelcome/bangle1-customized-welcome-screenshot.png b/apps/mywelcome/bangle1-customized-welcome-screenshot.png
new file mode 100644
index 000000000..5d5520c41
Binary files /dev/null and b/apps/mywelcome/bangle1-customized-welcome-screenshot.png differ
diff --git a/apps/mywelcome/custom.html b/apps/mywelcome/custom.html
index b021b7b1a..c4c721765 100644
--- a/apps/mywelcome/custom.html
+++ b/apps/mywelcome/custom.html
@@ -34,14 +34,12 @@ function getApp() {
 var ir = require("heatshrink").decompress(atob("jk0ggGDhvdAAXQCYwMEBxAMFAAIaH6c/+c9DgwMC/8zDg4aC/4YCHIwNB7/zHAwNCAgM/DQwqDAYIaHBonT/oNMFBAND74NNBhApEBrQAKBrrrGWpANZHBT7FBpYqIFAYcJBgkA5oMF7gNFFQwoFDgwMHHIoMIAAPM5gMKBrk0oANLmcwBu0zBrMDBv4AFN5gA/ADYA="));
 var ig = require("heatshrink").decompress(atob("jk0ggGDg93AAVwCYwMEBxAMFAAIaHuc/+c3DgwMC/8yDg4aC/4YCHIwNBv/zHAwNCAgM/DQwqDAYIaHBolz+4NMFBANDv8nBpgMIFIgNaABQNddYy1IBrI4KfYoNLFRAoDDhIMEgHnBgt+BooqGFAoqGBg4OFBhAODBhQNcmUgBpczmAN2mYNZgYN/AApvMAH4Ab"));
   var igift = require("heatshrink").decompress(atob("q1QxH+ADOi0QbZ5nMHDQAbKgIACKa4ACKnJWVKghW0KgxWTKgxWyKhBWRKhBWwKhRWPKhRWuKhhWNKhhWtKpxWKKhys8KxBU8Ky5U+KypU/KyhU/KyhU/KynGKn5WTKn5WUKmHCADpJJE7uYABZUfKuuYKv5V/Kv5V/Kv5V/Kv5V/Kv5V/Kv5V/AAv+Kv5VT/wADyIAaKpIlbABZSEKv5V/Kv5V/Kv5V/Kv5V/Kv5V/Kv5V/Kv5V/Kv5V/Kv5V/Kv5V/Kv5V/Kv5V/Kv5V/Kv5V/Kv5V/Kv5V/Kv5V/Kv5V/Kv5V/Kv5V/Kv5V/Kv5V/Kv5V/Kv5V/Kv5V/Kv5V/Kv5V/Kv5V/Kv5V/Kv5V/Kv5V/Kv5V/ADNtKv6rdKzZVwKhAABy5V/Khw"));
-
   var W=240,H=240;
   var blns = [];
   function updateFlake(f) {
     f.im = [ir,ig,ib][Math.round(Math.random()*100)%3];
     f.s = 0.4+Math.random()*0.5;
   }
-
   for (var i=0;i<6;i++) {
     var f = {
       y:Math.random()*H,x:(0.5+(i<3?i:i+5))*W/11,
@@ -51,7 +49,6 @@ var ig = require("heatshrink").decompress(atob("jk0ggGDg93AAVwCYwMEBxAMFAAIaHuc/
     updateFlake(f);
     blns.push(f);
   }
-
   function draw() {
     blns.forEach(f=>{
       f.y-=f.v;f.r+=f.t;
@@ -71,7 +68,6 @@ var ig = require("heatshrink").decompress(atob("jk0ggGDg93AAVwCYwMEBxAMFAAIaHuc/
     g.drawString(${JSON.stringify(line4)},x,y+=10);
     g.flip();
   }
-
   g.clear();
   setInterval(draw,50);
 })()`;
@@ -79,7 +75,6 @@ var ig = require("heatshrink").decompress(atob("jk0ggGDg93AAVwCYwMEBxAMFAAIaHuc/
   return `(function() {
   var isnow = require("heatshrink").decompress(atob("jEagQWTgfAAocf+gFDh4FDiARBggVB3AFBl3Agf8jfkn/AgX/v/9/+Agfv/2//YrBgfwh4wCgfghYFJCIYdFFIw1EIIpNFL44FFOIoAP"));
   var itree = require("heatshrink").decompress(atob("mtWxH+ADHHDTI0aGuXH5vNGmhqvTYIzBGtoxF6fTG4g4oGgQyBAAZssGoI0Ga1g1FGdo01ZgIAEGmHHNoLSuAAN/rdb0YFBGlgCBGYIABA4YArGYY1CGn4znAAM6GeVd5PQ5Iyurc/vQ0oGZFAn+d4XC3d5GddiGYIEBy+7zoEBGlFhoEcsQ9GT08+oFk1mkGdaVBMgNArnJ6/KzswGs/J6GlrlbqtbvPC5PCy8wGohniMIPJvIpCqmX3e7vI0BqhqlMIY0DqhtBqoEBa0xgBMIIoEqoABGQwzfsIhBv4qHABM50vQGjg1CGaN66DoBGt1ioGd5LoBGjo1PGYNhvLoCa7wnBqgvGA4YzCAgN5GUAsCqoDBmAHCAYU/wPQ0oSDGcBiDqkwAYcxoFd5PX6GdGjrIIqtUAAc3jk5vPC4fCy5pef5I2BTQMcnAHBy+7y95T0oADnFk1ekBpI2aGRUin7NGAA9hsIzVsIgHTAKZBZoPJ5LNDGhBpXGolcwOsrtcA4TNB3bNDGb/+sVin9AoGe6HX5InEvN/TkP+5XQwM/sRsBzqWB4QuKGjvC6HQ4QdDvKWBZYMwmAuHmFUCYNbqibX3fD5O7qolEZQQ0FBwgKDqgJBGiphEDwNUEgJbBFIQqCAgYOCB4IzCnE6GyhYFGoQnDABYzGAAQ1UAAo2NBoQSBnOB0t/Gjo2EABIPCoGe6HX4QzTGRIAEqtVF4QEBBQc4oE4y/J5PCvIxeABk/oADBvO73eXTyAyZMwM/Awd5vIOFGslAr2Av4PLNcU/jmA6HX5I1KasFcn8dTIOd5PJ4SZGGiNhAAIyNn0ckU+ZYe7AAJpJEYJnNGZk+n9kw9cBAcwGoN5aZg1JJJQABm8/oEjoDKC5ALCrUwqh/NrvQ6HDGp04n9doEdoE/sQJBZQZhCqgABGZk6zw0K/1dnVAoNAFwOlCYL1FubJBy4GCGh1AnOX4XC3YzHFYOeCgdV5PQ5OdD4rKBqqYNGYlbv+X3edGY3CGgKMDAAO7JAJgDAClcr2BEYgADaIZ0DL4uXGbDuB6HX5I1GsP+sNhOgWXIhBmWd4Od5PK4TwFGIJoBAYI2BAD0/jlcQoO7AAJaEGQQADGr0/sjNEvOdAoZmDGgw2ZsVAkeAZpQACGZI2VsU/kVGn1bZoPJZogpGGhA4GfRYwBoGC1mlBQbNFFoo0JNxAGCEod/wM6oFAn9iv/J6/Kzo1Ey9/MZQAKCg4GCFgTDEvPCSwI0BC5I0RN4ocEYYPQ5OdHgeXSwTFKGaJyKFYPC3f+MIdbpzFLAD4zB/1OqtbqtOGgYArGAIADGl9UAAI0wGQN5GoQ0vvIABGoI0uGYQABqo0zNOg0uaQY0/GllOGn40//w="));
-
   var W=g.getWidth(),H=g.getHeight();
   var flakes = [];
   for (var i=0;i<10;i++) {
@@ -94,7 +89,6 @@ var ig = require("heatshrink").decompress(atob("jk0ggGDg93AAVwCYwMEBxAMFAAIaHuc/
     f.v = f.s * (1+Math.random());
     flakes.push(f);
   }
-
   function draw() {
     flakes.forEach(f=>{
       f.y+=f.v;f.r+=f.t;
@@ -111,7 +105,6 @@ var ig = require("heatshrink").decompress(atob("jk0ggGDg93AAVwCYwMEBxAMFAAIaHuc/
     g.drawString(${JSON.stringify(line4)},x,y+=10);
     g.flip();
   }
-
   g.clear();
   setInterval(draw,50);
 })();
diff --git a/apps/nato/bangle1-NATO-alphabet-screenshot.png b/apps/nato/bangle1-NATO-alphabet-screenshot.png
new file mode 100644
index 000000000..87c864d3a
Binary files /dev/null and b/apps/nato/bangle1-NATO-alphabet-screenshot.png differ
diff --git a/apps/nato/bangle1-NATO-alphabet-screenshot2.png b/apps/nato/bangle1-NATO-alphabet-screenshot2.png
new file mode 100644
index 000000000..0f4e3861e
Binary files /dev/null and b/apps/nato/bangle1-NATO-alphabet-screenshot2.png differ
diff --git a/apps/notify/ChangeLog b/apps/notify/ChangeLog
index 291f32a5a..8803b82b6 100644
--- a/apps/notify/ChangeLog
+++ b/apps/notify/ChangeLog
@@ -6,3 +6,5 @@
 0.07: Auto-calculate height, and pad text down even when there's no title (so it stays on-screen)
 0.08: Don't turn on screen during Quiet Mode
 0.09: Add onHide callback
+0.10: Improvements to help notifications work with themes
+0.11: Fix regression that caused no notifications and corrupted background
diff --git a/apps/notify/README.md b/apps/notify/README.md
index 11c493102..7b2473015 100644
--- a/apps/notify/README.md
+++ b/apps/notify/README.md
@@ -1,9 +1,12 @@
 # Notifications (default)
 
-A handler for displaying notifications that displays them in a bar at the top of the screen
+The default version of the `notify` module for displaying notifications in a bar at the top of the screen
 
-This is not an app, but instead it is a library that can be used by
-other applications or widgets to display messages.
+This module is installed by default by client applications such as Gadgetbridge.
+
+**Note:** There are other implementations of this library available such
+as `notifyfs` (Fullscreen Notifications). These can be used in the exact
+same way from code, but they look different to the user.
 
 ## Usage
 
diff --git a/apps/notify/notify.js b/apps/notify/notify.js
index 68bc1a954..332c301d5 100644
--- a/apps/notify/notify.js
+++ b/apps/notify/notify.js
@@ -94,17 +94,18 @@ exports.show = function(options) {
     y = 320-size,
     h = size,
     b = y+h-1, r = x+w-1; // bottom,right
-  g.setClipRect(x,y, r,b);
   // clear area
-  g.setColor(options.bgColor||0).fillRect(x,y, r,b);
+  g.reset().setClipRect(x,y, r,b);
+  if (options.bgColor!==undefined) g.setColor(options.bgColor);
+  g.clearRect(x,y, r,b);
   // bottom border
-  g.setColor(0x39C7).fillRect(0,b-1, r,b);
+  g.setColor("#333").fillRect(0,b-1, r,b);
   b -= 2;h -= 2;
   // title bar
   if (options.title || options.src) {
     g.setColor(options.titleBgColor||0x39C7).fillRect(x,y, r,y+20);
     const title = options.title||options.src;
-    g.setColor(-1).setFontAlign(-1, -1, 0).setFont("6x8", 2);
+    g.setColor(g.theme.fg).setFontAlign(-1, -1, 0).setFont("6x8", 2);
     g.drawString(title.trim().substring(0, 13), x+25,y+3);
     if (options.title && options.src) {
       g.setFont("6x8", 1).setFontAlign(1, 1, 0);
@@ -122,7 +123,7 @@ exports.show = function(options) {
   }
   // body text
   if (options.body) {
-    g.setColor(-1).setFont("6x8", 1).setFontAlign(-1, -1, 0).drawString(text, x+6,y+4);
+    g.setColor(g.theme.fg).setFont("6x8", 1).setFontAlign(-1, -1, 0).drawString(text, x+6,y+4);
   }
 
   if (options.render) {
diff --git a/apps/notifyfs/ChangeLog b/apps/notifyfs/ChangeLog
index ace651a0d..cf0a13866 100644
--- a/apps/notifyfs/ChangeLog
+++ b/apps/notifyfs/ChangeLog
@@ -8,3 +8,5 @@
 0.08: Don't turn on screen during Quiet Mode
 0.09: Add onHide callback
 0.10: Ensure dismissing a notification dismissal doesn't enter launcher if in clock mode
+0.11: Improvements to help notifications work with themes, Bangle.js 2 support
+0.12: More use of themes, title now uses theme highlight colors, font adjusts
diff --git a/apps/notifyfs/notify.js b/apps/notifyfs/notify.js
index cd8d108d5..9cadbb124 100644
--- a/apps/notifyfs/notify.js
+++ b/apps/notifyfs/notify.js
@@ -1,7 +1,7 @@
 let oldg;
 let id = null;
 let hideCallback = null;
-
+const titleFont = g.getWidth() / 8;
 /**
  * See notify/notify.js
  */
@@ -50,22 +50,24 @@ exports.show = function(options) {
   if (options.on===undefined) options.on=true;
   id = ("id" in options)?options.id:null;
   let size = options.size||120;
-  if (size>120) {size=120}
-  Bangle.setLCDMode("direct");
+  if (size>120) size=120;
+  try { Bangle.setLCDMode("direct"); } catch(e) {} // not supported/needed on Bangle.js 2
   let x = 0,
     y = 40,
-    w = 240,
+    w = g.getWidth(),
     h = size;
   // clear screen
-  g.setColor(options.bgColor||0).fillRect(0,0,g.getWidth(),g.getHeight());
+  g.reset();
+  if (options.bgColor!==undefined) g.setColor(options.bgColor);
+  g.clearRect(0,0,g.getWidth(),g.getHeight());
   // top bar
   if (options.title||options.src) {
-    const title = options.title || options.src
-    g.setColor(options.titleBgColor||0x39C7).fillRect(x, y, x+w-1, y+30);
-    g.setColor(-1).setFontAlign(-1, -1, 0).setFont("6x8", 3);
+    const title = options.title || options.src;
+    g.setColor(options.titleBgColor||g.theme.bgH).fillRect(x, y, x+w-1, y+30);
+    g.setColor(g.theme.fgH).setFontAlign(-1, -1, 0).setFont("Vector", titleFont);
     g.drawString(title.trim().substring(0, 13), x+5, y+3);
     if (options.title && options.src) {
-      g.setColor(-1).setFontAlign(1, 1, 0).setFont("6x8", 2);
+      g.setColor(g.theme.fg).setFontAlign(1, 1, 0).setFont("6x8", 2);
       // above drawing area, but we are fullscreen
       g.drawString(options.src.substring(0, 10), w-16, y-4);
     }
@@ -73,8 +75,8 @@ exports.show = function(options) {
   }
   if (options.icon) {
     let i = options.icon, iw,ih;
-    if ("string"==typeof i) {iw=i.charCodeAt(0); ih=i.charCodeAt(1)}
-    else {iw=i[0]; ih=i[1]}
+    if ("string"==typeof i) {iw=i.charCodeAt(0); ih=i.charCodeAt(1);}
+    else {iw=i[0]; ih=i[1];}
     const iy=y ? (y+4) : (h-ih)/2; // show below title bar if present, otherwise center vertically
     g.drawImage(i, x+4,iy);
     x += iw+4;w -= iw+4;
@@ -84,16 +86,13 @@ exports.show = function(options) {
     const maxRows = Math.floor((h-4)/16), // font=2*(6x8)
       maxChars = Math.floor((w-4)/12),
       text=fitWords(options.body, maxRows, maxChars);
-    g.setColor(-1).setFont("6x8", 2).setFontAlign(-1, -1, 0).drawString(text, x+4, y+4);
+    g.setColor(g.theme.fg).setFont("6x8", 2).setFontAlign(-1, -1, 0).drawString(text, x+4, y+4);
   }
 
-  if (options.render) {
-    const area={x:x, y:y, w:w, h:h}
-    options.render(area);
-  }
-  if (options.on && !(require('Storage').readJSON('setting.json',1)||{}).quiet) {
+  if (options.render)
+    options.render({x:x, y:y, w:w, h:h});
+  if (options.on && !(require('Storage').readJSON('setting.json',1)||{}).quiet)
     Bangle.setLCDPower(1); // light up
-  }
   Bangle.on("touch", exports.hide);
   if (options.onHide)
     hideCallback = options.onHide;
diff --git a/apps/numerals/bangle1-numerals-screenshot.png b/apps/numerals/bangle1-numerals-screenshot.png
new file mode 100644
index 000000000..b663f5935
Binary files /dev/null and b/apps/numerals/bangle1-numerals-screenshot.png differ
diff --git a/apps/openstmap/app.js b/apps/openstmap/app.js
index 99f6d0c73..c33acd8ad 100644
--- a/apps/openstmap/app.js
+++ b/apps/openstmap/app.js
@@ -8,6 +8,7 @@ function redraw() {
   m.draw();
   drawMarker();
   if (WIDGETS["gpsrec"] && WIDGETS["gpsrec"].plotTrack) {
+    g.flip(); // force immediate draw on double-buffered screens - track will update later
     g.setColor(0.75,0.2,0);
     WIDGETS["gpsrec"].plotTrack(m);
   }
diff --git a/apps/pastel/ChangeLog b/apps/pastel/ChangeLog
new file mode 100644
index 000000000..6bfd2ce59
--- /dev/null
+++ b/apps/pastel/ChangeLog
@@ -0,0 +1,7 @@
+0.01: First release
+0.02: Display 12 hour clock as 12:xx not 00:xx when just into PM
+0.03: Make it work with Gadgetbridge, Notifications fullscreen on a Bangle 2
+0.04: Leave space at the bottom for Chrono widget, set back option at first option
+0.05: Added 2 new fonts
+0.06: COnverted fonts to font modules
+0.07: Added info line that cycles on BTN1/BTN3 (or vitual buttons on a bangle 2)
diff --git a/apps/pastel/README.md b/apps/pastel/README.md
new file mode 100644
index 000000000..f183005a9
--- /dev/null
+++ b/apps/pastel/README.md
@@ -0,0 +1,44 @@
+# Pastel Clock
+
+   *a configurable clock with custom fonts and background*
+
+* Designed specifically for Bangle 1 and Bangle 2
+* A choice of 7 different custom fonts
+* Supports the Light and Dark themes
+* Has a settings menu, change font, enable/disable the grid
+* On Bangle 1 use BTN1,BTN3 to cycle through the info display (Date, ID, Batt %, Ram % etc)
+* On Bangle 2 touch the top right/top left to cycle through the info display (Date, ID, Batt %, Ram % etc)
+
+
+I came up with the name Pastel due to the shade of the grid background.
+
+## Creator
+[Hugh Barney](https://github.com/hughbarney)
+
+## Lato
+![](screenshot_lato.png)
+
+
+## Architect
+![](screenshot_architect.png)
+
+
+## Gochihand
+![](screenshot_gochihand.png)
+
+
+## Monoton
+![](screenshot_monoton.png)
+
+
+## Elite
+![](screenshot_elite.png)
+
+
+## Cabin Sketch
+![](screenshot_cabinsketch.png)
+
+
+## Orbitron
+![](screenshot_orbitron.png)
+
diff --git a/apps/pastel/f_architect.js b/apps/pastel/f_architect.js
new file mode 100644
index 000000000..685b2fa03
--- /dev/null
+++ b/apps/pastel/f_architect.js
@@ -0,0 +1,9 @@
+var widths = atob("CBolByEeJykkJCYhCg==");
+var font = atob("AAAAAAAAAAAAAAAAYAAAAAAAADgAAAAAAAAeAAAAAAAAB4AAAAAAAAHgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAeAAAAAAAAD4AAAAAAAA/AAAAAAAAH4AAAAAAAB/AAAAAAAAf4AAAAAAAD+AAAAAAAA/wAAAAAAAH+AAAAAAAB/gAAAAAAAP8AAAAAAAD/AAAAAAAAf4AAAAAAAH+AAAAAAAA/gAAAAAAAP8AAAAAAAB/AAAAAAAAfwAAAAAAAH8AAAAAAAA/AAAAAAAAPwAAAAAAAB8AAAAAAAAfAAAAAAAADwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP8AAAAAAAP/8AAAAAAH//4AAAAAB///wAAAAAf/APgAAAAD/gAeAAAAA/wAA8AAAAH8AABwAAAA/AAAHgAAAHwAAAeAAAA+AAAA4AAADgAAADgAAAcAAAAOAAABwAAAA4AAAOAAAADgAAA4AAAAOAAADgAAAA4AAAOAAAADgAAA4AAAAOAAADgAAAB4AAAOAAAAHAAAA4AAAAcAAADwAAADwAAAHAAAAOAAAAeAAAB4AAAA4AAAPAAAADwAAB4AAAAHwAAPgAAAAPgAD8AAAAAf4D/gAAAAAf//4AAAAAAf/+AAAAAAAP/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD8AAAAP////4AAAB/////gAAAH////+AAAAf////gAAAAAAAAAAAAAAAAAAAAAAAAcAAAAAAAADwAADAAAAAeAAAeAAAAD4AAD4AAAAfAAAfgAAAD4AAD+AAAAPAAAf4AAAB8AAH/AAAAHgAA/8AAAAcAAH/wAAADwAA/vAAAAOAAP48AAAA4AB/DgAAADgAf4OAAAAPAD+A4AAAA8A/wHgAAAD8/8AcAAAAH//gBwAAAAP/wAPAAAAAf8AA8AAAAAAAADgAAAAAAAAeAAAAAAAAB4AAAAAAAAHgAAAAAAAA+AAAAAAAAD4AAAAAAAAPAAAAAAAAA8AAAAAAAAHwAAAAAAAAfAAAAAAAAA4AAAAAAAABAAAAAAIAAAAAAAADwAAAAAAAAPAAAAAAAAA8AAAAAAAADgAAAAAAAAeAAAAAAAAB4AYAAAAAAHgBwAAAAAAeAPABAAAADwA8AGAAAAPAHgAYAAAA8AeADgAAADwDwAOAAAAOAPAB4AAAB4B8AHgAAAHgPwA8AAAAeA+ADwAAAB4H4AeAAAAHgfgD4AAAAeD+AfAAAAB4e4D8AAAAHj7gfgAAAAf/PH8AAAAB/4//gAAAAH/D/8AAAAAP4H/gAAAAA+Af8AAAAAAAA/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMAAAAAAAADwAAAAAAAAfAAAAAAAAD8AAAAAAAA/wAAAAAAAH/AAAAAAAA/8AAAAAAAPxwAAAAAAB+HAAAAAAAPwcAAAAAAB+BwAAAAAAfwPAAAAAAD+A8AAAAAAfwDwAAAAAD+APAAAAAAPwA8AAAAAB+ADwAAAAAP/////AAAA/////8AAAB/////wAAAD/////AAAAD////8AAAAAAH8AAAAAAAAeAAAAAAAAB4AAAAAAAAHgAAAAAAAAeAAAAAAAAB4AAAAAAAAHgAAAAAAAAcAAAAAAAABwAAAAAAAAHAAAAAAAAAcAAAAAAAABwAAAAAAAAGAAAAAAAAAAAAAAAAAAOAAAAAAAH/8AAAAAAf//wAAAAAD///AAAAAAP//8AAAAAA///wAAAAAAPgPAB4AAAA+A4APgAAAD4DgA+AAAAPAeAB4AAAA8BwAHgAAADwHAAeAAAAPAcAB4AAAB4BgAHgAAAHgGAAeAAAAeAYAD4AAAB4BgAPAAAAPgGAA8AAAA8AYADwAAADwBwAOAAAAPAHAB4AAAA8AcAHgAAAHwB4A8AAAAeAHgHgAAAB4APh+AAAAHgA//wAAAA+AB/+AAAADwAD/wAAAAPAAD8AAAAA8AAAAAAAAHwAAAAAAAAfAAAAAAAAB4AAAAAAAAHgAAAAAAAAeAAAAAAAAB4AAAAAAAAHAAAAAAAAAcAAAAAAAABgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP+AAAAAAAH//AAAAAAB///AAAAAAP//+AAAAAD///8AAAAAf+B/4AAAAD/AA/wAAAA/wAA/gAAAD8AAB+AAAAfAAAD8AAAD4AAAPwAAAfAAAB/AAAB4AAAP+AAAPAAAB/4AAA8AAAP/gAAHgAAB++AAAeAAAPz4AABwAAB+PgAAHAAAPw+AAAcAAA+D4AABgAAHwPgAAAAAA/A+AAAAAAD4H4AAAAAAfAfAAAAAAB4D8AAAAAAPgPgAAAAAA8B+AAAAAADwPwAAAAAAPA+AAAAAAA8P4AAAAAAD//AAAAAAAP/4AAAAAAAf+AAAAAAAA/gAAAAAAAAAAAAAAAIAAAAAAAABwAAAAAAAAHAAAAAAAAAcAAAAAAAABwAAAAAAAAHAAAAAAAAAcAAAAAAAABwAAAAAAAAHAAAAAAAAAcAAAAAAAABwAAAAAAAAHAAAAAAAAAcAAAAAAAADwAAAAAAAAPAAAAAAAAA8AAAAAAAADwAAAAAAAAPAAAP4AAAA8AAP/gAAADwAH/+AAAAfAB//wAAAB8Af//AAAAHwH/4AAAAAfB/4AAAAAB8f8AAAAAAH//AAAAAAAf/wAAAAAAB/8AAAAAAAP/gAAAAAAA/4AAAAAAAD/AAAAAAAAPwAAAAAAAA+AAAAAAAADwAAAAAAAAGAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAeAAAAAAAAH+AAAAAAAA/8AAAAAAAP/4AAAAAfB//gAAAAH/Pw/AAAAA//8A8AAAAH//gDwAAAA//8AHgAAAD4fwAeAAAAeA+AB4AAAB4DwADgAAAPAPAAOAAAA4A4AA4AAADgDgADgAAAOAOAAOAAABwAwAA4AAAHAHAADgAAAcAcAAOAAABwBwAA4AAAHAPAAHgAAAcA8AAcAAABwDgABwAAAHAeAAHAAAAcB8AA4AAABwPwAHgAAAHg/AAcAAAAeH8ADwAAAB4/4AeAAAAD//gD4AAAAP+fA/AAAAAfx//4AAAAAAD//AAAAAAAP/wAAAAAAAP8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAH4AAAAAAAA/wAAAAAAAH/gAAAAAAA/+AAAAAAAH/8AAAAAAA/nwAAAAAAD4PAAAAAAAeA8AAAAAADwDwAAAAAAPAPAAAAAAB4A8AAwAAAHgDwAHgAAAeAPAAeAAADwA8AD4AAAPADwAfgAAA8AOAB8AAADwA4APwAAAPADgB+AAAA8AeAPwAAAD4B4B/AAAAHgHgf4AAAAfA+D+AAAAA/D5/wAAAAB///+AAAAAH///gAAAAAH//4AAAAAAP/+AAAAAAAP/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOAAAAAAAAA4AAAAAAAADwDAAAAAAAOAeAAAAAAAYB4AAAAAAAAHgAAAAAAAAMAAAAAAAAAAAAA=");
+
+exports.add = function(graphics) {
+  graphics.prototype.setFontArchitect = function(scale) {
+    // Actual height 40 (41 - 2)
+    this.setFontCustom(font, 46, widths, 58+(scale<<8)+(1<<16));
+  }
+};
diff --git a/apps/pastel/f_cabin.js b/apps/pastel/f_cabin.js
new file mode 100644
index 000000000..916677565
--- /dev/null
+++ b/apps/pastel/f_cabin.js
@@ -0,0 +1,9 @@
+var widths = atob("ECMtGCEiJSIkHyYlDw==");
+var font = atob("AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAH4AAAAAAAAAfwAAAAAAAAA7gAAAAAAAAA/AAAAAAAAAB+AAAAAAAAAD8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGAAAAAAAAAB8AAAAAAAAAf4AAAAAAAAB/wAAAAAAAAPBgAAAAAAAB4LAAAAAAAAPheAAAAAAAA+D8AAAAAAAHwPgAAAAAAA/I8AAAAAAAHwHgAAAAAAAeA8AAAAAAADwHwAAAAAAAfB+AAAAAAAH4PgAAAAAAB/D8AAAAAAAPwPgAAAAAAD8B8AAAAAAAfgPgAAAAAAH+A8AAAAAAA/gHgAAAAAADwG8AAAAAAAOAHgAAAAAAA4AYAAAAAAABgPgAAAAAAADB+AAAAAAAAHfgAAAAAAAAP8AAAAAAAAAPAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP/8AAAAAAAD///AAAAAAAfxn/wAAAAAD/jafwAAAAAP/Kkp4AAAAA7///X4AAAAD2///+4AAAAP//A/94AAAA//AAD/wAAAD/4AAB/wAAAO/AAAA/gAAAc8AAAA/gAAB/wAAAB/AAAD/AAAAB3AAAO+AAAADuAAAf4AAAAHcAAA/wAAAAG4AABvAAAAAPwAADMAAAAAfgAAGYAAAAA3AAANwAAAAB+AAAdgAAAAD8AAAZgAAAAOwAAA7AAAAAdAAAB3AAAAA7AAAB/AAAADuAAAB/AAAAPcAAAD/gAAA8gAAAD/4AADzAAAADv8AAPGAAAAD7/AD84AAAADwP//lgAAAADwP/8OAAAAADwCPA4AAAAAD4AAPgAAAAAB+AD8AAAAAAAf/+AAAAAAAAH8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHwAAAAAAAAAPwAAAAAAAAA7gAAAAAAAAD2AAAAAAAAAHcAAAAAAAAAd4AAAAAAAABz8AAAGAAAAHH/////gAAAcAf////wAAA2AAACAjgAABoAAAABCAAADAAEQAQWAAAH/////j8AAAH//////4AAAAAAAA/8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHgAAAAAAAAAPwAAAAGAAAAHgAAAA8AAAGfAAAAD4AAAf4AAAAPwAAA/gAAAA/gAADmAAAAD/AAAHYAAAAO+AAAMwAAAA5kAAAbgAAAHEIAAA/AAAAczQAAB+AAAB3tgAAD8AAAP/zgAAH4AAB/3eAAAP4AAH+P8AAAf4AAf4fYAAAf4AD7g8wAAA/4Af+B/gAABz8P/4BvAAAB///3gD+AAAB///8AHcAAAD/f/wAP4AAAD8z/AAZwAAAD4P4AA/gAAAB//AAB3AAAAAfgAAD+AAAAAAAAAH+AAAAAAAAAD4AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPAAAAAAAAAB/AAAAwAAAAHmAAAB4AAAAMOAAAH8AAAAI8AAAP4AOAA/4AAAfgB+AA9wAAA/AD8ABzgAAB+AG4ABnAAAH8AMwADeAAAPwAZgAHcAAAfgAzgAG4AAA/AB3AAMwAAB+AHuAAZgAAD8APcAAzAAAH8AeYABuAAAP4A44AHcAAAf4BxwAOYAAA74HR4AYwAAB1/8z4B3gAAB4/z3+PPAAADweHn/+OAAADgEfIP4YAAADkPmAkJwAAAB5+OFQHAAAAA/wOAAcAAAAAAAHAPwAAAAAAAD/+AAAAAAAAAfgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAAAAAAAAAAPAAAAAAAAAB+AAAAAAAAAHsAAAAAAAAAfYAAAAAAAAB8wAAAAAAAAPvgAAAAAAAB+/AAAAAAAAP/mAAAAAAAB//MAAAAAAAH7/YAAAAAAA+f/gAAAAAAD147gAAAAAAffB+AAAAAAH54D8AAAAAA/HgDoAAAAAH8cAPYAAAAA/7///wAAAAD3X////CAAAGO/e/f/+AAAM9/pP//8AAAYDXee/fYAAA///////wAAB///////gAAA/gAAb//AAAAAAAA2AAAAAAAAABsAAAAAAAAAD4AAAAAAAAAHwAAAAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOAAAAAAAAAB+AAAAAADwAD2AAAA///wAHeAAAH///gAP+AAAP//zAAeMAAAf//GAAYYAAA//+OAAwQAAB///cABwwAAD//+4AD9gAAH//9wAD3AAAPwD7gAHsAAAfgH/AAOYAAA/AHuAAZwAAB+AHcAB3gAAD8AP8ADnAAAH4Af4AP8AAAPwA94A94AAAfwA94P/wAAA/gB7//vAAAB/AD//+cAAADuAD3+3wAAAHcAD/NnAAAAP4AH2ZcAAAAPgAH8jwAAAAAAAH//AAAAAAAAD/4AAAAAAAAAeAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAf/AAAAAAAAP9/gAAAAAAD/AfwAAAAAAfAADwAAAAAD4CABwAAAAAfEI5BwAAAAB8AP/hwAAAAPAAf/wwAAAA8A9wHxwAAADif/ADzgAAAOV/+AD3AAAAYP/4ADnAAABg+fwAHOAAAHLw/gAHcAAAMfBnAAOYAAA48DcAAMwAABjwG4AA5gAAHHAMwAB3AAAOcAZgADuAAAdwAzgAGYAAAfABzAAdwAAAcADnABzAAAAQADngPuAAAAAADH/88AAAAAAHH/5wAAAAAAHD/XAAAAAAAHh8cAAAAAAAHnZwAAAAAAAH+fAAAAAAAAD/8AAAAAAAAA/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD8AAAAAAAAAH8AAAAAAAAAO4AAAAAAAAAdwAAAAAAAAA7gAAAABgAAB3AAAAAPgAADOAAAAD/AAAHcAAAAf+AAAO4AAAD8cAAAdwAAA/h4AAA7gAAH8/gAAB3AAB/n4AAADuAAP8/AAAAHcAB/H4AAAAO4A/0eAAAAAfwP/HwAAAAA/z/3eAAAAAB///34AAAAAD////AAAAAAH+/34AAAAAAP57+AAAAAAAf/3wAAAAAAA7/+AAAAAAAB//wAAAAAAAD/+AAAAAAAAH/wAAAAAAAAOeAAAAAAAAAf4AAAAAAAAA/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB/gAAAAAMAAf/wAAAAB/AB5j4AAAAH/gHBb4AAAAfHweD/wAAAB37x0f3wAAAHfx/f/9wAAAN/5///3gAAAfA5/8D7gAAB+A5vgDnAAADYA94AHOAAAGwA7wAHsAAAPgA/gAPcAAA/AB/AAc4AABuAD+AA9wAADcAP8AB/gAAH4Ab4ADjAAAPwB0wAHuAAAZgH5wAO8AAAzgd/gA84AAAz///gB5gAABn/u7gHHAAAB71438+OAAAB2/gz/7YAAAB98B2/zwAAAB/wB4h3AAAAA4AB7Y+AAAAAAAB+Z4AAAAAAAA8fAAAAAAAAAf4AAAAAAAAAHAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAYAAAAAAAAAf/gAAAAAAAB//4AAAAAAAPjX4AAAAAAA8H/4AAAAAABwXq4AAAAAAHD/F4AAAAAAOP/9wABgAAA94B7wADAAAB3gB5gAOAAADcAB7AAeAAAO4AD2AA8AAAfgADmAD8AAA/AAHcAHwAAB+AAO4AfgAAD8AAfwB+AAAH4AA/gH8AAAPwAD2AfwAAAfgAH8B/gAAA/AAP4PuAAAB3AA5h84AAADvADn/ngAAAD/gPf8+AAAAHvx9/fgAAAAH//wN/AAAAAH3/AP4AAAAAH34g+AAAAAAD/hfwAAAAAAD//8AAAAAAAA//gAAAAAAAADwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHwAHwAAAAAAHgAfgAAAAAAPAAfAAAAAAAeAA2AAAAAAA4AB8AAAAAABQAB4AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=");
+
+exports.add = function(graphics) {
+  graphics.prototype.setFontCabinSketch = function() {
+    // Actual height 48 (51 - 4)
+    this.setFontCustom(font, 46, widths, 65+(1<<8)+(1<<16));  
+  }
+};
diff --git a/apps/pastel/f_elite.js b/apps/pastel/f_elite.js
new file mode 100644
index 000000000..a5cac2838
--- /dev/null
+++ b/apps/pastel/f_elite.js
@@ -0,0 +1,7 @@
+
+exports.add = function(graphics) {
+  graphics.prototype.setFontSpecialElite = function(scale) {
+    // Actual height 40 (39 - 0)  
+    this.setFontCustom(atob("AAAAAAAAAAAAAAAAAAAAAYAAAAAAAfwAAAAAAP/AAAAAAH/4AAAAAB/+AAAAAAf/gAAAAAH/4AAAAAB/+AAAAAAf/gAAAAAH/4AAAAAAv8AAAAAAN6AAAAAAAeAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA4AAAAAAAfAAAAAAAPwAAAAAAP8AAAAAAH+AAAAAAH+AAAAAAD+AAAAAAD/AAAAAAD/AAAAAAB/AAAAAAB/AAAAAAB/AAAAAAB/gAAAAAB/gAAAAAB/gAAAAAA/gAAAAAB/wAAAAAA/4AAAAAA/wAAAAAA/4AAAAAA/4AAAAAAf8AAAAAAP8AAAAAAD8AAAAAAA8AAAAAAAGAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA//wAAAAP///gAAAH/9/+AAAD/gAf4AAB/AAB+AAA/AAAHwAAPAAAA+AADgAAAPgAAwAAAD4AAcAAAAfAAHAAAAHwABwAAAB8AA4AAAAfAAOAAAAHwABwAAAB8AAcAAAA/AAHgAAAPgAB+AAAH4AAPgAAD8AAD+AAD+AAA/4Af/AAAB////AAAAP///wAAAAP//gAAAAAP8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIAAOAAAAHAADgAAAD4AB4AAAA+AAeAAAAPgAHgAAAD4AB4AAAAeAAeAAAAHgAHgAAAB4AB4AAAAcAAeAAAAPAAH4AAP/wAB/////+AAf/////gAH/////4AB///+/+AAAAQAAPgAAAAAAB4AAAAAAAeAAAAAAAHgAAAAAAD4AAAAAAA+AAAAAAAPgAAAAAADwAAAAAAA+AAAAAAAPgAAAAAAB4AAAAAAAAAAAAAAAAAAAAAAAcAAAB+AAfwAAA/wAf/AAA/8Af/wAAf/AP/8AAGPwP//AADh8D48AAA4OB8OAAAOAAfDgAAHAAPg4AABwADwPAAAcAB8DwAAHAAeAeAABwAHAHgAAcADwB8AAHAB4APgAB4A+AB4AAPAfAAeAAD4fgADgAAf/4AA4AAD/8AAeAAAf+AAfAAAB8AAPwAAAAAAD4AAAAAAA8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/gAAAAAAf8AAB/wAH/wAAf8AB/8AAH+AAffgAB4AcDx4AAcAPAAfAAHAPwAHwABwHwAA8AAcB+AAPAAHA/gADwABw/4AA8AAcf+AAPAAHP/gAHwABz74AB8AAf8fAA/AAH8DwAPgAD/A8AHwAA/gHwP8AAPwA//+AADwAH//AAAAAA//gAAAAAD/wAAAAAAHAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPgAAAAAAP8AAAAAAD/AAAAAAD/wAAAAAD/8AAAAAB/PAAAAAA/jwAAAAAfg8AAAAAPwPAAAAAH4DwAAAAD4A8HAAAD8APBwAAB+ADw8AAA+AA8PAAA/AAPDgAAPgADw8AAHwAB8/AAD+B///wAA/////8AAP/////AAB+f///wAAAAAHx8AAAAAB8PAAAAAAPDwAAAAADw8AAAAAA4PAAAAAAODwAAAAADgcAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADwAAAAAAB/gAAH//wf8AAB//+H/gAAf//h/4AAHJ/wf/AABwD4D/4AAeA+AAeAAHgPAAHgAB4DwAB4AAeA4AAeAAHgOAAHgAA4DgAB4AAOA8AAeAADgPAAHgAB4D4ADwAAeAeAB4AAHAHwAeAABgAfAPgAAYAD8fgAAAAA//wAAAAAH/4AAAAAAfgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB8AAAAAA//wAAAAB///AAAAB////AAAB/7//wAAA/AfB+AAAfAPAPwAAPgHgB+AAHwBwAPgAB4A8AB8AAeAPAAfAAPADwAHwADgA8AB8AA8APAAfAAPADwAHwADwA8AB8AA8AHgA+AAP8B4APgAD/wfAH4AA/8D4D8AAH/A///AAB/wH//gAAH8A//wAAA8AH/4AAAAAA/4AAAAAAAAAAAAAAAAAAAAAAAAAAAAAPgAAAAAB/4AAAAAA/8AAAAAAP+AAAAAAD+AAAAAAAeAAAAAAAHAAAAAAADwAAAAAAB8AAAAAAAfAAAAAAAHwAAA/8AD+AAB//AA/gAB//wAP4AB//gAB+AB//AAAfwB//AAAH8A/wAAAA/A/wAAAAHw/wAAAAB8/wAAAAAffwAAAAAP/wAAAAAD/4AAAAAA/4AAAAAAP8AAAAAAD4AAAAAAAYAAAAAAAAAAAAAAAAAAAAAAAAAAADAAAAAAAP/wAAAH8H/+AAAH/z//wAAD////+AAB///h/gAA/B/gH4AAPAP4A/AAHwB8AHwAB4APAB8AAeADgAfAAHgA4ADwABwAOAA8AAcADgAPAAHAA4ADwAB4AeAA8AAfAHwAPAADwB8AHgAA+A/gD4AAPgP4B+AAB+P/h/gAAP////wAAB/8f/4AAAP8D/8AAAAAAf8AAAAAAAYAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAeAAAAAAA/4APAAAA//gH4AAAP/8D/gAAP4Pg/8AADwB8P/AAB4AfD/4AAeAD4d+AAHAA+AfwADwAHgH8AA4AA8A/AAOAAPAPgADgADwD4AA8AA4B+AAPAAeAfAAB4AHgHgAAeADwD4AAHwA8A8AAA+AfA/AAAHp/h/gAAA3//+gAAAB//+gAAAAd//gAAAACf/wAAAAAH/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABwAAAABwB/AAAAB/A/8AAAA/wf/gAAAP+H/4AAAH/h/+AAAB/8f/gAAAP+H/4AAAD/h/+AAAAfwf/gAAAH8C/wAAAAAA3oAAAAAABwAAAAAAAAAAAAAAAAAAAA=="), 46, atob("ERwfHB0cHxsdHB4dEQ=="), 50+(scale<<8)+(1<<16));
+  }
+};
diff --git a/apps/pastel/f_gochihand.js b/apps/pastel/f_gochihand.js
new file mode 100644
index 000000000..8ef926f39
--- /dev/null
+++ b/apps/pastel/f_gochihand.js
@@ -0,0 +1,10 @@
+
+var widths = atob("GRMtICcqJiopKiwoGQ==");
+var font = atob("AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAA+AAAAAAAAAAAAfwAAAAAAAAAAAH+AAAAAAAAAAAB/gAAAAAAAAAAAf4AAAAAAAAAAAH+AAAAAAAAAAAB/gAAAAAAAAAAAP4AAAAAAAAAAAD8AAAAAAAAAAAAOAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABwAAAAAAAAAAAP+AAAAAAAAAAA//gAAAAAAAAAH//4AAAAAAAAA///+AAAAAAAAP////gAAAAAAB/////4AAAAAAP/////+AAAAAD//////+AAAAA///////wAAAAAf//////AAAAAAP/////4AAAAAAD/////AAAAAAAA////4AAAAAAAAP//+AAAAAAAAAD//gAAAAAAAAAA/8AAAAAAAAAAAHAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/gAAAAAAAAAAH//AAAAAAAAAAH//8AAAAAAAAAH///wAAAAAAAAD///+AAAAAAAAB////wAAAAAAAA////+AAAAAAAAf////gAAAAAAAP/8//8AAAAAAAD/wAf/AAAAAAAB/wAD/4AAAAAAA/4AAP+AAAAAAAP8AAB/wAAAAAAD/AAAf8AAAAAAB/gAAD/AAAAAAAf4AAA/wAAAAAAH8AAAP8AAAAAAB/AAAD/AAAAAAAfwAAA/wAAAAAAP8AAAH8AAAAAAD/AAAD/AAAAAAAf4AAA/wAAAAAAH+AAAP8AAAAAAB/gAAD/AAAAAAAf4AAA/wAAAAAAH/AAAP4AAAAAAB/wAAH+AAAAAAAP+AAB/gAAAAAAD/wAA/wAAAAAAA/+AAf8AAAAAAAH/wAH+AAAAAAAB/+AH/gAAAAAAAP/4D/wAAAAAAAB////4AAAAAAAAf///+AAAAAAAAD////AAAAAAAAAf///gAAAAAAAAD///wAAAAAAAAAP//wAAAAAAAAAA//4AAAAAAAAAAD/4AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB8AAAAAAAAAAAA/gAAAAAAAAAAAf4AAAAAAAAAAAP+AAAAAAAAAAAH/gAAAAAAAAAAB/wAAAAAAAAAAA/4AAAAAAAAAAAf8AAAAAAAAAAAH/AAAAAAAAAAAD/gAAAAAAAAAAA/wAAAAAAAAAAAf4AAAAAAAAAAAP+AAAAAAAAAAAD/AAAAAAAAAAAB/wAAAAAAAAAAAf+AAAAAAAAAAAH/4AAAAAAAAAAD//8AAAAAAAAAA////4AAAAAAAAP/////gAAAAAAB/////8AAAAAAAf/////AAAAAAAB/////wAAAAAAAP////8AAAAAAAAP////AAAAAAAAAH///wAAAAAAAAAAf/4AAAAAAAAAAAA4AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAAAAHwAAAAAAD8AAAD+AAAAAAB/AAAB/gAAAAAA/4AAA/8AAAAAAf+AAAf/AAAAAAH/gAAH/wAAAAAD/wAAD/8AAAAAB/4AAB//AAAAAAf8AAA//wAAAAAH+AAAf/8AAAAAD/AAAP//AAAAAA/wAAD//wAAAAAP4AAB//8AAAAAD+AAA///AAAAAA/gAAf8/wAAAAAP4AAP+P8AAAAAD/AAP/j/AAAAAA/wAH/w/wAAAAAP+AH/4P8AAAAAD/wD/8D/AAAAAA//P/+A/wAAAAAH////AP+AAAAAB////AB/gAAAAAP///gAf4AAAAAD///wAH+AAAAAAf//wAB/gAAAAAD//4AAf4AAAAAAP/4AAH+AAAAAAA/wAAB/gAAAAAAAAAAAf4AAAAAAAAAAAH+AAAAAAAAAAAA/gAAAAAAAAAAAPwAAAAAAAAAAAAgAAAAAAAAAAAAAAAAAAAHgAAAAAAAAAAAD8AAAAAAAAAAAB/gAAAAAAAAAAAf8AAAAAAAAAAAP+AAAAAAAAAAAD/gAAAAAAAAAAB/wAAAcAAAAAAAf8AAAPwAAAAAAH+AAAD/AAAAAAB/gAAA/4AAAAAA/wAAAP/AAAAAAP8AAAD/4AAAAAD/AB+A//AAAAAA/wA/wH/wAAAAAP4AP8A/+AAAAAD+AD/AD/gAAAAA/gB/wAf8AAAAAP8Af8AH/AAAAAD/AH/AA/wAAAAA/wB/gAP8AAAAAP+Af4AD/AAAAAD/gP+AA/wAAAAAf+H/gAP8AAAAAH///4AD/AAAAAB////AA/wAAAAAP///wAP8AAAAAB///+AD/AAAAAAf///gA/gAAAAAD///+Af4AAAAAAP/n/4f+AAAAAAB/g////AAAAAAAAAP///wAAAAAAAAB///4AAAAAAAAAP//8AAAAAAAAAB///AAAAAAAAAAP//AAAAAAAAAAA//gAAAAAAAAAAD/gAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHwAAAAAAAAAAAH+AAAAAAAAAAAH/wAAAAAAAAAAD/+AAAAAAAAAAD//gAAAAAAAAAB//8AAAAAAAAAB///AAAAAAAAAA///wAAAAAAAAAf//8AAAAAAAAAf/7/AAAAAAAAAP/4/4AAAAAAAAP/4H+AAAAAAAAH/8B/gAAAAAAB//8Af4AAAAAAA//+AH+AAAAAAAP//AB/gAAAAAAH//wAf4AAAAAAB///AH+AAAAAAAf//+B/gAAAAAAH///+f4AAAAAAA/////+AAAAAAAH/////wAAAAAAA/////8AAAAAAAAf////8AAAAAAAAf////+AAAAAAAA/////4AAAAAAAA/////AAAAAAAAB////wAAAAAAAAB///8AAAAAAAAAD///AAAAAAAAAA///wAAAAAAAAAP//4AAAAAAAAAD/D8AAAAAAAAAA/wAAAAAAAAAAAH4AAAAAAAAAAAA4AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAf8AAAAAAAAf4AP/wAAAAAAAf/AH/+AAAAAAAP/4D//wAAAAAAD//A//+AAAAAAB//wP//wAAAAAAf/8D//8AAAAAAH//g///gAAAAAB//4H//4AAAAAAf//AAf/AAAAAAP9/wAD/wAAAAAD/P+AAf8AAAAAA/j/gAD/AAAAAAP4f4AA/4AAAAAD+H/AAH+AAAAAA/h/wAB/gAAAAAP4P+AAf4AAAAAD+D/gAH+AAAAAA/g/4AA/gAAAAAP4H/AAP4AAAAAD+B/wAD+AAAAAB/gP+AA/gAAAAAf4D/gAP4AAAAAH+Af8AH+AAAAAB/gH/gB/gAAAAAf4B/4Af4AAAAAH+AP/AH8AAAAAB/gB/4D/AAAAAAf4Af/h/wAAAAAD+AD///4AAAAAA/gA///+AAAAAAP4AH///AAAAAAD+AA///gAAAAAA/gAH//wAAAAAAH4AA//4AAAAAAAMAAD/8AAAAAAAAAAAP8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/8AAAAAAAAAAH//wAAAAAAAAAH///AAAAAAAAAD///4AAAAAAAAD////gAAAAAAAB////8AAAAAAAA/////gAAAAAAAf////4AAAAAAAH/4B//AAAAAAAD/wAP/4AAAAAAA/4AD/+AAAAAAAf8AB//wAAAAAAH+AAf/8AAAAAAD/AAP//gAAAAAA/wAD//4AAAAAAP8AA/n+AAAAAAD/AAf5/gAAAAAA/wAH8P8AAAAAAP8AB/D/AAAAAAD/AA/w/wAAAAAA/4AP8P8AAAAAAP+AD+D/AAAAAAD/wA/g/wAAAAAAf8AP4P8AAAAAAH+AD+D/AAAAAAA/gA/g/wAAAAAAHwAP8P8AAAAAAAwAD/D/AAAAAAAAAA/x/wAAAAAAAAAP//4AAAAAAAAAD//+AAAAAAAAAAf//AAAAAAAAAAH//wAAAAAAAAAA//4AAAAAAAAAAH/8AAAAAAAAAAB/+AAAAAAAAAAAH/AAAAAAAAAAAAeAAAAAAAD+AAAAAAAAAAAA/gAAAAAAAAAAAP4AAAAAAAAAAAD+AAAAAAAAAAAA/gAeAAAAAAAAAP4AfwAAAAAAAAD+AH8AAAAAAAAA/gB/AAAAAAAAAP4AfwAAAAAAAAD+AH8AAAAAAAAA/gB/AAAAAAAAAP4AfwAAAAAAAAD+AH8AAAAAAAAA/wD/AAAAAAAAAP8A/wAAAAAAAAD/AP8AAAAAAAAA/wD/AAAAAAAAAP8A/wAAAAAAAAD/gP8AAAAAAAAA/4D/AAAAAAAAAH/A/wAAAAAAAAB/4P+AHwAAAAAAf//////AAAAAAD//////wAAAAAA//////8AAAAAAH//////AAAAAAB//////wAAAAAAP/////8AAAAAAB/////+AAAAAAAH/////AAAAAAAAAP+AAAAAAAAAAAB/gAAAAAAAAAAAf4AAAAAAAAAAAH+AAAAAAAAAAAB/gAAAAAAAAAAAf4AAAAAAAAAAAH+AAAAAAAAAAAB/gAAAAAAAAAAAP4AAAAAAAAAAAD+AAAAAAAAAAAA/gAAAAAAAAAAAP4AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB/wAAAAAAAAAAD//AAAAAAAAD+D//8AAAAAAAD/9///gAAAAAAB/////8AAAAAAA//////AAAAAAAf/////4AAAAAAH//////AAAAAAD///4H/wAAAAAA///4Af+AAAAAAP4f+AD/gAAAAAH+D/gAf4AAAAAB/A/4AH/AAAAAAfwP+AA/wAAAAAH8D/wAP8AAAAAB/A/8AD/AAAAAAfwP/AAfwAAAAAH+D/wAH8AAAAAB/g/8AB/AAAAAAf4P/AAfwAAAAAH+D/wAH8AAAAAB/w/8AB/AAAAAAP+P+AA/wAAAAAD/x/gAP8AAAAAA///8AD+AAAAAAH///gB/gAAAAAB///4Af4AAAAAAP///gP8AAAAAAB///+H/AAAAAAAP/////gAAAAAAB/////4AAAAAAAH////8AAAAAAAAAH//+AAAAAAAAAA///AAAAAAAAAAD//gAAAAAAAAAAP/wAAAAAAAAAAA/gAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/+AAAAAAAAAAB//wAAAAAAAAAA//+AAAAAAAAAAf//wAAAAAAAAAH//8AAAAAAAAAD///gAAAAAAAAA///4AAAAAAAAAf4H/AAAAAAAAAH+B/wAAAAAAAAB/AP8AAAAAAAAA/wD/AAAAAAAAAP4A/wAAAAAAAAD+AP8AAAAAAAAB/gD/AAAAAAAAAf4A/wAAAAAAAAH+AP8AAAAAAAAB/AD/AAAAAAAAAfwB/gAAAAAAAAH8Af4AAAAAAAAB/AP8AAAAAAAAAfwD/AAAAAAAAAH8B/wAAAAAAAAB/Af4AAAAAAAAAf4P8AAAAAAAAAH+H/AAAAAAAAAB/j/gAAAAAAAAAf//////wAAAAAH///////gAAAAA///////8AAAAAP///////AAAAAD///////wAAAAAf//////4AAAAAH//////+AAAAAB///////gAAAAAP//////wAAAAAB/gAAAAAAAAAAAfgAAAAAAAAAAADwAAAAAAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIAACAAAAAAAAAPgAD4AAAAAAAAH8AB/AAAAAAAAB/gAf4AAAAAAAAf4AH+AAAAAAAAH+AB/gAAAAAAAB/gAf4AAAAAAAAf4AH+AAAAAAAAD+AA/gAAAAAAAA/AAPwAAAAAAAADgAA4AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA");
+
+exports.add = function(graphics) {
+  graphics.prototype.setFontGochiHand = function() {
+    // Actual height 54 (59 - 6)
+    this.setFontCustom(font, 46, widths, 80+(1<<8)+(1<<16));
+  }
+};
diff --git a/apps/pastel/f_lato.js b/apps/pastel/f_lato.js
new file mode 100644
index 000000000..a7c13fd30
--- /dev/null
+++ b/apps/pastel/f_lato.js
@@ -0,0 +1,10 @@
+
+var widths = atob("DhglJSUlJSUlJSUlEA==");
+var font = atob("AAAAAAAAAAAAAAAAAAAAAAAAAAAAA4AAAAAAAAAHwAAAAAAAAA/gAAAAAAAAH/AAAAAAAAAf8AAAAAAAAB/wAAAAAAAAD+AAAAAAAAAHwAAAAAAAAAOAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADwAAAAAAAAB/AAAAAAAAAf8AAAAAAAAP/wAAAAAAAD/8AAAAAAAB//AAAAAAAAf/wAAAAAAAP/4AAAAAAAD/+AAAAAAAA//AAAAAAAAf/wAAAAAAAH/4AAAAAAAD/+AAAAAAAA//AAAAAAAAf/wAAAAAAAH/4AAAAAAAD/+AAAAAAAA//AAAAAAAAf/wAAAAAAAD/4AAAAAAAAP+AAAAAAAAA/AAAAAAAAADwAAAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB//+AAAAAAA////AAAAAAP////gAAAAD/////AAAAA//////AAAAH/////+AAAA//gAH/8AAAH/gAAB/4AAA/4AAAB/wAAD+AAAAB/AAAfwAAAAD+AAB+AAAAAH4AAH4AAAAAfgAAfAAAAAA+AAD8AAAAAD8AAPwAAAAAPwAA/AAAAAA/AAD8AAAAAD8AAPwAAAAAPwAAfAAAAAA+AAB+AAAAAD4AAH4AAAAAfgAAfwAAAAD+AAA/gAAAAfwAAD/gAAAH/AAAH/gAAB/4AAAP/4AB//AAAAf/////4AAAA//////AAAAA/////4AAAAB////+AAAAAA////AAAAAAAf//gAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOAAAAAAAAAB8AAAAAAAAAPwAAAD4AAAB/AAAAPgAAAP4AAAA+AAAB/AAAAD4AAAP8AAAAPgAAA/gAAAA+AAAH8AAAAD4AAA/gAAAAPgAAH8AAAAA+AAA/gAAAAD4AAH///////gAAf//////+AAB///////4AAH///////gAAf//////+AAB///////4AAAAAAAAAPgAAAAAAAAA+AAAAAAAAAD4AAAAAAAAAPgAAAAAAAAA+AAAAAAAAAD4AAAAAAAAAPgAAAAAAAAA+AAAAAAAAAD4AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHgAAADwAAAA+AAAA/AAAAH4AAAP8AAAA/gAAB/wAAAH+AAAP/AAAA/4AAB/4AAAH/gAAH+AAAA/+AAA/gAAAH/4AAD8AAAA/vgAAfgAAAH8+AAB+AAAA/n4AAHwAAAH8fgAA/AAAA/h+AAD8AAAH8H4AAPwAAA/gfgAA/AAAH8B+AAD8AAA/gH4AAPwAAH8AfgAAfAAB/gB+AAB+AAP8AH4AAH8AB/gAfgAAP4Af8AB+AAA/8f/gAH4AAB///8AAfgAAH///gAB+AAAP//4AAH4AAAP//AAAfgAAAf/wAAB+AAAAP4AAAD4AAAAAAAAAPgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAHgAAAAA8AAA/gAAAAPwAAD/AAAAD/AAAP+AAAAf8AAA/8AAAD/wAAB/4AAAf+AAAB/wAAD/gAAAB/AAAP4AAAAD+AAB/AAAAAH4AAH4AAAAAfgAAfgAAAAA+AAB8AAAAAD8AAPwAB4AAPwAA/AAHgAA/AAD8AAfAAD8AAPwAD8AAPwAA/AAPwAA/AAD8AA/AAD4AAHwAH8AAfgAAfgAf4AB+AAB/AD/gAP4AAD+AffAB/AAAP//9/Af8AAAf//n///gAAB//+P//8AAAD//wf//gAAAD/+A//8AAAAH/gB//gAAAAAAAB/4AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOAAAAAAAAAB+AAAAAAAAAf4AAAAAAAAD/gAAAAAAAAf+AAAAAAAAH/4AAAAAAAA//gAAAAAAAH++AAAAAAAB/z4AAAAAAAP+PgAAAAAAB/g+AAAAAAAf8D4AAAAAAD/gPgAAAAAAf4A+AAAAAAH/AD4AAAAAA/wAPgAAAAAH+AA+AAAAAB/wAD4AAAAAP8AAPgAAAAB/gAA+AAAAAf8AAD4AAAAD/AAAPgAAAAf4AAA+AAAAB///////4AAH///////gAAf//////+AAB///////4AAH///////gAAAAAAA+AAAAAAAAAD4AAAAAAAAAPgAAAAAAAAA+AAAAAAAAAD4AAAAAAAAAPgAAAAAAAAA+AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIAAAAAAAAADwAAAAAAQAAfgAAAAA/gAB+AAAAD/+AAH8AAAP//4AAPwAAH///gAAfgAAf//+AAB+AAB///4AAH4AAH/wPgAAPgAAfgB8AAA/AAB+AHwAAD8AAH4AfAAAPwAAfgB8AAA/AAB+AHwAAD8AAH4AfAAAPwAAfgB+AAA+AAB+AH4AAD4AAH4AfgAAfgAAfgA/AAD+AAB+AD8AAPwAAH4AP4AD/AAAfgAf4Af4AAB+AB////AAAH4AD///4AAAfAAH///AAAB8AAP//4AAAHwAAf//AAAAAAAAf/wAAAAAAAAHwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/gAAAAAAAB//gAAAAAAAf//gAAAAAAH///gAAAAAA////AAAAAAP///8AAAAAB//Af4AAAAAf/wAfwAAAAD/8AA/AAAAAf/wAB+AAAAH/+AAH4AAAA/7wAAPgAAAH/PAAA/AAAB/58AAD8AAAP+HwAAPwAAB/wfAAA/AAAf+B8AAD8AAD/wHwAAPwAAf8AfAAA+AAB/gB8AAD4AAH8AH4AAfgAAfgAfgAB+AAB4AA/AAPwAAHAAD+AB/AAAYAAP+Af4AAAAAAf///AAAAAAA///8AAAAAAB///gAAAAAAD//4AAAAAAAH//AAAAAAAAH/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB8AAAAAAAAAH4AAAAAAAAAfgAAAAAAAAB+AAAAAAAAAH4AAAAAAgAAfgAAAAAOAAB+AAAAAD4AAH4AAAAA/gAAfgAAAAP+AAB+AAAAD/4AAH4AAAA//AAAfgAAAP/4AAB+AAAD/+AAAH4AAA//gAAAfgAAP/4AAAB+AAD/+AAAAH4AA//gAAAAfgAP/4AAAAB+AB/+AAAAAH4Af/gAAAAAfgH/4AAAAAB+B/+AAAAAAH4f/gAAAAAAfn/4AAAAAAB//+AAAAAAAH//gAAAAAAAf/4AAAAAAAB/+AAAAAAAAH/gAAAAAAAAf4AAAAAAAAB+AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP+AAAAAAwAD/+AAAAA/8Af/8AAAAP/4D//4AAAB//4f//wAAAP//j///gAAB///P8H/AAAP////AH8AAA/gH/wAP4AAH4AH+AAfgAAfgAf4AA+AAB8AA/gAD4AAHwAD8AAPwAA+AAHwAAfAAD4AAfAAB8AAPgAB8AAHwAA+AAHwAAfAAD4AAfAAB8AAHwAD8AAPwAAfAAPwAA+AAB+AB/gAD4AAH4AH+AAfgAAP4B/8AD+AAA/8//4AfwAAB///P8H/AAAD//8///4AAAH//h///AAAAP/4D//4AAAAP/AH//AAAAAHAAP/4AAAAAAAAP+AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/8AAAAAAAAP/8AAAAAAAD//4AAAAAAAf//4AAAAAAD///gAAAAAAf///AAAIAAB/gP+AABgAAP4AP4AAeAAA/AAfwAD4AAH4AA/AAfgAAfgAB8AH+AAB8AAHwA/4AAPwAAfAH/gAA/AAB8B/8AAD8AAHwP/AAAPwAAfB/4AAA/AAB8P+AAAD8AAHj/wAAAHwAAef8AAAAfgAD7/gAAAB+AAP/8AAAAD8AB//AAAAAP4AP/4AAAAAf4D/+AAAAAB////wAAAAAD///8AAAAAAH///gAAAAAAH//4AAAAAAAP/+AAAAAAAAH/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAeAAAfAAAAAD8AAD+AAAAAf4AAP4AAAAB/gAB/wAAAAH+AAH/AAAAAf4AAP4AAAAA/AAA/gAAAAB4AAB8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=");
+
+exports.add = function(graphics) {
+  graphics.prototype.setFontLato = function() {
+    // Actual height 50 (53 - 4)
+    this.setFontCustom(font, 46, widths, 64+(1<<8)+(1<<16));
+  }
+};
diff --git a/apps/pastel/f_latosmall.js b/apps/pastel/f_latosmall.js
new file mode 100644
index 000000000..8ceb61ccf
--- /dev/null
+++ b/apps/pastel/f_latosmall.js
@@ -0,0 +1,10 @@
+
+var widths = atob("BAgJDQ0RDwUHBwkNBQgFCA0NDQ0NDQ0NDQ0GBg0NDQkSDw4PEQ0MEBEHCg8LFBESDRIODA0QDxYODg4HCAcNCQcLDAoMDAcLDAYGDAYSDAwMDAkKCAwLEQsLCgcHBw0A");
+var font = atob("AAAAAAAAAAAAAAAAAAAAAAAAEA/84D/zgAAEAAAAAAAAAAAA+AAD8AAAAAAAAAD4AAPgAAAAAAAAAABAADGIAM/gB/8A/+AD8YAAx+AD/4B/4APxgAjGAAIAAAAAAAAAAAAADwMAfg4DnBgMMHg///P/5gMGGAwc4Bg/AEB4AAAAA4AAHwAA5gYDCDgMIcAxjgB84ADnAAA4AAHOABz8AOMYBwwgMDCAgP4AAfAAAAAAAAAAeAAH8APY4B/BgMcGAw4YDBxgMDmA4HwBwPAAB8AAf4ABhgAACAAAAD4AAPgAAAAAAAAAAAAAH/gB//wfAHzgAHAAAAAAAAAAAOAAcfAPwf/8Af+AAAAAAAAAAAANgAAUAABwAAfwAAcAADQAAJAAAAAAAAAAAGAAAYAABgAAGAAP/gA/+AAGAAAYAABgAAGAAAQAAAAAAAEAAA7AAD4AAAAAAAAAAAAGAAAYAABgAAGAAAYAAAgAAAAAAAAAADgAAOAAAYAAAAAAPAAD4AB8AAfAAHwAD4AAeAABAAAADgAB/wAf/wBwHAMAGAwAYDABgMAGA4A4B4PAD/4AH/AAAAAAAAAAAAAYAgDgGAcAYDgBgP/+A//4AABgAAGAAAYAAAAAAAAAAAAQBgHgOAcB4DgPgMA2AwGYDAxgOOGAfwYB+BgBgGAAAAAAAADA4AcDwDgDgMAGAwgYDDBgMcGA5w4B9/ADj4AAAAAAAAABgAAOAAB4AAfgADmAAcYADhgA4GAD//gP/+AAGAAAYAAAgAAAAAADAH4OA/gYDGBgMYGAxgYDGDgMccAw/wCB8AAAAAAAAAAYAAH4AB/wAPjgB8GAOwYDzBgOMGAg44AD/AAH4AACAAAAAAAAAwAADAAAMAGAwB4DAfAMHwAw8ADPAAPwAA+AADgAAAAAAAAAA4+AH38A/44DHBgMMGAwwYDHBgOeOAffwA4/AABwAAAAAAAAAAAAPgAB/AAOMGAww4DBngMF4Aw/ADj4AH+AAPwAAAAAAAAADg4AODgAwGAAAAAAAAAAAABAAAODsA4PgBAYAAAAAAAAAQAABgAAPAAA8AAG4AAZgADHAAMMABgwAAAAAAAAAAAAAAAAEQAAZgABmAAGYAAZgABmAAGYAAZgABmAAGYAAAAAAAAAAAAAAAAGDAAMMAAxwABmAAG4AAPAAA8AABgAAEAAAAAAAAAEAAA4AADABgMHOAw84DGAAP4AAfAAAAAAACAAD/gAePADgGAYAMBh8YMPxgxxGDGEIIYwgxOCDH8IMYRgYBGAwMwD/hAD8AAAAAAAGAAB4AAfgAP4AD+AA/YAPhgA4GAD4YAD9gAD+AAD+AAB+AAB4AABgAAAAAAAD//gP/+AwYYDBhgMGGAwYYDDhgOOGA/84B+/ABh4AAAAAAAAA/gAH/gA+/AHAcA4A4DgBgMAGAwAYDABgMAGA4A4BgDAGAMAAAAAAAAAAAA//4D//gMAGAwAYDABgMAGAwAYDABgOAOAYAwB4PAD/4AH/AAHwAAAAAAAAAAAAP/+A//4DDBgMMGAwwYDDBgMMGAwwYDABgMAGAAAAAAAAAAAA//4D//gMGAAwYADBgAMGAAwYADBgAMGAAwAAAAAAA/gAH/AA++AHAcA4A4DgBgMAGAwAYDABgMGGAwYYDhjgGH8AAfwAAAAAAAAAAAD//gP/+A//4ADAAAMAAAwAADAAAMAAAwAADAAAMAA//4D//gAAAAAAAAAAAAAAA//4D//gAAAAAAAAAAAAAAAAAYAABgAAGAAA4AAHgP/8A//gAAAAAAAAAAAAAAAP/+A//4ADAAAMAAB4AAPwABzgAOHABwPAOAeAwA4CAAgAAAAAAAAAAAP/+A//4AABgAAGAAAYAABgAAGAAAYAABgAAAA//4D//gP/+AeAAAeAAAeAAA+AAA8AAA4AAHgAB4AAeAAHwAA8AAPAAA//4D//gAAAAAAAAAAAAAAA//4D//gHAAAOAAAeAAA8AAA4AABwAADwAADgAAHAP/+A//4AAAAAAAAAAAAP4AD/4AeDwBwHAOAOAwAYDABgMAGAwAYDABgOAOAcBwB4PAD/4AD+AABAAAAAAAAAAAAAP/+A//4DBgAMGAAwYADBgAMGAA44AB/AAH4AAHAAAAAAA/gAP/gB4PAHAcA4A4DABgMAGAwAYDABgMAGA4A4BwHwHg/gP/nAP4MAEAQAAAAAAAAAAA//4D//gMGAAwYADBgAMHAAw/ADneAH4eAPA4AABgAAAAAAwA8DAH4OA5wYDDBgMMGAw4YDBjgOH8AYPgAAIAAAAAwAADAAAMAAAwAADAAAP/+A//4DAAAMAAAwAADAAAMAAAAAAAAAAAAAA//AD//AAAcAAA4AABgAAGAAAYAABgAAOAABwD//AP/4A/8AAAAAOAAA+AAB+AAB/AAA/AAA/AAAeAAD4AA/AAPwAH8AB+AAPgAA4AAAAAAOAAA/AAB/gAA/wAAf4AAPgAB+AA/gAfwAH4AA8AAD8AAD+AAB/AAB/gAA+AAH4AD/AD/gA/wAD4AAMAAAgAYDgDgPAeAeHgAe8AA/AAA4AAHwAB/wAPHgDwPgOAOAgAYAAAAIAAA4AADwAAHwAAHgAAHgAAP+AA/4APgAB4AAeAADwAAMAAAgAAAAAAMAGAwA4DAPgMB+AwPYDDxgMeGAzwYD8BgPgGA8AYDABgAAAAAAAH//8f//xAABEAAEAAAAAAAHAAAPAAAPgAAPgAAHwAAHwAAHgAADAAAAEAAEQAAR///H//8AAAAAAAAAAAAAAABgAAeAADwAA8AADgAAHgAAPAAAOAAAIAAAAAAAAAAAAQAABAAAEAAAQAABAAAEAAAQAABAAAAAAAAgAADAAAOAAAIAAAAAAAAAAAAAAAHAAY+ADnYAMYgAxiADGYAORAAf+AA/4AAAAAAAB//4H//gAYMADAYAMBgAwGADAYAPHgAf8AA/gAAAAAAAAA/gAH/AA4OADAYAMBgAwGADAYAMDgAQEAAAAAB+AAf8ADx4AMBgAwGADAYAMBgAYMB//4H//gAAAAAAAAB8AAf8ADpwAMhgAyGADIYAMhgA6GAB4wADhAAAAACAAAMAAH/+A//4DMAAMwAAzAAABAcAff4D/5gMbmAwmYDCZgMZmA/mYD8fAMA4AgAAAAAAAAAf/+B//4AGAAAwAADAAAMAAA4AAD/4AH/gAAAAAAACAAAc/+Bz/4CAAAAAAAAABiAAGc//5z//CAAAAAAAAAAAAAAf/+B//4AAYAADgAAfAAHuAA4cADAYAIAgAAAAAAAAAAAf/+B//4AAAAAAAAAAAAAAAA/+AD/4AEAAAwAADAAAMAAA/+AB/4AH/gAwAADAAAMAAA4AAD/4AD/gAAAAAAAAAAAA/+AD/4AGAAAwAADAAAMAAAwAAD/4AH/gAAAAAAAAD+AAf8ADg4AMBgAwGADAYAMBgA4OAB/wAD+AADgAAAAAP/+A//4BgwAMBgAwGADAYAMBgA8eAB/wAD8AAAAAAAAAB+AAf8ADx4AMBgAwGADAYAMBgAYMAD//gP/+AAAAAAAAP/gA/+ABwAAOAAAwAADAAAMAAAAAAAAQAHhgA/GADMYAMxgAxmADH4AEPAAAQAAAAAMAAAwAAf/wD//gAwGADAYAMBgAAAAAAAAP/AA/+AAAYAABgAAGAAAYAADAA/+AD/4AAAAAAAADgAAPgAAfgAAPwAAPgAAeAAHwAD8AA/AADgAAIAAA4AAD8AAD+AAB+AAB4AA/AAfgADwAAPgAAfwAAP4AAHgAB+AA/gAPwAA4AAAAAAAAgAwGADh4AHvAAPwAAOAAB8AAe8ADh4AMBgAgCACAAAOAAA+AAA/BgA/eAA/wAD8AA/AAPgAD4AAOAAAgGADA4AMHgAx+ADOYANxgA+GADgYAMBgAAAAAMAD//4f9/xgADEAAEAAAAAAAAAAAAAAB///n//+AAAAAAAAAAAAAABAABGAAMf9/w//+AAwAAAAAAAAAA4AADgAAYAABgAAHAAAMAAAwAADAAAcAADgAAAAAAAA");
+
+exports.add = function(graphics) {
+  graphics.prototype.setFontLatoSmall = function() {
+    // Actual height 21 (20 - 0)
+    this.setFontCustom(font, 32, widths, 22+(1<<8)+(1<<16));
+  }
+};
diff --git a/apps/pastel/f_monoton.js b/apps/pastel/f_monoton.js
new file mode 100644
index 000000000..34de6eca1
--- /dev/null
+++ b/apps/pastel/f_monoton.js
@@ -0,0 +1,7 @@
+
+exports.add = function(graphics) {
+  graphics.prototype.setFontMonoton = function(scale) {
+    // Actual height 44 (43 - 0)
+    this.setFontCustom(atob("AAAAAAAAAAAAAAAAAAAABmwAAAAAAzYAAAAAAZsAAAAAAM2AAAAAAGbAAAAAADNgAAAAABmwAAAAAAzYAAAAAAZsAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcAAAAAAD+AAAAAAf8AAAAAD/ggAAAAf8HwAAAD/g/4AAAf8H/AAAD/g/4OAAf8H/B/AD/g/4P+Af8H/B/wAfg/4P+AAMH/B/wAAA/4H+AAAD/A/4AAAB4H/AAAAAA/4AAAAAH/AAAAAAP4AAAAAAHAAAAAAAAAAAAAAAAAAAAAAAAAAA/gAAAAAH//gAAAAf//8AAAA/AAPgAAA8f/x8AAB4//+PAAB5+APxwABzwfwecAAzj//jnAA7n+P85gA7ngAPO4AbnH/xzsAdnP/+c3AN3PAHndgGzOAA5m4DbuAAO7MD9mAADN2Bs3AAB2bA2bAAAbNgbNgAANmwNmwAAGzYGzYAADZsDdmAADN2B+7AABuzAbMwABmbgNneAD3NgHZ3+/3MwBuc//nO4A7nB8HGYAM58AfOcAHeP/+OcABzx/8ecAAc+AA+cAAHH//8cAAB4//48AAAPg+B8AAAD+AP4AAAAP//wAAAAA/+AAAAAAAAAAAAAAAAAAABsAAAAAAA2AAAAAAAbAAAAAAANgAAAAAAGwAAAAAADf////8ABv////+AA3/////AAbAAAAAAAN/////wAG/////4ADYAAAAAABv////+AA3/////AAb/////gANgAAAAAAG/////4ADf////8AAAAAAAAAAAAAAAAAAAAAAAAAAGAAAAAAADcAAAA2wBs2AADbYA2bAADtsAbZgADm2AftwAHjbAN24AHNtgGzYAPO2wDZsAPebYBs2AOeNsA2bAec22AbNge87bANmwc55tgG7c8542wD9355zbYA2Z5zztsAbODzjm2ANz/nnjbADc/nnhtgBnCPHA2wA74fPAbYAOf+OANsADj8eAG2AA8A+ADbAAP/8AAAAAB/4AAAAAAAAAAAAAAAAAAAAAAAAAAAAAMAAAAABgG6AAAAuwDdsAAG3YBs2AADZuA27AABu3A/ZgAA7dgbtwAAduwN2w2zG3YGzYbZjZsDZsNsxs2Bs2G2Y2bA2bDbMbNgbNhtmNmwNmw2zGzYG7MbdnbsD939m/d2A2Z/7PM3AbuBtwO7AOz73eeZgDc/9n+dwB3H2Y8cwAZ4HnA84AGf/5/84ADz/OP44AAeALwB4AAH/+//4AAA/+H/wAAADwAfAAAAAAAAAAAAAAAAAAAAAAAZsAAAAAB82AAAAAD+bAAAAAHzNgAAAAPjmwAAAAfHzYAAAB+P5sAAAD8fM2AAAHw+ObAAAPj8fNgAAfH4/mwAA+Ph8zYAAcfH4ZsAAA+Px82AAB8fD+bAAD4+HzNgABh8PhmwAAH4/AzYAAPx+AZsAAPD4AM2AAGHwP+bfgAfgH/NvwA/AABmwAA8AAAzYAAYAA/5t+AAAAf82/AAAAAGbAAAAAADNgAAAAAAAAAAAAAAAAAAAAAAAGAAE///ADAAGf//gBwADP//wCcABmAAADmAAz//8C7gAZ//+DMwAMwAAA3YAGf//hZsADP//xu3ABn//4zdgAzDNsNuwAZhu2GzYAMw2bDZsAGYbNhs2ADMNmw2bABmGzYbNgAzDZsdmwAZhs2M3YAMw3d+zcAGYZm+ZsADMOzgd2ABmDM883AAzB3P87AAZgZx47gAMwOcB5gAGYDn/5gADMA4/zwAAAAPADwAAAAD8fgAAAAAf/gAAAAAB+AAAAAAAAAAAAAAAAAAAAAAAAAAAAAB///4AAAD////AAAHwAADwAAHH//8eAAHP///ngAHfgAB8wAHeH/8PcADcf//x3ADsf//+ZgBu8AADu4B2c//8zMA3d///M2AbNwAB2bgduxs2bswP2Z2/O3YGzYzbDZsDZsbths2Bs2Nmw2bA2bGzYbNgbNjZsNmwNmxs2GzYH7c2bHbsDtmbtzdmA2bM3fs3AbMHZnO7AM3BuYOZgHZAzP+dgBmAMx+cwA7gHeAcwAMgB3584AHAAc/84ABgAHHx4AAAAB4D4AAAAAf/wAAAAAD/gAAAAAAAAAAAAAAAAAAZsAAAAAAM2AAAAAAGbAAAAAADNgAAAAABmwAAAAAAzYAAAAAAZsAAAAAAM2AAAAPAGbAAAB/gDNgAAP+ABmwAD/wYAzYAf+D8AZsD/wf8AM2f8D/gAGT/gf8HgAf8D/g/wB/g/8H/AA8H/g/4MAA/8H/B+AH/g/4P+AH4H/B/wADA/4P+AAAH/B/wAAA/4P+AAAAfB/wAAAAAP+AAAAAB/wAAAAAD+AAAAAABwAAAAAAAAAAAAAAAAAAAAAAAAAGAAwAAAA/8H/gAAB//v/8AAB4B/APgADz+PP54ABn/x//OABng8eDzAB3HHOcdwA3P9z/nYA7P/d/5mAbOBmYO7ANmebvzNwP3fs392YGzc3ZmbsDZsZsxs2Bs2M2Y2bA2bGbMbNgbNjNmNmwNmxmzGzYGzYzZjZsDZsZsxs2Bs2M2Y2bA2bGbMbNgbNzNmNmwP2Zm7s3YDbv7M+7MBszt3OZuA3MGZwd2ANn/uf8zAGY+zn47gDvAc4A7gA78/Pj5gAOf/z/zwADj8cPjwAA+A/gHgAAH/9//gAAA/4P/AAAAAAAAAAAAAAAAAAAAAAAAAAAAB+AAAAAAD/4AAAAAHw/AAAAAHADwADAAHP8cABgAHf/nAA4AHeB5gDuAHcfOYAzADc/7uBdwBs8ezBmYBu4DdgbsA2Z924s3AbN+bM3bgfsxt2duwNm4zbG3YGzYZtjZsDZsM2xs2Bs2GbY2bA2bDNsbNgbNhv2NmwP242zO3YHbszbm7sBs3AAHZuA2Z///M2Abuf//O7AGzh/8ObgDc8AA+dgB3P//+dwAdx//8cwAGeAAA8wADn///44AA8///54AAPgAAB4AAB+AAPwAAAP///gAAAA//+AAAAAAAAAAAAAAAAAAAAAAAAAAAADbBmwAAABtgzYAAAA2wZsAAAAbYM2AAAANsGbAAAAG2DNgAAADbBmwAAABtgzYAAAA2wZsAAAAAAAAAAAAAAAAAAA="), 46, atob("DRYpFR0eHiImHygmDQ=="), 49+(scale<<8)+(1<<16));
+  }
+};
diff --git a/apps/pastel/f_orbitron.js b/apps/pastel/f_orbitron.js
new file mode 100644
index 000000000..b58056c0e
--- /dev/null
+++ b/apps/pastel/f_orbitron.js
@@ -0,0 +1,11 @@
+
+
+var widths = atob("ChcmEiUlISUlHiYlCg==");
+var font = atob("AAAAAAAAAAAAAAAAAAAAPAAAAAAB4AAAAAAPAAAAAAB4AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAfAAAAAAPwAAAAAD8AAAAAA+AAAAAAPgAAAAAD4AAAAAB+AAAAAAfgAAAAAHwAAAAAB8AAAAAAfAAAAAAPwAAAAAD4AAAAAA+AAAAAAPgAAAAAH4AAAAAB+AAAAAAfAAAAAAHwAAAAAB8AAAAAA/AAAAAAPwAAAAAD4AAAAAAAAAAAAAAAAAAAAAB///+AAA////8AAP////wAD/////AAfgAA/4ADwAAH/AAeAAB94ADwAAfPAAeAAH54ADwAB+PAAeAAPh4ADwAD4PAAeAA+B4ADwAPgPAAeAD8B4ADwAfAPAAeAHwB4ADwB8APAAeAfAB4ADwH4APAAeB+AB4ADwPgAPAAeD4AB4ADw+AAPAAePwAB4ADz8AAPAAefAAB4AD3wAAPAAf8AAB4AD/////AAf////4AB////+AAH////gAAH///gAAAAAAAAAAAAAAAAAACAAAAAAAwAAAAAAOAAAAAADwAAAAAB+AAAAAAfwAAAAAH4AAAAAB+AAAAAAfgAAAAAD4AAAAAAf////4AD/////AAf////4AD/////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABwAf/4AA+AP//AAPwD//4AD+Af//AAfgH4H4ADwA8APAAeAHgB4ADwA8APAAeAHgB4ADwA8APAAeAHgB4ADwA8APAAeAHgB4ADwA8APAAeAHgB4ADwA8APAAeAHgB4ADwA8APAAeAHgB4ADwA8APAAeAHgB4ADwA8APAAeAHgB4ADwA8APAAeAHgB4ADwA8APAAeAHgB4ADwA8APAAeAHgB4AD//8APAAf//gB4AB//4APAAH/+AB4AAH+AAHAAAAAAAAAAAAAAAAAAAAAAAAAOAAA4AAHwAAHgAB+AAA+AAfwAAH4AD4AAAfAAeAAAB4ADwA8APAAeAHgB4ADwA8APAAeAHgB4ADwA8APAAeAHgB4ADwA8APAAeAHgB4ADwA8APAAeAHgB4ADwA8APAAeAHgB4ADwA8APAAeAHgB4ADwA8APAAeAHgB4ADwA8APAAeAHgB4ADwA8APAAeAHgB4ADwA8APAAfAPgB4AD//8APAAP////4AA////+AAD////wAAAAP/8AAAAAAAAAAAAAAAAAAAAPgAAAAAD8AAAAAA/gAAAAAP8AAAAAB/gAAAAAf8AAAAAH3gAAAAB88AAAAAfHgAAAAHw8AAAAB+HgAAAAfg8AAAAH4HgAAAA+A8AAAAPgHgAAAD4A8AAAA/AHgAAAPwA8AAAD8AHgAAA/AA8AAAPwAHgAAB8AA8AAAfgAHgAAD/////AAf////4AD/////AAf////4AAAAA8AAAAAAHgAAAAAA8AAAAAAHgAAAAAA8AAAAAAAAAAAAAAAAAAAAAAAAAD//4BwAAf//APgAD//4B+AAf//AP4AD8H4A/AAeAPAB4ADwB4APAAeAPAB4ADwB4APAAeAPAB4ADwB4APAAeAPAB4ADwB4APAAeAPAB4ADwB4APAAeAPAB4ADwB4APAAeAPAB4ADwB4APAAeAPAB4ADwB4APAAeAPAB4ADwB4APAAeAPAB4ADwB4APAAeAPAB4ADwB4APAAeAPAB4ADwB4APAAeAP//4ADwA///AAeAD//wADwAP/8AAcAAP8AAAAAAAAAAAAAAAAAAAAAAAAAB///+AAA////8AAP////wAD/////AAfg/AH4ADwB4APAAeAPAB4ADwB4APAAeAPAB4ADwB4APAAeAPAB4ADwB4APAAeAPAB4ADwB4APAAeAPAB4ADwB4APAAeAPAB4ADwB4APAAeAPAB4ADwB4APAAeAPAB4ADwB4APAAeAPAB4ADwB4APAAeAPAB4ADwB4APAAeAPAB4ADwB4APAAAAPAB4AAAB///AAAAH//4AAAAf/+AAAAB//gAAAAB/gAAAAAAAAADwAAAAAAeAAAAAADwAAAAAAeAAAAAADwAAAAAAeAAAAAADwAAAAAAeAAAAAADwAAAAAAeAAAAAADwAAAAAAeAAAAAADwAAAAAAeAAAAAADwAAAAAAeAAAAAADwAAAAAAeAAAAAADwAAAAAAeAAAAAADwAAAAAAeAAAAAADwAAAAAAf////4AB/////AAP////4AA/////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP+D/wAAH////gAB////+AAf////4AD8D+A/AAeAHgB4ADwA4APAAeAHAB4ADwA4APAAeAHAB4ADwA4APAAeAHAB4ADwA4APAAeAHAB4ADwA4APAAeAHAB4ADwA4APAAeAHAB4ADwA4APAAeAHAB4ADwA4APAAeAHAB4ADwA4APAAeAHAB4ADwA4APAAeAHAB4ADwA4APAAeAHAB4ADwA8APAAf////4AB/////AAP////wAAf/v/8AAA/gP8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAf/gAAAAH/+ABgAB//4AOAAf//gB4AD4B8APAAeAHgB4ADwA8APAAeAHgB4ADwA8APAAeAHgB4ADwA8APAAeAHgB4ADwA8APAAeAHgB4ADwA8APAAeAHgB4ADwA8APAAeAHgB4ADwA8APAAeAHgB4ADwA8APAAeAHgB4ADwA8APAAeAHgB4ADwA8APAAeAHgB4ADwA8APAAeAHgB4ADwA+APAAf////4AB////+AAP////wAAf///4AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAeAAB4AADwAAPAAAeAAB4AADwAAPAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=");
+
+exports.add = function(graphics) {
+  // Actual height 32 (35 - 4)
+  graphics.prototype.setFontOrbitron = function() {
+    this.setFontCustom(font, 46, widths, 45+(1<<8)+(1<<16));
+  }
+};
diff --git a/apps/pastel/pastel.app.js b/apps/pastel/pastel.app.js
new file mode 100644
index 000000000..013a010cf
--- /dev/null
+++ b/apps/pastel/pastel.app.js
@@ -0,0 +1,177 @@
+require("f_latosmall").add(Graphics);
+const SETTINGS_FILE = "pastel.json";
+let settings;
+
+function loadSettings() {
+  settings = require("Storage").readJSON(SETTINGS_FILE,1)||{};
+  settings.grid = settings.grid||false;
+  settings.font = settings.font||"Lato";
+}
+
+function loadFonts() {
+  // load font files based on settings.font
+  if (settings.font == "Architect")
+    require("f_architect").add(Graphics);
+  else if (settings.font == "GochiHand")
+    require("f_gochihand").add(Graphics);
+  else if (settings.font == "CabinSketch")
+    require("f_cabin").add(Graphics);
+  else if (settings.font == "Orbitron")
+    require("f_orbitron").add(Graphics);
+  else if (settings.font == "Monoton")
+    require("f_monoton").add(Graphics);
+  else if (settings.font == "Elite")
+    require("f_elite").add(Graphics);
+  else
+    require("f_lato").add(Graphics);
+}
+
+function stepsWidget() {
+  if (WIDGETS.activepedom !== undefined) {
+    return WIDGETS.activepedom;
+  } else if (WIDGETS.wpedom !== undefined) {
+    return WIDGETS.wpedom;
+  }
+  return undefined;
+}
+
+const infoData = {
+  ID_BLANK: { calc: () => '' },
+  ID_DATE:  { calc: () => {var d = (new Date).toString().split(" "); return d[2] + ' ' + d[1] + ' ' + d[3];} },
+  ID_DAY:   { calc: () => {var d = require("locale").dow(new Date).toLowerCase(); return d[0].toUpperCase() + d.substring(1);} },
+  ID_STEP:  { calc: () => 'Steps: ' + stepsWidget().getSteps() },
+  ID_BATT:  { calc: () => 'Battery: ' + E.getBattery() + '%' },
+  ID_MEM:   { calc: () => {var val = process.memory(); return 'Ram: ' + Math.round(val.usage*100/val.total) + '%';} },
+  ID_ID:    { calc: () => {var val = NRF.getAddress().split(':'); return 'Id: ' + val[4] + val[5];} },
+  ID_FW:    { calc: () => 'Fw: ' + process.env.VERSION }
+};
+
+const infoList = Object.keys(infoData).sort();
+let infoMode = infoList[0];
+
+function nextInfo() {
+  let idx = infoList.indexOf(infoMode);
+  if (idx > -1) {
+    if (idx === infoList.length - 1) infoMode = infoList[0];
+    else infoMode = infoList[idx + 1];
+  }
+}
+
+function prevInfo() {
+  let idx = infoList.indexOf(infoMode);
+  if (idx > -1) {
+    if (idx === 0) infoMode = infoList[infoList.length - 1];
+    else infoMode = infoList[idx - 1];
+  }
+}
+
+var mm_prev = "xx";
+
+function draw() {
+  var d = new Date();
+  var da = d.toString().split(" ");
+  var time = da[4].substr(0,5);
+  
+  var hh = da[4].substr(0,2);
+  var mm = da[4].substr(3,2);
+  var day = da[0];
+  var month_day = da[1] + " " + da[2];
+  
+  // fix hh for 12hr clock
+  var h2 = "0" + parseInt(hh) % 12 || 12;
+  if (parseInt(hh) > 12)
+    hh = h2.substr(h2.length -2);
+
+  var w = g.getWidth();
+  var h = g.getHeight();
+  var x = (g.getWidth()/2);
+  var y = (g.getHeight()/3);
+  
+  g.reset();
+
+  if (process.env.HWVERSION == 1) {
+    // avoid flicker on a bangle 1 by comparing with previous minute
+    if (mm_prev != mm) {
+      mm_prev = mm;
+      g.clearRect(0, 30, w, h - 24);
+    }
+  } else {
+    // on a b2 safe to just clear anyway as there is no flicker
+    g.clearRect(0, 30, w, h - 24);
+  }
+    
+  // draw a grid like graph paper
+  if (settings.grid && process.env.HWVERSION !=1) {
+    g.setColor("#0f0");
+    for (var gx=20; gx <= w; gx += 20)
+      g.drawLine(gx, 30, gx, h - 24); 
+    for (var gy=30; gy <= h - 24; gy += 20)
+      g.drawLine(0, gy, w, gy);
+  }
+
+  g.setColor(g.theme.fg);
+
+  if (settings.font == "Architect")
+    g.setFontArchitect();
+  else if (settings.font == "GochiHand")
+    g.setFontGochiHand();
+  else if (settings.font == "CabinSketch")
+    g.setFontCabinSketch();
+  else if (settings.font == "Orbitron")
+    g.setFontOrbitron();
+  else if (settings.font == "Monoton")
+    g.setFontMonoton();
+  else if (settings.font == "Elite")
+    g.setFontSpecialElite();
+  else
+    g.setFontLato();
+    
+  g.setFontAlign(1,-1);  // right aligned
+  g.drawString(hh, x - 6, y);
+  g.setFontAlign(-1,-1); // left aligned
+  g.drawString(mm, x + 6, y);
+
+  // for the colon
+  g.setFontAlign(0,-1); // centre aligned
+
+  if (d.getSeconds()&1) {
+    g.drawString(":", x,y);
+  } else {
+    // on bangle 1, we are not using clearRect(), hide : by printing over it in reverse color
+    if (process.env.HWVERSION == 1) {
+      g.setColor(g.theme.bg);
+      g.drawString(":", x,y);
+      g.setColor(g.theme.fg);
+    }
+  }
+
+  g.setFontLatoSmall();
+  g.setFontAlign(0, -1);
+  g.drawString((infoData[infoMode].calc()), w/2, h - 24 - 24);
+}
+
+// Only update when display turns on
+if (process.env.BOARD!="SMAQ3") // hack for Q3 which is always-on
+Bangle.on('lcdPower', function(on) {
+  if (secondInterval)
+    clearInterval(secondInterval);
+  secondInterval = undefined;
+  if (on)
+    secondInterval = setInterval(draw, 1000);
+  draw();
+});
+
+Bangle.setUI("clockupdown", btn=> {
+  if (btn<0) prevInfo();
+  if (btn>0) nextInfo();
+  draw();
+});
+
+loadSettings();
+loadFonts();
+g.clear();
+var secondInterval = setInterval(draw, 1000);
+draw();
+
+Bangle.loadWidgets();
+Bangle.drawWidgets();
diff --git a/apps/pastel/pastel.icon.js b/apps/pastel/pastel.icon.js
new file mode 100644
index 000000000..44bdcef9e
--- /dev/null
+++ b/apps/pastel/pastel.icon.js
@@ -0,0 +1 @@
+require("heatshrink").decompress(atob("mEwxH+AH4A1PYIqqAAUqp0kGMopCuVOvHHAAV4GEcAFQgAFuQwhLoIuJAAMqGEEAzovL44vgkguM49OGD0ApwvNzovfdpSQjF+FyEwskewyPFgAADX7kkA414EwIqCp14zmcuUkGJ5FEkgnFpwHHFgXBTQ0kFhpSBvAABD4KHHEY0ATAw7EFpTnHRA8Azg2FFxIvMCxGcHI0qG4kAlQuJF5gXJcIIwEvARDlSVGfZAwJuQWKSQwuCRpQAB4IvK/0kC5K0BGAouHzucvAIFL5bvHvAbCGAMkEAQuEzi0BAAZ9FX5QuH48kDgILB4IFCAAPB4IsCklySZIvKUxWdLYYABpyhBuUkIxAADHoJfSJI140SOBzgTNFxQwPQ4QuBAgK1FOoyiCF5QwBpwaIzgZBzlydgT2BCZGcHwMrmMHGJjnDAAd4JAImCvDRDGAIKBvF4uTJBA4MrrtjrljrowOAAIZCEQPBFQTuBHgpXBCYkGnBcCmVjsaTOJYOcFgZ+BeAXHkiRBAAprBrkxFAM4MAMyMgIvMkjaGKQICBMQUqfxInBlZ+DMIIGBF5QgGgAHBWQLCGAAnBgC5BFIUrR4KQNF4wGCki+DgCQHBwMySQNcFQMHSQKPTFQ4vJlS/BrhaBMgIwBd5ofHXwYALXALuCGQcxHAIvLznBD4q6JX41jmIvCdoKOBMB0ASQtyTJIADp0GdIVjgwvBMYQvMGISzEL5ucRIQAIg4vOzmdzpdBM4NOZA1OlUqBoUrFIZeCAAUrF5qSCAAIGDlSIEBgoNBGAVdBQMGmJoBgwvOG5JZBFgoNFLoIMCJgwxXO5wpYAH4A/AH4A/ABwA="))
diff --git a/apps/pastel/pastel.info.js b/apps/pastel/pastel.info.js
new file mode 100644
index 000000000..70eec47dd
--- /dev/null
+++ b/apps/pastel/pastel.info.js
@@ -0,0 +1,7 @@
+require("Storage").write("pastel.info",{
+  "id":"pastel",
+  "name":"Configurable clock with custom fonts and background",
+  "src":"pastel.app.js",  
+  "icon":"pastel.img",
+  "type":"clock"
+});
diff --git a/apps/pastel/pastel.png b/apps/pastel/pastel.png
new file mode 100644
index 000000000..06961f5d2
Binary files /dev/null and b/apps/pastel/pastel.png differ
diff --git a/apps/pastel/pastel.settings.js b/apps/pastel/pastel.settings.js
new file mode 100644
index 000000000..fad36964d
--- /dev/null
+++ b/apps/pastel/pastel.settings.js
@@ -0,0 +1,47 @@
+(function(back) {
+  const SETTINGS_FILE = "pastel.json";
+
+  // initialize with default settings...
+  let s = {
+    'grid': false,
+    'font': "Lato"
+  }
+
+  // ...and overwrite them with any saved values
+  // This way saved values are preserved if a new version adds more settings
+  const storage = require('Storage')
+  let settings = storage.readJSON(SETTINGS_FILE, 1) || {}
+  const saved = settings || {}
+  for (const key in saved) {
+    s[key] = saved[key]
+  }
+
+  function save() {
+    settings = s
+    storage.write(SETTINGS_FILE, settings)
+  }
+
+  var font_options = ["Lato","Architect","GochiHand","CabinSketch","Orbitron","Monoton","Elite"];
+  
+  E.showMenu({
+    '': { 'title': 'Pastel Clock' },
+    '< Back': back,
+    'Font': {
+      value: 0 | font_options.indexOf(s.font),
+      min: 0, max: 6,
+      format: v => font_options[v],
+      onchange: v => {
+        s.font = font_options[v];
+        save();
+      },
+    },
+    'Show Grid': {
+      value: s.grid,
+      format: () => (s.grid ? 'Yes' : 'No'),
+      onchange: () => {
+        s.grid = !s.grid
+        save()
+      },
+    }
+  })
+})
diff --git a/apps/pastel/screenshot_architect.png b/apps/pastel/screenshot_architect.png
new file mode 100644
index 000000000..27f74c82f
Binary files /dev/null and b/apps/pastel/screenshot_architect.png differ
diff --git a/apps/pastel/screenshot_b1_light.jpg b/apps/pastel/screenshot_b1_light.jpg
new file mode 100644
index 000000000..d61f571d1
Binary files /dev/null and b/apps/pastel/screenshot_b1_light.jpg differ
diff --git a/apps/pastel/screenshot_cabinsketch.png b/apps/pastel/screenshot_cabinsketch.png
new file mode 100644
index 000000000..d5a90031b
Binary files /dev/null and b/apps/pastel/screenshot_cabinsketch.png differ
diff --git a/apps/pastel/screenshot_elite.png b/apps/pastel/screenshot_elite.png
new file mode 100644
index 000000000..d2da9842a
Binary files /dev/null and b/apps/pastel/screenshot_elite.png differ
diff --git a/apps/pastel/screenshot_gochihand.png b/apps/pastel/screenshot_gochihand.png
new file mode 100644
index 000000000..2c69407e2
Binary files /dev/null and b/apps/pastel/screenshot_gochihand.png differ
diff --git a/apps/pastel/screenshot_lato.png b/apps/pastel/screenshot_lato.png
new file mode 100644
index 000000000..56932bd00
Binary files /dev/null and b/apps/pastel/screenshot_lato.png differ
diff --git a/apps/pastel/screenshot_monoton.png b/apps/pastel/screenshot_monoton.png
new file mode 100644
index 000000000..18036e651
Binary files /dev/null and b/apps/pastel/screenshot_monoton.png differ
diff --git a/apps/pastel/screenshot_orbitron.png b/apps/pastel/screenshot_orbitron.png
new file mode 100644
index 000000000..4e5242ee8
Binary files /dev/null and b/apps/pastel/screenshot_orbitron.png differ
diff --git a/apps/pastel/screenshot_pastel.png b/apps/pastel/screenshot_pastel.png
new file mode 100644
index 000000000..d489f1914
Binary files /dev/null and b/apps/pastel/screenshot_pastel.png differ
diff --git a/apps/pastel/test-settings.js b/apps/pastel/test-settings.js
new file mode 100644
index 000000000..45e655818
--- /dev/null
+++ b/apps/pastel/test-settings.js
@@ -0,0 +1,6 @@
+const SETTINGS_FILE = "pastel.json";
+let settings = {"grid":false, "date":false, "font":"Lato"}
+
+require("Storage").write(SETTINGS_FILE, settings);
+settings = require("Storage").readJSON(SETTINGS_FILE,1)||{};
+console.log(settings);
diff --git a/apps/pipboy/bangle1-pipboy-themed-clock-screenshot.png b/apps/pipboy/bangle1-pipboy-themed-clock-screenshot.png
new file mode 100644
index 000000000..9f8d4a3e6
Binary files /dev/null and b/apps/pipboy/bangle1-pipboy-themed-clock-screenshot.png differ
diff --git a/apps/pomodo/CHANGELOG.md b/apps/pomodo/CHANGELOG.md
index b8c5dd621..b4667aff8 100644
--- a/apps/pomodo/CHANGELOG.md
+++ b/apps/pomodo/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Changelog
 
+## 2021-11-18
+
+- [Feature] Ported to Banglejs2
+
 ## 2019-11-27
 
 - [Feature] App now saves the last interval value
diff --git a/apps/pomodo/ChangeLog b/apps/pomodo/ChangeLog
index 5560f00bc..2fedc39e3 100644
--- a/apps/pomodo/ChangeLog
+++ b/apps/pomodo/ChangeLog
@@ -1 +1,2 @@
 0.01: New App!
+0.02: Ported to Banglejs2.
diff --git a/apps/pomodo/bangle2-pomodoro-screenshot.png b/apps/pomodo/bangle2-pomodoro-screenshot.png
new file mode 100644
index 000000000..df599e314
Binary files /dev/null and b/apps/pomodo/bangle2-pomodoro-screenshot.png differ
diff --git a/apps/pomodo/pomodoro.js b/apps/pomodo/pomodoro.js
index 3e11739da..96d2e8d6a 100644
--- a/apps/pomodo/pomodoro.js
+++ b/apps/pomodo/pomodoro.js
@@ -11,8 +11,9 @@ const STATES = {
 var counterInterval;
 
 class State {
-  constructor (state) {
+  constructor (state, device) {
     this.state = state;
+    this.device = device;
     this.next = null;
   }
 
@@ -47,8 +48,8 @@ class State {
 }
 
 class InitState extends State {
-  constructor (time) {
-    super(STATES.INIT);
+  constructor (device) {
+    super(STATES.INIT, device);
 
     this.timeCounter = parseInt(storage.read(".pomodo") || DEFAULT_TIME, 10);
   }
@@ -58,7 +59,7 @@ class InitState extends State {
   }
 
   setButtons () {
-    setWatch(() => {
+    this.device.setBTN1(() => {
       if (this.timeCounter + 300 > 3599) {
         this.timeCounter = 3599;
       } else {
@@ -67,23 +68,23 @@ class InitState extends State {
 
       this.draw();
 
-    }, BTN1, { repeat: true });
+    });
 
-    setWatch(() => {
+    this.device.setBTN3(() => {
       if (this.timeCounter - 300 > 0) {
         this.timeCounter -= 300;
         this.draw();
       }
-    }, BTN3, { repeat: true });
+    });
 
-    setWatch(() => {
+    this.device.setBTN4(() => {
       if (this.timeCounter - 60 > 0) {
         this.timeCounter -= 60;
         this.draw();
       }
-    }, BTN4, { repeat: true });
+    });
 
-    setWatch(() => {
+    this.device.setBTN5(() => {
       if (this.timeCounter + 60 > 3599) {
         this.timeCounter = 3599;
       } else {
@@ -92,15 +93,15 @@ class InitState extends State {
 
       this.draw();
 
-    }, BTN5, { repeat: true });
+    });
 
-    setWatch(() => {
+    this.device.setBTN2(() => {
       this.saveTime();
-      const startedState = new StartedState(this.timeCounter);
+      const startedState = new StartedState(this.timeCounter, this.device);
 
       this.setNext(startedState);
       this.next.go();
-    }, BTN2, { repeat: true });
+    });
   }
 
   draw () {
@@ -112,14 +113,14 @@ class InitState extends State {
 }
 
 class StartedState extends State {
-  constructor (timeCounter) {
-    super(STATES.STARTED);
+  constructor (timeCounter, buttons) {
+    super(STATES.STARTED, buttons);
 
     this.timeCounter = timeCounter;
   }
 
   draw () {
-    drawCounter(this.timeCounter, 120, 120);
+    drawCounter(this.timeCounter, g.getWidth() / 2, g.getHeight() / 2);
   }
 
   init () {
@@ -137,15 +138,15 @@ class StartedState extends State {
       this.draw();
     }
 
-    const doneState = new DoneState();
+    const doneState = new DoneState(this.device);
     this.setNext(doneState);
     counterInterval = setInterval(countDown.bind(this), 1000);
   }
 }
 
 class BreakState extends State {
-  constructor () {
-    super(STATES.BREAK);
+  constructor (buttons) {
+    super(STATES.BREAK, buttons);
   }
 
   draw () {
@@ -153,44 +154,40 @@ class BreakState extends State {
   }
 
   init () {
-    const startedState = new StartedState(TIME_BREAK);
+    const startedState = new StartedState(TIME_BREAK, this.device);
 
     this.setNext(startedState);
     this.next.go();
   }
 }
+
 class DoneState extends State {
-  constructor () {
-    super(STATES.DONE);
+  constructor (device) {
+    super(STATES.DONE, device);
   }
 
   setButtons () {
-    setWatch(() => {
-      const initState = new InitState();
-      clearTimeout(this.timeout);
-      initState.go();
-    }, BTN1, { repeat: true });
+    this.device.setBTN1(() => {
+    });
 
-    setWatch(() => {
-      const breakState = new BreakState();
-      clearTimeout(this.timeout);
-      breakState.go();
-    }, BTN3, { repeat: true });
+    this.device.setBTN3(() => {
+    });
 
-    setWatch(() => {
-    }, BTN2, { repeat: true });
+    this.device.setBTN2(() => {
+    });
   }
 
   draw () {
     g.clear();
-    g.setFont("6x8", 2);
-    g.setFontAlign(0, 0, 3);
-    g.drawString("AGAIN", 230, 50);
-    g.drawString("BREAK", 230, 190);
-    g.setFont("Vector", 45);
-    g.setFontAlign(-1, -1);
-
-    g.drawString('You\nare\na\nhero!', 50, 40);
+    E.showPrompt("You are a hero!", {
+      buttons : {"AGAIN":1,"BREAK":2}
+    }).then((v) => {
+      var nextSate = (v == 1
+                      ? new InitState(this.device)
+                      : new BreakState(this.device));
+      clearTimeout(this.timeout);
+      nextSate.go();
+    });
   }
 
   init () {
@@ -215,13 +212,61 @@ class DoneState extends State {
   }
 }
 
+class Bangle1 {
+  setBTN1(callback) {
+    setWatch(callback, BTN1, { repeat: true });
+  }
+
+  setBTN2(callback) {
+    setWatch(callback, BTN2, { repeat: true });
+  }
+
+  setBTN3(callback) {
+    setWatch(callback, BTN3, { repeat: true });
+  }
+
+  setBTN4(callback) {
+    setWatch(callback, BTN4, { repeat: true });
+  }
+
+  setBTN5(callback) {
+    setWatch(callback, BTN5, { repeat: true });
+  }
+}
+
+class Bangle2 {
+  setBTN1(callback) {
+      Bangle.on('touch', function(zone, e) {
+          if (e.y < g.getHeight() / 2) {
+              callback();
+          }
+      });
+  }
+
+  setBTN2(callback) {
+    setWatch(callback, BTN1, { repeat: true });
+  }
+
+  setBTN3(callback) {
+      Bangle.on('touch', function(zone, e) {
+          if (e.y > g.getHeight() / 2) {
+              callback();
+          }
+      });
+  }
+
+  setBTN4(callback) { }
+
+  setBTN5(callback) { }
+}
+
 function drawCounter (currentValue, x, y) {
   if (currentValue < 0) {
     return;
   }
 
-  x = x || 120;
-  y = y || 120;
+  x = x || g.getWidth() / 2;
+  y = y || g.getHeight() / 2;
 
   let minutes = 0;
   let seconds = 0;
@@ -249,7 +294,10 @@ function drawCounter (currentValue, x, y) {
 }
 
 function init () {
-  const initState = new InitState();
+  device = (process.env.HWVERSION==1
+             ? new Bangle1()
+             : new Bangle2());
+  const initState = new InitState(device);
   initState.go();
 }
 
diff --git a/apps/pong/bangle1-pong-screenshot.png b/apps/pong/bangle1-pong-screenshot.png
new file mode 100644
index 000000000..992583e97
Binary files /dev/null and b/apps/pong/bangle1-pong-screenshot.png differ
diff --git a/apps/pparrot/bangle1-party-parrot-screenshot.png b/apps/pparrot/bangle1-party-parrot-screenshot.png
new file mode 100644
index 000000000..2965f42cf
Binary files /dev/null and b/apps/pparrot/bangle1-party-parrot-screenshot.png differ
diff --git a/apps/qalarm/ChangeLog b/apps/qalarm/ChangeLog
new file mode 100644
index 000000000..135e69d23
--- /dev/null
+++ b/apps/qalarm/ChangeLog
@@ -0,0 +1,2 @@
+0.01: First version!
+0.02: Fixed alarms not working and localised days of week.
\ No newline at end of file
diff --git a/apps/qalarm/app-icon.js b/apps/qalarm/app-icon.js
new file mode 100644
index 000000000..1a014b796
--- /dev/null
+++ b/apps/qalarm/app-icon.js
@@ -0,0 +1 @@
+require("heatshrink").decompress(atob("/wA/AH4A/AH4AF0WiF1wwtF73GB53MAAgkY4wABFqIxPEhQuXGB4vUFxYwMEpBpGBwouNGAwfFF5I1KF6ZQHGAwNLFx4wHF/4v/F/4v/AoYGDF6gaFF5AwHL7QuMBJQvWEpwvxBQ4uRGBAkJT4wuWGBIuIRjKRNF8wwXFy4wWFzIwU53NFzPN5wuR5/PGK4tBDYSNQ5wVCCwIzBAAQoIAAQWGSJ5HFDYYAQIYTCRKRIeBAAYmDAAZsJMCQAbeCAybFiQ0XFTQAIzgAGFcYvz0QAGF84wGF1AwFF1QA/AH4A/ADQ="))
diff --git a/apps/qalarm/app.js b/apps/qalarm/app.js
new file mode 100644
index 000000000..64f601bf6
--- /dev/null
+++ b/apps/qalarm/app.js
@@ -0,0 +1,271 @@
+Bangle.loadWidgets();
+Bangle.drawWidgets();
+
+let alarms = require("Storage").readJSON("qalarm.json", 1) || [];
+/*
+Alarm format:
+{
+  on : true,
+  t : 23400000, // Time of day since midnight in ms
+  msg : "Eat chocolate", // (optional) Must be set manually from the IDE
+  last : 0, // Last day of the month we alarmed on - so we don't alarm twice in one day!
+  rp : true, // Repeat
+  as : false, // Auto snooze
+  hard: true, // Whether the alarm will be like HardAlarm or not
+  timer : 300, // (optional) If set, this is a timer and it's the time in seconds
+  daysOfWeek: [true,true,true,true,true,true,true] // What days of the week the alarm is on. First item is Sunday, 2nd is Monday, etc.
+}
+*/
+
+function formatTime(t) {
+  mins = 0 | (t / 60000) % 60;
+  hrs = 0 | (t / 3600000);
+  return hrs + ":" + ("0" + mins).substr(-2);
+}
+
+function formatTimer(t) {
+  mins = 0 | (t / 60) % 60;
+  hrs = 0 | (t / 3600);
+  return hrs + ":" + ("0" + mins).substr(-2);
+}
+
+function getCurrentTime() {
+  let time = new Date();
+  return (
+    time.getHours() * 3600000 +
+    time.getMinutes() * 60000 +
+    time.getSeconds() * 1000
+  );
+}
+
+function showMainMenu() {
+  const menu = {
+    "": { title: "Alarms" },
+    "New Alarm": () => showEditAlarmMenu(-1),
+    "New Timer": () => showEditTimerMenu(-1),
+  };
+  alarms.forEach((alarm, idx) => {
+    let txt =
+      (alarm.timer ? "TIMER " : "ALARM ") +
+      (alarm.on ? "on  " : "off ") +
+      (alarm.timer ? formatTimer(alarm.timer) : formatTime(alarm.t));
+    menu[txt] = function () {
+      if (alarm.timer) showEditTimerMenu(idx);
+      else showEditAlarmMenu(idx);
+    };
+  });
+  menu["< Back"] = () => {
+    load();
+  };
+
+  if (WIDGETS["qalarm"]) WIDGETS["qalarm"].reload();
+  return E.showMenu(menu);
+}
+
+function showEditAlarmMenu(alarmIndex, alarm) {
+  const newAlarm = alarmIndex < 0;
+
+  if (!alarm) {
+    if (newAlarm) {
+      alarm = {
+        t: 43200000,
+        on: true,
+        rp: true,
+        as: false,
+        hard: false,
+        daysOfWeek: new Array(7).fill(true),
+      };
+    } else {
+      alarm = Object.assign({}, alarms[alarmIndex]); // Copy object in case we don't save it
+    }
+  }
+
+  let hrs = 0 | (alarm.t / 3600000);
+  let mins = 0 | (alarm.t / 60000) % 60;
+  let secs = 0 | (alarm.t / 1000) % 60;
+
+  const menu = {
+    "": { title: alarm.msg ? alarm.msg : "Alarms" },
+    Hours: {
+      value: hrs,
+      onchange: function (v) {
+        if (v < 0) v = 23;
+        if (v > 23) v = 0;
+        hrs = v;
+        this.value = v;
+      }, // no arrow fn -> preserve 'this'
+    },
+    Minutes: {
+      value: mins,
+      onchange: function (v) {
+        if (v < 0) v = 59;
+        if (v > 59) v = 0;
+        mins = v;
+        this.value = v;
+      }, // no arrow fn -> preserve 'this'
+    },
+    Seconds: {
+      value: secs,
+      onchange: function (v) {
+        if (v < 0) v = 59;
+        if (v > 59) v = 0;
+        secs = v;
+        this.value = v;
+      }, // no arrow fn -> preserve 'this'
+    },
+    Enabled: {
+      value: alarm.on,
+      format: (v) => (v ? "On" : "Off"),
+      onchange: (v) => (alarm.on = v),
+    },
+    Repeat: {
+      value: alarm.rp,
+      format: (v) => (v ? "Yes" : "No"),
+      onchange: (v) => (alarm.rp = v),
+    },
+    "Auto snooze": {
+      value: alarm.as,
+      format: (v) => (v ? "Yes" : "No"),
+      onchange: (v) => (alarm.as = v),
+    },
+    Hard: {
+      value: alarm.hard,
+      format: (v) => (v ? "Yes" : "No"),
+      onchange: (v) => (alarm.hard = v),
+    },
+    "Days of week": () => showDaysMenu(alarmIndex, getAlarm()),
+  };
+
+  function getAlarm() {
+    alarm.t = hrs * 3600000 + mins * 60000 + secs * 1000;
+
+    alarm.last = 0;
+    // If alarm is for tomorrow not today (eg, in the past), set day
+    if (alarm.t < getCurrentTime()) alarm.last = new Date().getDate();
+
+    return alarm;
+  }
+
+  menu["> Save"] = function () {
+    if (newAlarm) alarms.push(getAlarm());
+    else alarms[alarmIndex] = getAlarm();
+    require("Storage").write("qalarm.json", JSON.stringify(alarms));
+    eval(require("Storage").read("qalarmcheck.js"));
+    showMainMenu();
+  };
+
+  if (!newAlarm) {
+    menu["> Delete"] = function () {
+      alarms.splice(alarmIndex, 1);
+      require("Storage").write("qalarm.json", JSON.stringify(alarms));
+      eval(require("Storage").read("qalarmcheck.js"));
+      showMainMenu();
+    };
+  }
+  menu["< Back"] = showMainMenu;
+  return E.showMenu(menu);
+}
+
+function showDaysMenu(alarmIndex, alarm) {
+  const menu = {
+    "": { title: alarm.msg ? alarm.msg : "Alarms" },
+    "< Back": () => showEditAlarmMenu(alarmIndex, alarm),
+  };
+
+  for (let i = 0; i < 7; i++) {
+    let dayOfWeek = require("locale").dow({ getDay: () => i });
+    menu[dayOfWeek] = {
+      value: alarm.daysOfWeek[i],
+      format: (v) => (v ? "Yes" : "No"),
+      onchange: (v) => (alarm.daysOfWeek[i] = v),
+    };
+  }
+
+  return E.showMenu(menu);
+}
+
+function showEditTimerMenu(timerIndex) {
+  var newAlarm = timerIndex < 0;
+
+  let alarm;
+  if (newAlarm) {
+    alarm = {
+      timer: 300,
+      on: true,
+      rp: false,
+      as: false,
+      hard: false,
+    };
+  } else {
+    alarm = alarms[timerIndex];
+  }
+
+  let hrs = 0 | (alarm.timer / 3600);
+  let mins = 0 | (alarm.timer / 60) % 60;
+  let secs = (0 | alarm.timer) % 60;
+
+  const menu = {
+    "": { title: "Timer" },
+    Hours: {
+      value: hrs,
+      onchange: function (v) {
+        if (v < 0) v = 23;
+        if (v > 23) v = 0;
+        hrs = v;
+        this.value = v;
+      }, // no arrow fn -> preserve 'this'
+    },
+    Minutes: {
+      value: mins,
+      onchange: function (v) {
+        if (v < 0) v = 59;
+        if (v > 59) v = 0;
+        mins = v;
+        this.value = v;
+      }, // no arrow fn -> preserve 'this'
+    },
+    Seconds: {
+      value: secs,
+      onchange: function (v) {
+        if (v < 0) v = 59;
+        if (v > 59) v = 0;
+        secs = v;
+        this.value = v;
+      }, // no arrow fn -> preserve 'this'
+    },
+    Enabled: {
+      value: alarm.on,
+      format: (v) => (v ? "On" : "Off"),
+      onchange: (v) => (alarm.on = v),
+    },
+    Hard: {
+      value: alarm.hard,
+      format: (v) => (v ? "On" : "Off"),
+      onchange: (v) => (alarm.hard = v),
+    },
+  };
+  function getTimer() {
+    alarm.timer = hrs * 3600 + mins * 60 + secs;
+    alarm.t = (getCurrentTime() + alarm.timer * 1000) % 86400000;
+    return alarm;
+  }
+  menu["> Save"] = function () {
+    if (newAlarm) alarms.push(getTimer());
+    else alarms[timerIndex] = getTimer();
+    require("Storage").write("qalarm.json", JSON.stringify(alarms));
+    eval(require("Storage").read("qalarmcheck.js"));
+    showMainMenu();
+  };
+  if (!newAlarm) {
+    menu["> Delete"] = function () {
+      alarms.splice(timerIndex, 1);
+      require("Storage").write("qalarm.json", JSON.stringify(alarms));
+      eval(require("Storage").read("qalarmcheck.js"));
+      showMainMenu();
+    };
+  }
+  menu["< Back"] = showMainMenu;
+  return E.showMenu(menu);
+}
+
+showMainMenu();
diff --git a/apps/qalarm/app.png b/apps/qalarm/app.png
new file mode 100644
index 000000000..14edf4150
Binary files /dev/null and b/apps/qalarm/app.png differ
diff --git a/apps/qalarm/boot.js b/apps/qalarm/boot.js
new file mode 100644
index 000000000..6713ad9e1
--- /dev/null
+++ b/apps/qalarm/boot.js
@@ -0,0 +1 @@
+eval(require("Storage").read("qalarmcheck.js"));
diff --git a/apps/qalarm/qalarm.js b/apps/qalarm/qalarm.js
new file mode 100644
index 000000000..6b31ba645
--- /dev/null
+++ b/apps/qalarm/qalarm.js
@@ -0,0 +1,153 @@
+// This file shows the alarm
+
+function formatTime(t) {
+  let hrs = Math.floor(t / 3600000);
+  let mins = Math.round((t / 60000) % 60);
+  return hrs + ":" + ("0" + mins).substr(-2);
+}
+
+function getCurrentTime() {
+  let time = new Date();
+  return (
+    time.getHours() * 3600000 +
+    time.getMinutes() * 60000 +
+    time.getSeconds() * 1000
+  );
+}
+
+function getRandomInt(max) {
+  return Math.floor(Math.random() * Math.floor(max));
+}
+
+function getRandomFromRange(
+  lowerRangeMin,
+  lowerRangeMax,
+  higherRangeMin,
+  higherRangeMax
+) {
+  let lowerRange = lowerRangeMax - lowerRangeMin;
+  let higherRange = higherRangeMax - higherRangeMin;
+  let fullRange = lowerRange + higherRange;
+  let randomNum = getRandomInt(fullRange);
+  if (randomNum <= lowerRangeMax - lowerRangeMin) {
+    return randomNum + lowerRangeMin;
+  } else {
+    return randomNum + (higherRangeMin - lowerRangeMax);
+  }
+}
+
+function showNumberPicker(currentGuess, randomNum) {
+  if (currentGuess == randomNum) {
+    E.showMessage("" + currentGuess + "\n PRESS ENTER", "Get to " + randomNum);
+  } else {
+    E.showMessage("" + currentGuess, "Get to " + randomNum);
+  }
+}
+
+function showPrompt(msg, buzzCount, alarm) {
+  E.showPrompt(msg, {
+    title: alarm.timer ? "TIMER!" : "ALARM!",
+    buttons: { Sleep: true, Ok: false }, // default is sleep so it'll come back in 10 mins
+  }).then(function (sleep) {
+    buzzCount = 0;
+    if (sleep) {
+      if (alarm.ohr === undefined) alarm.ohr = alarm.t;
+      alarm.t += 10 / 60; // 10 minutes
+      require("Storage").write("qalarm.json", JSON.stringify(alarms));
+      load();
+    } else {
+      alarm.last = new Date().getDate();
+      if (alarm.ohr !== undefined) {
+        alarm.t = alarm.ohr;
+        delete alarm.ohr;
+      }
+      if (!alarm.rp) alarm.on = false;
+      require("Storage").write("qalarm.json", JSON.stringify(alarms));
+      load();
+    }
+  });
+}
+
+function showAlarm(alarm) {
+  if ((require("Storage").readJSON("setting.json", 1) || {}).quiet > 1) return; // total silence
+  let msg = formatTime(alarm.t);
+  let buzzCount = 20;
+  if (alarm.msg) msg += "\n" + alarm.msg + "!";
+
+  if (alarm.hard) {
+    let okClicked = false;
+    let currentGuess = 10;
+    let randomNum = getRandomFromRange(0, 7, 13, 20);
+    showNumberPicker(currentGuess, randomNum);
+    setWatch(
+      (o) => {
+        if (!okClicked && currentGuess < 20) {
+          currentGuess = currentGuess + 1;
+          showNumberPicker(currentGuess, randomNum);
+        }
+      },
+      BTN1,
+      { repeat: true, edge: "rising" }
+    );
+
+    setWatch(
+      (o) => {
+        if (currentGuess == randomNum) {
+          okClicked = true;
+          showPrompt(msg, buzzCount, alarm);
+        }
+      },
+      BTN2,
+      { repeat: true, edge: "rising" }
+    );
+
+    setWatch(
+      (o) => {
+        if (!okClicked && currentGuess > 0) {
+          currentGuess = currentGuess - 1;
+          showNumberPicker(currentGuess, randomNum);
+        }
+      },
+      BTN3,
+      { repeat: true, edge: "rising" }
+    );
+  } else {
+    showPrompt(msg, buzzCount, alarm);
+  }
+
+  function buzz() {
+    Bangle.buzz(500).then(() => {
+      setTimeout(() => {
+        Bangle.buzz(500).then(function () {
+          setTimeout(() => {
+            Bangle.buzz(2000).then(function () {
+              if (buzzCount--) setTimeout(buzz, 2000);
+              else if (alarm.as) {
+                // auto-snooze
+                buzzCount = 20;
+                setTimeout(buzz, 600000); // 10 minutes
+              }
+            });
+          }, 100);
+        });
+      }, 100);
+    });
+  }
+  buzz();
+}
+
+let time = new Date();
+let t = getCurrentTime();
+let alarms = require("Storage").readJSON("qalarm.json", 1) || [];
+
+let active = alarms.filter(
+  (alarm) =>
+    alarm.on &&
+    alarm.t < t &&
+    alarm.last != time.getDate() &&
+    (alarm.timer || alarm.daysOfWeek[time.getDay()])
+);
+
+if (active.length) {
+  showAlarm(active.sort((a, b) => a.t - b.t)[0]);
+}
diff --git a/apps/qalarm/qalarmcheck.js b/apps/qalarm/qalarmcheck.js
new file mode 100644
index 000000000..9a3f10d5e
--- /dev/null
+++ b/apps/qalarm/qalarmcheck.js
@@ -0,0 +1,41 @@
+/**
+ * This file checks for upcoming alarms and schedules qalarm.js to deal with them and itself to continue doing these checks.
+ */
+
+print("Checking for alarms...");
+
+clearInterval();
+
+function getCurrentTime() {
+  let time = new Date();
+  return (
+    time.getHours() * 3600000 +
+    time.getMinutes() * 60000 +
+    time.getSeconds() * 1000
+  );
+}
+
+let time = new Date();
+let t = getCurrentTime();
+
+let nextAlarms = (require("Storage").readJSON("qalarm.json", 1) || [])
+  .filter(
+    (alarm) =>
+      alarm.on &&
+      alarm.t > t &&
+      alarm.last != time.getDate() &&
+      (alarm.timer || alarm.daysOfWeek[time.getDay()])
+  )
+  .sort((a, b) => a.t - b.t);
+
+if (nextAlarms[0]) {
+  setTimeout(() => {
+    eval(require("Storage").read("qalarmcheck.js"));
+    load("qalarm.js");
+  }, nextAlarms[0].t - t);
+} else {
+  // No alarms found: will re-check at midnight
+  setTimeout(() => {
+    eval(require("Storage").read("qalarmcheck.js"));
+  }, 86400000 - t);
+}
diff --git a/apps/qalarm/widget.js b/apps/qalarm/widget.js
new file mode 100644
index 000000000..f80aff653
--- /dev/null
+++ b/apps/qalarm/widget.js
@@ -0,0 +1,22 @@
+WIDGETS["qalarm"] = {
+  area: "tl",
+  width: 0,
+  draw: function () {
+    if (this.width)
+      g.reset().drawImage(
+        atob(
+          "GBgBAAAAAAAAABgADhhwDDwwGP8YGf+YMf+MM//MM//MA//AA//AA//AA//AA//AA//AB//gD//wD//wAAAAADwAABgAAAAAAAAA"
+        ),
+        this.x,
+        this.y
+      );
+  },
+  reload: function () {
+    WIDGETS["qalarm"].width = (
+      require("Storage").readJSON("qalarm.json", 1) || []
+    ).some((alarm) => alarm.on)
+      ? 24
+      : 0;
+  },
+};
+WIDGETS["qalarm"].reload();
diff --git a/apps/qmsched/ChangeLog b/apps/qmsched/ChangeLog
index 8bae1dba0..27b5421e8 100644
--- a/apps/qmsched/ChangeLog
+++ b/apps/qmsched/ChangeLog
@@ -1,3 +1,3 @@
 0.01: First version
 0.02: Add widget
-
+0.03: Bangle.js 2 support
diff --git a/apps/qmsched/app.js b/apps/qmsched/app.js
index 105e09ea6..c6377d4ba 100644
--- a/apps/qmsched/app.js
+++ b/apps/qmsched/app.js
@@ -32,17 +32,16 @@ function formatTime(t) {
 }
 
 function showMainMenu() {
-  const menu = {
-    "": {"title": "Quiet Mode"},
-    "Current Mode": {
-      value: (require("Storage").readJSON("setting.json", 1) || {}).quiet|0,
-      format: v => modeNames[v],
-      onchange: function(v) {
-        if (v<0) {v = 2;}
-        if (v>2) {v = 0;}
-        require("qmsched").setMode(v);
-        this.value = v;
-      },
+  let menu = {"": {"title": "Quiet Mode"}};
+  // "Current Mode""Silent" won't fit on Bangle.js 2
+  menu["Current" + ((process.env.HWVERSION===2)?"":" Mode")]= {
+    value: (require("Storage").readJSON("setting.json", 1) || {}).quiet|0,
+    format: v => modeNames[v],
+    onchange: function(v) {
+      if (v<0) {v = 2;}
+      if (v>2) {v = 0;}
+      require("qmsched").setMode(v);
+      this.value = v;
     },
   };
   scheds.sort((a, b) => (a.hr-b.hr));
diff --git a/apps/recorder/ChangeLog b/apps/recorder/ChangeLog
new file mode 100644
index 000000000..40240de64
--- /dev/null
+++ b/apps/recorder/ChangeLog
@@ -0,0 +1,5 @@
+0.01: New App!
+0.02: Use 'recorder.log..' rather than 'record.log..'
+      Fix interface.html
+0.03: Fix theme and maps/graphing if no GPS
+0.04: Multiple bugfixes
diff --git a/apps/recorder/README.md b/apps/recorder/README.md
new file mode 100644
index 000000000..ba53a99f2
--- /dev/null
+++ b/apps/recorder/README.md
@@ -0,0 +1,27 @@
+# Recorder
+
+![icon](app.png)
+
+This app allows you to record data every few seconds - it can run in background.
+
+Usually you'd record GPS (but this is not required). The data can later be exported as CSV, KML or GPX files via the Download button in the Bangle.js App Store entry for Recorder.
+
+## Usage
+
+First run the `Recorder` app, here you can configure what you want to record, how often,
+and you can start and stop recordings.
+
+You can record
+
+* **Time** The current time
+* **GPS** GPS Latitude, Longitude and Altitude
+* **Steps** Steps counted by the step counter
+* **HR** Heart rate
+
+**Note:** It is possible for other apps to record information using this app
+as well. They need to define a `foobar.recorder.js` file - see the `getRecorders`
+function in `widget.js` for more information.
+
+## Tips
+
+When recording GPS, it usually takes several minutes for the watch to get a [GPS fix](https://en.wikipedia.org/wiki/Time_to_first_fix). There is a grey satellite symbol, which you will see turn red when you get an actual GPS Fix. You can [upload assistant files](https://banglejs.com/apps/#assisted%20gps%20update) to speed up the time spent on getting a GPS fix.
diff --git a/apps/recorder/app-icon.js b/apps/recorder/app-icon.js
new file mode 100644
index 000000000..4181d2b12
--- /dev/null
+++ b/apps/recorder/app-icon.js
@@ -0,0 +1 @@
+require("heatshrink").decompress(atob("mEw4cA///vPWvN8kvkuu14/s3OMjN0Kf4AQ2vaCB0Ftu3oARfgdt23AGsO2NaHQT+MB2XJCJ1MyXJsAQMgUky3JkARMjIRBpIRNvMl2VJlAQLldvtmSpN+CJcbt2ECJsBregggRBv4RRdJfbgEkyVLq3ACJ1Jq3dCBMKBYIRBpFW7d0CJUDsgRBhdbtvQCJHYgUTm1IgEttuwCI8GCIMSpMwA4MVEZPoCIUkaxj7BoQRPiQRCwARNpARByARNpMJCJyNBgKjBCJy1CCJ79BfZYNDCJoxBBoQnCABBVFN4IRJPIoRLV4sCpMgCJTbECJYKFCJUJBQsJfpoA/A"))
diff --git a/apps/recorder/app-settings.json b/apps/recorder/app-settings.json
new file mode 100644
index 000000000..4a3117a17
--- /dev/null
+++ b/apps/recorder/app-settings.json
@@ -0,0 +1,6 @@
+{
+  "recording":false,
+  "file":"record.log0.csv",
+  "period":10,
+  "record" : ["gps"]
+}
diff --git a/apps/recorder/app.js b/apps/recorder/app.js
new file mode 100644
index 000000000..fcd8d6031
--- /dev/null
+++ b/apps/recorder/app.js
@@ -0,0 +1,417 @@
+Bangle.loadWidgets();
+Bangle.drawWidgets();
+
+var settings;
+
+var osm;
+try { // if it's installed, use the OpenStreetMap module
+  osm = require("openstmap");
+} catch (e) {}
+
+function loadSettings() {
+  settings = require("Storage").readJSON("recorder.json",1)||{};
+  var changed = false;
+  if (!settings.file) {
+    changed = true;
+    settings.file = "recorder.log0.csv";
+  }
+  if (!Array.isArray(settings.record)) {
+    settings.record = ["gps"];
+    changed = true;
+  }
+  if (changed)
+    require("Storage").writeJSON("recorder.json", settings);
+}
+loadSettings();
+
+function updateSettings() {
+  require("Storage").writeJSON("recorder.json", settings);
+  if (WIDGETS["recorder"])
+    WIDGETS["recorder"].reload();
+}
+
+function getTrackNumber(filename) {
+  return parseInt(filename.match(/^recorder\.log(.*)\.csv$/)[1]||0);
+}
+
+function showMainMenu() {
+  function boolFormat(v) { return v?"Yes":"No"; }
+  function menuRecord(id) {
+    return {
+      value: settings.record.includes(id),
+      format: boolFormat,
+      onchange: v => {
+        settings.recording = false; // stop recording if we change anything
+        settings.record = settings.record.filter(r=>r!=id);
+        if (v) settings.record.push(id);
+        updateSettings();
+      }
+    };
+  }
+  const mainmenu = {
+    '': { 'title': 'Recorder' },
+    '< Back': ()=>{load();},
+    'RECORD': {
+      value: !!settings.recording,
+      format: v=>v?"On":"Off",
+      onchange: v => {
+        setTimeout(function() {
+          E.showMenu();
+          WIDGETS["recorder"].setRecording(v).then(function() {
+            print("Complete");
+            loadSettings();
+            print(settings.recording);
+            showMainMenu();
+          });
+        }, 1);
+      }
+    },
+    'File #': {
+      value: getTrackNumber(settings.file),
+      min: 0,
+      max: 99,
+      step: 1,
+      onchange: v => {
+        settings.recording = false; // stop recording if we change anything
+        settings.file = "recorder.log"+v+".csv";
+        updateSettings();
+      }
+    },
+    'View Tracks': ()=>{viewTracks();},
+    'Time Period': {
+      value: settings.period||10,
+      min: 1,
+      max: 120,
+      step: 1,
+      format: v=>v+"s",
+      onchange: v => {
+        settings.recording = false; // stop recording if we change anything
+        settings.period = v;
+        updateSettings();
+      }
+    }
+  };
+  var recorders = WIDGETS["recorder"].getRecorders();
+  Object.keys(recorders).forEach(id=>{
+    mainmenu["Log "+recorders[id]().name] = menuRecord(id);
+  });
+  return E.showMenu(mainmenu);
+}
+
+
+
+function viewTracks() {
+  const menu = {
+    '': { 'title': 'Tracks' }
+  };
+  var found = false;
+  require("Storage").list(/^recorder\.log.*\.csv$/,{sf:true}).forEach(filename=>{
+    found = true;
+    menu["Track "+getTrackNumber(filename)] = ()=>viewTrack(filename,false);
+  });
+  if (!found)
+    menu["No Tracks found"] = function(){};
+  menu['< Back'] = () => { showMainMenu(); };
+  return E.showMenu(menu);
+}
+
+function getTrackInfo(filename) {
+  "ram"
+  var minLat = 90;
+  var maxLat = -90;
+  var minLong = 180;
+  var maxLong = -180;
+  var starttime, duration=0;
+  var f = require("Storage").open(filename,"r");
+  if (f===undefined) return;
+  var l = f.readLine(f);
+  var fields, timeIdx, latIdx, lonIdx;
+  var nl = 0, c, n;
+  if (l!==undefined) {
+    fields = l.trim().split(",");
+    timeIdx = fields.indexOf("Time");
+    latIdx = fields.indexOf("Latitude");
+    lonIdx = fields.indexOf("Longitude");
+    l = f.readLine(f);
+  }
+  if (l!==undefined) {
+    c = l.split(",");
+    starttime = parseInt(c[timeIdx]);
+  }
+  // pushed this loop together to try and bump loading speed a little
+  while(l!==undefined) {
+    ++nl;c=l.split(",");l = f.readLine(f);
+    if (c[latIdx]=="")continue;
+    n = +c[latIdx];if(n>maxLat)maxLat=n;if(nmaxLong)maxLong=n;if(nylen ? screenSize/xlen : screenSize/ylen;
+  return {
+    fn : getTrackNumber(filename),
+    fields : fields,
+    filename : filename,
+    time : new Date(starttime*1000),
+    records : nl,
+    minLat : minLat, maxLat : maxLat,
+    minLong : minLong, maxLong : maxLong,
+    lat : (minLat+maxLat)/2, lon : (minLong+maxLong)/2,
+    lfactor : lfactor,
+    scale : scale,
+    duration : Math.round(duration)
+  };
+}
+
+function asTime(v){
+  var mins = Math.floor(v/60);
+  var secs = v-mins*60;
+  return ""+mins.toString()+"m "+secs.toString()+"s";
+}
+
+function viewTrack(filename, info) {
+  if (!info) {
+    E.showMessage("Loading...","Track "+getTrackNumber(filename));
+    info = getTrackInfo(filename);
+  }
+  //console.log(info);
+  const menu = {
+    '': { 'title': 'Track '+info.fn }
+  };
+  if (info.time)
+    menu[info.time.toISOString().substr(0,16).replace("T"," ")] = function(){};
+  menu["Duration"] = { value : asTime(info.duration)};
+  menu["Records"] = { value : ""+info.records };
+  if (info.fields.includes("Latitude"))
+    menu['Plot Map'] = function() {
+      info.qOSTM = false;
+      plotTrack(info);
+    };
+  if (osm && info.fields.includes("Latitude"))
+    menu['Plot OpenStMap'] = function() {
+      info.qOSTM = true;
+      plotTrack(info);
+    }
+  if (info.fields.includes("Altitude"))
+    menu['Plot Alt.'] = function() {
+      plotGraph(info, "Altitude");
+    };
+  menu['Plot Speed'] = function() {
+    plotGraph(info, "Speed");
+  };
+  // TODO: steps, heart rate?
+  menu['Erase'] = function() {
+    E.showPrompt("Delete Track?").then(function(v) {
+      if (v) {
+        settings.recording = false;
+        updateSettings();
+        var f = require("Storage").open(filename,"r");
+        f.erase();
+        viewTracks();
+      } else
+        viewTrack(n, info);
+    });
+  };
+  menu['< Back'] = () => { viewTracks(); };
+  return E.showMenu(menu);
+}
+
+function plotTrack(info) {
+  "ram"
+
+  function distance(lat1,long1,lat2,long2) { "ram"
+    var x = (long1-long2) * Math.cos((lat1+lat2)*Math.PI/360);
+    var y = lat2 - lat1;
+    return Math.sqrt(x*x + y*y) * 6371000 * Math.PI / 180;
+  }
+
+  // Function to convert lat/lon to XY
+  var getMapXY;
+  if (info.qOSTM) {
+    getMapXY = osm.latLonToXY.bind(osm);
+  } else {
+    getMapXY = function(lat, lon) { "ram"
+      return {x:cx + Math.round((long - info.lon)*info.lfactor*info.scale),
+              y:cy + Math.round((info.lat - lat)*info.scale)};
+    };
+  }
+
+  E.showMenu(); // remove menu
+  E.showMessage("Drawing...","Track "+info.fn);
+  g.flip(); // on buffered screens, draw a not saying we're busy
+  g.clear(1);
+  var s = require("Storage");
+  var W = g.getWidth();
+  var H = g.getHeight();
+  var cx = W/2;
+  var cy = 24 + (H-24)/2;
+  if (!info.qOSTM) {
+    g.setColor("#f00").fillRect(9,80,11,120).fillPoly([9,60,19,80,0,80]);
+    g.setColor(g.theme.fg).setFont("6x8").setFontAlign(0,0).drawString("N",10,50);
+  } else {
+    osm.lat = info.lat;
+    osm.lon = info.lon;
+    osm.draw();
+    g.setColor("#000");
+  }
+  var latIdx = info.fields.indexOf("Latitude");
+  var lonIdx = info.fields.indexOf("Longitude");
+  g.drawString(asTime(info.duration),10,220);
+  var f = require("Storage").open(info.filename,"r");
+  if (f===undefined) return;
+  var l = f.readLine(f);
+  l = f.readLine(f); // skip headers
+  var ox=0;
+  var oy=0;
+  var olat,olong,dist=0;
+  var i=0, c = l.split(",");
+  // skip until we find our first data
+  while(l!==undefined && c[latIdx]=="") {
+    c = l.split(",");
+    l = f.readLine(f);
+  }
+  // now start plotting
+  var lat = +c[latIdx];
+  var long = +c[lonIdx];
+  var mp = getMapXY(lat, long);
+  g.moveTo(mp.x,mp.y);
+  g.setColor("#0f0");
+  g.fillCircle(mp.x,mp.y,5);
+  if (info.qOSTM) g.setColor("#f09");
+  else g.setColor(g.theme.fg);
+  l = f.readLine(f);
+  g.flip(); // force update
+  while(l!==undefined) {
+    c = l.split(",");l = f.readLine(f);
+    if (c[latIdx]=="")continue;
+    lat = +c[latIdx];
+    long = +c[lonIdx];
+    mp = getMapXY(lat, long);
+    g.lineTo(mp.x,mp.y);
+    if (info.qOSTM) g.fillCircle(mp.x,mp.y,2); // make the track more visible
+    var d = distance(olat,olong,lat,long);
+    if (!isNaN(d)) dist+=d;
+    olat = lat;
+    olong = long;
+    ox = mp.x;
+    oy = mp.y;
+    if (++i > 100) { g.flip();i=0; }
+  }
+  g.setColor("#f00");
+  g.fillCircle(ox,oy,5);
+  if (info.qOSTM) g.setColor("#000");
+  else g.setColor(g.theme.fg);
+  g.drawString(require("locale").distance(dist),g.getWidth() / 2, g.getHeight() - 20);
+  g.setFont("6x8",2);
+  g.setFontAlign(0,0,3);
+  g.drawString("Back",g.getWidth() - 10, g.getHeight() - 40);
+  setWatch(function() {
+    viewTrack(info.fn, info);
+  }, global.BTN3||BTN1);
+  Bangle.drawWidgets();
+  g.flip();
+}
+
+function plotGraph(info, style) {
+  "ram"
+  E.showMenu(); // remove menu
+  E.showMessage("Calculating...","Track "+info.fn);
+  var filename = info.filename;
+  var infn = new Float32Array(80);
+  var infc = new Uint16Array(80);
+  var title;
+  var lt = 0; // last time
+  var tn = 0; // count for each time period
+  var strt, dur = info.duration;
+  var f = require("Storage").open(filename,"r");
+  if (f===undefined) return;
+  var l = f.readLine(f);
+  l = f.readLine(f); // skip headers
+  var nl = 0, c, i;
+  var timeIdx = info.fields.indexOf("Time");
+  if (l!==undefined) {
+    c = l.split(",");
+    strt = c[timeIdx];
+  }
+  if (style=="Altitude") {
+    title = "Altitude (m)";
+    var altIdx = info.fields.indexOf("Altitude");
+    while(l!==undefined) {
+      ++nl;c=l.split(",");l = f.readLine(f);
+      if (c[altIdx]=="") continue;
+      i = Math.round(80*(c[timeIdx] - strt)/dur);
+      infn[i]+=+c[altIdx];
+      infc[i]++;
+    }
+  } else if (style=="Speed") {
+    title = "Speed (m/s)";
+    var latIdx = info.fields.indexOf("Latitude");
+    var lonIdx = info.fields.indexOf("Longitude");
+    // skip until we find our first data
+    while(l!==undefined && c[latIdx]=="") {
+      c = l.split(",");
+      l = f.readLine(f);
+    }
+    // now iterate
+    var p,lp = Bangle.project({lat:c[1],lon:c[2]});
+    var t,dx,dy,d,lt = c[timeIdx];
+    while(l!==undefined) {
+      ++nl;c=l.split(",");
+      l = f.readLine(f);
+      if (c[latIdx] == "") {
+        continue;
+      }
+      t = c[timeIdx];
+      i = Math.round(80*(t - strt)/dur);
+      p = Bangle.project({lat:c[latIdx],lon:c[lonIdx]});
+      dx = p.x-lp.x;
+      dy = p.y-lp.y;
+      d = Math.sqrt(dx*dx+dy*dy);
+      if (t!=lt) {
+        infn[i]+=d / (t-lt); // speed
+        infc[i]++;
+      }
+      lp = p;
+      lt = t;
+    }
+  } else throw new Error("Unknown type "+style);
+  var min=100000,max=-100000;
+  for (var i=0;i0) infn[i]/=infc[i];
+    var n = infn[i];
+    if (n>max) max=n;
+    if (n 8) {
+    grid*=2;
+  }
+  // draw
+  g.clear(1).setFont("6x8",1);
+  var r = require("graph").drawLine(g, infn, {
+    x:4,y:24,
+    width: g.getWidth()-24,
+    height: g.getHeight()-(24+8),
+    axes : true,
+    gridy : grid,
+    gridx : infn.length / 3,
+    title: title,
+    miny: min,
+    maxy: max,
+    xlabel : x=>Math.round(x*dur/(60*infn.length))+" min" // minutes
+  });
+  g.setFont("6x8",2);
+  g.setFontAlign(0,0,3);
+  g.drawString("Back",g.getWidth() - 10, g.getHeight() - 40);
+  setWatch(function() {
+    viewTrack(info.filename, info);
+  }, global.BTN3||BTN1);
+  g.flip();
+}
+
+showMainMenu();
diff --git a/apps/recorder/app.png b/apps/recorder/app.png
new file mode 100644
index 000000000..036f5d132
Binary files /dev/null and b/apps/recorder/app.png differ
diff --git a/apps/recorder/interface.html b/apps/recorder/interface.html
new file mode 100644
index 000000000..ad0de4887
--- /dev/null
+++ b/apps/recorder/interface.html
@@ -0,0 +1,255 @@
+
+  
+    
+  
+  
+    

+
+    
+    
+  
+
diff --git a/apps/recorder/settings.js b/apps/recorder/settings.js
new file mode 100644
index 000000000..2a9a7a0d8
--- /dev/null
+++ b/apps/recorder/settings.js
@@ -0,0 +1,4 @@
+(function(back) {
+  // just go right to our app - we need all the memory
+  load("record.app.js");
+})();
diff --git a/apps/recorder/widget.js b/apps/recorder/widget.js
new file mode 100644
index 000000000..09893bbb7
--- /dev/null
+++ b/apps/recorder/widget.js
@@ -0,0 +1,222 @@
+(() => {
+  var storageFile; // file for GPS track
+  var entriesWritten = 0;
+  var activeRecorders = [];
+  var writeInterval;
+
+  function loadSettings() {
+    var settings = require("Storage").readJSON("recorder.json",1)||{};
+    settings.period = settings.period||10;
+    if (!settings.file || !settings.file.startsWith("recorder.log"))
+      settings.recording = false;
+    return settings;
+  }
+
+  function getRecorders() {
+    var recorders = {
+      gps:function() {
+        var lat = 0;
+        var lon = 0;
+        var alt = 0;
+        var samples = 0;
+        var hasFix = 0;
+        function onGPS(f) {
+          hasFix = f.fix;
+          if (!hasFix) return;
+          lat += f.lat;
+          lon += f.lon;
+          alt += f.alt;
+          samples++;
+        }
+        return {
+          name : "GPS",
+          fields : ["Latitude","Longitude","Altitude"],
+          getValues : () => {
+            var r = ["","",""];
+            if (samples)
+              r = [(lat/samples).toFixed(6),(lon/samples).toFixed(6),Math.round(alt/samples)];
+            samples = 0; lat = 0; lon = 0; alt = 0;
+            return r;
+          },
+          start : () => {
+            hasFix = false;
+            Bangle.on('GPS', onGPS);
+            Bangle.setGPSPower(1,"recorder");
+          },
+          stop : () => {
+            hasFix = false;
+            Bangle.removeListener('GPS', onGPS);
+            Bangle.setGPSPower(0,"recorder");
+          },
+          draw : (x,y) => g.setColor(hasFix?"#f00":"#888").drawImage(atob("DAyBAAACADgDuBOAeA4AzAHADgAAAA=="),x,y)
+        };
+      },
+      hrm:function() {
+        var bpm = 0, bpmConfidence = 0;
+        var hasBPM = false;
+        function onHRM(h) {
+          if (h.confidence >= bpmConfidence) {
+            bpmConfidence = h.confidence;
+            bpm = h.bpm;
+            if (bpmConfidence) hasBPM = true;
+          }
+        }
+        return {
+          name : "HR",
+          fields : ["Heartrate"],
+          getValues : () => {
+            var r = [bpmConfidence?bpm:""];
+            bpm = 0; bpmConfidence = 0;
+            return r;
+          },
+          start : () => {
+            hasBPM = false;
+            Bangle.on('HRM', onHRM);
+            Bangle.setHRMPower(1,"recorder");
+          },
+          stop : () => {
+            hasBPM = false;
+            Bangle.removeListener('HRM', onHRM);
+            Bangle.setHRMPower(0,"recorder");
+          },
+          draw : (x,y) => g.setColor(hasBPM?"#f00":"#888").drawImage(atob("DAyBAAAAAD/H/n/n/j/D/B+AYAAAAA=="),x,y)
+        };
+      },
+      steps:function() {
+        var lastSteps = 0;
+        return {
+          name : "Steps",
+          fields : ["Steps"],
+          getValues : () => {
+            var c = Bangle.getStepCount(), r=[c-lastSteps];
+            lastSteps = c;
+            return r;
+          },
+          start : () => { lastSteps = Bangle.getStepCount(); },
+          stop : () => {},
+          draw : (x,y) => g.reset().drawImage(atob("DAyBAAADDHnnnnnnnnnnjDmDnDnAAA=="),x,y)
+        };
+      }
+      // TODO: recAltitude from pressure sensor
+    };
+    /* eg. foobar.recorder.js
+    (function(recorders) {
+      recorders.foobar = {
+        name : "Foobar",
+        fields : ["foobar"],
+        getValues : () => [123],
+        start : () => {},
+        stop : () => {},
+        draw (x,y) => {} // draw 12x12px status image
+      }
+    })
+    */
+    require("Storage").list(/^.*\.recorder\.js$/).forEach(fn=>eval(fn)(recorders));
+    return recorders;
+  }
+
+  function writeLog() {
+    entriesWritten++;
+    WIDGETS["recorder"].draw();
+    try {
+      var fields = [Math.round(getTime())];
+      activeRecorders.forEach(recorder => fields.push.apply(fields,recorder.getValues()));
+      if (storageFile) storageFile.write(fields.join(",")+"\n");
+    } catch(e) {
+      // If storage.write caused an error, disable
+      // GPS recording so we don't keep getting errors!
+      console.log("recorder: error", e);
+      var settings = loadSettings();
+      settings.recording = false;
+      require("Storage").write("recorder.json", settings);
+      reload();
+    }
+  }
+
+  // Called by the GPS app to reload settings and decide what to do
+  function reload() {
+    var settings = loadSettings();
+    if (writeInterval) clearInterval(writeInterval);
+    writeInterval = undefined;
+
+    activeRecorders.forEach(rec => rec.stop());
+    activeRecorders = [];
+    entriesWritten = 0;
+
+    if (settings.recording) {
+      // set up recorders
+      var recorders = getRecorders(); // TODO: order??
+      settings.record.forEach(r => {
+        var recorder = recorders[r];
+        if (!recorder) {
+          console.log("Recorder for "+E.toJS(r)+"+not found");
+          return;
+        }
+        var activeRecorder = recorder();
+        activeRecorder.start();
+        activeRecorders.push(activeRecorder);
+        // TODO: write field names?
+      });
+      WIDGETS["recorder"].width = 15 + ((activeRecorders.length+1)>>1)*12; // 12px per recorder
+      // open/create file
+      if (require("Storage").list(settings.file).length) { // Append
+        storageFile = require("Storage").open(settings.file,"a");
+        // TODO: what if loaded modules are different??
+      } else {
+        storageFile = require("Storage").open(settings.file,"w");
+        // New file - write headers
+        var fields = ["Time"];
+        activeRecorders.forEach(recorder => fields.push.apply(fields,recorder.fields));
+        storageFile.write(fields.join(",")+"\n");
+      }
+      // start recording...
+      WIDGETS["recorder"].draw();
+      writeInterval = setInterval(writeLog, settings.period*1000);
+    } else {
+      WIDGETS["recorder"].width = 0;
+      storageFile = undefined;
+    }
+  }
+  // add the widget
+  WIDGETS["recorder"]={area:"tl",width:0,draw:function() {
+    if (!writeInterval) return;
+    g.reset();    g.drawImage(atob("DRSBAAGAHgDwAwAAA8B/D/hvx38zzh4w8A+AbgMwGYDMDGBjAA=="),this.x+1,this.y+2);
+    activeRecorders.forEach((recorder,i)=>{
+      recorder.draw(this.x+15+(i>>1)*12, this.y+(i&1)*12);
+    });
+  },getRecorders:getRecorders,reload:function() {
+    reload();
+    Bangle.drawWidgets(); // relayout all widgets
+  },setRecording:function(isOn) {
+    var settings = loadSettings();
+    if (isOn && !settings.recording && require("Storage").list(settings.file).length)
+      return E.showPrompt("Overwrite\nLog 0?",{title:"Recorder",buttons:{Yes:"yes",No:"no"}}).then(selection=>{
+        if (selection=="no") return false; // just cancel
+        if (selection=="yes") require("Storage").open(settings.file,"r").erase();
+        // TODO: Add 'new file' option
+        return WIDGETS["recorder"].setRecording(1);
+      });
+    settings.recording = isOn;
+    require("Storage").write("recorder.json", settings);
+    WIDGETS["recorder"].reload();
+    return Promise.resolve(settings.recording);
+  }/*,plotTrack:function(m) { // m=instance of openstmap module
+    // if we're here, settings was already loaded
+    var f = require("Storage").open(settings.file,"r");
+    var l = f.readLine(f);
+    if (l===undefined) return;
+    var c = l.split(",");
+    var mp = m.latLonToXY(+c[1], +c[2]);
+    g.moveTo(mp.x,mp.y);
+    l = f.readLine(f);
+    while(l!==undefined) {
+      c = l.split(",");
+      mp = m.latLonToXY(+c[1], +c[2]);
+      g.lineTo(mp.x,mp.y);
+      g.fillCircle(mp.x,mp.y,2); // make the track more visible
+      l = f.readLine(f);
+    }
+  }*/};
+  // load settings, set correct widget width
+  reload();
+})()
diff --git a/apps/rpgdice/bangle1-rpg-dice-screenshot.png b/apps/rpgdice/bangle1-rpg-dice-screenshot.png
new file mode 100644
index 000000000..bca526b33
Binary files /dev/null and b/apps/rpgdice/bangle1-rpg-dice-screenshot.png differ
diff --git a/apps/s7clk/README.md b/apps/s7clk/README.md
new file mode 100644
index 000000000..6b91abfe3
--- /dev/null
+++ b/apps/s7clk/README.md
@@ -0,0 +1,4 @@
+# Simple 7 Segment Clock
+
+![](screenshot_s7segment.png)
+
diff --git a/apps/s7clk/screenshot_s7segment.png b/apps/s7clk/screenshot_s7segment.png
new file mode 100644
index 000000000..a0386e540
Binary files /dev/null and b/apps/s7clk/screenshot_s7segment.png differ
diff --git a/apps/schoolCalendar/CalenderLogo.png b/apps/schoolCalendar/CalenderLogo.png
new file mode 100644
index 000000000..49d198a15
Binary files /dev/null and b/apps/schoolCalendar/CalenderLogo.png differ
diff --git a/apps/schoolCalendar/ChangeLog b/apps/schoolCalendar/ChangeLog
new file mode 100644
index 000000000..85a7cc698
--- /dev/null
+++ b/apps/schoolCalendar/ChangeLog
@@ -0,0 +1 @@
+0.01: App is created with gradient background.
diff --git a/apps/schoolCalendar/README.md b/apps/schoolCalendar/README.md
new file mode 100644
index 000000000..fd95ddf59
--- /dev/null
+++ b/apps/schoolCalendar/README.md
@@ -0,0 +1,27 @@
+# School Calendar
+
+School Calendar is a calendar that you can see your upcoming classes or schedule.
+
+## Usage:
+Enter your calendar events on the customizer then upload. (all day events are not supported yet)
+
+Once uploaded on the watch when in the table mode you can use BTN1 and BTN3 to scroll up and down on the list. (The red rectangle indicates your current position on the table and your yellow rectangle indicates your current schedule item or your next schedule item.)
+
+If you press BTN2 it will go into detail mode, and you can see additional information about your schedule item. Also, in this mode you can scroll up and down with BTN1 and BTN3 to move around in the table. To exit detail mode press BTN2 again. 
+
+## Screenshots:
+![screenshot (5)](https://user-images.githubusercontent.com/89286474/142801592-485aa0b0-c417-44c8-8097-befa81d2599c.png)
+![screenshot (6)](https://user-images.githubusercontent.com/89286474/142801595-47f73c63-501a-4221-baba-84dd97b65bf9.png)
+
+## Updates Coming Soon:
+- [ ] Notifications
+- [ ] All Day Events
+- [ ] Improved Rendering Screen
+- [ ] Better Graphics
+- [ ] Scrolling Table
+- [ ] Bangle.js V2 Compatibility
+- [ ] Full Calendar (Calendar that does not have repeating weekly events.)
+
+## Creator
+Ronin0000
+
diff --git a/apps/schoolCalendar/app-icon.js b/apps/schoolCalendar/app-icon.js
new file mode 100644
index 000000000..f41623fc7
--- /dev/null
+++ b/apps/schoolCalendar/app-icon.js
@@ -0,0 +1 @@
+require("heatshrink").decompress(atob("mEwyBC/AH4A/AH4A/AH4A/AH4A/AH4A80s0AIIh/L/5f/EP4ATscsAIo9DBY4BVEJZf/L/5fRznzAIJfdEJZfpymyAJmSBpwPLBZRfqIYYBwL9OMuIBzL9VRAMRTDCJhfymBpkL+GEmABzL9UQAJelinOrPWzQDBymSCpe96+c6YnNL9N794tBAYoFD5152u21t1AoP332MuIPDVIJxB88c///AoODD4gFBLoYJBL9YBT888M4IHDNYPvvoDDznzD5pfq54BT737L4QHCVYQFCL4XTD5pfpueuAKOtqpRBxlRB5JfDEJpfqxwBIG4OOwkw/4AC+++xlxC5ZfBymyDoYlHAIJf0AImEiBbB0s0MIOtuoTJL4glML9NrtoBTLoJTBBpJfCyQfNL9VNAKZfB88cBpJfED5hfslgzEAoT3BxlxBYd795RB2uWC4tjAoQNBC4olFCIZfpFoIBJe4JJB+++AYe964XLL4YPLAIJfqhgBNueuAIJnBCp4BPL9Na9YBBsQBCAoY3BA4YBRC4INPL9oBS5YXWDoxfqJIIByL9NS1QBzL9WKAIgzBAooHFAMBfpMJABqLtYA/AH4A/AH4A/AH4A/AH4A/AH4A/AH4A/AH4A/AH4ALA"))
diff --git a/apps/schoolCalendar/custom.html b/apps/schoolCalendar/custom.html
new file mode 100644
index 000000000..b007d16e3
--- /dev/null
+++ b/apps/schoolCalendar/custom.html
@@ -0,0 +1,416 @@
+
+  
+    
+     
+     
+  
+  
+    

+      
Create your events on the week shown. Keep in note that your events repeat weekly.

+      
One you have created your events, Click .

+      
All day events are not supported. A feature that lets you get the calendar from your watch will be added in a future update.

+    

+    
+    
+    
+
+    
+    

+  
+
diff --git a/apps/schoolCalendar/fullcalendar/interaction/LICENSE.txt b/apps/schoolCalendar/fullcalendar/interaction/LICENSE.txt
new file mode 100644
index 000000000..84924a980
--- /dev/null
+++ b/apps/schoolCalendar/fullcalendar/interaction/LICENSE.txt
@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2021 Adam Shaw
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
diff --git a/apps/schoolCalendar/fullcalendar/interaction/README.md b/apps/schoolCalendar/fullcalendar/interaction/README.md
new file mode 100644
index 000000000..6d5821d71
--- /dev/null
+++ b/apps/schoolCalendar/fullcalendar/interaction/README.md
@@ -0,0 +1,8 @@
+
+# FullCalendar Interaction Plugin
+
+Provides functionality for event drag-n-drop, resizing, dateClick, and selectable actions
+
+[View the docs »](https://fullcalendar.io/docs/editable)
+
+This package was created from the [FullCalendar monorepo »](https://github.com/fullcalendar/fullcalendar)
diff --git a/apps/schoolCalendar/fullcalendar/interaction/package.json b/apps/schoolCalendar/fullcalendar/interaction/package.json
new file mode 100644
index 000000000..d382635a8
--- /dev/null
+++ b/apps/schoolCalendar/fullcalendar/interaction/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "@fullcalendar/interaction",
+  "version": "5.9.0",
+  "title": "FullCalendar Interaction Plugin",
+  "description": "Provides functionality for event drag-n-drop, resizing, dateClick, and selectable actions",
+  "docs": "https://fullcalendar.io/docs/editable",
+  "dependencies": {
+    "@fullcalendar/common": "workspace:~5.9.0",
+    "tslib": "^2.1.0"
+  },
+  "main": "main.cjs.js",
+  "module": "main.js",
+  "types": "main.d.ts",
+  "jsdelivr": "main.global.min.js",
+  "browserGlobal": "FullCalendarInteraction",
+  "homepage": "https://fullcalendar.io/",
+  "bugs": "https://fullcalendar.io/reporting-bugs",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/fullcalendar/fullcalendar.git",
+    "homepage": "https://github.com/fullcalendar/fullcalendar"
+  },
+  "license": "MIT",
+  "author": {
+    "name": "Adam Shaw",
+    "email": "arshaw@arshaw.com",
+    "url": "http://arshaw.com/"
+  },
+  "devDependencies": {
+    "@fullcalendar/core-preact": "workspace:*"
+  }
+}
diff --git a/apps/schoolCalendar/fullcalendar/interaction/tsconfig.json b/apps/schoolCalendar/fullcalendar/interaction/tsconfig.json
new file mode 100644
index 000000000..6172b1a45
--- /dev/null
+++ b/apps/schoolCalendar/fullcalendar/interaction/tsconfig.json
@@ -0,0 +1,13 @@
+{
+  "extends":  "../../tsconfig.base",
+  "compilerOptions": {
+    "rootDir": "src",
+    "outDir": "tsc"
+  },
+  "include": [
+    "src/**/*"
+  ],
+  "references": [
+    { "path": "../common" }
+  ]
+}
diff --git a/apps/schoolCalendar/fullcalendar/locales-all.js b/apps/schoolCalendar/fullcalendar/locales-all.js
new file mode 100644
index 000000000..f8be47ef2
--- /dev/null
+++ b/apps/schoolCalendar/fullcalendar/locales-all.js
@@ -0,0 +1,1622 @@
+[].push.apply(FullCalendar.globalLocales, function () {
+  'use strict';
+
+  var l0 = {
+    code: 'af',
+    week: {
+      dow: 1, // Maandag is die eerste dag van die week.
+      doy: 4, // Die week wat die 4de Januarie bevat is die eerste week van die jaar.
+    },
+    buttonText: {
+      prev: 'Vorige',
+      next: 'Volgende',
+      today: 'Vandag',
+      year: 'Jaar',
+      month: 'Maand',
+      week: 'Week',
+      day: 'Dag',
+      list: 'Agenda',
+    },
+    allDayText: 'Heeldag',
+    moreLinkText: 'Addisionele',
+    noEventsText: 'Daar is geen gebeurtenisse nie',
+  };
+
+  var l1 = {
+    code: 'ar-dz',
+    week: {
+      dow: 0, // Sunday is the first day of the week.
+      doy: 4, // The week that contains Jan 1st is the first week of the year.
+    },
+    direction: 'rtl',
+    buttonText: {
+      prev: 'السابق',
+      next: 'التالي',
+      today: 'اليوم',
+      month: 'شهر',
+      week: 'أسبوع',
+      day: 'يوم',
+      list: 'أجندة',
+    },
+    weekText: 'أسبوع',
+    allDayText: 'اليوم كله',
+    moreLinkText: 'أخرى',
+    noEventsText: 'أي أحداث لعرض',
+  };
+
+  var l2 = {
+    code: 'ar-kw',
+    week: {
+      dow: 0, // Sunday is the first day of the week.
+      doy: 12, // The week that contains Jan 1st is the first week of the year.
+    },
+    direction: 'rtl',
+    buttonText: {
+      prev: 'السابق',
+      next: 'التالي',
+      today: 'اليوم',
+      month: 'شهر',
+      week: 'أسبوع',
+      day: 'يوم',
+      list: 'أجندة',
+    },
+    weekText: 'أسبوع',
+    allDayText: 'اليوم كله',
+    moreLinkText: 'أخرى',
+    noEventsText: 'أي أحداث لعرض',
+  };
+
+  var l3 = {
+    code: 'ar-ly',
+    week: {
+      dow: 6, // Saturday is the first day of the week.
+      doy: 12, // The week that contains Jan 1st is the first week of the year.
+    },
+    direction: 'rtl',
+    buttonText: {
+      prev: 'السابق',
+      next: 'التالي',
+      today: 'اليوم',
+      month: 'شهر',
+      week: 'أسبوع',
+      day: 'يوم',
+      list: 'أجندة',
+    },
+    weekText: 'أسبوع',
+    allDayText: 'اليوم كله',
+    moreLinkText: 'أخرى',
+    noEventsText: 'أي أحداث لعرض',
+  };
+
+  var l4 = {
+    code: 'ar-ma',
+    week: {
+      dow: 6, // Saturday is the first day of the week.
+      doy: 12, // The week that contains Jan 1st is the first week of the year.
+    },
+    direction: 'rtl',
+    buttonText: {
+      prev: 'السابق',
+      next: 'التالي',
+      today: 'اليوم',
+      month: 'شهر',
+      week: 'أسبوع',
+      day: 'يوم',
+      list: 'أجندة',
+    },
+    weekText: 'أسبوع',
+    allDayText: 'اليوم كله',
+    moreLinkText: 'أخرى',
+    noEventsText: 'أي أحداث لعرض',
+  };
+
+  var l5 = {
+    code: 'ar-sa',
+    week: {
+      dow: 0, // Sunday is the first day of the week.
+      doy: 6, // The week that contains Jan 1st is the first week of the year.
+    },
+    direction: 'rtl',
+    buttonText: {
+      prev: 'السابق',
+      next: 'التالي',
+      today: 'اليوم',
+      month: 'شهر',
+      week: 'أسبوع',
+      day: 'يوم',
+      list: 'أجندة',
+    },
+    weekText: 'أسبوع',
+    allDayText: 'اليوم كله',
+    moreLinkText: 'أخرى',
+    noEventsText: 'أي أحداث لعرض',
+  };
+
+  var l6 = {
+    code: 'ar-tn',
+    week: {
+      dow: 1, // Monday is the first day of the week.
+      doy: 4, // The week that contains Jan 4th is the first week of the year.
+    },
+    direction: 'rtl',
+    buttonText: {
+      prev: 'السابق',
+      next: 'التالي',
+      today: 'اليوم',
+      month: 'شهر',
+      week: 'أسبوع',
+      day: 'يوم',
+      list: 'أجندة',
+    },
+    weekText: 'أسبوع',
+    allDayText: 'اليوم كله',
+    moreLinkText: 'أخرى',
+    noEventsText: 'أي أحداث لعرض',
+  };
+
+  var l7 = {
+    code: 'ar',
+    week: {
+      dow: 6, // Saturday is the first day of the week.
+      doy: 12, // The week that contains Jan 1st is the first week of the year.
+    },
+    direction: 'rtl',
+    buttonText: {
+      prev: 'السابق',
+      next: 'التالي',
+      today: 'اليوم',
+      month: 'شهر',
+      week: 'أسبوع',
+      day: 'يوم',
+      list: 'أجندة',
+    },
+    weekText: 'أسبوع',
+    allDayText: 'اليوم كله',
+    moreLinkText: 'أخرى',
+    noEventsText: 'أي أحداث لعرض',
+  };
+
+  var l8 = {
+    code: 'az',
+    week: {
+      dow: 1, // Monday is the first day of the week.
+      doy: 4, // The week that contains Jan 4th is the first week of the year.
+    },
+    buttonText: {
+      prev: 'Əvvəl',
+      next: 'Sonra',
+      today: 'Bu Gün',
+      month: 'Ay',
+      week: 'Həftə',
+      day: 'Gün',
+      list: 'Gündəm',
+    },
+    weekText: 'Həftə',
+    allDayText: 'Bütün Gün',
+    moreLinkText: function(n) {
+      return '+ daha çox ' + n
+    },
+    noEventsText: 'Göstərmək üçün hadisə yoxdur',
+  };
+
+  var l9 = {
+    code: 'bg',
+    week: {
+      dow: 1, // Monday is the first day of the week.
+      doy: 7, // The week that contains Jan 1st is the first week of the year.
+    },
+    buttonText: {
+      prev: 'назад',
+      next: 'напред',
+      today: 'днес',
+      month: 'Месец',
+      week: 'Седмица',
+      day: 'Ден',
+      list: 'График',
+    },
+    allDayText: 'Цял ден',
+    moreLinkText: function(n) {
+      return '+още ' + n
+    },
+    noEventsText: 'Няма събития за показване',
+  };
+
+  var l10 = {
+    code: 'bn',
+    week: {
+      dow: 0, // Sunday is the first day of the week.
+      doy: 6, // The week that contains Jan 1st is the first week of the year.
+    },
+    buttonText: {
+      prev: 'পেছনে',
+      next: 'সামনে',
+      today: 'আজ',
+      month: 'মাস',
+      week: 'সপ্তাহ',
+      day: 'দিন',
+      list: 'তালিকা',
+    },
+    weekText: 'সপ্তাহ',
+    allDayText: 'সারাদিন',
+    moreLinkText: function(n) {
+      return '+অন্যান্য ' + n
+    },
+    noEventsText: 'কোনো ইভেন্ট নেই',
+  };
+
+  var l11 = {
+    code: 'bs',
+    week: {
+      dow: 1, // Monday is the first day of the week.
+      doy: 7, // The week that contains Jan 1st is the first week of the year.
+    },
+    buttonText: {
+      prev: 'Prošli',
+      next: 'Sljedeći',
+      today: 'Danas',
+      month: 'Mjesec',
+      week: 'Sedmica',
+      day: 'Dan',
+      list: 'Raspored',
+    },
+    weekText: 'Sed',
+    allDayText: 'Cijeli dan',
+    moreLinkText: function(n) {
+      return '+ još ' + n
+    },
+    noEventsText: 'Nema događaja za prikazivanje',
+  };
+
+  var l12 = {
+    code: 'ca',
+    week: {
+      dow: 1, // Monday is the first day of the week.
+      doy: 4, // The week that contains Jan 4th is the first week of the year.
+    },
+    buttonText: {
+      prev: 'Anterior',
+      next: 'Següent',
+      today: 'Avui',
+      month: 'Mes',
+      week: 'Setmana',
+      day: 'Dia',
+      list: 'Agenda',
+    },
+    weekText: 'Set',
+    allDayText: 'Tot el dia',
+    moreLinkText: 'més',
+    noEventsText: 'No hi ha esdeveniments per mostrar',
+  };
+
+  var l13 = {
+    code: 'cs',
+    week: {
+      dow: 1, // Monday is the first day of the week.
+      doy: 4, // The week that contains Jan 4th is the first week of the year.
+    },
+    buttonText: {
+      prev: 'Dříve',
+      next: 'Později',
+      today: 'Nyní',
+      month: 'Měsíc',
+      week: 'Týden',
+      day: 'Den',
+      list: 'Agenda',
+    },
+    weekText: 'Týd',
+    allDayText: 'Celý den',
+    moreLinkText: function(n) {
+      return '+další: ' + n
+    },
+    noEventsText: 'Žádné akce k zobrazení',
+  };
+
+  var l14 = {
+    code: 'cy',
+    week: {
+      dow: 1, // Monday is the first day of the week.
+      doy: 4, // The week that contains Jan 4th is the first week of the year.
+    },
+    buttonText: {
+      prev: 'Blaenorol',
+      next: 'Nesaf',
+      today: 'Heddiw',
+      year: 'Blwyddyn',
+      month: 'Mis',
+      week: 'Wythnos',
+      day: 'Dydd',
+      list: 'Rhestr',
+    },
+    weekText: 'Wythnos',
+    allDayText: 'Trwy\'r dydd',
+    moreLinkText: 'Mwy',
+    noEventsText: 'Dim digwyddiadau',
+  };
+
+  var l15 = {
+    code: 'da',
+    week: {
+      dow: 1, // Monday is the first day of the week.
+      doy: 4, // The week that contains Jan 4th is the first week of the year.
+    },
+    buttonText: {
+      prev: 'Forrige',
+      next: 'Næste',
+      today: 'I dag',
+      month: 'Måned',
+      week: 'Uge',
+      day: 'Dag',
+      list: 'Agenda',
+    },
+    weekText: 'Uge',
+    allDayText: 'Hele dagen',
+    moreLinkText: 'flere',
+    noEventsText: 'Ingen arrangementer at vise',
+  };
+
+  var l16 = {
+    code: 'de-at',
+    week: {
+      dow: 1, // Monday is the first day of the week.
+      doy: 4, // The week that contains Jan 4th is the first week of the year.
+    },
+    buttonText: {
+      prev: 'Zurück',
+      next: 'Vor',
+      today: 'Heute',
+      year: 'Jahr',
+      month: 'Monat',
+      week: 'Woche',
+      day: 'Tag',
+      list: 'Terminübersicht',
+    },
+    weekText: 'KW',
+    allDayText: 'Ganztägig',
+    moreLinkText: function(n) {
+      return '+ weitere ' + n
+    },
+    noEventsText: 'Keine Ereignisse anzuzeigen',
+  };
+
+  var l17 = {
+    code: 'de',
+    week: {
+      dow: 1, // Monday is the first day of the week.
+      doy: 4, // The week that contains Jan 4th is the first week of the year.
+    },
+    buttonText: {
+      prev: 'Zurück',
+      next: 'Vor',
+      today: 'Heute',
+      year: 'Jahr',
+      month: 'Monat',
+      week: 'Woche',
+      day: 'Tag',
+      list: 'Terminübersicht',
+    },
+    weekText: 'KW',
+    allDayText: 'Ganztägig',
+    moreLinkText: function(n) {
+      return '+ weitere ' + n
+    },
+    noEventsText: 'Keine Ereignisse anzuzeigen',
+  };
+
+  var l18 = {
+    code: 'el',
+    week: {
+      dow: 1, // Monday is the first day of the week.
+      doy: 4, // The week that contains Jan 4st is the first week of the year.
+    },
+    buttonText: {
+      prev: 'Προηγούμενος',
+      next: 'Επόμενος',
+      today: 'Σήμερα',
+      month: 'Μήνας',
+      week: 'Εβδομάδα',
+      day: 'Ημέρα',
+      list: 'Ατζέντα',
+    },
+    weekText: 'Εβδ',
+    allDayText: 'Ολοήμερο',
+    moreLinkText: 'περισσότερα',
+    noEventsText: 'Δεν υπάρχουν γεγονότα προς εμφάνιση',
+  };
+
+  var l19 = {
+    code: 'en-au',
+    week: {
+      dow: 1, // Monday is the first day of the week.
+      doy: 4, // The week that contains Jan 4th is the first week of the year.
+    },
+  };
+
+  var l20 = {
+    code: 'en-gb',
+    week: {
+      dow: 1, // Monday is the first day of the week.
+      doy: 4, // The week that contains Jan 4th is the first week of the year.
+    },
+  };
+
+  var l21 = {
+    code: 'en-nz',
+    week: {
+      dow: 1, // Monday is the first day of the week.
+      doy: 4, // The week that contains Jan 4th is the first week of the year.
+    },
+  };
+
+  var l22 = {
+    code: 'eo',
+    week: {
+      dow: 1, // Monday is the first day of the week.
+      doy: 4, // The week that contains Jan 4th is the first week of the year.
+    },
+    buttonText: {
+      prev: 'Antaŭa',
+      next: 'Sekva',
+      today: 'Hodiaŭ',
+      month: 'Monato',
+      week: 'Semajno',
+      day: 'Tago',
+      list: 'Tagordo',
+    },
+    weekText: 'Sm',
+    allDayText: 'Tuta tago',
+    moreLinkText: 'pli',
+    noEventsText: 'Neniuj eventoj por montri',
+  };
+
+  var l23 = {
+    code: 'es',
+    week: {
+      dow: 0, // Sunday is the first day of the week.
+      doy: 6, // The week that contains Jan 1st is the first week of the year.
+    },
+    buttonText: {
+      prev: 'Ant',
+      next: 'Sig',
+      today: 'Hoy',
+      month: 'Mes',
+      week: 'Semana',
+      day: 'Día',
+      list: 'Agenda',
+    },
+    weekText: 'Sm',
+    allDayText: 'Todo el día',
+    moreLinkText: 'más',
+    noEventsText: 'No hay eventos para mostrar',
+  };
+
+  var l24 = {
+    code: 'es',
+    week: {
+      dow: 1, // Monday is the first day of the week.
+      doy: 4, // The week that contains Jan 4th is the first week of the year.
+    },
+    buttonText: {
+      prev: 'Ant',
+      next: 'Sig',
+      today: 'Hoy',
+      month: 'Mes',
+      week: 'Semana',
+      day: 'Día',
+      list: 'Agenda',
+    },
+    weekText: 'Sm',
+    allDayText: 'Todo el día',
+    moreLinkText: 'más',
+    noEventsText: 'No hay eventos para mostrar',
+  };
+
+  var l25 = {
+    code: 'et',
+    week: {
+      dow: 1, // Monday is the first day of the week.
+      doy: 4, // The week that contains Jan 4th is the first week of the year.
+    },
+    buttonText: {
+      prev: 'Eelnev',
+      next: 'Järgnev',
+      today: 'Täna',
+      month: 'Kuu',
+      week: 'Nädal',
+      day: 'Päev',
+      list: 'Päevakord',
+    },
+    weekText: 'näd',
+    allDayText: 'Kogu päev',
+    moreLinkText: function(n) {
+      return '+ veel ' + n
+    },
+    noEventsText: 'Kuvamiseks puuduvad sündmused',
+  };
+
+  var l26 = {
+    code: 'eu',
+    week: {
+      dow: 1, // Monday is the first day of the week.
+      doy: 7, // The week that contains Jan 1st is the first week of the year.
+    },
+    buttonText: {
+      prev: 'Aur',
+      next: 'Hur',
+      today: 'Gaur',
+      month: 'Hilabetea',
+      week: 'Astea',
+      day: 'Eguna',
+      list: 'Agenda',
+    },
+    weekText: 'As',
+    allDayText: 'Egun osoa',
+    moreLinkText: 'gehiago',
+    noEventsText: 'Ez dago ekitaldirik erakusteko',
+  };
+
+  var l27 = {
+    code: 'fa',
+    week: {
+      dow: 6, // Saturday is the first day of the week.
+      doy: 12, // The week that contains Jan 1st is the first week of the year.
+    },
+    direction: 'rtl',
+    buttonText: {
+      prev: 'قبلی',
+      next: 'بعدی',
+      today: 'امروز',
+      month: 'ماه',
+      week: 'هفته',
+      day: 'روز',
+      list: 'برنامه',
+    },
+    weekText: 'هف',
+    allDayText: 'تمام روز',
+    moreLinkText: function(n) {
+      return 'بیش از ' + n
+    },
+    noEventsText: 'هیچ رویدادی به نمایش',
+  };
+
+  var l28 = {
+    code: 'fi',
+    week: {
+      dow: 1, // Monday is the first day of the week.
+      doy: 4, // The week that contains Jan 4th is the first week of the year.
+    },
+    buttonText: {
+      prev: 'Edellinen',
+      next: 'Seuraava',
+      today: 'Tänään',
+      month: 'Kuukausi',
+      week: 'Viikko',
+      day: 'Päivä',
+      list: 'Tapahtumat',
+    },
+    weekText: 'Vk',
+    allDayText: 'Koko päivä',
+    moreLinkText: 'lisää',
+    noEventsText: 'Ei näytettäviä tapahtumia',
+  };
+
+  var l29 = {
+    code: 'fr',
+    buttonText: {
+      prev: 'Précédent',
+      next: 'Suivant',
+      today: "Aujourd'hui",
+      year: 'Année',
+      month: 'Mois',
+      week: 'Semaine',
+      day: 'Jour',
+      list: 'Mon planning',
+    },
+    weekText: 'Sem.',
+    allDayText: 'Toute la journée',
+    moreLinkText: 'en plus',
+    noEventsText: 'Aucun événement à afficher',
+  };
+
+  var l30 = {
+    code: 'fr-ch',
+    week: {
+      dow: 1, // Monday is the first day of the week.
+      doy: 4, // The week that contains Jan 4th is the first week of the year.
+    },
+    buttonText: {
+      prev: 'Précédent',
+      next: 'Suivant',
+      today: 'Courant',
+      year: 'Année',
+      month: 'Mois',
+      week: 'Semaine',
+      day: 'Jour',
+      list: 'Mon planning',
+    },
+    weekText: 'Sm',
+    allDayText: 'Toute la journée',
+    moreLinkText: 'en plus',
+    noEventsText: 'Aucun événement à afficher',
+  };
+
+  var l31 = {
+    code: 'fr',
+    week: {
+      dow: 1, // Monday is the first day of the week.
+      doy: 4, // The week that contains Jan 4th is the first week of the year.
+    },
+    buttonText: {
+      prev: 'Précédent',
+      next: 'Suivant',
+      today: "Aujourd'hui",
+      year: 'Année',
+      month: 'Mois',
+      week: 'Semaine',
+      day: 'Jour',
+      list: 'Planning',
+    },
+    weekText: 'Sem.',
+    allDayText: 'Toute la journée',
+    moreLinkText: 'en plus',
+    noEventsText: 'Aucun événement à afficher',
+  };
+
+  var l32 = {
+    code: 'gl',
+    week: {
+      dow: 1, // Monday is the first day of the week.
+      doy: 4, // The week that contains Jan 4th is the first week of the year.
+    },
+    buttonText: {
+      prev: 'Ant',
+      next: 'Seg',
+      today: 'Hoxe',
+      month: 'Mes',
+      week: 'Semana',
+      day: 'Día',
+      list: 'Axenda',
+    },
+    weekText: 'Sm',
+    allDayText: 'Todo o día',
+    moreLinkText: 'máis',
+    noEventsText: 'Non hai eventos para amosar',
+  };
+
+  var l33 = {
+    code: 'he',
+    direction: 'rtl',
+    buttonText: {
+      prev: 'הקודם',
+      next: 'הבא',
+      today: 'היום',
+      month: 'חודש',
+      week: 'שבוע',
+      day: 'יום',
+      list: 'סדר יום',
+    },
+    allDayText: 'כל היום',
+    moreLinkText: 'אחר',
+    noEventsText: 'אין אירועים להצגה',
+    weekText: 'שבוע',
+  };
+
+  var l34 = {
+    code: 'hi',
+    week: {
+      dow: 0, // Sunday is the first day of the week.
+      doy: 6, // The week that contains Jan 1st is the first week of the year.
+    },
+    buttonText: {
+      prev: 'पिछला',
+      next: 'अगला',
+      today: 'आज',
+      month: 'महीना',
+      week: 'सप्ताह',
+      day: 'दिन',
+      list: 'कार्यसूची',
+    },
+    weekText: 'हफ्ता',
+    allDayText: 'सभी दिन',
+    moreLinkText: function(n) {
+      return '+अधिक ' + n
+    },
+    noEventsText: 'कोई घटनाओं को प्रदर्शित करने के लिए',
+  };
+
+  var l35 = {
+    code: 'hr',
+    week: {
+      dow: 1, // Monday is the first day of the week.
+      doy: 7, // The week that contains Jan 1st is the first week of the year.
+    },
+    buttonText: {
+      prev: 'Prijašnji',
+      next: 'Sljedeći',
+      today: 'Danas',
+      month: 'Mjesec',
+      week: 'Tjedan',
+      day: 'Dan',
+      list: 'Raspored',
+    },
+    weekText: 'Tje',
+    allDayText: 'Cijeli dan',
+    moreLinkText: function(n) {
+      return '+ još ' + n
+    },
+    noEventsText: 'Nema događaja za prikaz',
+  };
+
+  var l36 = {
+    code: 'hu',
+    week: {
+      dow: 1, // Monday is the first day of the week.
+      doy: 4, // The week that contains Jan 4th is the first week of the year.
+    },
+    buttonText: {
+      prev: 'vissza',
+      next: 'előre',
+      today: 'ma',
+      month: 'Hónap',
+      week: 'Hét',
+      day: 'Nap',
+      list: 'Lista',
+    },
+    weekText: 'Hét',
+    allDayText: 'Egész nap',
+    moreLinkText: 'további',
+    noEventsText: 'Nincs megjeleníthető esemény',
+  };
+
+  var l37 = {
+    code: 'hy-am',
+    week: {
+      dow: 1, // Monday is the first day of the week.
+      doy: 4, // The week that contains Jan 4th is the first week of the year.
+    },
+    buttonText: {
+      prev: 'Նախորդ',
+      next: 'Հաջորդ',
+      today: 'Այսօր',
+      month: 'Ամիս',
+      week: 'Շաբաթ',
+      day: 'Օր',
+      list: 'Օրվա ցուցակ',
+    },
+    weekText: 'Շաբ',
+    allDayText: 'Ամբողջ օր',
+    moreLinkText: function(n) {
+      return '+ ևս ' + n
+    },
+    noEventsText: 'Բացակայում է իրադարձությունը ցուցադրելու',
+  };
+
+  var l38 = {
+    code: 'id',
+    week: {
+      dow: 1, // Monday is the first day of the week.
+      doy: 7, // The week that contains Jan 1st is the first week of the year.
+    },
+    buttonText: {
+      prev: 'mundur',
+      next: 'maju',
+      today: 'hari ini',
+      month: 'Bulan',
+      week: 'Minggu',
+      day: 'Hari',
+      list: 'Agenda',
+    },
+    weekText: 'Mg',
+    allDayText: 'Sehari penuh',
+    moreLinkText: 'lebih',
+    noEventsText: 'Tidak ada acara untuk ditampilkan',
+  };
+
+  var l39 = {
+    code: 'is',
+    week: {
+      dow: 1, // Monday is the first day of the week.
+      doy: 4, // The week that contains Jan 4th is the first week of the year.
+    },
+    buttonText: {
+      prev: 'Fyrri',
+      next: 'Næsti',
+      today: 'Í dag',
+      month: 'Mánuður',
+      week: 'Vika',
+      day: 'Dagur',
+      list: 'Dagskrá',
+    },
+    weekText: 'Vika',
+    allDayText: 'Allan daginn',
+    moreLinkText: 'meira',
+    noEventsText: 'Engir viðburðir til að sýna',
+  };
+
+  var l40 = {
+    code: 'it',
+    week: {
+      dow: 1, // Monday is the first day of the week.
+      doy: 4, // The week that contains Jan 4th is the first week of the year.
+    },
+    buttonText: {
+      prev: 'Prec',
+      next: 'Succ',
+      today: 'Oggi',
+      month: 'Mese',
+      week: 'Settimana',
+      day: 'Giorno',
+      list: 'Agenda',
+    },
+    weekText: 'Sm',
+    allDayText: 'Tutto il giorno',
+    moreLinkText: function(n) {
+      return '+altri ' + n
+    },
+    noEventsText: 'Non ci sono eventi da visualizzare',
+  };
+
+  var l41 = {
+    code: 'ja',
+    buttonText: {
+      prev: '前',
+      next: '次',
+      today: '今日',
+      month: '月',
+      week: '週',
+      day: '日',
+      list: '予定リスト',
+    },
+    weekText: '週',
+    allDayText: '終日',
+    moreLinkText: function(n) {
+      return '他 ' + n + ' 件'
+    },
+    noEventsText: '表示する予定はありません',
+  };
+
+  var l42 = {
+    code: 'ka',
+    week: {
+      dow: 1,
+      doy: 7,
+    },
+    buttonText: {
+      prev: 'წინა',
+      next: 'შემდეგი',
+      today: 'დღეს',
+      month: 'თვე',
+      week: 'კვირა',
+      day: 'დღე',
+      list: 'დღის წესრიგი',
+    },
+    weekText: 'კვ',
+    allDayText: 'მთელი დღე',
+    moreLinkText: function(n) {
+      return '+ კიდევ ' + n
+    },
+    noEventsText: 'ღონისძიებები არ არის',
+  };
+
+  var l43 = {
+    code: 'kk',
+    week: {
+      dow: 1, // Monday is the first day of the week.
+      doy: 7, // The week that contains Jan 1st is the first week of the year.
+    },
+    buttonText: {
+      prev: 'Алдыңғы',
+      next: 'Келесі',
+      today: 'Бүгін',
+      month: 'Ай',
+      week: 'Апта',
+      day: 'Күн',
+      list: 'Күн тәртібі',
+    },
+    weekText: 'Не',
+    allDayText: 'Күні бойы',
+    moreLinkText: function(n) {
+      return '+ тағы ' + n
+    },
+    noEventsText: 'Көрсету үшін оқиғалар жоқ',
+  };
+
+  var l44 = {
+    code: 'km',
+    week: {
+      dow: 1, // Monday is the first day of the week.
+      doy: 4, // The week that contains Jan 4th is the first week of the year.
+    },
+    buttonText: {
+      prev: 'មុន',
+      next: 'បន្ទាប់',
+      today: 'ថ្ងៃនេះ',
+      year: 'ឆ្នាំ',
+      month: 'ខែ',
+      week: 'សប្តាហ៍',
+      day: 'ថ្ងៃ',
+      list: 'បញ្ជី',
+    },
+    weekText: 'សប្តាហ៍',
+    allDayText: 'ពេញមួយថ្ងៃ',
+    moreLinkText: 'ច្រើនទៀត',
+    noEventsText: 'គ្មានព្រឹត្តិការណ៍ត្រូវបង្ហាញ',
+  };
+
+  var l45 = {
+    code: 'ko',
+    buttonText: {
+      prev: '이전달',
+      next: '다음달',
+      today: '오늘',
+      month: '월',
+      week: '주',
+      day: '일',
+      list: '일정목록',
+    },
+    weekText: '주',
+    allDayText: '종일',
+    moreLinkText: '개',
+    noEventsText: '일정이 없습니다',
+  };
+
+  var l46 = {
+    code: 'ku',
+    week: {
+      dow: 6, // Saturday is the first day of the week.
+      doy: 12, // The week that contains Jan 1st is the first week of the year.
+    },
+    direction: 'rtl',
+    buttonText: {
+      prev: 'پێشتر',
+      next: 'دواتر',
+      today: 'ئەمڕو',
+      month: 'مانگ',
+      week: 'هەفتە',
+      day: 'ڕۆژ',
+      list: 'بەرنامە',
+    },
+    weekText: 'هەفتە',
+    allDayText: 'هەموو ڕۆژەکە',
+    moreLinkText: 'زیاتر',
+    noEventsText: 'هیچ ڕووداوێك نیە',
+  };
+
+  var l47 = {
+    code: 'lb',
+    week: {
+      dow: 1, // Monday is the first day of the week.
+      doy: 4, // The week that contains Jan 4th is the first week of the year.
+    },
+    buttonText: {
+      prev: 'Zréck',
+      next: 'Weider',
+      today: 'Haut',
+      month: 'Mount',
+      week: 'Woch',
+      day: 'Dag',
+      list: 'Terminiwwersiicht',
+    },
+    weekText: 'W',
+    allDayText: 'Ganzen Dag',
+    moreLinkText: 'méi',
+    noEventsText: 'Nee Evenementer ze affichéieren',
+  };
+
+  var l48 = {
+    code: 'lt',
+    week: {
+      dow: 1, // Monday is the first day of the week.
+      doy: 4, // The week that contains Jan 4th is the first week of the year.
+    },
+    buttonText: {
+      prev: 'Atgal',
+      next: 'Pirmyn',
+      today: 'Šiandien',
+      month: 'Mėnuo',
+      week: 'Savaitė',
+      day: 'Diena',
+      list: 'Darbotvarkė',
+    },
+    weekText: 'SAV',
+    allDayText: 'Visą dieną',
+    moreLinkText: 'daugiau',
+    noEventsText: 'Nėra įvykių rodyti',
+  };
+
+  var l49 = {
+    code: 'lv',
+    week: {
+      dow: 1, // Monday is the first day of the week.
+      doy: 4, // The week that contains Jan 4th is the first week of the year.
+    },
+    buttonText: {
+      prev: 'Iepr.',
+      next: 'Nāk.',
+      today: 'Šodien',
+      month: 'Mēnesis',
+      week: 'Nedēļa',
+      day: 'Diena',
+      list: 'Dienas kārtība',
+    },
+    weekText: 'Ned.',
+    allDayText: 'Visu dienu',
+    moreLinkText: function(n) {
+      return '+vēl ' + n
+    },
+    noEventsText: 'Nav notikumu',
+  };
+
+  var l50 = {
+    code: 'mk',
+    buttonText: {
+      prev: 'претходно',
+      next: 'следно',
+      today: 'Денес',
+      month: 'Месец',
+      week: 'Недела',
+      day: 'Ден',
+      list: 'График',
+    },
+    weekText: 'Сед',
+    allDayText: 'Цел ден',
+    moreLinkText: function(n) {
+      return '+повеќе ' + n
+    },
+    noEventsText: 'Нема настани за прикажување',
+  };
+
+  var l51 = {
+    code: 'ms',
+    week: {
+      dow: 1, // Monday is the first day of the week.
+      doy: 7, // The week that contains Jan 1st is the first week of the year.
+    },
+    buttonText: {
+      prev: 'Sebelum',
+      next: 'Selepas',
+      today: 'hari ini',
+      month: 'Bulan',
+      week: 'Minggu',
+      day: 'Hari',
+      list: 'Agenda',
+    },
+    weekText: 'Mg',
+    allDayText: 'Sepanjang hari',
+    moreLinkText: function(n) {
+      return 'masih ada ' + n + ' acara'
+    },
+    noEventsText: 'Tiada peristiwa untuk dipaparkan',
+  };
+
+  var l52 = {
+    code: 'nb',
+    week: {
+      dow: 1, // Monday is the first day of the week.
+      doy: 4, // The week that contains Jan 4th is the first week of the year.
+    },
+    buttonText: {
+      prev: 'Forrige',
+      next: 'Neste',
+      today: 'I dag',
+      month: 'Måned',
+      week: 'Uke',
+      day: 'Dag',
+      list: 'Agenda',
+    },
+    weekText: 'Uke',
+    allDayText: 'Hele dagen',
+    moreLinkText: 'til',
+    noEventsText: 'Ingen hendelser å vise',
+  };
+
+  var l53 = {
+    code: 'ne', // code for nepal
+    week: {
+      dow: 7, // Sunday is the first day of the week.
+      doy: 1, // The week that contains Jan 1st is the first week of the year.
+    },
+    buttonText: {
+      prev: 'अघिल्लो',
+      next: 'अर्को',
+      today: 'आज',
+      month: 'महिना',
+      week: 'हप्ता',
+      day: 'दिन',
+      list: 'सूची',
+    },
+    weekText: 'हप्ता',
+    allDayText: 'दिनभरि',
+    moreLinkText: 'थप लिंक',
+    noEventsText: 'देखाउनको लागि कुनै घटनाहरू छैनन्',
+  };
+
+  var l54 = {
+    code: 'nl',
+    week: {
+      dow: 1, // Monday is the first day of the week.
+      doy: 4, // The week that contains Jan 4th is the first week of the year.
+    },
+    buttonText: {
+      prev: 'Vorige',
+      next: 'Volgende',
+      today: 'Vandaag',
+      year: 'Jaar',
+      month: 'Maand',
+      week: 'Week',
+      day: 'Dag',
+      list: 'Agenda',
+    },
+    allDayText: 'Hele dag',
+    moreLinkText: 'extra',
+    noEventsText: 'Geen evenementen om te laten zien',
+  };
+
+  var l55 = {
+    code: 'nn',
+    week: {
+      dow: 1, // Monday is the first day of the week.
+      doy: 4, // The week that contains Jan 4th is the first week of the year.
+    },
+    buttonText: {
+      prev: 'Førre',
+      next: 'Neste',
+      today: 'I dag',
+      month: 'Månad',
+      week: 'Veke',
+      day: 'Dag',
+      list: 'Agenda',
+    },
+    weekText: 'Veke',
+    allDayText: 'Heile dagen',
+    moreLinkText: 'til',
+    noEventsText: 'Ingen hendelser å vise',
+  };
+
+  var l56 = {
+    code: 'pl',
+    week: {
+      dow: 1, // Monday is the first day of the week.
+      doy: 4, // The week that contains Jan 4th is the first week of the year.
+    },
+    buttonText: {
+      prev: 'Poprzedni',
+      next: 'Następny',
+      today: 'Dziś',
+      month: 'Miesiąc',
+      week: 'Tydzień',
+      day: 'Dzień',
+      list: 'Plan dnia',
+    },
+    weekText: 'Tydz',
+    allDayText: 'Cały dzień',
+    moreLinkText: 'więcej',
+    noEventsText: 'Brak wydarzeń do wyświetlenia',
+  };
+
+  var l57 = {
+    code: 'pt-br',
+    buttonText: {
+      prev: 'Anterior',
+      next: 'Próximo',
+      today: 'Hoje',
+      month: 'Mês',
+      week: 'Semana',
+      day: 'Dia',
+      list: 'Lista',
+    },
+    weekText: 'Sm',
+    allDayText: 'dia inteiro',
+    moreLinkText: function(n) {
+      return 'mais +' + n
+    },
+    noEventsText: 'Não há eventos para mostrar',
+  };
+
+  var l58 = {
+    code: 'pt',
+    week: {
+      dow: 1, // Monday is the first day of the week.
+      doy: 4, // The week that contains Jan 4th is the first week of the year.
+    },
+    buttonText: {
+      prev: 'Anterior',
+      next: 'Seguinte',
+      today: 'Hoje',
+      month: 'Mês',
+      week: 'Semana',
+      day: 'Dia',
+      list: 'Agenda',
+    },
+    weekText: 'Sem',
+    allDayText: 'Todo o dia',
+    moreLinkText: 'mais',
+    noEventsText: 'Não há eventos para mostrar',
+  };
+
+  var l59 = {
+    code: 'ro',
+    week: {
+      dow: 1, // Monday is the first day of the week.
+      doy: 7, // The week that contains Jan 1st is the first week of the year.
+    },
+    buttonText: {
+      prev: 'precedentă',
+      next: 'următoare',
+      today: 'Azi',
+      month: 'Lună',
+      week: 'Săptămână',
+      day: 'Zi',
+      list: 'Agendă',
+    },
+    weekText: 'Săpt',
+    allDayText: 'Toată ziua',
+    moreLinkText: function(n) {
+      return '+alte ' + n
+    },
+    noEventsText: 'Nu există evenimente de afișat',
+  };
+
+  var l60 = {
+    code: 'ru',
+    week: {
+      dow: 1, // Monday is the first day of the week.
+      doy: 4, // The week that contains Jan 4th is the first week of the year.
+    },
+    buttonText: {
+      prev: 'Пред',
+      next: 'След',
+      today: 'Сегодня',
+      month: 'Месяц',
+      week: 'Неделя',
+      day: 'День',
+      list: 'Повестка дня',
+    },
+    weekText: 'Нед',
+    allDayText: 'Весь день',
+    moreLinkText: function(n) {
+      return '+ ещё ' + n
+    },
+    noEventsText: 'Нет событий для отображения',
+  };
+
+  var l61 = {
+    code: 'sk',
+    week: {
+      dow: 1, // Monday is the first day of the week.
+      doy: 4, // The week that contains Jan 4th is the first week of the year.
+    },
+    buttonText: {
+      prev: 'Predchádzajúci',
+      next: 'Nasledujúci',
+      today: 'Dnes',
+      month: 'Mesiac',
+      week: 'Týždeň',
+      day: 'Deň',
+      list: 'Rozvrh',
+    },
+    weekText: 'Ty',
+    allDayText: 'Celý deň',
+    moreLinkText: function(n) {
+      return '+ďalšie: ' + n
+    },
+    noEventsText: 'Žiadne akcie na zobrazenie',
+  };
+
+  var l62 = {
+    code: 'sl',
+    week: {
+      dow: 1, // Monday is the first day of the week.
+      doy: 7, // The week that contains Jan 1st is the first week of the year.
+    },
+    buttonText: {
+      prev: 'Prejšnji',
+      next: 'Naslednji',
+      today: 'Trenutni',
+      month: 'Mesec',
+      week: 'Teden',
+      day: 'Dan',
+      list: 'Dnevni red',
+    },
+    weekText: 'Teden',
+    allDayText: 'Ves dan',
+    moreLinkText: 'več',
+    noEventsText: 'Ni dogodkov za prikaz',
+  };
+
+  var l63 = {
+    code: 'sm',
+    buttonText: {
+      prev: 'Talu ai',
+      next: 'Mulimuli atu',
+      today: 'Aso nei',
+      month: 'Masina',
+      week: 'Vaiaso',
+      day: 'Aso',
+      list: 'Faasologa',
+    },
+    weekText: 'Vaiaso',
+    allDayText: 'Aso atoa',
+    moreLinkText: 'sili atu',
+    noEventsText: 'Leai ni mea na tutupu',
+  };
+
+  var l64 = {
+    code: 'sq',
+    week: {
+      dow: 1, // Monday is the first day of the week.
+      doy: 4, // The week that contains Jan 4th is the first week of the year.
+    },
+    buttonText: {
+      prev: 'mbrapa',
+      next: 'Përpara',
+      today: 'sot',
+      month: 'Muaj',
+      week: 'Javë',
+      day: 'Ditë',
+      list: 'Listë',
+    },
+    weekText: 'Ja',
+    allDayText: 'Gjithë ditën',
+    moreLinkText: function(n) {
+      return '+më tepër ' + n
+    },
+    noEventsText: 'Nuk ka evente për të shfaqur',
+  };
+
+  var l65 = {
+    code: 'sr-cyrl',
+    week: {
+      dow: 1, // Monday is the first day of the week.
+      doy: 7, // The week that contains Jan 1st is the first week of the year.
+    },
+    buttonText: {
+      prev: 'Претходна',
+      next: 'следећи',
+      today: 'Данас',
+      month: 'Месец',
+      week: 'Недеља',
+      day: 'Дан',
+      list: 'Планер',
+    },
+    weekText: 'Сед',
+    allDayText: 'Цео дан',
+    moreLinkText: function(n) {
+      return '+ још ' + n
+    },
+    noEventsText: 'Нема догађаја за приказ',
+  };
+
+  var l66 = {
+    code: 'sr',
+    week: {
+      dow: 1, // Monday is the first day of the week.
+      doy: 7, // The week that contains Jan 1st is the first week of the year.
+    },
+    buttonText: {
+      prev: 'Prethodna',
+      next: 'Sledeći',
+      today: 'Danas',
+      month: 'Mеsеc',
+      week: 'Nеdеlja',
+      day: 'Dan',
+      list: 'Planеr',
+    },
+    weekText: 'Sed',
+    allDayText: 'Cеo dan',
+    moreLinkText: function(n) {
+      return '+ još ' + n
+    },
+    noEventsText: 'Nеma događaja za prikaz',
+  };
+
+  var l67 = {
+    code: 'sv',
+    week: {
+      dow: 1, // Monday is the first day of the week.
+      doy: 4, // The week that contains Jan 4th is the first week of the year.
+    },
+    buttonText: {
+      prev: 'Förra',
+      next: 'Nästa',
+      today: 'Idag',
+      month: 'Månad',
+      week: 'Vecka',
+      day: 'Dag',
+      list: 'Program',
+    },
+    weekText: 'v.',
+    allDayText: 'Heldag',
+    moreLinkText: 'till',
+    noEventsText: 'Inga händelser att visa',
+  };
+
+  var l68 = {
+    code: 'ta-in',
+    week: {
+      dow: 1, // Monday is the first day of the week.
+      doy: 4, // The week that contains Jan 4th is the first week of the year.
+    },
+    buttonText: {
+      prev: 'முந்தைய',
+      next: 'அடுத்தது',
+      today: 'இன்று',
+      month: 'மாதம்',
+      week: 'வாரம்',
+      day: 'நாள்',
+      list: 'தினசரி அட்டவணை',
+    },
+    weekText: 'வாரம்',
+    allDayText: 'நாள் முழுவதும்',
+    moreLinkText: function(n) {
+      return '+ மேலும் ' + n
+    },
+    noEventsText: 'காண்பிக்க நிகழ்வுகள் இல்லை',
+  };
+
+  var l69 = {
+    code: 'th',
+    week: {
+      dow: 1, // Monday is the first day of the week.
+      doy: 4, // The week that contains Jan 4th is the first week of the year.
+    },
+    buttonText: {
+      prev: 'ก่อนหน้า',
+      next: 'ถัดไป',
+      prevYear: 'ปีก่อนหน้า',
+      nextYear: 'ปีถัดไป',
+      year: 'ปี',
+      today: 'วันนี้',
+      month: 'เดือน',
+      week: 'สัปดาห์',
+      day: 'วัน',
+      list: 'กำหนดการ',
+    },
+    weekText: 'สัปดาห์',
+    allDayText: 'ตลอดวัน',
+    moreLinkText: 'เพิ่มเติม',
+    noEventsText: 'ไม่มีกิจกรรมที่จะแสดง',
+  };
+
+  var l70 = {
+    code: 'tr',
+    week: {
+      dow: 1, // Monday is the first day of the week.
+      doy: 7, // The week that contains Jan 1st is the first week of the year.
+    },
+    buttonText: {
+      prev: 'geri',
+      next: 'ileri',
+      today: 'bugün',
+      month: 'Ay',
+      week: 'Hafta',
+      day: 'Gün',
+      list: 'Ajanda',
+    },
+    weekText: 'Hf',
+    allDayText: 'Tüm gün',
+    moreLinkText: 'daha fazla',
+    noEventsText: 'Gösterilecek etkinlik yok',
+  };
+
+  var l71 = {
+    code: 'ug',
+    buttonText: {
+      month: 'ئاي',
+      week: 'ھەپتە',
+      day: 'كۈن',
+      list: 'كۈنتەرتىپ',
+    },
+    allDayText: 'پۈتۈن كۈن',
+  };
+
+  var l72 = {
+    code: 'uk',
+    week: {
+      dow: 1, // Monday is the first day of the week.
+      doy: 7, // The week that contains Jan 1st is the first week of the year.
+    },
+    buttonText: {
+      prev: 'Попередній',
+      next: 'далі',
+      today: 'Сьогодні',
+      month: 'Місяць',
+      week: 'Тиждень',
+      day: 'День',
+      list: 'Порядок денний',
+    },
+    weekText: 'Тиж',
+    allDayText: 'Увесь день',
+    moreLinkText: function(n) {
+      return '+ще ' + n + '...'
+    },
+    noEventsText: 'Немає подій для відображення',
+  };
+
+  var l73 = {
+    code: 'uz',
+    buttonText: {
+      month: 'Oy',
+      week: 'Xafta',
+      day: 'Kun',
+      list: 'Kun tartibi',
+    },
+    allDayText: "Kun bo'yi",
+    moreLinkText: function(n) {
+      return '+ yana ' + n
+    },
+    noEventsText: "Ko'rsatish uchun voqealar yo'q",
+  };
+
+  var l74 = {
+    code: 'vi',
+    week: {
+      dow: 1, // Monday is the first day of the week.
+      doy: 4, // The week that contains Jan 4th is the first week of the year.
+    },
+    buttonText: {
+      prev: 'Trước',
+      next: 'Tiếp',
+      today: 'Hôm nay',
+      month: 'Tháng',
+      week: 'Tuần',
+      day: 'Ngày',
+      list: 'Lịch biểu',
+    },
+    weekText: 'Tu',
+    allDayText: 'Cả ngày',
+    moreLinkText: function(n) {
+      return '+ thêm ' + n
+    },
+    noEventsText: 'Không có sự kiện để hiển thị',
+  };
+
+  var l75 = {
+    code: 'zh-cn',
+    week: {
+      // GB/T 7408-1994《数据元和交换格式·信息交换·日期和时间表示法》与ISO 8601:1988等效
+      dow: 1, // Monday is the first day of the week.
+      doy: 4, // The week that contains Jan 4th is the first week of the year.
+    },
+    buttonText: {
+      prev: '上月',
+      next: '下月',
+      today: '今天',
+      month: '月',
+      week: '周',
+      day: '日',
+      list: '日程',
+    },
+    weekText: '周',
+    allDayText: '全天',
+    moreLinkText: function(n) {
+      return '另外 ' + n + ' 个'
+    },
+    noEventsText: '没有事件显示',
+  };
+
+  var l76 = {
+    code: 'zh-tw',
+    buttonText: {
+      prev: '上月',
+      next: '下月',
+      today: '今天',
+      month: '月',
+      week: '週',
+      day: '天',
+      list: '活動列表',
+    },
+    weekText: '周',
+    allDayText: '整天',
+    moreLinkText: '顯示更多',
+    noEventsText: '没有任何活動',
+  };
+
+  /* eslint max-len: off */
+
+  var localesAll = [
+    l0, l1, l2, l3, l4, l5, l6, l7, l8, l9, l10, l11, l12, l13, l14, l15, l16, l17, l18, l19, l20, l21, l22, l23, l24, l25, l26, l27, l28, l29, l30, l31, l32, l33, l34, l35, l36, l37, l38, l39, l40, l41, l42, l43, l44, l45, l46, l47, l48, l49, l50, l51, l52, l53, l54, l55, l56, l57, l58, l59, l60, l61, l62, l63, l64, l65, l66, l67, l68, l69, l70, l71, l72, l73, l74, l75, l76, 
+  ];
+
+  return localesAll;
+
+}());
diff --git a/apps/schoolCalendar/fullcalendar/main.css b/apps/schoolCalendar/fullcalendar/main.css
new file mode 100644
index 000000000..957887b56
--- /dev/null
+++ b/apps/schoolCalendar/fullcalendar/main.css
@@ -0,0 +1,1446 @@
+
+/* classes attached to  */
+/* TODO: make fc-event selector work when calender in shadow DOM */
+.fc-not-allowed,
+.fc-not-allowed .fc-event { /* override events' custom cursors */
+  cursor: not-allowed;
+}
+
+/* TODO: not attached to body. attached to specific els. move */
+.fc-unselectable {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  -webkit-touch-callout: none;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+.fc {
+  /* layout of immediate children */
+  display: flex;
+  flex-direction: column;
+
+  font-size: 1em
+}
+.fc,
+  .fc *,
+  .fc *:before,
+  .fc *:after {
+    box-sizing: border-box;
+  }
+.fc table {
+    border-collapse: collapse;
+    border-spacing: 0;
+    font-size: 1em; /* normalize cross-browser */
+  }
+.fc th {
+    text-align: center;
+  }
+.fc th,
+  .fc td {
+    vertical-align: top;
+    padding: 0;
+  }
+.fc a[data-navlink] {
+    cursor: pointer;
+  }
+.fc a[data-navlink]:hover {
+    text-decoration: underline;
+  }
+.fc-direction-ltr {
+  direction: ltr;
+  text-align: left;
+}
+.fc-direction-rtl {
+  direction: rtl;
+  text-align: right;
+}
+.fc-theme-standard td,
+  .fc-theme-standard th {
+    border: 1px solid #ddd;
+    border: 1px solid var(--fc-border-color, #ddd);
+  }
+/* for FF, which doesn't expand a 100% div within a table cell. use absolute positioning */
+/* inner-wrappers are responsible for being absolute */
+/* TODO: best place for this? */
+.fc-liquid-hack td,
+  .fc-liquid-hack th {
+    position: relative;
+  }
+
+@font-face {
+  font-family: 'fcicons';
+  src: url("data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg8SBfAAAAC8AAAAYGNtYXAXVtKNAAABHAAAAFRnYXNwAAAAEAAAAXAAAAAIZ2x5ZgYydxIAAAF4AAAFNGhlYWQUJ7cIAAAGrAAAADZoaGVhB20DzAAABuQAAAAkaG10eCIABhQAAAcIAAAALGxvY2ED4AU6AAAHNAAAABhtYXhwAA8AjAAAB0wAAAAgbmFtZXsr690AAAdsAAABhnBvc3QAAwAAAAAI9AAAACAAAwPAAZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADpBgPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAADAAAAAwAAABwAAQADAAAAHAADAAEAAAAcAAQAOAAAAAoACAACAAIAAQAg6Qb//f//AAAAAAAg6QD//f//AAH/4xcEAAMAAQAAAAAAAAAAAAAAAQAB//8ADwABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAWIAjQKeAskAEwAAJSc3NjQnJiIHAQYUFwEWMjc2NCcCnuLiDQ0MJAz/AA0NAQAMJAwNDcni4gwjDQwM/wANIwz/AA0NDCMNAAAAAQFiAI0CngLJABMAACUBNjQnASYiBwYUHwEHBhQXFjI3AZ4BAA0N/wAMJAwNDeLiDQ0MJAyNAQAMIw0BAAwMDSMM4uINIwwNDQAAAAIA4gC3Ax4CngATACcAACUnNzY0JyYiDwEGFB8BFjI3NjQnISc3NjQnJiIPAQYUHwEWMjc2NCcB87e3DQ0MIw3VDQ3VDSMMDQ0BK7e3DQ0MJAzVDQ3VDCQMDQ3zuLcMJAwNDdUNIwzWDAwNIwy4twwkDA0N1Q0jDNYMDA0jDAAAAgDiALcDHgKeABMAJwAAJTc2NC8BJiIHBhQfAQcGFBcWMjchNzY0LwEmIgcGFB8BBwYUFxYyNwJJ1Q0N1Q0jDA0Nt7cNDQwjDf7V1Q0N1QwkDA0Nt7cNDQwkDLfWDCMN1Q0NDCQMt7gMIw0MDNYMIw3VDQ0MJAy3uAwjDQwMAAADAFUAAAOrA1UAMwBoAHcAABMiBgcOAQcOAQcOARURFBYXHgEXHgEXHgEzITI2Nz4BNz4BNz4BNRE0JicuAScuAScuASMFITIWFx4BFx4BFx4BFREUBgcOAQcOAQcOASMhIiYnLgEnLgEnLgE1ETQ2Nz4BNz4BNz4BMxMhMjY1NCYjISIGFRQWM9UNGAwLFQkJDgUFBQUFBQ4JCRULDBgNAlYNGAwLFQkJDgUFBQUFBQ4JCRULDBgN/aoCVgQIBAQHAwMFAQIBAQIBBQMDBwQECAT9qgQIBAQHAwMFAQIBAQIBBQMDBwQECASAAVYRGRkR/qoRGRkRA1UFBAUOCQkVDAsZDf2rDRkLDBUJCA4FBQUFBQUOCQgVDAsZDQJVDRkLDBUJCQ4FBAVVAgECBQMCBwQECAX9qwQJAwQHAwMFAQICAgIBBQMDBwQDCQQCVQUIBAQHAgMFAgEC/oAZEhEZGRESGQAAAAADAFUAAAOrA1UAMwBoAIkAABMiBgcOAQcOAQcOARURFBYXHgEXHgEXHgEzITI2Nz4BNz4BNz4BNRE0JicuAScuAScuASMFITIWFx4BFx4BFx4BFREUBgcOAQcOAQcOASMhIiYnLgEnLgEnLgE1ETQ2Nz4BNz4BNz4BMxMzFRQWMzI2PQEzMjY1NCYrATU0JiMiBh0BIyIGFRQWM9UNGAwLFQkJDgUFBQUFBQ4JCRULDBgNAlYNGAwLFQkJDgUFBQUFBQ4JCRULDBgN/aoCVgQIBAQHAwMFAQIBAQIBBQMDBwQECAT9qgQIBAQHAwMFAQIBAQIBBQMDBwQECASAgBkSEhmAERkZEYAZEhIZgBEZGREDVQUEBQ4JCRUMCxkN/asNGQsMFQkIDgUFBQUFBQ4JCBUMCxkNAlUNGQsMFQkJDgUEBVUCAQIFAwIHBAQIBf2rBAkDBAcDAwUBAgICAgEFAwMHBAMJBAJVBQgEBAcCAwUCAQL+gIASGRkSgBkSERmAEhkZEoAZERIZAAABAOIAjQMeAskAIAAAExcHBhQXFjI/ARcWMjc2NC8BNzY0JyYiDwEnJiIHBhQX4uLiDQ0MJAzi4gwkDA0N4uINDQwkDOLiDCQMDQ0CjeLiDSMMDQ3h4Q0NDCMN4uIMIw0MDOLiDAwNIwwAAAABAAAAAQAAa5n0y18PPPUACwQAAAAAANivOVsAAAAA2K85WwAAAAADqwNVAAAACAACAAAAAAAAAAEAAAPA/8AAAAQAAAAAAAOrAAEAAAAAAAAAAAAAAAAAAAALBAAAAAAAAAAAAAAAAgAAAAQAAWIEAAFiBAAA4gQAAOIEAABVBAAAVQQAAOIAAAAAAAoAFAAeAEQAagCqAOoBngJkApoAAQAAAAsAigADAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAA4ArgABAAAAAAABAAcAAAABAAAAAAACAAcAYAABAAAAAAADAAcANgABAAAAAAAEAAcAdQABAAAAAAAFAAsAFQABAAAAAAAGAAcASwABAAAAAAAKABoAigADAAEECQABAA4ABwADAAEECQACAA4AZwADAAEECQADAA4APQADAAEECQAEAA4AfAADAAEECQAFABYAIAADAAEECQAGAA4AUgADAAEECQAKADQApGZjaWNvbnMAZgBjAGkAYwBvAG4Ac1ZlcnNpb24gMS4wAFYAZQByAHMAaQBvAG4AIAAxAC4AMGZjaWNvbnMAZgBjAGkAYwBvAG4Ac2ZjaWNvbnMAZgBjAGkAYwBvAG4Ac1JlZ3VsYXIAUgBlAGcAdQBsAGEAcmZjaWNvbnMAZgBjAGkAYwBvAG4Ac0ZvbnQgZ2VuZXJhdGVkIGJ5IEljb01vb24uAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=") format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+
+.fc-icon {
+  /* added for fc */
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  text-align: center;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: 'fcicons' !important;
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.fc-icon-chevron-left:before {
+  content: "\e900";
+}
+
+.fc-icon-chevron-right:before {
+  content: "\e901";
+}
+
+.fc-icon-chevrons-left:before {
+  content: "\e902";
+}
+
+.fc-icon-chevrons-right:before {
+  content: "\e903";
+}
+
+.fc-icon-minus-square:before {
+  content: "\e904";
+}
+
+.fc-icon-plus-square:before {
+  content: "\e905";
+}
+
+.fc-icon-x:before {
+  content: "\e906";
+}
+/*
+Lots taken from Flatly (MIT): https://bootswatch.com/4/flatly/bootstrap.css
+
+These styles only apply when the standard-theme is activated.
+When it's NOT activated, the fc-button classes won't even be in the DOM.
+*/
+.fc {
+
+  /* reset */
+
+}
+.fc .fc-button {
+    border-radius: 0;
+    overflow: visible;
+    text-transform: none;
+    margin: 0;
+    font-family: inherit;
+    font-size: inherit;
+    line-height: inherit;
+  }
+.fc .fc-button:focus {
+    outline: 1px dotted;
+    outline: 5px auto -webkit-focus-ring-color;
+  }
+.fc .fc-button {
+    -webkit-appearance: button;
+  }
+.fc .fc-button:not(:disabled) {
+    cursor: pointer;
+  }
+.fc .fc-button::-moz-focus-inner {
+    padding: 0;
+    border-style: none;
+  }
+.fc {
+
+  /* theme */
+
+}
+.fc .fc-button {
+    display: inline-block;
+    font-weight: 400;
+    text-align: center;
+    vertical-align: middle;
+    -webkit-user-select: none;
+       -moz-user-select: none;
+        -ms-user-select: none;
+            user-select: none;
+    background-color: transparent;
+    border: 1px solid transparent;
+    padding: 0.4em 0.65em;
+    font-size: 1em;
+    line-height: 1.5;
+    border-radius: 0.25em;
+  }
+.fc .fc-button:hover {
+    text-decoration: none;
+  }
+.fc .fc-button:focus {
+    outline: 0;
+    box-shadow: 0 0 0 0.2rem rgba(44, 62, 80, 0.25);
+  }
+.fc .fc-button:disabled {
+    opacity: 0.65;
+  }
+.fc {
+
+  /* "primary" coloring */
+
+}
+.fc .fc-button-primary {
+    color: #fff;
+    color: var(--fc-button-text-color, #fff);
+    background-color: #2C3E50;
+    background-color: var(--fc-button-bg-color, #2C3E50);
+    border-color: #2C3E50;
+    border-color: var(--fc-button-border-color, #2C3E50);
+  }
+.fc .fc-button-primary:hover {
+    color: #fff;
+    color: var(--fc-button-text-color, #fff);
+    background-color: #1e2b37;
+    background-color: var(--fc-button-hover-bg-color, #1e2b37);
+    border-color: #1a252f;
+    border-color: var(--fc-button-hover-border-color, #1a252f);
+  }
+.fc .fc-button-primary:disabled { /* not DRY */
+    color: #fff;
+    color: var(--fc-button-text-color, #fff);
+    background-color: #2C3E50;
+    background-color: var(--fc-button-bg-color, #2C3E50);
+    border-color: #2C3E50;
+    border-color: var(--fc-button-border-color, #2C3E50); /* overrides :hover */
+  }
+.fc .fc-button-primary:focus {
+    box-shadow: 0 0 0 0.2rem rgba(76, 91, 106, 0.5);
+  }
+.fc .fc-button-primary:not(:disabled):active,
+  .fc .fc-button-primary:not(:disabled).fc-button-active {
+    color: #fff;
+    color: var(--fc-button-text-color, #fff);
+    background-color: #1a252f;
+    background-color: var(--fc-button-active-bg-color, #1a252f);
+    border-color: #151e27;
+    border-color: var(--fc-button-active-border-color, #151e27);
+  }
+.fc .fc-button-primary:not(:disabled):active:focus,
+  .fc .fc-button-primary:not(:disabled).fc-button-active:focus {
+    box-shadow: 0 0 0 0.2rem rgba(76, 91, 106, 0.5);
+  }
+.fc {
+
+  /* icons within buttons */
+
+}
+.fc .fc-button .fc-icon {
+    vertical-align: middle;
+    font-size: 1.5em; /* bump up the size (but don't make it bigger than line-height of button, which is 1.5em also) */
+  }
+.fc .fc-button-group {
+    position: relative;
+    display: inline-flex;
+    vertical-align: middle;
+  }
+.fc .fc-button-group > .fc-button {
+    position: relative;
+    flex: 1 1 auto;
+  }
+.fc .fc-button-group > .fc-button:hover {
+    z-index: 1;
+  }
+.fc .fc-button-group > .fc-button:focus,
+  .fc .fc-button-group > .fc-button:active,
+  .fc .fc-button-group > .fc-button.fc-button-active {
+    z-index: 1;
+  }
+.fc-direction-ltr .fc-button-group > .fc-button:not(:first-child) {
+    margin-left: -1px;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+.fc-direction-ltr .fc-button-group > .fc-button:not(:last-child) {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+.fc-direction-rtl .fc-button-group > .fc-button:not(:first-child) {
+    margin-right: -1px;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+.fc-direction-rtl .fc-button-group > .fc-button:not(:last-child) {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+.fc .fc-toolbar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+.fc .fc-toolbar.fc-header-toolbar {
+    margin-bottom: 1.5em;
+  }
+.fc .fc-toolbar.fc-footer-toolbar {
+    margin-top: 1.5em;
+  }
+.fc .fc-toolbar-title {
+    font-size: 1.75em;
+    margin: 0;
+  }
+.fc-direction-ltr .fc-toolbar > * > :not(:first-child) {
+    margin-left: .75em; /* space between */
+  }
+.fc-direction-rtl .fc-toolbar > * > :not(:first-child) {
+    margin-right: .75em; /* space between */
+  }
+.fc-direction-rtl .fc-toolbar-ltr { /* when the toolbar-chunk positioning system is explicitly left-to-right */
+    flex-direction: row-reverse;
+  }
+.fc .fc-scroller {
+    -webkit-overflow-scrolling: touch;
+    position: relative; /* for abs-positioned elements within */
+  }
+.fc .fc-scroller-liquid {
+    height: 100%;
+  }
+.fc .fc-scroller-liquid-absolute {
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    bottom: 0;
+  }
+.fc .fc-scroller-harness {
+    position: relative;
+    overflow: hidden;
+    direction: ltr;
+      /* hack for chrome computing the scroller's right/left wrong for rtl. undone below... */
+      /* TODO: demonstrate in codepen */
+  }
+.fc .fc-scroller-harness-liquid {
+    height: 100%;
+  }
+.fc-direction-rtl .fc-scroller-harness > .fc-scroller { /* undo above hack */
+    direction: rtl;
+  }
+.fc-theme-standard .fc-scrollgrid {
+    border: 1px solid #ddd;
+    border: 1px solid var(--fc-border-color, #ddd); /* bootstrap does this. match */
+  }
+.fc .fc-scrollgrid,
+    .fc .fc-scrollgrid table { /* all tables (self included) */
+      width: 100%; /* because tables don't normally do this */
+      table-layout: fixed;
+    }
+.fc .fc-scrollgrid table { /* inner tables */
+      border-top-style: hidden;
+      border-left-style: hidden;
+      border-right-style: hidden;
+    }
+.fc .fc-scrollgrid {
+
+    border-collapse: separate;
+    border-right-width: 0;
+    border-bottom-width: 0;
+
+  }
+.fc .fc-scrollgrid-liquid {
+    height: 100%;
+  }
+.fc .fc-scrollgrid-section { /* a  */
+    height: 1px /* better than 0, for firefox */
+
+  }
+.fc .fc-scrollgrid-section > td {
+      height: 1px; /* needs a height so inner div within grow. better than 0, for firefox */
+    }
+.fc .fc-scrollgrid-section table {
+      height: 1px;
+        /* for most browsers, if a height isn't set on the table, can't do liquid-height within cells */
+        /* serves as a min-height. harmless */
+    }
+.fc .fc-scrollgrid-section-liquid > td {
+      height: 100%; /* better than `auto`, for firefox */
+    }
+.fc .fc-scrollgrid-section > * {
+    border-top-width: 0;
+    border-left-width: 0;
+  }
+.fc .fc-scrollgrid-section-header > *,
+  .fc .fc-scrollgrid-section-footer > * {
+    border-bottom-width: 0;
+  }
+.fc .fc-scrollgrid-section-body table,
+  .fc .fc-scrollgrid-section-footer table {
+    border-bottom-style: hidden; /* head keeps its bottom border tho */
+  }
+.fc {
+
+  /* stickiness */
+
+}
+.fc .fc-scrollgrid-section-sticky > * {
+    background: #fff;
+    background: var(--fc-page-bg-color, #fff);
+    position: sticky;
+    z-index: 3; /* TODO: var */
+    /* TODO: box-shadow when sticking */
+  }
+.fc .fc-scrollgrid-section-header.fc-scrollgrid-section-sticky > * {
+    top: 0; /* because border-sharing causes a gap at the top */
+      /* TODO: give safari -1. has bug */
+  }
+.fc .fc-scrollgrid-section-footer.fc-scrollgrid-section-sticky > * {
+    bottom: 0; /* known bug: bottom-stickiness doesn't work in safari */
+  }
+.fc .fc-scrollgrid-sticky-shim { /* for horizontal scrollbar */
+    height: 1px; /* needs height to create scrollbars */
+    margin-bottom: -1px;
+  }
+.fc-sticky { /* no .fc wrap because used as child of body */
+  position: sticky;
+}
+.fc .fc-view-harness {
+    flex-grow: 1; /* because this harness is WITHIN the .fc's flexbox */
+    position: relative;
+  }
+.fc {
+
+  /* when the harness controls the height, make the view liquid */
+
+}
+.fc .fc-view-harness-active > .fc-view {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+  }
+.fc .fc-col-header-cell-cushion {
+    display: inline-block; /* x-browser for when sticky (when multi-tier header) */
+    padding: 2px 4px;
+  }
+.fc .fc-bg-event,
+  .fc .fc-non-business,
+  .fc .fc-highlight {
+    /* will always have a harness with position:relative/absolute, so absolutely expand */
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+.fc .fc-non-business {
+    background: rgba(215, 215, 215, 0.3);
+    background: var(--fc-non-business-color, rgba(215, 215, 215, 0.3));
+  }
+.fc .fc-bg-event {
+    background: rgb(143, 223, 130);
+    background: var(--fc-bg-event-color, rgb(143, 223, 130));
+    opacity: 0.3;
+    opacity: var(--fc-bg-event-opacity, 0.3)
+  }
+.fc .fc-bg-event .fc-event-title {
+      margin: .5em;
+      font-size: .85em;
+      font-size: var(--fc-small-font-size, .85em);
+      font-style: italic;
+    }
+.fc .fc-highlight {
+    background: rgba(188, 232, 241, 0.3);
+    background: var(--fc-highlight-color, rgba(188, 232, 241, 0.3));
+  }
+.fc .fc-cell-shaded,
+  .fc .fc-day-disabled {
+    background: rgba(208, 208, 208, 0.3);
+    background: var(--fc-neutral-bg-color, rgba(208, 208, 208, 0.3));
+  }
+/* link resets */
+/* ---------------------------------------------------------------------------------------------------- */
+a.fc-event,
+a.fc-event:hover {
+  text-decoration: none;
+}
+/* cursor */
+.fc-event[href],
+.fc-event.fc-event-draggable {
+  cursor: pointer;
+}
+/* event text content */
+/* ---------------------------------------------------------------------------------------------------- */
+.fc-event .fc-event-main {
+    position: relative;
+    z-index: 2;
+  }
+/* dragging */
+/* ---------------------------------------------------------------------------------------------------- */
+.fc-event-dragging:not(.fc-event-selected) { /* MOUSE */
+    opacity: 0.75;
+  }
+.fc-event-dragging.fc-event-selected { /* TOUCH */
+    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.3);
+  }
+/* resizing */
+/* ---------------------------------------------------------------------------------------------------- */
+/* (subclasses should hone positioning for touch and non-touch) */
+.fc-event .fc-event-resizer {
+    display: none;
+    position: absolute;
+    z-index: 4;
+  }
+.fc-event:hover, /* MOUSE */
+.fc-event-selected { /* TOUCH */
+
+}
+.fc-event:hover .fc-event-resizer, .fc-event-selected .fc-event-resizer {
+    display: block;
+  }
+.fc-event-selected .fc-event-resizer {
+    border-radius: 4px;
+    border-radius: calc(var(--fc-event-resizer-dot-total-width, 8px) / 2);
+    border-width: 1px;
+    border-width: var(--fc-event-resizer-dot-border-width, 1px);
+    width: 8px;
+    width: var(--fc-event-resizer-dot-total-width, 8px);
+    height: 8px;
+    height: var(--fc-event-resizer-dot-total-width, 8px);
+    border-style: solid;
+    border-color: inherit;
+    background: #fff;
+    background: var(--fc-page-bg-color, #fff)
+
+    /* expand hit area */
+
+  }
+.fc-event-selected .fc-event-resizer:before {
+      content: '';
+      position: absolute;
+      top: -20px;
+      left: -20px;
+      right: -20px;
+      bottom: -20px;
+    }
+/* selecting (always TOUCH) */
+/* ---------------------------------------------------------------------------------------------------- */
+.fc-event-selected {
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2)
+
+  /* expand hit area (subclasses should expand) */
+
+}
+.fc-event-selected:before {
+    content: "";
+    position: absolute;
+    z-index: 3;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+.fc-event-selected {
+
+  /* dimmer effect */
+
+}
+.fc-event-selected:after {
+    content: "";
+    background: rgba(0, 0, 0, 0.25);
+    background: var(--fc-event-selected-overlay-color, rgba(0, 0, 0, 0.25));
+    position: absolute;
+    z-index: 1;
+
+    /* assume there's a border on all sides. overcome it. */
+    /* sometimes there's NOT a border, in which case the dimmer will go over */
+    /* an adjacent border, which looks fine. */
+    top: -1px;
+    left: -1px;
+    right: -1px;
+    bottom: -1px;
+  }
+/*
+A HORIZONTAL event
+*/
+.fc-h-event { /* allowed to be top-level */
+  display: block;
+  border: 1px solid #3788d8;
+  border: 1px solid var(--fc-event-border-color, #3788d8);
+  background-color: #3788d8;
+  background-color: var(--fc-event-bg-color, #3788d8)
+
+}
+.fc-h-event .fc-event-main {
+    color: #fff;
+    color: var(--fc-event-text-color, #fff);
+  }
+.fc-h-event .fc-event-main-frame {
+    display: flex; /* for make fc-event-title-container expand */
+  }
+.fc-h-event .fc-event-time {
+    max-width: 100%; /* clip overflow on this element */
+    overflow: hidden;
+  }
+.fc-h-event .fc-event-title-container { /* serves as a container for the sticky cushion */
+    flex-grow: 1;
+    flex-shrink: 1;
+    min-width: 0; /* important for allowing to shrink all the way */
+  }
+.fc-h-event .fc-event-title {
+    display: inline-block; /* need this to be sticky cross-browser */
+    vertical-align: top; /* for not messing up line-height */
+    left: 0;  /* for sticky */
+    right: 0; /* for sticky */
+    max-width: 100%; /* clip overflow on this element */
+    overflow: hidden;
+  }
+.fc-h-event.fc-event-selected:before {
+    /* expand hit area */
+    top: -10px;
+    bottom: -10px;
+  }
+/* adjust border and border-radius (if there is any) for non-start/end */
+.fc-direction-ltr .fc-daygrid-block-event:not(.fc-event-start),
+.fc-direction-rtl .fc-daygrid-block-event:not(.fc-event-end) {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  border-left-width: 0;
+}
+.fc-direction-ltr .fc-daygrid-block-event:not(.fc-event-end),
+.fc-direction-rtl .fc-daygrid-block-event:not(.fc-event-start) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  border-right-width: 0;
+}
+/* resizers */
+.fc-h-event:not(.fc-event-selected) .fc-event-resizer {
+  top: 0;
+  bottom: 0;
+  width: 8px;
+  width: var(--fc-event-resizer-thickness, 8px);
+}
+.fc-direction-ltr .fc-h-event:not(.fc-event-selected) .fc-event-resizer-start,
+.fc-direction-rtl .fc-h-event:not(.fc-event-selected) .fc-event-resizer-end {
+  cursor: w-resize;
+  left: -4px;
+  left: calc(var(--fc-event-resizer-thickness, 8px) / -2);
+}
+.fc-direction-ltr .fc-h-event:not(.fc-event-selected) .fc-event-resizer-end,
+.fc-direction-rtl .fc-h-event:not(.fc-event-selected) .fc-event-resizer-start {
+  cursor: e-resize;
+  right: -4px;
+  right: calc(var(--fc-event-resizer-thickness, 8px) / -2);
+}
+/* resizers for TOUCH */
+.fc-h-event.fc-event-selected .fc-event-resizer {
+  top: 50%;
+  margin-top: -4px;
+  margin-top: calc(var(--fc-event-resizer-dot-total-width, 8px) / -2);
+}
+.fc-direction-ltr .fc-h-event.fc-event-selected .fc-event-resizer-start,
+.fc-direction-rtl .fc-h-event.fc-event-selected .fc-event-resizer-end {
+  left: -4px;
+  left: calc(var(--fc-event-resizer-dot-total-width, 8px) / -2);
+}
+.fc-direction-ltr .fc-h-event.fc-event-selected .fc-event-resizer-end,
+.fc-direction-rtl .fc-h-event.fc-event-selected .fc-event-resizer-start {
+  right: -4px;
+  right: calc(var(--fc-event-resizer-dot-total-width, 8px) / -2);
+}
+.fc .fc-popover {
+    position: absolute;
+    z-index: 9999;
+    box-shadow: 0 2px 6px rgba(0,0,0,.15);
+  }
+.fc .fc-popover-header {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    padding: 3px 4px;
+  }
+.fc .fc-popover-title {
+    margin: 0 2px;
+  }
+.fc .fc-popover-close {
+    cursor: pointer;
+    opacity: 0.65;
+    font-size: 1.1em;
+  }
+.fc-theme-standard .fc-popover {
+    border: 1px solid #ddd;
+    border: 1px solid var(--fc-border-color, #ddd);
+    background: #fff;
+    background: var(--fc-page-bg-color, #fff);
+  }
+.fc-theme-standard .fc-popover-header {
+    background: rgba(208, 208, 208, 0.3);
+    background: var(--fc-neutral-bg-color, rgba(208, 208, 208, 0.3));
+  }
+
+
+:root {
+  --fc-daygrid-event-dot-width: 8px;
+}
+/* help things clear margins of inner content */
+.fc-daygrid-day-frame,
+.fc-daygrid-day-events,
+.fc-daygrid-event-harness { /* for event top/bottom margins */
+}
+.fc-daygrid-day-frame:before, .fc-daygrid-day-events:before, .fc-daygrid-event-harness:before {
+  content: "";
+  clear: both;
+  display: table; }
+.fc-daygrid-day-frame:after, .fc-daygrid-day-events:after, .fc-daygrid-event-harness:after {
+  content: "";
+  clear: both;
+  display: table; }
+.fc .fc-daygrid-body { /* a 
 that wraps the table */
+    position: relative;
+    z-index: 1; /* container inner z-index's because s can't do it */
+  }
+.fc .fc-daygrid-day.fc-day-today {
+      background-color: rgba(255, 220, 40, 0.15);
+      background-color: var(--fc-today-bg-color, rgba(255, 220, 40, 0.15));
+    }
+.fc .fc-daygrid-day-frame {
+    position: relative;
+    min-height: 100%; /* seems to work better than `height` because sets height after rows/cells naturally do it */
+  }
+.fc {
+
+  /* cell top */
+
+}
+.fc .fc-daygrid-day-top {
+    display: flex;
+    flex-direction: row-reverse;
+  }
+.fc .fc-day-other .fc-daygrid-day-top {
+    opacity: 0.3;
+  }
+.fc {
+
+  /* day number (within cell top) */
+
+}
+.fc .fc-daygrid-day-number {
+    position: relative;
+    z-index: 4;
+    padding: 4px;
+  }
+.fc {
+
+  /* event container */
+
+}
+.fc .fc-daygrid-day-events {
+    margin-top: 1px; /* needs to be margin, not padding, so that available cell height can be computed */
+  }
+.fc {
+
+  /* positioning for balanced vs natural */
+
+}
+.fc .fc-daygrid-body-balanced .fc-daygrid-day-events {
+      position: absolute;
+      left: 0;
+      right: 0;
+    }
+.fc .fc-daygrid-body-unbalanced .fc-daygrid-day-events {
+      position: relative; /* for containing abs positioned event harnesses */
+      min-height: 2em; /* in addition to being a min-height during natural height, equalizes the heights a little bit */
+    }
+.fc .fc-daygrid-body-natural { /* can coexist with -unbalanced */
+  }
+.fc .fc-daygrid-body-natural .fc-daygrid-day-events {
+      margin-bottom: 1em;
+    }
+.fc {
+
+  /* event harness */
+
+}
+.fc .fc-daygrid-event-harness {
+    position: relative;
+  }
+.fc .fc-daygrid-event-harness-abs {
+    position: absolute;
+    top: 0; /* fallback coords for when cannot yet be computed */
+    left: 0; /* */
+    right: 0; /* */
+  }
+.fc .fc-daygrid-bg-harness {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+  }
+.fc {
+
+  /* bg content */
+
+}
+.fc .fc-daygrid-day-bg .fc-non-business { z-index: 1 }
+.fc .fc-daygrid-day-bg .fc-bg-event { z-index: 2 }
+.fc .fc-daygrid-day-bg .fc-highlight { z-index: 3 }
+.fc {
+
+  /* events */
+
+}
+.fc .fc-daygrid-event {
+    z-index: 6;
+    margin-top: 1px;
+  }
+.fc .fc-daygrid-event.fc-event-mirror {
+    z-index: 7;
+  }
+.fc {
+
+  /* cell bottom (within day-events) */
+
+}
+.fc .fc-daygrid-day-bottom {
+    font-size: .85em;
+    padding: 2px 3px 0
+  }
+.fc .fc-daygrid-day-bottom:before {
+  content: "";
+  clear: both;
+  display: table; }
+.fc .fc-daygrid-more-link {
+    position: relative;
+    z-index: 4;
+    cursor: pointer;
+  }
+.fc {
+
+  /* week number (within frame) */
+
+}
+.fc .fc-daygrid-week-number {
+    position: absolute;
+    z-index: 5;
+    top: 0;
+    padding: 2px;
+    min-width: 1.5em;
+    text-align: center;
+    background-color: rgba(208, 208, 208, 0.3);
+    background-color: var(--fc-neutral-bg-color, rgba(208, 208, 208, 0.3));
+    color: #808080;
+    color: var(--fc-neutral-text-color, #808080);
+  }
+.fc {
+
+  /* popover */
+
+}
+.fc .fc-more-popover .fc-popover-body {
+    min-width: 220px;
+    padding: 10px;
+  }
+.fc-direction-ltr .fc-daygrid-event.fc-event-start,
+.fc-direction-rtl .fc-daygrid-event.fc-event-end {
+  margin-left: 2px;
+}
+.fc-direction-ltr .fc-daygrid-event.fc-event-end,
+.fc-direction-rtl .fc-daygrid-event.fc-event-start {
+  margin-right: 2px;
+}
+.fc-direction-ltr .fc-daygrid-week-number {
+    left: 0;
+    border-radius: 0 0 3px 0;
+  }
+.fc-direction-rtl .fc-daygrid-week-number {
+    right: 0;
+    border-radius: 0 0 0 3px;
+  }
+.fc-liquid-hack .fc-daygrid-day-frame {
+    position: static; /* will cause inner absolute stuff to expand to  */
+  }
+.fc-daygrid-event { /* make root-level, because will be dragged-and-dropped outside of a component root */
+  position: relative; /* for z-indexes assigned later */
+  white-space: nowrap;
+  border-radius: 3px; /* dot event needs this to when selected */
+  font-size: .85em;
+  font-size: var(--fc-small-font-size, .85em);
+}
+/* --- the rectangle ("block") style of event --- */
+.fc-daygrid-block-event .fc-event-time {
+    font-weight: bold;
+  }
+.fc-daygrid-block-event .fc-event-time,
+  .fc-daygrid-block-event .fc-event-title {
+    padding: 1px;
+  }
+/* --- the dot style of event --- */
+.fc-daygrid-dot-event {
+  display: flex;
+  align-items: center;
+  padding: 2px 0
+
+}
+.fc-daygrid-dot-event .fc-event-title {
+    flex-grow: 1;
+    flex-shrink: 1;
+    min-width: 0; /* important for allowing to shrink all the way */
+    overflow: hidden;
+    font-weight: bold;
+  }
+.fc-daygrid-dot-event:hover,
+  .fc-daygrid-dot-event.fc-event-mirror {
+    background: rgba(0, 0, 0, 0.1);
+  }
+.fc-daygrid-dot-event.fc-event-selected:before {
+    /* expand hit area */
+    top: -10px;
+    bottom: -10px;
+  }
+.fc-daygrid-event-dot { /* the actual dot */
+  margin: 0 4px;
+  box-sizing: content-box;
+  width: 0;
+  height: 0;
+  border: 4px solid #3788d8;
+  border: calc(var(--fc-daygrid-event-dot-width, 8px) / 2) solid var(--fc-event-border-color, #3788d8);
+  border-radius: 4px;
+  border-radius: calc(var(--fc-daygrid-event-dot-width, 8px) / 2);
+}
+/* --- spacing between time and title --- */
+.fc-direction-ltr .fc-daygrid-event .fc-event-time {
+    margin-right: 3px;
+  }
+.fc-direction-rtl .fc-daygrid-event .fc-event-time {
+    margin-left: 3px;
+  }
+
+
+/*
+A VERTICAL event
+*/
+
+.fc-v-event { /* allowed to be top-level */
+  display: block;
+  border: 1px solid #3788d8;
+  border: 1px solid var(--fc-event-border-color, #3788d8);
+  background-color: #3788d8;
+  background-color: var(--fc-event-bg-color, #3788d8)
+
+}
+
+.fc-v-event .fc-event-main {
+    color: #fff;
+    color: var(--fc-event-text-color, #fff);
+    height: 100%;
+  }
+
+.fc-v-event .fc-event-main-frame {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+
+.fc-v-event .fc-event-time {
+    flex-grow: 0;
+    flex-shrink: 0;
+    max-height: 100%;
+    overflow: hidden;
+  }
+
+.fc-v-event .fc-event-title-container { /* a container for the sticky cushion */
+    flex-grow: 1;
+    flex-shrink: 1;
+    min-height: 0; /* important for allowing to shrink all the way */
+  }
+
+.fc-v-event .fc-event-title { /* will have fc-sticky on it */
+    top: 0;
+    bottom: 0;
+    max-height: 100%; /* clip overflow */
+    overflow: hidden;
+  }
+
+.fc-v-event:not(.fc-event-start) {
+    border-top-width: 0;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+
+.fc-v-event:not(.fc-event-end) {
+    border-bottom-width: 0;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+.fc-v-event.fc-event-selected:before {
+    /* expand hit area */
+    left: -10px;
+    right: -10px;
+  }
+
+.fc-v-event {
+
+  /* resizer (mouse AND touch) */
+
+}
+
+.fc-v-event .fc-event-resizer-start {
+    cursor: n-resize;
+  }
+
+.fc-v-event .fc-event-resizer-end {
+    cursor: s-resize;
+  }
+
+.fc-v-event {
+
+  /* resizer for MOUSE */
+
+}
+
+.fc-v-event:not(.fc-event-selected) .fc-event-resizer {
+      height: 8px;
+      height: var(--fc-event-resizer-thickness, 8px);
+      left: 0;
+      right: 0;
+    }
+
+.fc-v-event:not(.fc-event-selected) .fc-event-resizer-start {
+      top: -4px;
+      top: calc(var(--fc-event-resizer-thickness, 8px) / -2);
+    }
+
+.fc-v-event:not(.fc-event-selected) .fc-event-resizer-end {
+      bottom: -4px;
+      bottom: calc(var(--fc-event-resizer-thickness, 8px) / -2);
+    }
+
+.fc-v-event {
+
+  /* resizer for TOUCH (when event is "selected") */
+
+}
+
+.fc-v-event.fc-event-selected .fc-event-resizer {
+      left: 50%;
+      margin-left: -4px;
+      margin-left: calc(var(--fc-event-resizer-dot-total-width, 8px) / -2);
+    }
+
+.fc-v-event.fc-event-selected .fc-event-resizer-start {
+      top: -4px;
+      top: calc(var(--fc-event-resizer-dot-total-width, 8px) / -2);
+    }
+
+.fc-v-event.fc-event-selected .fc-event-resizer-end {
+      bottom: -4px;
+      bottom: calc(var(--fc-event-resizer-dot-total-width, 8px) / -2);
+    }
+.fc .fc-timegrid .fc-daygrid-body { /* the all-day daygrid within the timegrid view */
+    z-index: 2; /* put above the timegrid-body so that more-popover is above everything. TODO: better solution */
+  }
+.fc .fc-timegrid-divider {
+    padding: 0 0 2px; /* browsers get confused when you set height. use padding instead */
+  }
+.fc .fc-timegrid-body {
+    position: relative;
+    z-index: 1; /* scope the z-indexes of slots and cols */
+    min-height: 100%; /* fill height always, even when slat table doesn't grow */
+  }
+.fc .fc-timegrid-axis-chunk { /* for advanced ScrollGrid */
+    position: relative /* offset parent for now-indicator-container */
+
+  }
+.fc .fc-timegrid-axis-chunk > table {
+      position: relative;
+      z-index: 1; /* above the now-indicator-container */
+    }
+.fc .fc-timegrid-slots {
+    position: relative;
+    z-index: 1;
+  }
+.fc .fc-timegrid-slot { /* a  */
+    height: 1.5em;
+    border-bottom: 0 /* each cell owns its top border */
+  }
+.fc .fc-timegrid-slot:empty:before {
+      content: '\00a0'; /* make sure there's at least an empty space to create height for height syncing */
+    }
+.fc .fc-timegrid-slot-minor {
+    border-top-style: dotted;
+  }
+.fc .fc-timegrid-slot-label-cushion {
+    display: inline-block;
+    white-space: nowrap;
+  }
+.fc .fc-timegrid-slot-label {
+    vertical-align: middle; /* vertical align the slots */
+  }
+.fc {
+
+
+  /* slots AND axis cells (top-left corner of view including the "all-day" text) */
+
+}
+.fc .fc-timegrid-axis-cushion,
+  .fc .fc-timegrid-slot-label-cushion {
+    padding: 0 4px;
+  }
+.fc {
+
+
+  /* axis cells (top-left corner of view including the "all-day" text) */
+  /* vertical align is more complicated, uses flexbox */
+
+}
+.fc .fc-timegrid-axis-frame-liquid {
+    height: 100%; /* will need liquid-hack in FF */
+  }
+.fc .fc-timegrid-axis-frame {
+    overflow: hidden;
+    display: flex;
+    align-items: center; /* vertical align */
+    justify-content: flex-end; /* horizontal align. matches text-align below */
+  }
+.fc .fc-timegrid-axis-cushion {
+    max-width: 60px; /* limits the width of the "all-day" text */
+    flex-shrink: 0; /* allows text to expand how it normally would, regardless of constrained width */
+  }
+.fc-direction-ltr .fc-timegrid-slot-label-frame {
+    text-align: right;
+  }
+.fc-direction-rtl .fc-timegrid-slot-label-frame {
+    text-align: left;
+  }
+.fc-liquid-hack .fc-timegrid-axis-frame-liquid {
+  height: auto;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  }
+.fc .fc-timegrid-col.fc-day-today {
+      background-color: rgba(255, 220, 40, 0.15);
+      background-color: var(--fc-today-bg-color, rgba(255, 220, 40, 0.15));
+    }
+.fc .fc-timegrid-col-frame {
+    min-height: 100%; /* liquid-hack is below */
+    position: relative;
+  }
+.fc-media-screen.fc-liquid-hack .fc-timegrid-col-frame {
+  height: auto;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+    }
+.fc-media-screen .fc-timegrid-cols {
+    position: absolute; /* no z-index. children will decide and go above slots */
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0
+  }
+.fc-media-screen .fc-timegrid-cols > table {
+      height: 100%;
+    }
+.fc-media-screen .fc-timegrid-col-bg,
+  .fc-media-screen .fc-timegrid-col-events,
+  .fc-media-screen .fc-timegrid-now-indicator-container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+  }
+.fc {
+
+  /* bg */
+
+}
+.fc .fc-timegrid-col-bg {
+    z-index: 2; /* TODO: kill */
+  }
+.fc .fc-timegrid-col-bg .fc-non-business { z-index: 1 }
+.fc .fc-timegrid-col-bg .fc-bg-event { z-index: 2 }
+.fc .fc-timegrid-col-bg .fc-highlight { z-index: 3 }
+.fc .fc-timegrid-bg-harness {
+    position: absolute; /* top/bottom will be set by JS */
+    left: 0;
+    right: 0;
+  }
+.fc {
+
+  /* fg events */
+  /* (the mirror segs are put into a separate container with same classname, */
+  /* and they must be after the normal seg container to appear at a higher z-index) */
+
+}
+.fc .fc-timegrid-col-events {
+    z-index: 3;
+    /* child event segs have z-indexes that are scoped within this div */
+  }
+.fc {
+
+  /* now indicator */
+
+}
+.fc .fc-timegrid-now-indicator-container {
+    bottom: 0;
+    overflow: hidden; /* don't let overflow of lines/arrows cause unnecessary scrolling */
+    /* z-index is set on the individual elements */
+  }
+.fc-direction-ltr .fc-timegrid-col-events {
+    margin: 0 2.5% 0 2px;
+  }
+.fc-direction-rtl .fc-timegrid-col-events {
+    margin: 0 2px 0 2.5%;
+  }
+.fc-timegrid-event-harness {
+  position: absolute /* top/left/right/bottom will all be set by JS */
+}
+.fc-timegrid-event-harness > .fc-timegrid-event {
+    position: absolute; /* absolute WITHIN the harness */
+    top: 0; /* for when not yet positioned */
+    bottom: 0; /* " */
+    left: 0;
+    right: 0;
+  }
+.fc-timegrid-event-harness-inset .fc-timegrid-event,
+.fc-timegrid-event.fc-event-mirror,
+.fc-timegrid-more-link {
+  box-shadow: 0px 0px 0px 1px #fff;
+  box-shadow: 0px 0px 0px 1px var(--fc-page-bg-color, #fff);
+}
+.fc-timegrid-event,
+.fc-timegrid-more-link { /* events need to be root */
+  font-size: .85em;
+  font-size: var(--fc-small-font-size, .85em);
+  border-radius: 3px;
+}
+.fc-timegrid-event { /* events need to be root */
+  margin-bottom: 1px /* give some space from bottom */
+}
+.fc-timegrid-event .fc-event-main {
+    padding: 1px 1px 0;
+  }
+.fc-timegrid-event .fc-event-time {
+    white-space: nowrap;
+    font-size: .85em;
+    font-size: var(--fc-small-font-size, .85em);
+    margin-bottom: 1px;
+  }
+.fc-timegrid-event-short .fc-event-main-frame {
+    flex-direction: row;
+    overflow: hidden;
+  }
+.fc-timegrid-event-short .fc-event-time:after {
+    content: '\00a0-\00a0'; /* dash surrounded by non-breaking spaces */
+  }
+.fc-timegrid-event-short .fc-event-title {
+    font-size: .85em;
+    font-size: var(--fc-small-font-size, .85em)
+  }
+.fc-timegrid-more-link { /* does NOT inherit from fc-timegrid-event */
+  position: absolute;
+  z-index: 9999; /* hack */
+  color: inherit;
+  color: var(--fc-more-link-text-color, inherit);
+  background: #d0d0d0;
+  background: var(--fc-more-link-bg-color, #d0d0d0);
+  cursor: pointer;
+  margin-bottom: 1px; /* match space below fc-timegrid-event */
+}
+.fc-timegrid-more-link-inner { /* has fc-sticky */
+  padding: 3px 2px;
+  top: 0;
+}
+.fc-direction-ltr .fc-timegrid-more-link {
+    right: 0;
+  }
+.fc-direction-rtl .fc-timegrid-more-link {
+    left: 0;
+  }
+.fc {
+
+  /* line */
+
+}
+.fc .fc-timegrid-now-indicator-line {
+    position: absolute;
+    z-index: 4;
+    left: 0;
+    right: 0;
+    border-style: solid;
+    border-color: red;
+    border-color: var(--fc-now-indicator-color, red);
+    border-width: 1px 0 0;
+  }
+.fc {
+
+  /* arrow */
+
+}
+.fc .fc-timegrid-now-indicator-arrow {
+    position: absolute;
+    z-index: 4;
+    margin-top: -5px; /* vertically center on top coordinate */
+    border-style: solid;
+    border-color: red;
+    border-color: var(--fc-now-indicator-color, red);
+  }
+.fc-direction-ltr .fc-timegrid-now-indicator-arrow {
+    left: 0;
+
+    /* triangle pointing right. TODO: mixin */
+    border-width: 5px 0 5px 6px;
+    border-top-color: transparent;
+    border-bottom-color: transparent;
+  }
+.fc-direction-rtl .fc-timegrid-now-indicator-arrow {
+    right: 0;
+
+    /* triangle pointing left. TODO: mixin */
+    border-width: 5px 6px 5px 0;
+    border-top-color: transparent;
+    border-bottom-color: transparent;
+  }
+
+
+:root {
+  --fc-list-event-dot-width: 10px;
+  --fc-list-event-hover-bg-color: #f5f5f5;
+}
+.fc-theme-standard .fc-list {
+    border: 1px solid #ddd;
+    border: 1px solid var(--fc-border-color, #ddd);
+  }
+.fc {
+
+  /* message when no events */
+
+}
+.fc .fc-list-empty {
+    background-color: rgba(208, 208, 208, 0.3);
+    background-color: var(--fc-neutral-bg-color, rgba(208, 208, 208, 0.3));
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center; /* vertically aligns fc-list-empty-inner */
+  }
+.fc .fc-list-empty-cushion {
+    margin: 5em 0;
+  }
+.fc {
+
+  /* table within the scroller */
+  /* ---------------------------------------------------------------------------------------------------- */
+
+}
+.fc .fc-list-table {
+    width: 100%;
+    border-style: hidden; /* kill outer border on theme */
+  }
+.fc .fc-list-table tr > * {
+    border-left: 0;
+    border-right: 0;
+  }
+.fc .fc-list-sticky .fc-list-day > * { /* the cells */
+      position: sticky;
+      top: 0;
+      background: #fff;
+      background: var(--fc-page-bg-color, #fff); /* for when headers are styled to be transparent and sticky */
+    }
+.fc .fc-list-table th {
+    padding: 0; /* uses an inner-wrapper instead... */
+  }
+.fc .fc-list-table td,
+  .fc .fc-list-day-cushion {
+    padding: 8px 14px;
+  }
+.fc {
+
+
+  /* date heading rows */
+  /* ---------------------------------------------------------------------------------------------------- */
+
+}
+.fc .fc-list-day-cushion:after {
+  content: "";
+  clear: both;
+  display: table; /* clear floating */
+    }
+.fc-theme-standard .fc-list-day-cushion {
+    background-color: rgba(208, 208, 208, 0.3);
+    background-color: var(--fc-neutral-bg-color, rgba(208, 208, 208, 0.3));
+  }
+.fc-direction-ltr .fc-list-day-text,
+.fc-direction-rtl .fc-list-day-side-text {
+  float: left;
+}
+.fc-direction-ltr .fc-list-day-side-text,
+.fc-direction-rtl .fc-list-day-text {
+  float: right;
+}
+/* make the dot closer to the event title */
+.fc-direction-ltr .fc-list-table .fc-list-event-graphic { padding-right: 0 }
+.fc-direction-rtl .fc-list-table .fc-list-event-graphic { padding-left: 0 }
+.fc .fc-list-event.fc-event-forced-url {
+    cursor: pointer; /* whole row will seem clickable */
+  }
+.fc .fc-list-event:hover td {
+    background-color: #f5f5f5;
+    background-color: var(--fc-list-event-hover-bg-color, #f5f5f5);
+  }
+.fc {
+
+  /* shrink certain cols */
+
+}
+.fc .fc-list-event-graphic,
+  .fc .fc-list-event-time {
+    white-space: nowrap;
+    width: 1px;
+  }
+.fc .fc-list-event-dot {
+    display: inline-block;
+    box-sizing: content-box;
+    width: 0;
+    height: 0;
+    border: 5px solid #3788d8;
+    border: calc(var(--fc-list-event-dot-width, 10px) / 2) solid var(--fc-event-border-color, #3788d8);
+    border-radius: 5px;
+    border-radius: calc(var(--fc-list-event-dot-width, 10px) / 2);
+  }
+.fc {
+
+  /* reset  styling */
+
+}
+.fc .fc-list-event-title a {
+    color: inherit;
+    text-decoration: none;
+  }
+.fc {
+
+  /* underline link when hovering over any part of row */
+
+}
+.fc .fc-list-event.fc-event-forced-url:hover a {
+    text-decoration: underline;
+  }
+
+
+
+  .fc-theme-bootstrap a:not([href]) {
+    color: inherit; /* natural color for navlinks */
+  }
+
diff --git a/apps/schoolCalendar/fullcalendar/main.js b/apps/schoolCalendar/fullcalendar/main.js
new file mode 100644
index 000000000..54bf45d3f
--- /dev/null
+++ b/apps/schoolCalendar/fullcalendar/main.js
@@ -0,0 +1,14738 @@
+/*!
+FullCalendar v5.9.0
+Docs & License: https://fullcalendar.io/
+(c) 2021 Adam Shaw
+*/
+var FullCalendar = (function (exports) {
+    'use strict';
+
+    /*! *****************************************************************************
+    Copyright (c) Microsoft Corporation.
+
+    Permission to use, copy, modify, and/or distribute this software for any
+    purpose with or without fee is hereby granted.
+
+    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+    PERFORMANCE OF THIS SOFTWARE.
+    ***************************************************************************** */
+    /* global Reflect, Promise */
+
+    var extendStatics = function(d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+
+    function __extends(d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    }
+
+    var __assign = function() {
+        __assign = Object.assign || function __assign(t) {
+            for (var s, i = 1, n = arguments.length; i < n; i++) {
+                s = arguments[i];
+                for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+            }
+            return t;
+        };
+        return __assign.apply(this, arguments);
+    };
+
+    function __spreadArray(to, from, pack) {
+        if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+            if (ar || !(i in from)) {
+                if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+                ar[i] = from[i];
+            }
+        }
+        return to.concat(ar || from);
+    }
+
+    var n,u,i$1,t,o,r$1={},f$1=[],e$1=/acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i;function c$1(n,l){for(var u in l)n[u]=l[u];return n}function s(n){var l=n.parentNode;l&&l.removeChild(n);}function a$1(n,l,u){var i,t,o,r=arguments,f={};for(o in l)"key"==o?i=l[o]:"ref"==o?t=l[o]:f[o]=l[o];if(arguments.length>3)for(u=[u],o=3;o0?v$1(k.type,k.props,k.key,null,k.__v):k)){if(k.__=u,k.__b=u.__b+1,null===(_=A[h])||_&&k.key==_.key&&k.type===_.type)A[h]=void 0;else for(p=0;p3;)e.pop()();if(e[1]>>1,1),t.i.removeChild(n);}}),N(a$1(T,{context:t.context},n.__v),t.l)):t.l&&t.componentWillUnmount();}function I(n,t){return a$1(j,{__v:n,i:t})}(F.prototype=new p).__e=function(n){var t=this,e=U(t.__v),r=t.o.get(n);return r[0]++,function(u){var o=function(){t.props.revealOrder?(r.push(u),M(t,n,r)):u();};e?e(o):o();}},F.prototype.render=function(n){this.u=null,this.o=new Map;var t=w$1(n.children);n.revealOrder&&"b"===n.revealOrder[0]&&t.reverse();for(var e=t.length;e--;)this.o.set(t[e],this.u=[1,0,this.u]);return n.children},F.prototype.componentDidUpdate=F.prototype.componentDidMount=function(){var n=this;this.o.forEach(function(t,e){M(n,e,t);});};var W="undefined"!=typeof Symbol&&Symbol.for&&Symbol.for("react.element")||60103,P=/^(?:accent|alignment|arabic|baseline|cap|clip(?!PathU)|color|fill|flood|font|glyph(?!R)|horiz|marker(?!H|W|U)|overline|paint|stop|strikethrough|stroke|text(?!L)|underline|unicode|units|v|vector|vert|word|writing|x(?!C))[A-Z]/,V=function(n){return ("undefined"!=typeof Symbol&&"symbol"==typeof Symbol()?/fil|che|rad/i:/fil|che|ra/i).test(n)};p.prototype.isReactComponent={},["componentWillMount","componentWillReceiveProps","componentWillUpdate"].forEach(function(n){Object.defineProperty(p.prototype,n,{configurable:!0,get:function(){return this["UNSAFE_"+n]},set:function(t){Object.defineProperty(this,n,{configurable:!0,writable:!0,value:t});}});});var H=n.event;function Z(){}function Y(){return this.cancelBubble}function $(){return this.defaultPrevented}n.event=function(n){return H&&(n=H(n)),n.persist=Z,n.isPropagationStopped=Y,n.isDefaultPrevented=$,n.nativeEvent=n};var G={configurable:!0,get:function(){return this.class}},J=n.vnode;n.vnode=function(n){var t=n.type,e=n.props,r=e;if("string"==typeof t){for(var u in r={},e){var o=e[u];"value"===u&&"defaultValue"in e&&null==o||("defaultValue"===u&&"value"in e&&null==e.value?u="value":"download"===u&&!0===o?o="":/ondoubleclick/i.test(u)?u="ondblclick":/^onchange(textarea|input)/i.test(u+t)&&!V(e.type)?u="oninput":/^on(Ani|Tra|Tou|BeforeInp)/.test(u)?u=u.toLowerCase():P.test(u)?u=u.replace(/[A-Z0-9]/,"-$&").toLowerCase():null===o&&(o=void 0),r[u]=o);}"select"==t&&r.multiple&&Array.isArray(r.value)&&(r.value=w$1(e.children).forEach(function(n){n.props.selected=-1!=r.value.indexOf(n.props.value);})),"select"==t&&null!=r.defaultValue&&(r.value=w$1(e.children).forEach(function(n){n.props.selected=r.multiple?-1!=r.defaultValue.indexOf(n.props.value):r.defaultValue==n.props.value;})),n.props=r;}t&&e.class!=e.className&&(G.enumerable="className"in e,null!=e.className&&(r.class=e.className),Object.defineProperty(r,"className",G)),n.$$typeof=W,J&&J(n);};var K=n.__r;n.__r=function(n){K&&K(n);};"object"==typeof performance&&"function"==typeof performance.now?performance.now.bind(performance):function(){return Date.now()};
+
+    var globalObj = typeof globalThis !== 'undefined' ? globalThis : window; // // TODO: streamline when killing IE11 support
+    if (globalObj.FullCalendarVDom) {
+        console.warn('FullCalendar VDOM already loaded');
+    }
+    else {
+        globalObj.FullCalendarVDom = {
+            Component: p,
+            createElement: a$1,
+            render: N,
+            createRef: h,
+            Fragment: y,
+            createContext: createContext$1,
+            createPortal: I,
+            flushToDom: flushToDom$1,
+            unmountComponentAtNode: unmountComponentAtNode$1,
+        };
+    }
+    // HACKS...
+    // TODO: lock version
+    // TODO: link gh issues
+    function flushToDom$1() {
+        var oldDebounceRendering = n.debounceRendering; // orig
+        var callbackQ = [];
+        function execCallbackSync(callback) {
+            callbackQ.push(callback);
+        }
+        n.debounceRendering = execCallbackSync;
+        N(a$1(FakeComponent, {}), document.createElement('div'));
+        while (callbackQ.length) {
+            callbackQ.shift()();
+        }
+        n.debounceRendering = oldDebounceRendering;
+    }
+    var FakeComponent = /** @class */ (function (_super) {
+        __extends(FakeComponent, _super);
+        function FakeComponent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        FakeComponent.prototype.render = function () { return a$1('div', {}); };
+        FakeComponent.prototype.componentDidMount = function () { this.setState({}); };
+        return FakeComponent;
+    }(p));
+    function createContext$1(defaultValue) {
+        var ContextType = q(defaultValue);
+        var origProvider = ContextType.Provider;
+        ContextType.Provider = function () {
+            var _this = this;
+            var isNew = !this.getChildContext;
+            var children = origProvider.apply(this, arguments); // eslint-disable-line prefer-rest-params
+            if (isNew) {
+                var subs_1 = [];
+                this.shouldComponentUpdate = function (_props) {
+                    if (_this.props.value !== _props.value) {
+                        subs_1.forEach(function (c) {
+                            c.context = _props.value;
+                            c.forceUpdate();
+                        });
+                    }
+                };
+                this.sub = function (c) {
+                    subs_1.push(c);
+                    var old = c.componentWillUnmount;
+                    c.componentWillUnmount = function () {
+                        subs_1.splice(subs_1.indexOf(c), 1);
+                        old && old.call(c);
+                    };
+                };
+            }
+            return children;
+        };
+        return ContextType;
+    }
+    function unmountComponentAtNode$1(node) {
+        N(null, node);
+    }
+
+    // no public types yet. when there are, export from:
+    // import {} from './api-type-deps'
+    var EventSourceApi = /** @class */ (function () {
+        function EventSourceApi(context, internalEventSource) {
+            this.context = context;
+            this.internalEventSource = internalEventSource;
+        }
+        EventSourceApi.prototype.remove = function () {
+            this.context.dispatch({
+                type: 'REMOVE_EVENT_SOURCE',
+                sourceId: this.internalEventSource.sourceId,
+            });
+        };
+        EventSourceApi.prototype.refetch = function () {
+            this.context.dispatch({
+                type: 'FETCH_EVENT_SOURCES',
+                sourceIds: [this.internalEventSource.sourceId],
+                isRefetch: true,
+            });
+        };
+        Object.defineProperty(EventSourceApi.prototype, "id", {
+            get: function () {
+                return this.internalEventSource.publicId;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(EventSourceApi.prototype, "url", {
+            get: function () {
+                return this.internalEventSource.meta.url;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(EventSourceApi.prototype, "format", {
+            get: function () {
+                return this.internalEventSource.meta.format; // TODO: bad. not guaranteed
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return EventSourceApi;
+    }());
+
+    function removeElement(el) {
+        if (el.parentNode) {
+            el.parentNode.removeChild(el);
+        }
+    }
+    // Querying
+    // ----------------------------------------------------------------------------------------------------------------
+    function elementClosest(el, selector) {
+        if (el.closest) {
+            return el.closest(selector);
+            // really bad fallback for IE
+            // from https://developer.mozilla.org/en-US/docs/Web/API/Element/closest
+        }
+        if (!document.documentElement.contains(el)) {
+            return null;
+        }
+        do {
+            if (elementMatches(el, selector)) {
+                return el;
+            }
+            el = (el.parentElement || el.parentNode);
+        } while (el !== null && el.nodeType === 1);
+        return null;
+    }
+    function elementMatches(el, selector) {
+        var method = el.matches || el.matchesSelector || el.msMatchesSelector;
+        return method.call(el, selector);
+    }
+    // accepts multiple subject els
+    // returns a real array. good for methods like forEach
+    // TODO: accept the document
+    function findElements(container, selector) {
+        var containers = container instanceof HTMLElement ? [container] : container;
+        var allMatches = [];
+        for (var i = 0; i < containers.length; i += 1) {
+            var matches = containers[i].querySelectorAll(selector);
+            for (var j = 0; j < matches.length; j += 1) {
+                allMatches.push(matches[j]);
+            }
+        }
+        return allMatches;
+    }
+    // accepts multiple subject els
+    // only queries direct child elements // TODO: rename to findDirectChildren!
+    function findDirectChildren(parent, selector) {
+        var parents = parent instanceof HTMLElement ? [parent] : parent;
+        var allMatches = [];
+        for (var i = 0; i < parents.length; i += 1) {
+            var childNodes = parents[i].children; // only ever elements
+            for (var j = 0; j < childNodes.length; j += 1) {
+                var childNode = childNodes[j];
+                if (!selector || elementMatches(childNode, selector)) {
+                    allMatches.push(childNode);
+                }
+            }
+        }
+        return allMatches;
+    }
+    // Style
+    // ----------------------------------------------------------------------------------------------------------------
+    var PIXEL_PROP_RE = /(top|left|right|bottom|width|height)$/i;
+    function applyStyle(el, props) {
+        for (var propName in props) {
+            applyStyleProp(el, propName, props[propName]);
+        }
+    }
+    function applyStyleProp(el, name, val) {
+        if (val == null) {
+            el.style[name] = '';
+        }
+        else if (typeof val === 'number' && PIXEL_PROP_RE.test(name)) {
+            el.style[name] = val + "px";
+        }
+        else {
+            el.style[name] = val;
+        }
+    }
+    // Event Handling
+    // ----------------------------------------------------------------------------------------------------------------
+    // if intercepting bubbled events at the document/window/body level,
+    // and want to see originating element (the 'target'), use this util instead
+    // of `ev.target` because it goes within web-component boundaries.
+    function getEventTargetViaRoot(ev) {
+        var _a, _b;
+        return (_b = (_a = ev.composedPath) === null || _a === void 0 ? void 0 : _a.call(ev)[0]) !== null && _b !== void 0 ? _b : ev.target;
+    }
+    // Shadow DOM consuderations
+    // ----------------------------------------------------------------------------------------------------------------
+    function getElRoot(el) {
+        return el.getRootNode ? el.getRootNode() : document;
+    }
+
+    // Stops a mouse/touch event from doing it's native browser action
+    function preventDefault(ev) {
+        ev.preventDefault();
+    }
+    // Event Delegation
+    // ----------------------------------------------------------------------------------------------------------------
+    function buildDelegationHandler(selector, handler) {
+        return function (ev) {
+            var matchedChild = elementClosest(ev.target, selector);
+            if (matchedChild) {
+                handler.call(matchedChild, ev, matchedChild);
+            }
+        };
+    }
+    function listenBySelector(container, eventType, selector, handler) {
+        var attachedHandler = buildDelegationHandler(selector, handler);
+        container.addEventListener(eventType, attachedHandler);
+        return function () {
+            container.removeEventListener(eventType, attachedHandler);
+        };
+    }
+    function listenToHoverBySelector(container, selector, onMouseEnter, onMouseLeave) {
+        var currentMatchedChild;
+        return listenBySelector(container, 'mouseover', selector, function (mouseOverEv, matchedChild) {
+            if (matchedChild !== currentMatchedChild) {
+                currentMatchedChild = matchedChild;
+                onMouseEnter(mouseOverEv, matchedChild);
+                var realOnMouseLeave_1 = function (mouseLeaveEv) {
+                    currentMatchedChild = null;
+                    onMouseLeave(mouseLeaveEv, matchedChild);
+                    matchedChild.removeEventListener('mouseleave', realOnMouseLeave_1);
+                };
+                // listen to the next mouseleave, and then unattach
+                matchedChild.addEventListener('mouseleave', realOnMouseLeave_1);
+            }
+        });
+    }
+    // Animation
+    // ----------------------------------------------------------------------------------------------------------------
+    var transitionEventNames = [
+        'webkitTransitionEnd',
+        'otransitionend',
+        'oTransitionEnd',
+        'msTransitionEnd',
+        'transitionend',
+    ];
+    // triggered only when the next single subsequent transition finishes
+    function whenTransitionDone(el, callback) {
+        var realCallback = function (ev) {
+            callback(ev);
+            transitionEventNames.forEach(function (eventName) {
+                el.removeEventListener(eventName, realCallback);
+            });
+        };
+        transitionEventNames.forEach(function (eventName) {
+            el.addEventListener(eventName, realCallback); // cross-browser way to determine when the transition finishes
+        });
+    }
+
+    var guidNumber = 0;
+    function guid() {
+        guidNumber += 1;
+        return String(guidNumber);
+    }
+    /* FullCalendar-specific DOM Utilities
+    ----------------------------------------------------------------------------------------------------------------------*/
+    // Make the mouse cursor express that an event is not allowed in the current area
+    function disableCursor() {
+        document.body.classList.add('fc-not-allowed');
+    }
+    // Returns the mouse cursor to its original look
+    function enableCursor() {
+        document.body.classList.remove('fc-not-allowed');
+    }
+    /* Selection
+    ----------------------------------------------------------------------------------------------------------------------*/
+    function preventSelection(el) {
+        el.classList.add('fc-unselectable');
+        el.addEventListener('selectstart', preventDefault);
+    }
+    function allowSelection(el) {
+        el.classList.remove('fc-unselectable');
+        el.removeEventListener('selectstart', preventDefault);
+    }
+    /* Context Menu
+    ----------------------------------------------------------------------------------------------------------------------*/
+    function preventContextMenu(el) {
+        el.addEventListener('contextmenu', preventDefault);
+    }
+    function allowContextMenu(el) {
+        el.removeEventListener('contextmenu', preventDefault);
+    }
+    function parseFieldSpecs(input) {
+        var specs = [];
+        var tokens = [];
+        var i;
+        var token;
+        if (typeof input === 'string') {
+            tokens = input.split(/\s*,\s*/);
+        }
+        else if (typeof input === 'function') {
+            tokens = [input];
+        }
+        else if (Array.isArray(input)) {
+            tokens = input;
+        }
+        for (i = 0; i < tokens.length; i += 1) {
+            token = tokens[i];
+            if (typeof token === 'string') {
+                specs.push(token.charAt(0) === '-' ?
+                    { field: token.substring(1), order: -1 } :
+                    { field: token, order: 1 });
+            }
+            else if (typeof token === 'function') {
+                specs.push({ func: token });
+            }
+        }
+        return specs;
+    }
+    function compareByFieldSpecs(obj0, obj1, fieldSpecs) {
+        var i;
+        var cmp;
+        for (i = 0; i < fieldSpecs.length; i += 1) {
+            cmp = compareByFieldSpec(obj0, obj1, fieldSpecs[i]);
+            if (cmp) {
+                return cmp;
+            }
+        }
+        return 0;
+    }
+    function compareByFieldSpec(obj0, obj1, fieldSpec) {
+        if (fieldSpec.func) {
+            return fieldSpec.func(obj0, obj1);
+        }
+        return flexibleCompare(obj0[fieldSpec.field], obj1[fieldSpec.field])
+            * (fieldSpec.order || 1);
+    }
+    function flexibleCompare(a, b) {
+        if (!a && !b) {
+            return 0;
+        }
+        if (b == null) {
+            return -1;
+        }
+        if (a == null) {
+            return 1;
+        }
+        if (typeof a === 'string' || typeof b === 'string') {
+            return String(a).localeCompare(String(b));
+        }
+        return a - b;
+    }
+    /* String Utilities
+    ----------------------------------------------------------------------------------------------------------------------*/
+    function padStart(val, len) {
+        var s = String(val);
+        return '000'.substr(0, len - s.length) + s;
+    }
+    /* Number Utilities
+    ----------------------------------------------------------------------------------------------------------------------*/
+    function compareNumbers(a, b) {
+        return a - b;
+    }
+    function isInt(n) {
+        return n % 1 === 0;
+    }
+    /* FC-specific DOM dimension stuff
+    ----------------------------------------------------------------------------------------------------------------------*/
+    function computeSmallestCellWidth(cellEl) {
+        var allWidthEl = cellEl.querySelector('.fc-scrollgrid-shrink-frame');
+        var contentWidthEl = cellEl.querySelector('.fc-scrollgrid-shrink-cushion');
+        if (!allWidthEl) {
+            throw new Error('needs fc-scrollgrid-shrink-frame className'); // TODO: use const
+        }
+        if (!contentWidthEl) {
+            throw new Error('needs fc-scrollgrid-shrink-cushion className');
+        }
+        return cellEl.getBoundingClientRect().width - allWidthEl.getBoundingClientRect().width + // the cell padding+border
+            contentWidthEl.getBoundingClientRect().width;
+    }
+
+    var DAY_IDS = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'];
+    // Adding
+    function addWeeks(m, n) {
+        var a = dateToUtcArray(m);
+        a[2] += n * 7;
+        return arrayToUtcDate(a);
+    }
+    function addDays(m, n) {
+        var a = dateToUtcArray(m);
+        a[2] += n;
+        return arrayToUtcDate(a);
+    }
+    function addMs(m, n) {
+        var a = dateToUtcArray(m);
+        a[6] += n;
+        return arrayToUtcDate(a);
+    }
+    // Diffing (all return floats)
+    // TODO: why not use ranges?
+    function diffWeeks(m0, m1) {
+        return diffDays(m0, m1) / 7;
+    }
+    function diffDays(m0, m1) {
+        return (m1.valueOf() - m0.valueOf()) / (1000 * 60 * 60 * 24);
+    }
+    function diffHours(m0, m1) {
+        return (m1.valueOf() - m0.valueOf()) / (1000 * 60 * 60);
+    }
+    function diffMinutes(m0, m1) {
+        return (m1.valueOf() - m0.valueOf()) / (1000 * 60);
+    }
+    function diffSeconds(m0, m1) {
+        return (m1.valueOf() - m0.valueOf()) / 1000;
+    }
+    function diffDayAndTime(m0, m1) {
+        var m0day = startOfDay(m0);
+        var m1day = startOfDay(m1);
+        return {
+            years: 0,
+            months: 0,
+            days: Math.round(diffDays(m0day, m1day)),
+            milliseconds: (m1.valueOf() - m1day.valueOf()) - (m0.valueOf() - m0day.valueOf()),
+        };
+    }
+    // Diffing Whole Units
+    function diffWholeWeeks(m0, m1) {
+        var d = diffWholeDays(m0, m1);
+        if (d !== null && d % 7 === 0) {
+            return d / 7;
+        }
+        return null;
+    }
+    function diffWholeDays(m0, m1) {
+        if (timeAsMs(m0) === timeAsMs(m1)) {
+            return Math.round(diffDays(m0, m1));
+        }
+        return null;
+    }
+    // Start-Of
+    function startOfDay(m) {
+        return arrayToUtcDate([
+            m.getUTCFullYear(),
+            m.getUTCMonth(),
+            m.getUTCDate(),
+        ]);
+    }
+    function startOfHour(m) {
+        return arrayToUtcDate([
+            m.getUTCFullYear(),
+            m.getUTCMonth(),
+            m.getUTCDate(),
+            m.getUTCHours(),
+        ]);
+    }
+    function startOfMinute(m) {
+        return arrayToUtcDate([
+            m.getUTCFullYear(),
+            m.getUTCMonth(),
+            m.getUTCDate(),
+            m.getUTCHours(),
+            m.getUTCMinutes(),
+        ]);
+    }
+    function startOfSecond(m) {
+        return arrayToUtcDate([
+            m.getUTCFullYear(),
+            m.getUTCMonth(),
+            m.getUTCDate(),
+            m.getUTCHours(),
+            m.getUTCMinutes(),
+            m.getUTCSeconds(),
+        ]);
+    }
+    // Week Computation
+    function weekOfYear(marker, dow, doy) {
+        var y = marker.getUTCFullYear();
+        var w = weekOfGivenYear(marker, y, dow, doy);
+        if (w < 1) {
+            return weekOfGivenYear(marker, y - 1, dow, doy);
+        }
+        var nextW = weekOfGivenYear(marker, y + 1, dow, doy);
+        if (nextW >= 1) {
+            return Math.min(w, nextW);
+        }
+        return w;
+    }
+    function weekOfGivenYear(marker, year, dow, doy) {
+        var firstWeekStart = arrayToUtcDate([year, 0, 1 + firstWeekOffset(year, dow, doy)]);
+        var dayStart = startOfDay(marker);
+        var days = Math.round(diffDays(firstWeekStart, dayStart));
+        return Math.floor(days / 7) + 1; // zero-indexed
+    }
+    // start-of-first-week - start-of-year
+    function firstWeekOffset(year, dow, doy) {
+        // first-week day -- which january is always in the first week (4 for iso, 1 for other)
+        var fwd = 7 + dow - doy;
+        // first-week day local weekday -- which local weekday is fwd
+        var fwdlw = (7 + arrayToUtcDate([year, 0, fwd]).getUTCDay() - dow) % 7;
+        return -fwdlw + fwd - 1;
+    }
+    // Array Conversion
+    function dateToLocalArray(date) {
+        return [
+            date.getFullYear(),
+            date.getMonth(),
+            date.getDate(),
+            date.getHours(),
+            date.getMinutes(),
+            date.getSeconds(),
+            date.getMilliseconds(),
+        ];
+    }
+    function arrayToLocalDate(a) {
+        return new Date(a[0], a[1] || 0, a[2] == null ? 1 : a[2], // day of month
+        a[3] || 0, a[4] || 0, a[5] || 0);
+    }
+    function dateToUtcArray(date) {
+        return [
+            date.getUTCFullYear(),
+            date.getUTCMonth(),
+            date.getUTCDate(),
+            date.getUTCHours(),
+            date.getUTCMinutes(),
+            date.getUTCSeconds(),
+            date.getUTCMilliseconds(),
+        ];
+    }
+    function arrayToUtcDate(a) {
+        // according to web standards (and Safari), a month index is required.
+        // massage if only given a year.
+        if (a.length === 1) {
+            a = a.concat([0]);
+        }
+        return new Date(Date.UTC.apply(Date, a));
+    }
+    // Other Utils
+    function isValidDate(m) {
+        return !isNaN(m.valueOf());
+    }
+    function timeAsMs(m) {
+        return m.getUTCHours() * 1000 * 60 * 60 +
+            m.getUTCMinutes() * 1000 * 60 +
+            m.getUTCSeconds() * 1000 +
+            m.getUTCMilliseconds();
+    }
+
+    function createEventInstance(defId, range, forcedStartTzo, forcedEndTzo) {
+        return {
+            instanceId: guid(),
+            defId: defId,
+            range: range,
+            forcedStartTzo: forcedStartTzo == null ? null : forcedStartTzo,
+            forcedEndTzo: forcedEndTzo == null ? null : forcedEndTzo,
+        };
+    }
+
+    var hasOwnProperty = Object.prototype.hasOwnProperty;
+    // Merges an array of objects into a single object.
+    // The second argument allows for an array of property names who's object values will be merged together.
+    function mergeProps(propObjs, complexPropsMap) {
+        var dest = {};
+        if (complexPropsMap) {
+            for (var name_1 in complexPropsMap) {
+                var complexObjs = [];
+                // collect the trailing object values, stopping when a non-object is discovered
+                for (var i = propObjs.length - 1; i >= 0; i -= 1) {
+                    var val = propObjs[i][name_1];
+                    if (typeof val === 'object' && val) { // non-null object
+                        complexObjs.unshift(val);
+                    }
+                    else if (val !== undefined) {
+                        dest[name_1] = val; // if there were no objects, this value will be used
+                        break;
+                    }
+                }
+                // if the trailing values were objects, use the merged value
+                if (complexObjs.length) {
+                    dest[name_1] = mergeProps(complexObjs);
+                }
+            }
+        }
+        // copy values into the destination, going from last to first
+        for (var i = propObjs.length - 1; i >= 0; i -= 1) {
+            var props = propObjs[i];
+            for (var name_2 in props) {
+                if (!(name_2 in dest)) { // if already assigned by previous props or complex props, don't reassign
+                    dest[name_2] = props[name_2];
+                }
+            }
+        }
+        return dest;
+    }
+    function filterHash(hash, func) {
+        var filtered = {};
+        for (var key in hash) {
+            if (func(hash[key], key)) {
+                filtered[key] = hash[key];
+            }
+        }
+        return filtered;
+    }
+    function mapHash(hash, func) {
+        var newHash = {};
+        for (var key in hash) {
+            newHash[key] = func(hash[key], key);
+        }
+        return newHash;
+    }
+    function arrayToHash(a) {
+        var hash = {};
+        for (var _i = 0, a_1 = a; _i < a_1.length; _i++) {
+            var item = a_1[_i];
+            hash[item] = true;
+        }
+        return hash;
+    }
+    function buildHashFromArray(a, func) {
+        var hash = {};
+        for (var i = 0; i < a.length; i += 1) {
+            var tuple = func(a[i], i);
+            hash[tuple[0]] = tuple[1];
+        }
+        return hash;
+    }
+    function hashValuesToArray(obj) {
+        var a = [];
+        for (var key in obj) {
+            a.push(obj[key]);
+        }
+        return a;
+    }
+    function isPropsEqual(obj0, obj1) {
+        if (obj0 === obj1) {
+            return true;
+        }
+        for (var key in obj0) {
+            if (hasOwnProperty.call(obj0, key)) {
+                if (!(key in obj1)) {
+                    return false;
+                }
+            }
+        }
+        for (var key in obj1) {
+            if (hasOwnProperty.call(obj1, key)) {
+                if (obj0[key] !== obj1[key]) {
+                    return false;
+                }
+            }
+        }
+        return true;
+    }
+    function getUnequalProps(obj0, obj1) {
+        var keys = [];
+        for (var key in obj0) {
+            if (hasOwnProperty.call(obj0, key)) {
+                if (!(key in obj1)) {
+                    keys.push(key);
+                }
+            }
+        }
+        for (var key in obj1) {
+            if (hasOwnProperty.call(obj1, key)) {
+                if (obj0[key] !== obj1[key]) {
+                    keys.push(key);
+                }
+            }
+        }
+        return keys;
+    }
+    function compareObjs(oldProps, newProps, equalityFuncs) {
+        if (equalityFuncs === void 0) { equalityFuncs = {}; }
+        if (oldProps === newProps) {
+            return true;
+        }
+        for (var key in newProps) {
+            if (key in oldProps && isObjValsEqual(oldProps[key], newProps[key], equalityFuncs[key])) ;
+            else {
+                return false;
+            }
+        }
+        // check for props that were omitted in the new
+        for (var key in oldProps) {
+            if (!(key in newProps)) {
+                return false;
+            }
+        }
+        return true;
+    }
+    /*
+    assumed "true" equality for handler names like "onReceiveSomething"
+    */
+    function isObjValsEqual(val0, val1, comparator) {
+        if (val0 === val1 || comparator === true) {
+            return true;
+        }
+        if (comparator) {
+            return comparator(val0, val1);
+        }
+        return false;
+    }
+    function collectFromHash(hash, startIndex, endIndex, step) {
+        if (startIndex === void 0) { startIndex = 0; }
+        if (step === void 0) { step = 1; }
+        var res = [];
+        if (endIndex == null) {
+            endIndex = Object.keys(hash).length;
+        }
+        for (var i = startIndex; i < endIndex; i += step) {
+            var val = hash[i];
+            if (val !== undefined) { // will disregard undefined for sparse arrays
+                res.push(val);
+            }
+        }
+        return res;
+    }
+
+    function parseRecurring(refined, defaultAllDay, dateEnv, recurringTypes) {
+        for (var i = 0; i < recurringTypes.length; i += 1) {
+            var parsed = recurringTypes[i].parse(refined, dateEnv);
+            if (parsed) {
+                var allDay = refined.allDay;
+                if (allDay == null) {
+                    allDay = defaultAllDay;
+                    if (allDay == null) {
+                        allDay = parsed.allDayGuess;
+                        if (allDay == null) {
+                            allDay = false;
+                        }
+                    }
+                }
+                return {
+                    allDay: allDay,
+                    duration: parsed.duration,
+                    typeData: parsed.typeData,
+                    typeId: i,
+                };
+            }
+        }
+        return null;
+    }
+    function expandRecurring(eventStore, framingRange, context) {
+        var dateEnv = context.dateEnv, pluginHooks = context.pluginHooks, options = context.options;
+        var defs = eventStore.defs, instances = eventStore.instances;
+        // remove existing recurring instances
+        // TODO: bad. always expand events as a second step
+        instances = filterHash(instances, function (instance) { return !defs[instance.defId].recurringDef; });
+        for (var defId in defs) {
+            var def = defs[defId];
+            if (def.recurringDef) {
+                var duration = def.recurringDef.duration;
+                if (!duration) {
+                    duration = def.allDay ?
+                        options.defaultAllDayEventDuration :
+                        options.defaultTimedEventDuration;
+                }
+                var starts = expandRecurringRanges(def, duration, framingRange, dateEnv, pluginHooks.recurringTypes);
+                for (var _i = 0, starts_1 = starts; _i < starts_1.length; _i++) {
+                    var start = starts_1[_i];
+                    var instance = createEventInstance(defId, {
+                        start: start,
+                        end: dateEnv.add(start, duration),
+                    });
+                    instances[instance.instanceId] = instance;
+                }
+            }
+        }
+        return { defs: defs, instances: instances };
+    }
+    /*
+    Event MUST have a recurringDef
+    */
+    function expandRecurringRanges(eventDef, duration, framingRange, dateEnv, recurringTypes) {
+        var typeDef = recurringTypes[eventDef.recurringDef.typeId];
+        var markers = typeDef.expand(eventDef.recurringDef.typeData, {
+            start: dateEnv.subtract(framingRange.start, duration),
+            end: framingRange.end,
+        }, dateEnv);
+        // the recurrence plugins don't guarantee that all-day events are start-of-day, so we have to
+        if (eventDef.allDay) {
+            markers = markers.map(startOfDay);
+        }
+        return markers;
+    }
+
+    var INTERNAL_UNITS = ['years', 'months', 'days', 'milliseconds'];
+    var PARSE_RE = /^(-?)(?:(\d+)\.)?(\d+):(\d\d)(?::(\d\d)(?:\.(\d\d\d))?)?/;
+    // Parsing and Creation
+    function createDuration(input, unit) {
+        var _a;
+        if (typeof input === 'string') {
+            return parseString(input);
+        }
+        if (typeof input === 'object' && input) { // non-null object
+            return parseObject(input);
+        }
+        if (typeof input === 'number') {
+            return parseObject((_a = {}, _a[unit || 'milliseconds'] = input, _a));
+        }
+        return null;
+    }
+    function parseString(s) {
+        var m = PARSE_RE.exec(s);
+        if (m) {
+            var sign = m[1] ? -1 : 1;
+            return {
+                years: 0,
+                months: 0,
+                days: sign * (m[2] ? parseInt(m[2], 10) : 0),
+                milliseconds: sign * ((m[3] ? parseInt(m[3], 10) : 0) * 60 * 60 * 1000 + // hours
+                    (m[4] ? parseInt(m[4], 10) : 0) * 60 * 1000 + // minutes
+                    (m[5] ? parseInt(m[5], 10) : 0) * 1000 + // seconds
+                    (m[6] ? parseInt(m[6], 10) : 0) // ms
+                ),
+            };
+        }
+        return null;
+    }
+    function parseObject(obj) {
+        var duration = {
+            years: obj.years || obj.year || 0,
+            months: obj.months || obj.month || 0,
+            days: obj.days || obj.day || 0,
+            milliseconds: (obj.hours || obj.hour || 0) * 60 * 60 * 1000 + // hours
+                (obj.minutes || obj.minute || 0) * 60 * 1000 + // minutes
+                (obj.seconds || obj.second || 0) * 1000 + // seconds
+                (obj.milliseconds || obj.millisecond || obj.ms || 0), // ms
+        };
+        var weeks = obj.weeks || obj.week;
+        if (weeks) {
+            duration.days += weeks * 7;
+            duration.specifiedWeeks = true;
+        }
+        return duration;
+    }
+    // Equality
+    function durationsEqual(d0, d1) {
+        return d0.years === d1.years &&
+            d0.months === d1.months &&
+            d0.days === d1.days &&
+            d0.milliseconds === d1.milliseconds;
+    }
+    function asCleanDays(dur) {
+        if (!dur.years && !dur.months && !dur.milliseconds) {
+            return dur.days;
+        }
+        return 0;
+    }
+    // Simple Math
+    function addDurations(d0, d1) {
+        return {
+            years: d0.years + d1.years,
+            months: d0.months + d1.months,
+            days: d0.days + d1.days,
+            milliseconds: d0.milliseconds + d1.milliseconds,
+        };
+    }
+    function subtractDurations(d1, d0) {
+        return {
+            years: d1.years - d0.years,
+            months: d1.months - d0.months,
+            days: d1.days - d0.days,
+            milliseconds: d1.milliseconds - d0.milliseconds,
+        };
+    }
+    function multiplyDuration(d, n) {
+        return {
+            years: d.years * n,
+            months: d.months * n,
+            days: d.days * n,
+            milliseconds: d.milliseconds * n,
+        };
+    }
+    // Conversions
+    // "Rough" because they are based on average-case Gregorian months/years
+    function asRoughYears(dur) {
+        return asRoughDays(dur) / 365;
+    }
+    function asRoughMonths(dur) {
+        return asRoughDays(dur) / 30;
+    }
+    function asRoughDays(dur) {
+        return asRoughMs(dur) / 864e5;
+    }
+    function asRoughMinutes(dur) {
+        return asRoughMs(dur) / (1000 * 60);
+    }
+    function asRoughSeconds(dur) {
+        return asRoughMs(dur) / 1000;
+    }
+    function asRoughMs(dur) {
+        return dur.years * (365 * 864e5) +
+            dur.months * (30 * 864e5) +
+            dur.days * 864e5 +
+            dur.milliseconds;
+    }
+    // Advanced Math
+    function wholeDivideDurations(numerator, denominator) {
+        var res = null;
+        for (var i = 0; i < INTERNAL_UNITS.length; i += 1) {
+            var unit = INTERNAL_UNITS[i];
+            if (denominator[unit]) {
+                var localRes = numerator[unit] / denominator[unit];
+                if (!isInt(localRes) || (res !== null && res !== localRes)) {
+                    return null;
+                }
+                res = localRes;
+            }
+            else if (numerator[unit]) {
+                // needs to divide by something but can't!
+                return null;
+            }
+        }
+        return res;
+    }
+    function greatestDurationDenominator(dur) {
+        var ms = dur.milliseconds;
+        if (ms) {
+            if (ms % 1000 !== 0) {
+                return { unit: 'millisecond', value: ms };
+            }
+            if (ms % (1000 * 60) !== 0) {
+                return { unit: 'second', value: ms / 1000 };
+            }
+            if (ms % (1000 * 60 * 60) !== 0) {
+                return { unit: 'minute', value: ms / (1000 * 60) };
+            }
+            if (ms) {
+                return { unit: 'hour', value: ms / (1000 * 60 * 60) };
+            }
+        }
+        if (dur.days) {
+            if (dur.specifiedWeeks && dur.days % 7 === 0) {
+                return { unit: 'week', value: dur.days / 7 };
+            }
+            return { unit: 'day', value: dur.days };
+        }
+        if (dur.months) {
+            return { unit: 'month', value: dur.months };
+        }
+        if (dur.years) {
+            return { unit: 'year', value: dur.years };
+        }
+        return { unit: 'millisecond', value: 0 };
+    }
+
+    // timeZoneOffset is in minutes
+    function buildIsoString(marker, timeZoneOffset, stripZeroTime) {
+        if (stripZeroTime === void 0) { stripZeroTime = false; }
+        var s = marker.toISOString();
+        s = s.replace('.000', '');
+        if (stripZeroTime) {
+            s = s.replace('T00:00:00Z', '');
+        }
+        if (s.length > 10) { // time part wasn't stripped, can add timezone info
+            if (timeZoneOffset == null) {
+                s = s.replace('Z', '');
+            }
+            else if (timeZoneOffset !== 0) {
+                s = s.replace('Z', formatTimeZoneOffset(timeZoneOffset, true));
+            }
+            // otherwise, its UTC-0 and we want to keep the Z
+        }
+        return s;
+    }
+    // formats the date, but with no time part
+    // TODO: somehow merge with buildIsoString and stripZeroTime
+    // TODO: rename. omit "string"
+    function formatDayString(marker) {
+        return marker.toISOString().replace(/T.*$/, '');
+    }
+    // TODO: use Date::toISOString and use everything after the T?
+    function formatIsoTimeString(marker) {
+        return padStart(marker.getUTCHours(), 2) + ':' +
+            padStart(marker.getUTCMinutes(), 2) + ':' +
+            padStart(marker.getUTCSeconds(), 2);
+    }
+    function formatTimeZoneOffset(minutes, doIso) {
+        if (doIso === void 0) { doIso = false; }
+        var sign = minutes < 0 ? '-' : '+';
+        var abs = Math.abs(minutes);
+        var hours = Math.floor(abs / 60);
+        var mins = Math.round(abs % 60);
+        if (doIso) {
+            return sign + padStart(hours, 2) + ":" + padStart(mins, 2);
+        }
+        return "GMT" + sign + hours + (mins ? ":" + padStart(mins, 2) : '');
+    }
+
+    // TODO: new util arrayify?
+    function removeExact(array, exactVal) {
+        var removeCnt = 0;
+        var i = 0;
+        while (i < array.length) {
+            if (array[i] === exactVal) {
+                array.splice(i, 1);
+                removeCnt += 1;
+            }
+            else {
+                i += 1;
+            }
+        }
+        return removeCnt;
+    }
+    function isArraysEqual(a0, a1, equalityFunc) {
+        if (a0 === a1) {
+            return true;
+        }
+        var len = a0.length;
+        var i;
+        if (len !== a1.length) { // not array? or not same length?
+            return false;
+        }
+        for (i = 0; i < len; i += 1) {
+            if (!(equalityFunc ? equalityFunc(a0[i], a1[i]) : a0[i] === a1[i])) {
+                return false;
+            }
+        }
+        return true;
+    }
+
+    function memoize(workerFunc, resEquality, teardownFunc) {
+        var currentArgs;
+        var currentRes;
+        return function () {
+            var newArgs = [];
+            for (var _i = 0; _i < arguments.length; _i++) {
+                newArgs[_i] = arguments[_i];
+            }
+            if (!currentArgs) {
+                currentRes = workerFunc.apply(this, newArgs);
+            }
+            else if (!isArraysEqual(currentArgs, newArgs)) {
+                if (teardownFunc) {
+                    teardownFunc(currentRes);
+                }
+                var res = workerFunc.apply(this, newArgs);
+                if (!resEquality || !resEquality(res, currentRes)) {
+                    currentRes = res;
+                }
+            }
+            currentArgs = newArgs;
+            return currentRes;
+        };
+    }
+    function memoizeObjArg(workerFunc, resEquality, teardownFunc) {
+        var _this = this;
+        var currentArg;
+        var currentRes;
+        return function (newArg) {
+            if (!currentArg) {
+                currentRes = workerFunc.call(_this, newArg);
+            }
+            else if (!isPropsEqual(currentArg, newArg)) {
+                if (teardownFunc) {
+                    teardownFunc(currentRes);
+                }
+                var res = workerFunc.call(_this, newArg);
+                if (!resEquality || !resEquality(res, currentRes)) {
+                    currentRes = res;
+                }
+            }
+            currentArg = newArg;
+            return currentRes;
+        };
+    }
+    function memoizeArraylike(// used at all?
+    workerFunc, resEquality, teardownFunc) {
+        var _this = this;
+        var currentArgSets = [];
+        var currentResults = [];
+        return function (newArgSets) {
+            var currentLen = currentArgSets.length;
+            var newLen = newArgSets.length;
+            var i = 0;
+            for (; i < currentLen; i += 1) {
+                if (!newArgSets[i]) { // one of the old sets no longer exists
+                    if (teardownFunc) {
+                        teardownFunc(currentResults[i]);
+                    }
+                }
+                else if (!isArraysEqual(currentArgSets[i], newArgSets[i])) {
+                    if (teardownFunc) {
+                        teardownFunc(currentResults[i]);
+                    }
+                    var res = workerFunc.apply(_this, newArgSets[i]);
+                    if (!resEquality || !resEquality(res, currentResults[i])) {
+                        currentResults[i] = res;
+                    }
+                }
+            }
+            for (; i < newLen; i += 1) {
+                currentResults[i] = workerFunc.apply(_this, newArgSets[i]);
+            }
+            currentArgSets = newArgSets;
+            currentResults.splice(newLen); // remove excess
+            return currentResults;
+        };
+    }
+    function memoizeHashlike(// used?
+    workerFunc, resEquality, teardownFunc) {
+        var _this = this;
+        var currentArgHash = {};
+        var currentResHash = {};
+        return function (newArgHash) {
+            var newResHash = {};
+            for (var key in newArgHash) {
+                if (!currentResHash[key]) {
+                    newResHash[key] = workerFunc.apply(_this, newArgHash[key]);
+                }
+                else if (!isArraysEqual(currentArgHash[key], newArgHash[key])) {
+                    if (teardownFunc) {
+                        teardownFunc(currentResHash[key]);
+                    }
+                    var res = workerFunc.apply(_this, newArgHash[key]);
+                    newResHash[key] = (resEquality && resEquality(res, currentResHash[key]))
+                        ? currentResHash[key]
+                        : res;
+                }
+                else {
+                    newResHash[key] = currentResHash[key];
+                }
+            }
+            currentArgHash = newArgHash;
+            currentResHash = newResHash;
+            return newResHash;
+        };
+    }
+
+    var EXTENDED_SETTINGS_AND_SEVERITIES = {
+        week: 3,
+        separator: 0,
+        omitZeroMinute: 0,
+        meridiem: 0,
+        omitCommas: 0,
+    };
+    var STANDARD_DATE_PROP_SEVERITIES = {
+        timeZoneName: 7,
+        era: 6,
+        year: 5,
+        month: 4,
+        day: 2,
+        weekday: 2,
+        hour: 1,
+        minute: 1,
+        second: 1,
+    };
+    var MERIDIEM_RE = /\s*([ap])\.?m\.?/i; // eats up leading spaces too
+    var COMMA_RE = /,/g; // we need re for globalness
+    var MULTI_SPACE_RE = /\s+/g;
+    var LTR_RE = /\u200e/g; // control character
+    var UTC_RE = /UTC|GMT/;
+    var NativeFormatter = /** @class */ (function () {
+        function NativeFormatter(formatSettings) {
+            var standardDateProps = {};
+            var extendedSettings = {};
+            var severity = 0;
+            for (var name_1 in formatSettings) {
+                if (name_1 in EXTENDED_SETTINGS_AND_SEVERITIES) {
+                    extendedSettings[name_1] = formatSettings[name_1];
+                    severity = Math.max(EXTENDED_SETTINGS_AND_SEVERITIES[name_1], severity);
+                }
+                else {
+                    standardDateProps[name_1] = formatSettings[name_1];
+                    if (name_1 in STANDARD_DATE_PROP_SEVERITIES) { // TODO: what about hour12? no severity
+                        severity = Math.max(STANDARD_DATE_PROP_SEVERITIES[name_1], severity);
+                    }
+                }
+            }
+            this.standardDateProps = standardDateProps;
+            this.extendedSettings = extendedSettings;
+            this.severity = severity;
+            this.buildFormattingFunc = memoize(buildFormattingFunc);
+        }
+        NativeFormatter.prototype.format = function (date, context) {
+            return this.buildFormattingFunc(this.standardDateProps, this.extendedSettings, context)(date);
+        };
+        NativeFormatter.prototype.formatRange = function (start, end, context, betterDefaultSeparator) {
+            var _a = this, standardDateProps = _a.standardDateProps, extendedSettings = _a.extendedSettings;
+            var diffSeverity = computeMarkerDiffSeverity(start.marker, end.marker, context.calendarSystem);
+            if (!diffSeverity) {
+                return this.format(start, context);
+            }
+            var biggestUnitForPartial = diffSeverity;
+            if (biggestUnitForPartial > 1 && // the two dates are different in a way that's larger scale than time
+                (standardDateProps.year === 'numeric' || standardDateProps.year === '2-digit') &&
+                (standardDateProps.month === 'numeric' || standardDateProps.month === '2-digit') &&
+                (standardDateProps.day === 'numeric' || standardDateProps.day === '2-digit')) {
+                biggestUnitForPartial = 1; // make it look like the dates are only different in terms of time
+            }
+            var full0 = this.format(start, context);
+            var full1 = this.format(end, context);
+            if (full0 === full1) {
+                return full0;
+            }
+            var partialDateProps = computePartialFormattingOptions(standardDateProps, biggestUnitForPartial);
+            var partialFormattingFunc = buildFormattingFunc(partialDateProps, extendedSettings, context);
+            var partial0 = partialFormattingFunc(start);
+            var partial1 = partialFormattingFunc(end);
+            var insertion = findCommonInsertion(full0, partial0, full1, partial1);
+            var separator = extendedSettings.separator || betterDefaultSeparator || context.defaultSeparator || '';
+            if (insertion) {
+                return insertion.before + partial0 + separator + partial1 + insertion.after;
+            }
+            return full0 + separator + full1;
+        };
+        NativeFormatter.prototype.getLargestUnit = function () {
+            switch (this.severity) {
+                case 7:
+                case 6:
+                case 5:
+                    return 'year';
+                case 4:
+                    return 'month';
+                case 3:
+                    return 'week';
+                case 2:
+                    return 'day';
+                default:
+                    return 'time'; // really?
+            }
+        };
+        return NativeFormatter;
+    }());
+    function buildFormattingFunc(standardDateProps, extendedSettings, context) {
+        var standardDatePropCnt = Object.keys(standardDateProps).length;
+        if (standardDatePropCnt === 1 && standardDateProps.timeZoneName === 'short') {
+            return function (date) { return (formatTimeZoneOffset(date.timeZoneOffset)); };
+        }
+        if (standardDatePropCnt === 0 && extendedSettings.week) {
+            return function (date) { return (formatWeekNumber(context.computeWeekNumber(date.marker), context.weekText, context.locale, extendedSettings.week)); };
+        }
+        return buildNativeFormattingFunc(standardDateProps, extendedSettings, context);
+    }
+    function buildNativeFormattingFunc(standardDateProps, extendedSettings, context) {
+        standardDateProps = __assign({}, standardDateProps); // copy
+        extendedSettings = __assign({}, extendedSettings); // copy
+        sanitizeSettings(standardDateProps, extendedSettings);
+        standardDateProps.timeZone = 'UTC'; // we leverage the only guaranteed timeZone for our UTC markers
+        var normalFormat = new Intl.DateTimeFormat(context.locale.codes, standardDateProps);
+        var zeroFormat; // needed?
+        if (extendedSettings.omitZeroMinute) {
+            var zeroProps = __assign({}, standardDateProps);
+            delete zeroProps.minute; // seconds and ms were already considered in sanitizeSettings
+            zeroFormat = new Intl.DateTimeFormat(context.locale.codes, zeroProps);
+        }
+        return function (date) {
+            var marker = date.marker;
+            var format;
+            if (zeroFormat && !marker.getUTCMinutes()) {
+                format = zeroFormat;
+            }
+            else {
+                format = normalFormat;
+            }
+            var s = format.format(marker);
+            return postProcess(s, date, standardDateProps, extendedSettings, context);
+        };
+    }
+    function sanitizeSettings(standardDateProps, extendedSettings) {
+        // deal with a browser inconsistency where formatting the timezone
+        // requires that the hour/minute be present.
+        if (standardDateProps.timeZoneName) {
+            if (!standardDateProps.hour) {
+                standardDateProps.hour = '2-digit';
+            }
+            if (!standardDateProps.minute) {
+                standardDateProps.minute = '2-digit';
+            }
+        }
+        // only support short timezone names
+        if (standardDateProps.timeZoneName === 'long') {
+            standardDateProps.timeZoneName = 'short';
+        }
+        // if requesting to display seconds, MUST display minutes
+        if (extendedSettings.omitZeroMinute && (standardDateProps.second || standardDateProps.millisecond)) {
+            delete extendedSettings.omitZeroMinute;
+        }
+    }
+    function postProcess(s, date, standardDateProps, extendedSettings, context) {
+        s = s.replace(LTR_RE, ''); // remove left-to-right control chars. do first. good for other regexes
+        if (standardDateProps.timeZoneName === 'short') {
+            s = injectTzoStr(s, (context.timeZone === 'UTC' || date.timeZoneOffset == null) ?
+                'UTC' : // important to normalize for IE, which does "GMT"
+                formatTimeZoneOffset(date.timeZoneOffset));
+        }
+        if (extendedSettings.omitCommas) {
+            s = s.replace(COMMA_RE, '').trim();
+        }
+        if (extendedSettings.omitZeroMinute) {
+            s = s.replace(':00', ''); // zeroFormat doesn't always achieve this
+        }
+        // ^ do anything that might create adjacent spaces before this point,
+        // because MERIDIEM_RE likes to eat up loading spaces
+        if (extendedSettings.meridiem === false) {
+            s = s.replace(MERIDIEM_RE, '').trim();
+        }
+        else if (extendedSettings.meridiem === 'narrow') { // a/p
+            s = s.replace(MERIDIEM_RE, function (m0, m1) { return m1.toLocaleLowerCase(); });
+        }
+        else if (extendedSettings.meridiem === 'short') { // am/pm
+            s = s.replace(MERIDIEM_RE, function (m0, m1) { return m1.toLocaleLowerCase() + "m"; });
+        }
+        else if (extendedSettings.meridiem === 'lowercase') { // other meridiem transformers already converted to lowercase
+            s = s.replace(MERIDIEM_RE, function (m0) { return m0.toLocaleLowerCase(); });
+        }
+        s = s.replace(MULTI_SPACE_RE, ' ');
+        s = s.trim();
+        return s;
+    }
+    function injectTzoStr(s, tzoStr) {
+        var replaced = false;
+        s = s.replace(UTC_RE, function () {
+            replaced = true;
+            return tzoStr;
+        });
+        // IE11 doesn't include UTC/GMT in the original string, so append to end
+        if (!replaced) {
+            s += " " + tzoStr;
+        }
+        return s;
+    }
+    function formatWeekNumber(num, weekText, locale, display) {
+        var parts = [];
+        if (display === 'narrow') {
+            parts.push(weekText);
+        }
+        else if (display === 'short') {
+            parts.push(weekText, ' ');
+        }
+        // otherwise, considered 'numeric'
+        parts.push(locale.simpleNumberFormat.format(num));
+        if (locale.options.direction === 'rtl') { // TODO: use control characters instead?
+            parts.reverse();
+        }
+        return parts.join('');
+    }
+    // Range Formatting Utils
+    // 0 = exactly the same
+    // 1 = different by time
+    // and bigger
+    function computeMarkerDiffSeverity(d0, d1, ca) {
+        if (ca.getMarkerYear(d0) !== ca.getMarkerYear(d1)) {
+            return 5;
+        }
+        if (ca.getMarkerMonth(d0) !== ca.getMarkerMonth(d1)) {
+            return 4;
+        }
+        if (ca.getMarkerDay(d0) !== ca.getMarkerDay(d1)) {
+            return 2;
+        }
+        if (timeAsMs(d0) !== timeAsMs(d1)) {
+            return 1;
+        }
+        return 0;
+    }
+    function computePartialFormattingOptions(options, biggestUnit) {
+        var partialOptions = {};
+        for (var name_2 in options) {
+            if (!(name_2 in STANDARD_DATE_PROP_SEVERITIES) || // not a date part prop (like timeZone)
+                STANDARD_DATE_PROP_SEVERITIES[name_2] <= biggestUnit) {
+                partialOptions[name_2] = options[name_2];
+            }
+        }
+        return partialOptions;
+    }
+    function findCommonInsertion(full0, partial0, full1, partial1) {
+        var i0 = 0;
+        while (i0 < full0.length) {
+            var found0 = full0.indexOf(partial0, i0);
+            if (found0 === -1) {
+                break;
+            }
+            var before0 = full0.substr(0, found0);
+            i0 = found0 + partial0.length;
+            var after0 = full0.substr(i0);
+            var i1 = 0;
+            while (i1 < full1.length) {
+                var found1 = full1.indexOf(partial1, i1);
+                if (found1 === -1) {
+                    break;
+                }
+                var before1 = full1.substr(0, found1);
+                i1 = found1 + partial1.length;
+                var after1 = full1.substr(i1);
+                if (before0 === before1 && after0 === after1) {
+                    return {
+                        before: before0,
+                        after: after0,
+                    };
+                }
+            }
+        }
+        return null;
+    }
+
+    function expandZonedMarker(dateInfo, calendarSystem) {
+        var a = calendarSystem.markerToArray(dateInfo.marker);
+        return {
+            marker: dateInfo.marker,
+            timeZoneOffset: dateInfo.timeZoneOffset,
+            array: a,
+            year: a[0],
+            month: a[1],
+            day: a[2],
+            hour: a[3],
+            minute: a[4],
+            second: a[5],
+            millisecond: a[6],
+        };
+    }
+
+    function createVerboseFormattingArg(start, end, context, betterDefaultSeparator) {
+        var startInfo = expandZonedMarker(start, context.calendarSystem);
+        var endInfo = end ? expandZonedMarker(end, context.calendarSystem) : null;
+        return {
+            date: startInfo,
+            start: startInfo,
+            end: endInfo,
+            timeZone: context.timeZone,
+            localeCodes: context.locale.codes,
+            defaultSeparator: betterDefaultSeparator || context.defaultSeparator,
+        };
+    }
+
+    /*
+    TODO: fix the terminology of "formatter" vs "formatting func"
+    */
+    /*
+    At the time of instantiation, this object does not know which cmd-formatting system it will use.
+    It receives this at the time of formatting, as a setting.
+    */
+    var CmdFormatter = /** @class */ (function () {
+        function CmdFormatter(cmdStr) {
+            this.cmdStr = cmdStr;
+        }
+        CmdFormatter.prototype.format = function (date, context, betterDefaultSeparator) {
+            return context.cmdFormatter(this.cmdStr, createVerboseFormattingArg(date, null, context, betterDefaultSeparator));
+        };
+        CmdFormatter.prototype.formatRange = function (start, end, context, betterDefaultSeparator) {
+            return context.cmdFormatter(this.cmdStr, createVerboseFormattingArg(start, end, context, betterDefaultSeparator));
+        };
+        return CmdFormatter;
+    }());
+
+    var FuncFormatter = /** @class */ (function () {
+        function FuncFormatter(func) {
+            this.func = func;
+        }
+        FuncFormatter.prototype.format = function (date, context, betterDefaultSeparator) {
+            return this.func(createVerboseFormattingArg(date, null, context, betterDefaultSeparator));
+        };
+        FuncFormatter.prototype.formatRange = function (start, end, context, betterDefaultSeparator) {
+            return this.func(createVerboseFormattingArg(start, end, context, betterDefaultSeparator));
+        };
+        return FuncFormatter;
+    }());
+
+    function createFormatter(input) {
+        if (typeof input === 'object' && input) { // non-null object
+            return new NativeFormatter(input);
+        }
+        if (typeof input === 'string') {
+            return new CmdFormatter(input);
+        }
+        if (typeof input === 'function') {
+            return new FuncFormatter(input);
+        }
+        return null;
+    }
+
+    // base options
+    // ------------
+    var BASE_OPTION_REFINERS = {
+        navLinkDayClick: identity,
+        navLinkWeekClick: identity,
+        duration: createDuration,
+        bootstrapFontAwesome: identity,
+        buttonIcons: identity,
+        customButtons: identity,
+        defaultAllDayEventDuration: createDuration,
+        defaultTimedEventDuration: createDuration,
+        nextDayThreshold: createDuration,
+        scrollTime: createDuration,
+        scrollTimeReset: Boolean,
+        slotMinTime: createDuration,
+        slotMaxTime: createDuration,
+        dayPopoverFormat: createFormatter,
+        slotDuration: createDuration,
+        snapDuration: createDuration,
+        headerToolbar: identity,
+        footerToolbar: identity,
+        defaultRangeSeparator: String,
+        titleRangeSeparator: String,
+        forceEventDuration: Boolean,
+        dayHeaders: Boolean,
+        dayHeaderFormat: createFormatter,
+        dayHeaderClassNames: identity,
+        dayHeaderContent: identity,
+        dayHeaderDidMount: identity,
+        dayHeaderWillUnmount: identity,
+        dayCellClassNames: identity,
+        dayCellContent: identity,
+        dayCellDidMount: identity,
+        dayCellWillUnmount: identity,
+        initialView: String,
+        aspectRatio: Number,
+        weekends: Boolean,
+        weekNumberCalculation: identity,
+        weekNumbers: Boolean,
+        weekNumberClassNames: identity,
+        weekNumberContent: identity,
+        weekNumberDidMount: identity,
+        weekNumberWillUnmount: identity,
+        editable: Boolean,
+        viewClassNames: identity,
+        viewDidMount: identity,
+        viewWillUnmount: identity,
+        nowIndicator: Boolean,
+        nowIndicatorClassNames: identity,
+        nowIndicatorContent: identity,
+        nowIndicatorDidMount: identity,
+        nowIndicatorWillUnmount: identity,
+        showNonCurrentDates: Boolean,
+        lazyFetching: Boolean,
+        startParam: String,
+        endParam: String,
+        timeZoneParam: String,
+        timeZone: String,
+        locales: identity,
+        locale: identity,
+        themeSystem: String,
+        dragRevertDuration: Number,
+        dragScroll: Boolean,
+        allDayMaintainDuration: Boolean,
+        unselectAuto: Boolean,
+        dropAccept: identity,
+        eventOrder: parseFieldSpecs,
+        eventOrderStrict: Boolean,
+        handleWindowResize: Boolean,
+        windowResizeDelay: Number,
+        longPressDelay: Number,
+        eventDragMinDistance: Number,
+        expandRows: Boolean,
+        height: identity,
+        contentHeight: identity,
+        direction: String,
+        weekNumberFormat: createFormatter,
+        eventResizableFromStart: Boolean,
+        displayEventTime: Boolean,
+        displayEventEnd: Boolean,
+        weekText: String,
+        progressiveEventRendering: Boolean,
+        businessHours: identity,
+        initialDate: identity,
+        now: identity,
+        eventDataTransform: identity,
+        stickyHeaderDates: identity,
+        stickyFooterScrollbar: identity,
+        viewHeight: identity,
+        defaultAllDay: Boolean,
+        eventSourceFailure: identity,
+        eventSourceSuccess: identity,
+        eventDisplay: String,
+        eventStartEditable: Boolean,
+        eventDurationEditable: Boolean,
+        eventOverlap: identity,
+        eventConstraint: identity,
+        eventAllow: identity,
+        eventBackgroundColor: String,
+        eventBorderColor: String,
+        eventTextColor: String,
+        eventColor: String,
+        eventClassNames: identity,
+        eventContent: identity,
+        eventDidMount: identity,
+        eventWillUnmount: identity,
+        selectConstraint: identity,
+        selectOverlap: identity,
+        selectAllow: identity,
+        droppable: Boolean,
+        unselectCancel: String,
+        slotLabelFormat: identity,
+        slotLaneClassNames: identity,
+        slotLaneContent: identity,
+        slotLaneDidMount: identity,
+        slotLaneWillUnmount: identity,
+        slotLabelClassNames: identity,
+        slotLabelContent: identity,
+        slotLabelDidMount: identity,
+        slotLabelWillUnmount: identity,
+        dayMaxEvents: identity,
+        dayMaxEventRows: identity,
+        dayMinWidth: Number,
+        slotLabelInterval: createDuration,
+        allDayText: String,
+        allDayClassNames: identity,
+        allDayContent: identity,
+        allDayDidMount: identity,
+        allDayWillUnmount: identity,
+        slotMinWidth: Number,
+        navLinks: Boolean,
+        eventTimeFormat: createFormatter,
+        rerenderDelay: Number,
+        moreLinkText: identity,
+        selectMinDistance: Number,
+        selectable: Boolean,
+        selectLongPressDelay: Number,
+        eventLongPressDelay: Number,
+        selectMirror: Boolean,
+        eventMaxStack: Number,
+        eventMinHeight: Number,
+        eventMinWidth: Number,
+        eventShortHeight: Number,
+        slotEventOverlap: Boolean,
+        plugins: identity,
+        firstDay: Number,
+        dayCount: Number,
+        dateAlignment: String,
+        dateIncrement: createDuration,
+        hiddenDays: identity,
+        monthMode: Boolean,
+        fixedWeekCount: Boolean,
+        validRange: identity,
+        visibleRange: identity,
+        titleFormat: identity,
+        // only used by list-view, but languages define the value, so we need it in base options
+        noEventsText: String,
+        moreLinkClick: identity,
+        moreLinkClassNames: identity,
+        moreLinkContent: identity,
+        moreLinkDidMount: identity,
+        moreLinkWillUnmount: identity,
+    };
+    // do NOT give a type here. need `typeof BASE_OPTION_DEFAULTS` to give real results.
+    // raw values.
+    var BASE_OPTION_DEFAULTS = {
+        eventDisplay: 'auto',
+        defaultRangeSeparator: ' - ',
+        titleRangeSeparator: ' \u2013 ',
+        defaultTimedEventDuration: '01:00:00',
+        defaultAllDayEventDuration: { day: 1 },
+        forceEventDuration: false,
+        nextDayThreshold: '00:00:00',
+        dayHeaders: true,
+        initialView: '',
+        aspectRatio: 1.35,
+        headerToolbar: {
+            start: 'title',
+            center: '',
+            end: 'today prev,next',
+        },
+        weekends: true,
+        weekNumbers: false,
+        weekNumberCalculation: 'local',
+        editable: false,
+        nowIndicator: false,
+        scrollTime: '06:00:00',
+        scrollTimeReset: true,
+        slotMinTime: '00:00:00',
+        slotMaxTime: '24:00:00',
+        showNonCurrentDates: true,
+        lazyFetching: true,
+        startParam: 'start',
+        endParam: 'end',
+        timeZoneParam: 'timeZone',
+        timeZone: 'local',
+        locales: [],
+        locale: '',
+        themeSystem: 'standard',
+        dragRevertDuration: 500,
+        dragScroll: true,
+        allDayMaintainDuration: false,
+        unselectAuto: true,
+        dropAccept: '*',
+        eventOrder: 'start,-duration,allDay,title',
+        dayPopoverFormat: { month: 'long', day: 'numeric', year: 'numeric' },
+        handleWindowResize: true,
+        windowResizeDelay: 100,
+        longPressDelay: 1000,
+        eventDragMinDistance: 5,
+        expandRows: false,
+        navLinks: false,
+        selectable: false,
+        eventMinHeight: 15,
+        eventMinWidth: 30,
+        eventShortHeight: 30,
+    };
+    // calendar listeners
+    // ------------------
+    var CALENDAR_LISTENER_REFINERS = {
+        datesSet: identity,
+        eventsSet: identity,
+        eventAdd: identity,
+        eventChange: identity,
+        eventRemove: identity,
+        windowResize: identity,
+        eventClick: identity,
+        eventMouseEnter: identity,
+        eventMouseLeave: identity,
+        select: identity,
+        unselect: identity,
+        loading: identity,
+        // internal
+        _unmount: identity,
+        _beforeprint: identity,
+        _afterprint: identity,
+        _noEventDrop: identity,
+        _noEventResize: identity,
+        _resize: identity,
+        _scrollRequest: identity,
+    };
+    // calendar-specific options
+    // -------------------------
+    var CALENDAR_OPTION_REFINERS = {
+        buttonText: identity,
+        views: identity,
+        plugins: identity,
+        initialEvents: identity,
+        events: identity,
+        eventSources: identity,
+    };
+    var COMPLEX_OPTION_COMPARATORS = {
+        headerToolbar: isBoolComplexEqual,
+        footerToolbar: isBoolComplexEqual,
+        buttonText: isBoolComplexEqual,
+        buttonIcons: isBoolComplexEqual,
+    };
+    function isBoolComplexEqual(a, b) {
+        if (typeof a === 'object' && typeof b === 'object' && a && b) { // both non-null objects
+            return isPropsEqual(a, b);
+        }
+        return a === b;
+    }
+    // view-specific options
+    // ---------------------
+    var VIEW_OPTION_REFINERS = {
+        type: String,
+        component: identity,
+        buttonText: String,
+        buttonTextKey: String,
+        dateProfileGeneratorClass: identity,
+        usesMinMaxTime: Boolean,
+        classNames: identity,
+        content: identity,
+        didMount: identity,
+        willUnmount: identity,
+    };
+    // util funcs
+    // ----------------------------------------------------------------------------------------------------
+    function mergeRawOptions(optionSets) {
+        return mergeProps(optionSets, COMPLEX_OPTION_COMPARATORS);
+    }
+    function refineProps(input, refiners) {
+        var refined = {};
+        var extra = {};
+        for (var propName in refiners) {
+            if (propName in input) {
+                refined[propName] = refiners[propName](input[propName]);
+            }
+        }
+        for (var propName in input) {
+            if (!(propName in refiners)) {
+                extra[propName] = input[propName];
+            }
+        }
+        return { refined: refined, extra: extra };
+    }
+    function identity(raw) {
+        return raw;
+    }
+
+    function parseEvents(rawEvents, eventSource, context, allowOpenRange) {
+        var eventStore = createEmptyEventStore();
+        var eventRefiners = buildEventRefiners(context);
+        for (var _i = 0, rawEvents_1 = rawEvents; _i < rawEvents_1.length; _i++) {
+            var rawEvent = rawEvents_1[_i];
+            var tuple = parseEvent(rawEvent, eventSource, context, allowOpenRange, eventRefiners);
+            if (tuple) {
+                eventTupleToStore(tuple, eventStore);
+            }
+        }
+        return eventStore;
+    }
+    function eventTupleToStore(tuple, eventStore) {
+        if (eventStore === void 0) { eventStore = createEmptyEventStore(); }
+        eventStore.defs[tuple.def.defId] = tuple.def;
+        if (tuple.instance) {
+            eventStore.instances[tuple.instance.instanceId] = tuple.instance;
+        }
+        return eventStore;
+    }
+    // retrieves events that have the same groupId as the instance specified by `instanceId`
+    // or they are the same as the instance.
+    // why might instanceId not be in the store? an event from another calendar?
+    function getRelevantEvents(eventStore, instanceId) {
+        var instance = eventStore.instances[instanceId];
+        if (instance) {
+            var def_1 = eventStore.defs[instance.defId];
+            // get events/instances with same group
+            var newStore = filterEventStoreDefs(eventStore, function (lookDef) { return isEventDefsGrouped(def_1, lookDef); });
+            // add the original
+            // TODO: wish we could use eventTupleToStore or something like it
+            newStore.defs[def_1.defId] = def_1;
+            newStore.instances[instance.instanceId] = instance;
+            return newStore;
+        }
+        return createEmptyEventStore();
+    }
+    function isEventDefsGrouped(def0, def1) {
+        return Boolean(def0.groupId && def0.groupId === def1.groupId);
+    }
+    function createEmptyEventStore() {
+        return { defs: {}, instances: {} };
+    }
+    function mergeEventStores(store0, store1) {
+        return {
+            defs: __assign(__assign({}, store0.defs), store1.defs),
+            instances: __assign(__assign({}, store0.instances), store1.instances),
+        };
+    }
+    function filterEventStoreDefs(eventStore, filterFunc) {
+        var defs = filterHash(eventStore.defs, filterFunc);
+        var instances = filterHash(eventStore.instances, function (instance) { return (defs[instance.defId] // still exists?
+        ); });
+        return { defs: defs, instances: instances };
+    }
+    function excludeSubEventStore(master, sub) {
+        var defs = master.defs, instances = master.instances;
+        var filteredDefs = {};
+        var filteredInstances = {};
+        for (var defId in defs) {
+            if (!sub.defs[defId]) { // not explicitly excluded
+                filteredDefs[defId] = defs[defId];
+            }
+        }
+        for (var instanceId in instances) {
+            if (!sub.instances[instanceId] && // not explicitly excluded
+                filteredDefs[instances[instanceId].defId] // def wasn't filtered away
+            ) {
+                filteredInstances[instanceId] = instances[instanceId];
+            }
+        }
+        return {
+            defs: filteredDefs,
+            instances: filteredInstances,
+        };
+    }
+
+    function normalizeConstraint(input, context) {
+        if (Array.isArray(input)) {
+            return parseEvents(input, null, context, true); // allowOpenRange=true
+        }
+        if (typeof input === 'object' && input) { // non-null object
+            return parseEvents([input], null, context, true); // allowOpenRange=true
+        }
+        if (input != null) {
+            return String(input);
+        }
+        return null;
+    }
+
+    function parseClassNames(raw) {
+        if (Array.isArray(raw)) {
+            return raw;
+        }
+        if (typeof raw === 'string') {
+            return raw.split(/\s+/);
+        }
+        return [];
+    }
+
+    // TODO: better called "EventSettings" or "EventConfig"
+    // TODO: move this file into structs
+    // TODO: separate constraint/overlap/allow, because selection uses only that, not other props
+    var EVENT_UI_REFINERS = {
+        display: String,
+        editable: Boolean,
+        startEditable: Boolean,
+        durationEditable: Boolean,
+        constraint: identity,
+        overlap: identity,
+        allow: identity,
+        className: parseClassNames,
+        classNames: parseClassNames,
+        color: String,
+        backgroundColor: String,
+        borderColor: String,
+        textColor: String,
+    };
+    var EMPTY_EVENT_UI = {
+        display: null,
+        startEditable: null,
+        durationEditable: null,
+        constraints: [],
+        overlap: null,
+        allows: [],
+        backgroundColor: '',
+        borderColor: '',
+        textColor: '',
+        classNames: [],
+    };
+    function createEventUi(refined, context) {
+        var constraint = normalizeConstraint(refined.constraint, context);
+        return {
+            display: refined.display || null,
+            startEditable: refined.startEditable != null ? refined.startEditable : refined.editable,
+            durationEditable: refined.durationEditable != null ? refined.durationEditable : refined.editable,
+            constraints: constraint != null ? [constraint] : [],
+            overlap: refined.overlap != null ? refined.overlap : null,
+            allows: refined.allow != null ? [refined.allow] : [],
+            backgroundColor: refined.backgroundColor || refined.color || '',
+            borderColor: refined.borderColor || refined.color || '',
+            textColor: refined.textColor || '',
+            classNames: (refined.className || []).concat(refined.classNames || []), // join singular and plural
+        };
+    }
+    // TODO: prevent against problems with <2 args!
+    function combineEventUis(uis) {
+        return uis.reduce(combineTwoEventUis, EMPTY_EVENT_UI);
+    }
+    function combineTwoEventUis(item0, item1) {
+        return {
+            display: item1.display != null ? item1.display : item0.display,
+            startEditable: item1.startEditable != null ? item1.startEditable : item0.startEditable,
+            durationEditable: item1.durationEditable != null ? item1.durationEditable : item0.durationEditable,
+            constraints: item0.constraints.concat(item1.constraints),
+            overlap: typeof item1.overlap === 'boolean' ? item1.overlap : item0.overlap,
+            allows: item0.allows.concat(item1.allows),
+            backgroundColor: item1.backgroundColor || item0.backgroundColor,
+            borderColor: item1.borderColor || item0.borderColor,
+            textColor: item1.textColor || item0.textColor,
+            classNames: item0.classNames.concat(item1.classNames),
+        };
+    }
+
+    var EVENT_NON_DATE_REFINERS = {
+        id: String,
+        groupId: String,
+        title: String,
+        url: String,
+    };
+    var EVENT_DATE_REFINERS = {
+        start: identity,
+        end: identity,
+        date: identity,
+        allDay: Boolean,
+    };
+    var EVENT_REFINERS = __assign(__assign(__assign({}, EVENT_NON_DATE_REFINERS), EVENT_DATE_REFINERS), { extendedProps: identity });
+    function parseEvent(raw, eventSource, context, allowOpenRange, refiners) {
+        if (refiners === void 0) { refiners = buildEventRefiners(context); }
+        var _a = refineEventDef(raw, context, refiners), refined = _a.refined, extra = _a.extra;
+        var defaultAllDay = computeIsDefaultAllDay(eventSource, context);
+        var recurringRes = parseRecurring(refined, defaultAllDay, context.dateEnv, context.pluginHooks.recurringTypes);
+        if (recurringRes) {
+            var def = parseEventDef(refined, extra, eventSource ? eventSource.sourceId : '', recurringRes.allDay, Boolean(recurringRes.duration), context);
+            def.recurringDef = {
+                typeId: recurringRes.typeId,
+                typeData: recurringRes.typeData,
+                duration: recurringRes.duration,
+            };
+            return { def: def, instance: null };
+        }
+        var singleRes = parseSingle(refined, defaultAllDay, context, allowOpenRange);
+        if (singleRes) {
+            var def = parseEventDef(refined, extra, eventSource ? eventSource.sourceId : '', singleRes.allDay, singleRes.hasEnd, context);
+            var instance = createEventInstance(def.defId, singleRes.range, singleRes.forcedStartTzo, singleRes.forcedEndTzo);
+            return { def: def, instance: instance };
+        }
+        return null;
+    }
+    function refineEventDef(raw, context, refiners) {
+        if (refiners === void 0) { refiners = buildEventRefiners(context); }
+        return refineProps(raw, refiners);
+    }
+    function buildEventRefiners(context) {
+        return __assign(__assign(__assign({}, EVENT_UI_REFINERS), EVENT_REFINERS), context.pluginHooks.eventRefiners);
+    }
+    /*
+    Will NOT populate extendedProps with the leftover properties.
+    Will NOT populate date-related props.
+    */
+    function parseEventDef(refined, extra, sourceId, allDay, hasEnd, context) {
+        var def = {
+            title: refined.title || '',
+            groupId: refined.groupId || '',
+            publicId: refined.id || '',
+            url: refined.url || '',
+            recurringDef: null,
+            defId: guid(),
+            sourceId: sourceId,
+            allDay: allDay,
+            hasEnd: hasEnd,
+            ui: createEventUi(refined, context),
+            extendedProps: __assign(__assign({}, (refined.extendedProps || {})), extra),
+        };
+        for (var _i = 0, _a = context.pluginHooks.eventDefMemberAdders; _i < _a.length; _i++) {
+            var memberAdder = _a[_i];
+            __assign(def, memberAdder(refined));
+        }
+        // help out EventApi from having user modify props
+        Object.freeze(def.ui.classNames);
+        Object.freeze(def.extendedProps);
+        return def;
+    }
+    function parseSingle(refined, defaultAllDay, context, allowOpenRange) {
+        var allDay = refined.allDay;
+        var startMeta;
+        var startMarker = null;
+        var hasEnd = false;
+        var endMeta;
+        var endMarker = null;
+        var startInput = refined.start != null ? refined.start : refined.date;
+        startMeta = context.dateEnv.createMarkerMeta(startInput);
+        if (startMeta) {
+            startMarker = startMeta.marker;
+        }
+        else if (!allowOpenRange) {
+            return null;
+        }
+        if (refined.end != null) {
+            endMeta = context.dateEnv.createMarkerMeta(refined.end);
+        }
+        if (allDay == null) {
+            if (defaultAllDay != null) {
+                allDay = defaultAllDay;
+            }
+            else {
+                // fall back to the date props LAST
+                allDay = (!startMeta || startMeta.isTimeUnspecified) &&
+                    (!endMeta || endMeta.isTimeUnspecified);
+            }
+        }
+        if (allDay && startMarker) {
+            startMarker = startOfDay(startMarker);
+        }
+        if (endMeta) {
+            endMarker = endMeta.marker;
+            if (allDay) {
+                endMarker = startOfDay(endMarker);
+            }
+            if (startMarker && endMarker <= startMarker) {
+                endMarker = null;
+            }
+        }
+        if (endMarker) {
+            hasEnd = true;
+        }
+        else if (!allowOpenRange) {
+            hasEnd = context.options.forceEventDuration || false;
+            endMarker = context.dateEnv.add(startMarker, allDay ?
+                context.options.defaultAllDayEventDuration :
+                context.options.defaultTimedEventDuration);
+        }
+        return {
+            allDay: allDay,
+            hasEnd: hasEnd,
+            range: { start: startMarker, end: endMarker },
+            forcedStartTzo: startMeta ? startMeta.forcedTzo : null,
+            forcedEndTzo: endMeta ? endMeta.forcedTzo : null,
+        };
+    }
+    function computeIsDefaultAllDay(eventSource, context) {
+        var res = null;
+        if (eventSource) {
+            res = eventSource.defaultAllDay;
+        }
+        if (res == null) {
+            res = context.options.defaultAllDay;
+        }
+        return res;
+    }
+
+    /* Date stuff that doesn't belong in datelib core
+    ----------------------------------------------------------------------------------------------------------------------*/
+    // given a timed range, computes an all-day range that has the same exact duration,
+    // but whose start time is aligned with the start of the day.
+    function computeAlignedDayRange(timedRange) {
+        var dayCnt = Math.floor(diffDays(timedRange.start, timedRange.end)) || 1;
+        var start = startOfDay(timedRange.start);
+        var end = addDays(start, dayCnt);
+        return { start: start, end: end };
+    }
+    // given a timed range, computes an all-day range based on how for the end date bleeds into the next day
+    // TODO: give nextDayThreshold a default arg
+    function computeVisibleDayRange(timedRange, nextDayThreshold) {
+        if (nextDayThreshold === void 0) { nextDayThreshold = createDuration(0); }
+        var startDay = null;
+        var endDay = null;
+        if (timedRange.end) {
+            endDay = startOfDay(timedRange.end);
+            var endTimeMS = timedRange.end.valueOf() - endDay.valueOf(); // # of milliseconds into `endDay`
+            // If the end time is actually inclusively part of the next day and is equal to or
+            // beyond the next day threshold, adjust the end to be the exclusive end of `endDay`.
+            // Otherwise, leaving it as inclusive will cause it to exclude `endDay`.
+            if (endTimeMS && endTimeMS >= asRoughMs(nextDayThreshold)) {
+                endDay = addDays(endDay, 1);
+            }
+        }
+        if (timedRange.start) {
+            startDay = startOfDay(timedRange.start); // the beginning of the day the range starts
+            // If end is within `startDay` but not past nextDayThreshold, assign the default duration of one day.
+            if (endDay && endDay <= startDay) {
+                endDay = addDays(startDay, 1);
+            }
+        }
+        return { start: startDay, end: endDay };
+    }
+    // spans from one day into another?
+    function isMultiDayRange(range) {
+        var visibleRange = computeVisibleDayRange(range);
+        return diffDays(visibleRange.start, visibleRange.end) > 1;
+    }
+    function diffDates(date0, date1, dateEnv, largeUnit) {
+        if (largeUnit === 'year') {
+            return createDuration(dateEnv.diffWholeYears(date0, date1), 'year');
+        }
+        if (largeUnit === 'month') {
+            return createDuration(dateEnv.diffWholeMonths(date0, date1), 'month');
+        }
+        return diffDayAndTime(date0, date1); // returns a duration
+    }
+
+    function parseRange(input, dateEnv) {
+        var start = null;
+        var end = null;
+        if (input.start) {
+            start = dateEnv.createMarker(input.start);
+        }
+        if (input.end) {
+            end = dateEnv.createMarker(input.end);
+        }
+        if (!start && !end) {
+            return null;
+        }
+        if (start && end && end < start) {
+            return null;
+        }
+        return { start: start, end: end };
+    }
+    // SIDE-EFFECT: will mutate ranges.
+    // Will return a new array result.
+    function invertRanges(ranges, constraintRange) {
+        var invertedRanges = [];
+        var start = constraintRange.start; // the end of the previous range. the start of the new range
+        var i;
+        var dateRange;
+        // ranges need to be in order. required for our date-walking algorithm
+        ranges.sort(compareRanges);
+        for (i = 0; i < ranges.length; i += 1) {
+            dateRange = ranges[i];
+            // add the span of time before the event (if there is any)
+            if (dateRange.start > start) { // compare millisecond time (skip any ambig logic)
+                invertedRanges.push({ start: start, end: dateRange.start });
+            }
+            if (dateRange.end > start) {
+                start = dateRange.end;
+            }
+        }
+        // add the span of time after the last event (if there is any)
+        if (start < constraintRange.end) { // compare millisecond time (skip any ambig logic)
+            invertedRanges.push({ start: start, end: constraintRange.end });
+        }
+        return invertedRanges;
+    }
+    function compareRanges(range0, range1) {
+        return range0.start.valueOf() - range1.start.valueOf(); // earlier ranges go first
+    }
+    function intersectRanges(range0, range1) {
+        var start = range0.start, end = range0.end;
+        var newRange = null;
+        if (range1.start !== null) {
+            if (start === null) {
+                start = range1.start;
+            }
+            else {
+                start = new Date(Math.max(start.valueOf(), range1.start.valueOf()));
+            }
+        }
+        if (range1.end != null) {
+            if (end === null) {
+                end = range1.end;
+            }
+            else {
+                end = new Date(Math.min(end.valueOf(), range1.end.valueOf()));
+            }
+        }
+        if (start === null || end === null || start < end) {
+            newRange = { start: start, end: end };
+        }
+        return newRange;
+    }
+    function rangesEqual(range0, range1) {
+        return (range0.start === null ? null : range0.start.valueOf()) === (range1.start === null ? null : range1.start.valueOf()) &&
+            (range0.end === null ? null : range0.end.valueOf()) === (range1.end === null ? null : range1.end.valueOf());
+    }
+    function rangesIntersect(range0, range1) {
+        return (range0.end === null || range1.start === null || range0.end > range1.start) &&
+            (range0.start === null || range1.end === null || range0.start < range1.end);
+    }
+    function rangeContainsRange(outerRange, innerRange) {
+        return (outerRange.start === null || (innerRange.start !== null && innerRange.start >= outerRange.start)) &&
+            (outerRange.end === null || (innerRange.end !== null && innerRange.end <= outerRange.end));
+    }
+    function rangeContainsMarker(range, date) {
+        return (range.start === null || date >= range.start) &&
+            (range.end === null || date < range.end);
+    }
+    // If the given date is not within the given range, move it inside.
+    // (If it's past the end, make it one millisecond before the end).
+    function constrainMarkerToRange(date, range) {
+        if (range.start != null && date < range.start) {
+            return range.start;
+        }
+        if (range.end != null && date >= range.end) {
+            return new Date(range.end.valueOf() - 1);
+        }
+        return date;
+    }
+
+    /*
+    Specifying nextDayThreshold signals that all-day ranges should be sliced.
+    */
+    function sliceEventStore(eventStore, eventUiBases, framingRange, nextDayThreshold) {
+        var inverseBgByGroupId = {};
+        var inverseBgByDefId = {};
+        var defByGroupId = {};
+        var bgRanges = [];
+        var fgRanges = [];
+        var eventUis = compileEventUis(eventStore.defs, eventUiBases);
+        for (var defId in eventStore.defs) {
+            var def = eventStore.defs[defId];
+            var ui = eventUis[def.defId];
+            if (ui.display === 'inverse-background') {
+                if (def.groupId) {
+                    inverseBgByGroupId[def.groupId] = [];
+                    if (!defByGroupId[def.groupId]) {
+                        defByGroupId[def.groupId] = def;
+                    }
+                }
+                else {
+                    inverseBgByDefId[defId] = [];
+                }
+            }
+        }
+        for (var instanceId in eventStore.instances) {
+            var instance = eventStore.instances[instanceId];
+            var def = eventStore.defs[instance.defId];
+            var ui = eventUis[def.defId];
+            var origRange = instance.range;
+            var normalRange = (!def.allDay && nextDayThreshold) ?
+                computeVisibleDayRange(origRange, nextDayThreshold) :
+                origRange;
+            var slicedRange = intersectRanges(normalRange, framingRange);
+            if (slicedRange) {
+                if (ui.display === 'inverse-background') {
+                    if (def.groupId) {
+                        inverseBgByGroupId[def.groupId].push(slicedRange);
+                    }
+                    else {
+                        inverseBgByDefId[instance.defId].push(slicedRange);
+                    }
+                }
+                else if (ui.display !== 'none') {
+                    (ui.display === 'background' ? bgRanges : fgRanges).push({
+                        def: def,
+                        ui: ui,
+                        instance: instance,
+                        range: slicedRange,
+                        isStart: normalRange.start && normalRange.start.valueOf() === slicedRange.start.valueOf(),
+                        isEnd: normalRange.end && normalRange.end.valueOf() === slicedRange.end.valueOf(),
+                    });
+                }
+            }
+        }
+        for (var groupId in inverseBgByGroupId) { // BY GROUP
+            var ranges = inverseBgByGroupId[groupId];
+            var invertedRanges = invertRanges(ranges, framingRange);
+            for (var _i = 0, invertedRanges_1 = invertedRanges; _i < invertedRanges_1.length; _i++) {
+                var invertedRange = invertedRanges_1[_i];
+                var def = defByGroupId[groupId];
+                var ui = eventUis[def.defId];
+                bgRanges.push({
+                    def: def,
+                    ui: ui,
+                    instance: null,
+                    range: invertedRange,
+                    isStart: false,
+                    isEnd: false,
+                });
+            }
+        }
+        for (var defId in inverseBgByDefId) {
+            var ranges = inverseBgByDefId[defId];
+            var invertedRanges = invertRanges(ranges, framingRange);
+            for (var _a = 0, invertedRanges_2 = invertedRanges; _a < invertedRanges_2.length; _a++) {
+                var invertedRange = invertedRanges_2[_a];
+                bgRanges.push({
+                    def: eventStore.defs[defId],
+                    ui: eventUis[defId],
+                    instance: null,
+                    range: invertedRange,
+                    isStart: false,
+                    isEnd: false,
+                });
+            }
+        }
+        return { bg: bgRanges, fg: fgRanges };
+    }
+    function hasBgRendering(def) {
+        return def.ui.display === 'background' || def.ui.display === 'inverse-background';
+    }
+    function setElSeg(el, seg) {
+        el.fcSeg = seg;
+    }
+    function getElSeg(el) {
+        return el.fcSeg ||
+            el.parentNode.fcSeg || // for the harness
+            null;
+    }
+    // event ui computation
+    function compileEventUis(eventDefs, eventUiBases) {
+        return mapHash(eventDefs, function (eventDef) { return compileEventUi(eventDef, eventUiBases); });
+    }
+    function compileEventUi(eventDef, eventUiBases) {
+        var uis = [];
+        if (eventUiBases['']) {
+            uis.push(eventUiBases['']);
+        }
+        if (eventUiBases[eventDef.defId]) {
+            uis.push(eventUiBases[eventDef.defId]);
+        }
+        uis.push(eventDef.ui);
+        return combineEventUis(uis);
+    }
+    function sortEventSegs(segs, eventOrderSpecs) {
+        var objs = segs.map(buildSegCompareObj);
+        objs.sort(function (obj0, obj1) { return compareByFieldSpecs(obj0, obj1, eventOrderSpecs); });
+        return objs.map(function (c) { return c._seg; });
+    }
+    // returns a object with all primitive props that can be compared
+    function buildSegCompareObj(seg) {
+        var eventRange = seg.eventRange;
+        var eventDef = eventRange.def;
+        var range = eventRange.instance ? eventRange.instance.range : eventRange.range;
+        var start = range.start ? range.start.valueOf() : 0; // TODO: better support for open-range events
+        var end = range.end ? range.end.valueOf() : 0; // "
+        return __assign(__assign(__assign({}, eventDef.extendedProps), eventDef), { id: eventDef.publicId, start: start,
+            end: end, duration: end - start, allDay: Number(eventDef.allDay), _seg: seg });
+    }
+    function computeSegDraggable(seg, context) {
+        var pluginHooks = context.pluginHooks;
+        var transformers = pluginHooks.isDraggableTransformers;
+        var _a = seg.eventRange, def = _a.def, ui = _a.ui;
+        var val = ui.startEditable;
+        for (var _i = 0, transformers_1 = transformers; _i < transformers_1.length; _i++) {
+            var transformer = transformers_1[_i];
+            val = transformer(val, def, ui, context);
+        }
+        return val;
+    }
+    function computeSegStartResizable(seg, context) {
+        return seg.isStart && seg.eventRange.ui.durationEditable && context.options.eventResizableFromStart;
+    }
+    function computeSegEndResizable(seg, context) {
+        return seg.isEnd && seg.eventRange.ui.durationEditable;
+    }
+    function buildSegTimeText(seg, timeFormat, context, defaultDisplayEventTime, // defaults to true
+    defaultDisplayEventEnd, // defaults to true
+    startOverride, endOverride) {
+        var dateEnv = context.dateEnv, options = context.options;
+        var displayEventTime = options.displayEventTime, displayEventEnd = options.displayEventEnd;
+        var eventDef = seg.eventRange.def;
+        var eventInstance = seg.eventRange.instance;
+        if (displayEventTime == null) {
+            displayEventTime = defaultDisplayEventTime !== false;
+        }
+        if (displayEventEnd == null) {
+            displayEventEnd = defaultDisplayEventEnd !== false;
+        }
+        var wholeEventStart = eventInstance.range.start;
+        var wholeEventEnd = eventInstance.range.end;
+        var segStart = startOverride || seg.start || seg.eventRange.range.start;
+        var segEnd = endOverride || seg.end || seg.eventRange.range.end;
+        var isStartDay = startOfDay(wholeEventStart).valueOf() === startOfDay(segStart).valueOf();
+        var isEndDay = startOfDay(addMs(wholeEventEnd, -1)).valueOf() === startOfDay(addMs(segEnd, -1)).valueOf();
+        if (displayEventTime && !eventDef.allDay && (isStartDay || isEndDay)) {
+            segStart = isStartDay ? wholeEventStart : segStart;
+            segEnd = isEndDay ? wholeEventEnd : segEnd;
+            if (displayEventEnd && eventDef.hasEnd) {
+                return dateEnv.formatRange(segStart, segEnd, timeFormat, {
+                    forcedStartTzo: startOverride ? null : eventInstance.forcedStartTzo,
+                    forcedEndTzo: endOverride ? null : eventInstance.forcedEndTzo,
+                });
+            }
+            return dateEnv.format(segStart, timeFormat, {
+                forcedTzo: startOverride ? null : eventInstance.forcedStartTzo, // nooooo, same
+            });
+        }
+        return '';
+    }
+    function getSegMeta(seg, todayRange, nowDate) {
+        var segRange = seg.eventRange.range;
+        return {
+            isPast: segRange.end < (nowDate || todayRange.start),
+            isFuture: segRange.start >= (nowDate || todayRange.end),
+            isToday: todayRange && rangeContainsMarker(todayRange, segRange.start),
+        };
+    }
+    function getEventClassNames(props) {
+        var classNames = ['fc-event'];
+        if (props.isMirror) {
+            classNames.push('fc-event-mirror');
+        }
+        if (props.isDraggable) {
+            classNames.push('fc-event-draggable');
+        }
+        if (props.isStartResizable || props.isEndResizable) {
+            classNames.push('fc-event-resizable');
+        }
+        if (props.isDragging) {
+            classNames.push('fc-event-dragging');
+        }
+        if (props.isResizing) {
+            classNames.push('fc-event-resizing');
+        }
+        if (props.isSelected) {
+            classNames.push('fc-event-selected');
+        }
+        if (props.isStart) {
+            classNames.push('fc-event-start');
+        }
+        if (props.isEnd) {
+            classNames.push('fc-event-end');
+        }
+        if (props.isPast) {
+            classNames.push('fc-event-past');
+        }
+        if (props.isToday) {
+            classNames.push('fc-event-today');
+        }
+        if (props.isFuture) {
+            classNames.push('fc-event-future');
+        }
+        return classNames;
+    }
+    function buildEventRangeKey(eventRange) {
+        return eventRange.instance
+            ? eventRange.instance.instanceId
+            : eventRange.def.defId + ":" + eventRange.range.start.toISOString();
+        // inverse-background events don't have specific instances. TODO: better solution
+    }
+
+    var STANDARD_PROPS = {
+        start: identity,
+        end: identity,
+        allDay: Boolean,
+    };
+    function parseDateSpan(raw, dateEnv, defaultDuration) {
+        var span = parseOpenDateSpan(raw, dateEnv);
+        var range = span.range;
+        if (!range.start) {
+            return null;
+        }
+        if (!range.end) {
+            if (defaultDuration == null) {
+                return null;
+            }
+            range.end = dateEnv.add(range.start, defaultDuration);
+        }
+        return span;
+    }
+    /*
+    TODO: somehow combine with parseRange?
+    Will return null if the start/end props were present but parsed invalidly.
+    */
+    function parseOpenDateSpan(raw, dateEnv) {
+        var _a = refineProps(raw, STANDARD_PROPS), standardProps = _a.refined, extra = _a.extra;
+        var startMeta = standardProps.start ? dateEnv.createMarkerMeta(standardProps.start) : null;
+        var endMeta = standardProps.end ? dateEnv.createMarkerMeta(standardProps.end) : null;
+        var allDay = standardProps.allDay;
+        if (allDay == null) {
+            allDay = (startMeta && startMeta.isTimeUnspecified) &&
+                (!endMeta || endMeta.isTimeUnspecified);
+        }
+        return __assign({ range: {
+                start: startMeta ? startMeta.marker : null,
+                end: endMeta ? endMeta.marker : null,
+            }, allDay: allDay }, extra);
+    }
+    function isDateSpansEqual(span0, span1) {
+        return rangesEqual(span0.range, span1.range) &&
+            span0.allDay === span1.allDay &&
+            isSpanPropsEqual(span0, span1);
+    }
+    // the NON-DATE-RELATED props
+    function isSpanPropsEqual(span0, span1) {
+        for (var propName in span1) {
+            if (propName !== 'range' && propName !== 'allDay') {
+                if (span0[propName] !== span1[propName]) {
+                    return false;
+                }
+            }
+        }
+        // are there any props that span0 has that span1 DOESN'T have?
+        // both have range/allDay, so no need to special-case.
+        for (var propName in span0) {
+            if (!(propName in span1)) {
+                return false;
+            }
+        }
+        return true;
+    }
+    function buildDateSpanApi(span, dateEnv) {
+        return __assign(__assign({}, buildRangeApi(span.range, dateEnv, span.allDay)), { allDay: span.allDay });
+    }
+    function buildRangeApiWithTimeZone(range, dateEnv, omitTime) {
+        return __assign(__assign({}, buildRangeApi(range, dateEnv, omitTime)), { timeZone: dateEnv.timeZone });
+    }
+    function buildRangeApi(range, dateEnv, omitTime) {
+        return {
+            start: dateEnv.toDate(range.start),
+            end: dateEnv.toDate(range.end),
+            startStr: dateEnv.formatIso(range.start, { omitTime: omitTime }),
+            endStr: dateEnv.formatIso(range.end, { omitTime: omitTime }),
+        };
+    }
+    function fabricateEventRange(dateSpan, eventUiBases, context) {
+        var res = refineEventDef({ editable: false }, context);
+        var def = parseEventDef(res.refined, res.extra, '', // sourceId
+        dateSpan.allDay, true, // hasEnd
+        context);
+        return {
+            def: def,
+            ui: compileEventUi(def, eventUiBases),
+            instance: createEventInstance(def.defId, dateSpan.range),
+            range: dateSpan.range,
+            isStart: true,
+            isEnd: true,
+        };
+    }
+
+    function triggerDateSelect(selection, pev, context) {
+        context.emitter.trigger('select', __assign(__assign({}, buildDateSpanApiWithContext(selection, context)), { jsEvent: pev ? pev.origEvent : null, view: context.viewApi || context.calendarApi.view }));
+    }
+    function triggerDateUnselect(pev, context) {
+        context.emitter.trigger('unselect', {
+            jsEvent: pev ? pev.origEvent : null,
+            view: context.viewApi || context.calendarApi.view,
+        });
+    }
+    function buildDateSpanApiWithContext(dateSpan, context) {
+        var props = {};
+        for (var _i = 0, _a = context.pluginHooks.dateSpanTransforms; _i < _a.length; _i++) {
+            var transform = _a[_i];
+            __assign(props, transform(dateSpan, context));
+        }
+        __assign(props, buildDateSpanApi(dateSpan, context.dateEnv));
+        return props;
+    }
+    // Given an event's allDay status and start date, return what its fallback end date should be.
+    // TODO: rename to computeDefaultEventEnd
+    function getDefaultEventEnd(allDay, marker, context) {
+        var dateEnv = context.dateEnv, options = context.options;
+        var end = marker;
+        if (allDay) {
+            end = startOfDay(end);
+            end = dateEnv.add(end, options.defaultAllDayEventDuration);
+        }
+        else {
+            end = dateEnv.add(end, options.defaultTimedEventDuration);
+        }
+        return end;
+    }
+
+    // applies the mutation to ALL defs/instances within the event store
+    function applyMutationToEventStore(eventStore, eventConfigBase, mutation, context) {
+        var eventConfigs = compileEventUis(eventStore.defs, eventConfigBase);
+        var dest = createEmptyEventStore();
+        for (var defId in eventStore.defs) {
+            var def = eventStore.defs[defId];
+            dest.defs[defId] = applyMutationToEventDef(def, eventConfigs[defId], mutation, context);
+        }
+        for (var instanceId in eventStore.instances) {
+            var instance = eventStore.instances[instanceId];
+            var def = dest.defs[instance.defId]; // important to grab the newly modified def
+            dest.instances[instanceId] = applyMutationToEventInstance(instance, def, eventConfigs[instance.defId], mutation, context);
+        }
+        return dest;
+    }
+    function applyMutationToEventDef(eventDef, eventConfig, mutation, context) {
+        var standardProps = mutation.standardProps || {};
+        // if hasEnd has not been specified, guess a good value based on deltas.
+        // if duration will change, there's no way the default duration will persist,
+        // and thus, we need to mark the event as having a real end
+        if (standardProps.hasEnd == null &&
+            eventConfig.durationEditable &&
+            (mutation.startDelta || mutation.endDelta)) {
+            standardProps.hasEnd = true; // TODO: is this mutation okay?
+        }
+        var copy = __assign(__assign(__assign({}, eventDef), standardProps), { ui: __assign(__assign({}, eventDef.ui), standardProps.ui) });
+        if (mutation.extendedProps) {
+            copy.extendedProps = __assign(__assign({}, copy.extendedProps), mutation.extendedProps);
+        }
+        for (var _i = 0, _a = context.pluginHooks.eventDefMutationAppliers; _i < _a.length; _i++) {
+            var applier = _a[_i];
+            applier(copy, mutation, context);
+        }
+        if (!copy.hasEnd && context.options.forceEventDuration) {
+            copy.hasEnd = true;
+        }
+        return copy;
+    }
+    function applyMutationToEventInstance(eventInstance, eventDef, // must first be modified by applyMutationToEventDef
+    eventConfig, mutation, context) {
+        var dateEnv = context.dateEnv;
+        var forceAllDay = mutation.standardProps && mutation.standardProps.allDay === true;
+        var clearEnd = mutation.standardProps && mutation.standardProps.hasEnd === false;
+        var copy = __assign({}, eventInstance);
+        if (forceAllDay) {
+            copy.range = computeAlignedDayRange(copy.range);
+        }
+        if (mutation.datesDelta && eventConfig.startEditable) {
+            copy.range = {
+                start: dateEnv.add(copy.range.start, mutation.datesDelta),
+                end: dateEnv.add(copy.range.end, mutation.datesDelta),
+            };
+        }
+        if (mutation.startDelta && eventConfig.durationEditable) {
+            copy.range = {
+                start: dateEnv.add(copy.range.start, mutation.startDelta),
+                end: copy.range.end,
+            };
+        }
+        if (mutation.endDelta && eventConfig.durationEditable) {
+            copy.range = {
+                start: copy.range.start,
+                end: dateEnv.add(copy.range.end, mutation.endDelta),
+            };
+        }
+        if (clearEnd) {
+            copy.range = {
+                start: copy.range.start,
+                end: getDefaultEventEnd(eventDef.allDay, copy.range.start, context),
+            };
+        }
+        // in case event was all-day but the supplied deltas were not
+        // better util for this?
+        if (eventDef.allDay) {
+            copy.range = {
+                start: startOfDay(copy.range.start),
+                end: startOfDay(copy.range.end),
+            };
+        }
+        // handle invalid durations
+        if (copy.range.end < copy.range.start) {
+            copy.range.end = getDefaultEventEnd(eventDef.allDay, copy.range.start, context);
+        }
+        return copy;
+    }
+
+    // no public types yet. when there are, export from:
+    // import {} from './api-type-deps'
+    var ViewApi = /** @class */ (function () {
+        function ViewApi(type, getCurrentData, dateEnv) {
+            this.type = type;
+            this.getCurrentData = getCurrentData;
+            this.dateEnv = dateEnv;
+        }
+        Object.defineProperty(ViewApi.prototype, "calendar", {
+            get: function () {
+                return this.getCurrentData().calendarApi;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(ViewApi.prototype, "title", {
+            get: function () {
+                return this.getCurrentData().viewTitle;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(ViewApi.prototype, "activeStart", {
+            get: function () {
+                return this.dateEnv.toDate(this.getCurrentData().dateProfile.activeRange.start);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(ViewApi.prototype, "activeEnd", {
+            get: function () {
+                return this.dateEnv.toDate(this.getCurrentData().dateProfile.activeRange.end);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(ViewApi.prototype, "currentStart", {
+            get: function () {
+                return this.dateEnv.toDate(this.getCurrentData().dateProfile.currentRange.start);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(ViewApi.prototype, "currentEnd", {
+            get: function () {
+                return this.dateEnv.toDate(this.getCurrentData().dateProfile.currentRange.end);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        ViewApi.prototype.getOption = function (name) {
+            return this.getCurrentData().options[name]; // are the view-specific options
+        };
+        return ViewApi;
+    }());
+
+    var EVENT_SOURCE_REFINERS$1 = {
+        id: String,
+        defaultAllDay: Boolean,
+        url: String,
+        format: String,
+        events: identity,
+        eventDataTransform: identity,
+        // for any network-related sources
+        success: identity,
+        failure: identity,
+    };
+    function parseEventSource(raw, context, refiners) {
+        if (refiners === void 0) { refiners = buildEventSourceRefiners(context); }
+        var rawObj;
+        if (typeof raw === 'string') {
+            rawObj = { url: raw };
+        }
+        else if (typeof raw === 'function' || Array.isArray(raw)) {
+            rawObj = { events: raw };
+        }
+        else if (typeof raw === 'object' && raw) { // not null
+            rawObj = raw;
+        }
+        if (rawObj) {
+            var _a = refineProps(rawObj, refiners), refined = _a.refined, extra = _a.extra;
+            var metaRes = buildEventSourceMeta(refined, context);
+            if (metaRes) {
+                return {
+                    _raw: raw,
+                    isFetching: false,
+                    latestFetchId: '',
+                    fetchRange: null,
+                    defaultAllDay: refined.defaultAllDay,
+                    eventDataTransform: refined.eventDataTransform,
+                    success: refined.success,
+                    failure: refined.failure,
+                    publicId: refined.id || '',
+                    sourceId: guid(),
+                    sourceDefId: metaRes.sourceDefId,
+                    meta: metaRes.meta,
+                    ui: createEventUi(refined, context),
+                    extendedProps: extra,
+                };
+            }
+        }
+        return null;
+    }
+    function buildEventSourceRefiners(context) {
+        return __assign(__assign(__assign({}, EVENT_UI_REFINERS), EVENT_SOURCE_REFINERS$1), context.pluginHooks.eventSourceRefiners);
+    }
+    function buildEventSourceMeta(raw, context) {
+        var defs = context.pluginHooks.eventSourceDefs;
+        for (var i = defs.length - 1; i >= 0; i -= 1) { // later-added plugins take precedence
+            var def = defs[i];
+            var meta = def.parseMeta(raw);
+            if (meta) {
+                return { sourceDefId: i, meta: meta };
+            }
+        }
+        return null;
+    }
+
+    function reduceCurrentDate(currentDate, action) {
+        switch (action.type) {
+            case 'CHANGE_DATE':
+                return action.dateMarker;
+            default:
+                return currentDate;
+        }
+    }
+    function getInitialDate(options, dateEnv) {
+        var initialDateInput = options.initialDate;
+        // compute the initial ambig-timezone date
+        if (initialDateInput != null) {
+            return dateEnv.createMarker(initialDateInput);
+        }
+        return getNow(options.now, dateEnv); // getNow already returns unzoned
+    }
+    function getNow(nowInput, dateEnv) {
+        if (typeof nowInput === 'function') {
+            nowInput = nowInput();
+        }
+        if (nowInput == null) {
+            return dateEnv.createNowMarker();
+        }
+        return dateEnv.createMarker(nowInput);
+    }
+
+    var CalendarApi = /** @class */ (function () {
+        function CalendarApi() {
+        }
+        CalendarApi.prototype.getCurrentData = function () {
+            return this.currentDataManager.getCurrentData();
+        };
+        CalendarApi.prototype.dispatch = function (action) {
+            return this.currentDataManager.dispatch(action);
+        };
+        Object.defineProperty(CalendarApi.prototype, "view", {
+            get: function () { return this.getCurrentData().viewApi; } // for public API
+            ,
+            enumerable: false,
+            configurable: true
+        });
+        CalendarApi.prototype.batchRendering = function (callback) {
+            callback();
+        };
+        CalendarApi.prototype.updateSize = function () {
+            this.trigger('_resize', true);
+        };
+        // Options
+        // -----------------------------------------------------------------------------------------------------------------
+        CalendarApi.prototype.setOption = function (name, val) {
+            this.dispatch({
+                type: 'SET_OPTION',
+                optionName: name,
+                rawOptionValue: val,
+            });
+        };
+        CalendarApi.prototype.getOption = function (name) {
+            return this.currentDataManager.currentCalendarOptionsInput[name];
+        };
+        CalendarApi.prototype.getAvailableLocaleCodes = function () {
+            return Object.keys(this.getCurrentData().availableRawLocales);
+        };
+        // Trigger
+        // -----------------------------------------------------------------------------------------------------------------
+        CalendarApi.prototype.on = function (handlerName, handler) {
+            var currentDataManager = this.currentDataManager;
+            if (currentDataManager.currentCalendarOptionsRefiners[handlerName]) {
+                currentDataManager.emitter.on(handlerName, handler);
+            }
+            else {
+                console.warn("Unknown listener name '" + handlerName + "'");
+            }
+        };
+        CalendarApi.prototype.off = function (handlerName, handler) {
+            this.currentDataManager.emitter.off(handlerName, handler);
+        };
+        // not meant for public use
+        CalendarApi.prototype.trigger = function (handlerName) {
+            var _a;
+            var args = [];
+            for (var _i = 1; _i < arguments.length; _i++) {
+                args[_i - 1] = arguments[_i];
+            }
+            (_a = this.currentDataManager.emitter).trigger.apply(_a, __spreadArray([handlerName], args));
+        };
+        // View
+        // -----------------------------------------------------------------------------------------------------------------
+        CalendarApi.prototype.changeView = function (viewType, dateOrRange) {
+            var _this = this;
+            this.batchRendering(function () {
+                _this.unselect();
+                if (dateOrRange) {
+                    if (dateOrRange.start && dateOrRange.end) { // a range
+                        _this.dispatch({
+                            type: 'CHANGE_VIEW_TYPE',
+                            viewType: viewType,
+                        });
+                        _this.dispatch({
+                            type: 'SET_OPTION',
+                            optionName: 'visibleRange',
+                            rawOptionValue: dateOrRange,
+                        });
+                    }
+                    else {
+                        var dateEnv = _this.getCurrentData().dateEnv;
+                        _this.dispatch({
+                            type: 'CHANGE_VIEW_TYPE',
+                            viewType: viewType,
+                            dateMarker: dateEnv.createMarker(dateOrRange),
+                        });
+                    }
+                }
+                else {
+                    _this.dispatch({
+                        type: 'CHANGE_VIEW_TYPE',
+                        viewType: viewType,
+                    });
+                }
+            });
+        };
+        // Forces navigation to a view for the given date.
+        // `viewType` can be a specific view name or a generic one like "week" or "day".
+        // needs to change
+        CalendarApi.prototype.zoomTo = function (dateMarker, viewType) {
+            var state = this.getCurrentData();
+            var spec;
+            viewType = viewType || 'day'; // day is default zoom
+            spec = state.viewSpecs[viewType] || this.getUnitViewSpec(viewType);
+            this.unselect();
+            if (spec) {
+                this.dispatch({
+                    type: 'CHANGE_VIEW_TYPE',
+                    viewType: spec.type,
+                    dateMarker: dateMarker,
+                });
+            }
+            else {
+                this.dispatch({
+                    type: 'CHANGE_DATE',
+                    dateMarker: dateMarker,
+                });
+            }
+        };
+        // Given a duration singular unit, like "week" or "day", finds a matching view spec.
+        // Preference is given to views that have corresponding buttons.
+        CalendarApi.prototype.getUnitViewSpec = function (unit) {
+            var _a = this.getCurrentData(), viewSpecs = _a.viewSpecs, toolbarConfig = _a.toolbarConfig;
+            var viewTypes = [].concat(toolbarConfig.viewsWithButtons);
+            var i;
+            var spec;
+            for (var viewType in viewSpecs) {
+                viewTypes.push(viewType);
+            }
+            for (i = 0; i < viewTypes.length; i += 1) {
+                spec = viewSpecs[viewTypes[i]];
+                if (spec) {
+                    if (spec.singleUnit === unit) {
+                        return spec;
+                    }
+                }
+            }
+            return null;
+        };
+        // Current Date
+        // -----------------------------------------------------------------------------------------------------------------
+        CalendarApi.prototype.prev = function () {
+            this.unselect();
+            this.dispatch({ type: 'PREV' });
+        };
+        CalendarApi.prototype.next = function () {
+            this.unselect();
+            this.dispatch({ type: 'NEXT' });
+        };
+        CalendarApi.prototype.prevYear = function () {
+            var state = this.getCurrentData();
+            this.unselect();
+            this.dispatch({
+                type: 'CHANGE_DATE',
+                dateMarker: state.dateEnv.addYears(state.currentDate, -1),
+            });
+        };
+        CalendarApi.prototype.nextYear = function () {
+            var state = this.getCurrentData();
+            this.unselect();
+            this.dispatch({
+                type: 'CHANGE_DATE',
+                dateMarker: state.dateEnv.addYears(state.currentDate, 1),
+            });
+        };
+        CalendarApi.prototype.today = function () {
+            var state = this.getCurrentData();
+            this.unselect();
+            this.dispatch({
+                type: 'CHANGE_DATE',
+                dateMarker: getNow(state.calendarOptions.now, state.dateEnv),
+            });
+        };
+        CalendarApi.prototype.gotoDate = function (zonedDateInput) {
+            var state = this.getCurrentData();
+            this.unselect();
+            this.dispatch({
+                type: 'CHANGE_DATE',
+                dateMarker: state.dateEnv.createMarker(zonedDateInput),
+            });
+        };
+        CalendarApi.prototype.incrementDate = function (deltaInput) {
+            var state = this.getCurrentData();
+            var delta = createDuration(deltaInput);
+            if (delta) { // else, warn about invalid input?
+                this.unselect();
+                this.dispatch({
+                    type: 'CHANGE_DATE',
+                    dateMarker: state.dateEnv.add(state.currentDate, delta),
+                });
+            }
+        };
+        // for external API
+        CalendarApi.prototype.getDate = function () {
+            var state = this.getCurrentData();
+            return state.dateEnv.toDate(state.currentDate);
+        };
+        // Date Formatting Utils
+        // -----------------------------------------------------------------------------------------------------------------
+        CalendarApi.prototype.formatDate = function (d, formatter) {
+            var dateEnv = this.getCurrentData().dateEnv;
+            return dateEnv.format(dateEnv.createMarker(d), createFormatter(formatter));
+        };
+        // `settings` is for formatter AND isEndExclusive
+        CalendarApi.prototype.formatRange = function (d0, d1, settings) {
+            var dateEnv = this.getCurrentData().dateEnv;
+            return dateEnv.formatRange(dateEnv.createMarker(d0), dateEnv.createMarker(d1), createFormatter(settings), settings);
+        };
+        CalendarApi.prototype.formatIso = function (d, omitTime) {
+            var dateEnv = this.getCurrentData().dateEnv;
+            return dateEnv.formatIso(dateEnv.createMarker(d), { omitTime: omitTime });
+        };
+        // Date Selection / Event Selection / DayClick
+        // -----------------------------------------------------------------------------------------------------------------
+        // this public method receives start/end dates in any format, with any timezone
+        // NOTE: args were changed from v3
+        CalendarApi.prototype.select = function (dateOrObj, endDate) {
+            var selectionInput;
+            if (endDate == null) {
+                if (dateOrObj.start != null) {
+                    selectionInput = dateOrObj;
+                }
+                else {
+                    selectionInput = {
+                        start: dateOrObj,
+                        end: null,
+                    };
+                }
+            }
+            else {
+                selectionInput = {
+                    start: dateOrObj,
+                    end: endDate,
+                };
+            }
+            var state = this.getCurrentData();
+            var selection = parseDateSpan(selectionInput, state.dateEnv, createDuration({ days: 1 }));
+            if (selection) { // throw parse error otherwise?
+                this.dispatch({ type: 'SELECT_DATES', selection: selection });
+                triggerDateSelect(selection, null, state);
+            }
+        };
+        // public method
+        CalendarApi.prototype.unselect = function (pev) {
+            var state = this.getCurrentData();
+            if (state.dateSelection) {
+                this.dispatch({ type: 'UNSELECT_DATES' });
+                triggerDateUnselect(pev, state);
+            }
+        };
+        // Public Events API
+        // -----------------------------------------------------------------------------------------------------------------
+        CalendarApi.prototype.addEvent = function (eventInput, sourceInput) {
+            if (eventInput instanceof EventApi) {
+                var def = eventInput._def;
+                var instance = eventInput._instance;
+                var currentData = this.getCurrentData();
+                // not already present? don't want to add an old snapshot
+                if (!currentData.eventStore.defs[def.defId]) {
+                    this.dispatch({
+                        type: 'ADD_EVENTS',
+                        eventStore: eventTupleToStore({ def: def, instance: instance }), // TODO: better util for two args?
+                    });
+                    this.triggerEventAdd(eventInput);
+                }
+                return eventInput;
+            }
+            var state = this.getCurrentData();
+            var eventSource;
+            if (sourceInput instanceof EventSourceApi) {
+                eventSource = sourceInput.internalEventSource;
+            }
+            else if (typeof sourceInput === 'boolean') {
+                if (sourceInput) { // true. part of the first event source
+                    eventSource = hashValuesToArray(state.eventSources)[0];
+                }
+            }
+            else if (sourceInput != null) { // an ID. accepts a number too
+                var sourceApi = this.getEventSourceById(sourceInput); // TODO: use an internal function
+                if (!sourceApi) {
+                    console.warn("Could not find an event source with ID \"" + sourceInput + "\""); // TODO: test
+                    return null;
+                }
+                eventSource = sourceApi.internalEventSource;
+            }
+            var tuple = parseEvent(eventInput, eventSource, state, false);
+            if (tuple) {
+                var newEventApi = new EventApi(state, tuple.def, tuple.def.recurringDef ? null : tuple.instance);
+                this.dispatch({
+                    type: 'ADD_EVENTS',
+                    eventStore: eventTupleToStore(tuple),
+                });
+                this.triggerEventAdd(newEventApi);
+                return newEventApi;
+            }
+            return null;
+        };
+        CalendarApi.prototype.triggerEventAdd = function (eventApi) {
+            var _this = this;
+            var emitter = this.getCurrentData().emitter;
+            emitter.trigger('eventAdd', {
+                event: eventApi,
+                relatedEvents: [],
+                revert: function () {
+                    _this.dispatch({
+                        type: 'REMOVE_EVENTS',
+                        eventStore: eventApiToStore(eventApi),
+                    });
+                },
+            });
+        };
+        // TODO: optimize
+        CalendarApi.prototype.getEventById = function (id) {
+            var state = this.getCurrentData();
+            var _a = state.eventStore, defs = _a.defs, instances = _a.instances;
+            id = String(id);
+            for (var defId in defs) {
+                var def = defs[defId];
+                if (def.publicId === id) {
+                    if (def.recurringDef) {
+                        return new EventApi(state, def, null);
+                    }
+                    for (var instanceId in instances) {
+                        var instance = instances[instanceId];
+                        if (instance.defId === def.defId) {
+                            return new EventApi(state, def, instance);
+                        }
+                    }
+                }
+            }
+            return null;
+        };
+        CalendarApi.prototype.getEvents = function () {
+            var currentData = this.getCurrentData();
+            return buildEventApis(currentData.eventStore, currentData);
+        };
+        CalendarApi.prototype.removeAllEvents = function () {
+            this.dispatch({ type: 'REMOVE_ALL_EVENTS' });
+        };
+        // Public Event Sources API
+        // -----------------------------------------------------------------------------------------------------------------
+        CalendarApi.prototype.getEventSources = function () {
+            var state = this.getCurrentData();
+            var sourceHash = state.eventSources;
+            var sourceApis = [];
+            for (var internalId in sourceHash) {
+                sourceApis.push(new EventSourceApi(state, sourceHash[internalId]));
+            }
+            return sourceApis;
+        };
+        CalendarApi.prototype.getEventSourceById = function (id) {
+            var state = this.getCurrentData();
+            var sourceHash = state.eventSources;
+            id = String(id);
+            for (var sourceId in sourceHash) {
+                if (sourceHash[sourceId].publicId === id) {
+                    return new EventSourceApi(state, sourceHash[sourceId]);
+                }
+            }
+            return null;
+        };
+        CalendarApi.prototype.addEventSource = function (sourceInput) {
+            var state = this.getCurrentData();
+            if (sourceInput instanceof EventSourceApi) {
+                // not already present? don't want to add an old snapshot
+                if (!state.eventSources[sourceInput.internalEventSource.sourceId]) {
+                    this.dispatch({
+                        type: 'ADD_EVENT_SOURCES',
+                        sources: [sourceInput.internalEventSource],
+                    });
+                }
+                return sourceInput;
+            }
+            var eventSource = parseEventSource(sourceInput, state);
+            if (eventSource) { // TODO: error otherwise?
+                this.dispatch({ type: 'ADD_EVENT_SOURCES', sources: [eventSource] });
+                return new EventSourceApi(state, eventSource);
+            }
+            return null;
+        };
+        CalendarApi.prototype.removeAllEventSources = function () {
+            this.dispatch({ type: 'REMOVE_ALL_EVENT_SOURCES' });
+        };
+        CalendarApi.prototype.refetchEvents = function () {
+            this.dispatch({ type: 'FETCH_EVENT_SOURCES', isRefetch: true });
+        };
+        // Scroll
+        // -----------------------------------------------------------------------------------------------------------------
+        CalendarApi.prototype.scrollToTime = function (timeInput) {
+            var time = createDuration(timeInput);
+            if (time) {
+                this.trigger('_scrollRequest', { time: time });
+            }
+        };
+        return CalendarApi;
+    }());
+
+    var EventApi = /** @class */ (function () {
+        // instance will be null if expressing a recurring event that has no current instances,
+        // OR if trying to validate an incoming external event that has no dates assigned
+        function EventApi(context, def, instance) {
+            this._context = context;
+            this._def = def;
+            this._instance = instance || null;
+        }
+        /*
+        TODO: make event struct more responsible for this
+        */
+        EventApi.prototype.setProp = function (name, val) {
+            var _a, _b;
+            if (name in EVENT_DATE_REFINERS) {
+                console.warn('Could not set date-related prop \'name\'. Use one of the date-related methods instead.');
+                // TODO: make proper aliasing system?
+            }
+            else if (name === 'id') {
+                val = EVENT_NON_DATE_REFINERS[name](val);
+                this.mutate({
+                    standardProps: { publicId: val }, // hardcoded internal name
+                });
+            }
+            else if (name in EVENT_NON_DATE_REFINERS) {
+                val = EVENT_NON_DATE_REFINERS[name](val);
+                this.mutate({
+                    standardProps: (_a = {}, _a[name] = val, _a),
+                });
+            }
+            else if (name in EVENT_UI_REFINERS) {
+                var ui = EVENT_UI_REFINERS[name](val);
+                if (name === 'color') {
+                    ui = { backgroundColor: val, borderColor: val };
+                }
+                else if (name === 'editable') {
+                    ui = { startEditable: val, durationEditable: val };
+                }
+                else {
+                    ui = (_b = {}, _b[name] = val, _b);
+                }
+                this.mutate({
+                    standardProps: { ui: ui },
+                });
+            }
+            else {
+                console.warn("Could not set prop '" + name + "'. Use setExtendedProp instead.");
+            }
+        };
+        EventApi.prototype.setExtendedProp = function (name, val) {
+            var _a;
+            this.mutate({
+                extendedProps: (_a = {}, _a[name] = val, _a),
+            });
+        };
+        EventApi.prototype.setStart = function (startInput, options) {
+            if (options === void 0) { options = {}; }
+            var dateEnv = this._context.dateEnv;
+            var start = dateEnv.createMarker(startInput);
+            if (start && this._instance) { // TODO: warning if parsed bad
+                var instanceRange = this._instance.range;
+                var startDelta = diffDates(instanceRange.start, start, dateEnv, options.granularity); // what if parsed bad!?
+                if (options.maintainDuration) {
+                    this.mutate({ datesDelta: startDelta });
+                }
+                else {
+                    this.mutate({ startDelta: startDelta });
+                }
+            }
+        };
+        EventApi.prototype.setEnd = function (endInput, options) {
+            if (options === void 0) { options = {}; }
+            var dateEnv = this._context.dateEnv;
+            var end;
+            if (endInput != null) {
+                end = dateEnv.createMarker(endInput);
+                if (!end) {
+                    return; // TODO: warning if parsed bad
+                }
+            }
+            if (this._instance) {
+                if (end) {
+                    var endDelta = diffDates(this._instance.range.end, end, dateEnv, options.granularity);
+                    this.mutate({ endDelta: endDelta });
+                }
+                else {
+                    this.mutate({ standardProps: { hasEnd: false } });
+                }
+            }
+        };
+        EventApi.prototype.setDates = function (startInput, endInput, options) {
+            if (options === void 0) { options = {}; }
+            var dateEnv = this._context.dateEnv;
+            var standardProps = { allDay: options.allDay };
+            var start = dateEnv.createMarker(startInput);
+            var end;
+            if (!start) {
+                return; // TODO: warning if parsed bad
+            }
+            if (endInput != null) {
+                end = dateEnv.createMarker(endInput);
+                if (!end) { // TODO: warning if parsed bad
+                    return;
+                }
+            }
+            if (this._instance) {
+                var instanceRange = this._instance.range;
+                // when computing the diff for an event being converted to all-day,
+                // compute diff off of the all-day values the way event-mutation does.
+                if (options.allDay === true) {
+                    instanceRange = computeAlignedDayRange(instanceRange);
+                }
+                var startDelta = diffDates(instanceRange.start, start, dateEnv, options.granularity);
+                if (end) {
+                    var endDelta = diffDates(instanceRange.end, end, dateEnv, options.granularity);
+                    if (durationsEqual(startDelta, endDelta)) {
+                        this.mutate({ datesDelta: startDelta, standardProps: standardProps });
+                    }
+                    else {
+                        this.mutate({ startDelta: startDelta, endDelta: endDelta, standardProps: standardProps });
+                    }
+                }
+                else { // means "clear the end"
+                    standardProps.hasEnd = false;
+                    this.mutate({ datesDelta: startDelta, standardProps: standardProps });
+                }
+            }
+        };
+        EventApi.prototype.moveStart = function (deltaInput) {
+            var delta = createDuration(deltaInput);
+            if (delta) { // TODO: warning if parsed bad
+                this.mutate({ startDelta: delta });
+            }
+        };
+        EventApi.prototype.moveEnd = function (deltaInput) {
+            var delta = createDuration(deltaInput);
+            if (delta) { // TODO: warning if parsed bad
+                this.mutate({ endDelta: delta });
+            }
+        };
+        EventApi.prototype.moveDates = function (deltaInput) {
+            var delta = createDuration(deltaInput);
+            if (delta) { // TODO: warning if parsed bad
+                this.mutate({ datesDelta: delta });
+            }
+        };
+        EventApi.prototype.setAllDay = function (allDay, options) {
+            if (options === void 0) { options = {}; }
+            var standardProps = { allDay: allDay };
+            var maintainDuration = options.maintainDuration;
+            if (maintainDuration == null) {
+                maintainDuration = this._context.options.allDayMaintainDuration;
+            }
+            if (this._def.allDay !== allDay) {
+                standardProps.hasEnd = maintainDuration;
+            }
+            this.mutate({ standardProps: standardProps });
+        };
+        EventApi.prototype.formatRange = function (formatInput) {
+            var dateEnv = this._context.dateEnv;
+            var instance = this._instance;
+            var formatter = createFormatter(formatInput);
+            if (this._def.hasEnd) {
+                return dateEnv.formatRange(instance.range.start, instance.range.end, formatter, {
+                    forcedStartTzo: instance.forcedStartTzo,
+                    forcedEndTzo: instance.forcedEndTzo,
+                });
+            }
+            return dateEnv.format(instance.range.start, formatter, {
+                forcedTzo: instance.forcedStartTzo,
+            });
+        };
+        EventApi.prototype.mutate = function (mutation) {
+            var instance = this._instance;
+            if (instance) {
+                var def = this._def;
+                var context_1 = this._context;
+                var eventStore_1 = context_1.getCurrentData().eventStore;
+                var relevantEvents = getRelevantEvents(eventStore_1, instance.instanceId);
+                var eventConfigBase = {
+                    '': {
+                        display: '',
+                        startEditable: true,
+                        durationEditable: true,
+                        constraints: [],
+                        overlap: null,
+                        allows: [],
+                        backgroundColor: '',
+                        borderColor: '',
+                        textColor: '',
+                        classNames: [],
+                    },
+                };
+                relevantEvents = applyMutationToEventStore(relevantEvents, eventConfigBase, mutation, context_1);
+                var oldEvent = new EventApi(context_1, def, instance); // snapshot
+                this._def = relevantEvents.defs[def.defId];
+                this._instance = relevantEvents.instances[instance.instanceId];
+                context_1.dispatch({
+                    type: 'MERGE_EVENTS',
+                    eventStore: relevantEvents,
+                });
+                context_1.emitter.trigger('eventChange', {
+                    oldEvent: oldEvent,
+                    event: this,
+                    relatedEvents: buildEventApis(relevantEvents, context_1, instance),
+                    revert: function () {
+                        context_1.dispatch({
+                            type: 'RESET_EVENTS',
+                            eventStore: eventStore_1,
+                        });
+                    },
+                });
+            }
+        };
+        EventApi.prototype.remove = function () {
+            var context = this._context;
+            var asStore = eventApiToStore(this);
+            context.dispatch({
+                type: 'REMOVE_EVENTS',
+                eventStore: asStore,
+            });
+            context.emitter.trigger('eventRemove', {
+                event: this,
+                relatedEvents: [],
+                revert: function () {
+                    context.dispatch({
+                        type: 'MERGE_EVENTS',
+                        eventStore: asStore,
+                    });
+                },
+            });
+        };
+        Object.defineProperty(EventApi.prototype, "source", {
+            get: function () {
+                var sourceId = this._def.sourceId;
+                if (sourceId) {
+                    return new EventSourceApi(this._context, this._context.getCurrentData().eventSources[sourceId]);
+                }
+                return null;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(EventApi.prototype, "start", {
+            get: function () {
+                return this._instance ?
+                    this._context.dateEnv.toDate(this._instance.range.start) :
+                    null;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(EventApi.prototype, "end", {
+            get: function () {
+                return (this._instance && this._def.hasEnd) ?
+                    this._context.dateEnv.toDate(this._instance.range.end) :
+                    null;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(EventApi.prototype, "startStr", {
+            get: function () {
+                var instance = this._instance;
+                if (instance) {
+                    return this._context.dateEnv.formatIso(instance.range.start, {
+                        omitTime: this._def.allDay,
+                        forcedTzo: instance.forcedStartTzo,
+                    });
+                }
+                return '';
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(EventApi.prototype, "endStr", {
+            get: function () {
+                var instance = this._instance;
+                if (instance && this._def.hasEnd) {
+                    return this._context.dateEnv.formatIso(instance.range.end, {
+                        omitTime: this._def.allDay,
+                        forcedTzo: instance.forcedEndTzo,
+                    });
+                }
+                return '';
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(EventApi.prototype, "id", {
+            // computable props that all access the def
+            // TODO: find a TypeScript-compatible way to do this at scale
+            get: function () { return this._def.publicId; },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(EventApi.prototype, "groupId", {
+            get: function () { return this._def.groupId; },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(EventApi.prototype, "allDay", {
+            get: function () { return this._def.allDay; },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(EventApi.prototype, "title", {
+            get: function () { return this._def.title; },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(EventApi.prototype, "url", {
+            get: function () { return this._def.url; },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(EventApi.prototype, "display", {
+            get: function () { return this._def.ui.display || 'auto'; } // bad. just normalize the type earlier
+            ,
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(EventApi.prototype, "startEditable", {
+            get: function () { return this._def.ui.startEditable; },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(EventApi.prototype, "durationEditable", {
+            get: function () { return this._def.ui.durationEditable; },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(EventApi.prototype, "constraint", {
+            get: function () { return this._def.ui.constraints[0] || null; },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(EventApi.prototype, "overlap", {
+            get: function () { return this._def.ui.overlap; },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(EventApi.prototype, "allow", {
+            get: function () { return this._def.ui.allows[0] || null; },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(EventApi.prototype, "backgroundColor", {
+            get: function () { return this._def.ui.backgroundColor; },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(EventApi.prototype, "borderColor", {
+            get: function () { return this._def.ui.borderColor; },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(EventApi.prototype, "textColor", {
+            get: function () { return this._def.ui.textColor; },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(EventApi.prototype, "classNames", {
+            // NOTE: user can't modify these because Object.freeze was called in event-def parsing
+            get: function () { return this._def.ui.classNames; },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(EventApi.prototype, "extendedProps", {
+            get: function () { return this._def.extendedProps; },
+            enumerable: false,
+            configurable: true
+        });
+        EventApi.prototype.toPlainObject = function (settings) {
+            if (settings === void 0) { settings = {}; }
+            var def = this._def;
+            var ui = def.ui;
+            var _a = this, startStr = _a.startStr, endStr = _a.endStr;
+            var res = {};
+            if (def.title) {
+                res.title = def.title;
+            }
+            if (startStr) {
+                res.start = startStr;
+            }
+            if (endStr) {
+                res.end = endStr;
+            }
+            if (def.publicId) {
+                res.id = def.publicId;
+            }
+            if (def.groupId) {
+                res.groupId = def.groupId;
+            }
+            if (def.url) {
+                res.url = def.url;
+            }
+            if (ui.display && ui.display !== 'auto') {
+                res.display = ui.display;
+            }
+            // TODO: what about recurring-event properties???
+            // TODO: include startEditable/durationEditable/constraint/overlap/allow
+            if (settings.collapseColor && ui.backgroundColor && ui.backgroundColor === ui.borderColor) {
+                res.color = ui.backgroundColor;
+            }
+            else {
+                if (ui.backgroundColor) {
+                    res.backgroundColor = ui.backgroundColor;
+                }
+                if (ui.borderColor) {
+                    res.borderColor = ui.borderColor;
+                }
+            }
+            if (ui.textColor) {
+                res.textColor = ui.textColor;
+            }
+            if (ui.classNames.length) {
+                res.classNames = ui.classNames;
+            }
+            if (Object.keys(def.extendedProps).length) {
+                if (settings.collapseExtendedProps) {
+                    __assign(res, def.extendedProps);
+                }
+                else {
+                    res.extendedProps = def.extendedProps;
+                }
+            }
+            return res;
+        };
+        EventApi.prototype.toJSON = function () {
+            return this.toPlainObject();
+        };
+        return EventApi;
+    }());
+    function eventApiToStore(eventApi) {
+        var _a, _b;
+        var def = eventApi._def;
+        var instance = eventApi._instance;
+        return {
+            defs: (_a = {}, _a[def.defId] = def, _a),
+            instances: instance
+                ? (_b = {}, _b[instance.instanceId] = instance, _b) : {},
+        };
+    }
+    function buildEventApis(eventStore, context, excludeInstance) {
+        var defs = eventStore.defs, instances = eventStore.instances;
+        var eventApis = [];
+        var excludeInstanceId = excludeInstance ? excludeInstance.instanceId : '';
+        for (var id in instances) {
+            var instance = instances[id];
+            var def = defs[instance.defId];
+            if (instance.instanceId !== excludeInstanceId) {
+                eventApis.push(new EventApi(context, def, instance));
+            }
+        }
+        return eventApis;
+    }
+
+    var calendarSystemClassMap = {};
+    function registerCalendarSystem(name, theClass) {
+        calendarSystemClassMap[name] = theClass;
+    }
+    function createCalendarSystem(name) {
+        return new calendarSystemClassMap[name]();
+    }
+    var GregorianCalendarSystem = /** @class */ (function () {
+        function GregorianCalendarSystem() {
+        }
+        GregorianCalendarSystem.prototype.getMarkerYear = function (d) {
+            return d.getUTCFullYear();
+        };
+        GregorianCalendarSystem.prototype.getMarkerMonth = function (d) {
+            return d.getUTCMonth();
+        };
+        GregorianCalendarSystem.prototype.getMarkerDay = function (d) {
+            return d.getUTCDate();
+        };
+        GregorianCalendarSystem.prototype.arrayToMarker = function (arr) {
+            return arrayToUtcDate(arr);
+        };
+        GregorianCalendarSystem.prototype.markerToArray = function (marker) {
+            return dateToUtcArray(marker);
+        };
+        return GregorianCalendarSystem;
+    }());
+    registerCalendarSystem('gregory', GregorianCalendarSystem);
+
+    var ISO_RE = /^\s*(\d{4})(-?(\d{2})(-?(\d{2})([T ](\d{2}):?(\d{2})(:?(\d{2})(\.(\d+))?)?(Z|(([-+])(\d{2})(:?(\d{2}))?))?)?)?)?$/;
+    function parse(str) {
+        var m = ISO_RE.exec(str);
+        if (m) {
+            var marker = new Date(Date.UTC(Number(m[1]), m[3] ? Number(m[3]) - 1 : 0, Number(m[5] || 1), Number(m[7] || 0), Number(m[8] || 0), Number(m[10] || 0), m[12] ? Number("0." + m[12]) * 1000 : 0));
+            if (isValidDate(marker)) {
+                var timeZoneOffset = null;
+                if (m[13]) {
+                    timeZoneOffset = (m[15] === '-' ? -1 : 1) * (Number(m[16] || 0) * 60 +
+                        Number(m[18] || 0));
+                }
+                return {
+                    marker: marker,
+                    isTimeUnspecified: !m[6],
+                    timeZoneOffset: timeZoneOffset,
+                };
+            }
+        }
+        return null;
+    }
+
+    var DateEnv = /** @class */ (function () {
+        function DateEnv(settings) {
+            var timeZone = this.timeZone = settings.timeZone;
+            var isNamedTimeZone = timeZone !== 'local' && timeZone !== 'UTC';
+            if (settings.namedTimeZoneImpl && isNamedTimeZone) {
+                this.namedTimeZoneImpl = new settings.namedTimeZoneImpl(timeZone);
+            }
+            this.canComputeOffset = Boolean(!isNamedTimeZone || this.namedTimeZoneImpl);
+            this.calendarSystem = createCalendarSystem(settings.calendarSystem);
+            this.locale = settings.locale;
+            this.weekDow = settings.locale.week.dow;
+            this.weekDoy = settings.locale.week.doy;
+            if (settings.weekNumberCalculation === 'ISO') {
+                this.weekDow = 1;
+                this.weekDoy = 4;
+            }
+            if (typeof settings.firstDay === 'number') {
+                this.weekDow = settings.firstDay;
+            }
+            if (typeof settings.weekNumberCalculation === 'function') {
+                this.weekNumberFunc = settings.weekNumberCalculation;
+            }
+            this.weekText = settings.weekText != null ? settings.weekText : settings.locale.options.weekText;
+            this.cmdFormatter = settings.cmdFormatter;
+            this.defaultSeparator = settings.defaultSeparator;
+        }
+        // Creating / Parsing
+        DateEnv.prototype.createMarker = function (input) {
+            var meta = this.createMarkerMeta(input);
+            if (meta === null) {
+                return null;
+            }
+            return meta.marker;
+        };
+        DateEnv.prototype.createNowMarker = function () {
+            if (this.canComputeOffset) {
+                return this.timestampToMarker(new Date().valueOf());
+            }
+            // if we can't compute the current date val for a timezone,
+            // better to give the current local date vals than UTC
+            return arrayToUtcDate(dateToLocalArray(new Date()));
+        };
+        DateEnv.prototype.createMarkerMeta = function (input) {
+            if (typeof input === 'string') {
+                return this.parse(input);
+            }
+            var marker = null;
+            if (typeof input === 'number') {
+                marker = this.timestampToMarker(input);
+            }
+            else if (input instanceof Date) {
+                input = input.valueOf();
+                if (!isNaN(input)) {
+                    marker = this.timestampToMarker(input);
+                }
+            }
+            else if (Array.isArray(input)) {
+                marker = arrayToUtcDate(input);
+            }
+            if (marker === null || !isValidDate(marker)) {
+                return null;
+            }
+            return { marker: marker, isTimeUnspecified: false, forcedTzo: null };
+        };
+        DateEnv.prototype.parse = function (s) {
+            var parts = parse(s);
+            if (parts === null) {
+                return null;
+            }
+            var marker = parts.marker;
+            var forcedTzo = null;
+            if (parts.timeZoneOffset !== null) {
+                if (this.canComputeOffset) {
+                    marker = this.timestampToMarker(marker.valueOf() - parts.timeZoneOffset * 60 * 1000);
+                }
+                else {
+                    forcedTzo = parts.timeZoneOffset;
+                }
+            }
+            return { marker: marker, isTimeUnspecified: parts.isTimeUnspecified, forcedTzo: forcedTzo };
+        };
+        // Accessors
+        DateEnv.prototype.getYear = function (marker) {
+            return this.calendarSystem.getMarkerYear(marker);
+        };
+        DateEnv.prototype.getMonth = function (marker) {
+            return this.calendarSystem.getMarkerMonth(marker);
+        };
+        // Adding / Subtracting
+        DateEnv.prototype.add = function (marker, dur) {
+            var a = this.calendarSystem.markerToArray(marker);
+            a[0] += dur.years;
+            a[1] += dur.months;
+            a[2] += dur.days;
+            a[6] += dur.milliseconds;
+            return this.calendarSystem.arrayToMarker(a);
+        };
+        DateEnv.prototype.subtract = function (marker, dur) {
+            var a = this.calendarSystem.markerToArray(marker);
+            a[0] -= dur.years;
+            a[1] -= dur.months;
+            a[2] -= dur.days;
+            a[6] -= dur.milliseconds;
+            return this.calendarSystem.arrayToMarker(a);
+        };
+        DateEnv.prototype.addYears = function (marker, n) {
+            var a = this.calendarSystem.markerToArray(marker);
+            a[0] += n;
+            return this.calendarSystem.arrayToMarker(a);
+        };
+        DateEnv.prototype.addMonths = function (marker, n) {
+            var a = this.calendarSystem.markerToArray(marker);
+            a[1] += n;
+            return this.calendarSystem.arrayToMarker(a);
+        };
+        // Diffing Whole Units
+        DateEnv.prototype.diffWholeYears = function (m0, m1) {
+            var calendarSystem = this.calendarSystem;
+            if (timeAsMs(m0) === timeAsMs(m1) &&
+                calendarSystem.getMarkerDay(m0) === calendarSystem.getMarkerDay(m1) &&
+                calendarSystem.getMarkerMonth(m0) === calendarSystem.getMarkerMonth(m1)) {
+                return calendarSystem.getMarkerYear(m1) - calendarSystem.getMarkerYear(m0);
+            }
+            return null;
+        };
+        DateEnv.prototype.diffWholeMonths = function (m0, m1) {
+            var calendarSystem = this.calendarSystem;
+            if (timeAsMs(m0) === timeAsMs(m1) &&
+                calendarSystem.getMarkerDay(m0) === calendarSystem.getMarkerDay(m1)) {
+                return (calendarSystem.getMarkerMonth(m1) - calendarSystem.getMarkerMonth(m0)) +
+                    (calendarSystem.getMarkerYear(m1) - calendarSystem.getMarkerYear(m0)) * 12;
+            }
+            return null;
+        };
+        // Range / Duration
+        DateEnv.prototype.greatestWholeUnit = function (m0, m1) {
+            var n = this.diffWholeYears(m0, m1);
+            if (n !== null) {
+                return { unit: 'year', value: n };
+            }
+            n = this.diffWholeMonths(m0, m1);
+            if (n !== null) {
+                return { unit: 'month', value: n };
+            }
+            n = diffWholeWeeks(m0, m1);
+            if (n !== null) {
+                return { unit: 'week', value: n };
+            }
+            n = diffWholeDays(m0, m1);
+            if (n !== null) {
+                return { unit: 'day', value: n };
+            }
+            n = diffHours(m0, m1);
+            if (isInt(n)) {
+                return { unit: 'hour', value: n };
+            }
+            n = diffMinutes(m0, m1);
+            if (isInt(n)) {
+                return { unit: 'minute', value: n };
+            }
+            n = diffSeconds(m0, m1);
+            if (isInt(n)) {
+                return { unit: 'second', value: n };
+            }
+            return { unit: 'millisecond', value: m1.valueOf() - m0.valueOf() };
+        };
+        DateEnv.prototype.countDurationsBetween = function (m0, m1, d) {
+            // TODO: can use greatestWholeUnit
+            var diff;
+            if (d.years) {
+                diff = this.diffWholeYears(m0, m1);
+                if (diff !== null) {
+                    return diff / asRoughYears(d);
+                }
+            }
+            if (d.months) {
+                diff = this.diffWholeMonths(m0, m1);
+                if (diff !== null) {
+                    return diff / asRoughMonths(d);
+                }
+            }
+            if (d.days) {
+                diff = diffWholeDays(m0, m1);
+                if (diff !== null) {
+                    return diff / asRoughDays(d);
+                }
+            }
+            return (m1.valueOf() - m0.valueOf()) / asRoughMs(d);
+        };
+        // Start-Of
+        // these DON'T return zoned-dates. only UTC start-of dates
+        DateEnv.prototype.startOf = function (m, unit) {
+            if (unit === 'year') {
+                return this.startOfYear(m);
+            }
+            if (unit === 'month') {
+                return this.startOfMonth(m);
+            }
+            if (unit === 'week') {
+                return this.startOfWeek(m);
+            }
+            if (unit === 'day') {
+                return startOfDay(m);
+            }
+            if (unit === 'hour') {
+                return startOfHour(m);
+            }
+            if (unit === 'minute') {
+                return startOfMinute(m);
+            }
+            if (unit === 'second') {
+                return startOfSecond(m);
+            }
+            return null;
+        };
+        DateEnv.prototype.startOfYear = function (m) {
+            return this.calendarSystem.arrayToMarker([
+                this.calendarSystem.getMarkerYear(m),
+            ]);
+        };
+        DateEnv.prototype.startOfMonth = function (m) {
+            return this.calendarSystem.arrayToMarker([
+                this.calendarSystem.getMarkerYear(m),
+                this.calendarSystem.getMarkerMonth(m),
+            ]);
+        };
+        DateEnv.prototype.startOfWeek = function (m) {
+            return this.calendarSystem.arrayToMarker([
+                this.calendarSystem.getMarkerYear(m),
+                this.calendarSystem.getMarkerMonth(m),
+                m.getUTCDate() - ((m.getUTCDay() - this.weekDow + 7) % 7),
+            ]);
+        };
+        // Week Number
+        DateEnv.prototype.computeWeekNumber = function (marker) {
+            if (this.weekNumberFunc) {
+                return this.weekNumberFunc(this.toDate(marker));
+            }
+            return weekOfYear(marker, this.weekDow, this.weekDoy);
+        };
+        // TODO: choke on timeZoneName: long
+        DateEnv.prototype.format = function (marker, formatter, dateOptions) {
+            if (dateOptions === void 0) { dateOptions = {}; }
+            return formatter.format({
+                marker: marker,
+                timeZoneOffset: dateOptions.forcedTzo != null ?
+                    dateOptions.forcedTzo :
+                    this.offsetForMarker(marker),
+            }, this);
+        };
+        DateEnv.prototype.formatRange = function (start, end, formatter, dateOptions) {
+            if (dateOptions === void 0) { dateOptions = {}; }
+            if (dateOptions.isEndExclusive) {
+                end = addMs(end, -1);
+            }
+            return formatter.formatRange({
+                marker: start,
+                timeZoneOffset: dateOptions.forcedStartTzo != null ?
+                    dateOptions.forcedStartTzo :
+                    this.offsetForMarker(start),
+            }, {
+                marker: end,
+                timeZoneOffset: dateOptions.forcedEndTzo != null ?
+                    dateOptions.forcedEndTzo :
+                    this.offsetForMarker(end),
+            }, this, dateOptions.defaultSeparator);
+        };
+        /*
+        DUMB: the omitTime arg is dumb. if we omit the time, we want to omit the timezone offset. and if we do that,
+        might as well use buildIsoString or some other util directly
+        */
+        DateEnv.prototype.formatIso = function (marker, extraOptions) {
+            if (extraOptions === void 0) { extraOptions = {}; }
+            var timeZoneOffset = null;
+            if (!extraOptions.omitTimeZoneOffset) {
+                if (extraOptions.forcedTzo != null) {
+                    timeZoneOffset = extraOptions.forcedTzo;
+                }
+                else {
+                    timeZoneOffset = this.offsetForMarker(marker);
+                }
+            }
+            return buildIsoString(marker, timeZoneOffset, extraOptions.omitTime);
+        };
+        // TimeZone
+        DateEnv.prototype.timestampToMarker = function (ms) {
+            if (this.timeZone === 'local') {
+                return arrayToUtcDate(dateToLocalArray(new Date(ms)));
+            }
+            if (this.timeZone === 'UTC' || !this.namedTimeZoneImpl) {
+                return new Date(ms);
+            }
+            return arrayToUtcDate(this.namedTimeZoneImpl.timestampToArray(ms));
+        };
+        DateEnv.prototype.offsetForMarker = function (m) {
+            if (this.timeZone === 'local') {
+                return -arrayToLocalDate(dateToUtcArray(m)).getTimezoneOffset(); // convert "inverse" offset to "normal" offset
+            }
+            if (this.timeZone === 'UTC') {
+                return 0;
+            }
+            if (this.namedTimeZoneImpl) {
+                return this.namedTimeZoneImpl.offsetForArray(dateToUtcArray(m));
+            }
+            return null;
+        };
+        // Conversion
+        DateEnv.prototype.toDate = function (m, forcedTzo) {
+            if (this.timeZone === 'local') {
+                return arrayToLocalDate(dateToUtcArray(m));
+            }
+            if (this.timeZone === 'UTC') {
+                return new Date(m.valueOf()); // make sure it's a copy
+            }
+            if (!this.namedTimeZoneImpl) {
+                return new Date(m.valueOf() - (forcedTzo || 0));
+            }
+            return new Date(m.valueOf() -
+                this.namedTimeZoneImpl.offsetForArray(dateToUtcArray(m)) * 1000 * 60);
+        };
+        return DateEnv;
+    }());
+
+    var globalLocales = [];
+
+    var RAW_EN_LOCALE = {
+        code: 'en',
+        week: {
+            dow: 0,
+            doy: 4, // 4 days need to be within the year to be considered the first week
+        },
+        direction: 'ltr',
+        buttonText: {
+            prev: 'prev',
+            next: 'next',
+            prevYear: 'prev year',
+            nextYear: 'next year',
+            year: 'year',
+            today: 'today',
+            month: 'month',
+            week: 'week',
+            day: 'day',
+            list: 'list',
+        },
+        weekText: 'W',
+        allDayText: 'all-day',
+        moreLinkText: 'more',
+        noEventsText: 'No events to display',
+    };
+    function organizeRawLocales(explicitRawLocales) {
+        var defaultCode = explicitRawLocales.length > 0 ? explicitRawLocales[0].code : 'en';
+        var allRawLocales = globalLocales.concat(explicitRawLocales);
+        var rawLocaleMap = {
+            en: RAW_EN_LOCALE, // necessary?
+        };
+        for (var _i = 0, allRawLocales_1 = allRawLocales; _i < allRawLocales_1.length; _i++) {
+            var rawLocale = allRawLocales_1[_i];
+            rawLocaleMap[rawLocale.code] = rawLocale;
+        }
+        return {
+            map: rawLocaleMap,
+            defaultCode: defaultCode,
+        };
+    }
+    function buildLocale(inputSingular, available) {
+        if (typeof inputSingular === 'object' && !Array.isArray(inputSingular)) {
+            return parseLocale(inputSingular.code, [inputSingular.code], inputSingular);
+        }
+        return queryLocale(inputSingular, available);
+    }
+    function queryLocale(codeArg, available) {
+        var codes = [].concat(codeArg || []); // will convert to array
+        var raw = queryRawLocale(codes, available) || RAW_EN_LOCALE;
+        return parseLocale(codeArg, codes, raw);
+    }
+    function queryRawLocale(codes, available) {
+        for (var i = 0; i < codes.length; i += 1) {
+            var parts = codes[i].toLocaleLowerCase().split('-');
+            for (var j = parts.length; j > 0; j -= 1) {
+                var simpleId = parts.slice(0, j).join('-');
+                if (available[simpleId]) {
+                    return available[simpleId];
+                }
+            }
+        }
+        return null;
+    }
+    function parseLocale(codeArg, codes, raw) {
+        var merged = mergeProps([RAW_EN_LOCALE, raw], ['buttonText']);
+        delete merged.code; // don't want this part of the options
+        var week = merged.week;
+        delete merged.week;
+        return {
+            codeArg: codeArg,
+            codes: codes,
+            week: week,
+            simpleNumberFormat: new Intl.NumberFormat(codeArg),
+            options: merged,
+        };
+    }
+
+    function formatDate(dateInput, options) {
+        if (options === void 0) { options = {}; }
+        var dateEnv = buildDateEnv$1(options);
+        var formatter = createFormatter(options);
+        var dateMeta = dateEnv.createMarkerMeta(dateInput);
+        if (!dateMeta) { // TODO: warning?
+            return '';
+        }
+        return dateEnv.format(dateMeta.marker, formatter, {
+            forcedTzo: dateMeta.forcedTzo,
+        });
+    }
+    function formatRange(startInput, endInput, options) {
+        var dateEnv = buildDateEnv$1(typeof options === 'object' && options ? options : {}); // pass in if non-null object
+        var formatter = createFormatter(options);
+        var startMeta = dateEnv.createMarkerMeta(startInput);
+        var endMeta = dateEnv.createMarkerMeta(endInput);
+        if (!startMeta || !endMeta) { // TODO: warning?
+            return '';
+        }
+        return dateEnv.formatRange(startMeta.marker, endMeta.marker, formatter, {
+            forcedStartTzo: startMeta.forcedTzo,
+            forcedEndTzo: endMeta.forcedTzo,
+            isEndExclusive: options.isEndExclusive,
+            defaultSeparator: BASE_OPTION_DEFAULTS.defaultRangeSeparator,
+        });
+    }
+    // TODO: more DRY and optimized
+    function buildDateEnv$1(settings) {
+        var locale = buildLocale(settings.locale || 'en', organizeRawLocales([]).map); // TODO: don't hardcode 'en' everywhere
+        return new DateEnv(__assign(__assign({ timeZone: BASE_OPTION_DEFAULTS.timeZone, calendarSystem: 'gregory' }, settings), { locale: locale }));
+    }
+
+    var DEF_DEFAULTS = {
+        startTime: '09:00',
+        endTime: '17:00',
+        daysOfWeek: [1, 2, 3, 4, 5],
+        display: 'inverse-background',
+        classNames: 'fc-non-business',
+        groupId: '_businessHours', // so multiple defs get grouped
+    };
+    /*
+    TODO: pass around as EventDefHash!!!
+    */
+    function parseBusinessHours(input, context) {
+        return parseEvents(refineInputs(input), null, context);
+    }
+    function refineInputs(input) {
+        var rawDefs;
+        if (input === true) {
+            rawDefs = [{}]; // will get DEF_DEFAULTS verbatim
+        }
+        else if (Array.isArray(input)) {
+            // if specifying an array, every sub-definition NEEDS a day-of-week
+            rawDefs = input.filter(function (rawDef) { return rawDef.daysOfWeek; });
+        }
+        else if (typeof input === 'object' && input) { // non-null object
+            rawDefs = [input];
+        }
+        else { // is probably false
+            rawDefs = [];
+        }
+        rawDefs = rawDefs.map(function (rawDef) { return (__assign(__assign({}, DEF_DEFAULTS), rawDef)); });
+        return rawDefs;
+    }
+
+    function pointInsideRect(point, rect) {
+        return point.left >= rect.left &&
+            point.left < rect.right &&
+            point.top >= rect.top &&
+            point.top < rect.bottom;
+    }
+    // Returns a new rectangle that is the intersection of the two rectangles. If they don't intersect, returns false
+    function intersectRects(rect1, rect2) {
+        var res = {
+            left: Math.max(rect1.left, rect2.left),
+            right: Math.min(rect1.right, rect2.right),
+            top: Math.max(rect1.top, rect2.top),
+            bottom: Math.min(rect1.bottom, rect2.bottom),
+        };
+        if (res.left < res.right && res.top < res.bottom) {
+            return res;
+        }
+        return false;
+    }
+    function translateRect(rect, deltaX, deltaY) {
+        return {
+            left: rect.left + deltaX,
+            right: rect.right + deltaX,
+            top: rect.top + deltaY,
+            bottom: rect.bottom + deltaY,
+        };
+    }
+    // Returns a new point that will have been moved to reside within the given rectangle
+    function constrainPoint(point, rect) {
+        return {
+            left: Math.min(Math.max(point.left, rect.left), rect.right),
+            top: Math.min(Math.max(point.top, rect.top), rect.bottom),
+        };
+    }
+    // Returns a point that is the center of the given rectangle
+    function getRectCenter(rect) {
+        return {
+            left: (rect.left + rect.right) / 2,
+            top: (rect.top + rect.bottom) / 2,
+        };
+    }
+    // Subtracts point2's coordinates from point1's coordinates, returning a delta
+    function diffPoints(point1, point2) {
+        return {
+            left: point1.left - point2.left,
+            top: point1.top - point2.top,
+        };
+    }
+
+    var canVGrowWithinCell;
+    function getCanVGrowWithinCell() {
+        if (canVGrowWithinCell == null) {
+            canVGrowWithinCell = computeCanVGrowWithinCell();
+        }
+        return canVGrowWithinCell;
+    }
+    function computeCanVGrowWithinCell() {
+        // for SSR, because this function is call immediately at top-level
+        // TODO: just make this logic execute top-level, immediately, instead of doing lazily
+        if (typeof document === 'undefined') {
+            return true;
+        }
+        var el = document.createElement('div');
+        el.style.position = 'absolute';
+        el.style.top = '0px';
+        el.style.left = '0px';
+        el.innerHTML = '
';
+        el.querySelector('table').style.height = '100px';
+        el.querySelector('div').style.height = '100%';
+        document.body.appendChild(el);
+        var div = el.querySelector('div');
+        var possible = div.offsetHeight > 0;
+        document.body.removeChild(el);
+        return possible;
+    }
+
+    var EMPTY_EVENT_STORE = createEmptyEventStore(); // for purecomponents. TODO: keep elsewhere
+    var Splitter = /** @class */ (function () {
+        function Splitter() {
+            this.getKeysForEventDefs = memoize(this._getKeysForEventDefs);
+            this.splitDateSelection = memoize(this._splitDateSpan);
+            this.splitEventStore = memoize(this._splitEventStore);
+            this.splitIndividualUi = memoize(this._splitIndividualUi);
+            this.splitEventDrag = memoize(this._splitInteraction);
+            this.splitEventResize = memoize(this._splitInteraction);
+            this.eventUiBuilders = {}; // TODO: typescript protection
+        }
+        Splitter.prototype.splitProps = function (props) {
+            var _this = this;
+            var keyInfos = this.getKeyInfo(props);
+            var defKeys = this.getKeysForEventDefs(props.eventStore);
+            var dateSelections = this.splitDateSelection(props.dateSelection);
+            var individualUi = this.splitIndividualUi(props.eventUiBases, defKeys); // the individual *bases*
+            var eventStores = this.splitEventStore(props.eventStore, defKeys);
+            var eventDrags = this.splitEventDrag(props.eventDrag);
+            var eventResizes = this.splitEventResize(props.eventResize);
+            var splitProps = {};
+            this.eventUiBuilders = mapHash(keyInfos, function (info, key) { return _this.eventUiBuilders[key] || memoize(buildEventUiForKey); });
+            for (var key in keyInfos) {
+                var keyInfo = keyInfos[key];
+                var eventStore = eventStores[key] || EMPTY_EVENT_STORE;
+                var buildEventUi = this.eventUiBuilders[key];
+                splitProps[key] = {
+                    businessHours: keyInfo.businessHours || props.businessHours,
+                    dateSelection: dateSelections[key] || null,
+                    eventStore: eventStore,
+                    eventUiBases: buildEventUi(props.eventUiBases[''], keyInfo.ui, individualUi[key]),
+                    eventSelection: eventStore.instances[props.eventSelection] ? props.eventSelection : '',
+                    eventDrag: eventDrags[key] || null,
+                    eventResize: eventResizes[key] || null,
+                };
+            }
+            return splitProps;
+        };
+        Splitter.prototype._splitDateSpan = function (dateSpan) {
+            var dateSpans = {};
+            if (dateSpan) {
+                var keys = this.getKeysForDateSpan(dateSpan);
+                for (var _i = 0, keys_1 = keys; _i < keys_1.length; _i++) {
+                    var key = keys_1[_i];
+                    dateSpans[key] = dateSpan;
+                }
+            }
+            return dateSpans;
+        };
+        Splitter.prototype._getKeysForEventDefs = function (eventStore) {
+            var _this = this;
+            return mapHash(eventStore.defs, function (eventDef) { return _this.getKeysForEventDef(eventDef); });
+        };
+        Splitter.prototype._splitEventStore = function (eventStore, defKeys) {
+            var defs = eventStore.defs, instances = eventStore.instances;
+            var splitStores = {};
+            for (var defId in defs) {
+                for (var _i = 0, _a = defKeys[defId]; _i < _a.length; _i++) {
+                    var key = _a[_i];
+                    if (!splitStores[key]) {
+                        splitStores[key] = createEmptyEventStore();
+                    }
+                    splitStores[key].defs[defId] = defs[defId];
+                }
+            }
+            for (var instanceId in instances) {
+                var instance = instances[instanceId];
+                for (var _b = 0, _c = defKeys[instance.defId]; _b < _c.length; _b++) {
+                    var key = _c[_b];
+                    if (splitStores[key]) { // must have already been created
+                        splitStores[key].instances[instanceId] = instance;
+                    }
+                }
+            }
+            return splitStores;
+        };
+        Splitter.prototype._splitIndividualUi = function (eventUiBases, defKeys) {
+            var splitHashes = {};
+            for (var defId in eventUiBases) {
+                if (defId) { // not the '' key
+                    for (var _i = 0, _a = defKeys[defId]; _i < _a.length; _i++) {
+                        var key = _a[_i];
+                        if (!splitHashes[key]) {
+                            splitHashes[key] = {};
+                        }
+                        splitHashes[key][defId] = eventUiBases[defId];
+                    }
+                }
+            }
+            return splitHashes;
+        };
+        Splitter.prototype._splitInteraction = function (interaction) {
+            var splitStates = {};
+            if (interaction) {
+                var affectedStores_1 = this._splitEventStore(interaction.affectedEvents, this._getKeysForEventDefs(interaction.affectedEvents));
+                // can't rely on defKeys because event data is mutated
+                var mutatedKeysByDefId = this._getKeysForEventDefs(interaction.mutatedEvents);
+                var mutatedStores_1 = this._splitEventStore(interaction.mutatedEvents, mutatedKeysByDefId);
+                var populate = function (key) {
+                    if (!splitStates[key]) {
+                        splitStates[key] = {
+                            affectedEvents: affectedStores_1[key] || EMPTY_EVENT_STORE,
+                            mutatedEvents: mutatedStores_1[key] || EMPTY_EVENT_STORE,
+                            isEvent: interaction.isEvent,
+                        };
+                    }
+                };
+                for (var key in affectedStores_1) {
+                    populate(key);
+                }
+                for (var key in mutatedStores_1) {
+                    populate(key);
+                }
+            }
+            return splitStates;
+        };
+        return Splitter;
+    }());
+    function buildEventUiForKey(allUi, eventUiForKey, individualUi) {
+        var baseParts = [];
+        if (allUi) {
+            baseParts.push(allUi);
+        }
+        if (eventUiForKey) {
+            baseParts.push(eventUiForKey);
+        }
+        var stuff = {
+            '': combineEventUis(baseParts),
+        };
+        if (individualUi) {
+            __assign(stuff, individualUi);
+        }
+        return stuff;
+    }
+
+    function getDateMeta(date, todayRange, nowDate, dateProfile) {
+        return {
+            dow: date.getUTCDay(),
+            isDisabled: Boolean(dateProfile && !rangeContainsMarker(dateProfile.activeRange, date)),
+            isOther: Boolean(dateProfile && !rangeContainsMarker(dateProfile.currentRange, date)),
+            isToday: Boolean(todayRange && rangeContainsMarker(todayRange, date)),
+            isPast: Boolean(nowDate ? (date < nowDate) : todayRange ? (date < todayRange.start) : false),
+            isFuture: Boolean(nowDate ? (date > nowDate) : todayRange ? (date >= todayRange.end) : false),
+        };
+    }
+    function getDayClassNames(meta, theme) {
+        var classNames = [
+            'fc-day',
+            "fc-day-" + DAY_IDS[meta.dow],
+        ];
+        if (meta.isDisabled) {
+            classNames.push('fc-day-disabled');
+        }
+        else {
+            if (meta.isToday) {
+                classNames.push('fc-day-today');
+                classNames.push(theme.getClass('today'));
+            }
+            if (meta.isPast) {
+                classNames.push('fc-day-past');
+            }
+            if (meta.isFuture) {
+                classNames.push('fc-day-future');
+            }
+            if (meta.isOther) {
+                classNames.push('fc-day-other');
+            }
+        }
+        return classNames;
+    }
+    function getSlotClassNames(meta, theme) {
+        var classNames = [
+            'fc-slot',
+            "fc-slot-" + DAY_IDS[meta.dow],
+        ];
+        if (meta.isDisabled) {
+            classNames.push('fc-slot-disabled');
+        }
+        else {
+            if (meta.isToday) {
+                classNames.push('fc-slot-today');
+                classNames.push(theme.getClass('today'));
+            }
+            if (meta.isPast) {
+                classNames.push('fc-slot-past');
+            }
+            if (meta.isFuture) {
+                classNames.push('fc-slot-future');
+            }
+        }
+        return classNames;
+    }
+
+    function buildNavLinkData(date, type) {
+        if (type === void 0) { type = 'day'; }
+        return JSON.stringify({
+            date: formatDayString(date),
+            type: type,
+        });
+    }
+
+    var _isRtlScrollbarOnLeft = null;
+    function getIsRtlScrollbarOnLeft() {
+        if (_isRtlScrollbarOnLeft === null) {
+            _isRtlScrollbarOnLeft = computeIsRtlScrollbarOnLeft();
+        }
+        return _isRtlScrollbarOnLeft;
+    }
+    function computeIsRtlScrollbarOnLeft() {
+        var outerEl = document.createElement('div');
+        applyStyle(outerEl, {
+            position: 'absolute',
+            top: -1000,
+            left: 0,
+            border: 0,
+            padding: 0,
+            overflow: 'scroll',
+            direction: 'rtl',
+        });
+        outerEl.innerHTML = '
';
+        document.body.appendChild(outerEl);
+        var innerEl = outerEl.firstChild;
+        var res = innerEl.getBoundingClientRect().left > outerEl.getBoundingClientRect().left;
+        removeElement(outerEl);
+        return res;
+    }
+
+    var _scrollbarWidths;
+    function getScrollbarWidths() {
+        if (!_scrollbarWidths) {
+            _scrollbarWidths = computeScrollbarWidths();
+        }
+        return _scrollbarWidths;
+    }
+    function computeScrollbarWidths() {
+        var el = document.createElement('div');
+        el.style.overflow = 'scroll';
+        el.style.position = 'absolute';
+        el.style.top = '-9999px';
+        el.style.left = '-9999px';
+        document.body.appendChild(el);
+        var res = computeScrollbarWidthsForEl(el);
+        document.body.removeChild(el);
+        return res;
+    }
+    // WARNING: will include border
+    function computeScrollbarWidthsForEl(el) {
+        return {
+            x: el.offsetHeight - el.clientHeight,
+            y: el.offsetWidth - el.clientWidth,
+        };
+    }
+
+    function computeEdges(el, getPadding) {
+        if (getPadding === void 0) { getPadding = false; }
+        var computedStyle = window.getComputedStyle(el);
+        var borderLeft = parseInt(computedStyle.borderLeftWidth, 10) || 0;
+        var borderRight = parseInt(computedStyle.borderRightWidth, 10) || 0;
+        var borderTop = parseInt(computedStyle.borderTopWidth, 10) || 0;
+        var borderBottom = parseInt(computedStyle.borderBottomWidth, 10) || 0;
+        var badScrollbarWidths = computeScrollbarWidthsForEl(el); // includes border!
+        var scrollbarLeftRight = badScrollbarWidths.y - borderLeft - borderRight;
+        var scrollbarBottom = badScrollbarWidths.x - borderTop - borderBottom;
+        var res = {
+            borderLeft: borderLeft,
+            borderRight: borderRight,
+            borderTop: borderTop,
+            borderBottom: borderBottom,
+            scrollbarBottom: scrollbarBottom,
+            scrollbarLeft: 0,
+            scrollbarRight: 0,
+        };
+        if (getIsRtlScrollbarOnLeft() && computedStyle.direction === 'rtl') { // is the scrollbar on the left side?
+            res.scrollbarLeft = scrollbarLeftRight;
+        }
+        else {
+            res.scrollbarRight = scrollbarLeftRight;
+        }
+        if (getPadding) {
+            res.paddingLeft = parseInt(computedStyle.paddingLeft, 10) || 0;
+            res.paddingRight = parseInt(computedStyle.paddingRight, 10) || 0;
+            res.paddingTop = parseInt(computedStyle.paddingTop, 10) || 0;
+            res.paddingBottom = parseInt(computedStyle.paddingBottom, 10) || 0;
+        }
+        return res;
+    }
+    function computeInnerRect(el, goWithinPadding, doFromWindowViewport) {
+        if (goWithinPadding === void 0) { goWithinPadding = false; }
+        var outerRect = doFromWindowViewport ? el.getBoundingClientRect() : computeRect(el);
+        var edges = computeEdges(el, goWithinPadding);
+        var res = {
+            left: outerRect.left + edges.borderLeft + edges.scrollbarLeft,
+            right: outerRect.right - edges.borderRight - edges.scrollbarRight,
+            top: outerRect.top + edges.borderTop,
+            bottom: outerRect.bottom - edges.borderBottom - edges.scrollbarBottom,
+        };
+        if (goWithinPadding) {
+            res.left += edges.paddingLeft;
+            res.right -= edges.paddingRight;
+            res.top += edges.paddingTop;
+            res.bottom -= edges.paddingBottom;
+        }
+        return res;
+    }
+    function computeRect(el) {
+        var rect = el.getBoundingClientRect();
+        return {
+            left: rect.left + window.pageXOffset,
+            top: rect.top + window.pageYOffset,
+            right: rect.right + window.pageXOffset,
+            bottom: rect.bottom + window.pageYOffset,
+        };
+    }
+    function computeClippedClientRect(el) {
+        var clippingParents = getClippingParents(el);
+        var rect = el.getBoundingClientRect();
+        for (var _i = 0, clippingParents_1 = clippingParents; _i < clippingParents_1.length; _i++) {
+            var clippingParent = clippingParents_1[_i];
+            var intersection = intersectRects(rect, clippingParent.getBoundingClientRect());
+            if (intersection) {
+                rect = intersection;
+            }
+            else {
+                return null;
+            }
+        }
+        return rect;
+    }
+    function computeHeightAndMargins(el) {
+        return el.getBoundingClientRect().height + computeVMargins(el);
+    }
+    function computeVMargins(el) {
+        var computed = window.getComputedStyle(el);
+        return parseInt(computed.marginTop, 10) +
+            parseInt(computed.marginBottom, 10);
+    }
+    // does not return window
+    function getClippingParents(el) {
+        var parents = [];
+        while (el instanceof HTMLElement) { // will stop when gets to document or null
+            var computedStyle = window.getComputedStyle(el);
+            if (computedStyle.position === 'fixed') {
+                break;
+            }
+            if ((/(auto|scroll)/).test(computedStyle.overflow + computedStyle.overflowY + computedStyle.overflowX)) {
+                parents.push(el);
+            }
+            el = el.parentNode;
+        }
+        return parents;
+    }
+
+    // given a function that resolves a result asynchronously.
+    // the function can either call passed-in success and failure callbacks,
+    // or it can return a promise.
+    // if you need to pass additional params to func, bind them first.
+    function unpromisify(func, success, failure) {
+        // guard against success/failure callbacks being called more than once
+        // and guard against a promise AND callback being used together.
+        var isResolved = false;
+        var wrappedSuccess = function () {
+            if (!isResolved) {
+                isResolved = true;
+                success.apply(this, arguments); // eslint-disable-line prefer-rest-params
+            }
+        };
+        var wrappedFailure = function () {
+            if (!isResolved) {
+                isResolved = true;
+                if (failure) {
+                    failure.apply(this, arguments); // eslint-disable-line prefer-rest-params
+                }
+            }
+        };
+        var res = func(wrappedSuccess, wrappedFailure);
+        if (res && typeof res.then === 'function') {
+            res.then(wrappedSuccess, wrappedFailure);
+        }
+    }
+
+    var Emitter = /** @class */ (function () {
+        function Emitter() {
+            this.handlers = {};
+            this.thisContext = null;
+        }
+        Emitter.prototype.setThisContext = function (thisContext) {
+            this.thisContext = thisContext;
+        };
+        Emitter.prototype.setOptions = function (options) {
+            this.options = options;
+        };
+        Emitter.prototype.on = function (type, handler) {
+            addToHash(this.handlers, type, handler);
+        };
+        Emitter.prototype.off = function (type, handler) {
+            removeFromHash(this.handlers, type, handler);
+        };
+        Emitter.prototype.trigger = function (type) {
+            var args = [];
+            for (var _i = 1; _i < arguments.length; _i++) {
+                args[_i - 1] = arguments[_i];
+            }
+            var attachedHandlers = this.handlers[type] || [];
+            var optionHandler = this.options && this.options[type];
+            var handlers = [].concat(optionHandler || [], attachedHandlers);
+            for (var _a = 0, handlers_1 = handlers; _a < handlers_1.length; _a++) {
+                var handler = handlers_1[_a];
+                handler.apply(this.thisContext, args);
+            }
+        };
+        Emitter.prototype.hasHandlers = function (type) {
+            return (this.handlers[type] && this.handlers[type].length) ||
+                (this.options && this.options[type]);
+        };
+        return Emitter;
+    }());
+    function addToHash(hash, type, handler) {
+        (hash[type] || (hash[type] = []))
+            .push(handler);
+    }
+    function removeFromHash(hash, type, handler) {
+        if (handler) {
+            if (hash[type]) {
+                hash[type] = hash[type].filter(function (func) { return func !== handler; });
+            }
+        }
+        else {
+            delete hash[type]; // remove all handler funcs for this type
+        }
+    }
+
+    /*
+    Records offset information for a set of elements, relative to an origin element.
+    Can record the left/right OR the top/bottom OR both.
+    Provides methods for querying the cache by position.
+    */
+    var PositionCache = /** @class */ (function () {
+        function PositionCache(originEl, els, isHorizontal, isVertical) {
+            this.els = els;
+            var originClientRect = this.originClientRect = originEl.getBoundingClientRect(); // relative to viewport top-left
+            if (isHorizontal) {
+                this.buildElHorizontals(originClientRect.left);
+            }
+            if (isVertical) {
+                this.buildElVerticals(originClientRect.top);
+            }
+        }
+        // Populates the left/right internal coordinate arrays
+        PositionCache.prototype.buildElHorizontals = function (originClientLeft) {
+            var lefts = [];
+            var rights = [];
+            for (var _i = 0, _a = this.els; _i < _a.length; _i++) {
+                var el = _a[_i];
+                var rect = el.getBoundingClientRect();
+                lefts.push(rect.left - originClientLeft);
+                rights.push(rect.right - originClientLeft);
+            }
+            this.lefts = lefts;
+            this.rights = rights;
+        };
+        // Populates the top/bottom internal coordinate arrays
+        PositionCache.prototype.buildElVerticals = function (originClientTop) {
+            var tops = [];
+            var bottoms = [];
+            for (var _i = 0, _a = this.els; _i < _a.length; _i++) {
+                var el = _a[_i];
+                var rect = el.getBoundingClientRect();
+                tops.push(rect.top - originClientTop);
+                bottoms.push(rect.bottom - originClientTop);
+            }
+            this.tops = tops;
+            this.bottoms = bottoms;
+        };
+        // Given a left offset (from document left), returns the index of the el that it horizontally intersects.
+        // If no intersection is made, returns undefined.
+        PositionCache.prototype.leftToIndex = function (leftPosition) {
+            var _a = this, lefts = _a.lefts, rights = _a.rights;
+            var len = lefts.length;
+            var i;
+            for (i = 0; i < len; i += 1) {
+                if (leftPosition >= lefts[i] && leftPosition < rights[i]) {
+                    return i;
+                }
+            }
+            return undefined; // TODO: better
+        };
+        // Given a top offset (from document top), returns the index of the el that it vertically intersects.
+        // If no intersection is made, returns undefined.
+        PositionCache.prototype.topToIndex = function (topPosition) {
+            var _a = this, tops = _a.tops, bottoms = _a.bottoms;
+            var len = tops.length;
+            var i;
+            for (i = 0; i < len; i += 1) {
+                if (topPosition >= tops[i] && topPosition < bottoms[i]) {
+                    return i;
+                }
+            }
+            return undefined; // TODO: better
+        };
+        // Gets the width of the element at the given index
+        PositionCache.prototype.getWidth = function (leftIndex) {
+            return this.rights[leftIndex] - this.lefts[leftIndex];
+        };
+        // Gets the height of the element at the given index
+        PositionCache.prototype.getHeight = function (topIndex) {
+            return this.bottoms[topIndex] - this.tops[topIndex];
+        };
+        return PositionCache;
+    }());
+
+    /* eslint max-classes-per-file: "off" */
+    /*
+    An object for getting/setting scroll-related information for an element.
+    Internally, this is done very differently for window versus DOM element,
+    so this object serves as a common interface.
+    */
+    var ScrollController = /** @class */ (function () {
+        function ScrollController() {
+        }
+        ScrollController.prototype.getMaxScrollTop = function () {
+            return this.getScrollHeight() - this.getClientHeight();
+        };
+        ScrollController.prototype.getMaxScrollLeft = function () {
+            return this.getScrollWidth() - this.getClientWidth();
+        };
+        ScrollController.prototype.canScrollVertically = function () {
+            return this.getMaxScrollTop() > 0;
+        };
+        ScrollController.prototype.canScrollHorizontally = function () {
+            return this.getMaxScrollLeft() > 0;
+        };
+        ScrollController.prototype.canScrollUp = function () {
+            return this.getScrollTop() > 0;
+        };
+        ScrollController.prototype.canScrollDown = function () {
+            return this.getScrollTop() < this.getMaxScrollTop();
+        };
+        ScrollController.prototype.canScrollLeft = function () {
+            return this.getScrollLeft() > 0;
+        };
+        ScrollController.prototype.canScrollRight = function () {
+            return this.getScrollLeft() < this.getMaxScrollLeft();
+        };
+        return ScrollController;
+    }());
+    var ElementScrollController = /** @class */ (function (_super) {
+        __extends(ElementScrollController, _super);
+        function ElementScrollController(el) {
+            var _this = _super.call(this) || this;
+            _this.el = el;
+            return _this;
+        }
+        ElementScrollController.prototype.getScrollTop = function () {
+            return this.el.scrollTop;
+        };
+        ElementScrollController.prototype.getScrollLeft = function () {
+            return this.el.scrollLeft;
+        };
+        ElementScrollController.prototype.setScrollTop = function (top) {
+            this.el.scrollTop = top;
+        };
+        ElementScrollController.prototype.setScrollLeft = function (left) {
+            this.el.scrollLeft = left;
+        };
+        ElementScrollController.prototype.getScrollWidth = function () {
+            return this.el.scrollWidth;
+        };
+        ElementScrollController.prototype.getScrollHeight = function () {
+            return this.el.scrollHeight;
+        };
+        ElementScrollController.prototype.getClientHeight = function () {
+            return this.el.clientHeight;
+        };
+        ElementScrollController.prototype.getClientWidth = function () {
+            return this.el.clientWidth;
+        };
+        return ElementScrollController;
+    }(ScrollController));
+    var WindowScrollController = /** @class */ (function (_super) {
+        __extends(WindowScrollController, _super);
+        function WindowScrollController() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        WindowScrollController.prototype.getScrollTop = function () {
+            return window.pageYOffset;
+        };
+        WindowScrollController.prototype.getScrollLeft = function () {
+            return window.pageXOffset;
+        };
+        WindowScrollController.prototype.setScrollTop = function (n) {
+            window.scroll(window.pageXOffset, n);
+        };
+        WindowScrollController.prototype.setScrollLeft = function (n) {
+            window.scroll(n, window.pageYOffset);
+        };
+        WindowScrollController.prototype.getScrollWidth = function () {
+            return document.documentElement.scrollWidth;
+        };
+        WindowScrollController.prototype.getScrollHeight = function () {
+            return document.documentElement.scrollHeight;
+        };
+        WindowScrollController.prototype.getClientHeight = function () {
+            return document.documentElement.clientHeight;
+        };
+        WindowScrollController.prototype.getClientWidth = function () {
+            return document.documentElement.clientWidth;
+        };
+        return WindowScrollController;
+    }(ScrollController));
+
+    var Theme = /** @class */ (function () {
+        function Theme(calendarOptions) {
+            if (this.iconOverrideOption) {
+                this.setIconOverride(calendarOptions[this.iconOverrideOption]);
+            }
+        }
+        Theme.prototype.setIconOverride = function (iconOverrideHash) {
+            var iconClassesCopy;
+            var buttonName;
+            if (typeof iconOverrideHash === 'object' && iconOverrideHash) { // non-null object
+                iconClassesCopy = __assign({}, this.iconClasses);
+                for (buttonName in iconOverrideHash) {
+                    iconClassesCopy[buttonName] = this.applyIconOverridePrefix(iconOverrideHash[buttonName]);
+                }
+                this.iconClasses = iconClassesCopy;
+            }
+            else if (iconOverrideHash === false) {
+                this.iconClasses = {};
+            }
+        };
+        Theme.prototype.applyIconOverridePrefix = function (className) {
+            var prefix = this.iconOverridePrefix;
+            if (prefix && className.indexOf(prefix) !== 0) { // if not already present
+                className = prefix + className;
+            }
+            return className;
+        };
+        Theme.prototype.getClass = function (key) {
+            return this.classes[key] || '';
+        };
+        Theme.prototype.getIconClass = function (buttonName, isRtl) {
+            var className;
+            if (isRtl && this.rtlIconClasses) {
+                className = this.rtlIconClasses[buttonName] || this.iconClasses[buttonName];
+            }
+            else {
+                className = this.iconClasses[buttonName];
+            }
+            if (className) {
+                return this.baseIconClass + " " + className;
+            }
+            return '';
+        };
+        Theme.prototype.getCustomButtonIconClass = function (customButtonProps) {
+            var className;
+            if (this.iconOverrideCustomButtonOption) {
+                className = customButtonProps[this.iconOverrideCustomButtonOption];
+                if (className) {
+                    return this.baseIconClass + " " + this.applyIconOverridePrefix(className);
+                }
+            }
+            return '';
+        };
+        return Theme;
+    }());
+    Theme.prototype.classes = {};
+    Theme.prototype.iconClasses = {};
+    Theme.prototype.baseIconClass = '';
+    Theme.prototype.iconOverridePrefix = '';
+
+    /// 
+    if (typeof FullCalendarVDom === 'undefined') {
+        throw new Error('Please import the top-level fullcalendar lib before attempting to import a plugin.');
+    }
+    var Component = FullCalendarVDom.Component;
+    var createElement = FullCalendarVDom.createElement;
+    var render = FullCalendarVDom.render;
+    var createRef = FullCalendarVDom.createRef;
+    var Fragment = FullCalendarVDom.Fragment;
+    var createContext = FullCalendarVDom.createContext;
+    var createPortal = FullCalendarVDom.createPortal;
+    var flushToDom = FullCalendarVDom.flushToDom;
+    var unmountComponentAtNode = FullCalendarVDom.unmountComponentAtNode;
+    /* eslint-enable */
+
+    var ScrollResponder = /** @class */ (function () {
+        function ScrollResponder(execFunc, emitter, scrollTime, scrollTimeReset) {
+            var _this = this;
+            this.execFunc = execFunc;
+            this.emitter = emitter;
+            this.scrollTime = scrollTime;
+            this.scrollTimeReset = scrollTimeReset;
+            this.handleScrollRequest = function (request) {
+                _this.queuedRequest = __assign({}, _this.queuedRequest || {}, request);
+                _this.drain();
+            };
+            emitter.on('_scrollRequest', this.handleScrollRequest);
+            this.fireInitialScroll();
+        }
+        ScrollResponder.prototype.detach = function () {
+            this.emitter.off('_scrollRequest', this.handleScrollRequest);
+        };
+        ScrollResponder.prototype.update = function (isDatesNew) {
+            if (isDatesNew && this.scrollTimeReset) {
+                this.fireInitialScroll(); // will drain
+            }
+            else {
+                this.drain();
+            }
+        };
+        ScrollResponder.prototype.fireInitialScroll = function () {
+            this.handleScrollRequest({
+                time: this.scrollTime,
+            });
+        };
+        ScrollResponder.prototype.drain = function () {
+            if (this.queuedRequest && this.execFunc(this.queuedRequest)) {
+                this.queuedRequest = null;
+            }
+        };
+        return ScrollResponder;
+    }());
+
+    var ViewContextType = createContext({}); // for Components
+    function buildViewContext(viewSpec, viewApi, viewOptions, dateProfileGenerator, dateEnv, theme, pluginHooks, dispatch, getCurrentData, emitter, calendarApi, registerInteractiveComponent, unregisterInteractiveComponent) {
+        return {
+            dateEnv: dateEnv,
+            options: viewOptions,
+            pluginHooks: pluginHooks,
+            emitter: emitter,
+            dispatch: dispatch,
+            getCurrentData: getCurrentData,
+            calendarApi: calendarApi,
+            viewSpec: viewSpec,
+            viewApi: viewApi,
+            dateProfileGenerator: dateProfileGenerator,
+            theme: theme,
+            isRtl: viewOptions.direction === 'rtl',
+            addResizeHandler: function (handler) {
+                emitter.on('_resize', handler);
+            },
+            removeResizeHandler: function (handler) {
+                emitter.off('_resize', handler);
+            },
+            createScrollResponder: function (execFunc) {
+                return new ScrollResponder(execFunc, emitter, createDuration(viewOptions.scrollTime), viewOptions.scrollTimeReset);
+            },
+            registerInteractiveComponent: registerInteractiveComponent,
+            unregisterInteractiveComponent: unregisterInteractiveComponent,
+        };
+    }
+
+    /* eslint max-classes-per-file: off */
+    var PureComponent = /** @class */ (function (_super) {
+        __extends(PureComponent, _super);
+        function PureComponent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        PureComponent.prototype.shouldComponentUpdate = function (nextProps, nextState) {
+            if (this.debug) {
+                // eslint-disable-next-line no-console
+                console.log(getUnequalProps(nextProps, this.props), getUnequalProps(nextState, this.state));
+            }
+            return !compareObjs(this.props, nextProps, this.propEquality) ||
+                !compareObjs(this.state, nextState, this.stateEquality);
+        };
+        PureComponent.addPropsEquality = addPropsEquality;
+        PureComponent.addStateEquality = addStateEquality;
+        PureComponent.contextType = ViewContextType;
+        return PureComponent;
+    }(Component));
+    PureComponent.prototype.propEquality = {};
+    PureComponent.prototype.stateEquality = {};
+    var BaseComponent = /** @class */ (function (_super) {
+        __extends(BaseComponent, _super);
+        function BaseComponent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        BaseComponent.contextType = ViewContextType;
+        return BaseComponent;
+    }(PureComponent));
+    function addPropsEquality(propEquality) {
+        var hash = Object.create(this.prototype.propEquality);
+        __assign(hash, propEquality);
+        this.prototype.propEquality = hash;
+    }
+    function addStateEquality(stateEquality) {
+        var hash = Object.create(this.prototype.stateEquality);
+        __assign(hash, stateEquality);
+        this.prototype.stateEquality = hash;
+    }
+    // use other one
+    function setRef(ref, current) {
+        if (typeof ref === 'function') {
+            ref(current);
+        }
+        else if (ref) {
+            // see https://github.com/facebook/react/issues/13029
+            ref.current = current;
+        }
+    }
+
+    /*
+    an INTERACTABLE date component
+
+    PURPOSES:
+    - hook up to fg, fill, and mirror renderers
+    - interface for dragging and hits
+    */
+    var DateComponent = /** @class */ (function (_super) {
+        __extends(DateComponent, _super);
+        function DateComponent() {
+            var _this = _super !== null && _super.apply(this, arguments) || this;
+            _this.uid = guid();
+            return _this;
+        }
+        // Hit System
+        // -----------------------------------------------------------------------------------------------------------------
+        DateComponent.prototype.prepareHits = function () {
+        };
+        DateComponent.prototype.queryHit = function (positionLeft, positionTop, elWidth, elHeight) {
+            return null; // this should be abstract
+        };
+        // Pointer Interaction Utils
+        // -----------------------------------------------------------------------------------------------------------------
+        DateComponent.prototype.isValidSegDownEl = function (el) {
+            return !this.props.eventDrag && // HACK
+                !this.props.eventResize && // HACK
+                !elementClosest(el, '.fc-event-mirror');
+        };
+        DateComponent.prototype.isValidDateDownEl = function (el) {
+            return !elementClosest(el, '.fc-event:not(.fc-bg-event)') &&
+                !elementClosest(el, '.fc-more-link') && // a "more.." link
+                !elementClosest(el, 'a[data-navlink]') && // a clickable nav link
+                !elementClosest(el, '.fc-popover'); // hack
+        };
+        return DateComponent;
+    }(BaseComponent));
+
+    // TODO: easier way to add new hooks? need to update a million things
+    function createPlugin(input) {
+        return {
+            id: guid(),
+            deps: input.deps || [],
+            reducers: input.reducers || [],
+            isLoadingFuncs: input.isLoadingFuncs || [],
+            contextInit: [].concat(input.contextInit || []),
+            eventRefiners: input.eventRefiners || {},
+            eventDefMemberAdders: input.eventDefMemberAdders || [],
+            eventSourceRefiners: input.eventSourceRefiners || {},
+            isDraggableTransformers: input.isDraggableTransformers || [],
+            eventDragMutationMassagers: input.eventDragMutationMassagers || [],
+            eventDefMutationAppliers: input.eventDefMutationAppliers || [],
+            dateSelectionTransformers: input.dateSelectionTransformers || [],
+            datePointTransforms: input.datePointTransforms || [],
+            dateSpanTransforms: input.dateSpanTransforms || [],
+            views: input.views || {},
+            viewPropsTransformers: input.viewPropsTransformers || [],
+            isPropsValid: input.isPropsValid || null,
+            externalDefTransforms: input.externalDefTransforms || [],
+            viewContainerAppends: input.viewContainerAppends || [],
+            eventDropTransformers: input.eventDropTransformers || [],
+            componentInteractions: input.componentInteractions || [],
+            calendarInteractions: input.calendarInteractions || [],
+            themeClasses: input.themeClasses || {},
+            eventSourceDefs: input.eventSourceDefs || [],
+            cmdFormatter: input.cmdFormatter,
+            recurringTypes: input.recurringTypes || [],
+            namedTimeZonedImpl: input.namedTimeZonedImpl,
+            initialView: input.initialView || '',
+            elementDraggingImpl: input.elementDraggingImpl,
+            optionChangeHandlers: input.optionChangeHandlers || {},
+            scrollGridImpl: input.scrollGridImpl || null,
+            contentTypeHandlers: input.contentTypeHandlers || {},
+            listenerRefiners: input.listenerRefiners || {},
+            optionRefiners: input.optionRefiners || {},
+            propSetHandlers: input.propSetHandlers || {},
+        };
+    }
+    function buildPluginHooks(pluginDefs, globalDefs) {
+        var isAdded = {};
+        var hooks = {
+            reducers: [],
+            isLoadingFuncs: [],
+            contextInit: [],
+            eventRefiners: {},
+            eventDefMemberAdders: [],
+            eventSourceRefiners: {},
+            isDraggableTransformers: [],
+            eventDragMutationMassagers: [],
+            eventDefMutationAppliers: [],
+            dateSelectionTransformers: [],
+            datePointTransforms: [],
+            dateSpanTransforms: [],
+            views: {},
+            viewPropsTransformers: [],
+            isPropsValid: null,
+            externalDefTransforms: [],
+            viewContainerAppends: [],
+            eventDropTransformers: [],
+            componentInteractions: [],
+            calendarInteractions: [],
+            themeClasses: {},
+            eventSourceDefs: [],
+            cmdFormatter: null,
+            recurringTypes: [],
+            namedTimeZonedImpl: null,
+            initialView: '',
+            elementDraggingImpl: null,
+            optionChangeHandlers: {},
+            scrollGridImpl: null,
+            contentTypeHandlers: {},
+            listenerRefiners: {},
+            optionRefiners: {},
+            propSetHandlers: {},
+        };
+        function addDefs(defs) {
+            for (var _i = 0, defs_1 = defs; _i < defs_1.length; _i++) {
+                var def = defs_1[_i];
+                if (!isAdded[def.id]) {
+                    isAdded[def.id] = true;
+                    addDefs(def.deps);
+                    hooks = combineHooks(hooks, def);
+                }
+            }
+        }
+        if (pluginDefs) {
+            addDefs(pluginDefs);
+        }
+        addDefs(globalDefs);
+        return hooks;
+    }
+    function buildBuildPluginHooks() {
+        var currentOverrideDefs = [];
+        var currentGlobalDefs = [];
+        var currentHooks;
+        return function (overrideDefs, globalDefs) {
+            if (!currentHooks || !isArraysEqual(overrideDefs, currentOverrideDefs) || !isArraysEqual(globalDefs, currentGlobalDefs)) {
+                currentHooks = buildPluginHooks(overrideDefs, globalDefs);
+            }
+            currentOverrideDefs = overrideDefs;
+            currentGlobalDefs = globalDefs;
+            return currentHooks;
+        };
+    }
+    function combineHooks(hooks0, hooks1) {
+        return {
+            reducers: hooks0.reducers.concat(hooks1.reducers),
+            isLoadingFuncs: hooks0.isLoadingFuncs.concat(hooks1.isLoadingFuncs),
+            contextInit: hooks0.contextInit.concat(hooks1.contextInit),
+            eventRefiners: __assign(__assign({}, hooks0.eventRefiners), hooks1.eventRefiners),
+            eventDefMemberAdders: hooks0.eventDefMemberAdders.concat(hooks1.eventDefMemberAdders),
+            eventSourceRefiners: __assign(__assign({}, hooks0.eventSourceRefiners), hooks1.eventSourceRefiners),
+            isDraggableTransformers: hooks0.isDraggableTransformers.concat(hooks1.isDraggableTransformers),
+            eventDragMutationMassagers: hooks0.eventDragMutationMassagers.concat(hooks1.eventDragMutationMassagers),
+            eventDefMutationAppliers: hooks0.eventDefMutationAppliers.concat(hooks1.eventDefMutationAppliers),
+            dateSelectionTransformers: hooks0.dateSelectionTransformers.concat(hooks1.dateSelectionTransformers),
+            datePointTransforms: hooks0.datePointTransforms.concat(hooks1.datePointTransforms),
+            dateSpanTransforms: hooks0.dateSpanTransforms.concat(hooks1.dateSpanTransforms),
+            views: __assign(__assign({}, hooks0.views), hooks1.views),
+            viewPropsTransformers: hooks0.viewPropsTransformers.concat(hooks1.viewPropsTransformers),
+            isPropsValid: hooks1.isPropsValid || hooks0.isPropsValid,
+            externalDefTransforms: hooks0.externalDefTransforms.concat(hooks1.externalDefTransforms),
+            viewContainerAppends: hooks0.viewContainerAppends.concat(hooks1.viewContainerAppends),
+            eventDropTransformers: hooks0.eventDropTransformers.concat(hooks1.eventDropTransformers),
+            calendarInteractions: hooks0.calendarInteractions.concat(hooks1.calendarInteractions),
+            componentInteractions: hooks0.componentInteractions.concat(hooks1.componentInteractions),
+            themeClasses: __assign(__assign({}, hooks0.themeClasses), hooks1.themeClasses),
+            eventSourceDefs: hooks0.eventSourceDefs.concat(hooks1.eventSourceDefs),
+            cmdFormatter: hooks1.cmdFormatter || hooks0.cmdFormatter,
+            recurringTypes: hooks0.recurringTypes.concat(hooks1.recurringTypes),
+            namedTimeZonedImpl: hooks1.namedTimeZonedImpl || hooks0.namedTimeZonedImpl,
+            initialView: hooks0.initialView || hooks1.initialView,
+            elementDraggingImpl: hooks0.elementDraggingImpl || hooks1.elementDraggingImpl,
+            optionChangeHandlers: __assign(__assign({}, hooks0.optionChangeHandlers), hooks1.optionChangeHandlers),
+            scrollGridImpl: hooks1.scrollGridImpl || hooks0.scrollGridImpl,
+            contentTypeHandlers: __assign(__assign({}, hooks0.contentTypeHandlers), hooks1.contentTypeHandlers),
+            listenerRefiners: __assign(__assign({}, hooks0.listenerRefiners), hooks1.listenerRefiners),
+            optionRefiners: __assign(__assign({}, hooks0.optionRefiners), hooks1.optionRefiners),
+            propSetHandlers: __assign(__assign({}, hooks0.propSetHandlers), hooks1.propSetHandlers),
+        };
+    }
+
+    var StandardTheme = /** @class */ (function (_super) {
+        __extends(StandardTheme, _super);
+        function StandardTheme() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        return StandardTheme;
+    }(Theme));
+    StandardTheme.prototype.classes = {
+        root: 'fc-theme-standard',
+        tableCellShaded: 'fc-cell-shaded',
+        buttonGroup: 'fc-button-group',
+        button: 'fc-button fc-button-primary',
+        buttonActive: 'fc-button-active',
+    };
+    StandardTheme.prototype.baseIconClass = 'fc-icon';
+    StandardTheme.prototype.iconClasses = {
+        close: 'fc-icon-x',
+        prev: 'fc-icon-chevron-left',
+        next: 'fc-icon-chevron-right',
+        prevYear: 'fc-icon-chevrons-left',
+        nextYear: 'fc-icon-chevrons-right',
+    };
+    StandardTheme.prototype.rtlIconClasses = {
+        prev: 'fc-icon-chevron-right',
+        next: 'fc-icon-chevron-left',
+        prevYear: 'fc-icon-chevrons-right',
+        nextYear: 'fc-icon-chevrons-left',
+    };
+    StandardTheme.prototype.iconOverrideOption = 'buttonIcons'; // TODO: make TS-friendly
+    StandardTheme.prototype.iconOverrideCustomButtonOption = 'icon';
+    StandardTheme.prototype.iconOverridePrefix = 'fc-icon-';
+
+    function compileViewDefs(defaultConfigs, overrideConfigs) {
+        var hash = {};
+        var viewType;
+        for (viewType in defaultConfigs) {
+            ensureViewDef(viewType, hash, defaultConfigs, overrideConfigs);
+        }
+        for (viewType in overrideConfigs) {
+            ensureViewDef(viewType, hash, defaultConfigs, overrideConfigs);
+        }
+        return hash;
+    }
+    function ensureViewDef(viewType, hash, defaultConfigs, overrideConfigs) {
+        if (hash[viewType]) {
+            return hash[viewType];
+        }
+        var viewDef = buildViewDef(viewType, hash, defaultConfigs, overrideConfigs);
+        if (viewDef) {
+            hash[viewType] = viewDef;
+        }
+        return viewDef;
+    }
+    function buildViewDef(viewType, hash, defaultConfigs, overrideConfigs) {
+        var defaultConfig = defaultConfigs[viewType];
+        var overrideConfig = overrideConfigs[viewType];
+        var queryProp = function (name) { return ((defaultConfig && defaultConfig[name] !== null) ? defaultConfig[name] :
+            ((overrideConfig && overrideConfig[name] !== null) ? overrideConfig[name] : null)); };
+        var theComponent = queryProp('component');
+        var superType = queryProp('superType');
+        var superDef = null;
+        if (superType) {
+            if (superType === viewType) {
+                throw new Error('Can\'t have a custom view type that references itself');
+            }
+            superDef = ensureViewDef(superType, hash, defaultConfigs, overrideConfigs);
+        }
+        if (!theComponent && superDef) {
+            theComponent = superDef.component;
+        }
+        if (!theComponent) {
+            return null; // don't throw a warning, might be settings for a single-unit view
+        }
+        return {
+            type: viewType,
+            component: theComponent,
+            defaults: __assign(__assign({}, (superDef ? superDef.defaults : {})), (defaultConfig ? defaultConfig.rawOptions : {})),
+            overrides: __assign(__assign({}, (superDef ? superDef.overrides : {})), (overrideConfig ? overrideConfig.rawOptions : {})),
+        };
+    }
+
+    /* eslint max-classes-per-file: off */
+    // NOTE: in JSX, you should always use this class with  arg. otherwise, will default to any???
+    var RenderHook = /** @class */ (function (_super) {
+        __extends(RenderHook, _super);
+        function RenderHook() {
+            var _this = _super !== null && _super.apply(this, arguments) || this;
+            _this.rootElRef = createRef();
+            _this.handleRootEl = function (el) {
+                setRef(_this.rootElRef, el);
+                if (_this.props.elRef) {
+                    setRef(_this.props.elRef, el);
+                }
+            };
+            return _this;
+        }
+        RenderHook.prototype.render = function () {
+            var _this = this;
+            var props = this.props;
+            var hookProps = props.hookProps;
+            return (createElement(MountHook, { hookProps: hookProps, didMount: props.didMount, willUnmount: props.willUnmount, elRef: this.handleRootEl }, function (rootElRef) { return (createElement(ContentHook, { hookProps: hookProps, content: props.content, defaultContent: props.defaultContent, backupElRef: _this.rootElRef }, function (innerElRef, innerContent) { return props.children(rootElRef, normalizeClassNames(props.classNames, hookProps), innerElRef, innerContent); })); }));
+        };
+        return RenderHook;
+    }(BaseComponent));
+    // TODO: rename to be about function, not default. use in above type
+    // for forcing rerender of components that use the ContentHook
+    var CustomContentRenderContext = createContext(0);
+    function ContentHook(props) {
+        return (createElement(CustomContentRenderContext.Consumer, null, function (renderId) { return (createElement(ContentHookInner, __assign({ renderId: renderId }, props))); }));
+    }
+    var ContentHookInner = /** @class */ (function (_super) {
+        __extends(ContentHookInner, _super);
+        function ContentHookInner() {
+            var _this = _super !== null && _super.apply(this, arguments) || this;
+            _this.innerElRef = createRef();
+            return _this;
+        }
+        ContentHookInner.prototype.render = function () {
+            return this.props.children(this.innerElRef, this.renderInnerContent());
+        };
+        ContentHookInner.prototype.componentDidMount = function () {
+            this.updateCustomContent();
+        };
+        ContentHookInner.prototype.componentDidUpdate = function () {
+            this.updateCustomContent();
+        };
+        ContentHookInner.prototype.componentWillUnmount = function () {
+            if (this.customContentInfo && this.customContentInfo.destroy) {
+                this.customContentInfo.destroy();
+            }
+        };
+        ContentHookInner.prototype.renderInnerContent = function () {
+            var customContentInfo = this.customContentInfo; // only populated if using non-[p]react node(s)
+            var innerContent = this.getInnerContent();
+            var meta = this.getContentMeta(innerContent);
+            // initial run, or content-type changing? (from vue -> react for example)
+            if (!customContentInfo || customContentInfo.contentKey !== meta.contentKey) {
+                // clearing old value
+                if (customContentInfo) {
+                    if (customContentInfo.destroy) {
+                        customContentInfo.destroy();
+                    }
+                    customContentInfo = this.customContentInfo = null;
+                }
+                // assigning new value
+                if (meta.contentKey) {
+                    customContentInfo = this.customContentInfo = __assign({ contentKey: meta.contentKey, contentVal: innerContent[meta.contentKey] }, meta.buildLifecycleFuncs());
+                }
+                // updating
+            }
+            else if (customContentInfo) {
+                customContentInfo.contentVal = innerContent[meta.contentKey];
+            }
+            return customContentInfo
+                ? [] // signal that something was specified
+                : innerContent; // assume a [p]react vdom node. use it
+        };
+        ContentHookInner.prototype.getInnerContent = function () {
+            var props = this.props;
+            var innerContent = normalizeContent(props.content, props.hookProps);
+            if (innerContent === undefined) { // use the default
+                innerContent = normalizeContent(props.defaultContent, props.hookProps);
+            }
+            return innerContent == null ? null : innerContent; // convert undefined to null (better for React)
+        };
+        ContentHookInner.prototype.getContentMeta = function (innerContent) {
+            var contentTypeHandlers = this.context.pluginHooks.contentTypeHandlers;
+            var contentKey = '';
+            var buildLifecycleFuncs = null;
+            if (innerContent) { // allowed to be null, for convenience to caller
+                for (var searchKey in contentTypeHandlers) {
+                    if (innerContent[searchKey] !== undefined) {
+                        contentKey = searchKey;
+                        buildLifecycleFuncs = contentTypeHandlers[searchKey];
+                        break;
+                    }
+                }
+            }
+            return { contentKey: contentKey, buildLifecycleFuncs: buildLifecycleFuncs };
+        };
+        ContentHookInner.prototype.updateCustomContent = function () {
+            if (this.customContentInfo) { // for non-[p]react
+                this.customContentInfo.render(this.innerElRef.current || this.props.backupElRef.current, // the element to render into
+                this.customContentInfo.contentVal);
+            }
+        };
+        return ContentHookInner;
+    }(BaseComponent));
+    var MountHook = /** @class */ (function (_super) {
+        __extends(MountHook, _super);
+        function MountHook() {
+            var _this = _super !== null && _super.apply(this, arguments) || this;
+            _this.handleRootEl = function (rootEl) {
+                _this.rootEl = rootEl;
+                if (_this.props.elRef) {
+                    setRef(_this.props.elRef, rootEl);
+                }
+            };
+            return _this;
+        }
+        MountHook.prototype.render = function () {
+            return this.props.children(this.handleRootEl);
+        };
+        MountHook.prototype.componentDidMount = function () {
+            var callback = this.props.didMount;
+            if (callback) {
+                callback(__assign(__assign({}, this.props.hookProps), { el: this.rootEl }));
+            }
+        };
+        MountHook.prototype.componentWillUnmount = function () {
+            var callback = this.props.willUnmount;
+            if (callback) {
+                callback(__assign(__assign({}, this.props.hookProps), { el: this.rootEl }));
+            }
+        };
+        return MountHook;
+    }(BaseComponent));
+    function buildClassNameNormalizer() {
+        var currentGenerator;
+        var currentHookProps;
+        var currentClassNames = [];
+        return function (generator, hookProps) {
+            if (!currentHookProps || !isPropsEqual(currentHookProps, hookProps) || generator !== currentGenerator) {
+                currentGenerator = generator;
+                currentHookProps = hookProps;
+                currentClassNames = normalizeClassNames(generator, hookProps);
+            }
+            return currentClassNames;
+        };
+    }
+    function normalizeClassNames(classNames, hookProps) {
+        if (typeof classNames === 'function') {
+            classNames = classNames(hookProps);
+        }
+        return parseClassNames(classNames);
+    }
+    function normalizeContent(input, hookProps) {
+        if (typeof input === 'function') {
+            return input(hookProps, createElement); // give the function the vdom-creation func
+        }
+        return input;
+    }
+
+    var ViewRoot = /** @class */ (function (_super) {
+        __extends(ViewRoot, _super);
+        function ViewRoot() {
+            var _this = _super !== null && _super.apply(this, arguments) || this;
+            _this.normalizeClassNames = buildClassNameNormalizer();
+            return _this;
+        }
+        ViewRoot.prototype.render = function () {
+            var _a = this, props = _a.props, context = _a.context;
+            var options = context.options;
+            var hookProps = { view: context.viewApi };
+            var customClassNames = this.normalizeClassNames(options.viewClassNames, hookProps);
+            return (createElement(MountHook, { hookProps: hookProps, didMount: options.viewDidMount, willUnmount: options.viewWillUnmount, elRef: props.elRef }, function (rootElRef) { return props.children(rootElRef, ["fc-" + props.viewSpec.type + "-view", 'fc-view'].concat(customClassNames)); }));
+        };
+        return ViewRoot;
+    }(BaseComponent));
+
+    function parseViewConfigs(inputs) {
+        return mapHash(inputs, parseViewConfig);
+    }
+    function parseViewConfig(input) {
+        var rawOptions = typeof input === 'function' ?
+            { component: input } :
+            input;
+        var component = rawOptions.component;
+        if (rawOptions.content) {
+            component = createViewHookComponent(rawOptions);
+            // TODO: remove content/classNames/didMount/etc from options?
+        }
+        return {
+            superType: rawOptions.type,
+            component: component,
+            rawOptions: rawOptions,
+        };
+    }
+    function createViewHookComponent(options) {
+        return function (viewProps) { return (createElement(ViewContextType.Consumer, null, function (context) { return (createElement(ViewRoot, { viewSpec: context.viewSpec }, function (viewElRef, viewClassNames) {
+            var hookProps = __assign(__assign({}, viewProps), { nextDayThreshold: context.options.nextDayThreshold });
+            return (createElement(RenderHook, { hookProps: hookProps, classNames: options.classNames, content: options.content, didMount: options.didMount, willUnmount: options.willUnmount, elRef: viewElRef }, function (rootElRef, customClassNames, innerElRef, innerContent) { return (createElement("div", { className: viewClassNames.concat(customClassNames).join(' '), ref: rootElRef }, innerContent)); }));
+        })); })); };
+    }
+
+    function buildViewSpecs(defaultInputs, optionOverrides, dynamicOptionOverrides, localeDefaults) {
+        var defaultConfigs = parseViewConfigs(defaultInputs);
+        var overrideConfigs = parseViewConfigs(optionOverrides.views);
+        var viewDefs = compileViewDefs(defaultConfigs, overrideConfigs);
+        return mapHash(viewDefs, function (viewDef) { return buildViewSpec(viewDef, overrideConfigs, optionOverrides, dynamicOptionOverrides, localeDefaults); });
+    }
+    function buildViewSpec(viewDef, overrideConfigs, optionOverrides, dynamicOptionOverrides, localeDefaults) {
+        var durationInput = viewDef.overrides.duration ||
+            viewDef.defaults.duration ||
+            dynamicOptionOverrides.duration ||
+            optionOverrides.duration;
+        var duration = null;
+        var durationUnit = '';
+        var singleUnit = '';
+        var singleUnitOverrides = {};
+        if (durationInput) {
+            duration = createDurationCached(durationInput);
+            if (duration) { // valid?
+                var denom = greatestDurationDenominator(duration);
+                durationUnit = denom.unit;
+                if (denom.value === 1) {
+                    singleUnit = durationUnit;
+                    singleUnitOverrides = overrideConfigs[durationUnit] ? overrideConfigs[durationUnit].rawOptions : {};
+                }
+            }
+        }
+        var queryButtonText = function (optionsSubset) {
+            var buttonTextMap = optionsSubset.buttonText || {};
+            var buttonTextKey = viewDef.defaults.buttonTextKey;
+            if (buttonTextKey != null && buttonTextMap[buttonTextKey] != null) {
+                return buttonTextMap[buttonTextKey];
+            }
+            if (buttonTextMap[viewDef.type] != null) {
+                return buttonTextMap[viewDef.type];
+            }
+            if (buttonTextMap[singleUnit] != null) {
+                return buttonTextMap[singleUnit];
+            }
+            return null;
+        };
+        return {
+            type: viewDef.type,
+            component: viewDef.component,
+            duration: duration,
+            durationUnit: durationUnit,
+            singleUnit: singleUnit,
+            optionDefaults: viewDef.defaults,
+            optionOverrides: __assign(__assign({}, singleUnitOverrides), viewDef.overrides),
+            buttonTextOverride: queryButtonText(dynamicOptionOverrides) ||
+                queryButtonText(optionOverrides) || // constructor-specified buttonText lookup hash takes precedence
+                viewDef.overrides.buttonText,
+            buttonTextDefault: queryButtonText(localeDefaults) ||
+                viewDef.defaults.buttonText ||
+                queryButtonText(BASE_OPTION_DEFAULTS) ||
+                viewDef.type, // fall back to given view name
+        };
+    }
+    // hack to get memoization working
+    var durationInputMap = {};
+    function createDurationCached(durationInput) {
+        var json = JSON.stringify(durationInput);
+        var res = durationInputMap[json];
+        if (res === undefined) {
+            res = createDuration(durationInput);
+            durationInputMap[json] = res;
+        }
+        return res;
+    }
+
+    var DateProfileGenerator = /** @class */ (function () {
+        function DateProfileGenerator(props) {
+            this.props = props;
+            this.nowDate = getNow(props.nowInput, props.dateEnv);
+            this.initHiddenDays();
+        }
+        /* Date Range Computation
+        ------------------------------------------------------------------------------------------------------------------*/
+        // Builds a structure with info about what the dates/ranges will be for the "prev" view.
+        DateProfileGenerator.prototype.buildPrev = function (currentDateProfile, currentDate, forceToValid) {
+            var dateEnv = this.props.dateEnv;
+            var prevDate = dateEnv.subtract(dateEnv.startOf(currentDate, currentDateProfile.currentRangeUnit), // important for start-of-month
+            currentDateProfile.dateIncrement);
+            return this.build(prevDate, -1, forceToValid);
+        };
+        // Builds a structure with info about what the dates/ranges will be for the "next" view.
+        DateProfileGenerator.prototype.buildNext = function (currentDateProfile, currentDate, forceToValid) {
+            var dateEnv = this.props.dateEnv;
+            var nextDate = dateEnv.add(dateEnv.startOf(currentDate, currentDateProfile.currentRangeUnit), // important for start-of-month
+            currentDateProfile.dateIncrement);
+            return this.build(nextDate, 1, forceToValid);
+        };
+        // Builds a structure holding dates/ranges for rendering around the given date.
+        // Optional direction param indicates whether the date is being incremented/decremented
+        // from its previous value. decremented = -1, incremented = 1 (default).
+        DateProfileGenerator.prototype.build = function (currentDate, direction, forceToValid) {
+            if (forceToValid === void 0) { forceToValid = true; }
+            var props = this.props;
+            var validRange;
+            var currentInfo;
+            var isRangeAllDay;
+            var renderRange;
+            var activeRange;
+            var isValid;
+            validRange = this.buildValidRange();
+            validRange = this.trimHiddenDays(validRange);
+            if (forceToValid) {
+                currentDate = constrainMarkerToRange(currentDate, validRange);
+            }
+            currentInfo = this.buildCurrentRangeInfo(currentDate, direction);
+            isRangeAllDay = /^(year|month|week|day)$/.test(currentInfo.unit);
+            renderRange = this.buildRenderRange(this.trimHiddenDays(currentInfo.range), currentInfo.unit, isRangeAllDay);
+            renderRange = this.trimHiddenDays(renderRange);
+            activeRange = renderRange;
+            if (!props.showNonCurrentDates) {
+                activeRange = intersectRanges(activeRange, currentInfo.range);
+            }
+            activeRange = this.adjustActiveRange(activeRange);
+            activeRange = intersectRanges(activeRange, validRange); // might return null
+            // it's invalid if the originally requested date is not contained,
+            // or if the range is completely outside of the valid range.
+            isValid = rangesIntersect(currentInfo.range, validRange);
+            return {
+                // constraint for where prev/next operations can go and where events can be dragged/resized to.
+                // an object with optional start and end properties.
+                validRange: validRange,
+                // range the view is formally responsible for.
+                // for example, a month view might have 1st-31st, excluding padded dates
+                currentRange: currentInfo.range,
+                // name of largest unit being displayed, like "month" or "week"
+                currentRangeUnit: currentInfo.unit,
+                isRangeAllDay: isRangeAllDay,
+                // dates that display events and accept drag-n-drop
+                // will be `null` if no dates accept events
+                activeRange: activeRange,
+                // date range with a rendered skeleton
+                // includes not-active days that need some sort of DOM
+                renderRange: renderRange,
+                // Duration object that denotes the first visible time of any given day
+                slotMinTime: props.slotMinTime,
+                // Duration object that denotes the exclusive visible end time of any given day
+                slotMaxTime: props.slotMaxTime,
+                isValid: isValid,
+                // how far the current date will move for a prev/next operation
+                dateIncrement: this.buildDateIncrement(currentInfo.duration),
+                // pass a fallback (might be null) ^
+            };
+        };
+        // Builds an object with optional start/end properties.
+        // Indicates the minimum/maximum dates to display.
+        // not responsible for trimming hidden days.
+        DateProfileGenerator.prototype.buildValidRange = function () {
+            var input = this.props.validRangeInput;
+            var simpleInput = typeof input === 'function'
+                ? input.call(this.props.calendarApi, this.nowDate)
+                : input;
+            return this.refineRange(simpleInput) ||
+                { start: null, end: null }; // completely open-ended
+        };
+        // Builds a structure with info about the "current" range, the range that is
+        // highlighted as being the current month for example.
+        // See build() for a description of `direction`.
+        // Guaranteed to have `range` and `unit` properties. `duration` is optional.
+        DateProfileGenerator.prototype.buildCurrentRangeInfo = function (date, direction) {
+            var props = this.props;
+            var duration = null;
+            var unit = null;
+            var range = null;
+            var dayCount;
+            if (props.duration) {
+                duration = props.duration;
+                unit = props.durationUnit;
+                range = this.buildRangeFromDuration(date, direction, duration, unit);
+            }
+            else if ((dayCount = this.props.dayCount)) {
+                unit = 'day';
+                range = this.buildRangeFromDayCount(date, direction, dayCount);
+            }
+            else if ((range = this.buildCustomVisibleRange(date))) {
+                unit = props.dateEnv.greatestWholeUnit(range.start, range.end).unit;
+            }
+            else {
+                duration = this.getFallbackDuration();
+                unit = greatestDurationDenominator(duration).unit;
+                range = this.buildRangeFromDuration(date, direction, duration, unit);
+            }
+            return { duration: duration, unit: unit, range: range };
+        };
+        DateProfileGenerator.prototype.getFallbackDuration = function () {
+            return createDuration({ day: 1 });
+        };
+        // Returns a new activeRange to have time values (un-ambiguate)
+        // slotMinTime or slotMaxTime causes the range to expand.
+        DateProfileGenerator.prototype.adjustActiveRange = function (range) {
+            var _a = this.props, dateEnv = _a.dateEnv, usesMinMaxTime = _a.usesMinMaxTime, slotMinTime = _a.slotMinTime, slotMaxTime = _a.slotMaxTime;
+            var start = range.start, end = range.end;
+            if (usesMinMaxTime) {
+                // expand active range if slotMinTime is negative (why not when positive?)
+                if (asRoughDays(slotMinTime) < 0) {
+                    start = startOfDay(start); // necessary?
+                    start = dateEnv.add(start, slotMinTime);
+                }
+                // expand active range if slotMaxTime is beyond one day (why not when negative?)
+                if (asRoughDays(slotMaxTime) > 1) {
+                    end = startOfDay(end); // necessary?
+                    end = addDays(end, -1);
+                    end = dateEnv.add(end, slotMaxTime);
+                }
+            }
+            return { start: start, end: end };
+        };
+        // Builds the "current" range when it is specified as an explicit duration.
+        // `unit` is the already-computed greatestDurationDenominator unit of duration.
+        DateProfileGenerator.prototype.buildRangeFromDuration = function (date, direction, duration, unit) {
+            var _a = this.props, dateEnv = _a.dateEnv, dateAlignment = _a.dateAlignment;
+            var start;
+            var end;
+            var res;
+            // compute what the alignment should be
+            if (!dateAlignment) {
+                var dateIncrement = this.props.dateIncrement;
+                if (dateIncrement) {
+                    // use the smaller of the two units
+                    if (asRoughMs(dateIncrement) < asRoughMs(duration)) {
+                        dateAlignment = greatestDurationDenominator(dateIncrement).unit;
+                    }
+                    else {
+                        dateAlignment = unit;
+                    }
+                }
+                else {
+                    dateAlignment = unit;
+                }
+            }
+            // if the view displays a single day or smaller
+            if (asRoughDays(duration) <= 1) {
+                if (this.isHiddenDay(start)) {
+                    start = this.skipHiddenDays(start, direction);
+                    start = startOfDay(start);
+                }
+            }
+            function computeRes() {
+                start = dateEnv.startOf(date, dateAlignment);
+                end = dateEnv.add(start, duration);
+                res = { start: start, end: end };
+            }
+            computeRes();
+            // if range is completely enveloped by hidden days, go past the hidden days
+            if (!this.trimHiddenDays(res)) {
+                date = this.skipHiddenDays(date, direction);
+                computeRes();
+            }
+            return res;
+        };
+        // Builds the "current" range when a dayCount is specified.
+        DateProfileGenerator.prototype.buildRangeFromDayCount = function (date, direction, dayCount) {
+            var _a = this.props, dateEnv = _a.dateEnv, dateAlignment = _a.dateAlignment;
+            var runningCount = 0;
+            var start = date;
+            var end;
+            if (dateAlignment) {
+                start = dateEnv.startOf(start, dateAlignment);
+            }
+            start = startOfDay(start);
+            start = this.skipHiddenDays(start, direction);
+            end = start;
+            do {
+                end = addDays(end, 1);
+                if (!this.isHiddenDay(end)) {
+                    runningCount += 1;
+                }
+            } while (runningCount < dayCount);
+            return { start: start, end: end };
+        };
+        // Builds a normalized range object for the "visible" range,
+        // which is a way to define the currentRange and activeRange at the same time.
+        DateProfileGenerator.prototype.buildCustomVisibleRange = function (date) {
+            var props = this.props;
+            var input = props.visibleRangeInput;
+            var simpleInput = typeof input === 'function'
+                ? input.call(props.calendarApi, props.dateEnv.toDate(date))
+                : input;
+            var range = this.refineRange(simpleInput);
+            if (range && (range.start == null || range.end == null)) {
+                return null;
+            }
+            return range;
+        };
+        // Computes the range that will represent the element/cells for *rendering*,
+        // but which may have voided days/times.
+        // not responsible for trimming hidden days.
+        DateProfileGenerator.prototype.buildRenderRange = function (currentRange, currentRangeUnit, isRangeAllDay) {
+            return currentRange;
+        };
+        // Compute the duration value that should be added/substracted to the current date
+        // when a prev/next operation happens.
+        DateProfileGenerator.prototype.buildDateIncrement = function (fallback) {
+            var dateIncrement = this.props.dateIncrement;
+            var customAlignment;
+            if (dateIncrement) {
+                return dateIncrement;
+            }
+            if ((customAlignment = this.props.dateAlignment)) {
+                return createDuration(1, customAlignment);
+            }
+            if (fallback) {
+                return fallback;
+            }
+            return createDuration({ days: 1 });
+        };
+        DateProfileGenerator.prototype.refineRange = function (rangeInput) {
+            if (rangeInput) {
+                var range = parseRange(rangeInput, this.props.dateEnv);
+                if (range) {
+                    range = computeVisibleDayRange(range);
+                }
+                return range;
+            }
+            return null;
+        };
+        /* Hidden Days
+        ------------------------------------------------------------------------------------------------------------------*/
+        // Initializes internal variables related to calculating hidden days-of-week
+        DateProfileGenerator.prototype.initHiddenDays = function () {
+            var hiddenDays = this.props.hiddenDays || []; // array of day-of-week indices that are hidden
+            var isHiddenDayHash = []; // is the day-of-week hidden? (hash with day-of-week-index -> bool)
+            var dayCnt = 0;
+            var i;
+            if (this.props.weekends === false) {
+                hiddenDays.push(0, 6); // 0=sunday, 6=saturday
+            }
+            for (i = 0; i < 7; i += 1) {
+                if (!(isHiddenDayHash[i] = hiddenDays.indexOf(i) !== -1)) {
+                    dayCnt += 1;
+                }
+            }
+            if (!dayCnt) {
+                throw new Error('invalid hiddenDays'); // all days were hidden? bad.
+            }
+            this.isHiddenDayHash = isHiddenDayHash;
+        };
+        // Remove days from the beginning and end of the range that are computed as hidden.
+        // If the whole range is trimmed off, returns null
+        DateProfileGenerator.prototype.trimHiddenDays = function (range) {
+            var start = range.start, end = range.end;
+            if (start) {
+                start = this.skipHiddenDays(start);
+            }
+            if (end) {
+                end = this.skipHiddenDays(end, -1, true);
+            }
+            if (start == null || end == null || start < end) {
+                return { start: start, end: end };
+            }
+            return null;
+        };
+        // Is the current day hidden?
+        // `day` is a day-of-week index (0-6), or a Date (used for UTC)
+        DateProfileGenerator.prototype.isHiddenDay = function (day) {
+            if (day instanceof Date) {
+                day = day.getUTCDay();
+            }
+            return this.isHiddenDayHash[day];
+        };
+        // Incrementing the current day until it is no longer a hidden day, returning a copy.
+        // DOES NOT CONSIDER validRange!
+        // If the initial value of `date` is not a hidden day, don't do anything.
+        // Pass `isExclusive` as `true` if you are dealing with an end date.
+        // `inc` defaults to `1` (increment one day forward each time)
+        DateProfileGenerator.prototype.skipHiddenDays = function (date, inc, isExclusive) {
+            if (inc === void 0) { inc = 1; }
+            if (isExclusive === void 0) { isExclusive = false; }
+            while (this.isHiddenDayHash[(date.getUTCDay() + (isExclusive ? inc : 0) + 7) % 7]) {
+                date = addDays(date, inc);
+            }
+            return date;
+        };
+        return DateProfileGenerator;
+    }());
+
+    function reduceViewType(viewType, action) {
+        switch (action.type) {
+            case 'CHANGE_VIEW_TYPE':
+                viewType = action.viewType;
+        }
+        return viewType;
+    }
+
+    function reduceDynamicOptionOverrides(dynamicOptionOverrides, action) {
+        var _a;
+        switch (action.type) {
+            case 'SET_OPTION':
+                return __assign(__assign({}, dynamicOptionOverrides), (_a = {}, _a[action.optionName] = action.rawOptionValue, _a));
+            default:
+                return dynamicOptionOverrides;
+        }
+    }
+
+    function reduceDateProfile(currentDateProfile, action, currentDate, dateProfileGenerator) {
+        var dp;
+        switch (action.type) {
+            case 'CHANGE_VIEW_TYPE':
+                return dateProfileGenerator.build(action.dateMarker || currentDate);
+            case 'CHANGE_DATE':
+                return dateProfileGenerator.build(action.dateMarker);
+            case 'PREV':
+                dp = dateProfileGenerator.buildPrev(currentDateProfile, currentDate);
+                if (dp.isValid) {
+                    return dp;
+                }
+                break;
+            case 'NEXT':
+                dp = dateProfileGenerator.buildNext(currentDateProfile, currentDate);
+                if (dp.isValid) {
+                    return dp;
+                }
+                break;
+        }
+        return currentDateProfile;
+    }
+
+    function initEventSources(calendarOptions, dateProfile, context) {
+        var activeRange = dateProfile ? dateProfile.activeRange : null;
+        return addSources({}, parseInitialSources(calendarOptions, context), activeRange, context);
+    }
+    function reduceEventSources(eventSources, action, dateProfile, context) {
+        var activeRange = dateProfile ? dateProfile.activeRange : null; // need this check?
+        switch (action.type) {
+            case 'ADD_EVENT_SOURCES': // already parsed
+                return addSources(eventSources, action.sources, activeRange, context);
+            case 'REMOVE_EVENT_SOURCE':
+                return removeSource(eventSources, action.sourceId);
+            case 'PREV': // TODO: how do we track all actions that affect dateProfile :(
+            case 'NEXT':
+            case 'CHANGE_DATE':
+            case 'CHANGE_VIEW_TYPE':
+                if (dateProfile) {
+                    return fetchDirtySources(eventSources, activeRange, context);
+                }
+                return eventSources;
+            case 'FETCH_EVENT_SOURCES':
+                return fetchSourcesByIds(eventSources, action.sourceIds ? // why no type?
+                    arrayToHash(action.sourceIds) :
+                    excludeStaticSources(eventSources, context), activeRange, action.isRefetch || false, context);
+            case 'RECEIVE_EVENTS':
+            case 'RECEIVE_EVENT_ERROR':
+                return receiveResponse(eventSources, action.sourceId, action.fetchId, action.fetchRange);
+            case 'REMOVE_ALL_EVENT_SOURCES':
+                return {};
+            default:
+                return eventSources;
+        }
+    }
+    function reduceEventSourcesNewTimeZone(eventSources, dateProfile, context) {
+        var activeRange = dateProfile ? dateProfile.activeRange : null; // need this check?
+        return fetchSourcesByIds(eventSources, excludeStaticSources(eventSources, context), activeRange, true, context);
+    }
+    function computeEventSourcesLoading(eventSources) {
+        for (var sourceId in eventSources) {
+            if (eventSources[sourceId].isFetching) {
+                return true;
+            }
+        }
+        return false;
+    }
+    function addSources(eventSourceHash, sources, fetchRange, context) {
+        var hash = {};
+        for (var _i = 0, sources_1 = sources; _i < sources_1.length; _i++) {
+            var source = sources_1[_i];
+            hash[source.sourceId] = source;
+        }
+        if (fetchRange) {
+            hash = fetchDirtySources(hash, fetchRange, context);
+        }
+        return __assign(__assign({}, eventSourceHash), hash);
+    }
+    function removeSource(eventSourceHash, sourceId) {
+        return filterHash(eventSourceHash, function (eventSource) { return eventSource.sourceId !== sourceId; });
+    }
+    function fetchDirtySources(sourceHash, fetchRange, context) {
+        return fetchSourcesByIds(sourceHash, filterHash(sourceHash, function (eventSource) { return isSourceDirty(eventSource, fetchRange, context); }), fetchRange, false, context);
+    }
+    function isSourceDirty(eventSource, fetchRange, context) {
+        if (!doesSourceNeedRange(eventSource, context)) {
+            return !eventSource.latestFetchId;
+        }
+        return !context.options.lazyFetching ||
+            !eventSource.fetchRange ||
+            eventSource.isFetching || // always cancel outdated in-progress fetches
+            fetchRange.start < eventSource.fetchRange.start ||
+            fetchRange.end > eventSource.fetchRange.end;
+    }
+    function fetchSourcesByIds(prevSources, sourceIdHash, fetchRange, isRefetch, context) {
+        var nextSources = {};
+        for (var sourceId in prevSources) {
+            var source = prevSources[sourceId];
+            if (sourceIdHash[sourceId]) {
+                nextSources[sourceId] = fetchSource(source, fetchRange, isRefetch, context);
+            }
+            else {
+                nextSources[sourceId] = source;
+            }
+        }
+        return nextSources;
+    }
+    function fetchSource(eventSource, fetchRange, isRefetch, context) {
+        var options = context.options, calendarApi = context.calendarApi;
+        var sourceDef = context.pluginHooks.eventSourceDefs[eventSource.sourceDefId];
+        var fetchId = guid();
+        sourceDef.fetch({
+            eventSource: eventSource,
+            range: fetchRange,
+            isRefetch: isRefetch,
+            context: context,
+        }, function (res) {
+            var rawEvents = res.rawEvents;
+            if (options.eventSourceSuccess) {
+                rawEvents = options.eventSourceSuccess.call(calendarApi, rawEvents, res.xhr) || rawEvents;
+            }
+            if (eventSource.success) {
+                rawEvents = eventSource.success.call(calendarApi, rawEvents, res.xhr) || rawEvents;
+            }
+            context.dispatch({
+                type: 'RECEIVE_EVENTS',
+                sourceId: eventSource.sourceId,
+                fetchId: fetchId,
+                fetchRange: fetchRange,
+                rawEvents: rawEvents,
+            });
+        }, function (error) {
+            console.warn(error.message, error);
+            if (options.eventSourceFailure) {
+                options.eventSourceFailure.call(calendarApi, error);
+            }
+            if (eventSource.failure) {
+                eventSource.failure(error);
+            }
+            context.dispatch({
+                type: 'RECEIVE_EVENT_ERROR',
+                sourceId: eventSource.sourceId,
+                fetchId: fetchId,
+                fetchRange: fetchRange,
+                error: error,
+            });
+        });
+        return __assign(__assign({}, eventSource), { isFetching: true, latestFetchId: fetchId });
+    }
+    function receiveResponse(sourceHash, sourceId, fetchId, fetchRange) {
+        var _a;
+        var eventSource = sourceHash[sourceId];
+        if (eventSource && // not already removed
+            fetchId === eventSource.latestFetchId) {
+            return __assign(__assign({}, sourceHash), (_a = {}, _a[sourceId] = __assign(__assign({}, eventSource), { isFetching: false, fetchRange: fetchRange }), _a));
+        }
+        return sourceHash;
+    }
+    function excludeStaticSources(eventSources, context) {
+        return filterHash(eventSources, function (eventSource) { return doesSourceNeedRange(eventSource, context); });
+    }
+    function parseInitialSources(rawOptions, context) {
+        var refiners = buildEventSourceRefiners(context);
+        var rawSources = [].concat(rawOptions.eventSources || []);
+        var sources = []; // parsed
+        if (rawOptions.initialEvents) {
+            rawSources.unshift(rawOptions.initialEvents);
+        }
+        if (rawOptions.events) {
+            rawSources.unshift(rawOptions.events);
+        }
+        for (var _i = 0, rawSources_1 = rawSources; _i < rawSources_1.length; _i++) {
+            var rawSource = rawSources_1[_i];
+            var source = parseEventSource(rawSource, context, refiners);
+            if (source) {
+                sources.push(source);
+            }
+        }
+        return sources;
+    }
+    function doesSourceNeedRange(eventSource, context) {
+        var defs = context.pluginHooks.eventSourceDefs;
+        return !defs[eventSource.sourceDefId].ignoreRange;
+    }
+
+    function reduceEventStore(eventStore, action, eventSources, dateProfile, context) {
+        switch (action.type) {
+            case 'RECEIVE_EVENTS': // raw
+                return receiveRawEvents(eventStore, eventSources[action.sourceId], action.fetchId, action.fetchRange, action.rawEvents, context);
+            case 'ADD_EVENTS': // already parsed, but not expanded
+                return addEvent(eventStore, action.eventStore, // new ones
+                dateProfile ? dateProfile.activeRange : null, context);
+            case 'RESET_EVENTS':
+                return action.eventStore;
+            case 'MERGE_EVENTS': // already parsed and expanded
+                return mergeEventStores(eventStore, action.eventStore);
+            case 'PREV': // TODO: how do we track all actions that affect dateProfile :(
+            case 'NEXT':
+            case 'CHANGE_DATE':
+            case 'CHANGE_VIEW_TYPE':
+                if (dateProfile) {
+                    return expandRecurring(eventStore, dateProfile.activeRange, context);
+                }
+                return eventStore;
+            case 'REMOVE_EVENTS':
+                return excludeSubEventStore(eventStore, action.eventStore);
+            case 'REMOVE_EVENT_SOURCE':
+                return excludeEventsBySourceId(eventStore, action.sourceId);
+            case 'REMOVE_ALL_EVENT_SOURCES':
+                return filterEventStoreDefs(eventStore, function (eventDef) { return (!eventDef.sourceId // only keep events with no source id
+                ); });
+            case 'REMOVE_ALL_EVENTS':
+                return createEmptyEventStore();
+            default:
+                return eventStore;
+        }
+    }
+    function receiveRawEvents(eventStore, eventSource, fetchId, fetchRange, rawEvents, context) {
+        if (eventSource && // not already removed
+            fetchId === eventSource.latestFetchId // TODO: wish this logic was always in event-sources
+        ) {
+            var subset = parseEvents(transformRawEvents(rawEvents, eventSource, context), eventSource, context);
+            if (fetchRange) {
+                subset = expandRecurring(subset, fetchRange, context);
+            }
+            return mergeEventStores(excludeEventsBySourceId(eventStore, eventSource.sourceId), subset);
+        }
+        return eventStore;
+    }
+    function transformRawEvents(rawEvents, eventSource, context) {
+        var calEachTransform = context.options.eventDataTransform;
+        var sourceEachTransform = eventSource ? eventSource.eventDataTransform : null;
+        if (sourceEachTransform) {
+            rawEvents = transformEachRawEvent(rawEvents, sourceEachTransform);
+        }
+        if (calEachTransform) {
+            rawEvents = transformEachRawEvent(rawEvents, calEachTransform);
+        }
+        return rawEvents;
+    }
+    function transformEachRawEvent(rawEvents, func) {
+        var refinedEvents;
+        if (!func) {
+            refinedEvents = rawEvents;
+        }
+        else {
+            refinedEvents = [];
+            for (var _i = 0, rawEvents_1 = rawEvents; _i < rawEvents_1.length; _i++) {
+                var rawEvent = rawEvents_1[_i];
+                var refinedEvent = func(rawEvent);
+                if (refinedEvent) {
+                    refinedEvents.push(refinedEvent);
+                }
+                else if (refinedEvent == null) {
+                    refinedEvents.push(rawEvent);
+                } // if a different falsy value, do nothing
+            }
+        }
+        return refinedEvents;
+    }
+    function addEvent(eventStore, subset, expandRange, context) {
+        if (expandRange) {
+            subset = expandRecurring(subset, expandRange, context);
+        }
+        return mergeEventStores(eventStore, subset);
+    }
+    function rezoneEventStoreDates(eventStore, oldDateEnv, newDateEnv) {
+        var defs = eventStore.defs;
+        var instances = mapHash(eventStore.instances, function (instance) {
+            var def = defs[instance.defId];
+            if (def.allDay || def.recurringDef) {
+                return instance; // isn't dependent on timezone
+            }
+            return __assign(__assign({}, instance), { range: {
+                    start: newDateEnv.createMarker(oldDateEnv.toDate(instance.range.start, instance.forcedStartTzo)),
+                    end: newDateEnv.createMarker(oldDateEnv.toDate(instance.range.end, instance.forcedEndTzo)),
+                }, forcedStartTzo: newDateEnv.canComputeOffset ? null : instance.forcedStartTzo, forcedEndTzo: newDateEnv.canComputeOffset ? null : instance.forcedEndTzo });
+        });
+        return { defs: defs, instances: instances };
+    }
+    function excludeEventsBySourceId(eventStore, sourceId) {
+        return filterEventStoreDefs(eventStore, function (eventDef) { return eventDef.sourceId !== sourceId; });
+    }
+    // QUESTION: why not just return instances? do a general object-property-exclusion util
+    function excludeInstances(eventStore, removals) {
+        return {
+            defs: eventStore.defs,
+            instances: filterHash(eventStore.instances, function (instance) { return !removals[instance.instanceId]; }),
+        };
+    }
+
+    function reduceDateSelection(currentSelection, action) {
+        switch (action.type) {
+            case 'UNSELECT_DATES':
+                return null;
+            case 'SELECT_DATES':
+                return action.selection;
+            default:
+                return currentSelection;
+        }
+    }
+
+    function reduceSelectedEvent(currentInstanceId, action) {
+        switch (action.type) {
+            case 'UNSELECT_EVENT':
+                return '';
+            case 'SELECT_EVENT':
+                return action.eventInstanceId;
+            default:
+                return currentInstanceId;
+        }
+    }
+
+    function reduceEventDrag(currentDrag, action) {
+        var newDrag;
+        switch (action.type) {
+            case 'UNSET_EVENT_DRAG':
+                return null;
+            case 'SET_EVENT_DRAG':
+                newDrag = action.state;
+                return {
+                    affectedEvents: newDrag.affectedEvents,
+                    mutatedEvents: newDrag.mutatedEvents,
+                    isEvent: newDrag.isEvent,
+                };
+            default:
+                return currentDrag;
+        }
+    }
+
+    function reduceEventResize(currentResize, action) {
+        var newResize;
+        switch (action.type) {
+            case 'UNSET_EVENT_RESIZE':
+                return null;
+            case 'SET_EVENT_RESIZE':
+                newResize = action.state;
+                return {
+                    affectedEvents: newResize.affectedEvents,
+                    mutatedEvents: newResize.mutatedEvents,
+                    isEvent: newResize.isEvent,
+                };
+            default:
+                return currentResize;
+        }
+    }
+
+    function parseToolbars(calendarOptions, calendarOptionOverrides, theme, viewSpecs, calendarApi) {
+        var viewsWithButtons = [];
+        var headerToolbar = calendarOptions.headerToolbar ? parseToolbar(calendarOptions.headerToolbar, calendarOptions, calendarOptionOverrides, theme, viewSpecs, calendarApi, viewsWithButtons) : null;
+        var footerToolbar = calendarOptions.footerToolbar ? parseToolbar(calendarOptions.footerToolbar, calendarOptions, calendarOptionOverrides, theme, viewSpecs, calendarApi, viewsWithButtons) : null;
+        return { headerToolbar: headerToolbar, footerToolbar: footerToolbar, viewsWithButtons: viewsWithButtons };
+    }
+    function parseToolbar(sectionStrHash, calendarOptions, calendarOptionOverrides, theme, viewSpecs, calendarApi, viewsWithButtons) {
+        return mapHash(sectionStrHash, function (sectionStr) { return parseSection(sectionStr, calendarOptions, calendarOptionOverrides, theme, viewSpecs, calendarApi, viewsWithButtons); });
+    }
+    /*
+    BAD: querying icons and text here. should be done at render time
+    */
+    function parseSection(sectionStr, calendarOptions, calendarOptionOverrides, theme, viewSpecs, calendarApi, viewsWithButtons) {
+        var isRtl = calendarOptions.direction === 'rtl';
+        var calendarCustomButtons = calendarOptions.customButtons || {};
+        var calendarButtonTextOverrides = calendarOptionOverrides.buttonText || {};
+        var calendarButtonText = calendarOptions.buttonText || {};
+        var sectionSubstrs = sectionStr ? sectionStr.split(' ') : [];
+        return sectionSubstrs.map(function (buttonGroupStr) { return (buttonGroupStr.split(',').map(function (buttonName) {
+            if (buttonName === 'title') {
+                return { buttonName: buttonName };
+            }
+            var customButtonProps;
+            var viewSpec;
+            var buttonClick;
+            var buttonIcon; // only one of these will be set
+            var buttonText; // "
+            if ((customButtonProps = calendarCustomButtons[buttonName])) {
+                buttonClick = function (ev) {
+                    if (customButtonProps.click) {
+                        customButtonProps.click.call(ev.target, ev, ev.target); // TODO: use Calendar this context?
+                    }
+                };
+                (buttonIcon = theme.getCustomButtonIconClass(customButtonProps)) ||
+                    (buttonIcon = theme.getIconClass(buttonName, isRtl)) ||
+                    (buttonText = customButtonProps.text);
+            }
+            else if ((viewSpec = viewSpecs[buttonName])) {
+                viewsWithButtons.push(buttonName);
+                buttonClick = function () {
+                    calendarApi.changeView(buttonName);
+                };
+                (buttonText = viewSpec.buttonTextOverride) ||
+                    (buttonIcon = theme.getIconClass(buttonName, isRtl)) ||
+                    (buttonText = viewSpec.buttonTextDefault);
+            }
+            else if (calendarApi[buttonName]) { // a calendarApi method
+                buttonClick = function () {
+                    calendarApi[buttonName]();
+                };
+                (buttonText = calendarButtonTextOverrides[buttonName]) ||
+                    (buttonIcon = theme.getIconClass(buttonName, isRtl)) ||
+                    (buttonText = calendarButtonText[buttonName]);
+                //            ^ everything else is considered default
+            }
+            return { buttonName: buttonName, buttonClick: buttonClick, buttonIcon: buttonIcon, buttonText: buttonText };
+        })); });
+    }
+
+    var eventSourceDef$3 = {
+        ignoreRange: true,
+        parseMeta: function (refined) {
+            if (Array.isArray(refined.events)) {
+                return refined.events;
+            }
+            return null;
+        },
+        fetch: function (arg, success) {
+            success({
+                rawEvents: arg.eventSource.meta,
+            });
+        },
+    };
+    var arrayEventSourcePlugin = createPlugin({
+        eventSourceDefs: [eventSourceDef$3],
+    });
+
+    var eventSourceDef$2 = {
+        parseMeta: function (refined) {
+            if (typeof refined.events === 'function') {
+                return refined.events;
+            }
+            return null;
+        },
+        fetch: function (arg, success, failure) {
+            var dateEnv = arg.context.dateEnv;
+            var func = arg.eventSource.meta;
+            unpromisify(func.bind(null, buildRangeApiWithTimeZone(arg.range, dateEnv)), function (rawEvents) {
+                success({ rawEvents: rawEvents }); // needs an object response
+            }, failure);
+        },
+    };
+    var funcEventSourcePlugin = createPlugin({
+        eventSourceDefs: [eventSourceDef$2],
+    });
+
+    function requestJson(method, url, params, successCallback, failureCallback) {
+        method = method.toUpperCase();
+        var body = null;
+        if (method === 'GET') {
+            url = injectQueryStringParams(url, params);
+        }
+        else {
+            body = encodeParams(params);
+        }
+        var xhr = new XMLHttpRequest();
+        xhr.open(method, url, true);
+        if (method !== 'GET') {
+            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
+        }
+        xhr.onload = function () {
+            if (xhr.status >= 200 && xhr.status < 400) {
+                var parsed = false;
+                var res = void 0;
+                try {
+                    res = JSON.parse(xhr.responseText);
+                    parsed = true;
+                }
+                catch (err) {
+                    // will handle parsed=false
+                }
+                if (parsed) {
+                    successCallback(res, xhr);
+                }
+                else {
+                    failureCallback('Failure parsing JSON', xhr);
+                }
+            }
+            else {
+                failureCallback('Request failed', xhr);
+            }
+        };
+        xhr.onerror = function () {
+            failureCallback('Request failed', xhr);
+        };
+        xhr.send(body);
+    }
+    function injectQueryStringParams(url, params) {
+        return url +
+            (url.indexOf('?') === -1 ? '?' : '&') +
+            encodeParams(params);
+    }
+    function encodeParams(params) {
+        var parts = [];
+        for (var key in params) {
+            parts.push(encodeURIComponent(key) + "=" + encodeURIComponent(params[key]));
+        }
+        return parts.join('&');
+    }
+
+    var JSON_FEED_EVENT_SOURCE_REFINERS = {
+        method: String,
+        extraParams: identity,
+        startParam: String,
+        endParam: String,
+        timeZoneParam: String,
+    };
+
+    var eventSourceDef$1 = {
+        parseMeta: function (refined) {
+            if (refined.url && (refined.format === 'json' || !refined.format)) {
+                return {
+                    url: refined.url,
+                    format: 'json',
+                    method: (refined.method || 'GET').toUpperCase(),
+                    extraParams: refined.extraParams,
+                    startParam: refined.startParam,
+                    endParam: refined.endParam,
+                    timeZoneParam: refined.timeZoneParam,
+                };
+            }
+            return null;
+        },
+        fetch: function (arg, success, failure) {
+            var meta = arg.eventSource.meta;
+            var requestParams = buildRequestParams$1(meta, arg.range, arg.context);
+            requestJson(meta.method, meta.url, requestParams, function (rawEvents, xhr) {
+                success({ rawEvents: rawEvents, xhr: xhr });
+            }, function (errorMessage, xhr) {
+                failure({ message: errorMessage, xhr: xhr });
+            });
+        },
+    };
+    var jsonFeedEventSourcePlugin = createPlugin({
+        eventSourceRefiners: JSON_FEED_EVENT_SOURCE_REFINERS,
+        eventSourceDefs: [eventSourceDef$1],
+    });
+    function buildRequestParams$1(meta, range, context) {
+        var dateEnv = context.dateEnv, options = context.options;
+        var startParam;
+        var endParam;
+        var timeZoneParam;
+        var customRequestParams;
+        var params = {};
+        startParam = meta.startParam;
+        if (startParam == null) {
+            startParam = options.startParam;
+        }
+        endParam = meta.endParam;
+        if (endParam == null) {
+            endParam = options.endParam;
+        }
+        timeZoneParam = meta.timeZoneParam;
+        if (timeZoneParam == null) {
+            timeZoneParam = options.timeZoneParam;
+        }
+        // retrieve any outbound GET/POST data from the options
+        if (typeof meta.extraParams === 'function') {
+            // supplied as a function that returns a key/value object
+            customRequestParams = meta.extraParams();
+        }
+        else {
+            // probably supplied as a straight key/value object
+            customRequestParams = meta.extraParams || {};
+        }
+        __assign(params, customRequestParams);
+        params[startParam] = dateEnv.formatIso(range.start);
+        params[endParam] = dateEnv.formatIso(range.end);
+        if (dateEnv.timeZone !== 'local') {
+            params[timeZoneParam] = dateEnv.timeZone;
+        }
+        return params;
+    }
+
+    var SIMPLE_RECURRING_REFINERS = {
+        daysOfWeek: identity,
+        startTime: createDuration,
+        endTime: createDuration,
+        duration: createDuration,
+        startRecur: identity,
+        endRecur: identity,
+    };
+
+    var recurring = {
+        parse: function (refined, dateEnv) {
+            if (refined.daysOfWeek || refined.startTime || refined.endTime || refined.startRecur || refined.endRecur) {
+                var recurringData = {
+                    daysOfWeek: refined.daysOfWeek || null,
+                    startTime: refined.startTime || null,
+                    endTime: refined.endTime || null,
+                    startRecur: refined.startRecur ? dateEnv.createMarker(refined.startRecur) : null,
+                    endRecur: refined.endRecur ? dateEnv.createMarker(refined.endRecur) : null,
+                };
+                var duration = void 0;
+                if (refined.duration) {
+                    duration = refined.duration;
+                }
+                if (!duration && refined.startTime && refined.endTime) {
+                    duration = subtractDurations(refined.endTime, refined.startTime);
+                }
+                return {
+                    allDayGuess: Boolean(!refined.startTime && !refined.endTime),
+                    duration: duration,
+                    typeData: recurringData, // doesn't need endTime anymore but oh well
+                };
+            }
+            return null;
+        },
+        expand: function (typeData, framingRange, dateEnv) {
+            var clippedFramingRange = intersectRanges(framingRange, { start: typeData.startRecur, end: typeData.endRecur });
+            if (clippedFramingRange) {
+                return expandRanges(typeData.daysOfWeek, typeData.startTime, clippedFramingRange, dateEnv);
+            }
+            return [];
+        },
+    };
+    var simpleRecurringEventsPlugin = createPlugin({
+        recurringTypes: [recurring],
+        eventRefiners: SIMPLE_RECURRING_REFINERS,
+    });
+    function expandRanges(daysOfWeek, startTime, framingRange, dateEnv) {
+        var dowHash = daysOfWeek ? arrayToHash(daysOfWeek) : null;
+        var dayMarker = startOfDay(framingRange.start);
+        var endMarker = framingRange.end;
+        var instanceStarts = [];
+        while (dayMarker < endMarker) {
+            var instanceStart 
+            // if everyday, or this particular day-of-week
+            = void 0;
+            // if everyday, or this particular day-of-week
+            if (!dowHash || dowHash[dayMarker.getUTCDay()]) {
+                if (startTime) {
+                    instanceStart = dateEnv.add(dayMarker, startTime);
+                }
+                else {
+                    instanceStart = dayMarker;
+                }
+                instanceStarts.push(instanceStart);
+            }
+            dayMarker = addDays(dayMarker, 1);
+        }
+        return instanceStarts;
+    }
+
+    var changeHandlerPlugin = createPlugin({
+        optionChangeHandlers: {
+            events: function (events, context) {
+                handleEventSources([events], context);
+            },
+            eventSources: handleEventSources,
+        },
+    });
+    /*
+    BUG: if `event` was supplied, all previously-given `eventSources` will be wiped out
+    */
+    function handleEventSources(inputs, context) {
+        var unfoundSources = hashValuesToArray(context.getCurrentData().eventSources);
+        var newInputs = [];
+        for (var _i = 0, inputs_1 = inputs; _i < inputs_1.length; _i++) {
+            var input = inputs_1[_i];
+            var inputFound = false;
+            for (var i = 0; i < unfoundSources.length; i += 1) {
+                if (unfoundSources[i]._raw === input) {
+                    unfoundSources.splice(i, 1); // delete
+                    inputFound = true;
+                    break;
+                }
+            }
+            if (!inputFound) {
+                newInputs.push(input);
+            }
+        }
+        for (var _a = 0, unfoundSources_1 = unfoundSources; _a < unfoundSources_1.length; _a++) {
+            var unfoundSource = unfoundSources_1[_a];
+            context.dispatch({
+                type: 'REMOVE_EVENT_SOURCE',
+                sourceId: unfoundSource.sourceId,
+            });
+        }
+        for (var _b = 0, newInputs_1 = newInputs; _b < newInputs_1.length; _b++) {
+            var newInput = newInputs_1[_b];
+            context.calendarApi.addEventSource(newInput);
+        }
+    }
+
+    function handleDateProfile(dateProfile, context) {
+        context.emitter.trigger('datesSet', __assign(__assign({}, buildRangeApiWithTimeZone(dateProfile.activeRange, context.dateEnv)), { view: context.viewApi }));
+    }
+
+    function handleEventStore(eventStore, context) {
+        var emitter = context.emitter;
+        if (emitter.hasHandlers('eventsSet')) {
+            emitter.trigger('eventsSet', buildEventApis(eventStore, context));
+        }
+    }
+
+    /*
+    this array is exposed on the root namespace so that UMD plugins can add to it.
+    see the rollup-bundles script.
+    */
+    var globalPlugins = [
+        arrayEventSourcePlugin,
+        funcEventSourcePlugin,
+        jsonFeedEventSourcePlugin,
+        simpleRecurringEventsPlugin,
+        changeHandlerPlugin,
+        createPlugin({
+            isLoadingFuncs: [
+                function (state) { return computeEventSourcesLoading(state.eventSources); },
+            ],
+            contentTypeHandlers: {
+                html: function () { return ({ render: injectHtml }); },
+                domNodes: function () { return ({ render: injectDomNodes }); },
+            },
+            propSetHandlers: {
+                dateProfile: handleDateProfile,
+                eventStore: handleEventStore,
+            },
+        }),
+    ];
+    function injectHtml(el, html) {
+        el.innerHTML = html;
+    }
+    function injectDomNodes(el, domNodes) {
+        var oldNodes = Array.prototype.slice.call(el.childNodes); // TODO: use array util
+        var newNodes = Array.prototype.slice.call(domNodes); // TODO: use array util
+        if (!isArraysEqual(oldNodes, newNodes)) {
+            for (var _i = 0, newNodes_1 = newNodes; _i < newNodes_1.length; _i++) {
+                var newNode = newNodes_1[_i];
+                el.appendChild(newNode);
+            }
+            oldNodes.forEach(removeElement);
+        }
+    }
+
+    var DelayedRunner = /** @class */ (function () {
+        function DelayedRunner(drainedOption) {
+            this.drainedOption = drainedOption;
+            this.isRunning = false;
+            this.isDirty = false;
+            this.pauseDepths = {};
+            this.timeoutId = 0;
+        }
+        DelayedRunner.prototype.request = function (delay) {
+            this.isDirty = true;
+            if (!this.isPaused()) {
+                this.clearTimeout();
+                if (delay == null) {
+                    this.tryDrain();
+                }
+                else {
+                    this.timeoutId = setTimeout(// NOT OPTIMAL! TODO: look at debounce
+                    this.tryDrain.bind(this), delay);
+                }
+            }
+        };
+        DelayedRunner.prototype.pause = function (scope) {
+            if (scope === void 0) { scope = ''; }
+            var pauseDepths = this.pauseDepths;
+            pauseDepths[scope] = (pauseDepths[scope] || 0) + 1;
+            this.clearTimeout();
+        };
+        DelayedRunner.prototype.resume = function (scope, force) {
+            if (scope === void 0) { scope = ''; }
+            var pauseDepths = this.pauseDepths;
+            if (scope in pauseDepths) {
+                if (force) {
+                    delete pauseDepths[scope];
+                }
+                else {
+                    pauseDepths[scope] -= 1;
+                    var depth = pauseDepths[scope];
+                    if (depth <= 0) {
+                        delete pauseDepths[scope];
+                    }
+                }
+                this.tryDrain();
+            }
+        };
+        DelayedRunner.prototype.isPaused = function () {
+            return Object.keys(this.pauseDepths).length;
+        };
+        DelayedRunner.prototype.tryDrain = function () {
+            if (!this.isRunning && !this.isPaused()) {
+                this.isRunning = true;
+                while (this.isDirty) {
+                    this.isDirty = false;
+                    this.drained(); // might set isDirty to true again
+                }
+                this.isRunning = false;
+            }
+        };
+        DelayedRunner.prototype.clear = function () {
+            this.clearTimeout();
+            this.isDirty = false;
+            this.pauseDepths = {};
+        };
+        DelayedRunner.prototype.clearTimeout = function () {
+            if (this.timeoutId) {
+                clearTimeout(this.timeoutId);
+                this.timeoutId = 0;
+            }
+        };
+        DelayedRunner.prototype.drained = function () {
+            if (this.drainedOption) {
+                this.drainedOption();
+            }
+        };
+        return DelayedRunner;
+    }());
+
+    var TaskRunner = /** @class */ (function () {
+        function TaskRunner(runTaskOption, drainedOption) {
+            this.runTaskOption = runTaskOption;
+            this.drainedOption = drainedOption;
+            this.queue = [];
+            this.delayedRunner = new DelayedRunner(this.drain.bind(this));
+        }
+        TaskRunner.prototype.request = function (task, delay) {
+            this.queue.push(task);
+            this.delayedRunner.request(delay);
+        };
+        TaskRunner.prototype.pause = function (scope) {
+            this.delayedRunner.pause(scope);
+        };
+        TaskRunner.prototype.resume = function (scope, force) {
+            this.delayedRunner.resume(scope, force);
+        };
+        TaskRunner.prototype.drain = function () {
+            var queue = this.queue;
+            while (queue.length) {
+                var completedTasks = [];
+                var task = void 0;
+                while ((task = queue.shift())) {
+                    this.runTask(task);
+                    completedTasks.push(task);
+                }
+                this.drained(completedTasks);
+            } // keep going, in case new tasks were added in the drained handler
+        };
+        TaskRunner.prototype.runTask = function (task) {
+            if (this.runTaskOption) {
+                this.runTaskOption(task);
+            }
+        };
+        TaskRunner.prototype.drained = function (completedTasks) {
+            if (this.drainedOption) {
+                this.drainedOption(completedTasks);
+            }
+        };
+        return TaskRunner;
+    }());
+
+    // Computes what the title at the top of the calendarApi should be for this view
+    function buildTitle(dateProfile, viewOptions, dateEnv) {
+        var range;
+        // for views that span a large unit of time, show the proper interval, ignoring stray days before and after
+        if (/^(year|month)$/.test(dateProfile.currentRangeUnit)) {
+            range = dateProfile.currentRange;
+        }
+        else { // for day units or smaller, use the actual day range
+            range = dateProfile.activeRange;
+        }
+        return dateEnv.formatRange(range.start, range.end, createFormatter(viewOptions.titleFormat || buildTitleFormat(dateProfile)), {
+            isEndExclusive: dateProfile.isRangeAllDay,
+            defaultSeparator: viewOptions.titleRangeSeparator,
+        });
+    }
+    // Generates the format string that should be used to generate the title for the current date range.
+    // Attempts to compute the most appropriate format if not explicitly specified with `titleFormat`.
+    function buildTitleFormat(dateProfile) {
+        var currentRangeUnit = dateProfile.currentRangeUnit;
+        if (currentRangeUnit === 'year') {
+            return { year: 'numeric' };
+        }
+        if (currentRangeUnit === 'month') {
+            return { year: 'numeric', month: 'long' }; // like "September 2014"
+        }
+        var days = diffWholeDays(dateProfile.currentRange.start, dateProfile.currentRange.end);
+        if (days !== null && days > 1) {
+            // multi-day range. shorter, like "Sep 9 - 10 2014"
+            return { year: 'numeric', month: 'short', day: 'numeric' };
+        }
+        // one day. longer, like "September 9 2014"
+        return { year: 'numeric', month: 'long', day: 'numeric' };
+    }
+
+    // in future refactor, do the redux-style function(state=initial) for initial-state
+    // also, whatever is happening in constructor, have it happen in action queue too
+    var CalendarDataManager = /** @class */ (function () {
+        function CalendarDataManager(props) {
+            var _this = this;
+            this.computeOptionsData = memoize(this._computeOptionsData);
+            this.computeCurrentViewData = memoize(this._computeCurrentViewData);
+            this.organizeRawLocales = memoize(organizeRawLocales);
+            this.buildLocale = memoize(buildLocale);
+            this.buildPluginHooks = buildBuildPluginHooks();
+            this.buildDateEnv = memoize(buildDateEnv);
+            this.buildTheme = memoize(buildTheme);
+            this.parseToolbars = memoize(parseToolbars);
+            this.buildViewSpecs = memoize(buildViewSpecs);
+            this.buildDateProfileGenerator = memoizeObjArg(buildDateProfileGenerator);
+            this.buildViewApi = memoize(buildViewApi);
+            this.buildViewUiProps = memoizeObjArg(buildViewUiProps);
+            this.buildEventUiBySource = memoize(buildEventUiBySource, isPropsEqual);
+            this.buildEventUiBases = memoize(buildEventUiBases);
+            this.parseContextBusinessHours = memoizeObjArg(parseContextBusinessHours);
+            this.buildTitle = memoize(buildTitle);
+            this.emitter = new Emitter();
+            this.actionRunner = new TaskRunner(this._handleAction.bind(this), this.updateData.bind(this));
+            this.currentCalendarOptionsInput = {};
+            this.currentCalendarOptionsRefined = {};
+            this.currentViewOptionsInput = {};
+            this.currentViewOptionsRefined = {};
+            this.currentCalendarOptionsRefiners = {};
+            this.getCurrentData = function () { return _this.data; };
+            this.dispatch = function (action) {
+                _this.actionRunner.request(action); // protects against recursive calls to _handleAction
+            };
+            this.props = props;
+            this.actionRunner.pause();
+            var dynamicOptionOverrides = {};
+            var optionsData = this.computeOptionsData(props.optionOverrides, dynamicOptionOverrides, props.calendarApi);
+            var currentViewType = optionsData.calendarOptions.initialView || optionsData.pluginHooks.initialView;
+            var currentViewData = this.computeCurrentViewData(currentViewType, optionsData, props.optionOverrides, dynamicOptionOverrides);
+            // wire things up
+            // TODO: not DRY
+            props.calendarApi.currentDataManager = this;
+            this.emitter.setThisContext(props.calendarApi);
+            this.emitter.setOptions(currentViewData.options);
+            var currentDate = getInitialDate(optionsData.calendarOptions, optionsData.dateEnv);
+            var dateProfile = currentViewData.dateProfileGenerator.build(currentDate);
+            if (!rangeContainsMarker(dateProfile.activeRange, currentDate)) {
+                currentDate = dateProfile.currentRange.start;
+            }
+            var calendarContext = {
+                dateEnv: optionsData.dateEnv,
+                options: optionsData.calendarOptions,
+                pluginHooks: optionsData.pluginHooks,
+                calendarApi: props.calendarApi,
+                dispatch: this.dispatch,
+                emitter: this.emitter,
+                getCurrentData: this.getCurrentData,
+            };
+            // needs to be after setThisContext
+            for (var _i = 0, _a = optionsData.pluginHooks.contextInit; _i < _a.length; _i++) {
+                var callback = _a[_i];
+                callback(calendarContext);
+            }
+            // NOT DRY
+            var eventSources = initEventSources(optionsData.calendarOptions, dateProfile, calendarContext);
+            var initialState = {
+                dynamicOptionOverrides: dynamicOptionOverrides,
+                currentViewType: currentViewType,
+                currentDate: currentDate,
+                dateProfile: dateProfile,
+                businessHours: this.parseContextBusinessHours(calendarContext),
+                eventSources: eventSources,
+                eventUiBases: {},
+                eventStore: createEmptyEventStore(),
+                renderableEventStore: createEmptyEventStore(),
+                dateSelection: null,
+                eventSelection: '',
+                eventDrag: null,
+                eventResize: null,
+                selectionConfig: this.buildViewUiProps(calendarContext).selectionConfig,
+            };
+            var contextAndState = __assign(__assign({}, calendarContext), initialState);
+            for (var _b = 0, _c = optionsData.pluginHooks.reducers; _b < _c.length; _b++) {
+                var reducer = _c[_b];
+                __assign(initialState, reducer(null, null, contextAndState));
+            }
+            if (computeIsLoading(initialState, calendarContext)) {
+                this.emitter.trigger('loading', true); // NOT DRY
+            }
+            this.state = initialState;
+            this.updateData();
+            this.actionRunner.resume();
+        }
+        CalendarDataManager.prototype.resetOptions = function (optionOverrides, append) {
+            var props = this.props;
+            props.optionOverrides = append
+                ? __assign(__assign({}, props.optionOverrides), optionOverrides) : optionOverrides;
+            this.actionRunner.request({
+                type: 'NOTHING',
+            });
+        };
+        CalendarDataManager.prototype._handleAction = function (action) {
+            var _a = this, props = _a.props, state = _a.state, emitter = _a.emitter;
+            var dynamicOptionOverrides = reduceDynamicOptionOverrides(state.dynamicOptionOverrides, action);
+            var optionsData = this.computeOptionsData(props.optionOverrides, dynamicOptionOverrides, props.calendarApi);
+            var currentViewType = reduceViewType(state.currentViewType, action);
+            var currentViewData = this.computeCurrentViewData(currentViewType, optionsData, props.optionOverrides, dynamicOptionOverrides);
+            // wire things up
+            // TODO: not DRY
+            props.calendarApi.currentDataManager = this;
+            emitter.setThisContext(props.calendarApi);
+            emitter.setOptions(currentViewData.options);
+            var calendarContext = {
+                dateEnv: optionsData.dateEnv,
+                options: optionsData.calendarOptions,
+                pluginHooks: optionsData.pluginHooks,
+                calendarApi: props.calendarApi,
+                dispatch: this.dispatch,
+                emitter: emitter,
+                getCurrentData: this.getCurrentData,
+            };
+            var currentDate = state.currentDate, dateProfile = state.dateProfile;
+            if (this.data && this.data.dateProfileGenerator !== currentViewData.dateProfileGenerator) { // hack
+                dateProfile = currentViewData.dateProfileGenerator.build(currentDate);
+            }
+            currentDate = reduceCurrentDate(currentDate, action);
+            dateProfile = reduceDateProfile(dateProfile, action, currentDate, currentViewData.dateProfileGenerator);
+            if (action.type === 'PREV' || // TODO: move this logic into DateProfileGenerator
+                action.type === 'NEXT' || // "
+                !rangeContainsMarker(dateProfile.currentRange, currentDate)) {
+                currentDate = dateProfile.currentRange.start;
+            }
+            var eventSources = reduceEventSources(state.eventSources, action, dateProfile, calendarContext);
+            var eventStore = reduceEventStore(state.eventStore, action, eventSources, dateProfile, calendarContext);
+            var isEventsLoading = computeEventSourcesLoading(eventSources); // BAD. also called in this func in computeIsLoading
+            var renderableEventStore = (isEventsLoading && !currentViewData.options.progressiveEventRendering) ?
+                (state.renderableEventStore || eventStore) : // try from previous state
+                eventStore;
+            var _b = this.buildViewUiProps(calendarContext), eventUiSingleBase = _b.eventUiSingleBase, selectionConfig = _b.selectionConfig; // will memoize obj
+            var eventUiBySource = this.buildEventUiBySource(eventSources);
+            var eventUiBases = this.buildEventUiBases(renderableEventStore.defs, eventUiSingleBase, eventUiBySource);
+            var newState = {
+                dynamicOptionOverrides: dynamicOptionOverrides,
+                currentViewType: currentViewType,
+                currentDate: currentDate,
+                dateProfile: dateProfile,
+                eventSources: eventSources,
+                eventStore: eventStore,
+                renderableEventStore: renderableEventStore,
+                selectionConfig: selectionConfig,
+                eventUiBases: eventUiBases,
+                businessHours: this.parseContextBusinessHours(calendarContext),
+                dateSelection: reduceDateSelection(state.dateSelection, action),
+                eventSelection: reduceSelectedEvent(state.eventSelection, action),
+                eventDrag: reduceEventDrag(state.eventDrag, action),
+                eventResize: reduceEventResize(state.eventResize, action),
+            };
+            var contextAndState = __assign(__assign({}, calendarContext), newState);
+            for (var _i = 0, _c = optionsData.pluginHooks.reducers; _i < _c.length; _i++) {
+                var reducer = _c[_i];
+                __assign(newState, reducer(state, action, contextAndState)); // give the OLD state, for old value
+            }
+            var wasLoading = computeIsLoading(state, calendarContext);
+            var isLoading = computeIsLoading(newState, calendarContext);
+            // TODO: use propSetHandlers in plugin system
+            if (!wasLoading && isLoading) {
+                emitter.trigger('loading', true);
+            }
+            else if (wasLoading && !isLoading) {
+                emitter.trigger('loading', false);
+            }
+            this.state = newState;
+            if (props.onAction) {
+                props.onAction(action);
+            }
+        };
+        CalendarDataManager.prototype.updateData = function () {
+            var _a = this, props = _a.props, state = _a.state;
+            var oldData = this.data;
+            var optionsData = this.computeOptionsData(props.optionOverrides, state.dynamicOptionOverrides, props.calendarApi);
+            var currentViewData = this.computeCurrentViewData(state.currentViewType, optionsData, props.optionOverrides, state.dynamicOptionOverrides);
+            var data = this.data = __assign(__assign(__assign({ viewTitle: this.buildTitle(state.dateProfile, currentViewData.options, optionsData.dateEnv), calendarApi: props.calendarApi, dispatch: this.dispatch, emitter: this.emitter, getCurrentData: this.getCurrentData }, optionsData), currentViewData), state);
+            var changeHandlers = optionsData.pluginHooks.optionChangeHandlers;
+            var oldCalendarOptions = oldData && oldData.calendarOptions;
+            var newCalendarOptions = optionsData.calendarOptions;
+            if (oldCalendarOptions && oldCalendarOptions !== newCalendarOptions) {
+                if (oldCalendarOptions.timeZone !== newCalendarOptions.timeZone) {
+                    // hack
+                    state.eventSources = data.eventSources = reduceEventSourcesNewTimeZone(data.eventSources, state.dateProfile, data);
+                    state.eventStore = data.eventStore = rezoneEventStoreDates(data.eventStore, oldData.dateEnv, data.dateEnv);
+                }
+                for (var optionName in changeHandlers) {
+                    if (oldCalendarOptions[optionName] !== newCalendarOptions[optionName]) {
+                        changeHandlers[optionName](newCalendarOptions[optionName], data);
+                    }
+                }
+            }
+            if (props.onData) {
+                props.onData(data);
+            }
+        };
+        CalendarDataManager.prototype._computeOptionsData = function (optionOverrides, dynamicOptionOverrides, calendarApi) {
+            // TODO: blacklist options that are handled by optionChangeHandlers
+            var _a = this.processRawCalendarOptions(optionOverrides, dynamicOptionOverrides), refinedOptions = _a.refinedOptions, pluginHooks = _a.pluginHooks, localeDefaults = _a.localeDefaults, availableLocaleData = _a.availableLocaleData, extra = _a.extra;
+            warnUnknownOptions(extra);
+            var dateEnv = this.buildDateEnv(refinedOptions.timeZone, refinedOptions.locale, refinedOptions.weekNumberCalculation, refinedOptions.firstDay, refinedOptions.weekText, pluginHooks, availableLocaleData, refinedOptions.defaultRangeSeparator);
+            var viewSpecs = this.buildViewSpecs(pluginHooks.views, optionOverrides, dynamicOptionOverrides, localeDefaults);
+            var theme = this.buildTheme(refinedOptions, pluginHooks);
+            var toolbarConfig = this.parseToolbars(refinedOptions, optionOverrides, theme, viewSpecs, calendarApi);
+            return {
+                calendarOptions: refinedOptions,
+                pluginHooks: pluginHooks,
+                dateEnv: dateEnv,
+                viewSpecs: viewSpecs,
+                theme: theme,
+                toolbarConfig: toolbarConfig,
+                localeDefaults: localeDefaults,
+                availableRawLocales: availableLocaleData.map,
+            };
+        };
+        // always called from behind a memoizer
+        CalendarDataManager.prototype.processRawCalendarOptions = function (optionOverrides, dynamicOptionOverrides) {
+            var _a = mergeRawOptions([
+                BASE_OPTION_DEFAULTS,
+                optionOverrides,
+                dynamicOptionOverrides,
+            ]), locales = _a.locales, locale = _a.locale;
+            var availableLocaleData = this.organizeRawLocales(locales);
+            var availableRawLocales = availableLocaleData.map;
+            var localeDefaults = this.buildLocale(locale || availableLocaleData.defaultCode, availableRawLocales).options;
+            var pluginHooks = this.buildPluginHooks(optionOverrides.plugins || [], globalPlugins);
+            var refiners = this.currentCalendarOptionsRefiners = __assign(__assign(__assign(__assign(__assign({}, BASE_OPTION_REFINERS), CALENDAR_LISTENER_REFINERS), CALENDAR_OPTION_REFINERS), pluginHooks.listenerRefiners), pluginHooks.optionRefiners);
+            var extra = {};
+            var raw = mergeRawOptions([
+                BASE_OPTION_DEFAULTS,
+                localeDefaults,
+                optionOverrides,
+                dynamicOptionOverrides,
+            ]);
+            var refined = {};
+            var currentRaw = this.currentCalendarOptionsInput;
+            var currentRefined = this.currentCalendarOptionsRefined;
+            var anyChanges = false;
+            for (var optionName in raw) {
+                if (optionName !== 'plugins') { // because plugins is special-cased
+                    if (raw[optionName] === currentRaw[optionName] ||
+                        (COMPLEX_OPTION_COMPARATORS[optionName] &&
+                            (optionName in currentRaw) &&
+                            COMPLEX_OPTION_COMPARATORS[optionName](currentRaw[optionName], raw[optionName]))) {
+                        refined[optionName] = currentRefined[optionName];
+                    }
+                    else if (refiners[optionName]) {
+                        refined[optionName] = refiners[optionName](raw[optionName]);
+                        anyChanges = true;
+                    }
+                    else {
+                        extra[optionName] = currentRaw[optionName];
+                    }
+                }
+            }
+            if (anyChanges) {
+                this.currentCalendarOptionsInput = raw;
+                this.currentCalendarOptionsRefined = refined;
+            }
+            return {
+                rawOptions: this.currentCalendarOptionsInput,
+                refinedOptions: this.currentCalendarOptionsRefined,
+                pluginHooks: pluginHooks,
+                availableLocaleData: availableLocaleData,
+                localeDefaults: localeDefaults,
+                extra: extra,
+            };
+        };
+        CalendarDataManager.prototype._computeCurrentViewData = function (viewType, optionsData, optionOverrides, dynamicOptionOverrides) {
+            var viewSpec = optionsData.viewSpecs[viewType];
+            if (!viewSpec) {
+                throw new Error("viewType \"" + viewType + "\" is not available. Please make sure you've loaded all neccessary plugins");
+            }
+            var _a = this.processRawViewOptions(viewSpec, optionsData.pluginHooks, optionsData.localeDefaults, optionOverrides, dynamicOptionOverrides), refinedOptions = _a.refinedOptions, extra = _a.extra;
+            warnUnknownOptions(extra);
+            var dateProfileGenerator = this.buildDateProfileGenerator({
+                dateProfileGeneratorClass: viewSpec.optionDefaults.dateProfileGeneratorClass,
+                duration: viewSpec.duration,
+                durationUnit: viewSpec.durationUnit,
+                usesMinMaxTime: viewSpec.optionDefaults.usesMinMaxTime,
+                dateEnv: optionsData.dateEnv,
+                calendarApi: this.props.calendarApi,
+                slotMinTime: refinedOptions.slotMinTime,
+                slotMaxTime: refinedOptions.slotMaxTime,
+                showNonCurrentDates: refinedOptions.showNonCurrentDates,
+                dayCount: refinedOptions.dayCount,
+                dateAlignment: refinedOptions.dateAlignment,
+                dateIncrement: refinedOptions.dateIncrement,
+                hiddenDays: refinedOptions.hiddenDays,
+                weekends: refinedOptions.weekends,
+                nowInput: refinedOptions.now,
+                validRangeInput: refinedOptions.validRange,
+                visibleRangeInput: refinedOptions.visibleRange,
+                monthMode: refinedOptions.monthMode,
+                fixedWeekCount: refinedOptions.fixedWeekCount,
+            });
+            var viewApi = this.buildViewApi(viewType, this.getCurrentData, optionsData.dateEnv);
+            return { viewSpec: viewSpec, options: refinedOptions, dateProfileGenerator: dateProfileGenerator, viewApi: viewApi };
+        };
+        CalendarDataManager.prototype.processRawViewOptions = function (viewSpec, pluginHooks, localeDefaults, optionOverrides, dynamicOptionOverrides) {
+            var raw = mergeRawOptions([
+                BASE_OPTION_DEFAULTS,
+                viewSpec.optionDefaults,
+                localeDefaults,
+                optionOverrides,
+                viewSpec.optionOverrides,
+                dynamicOptionOverrides,
+            ]);
+            var refiners = __assign(__assign(__assign(__assign(__assign(__assign({}, BASE_OPTION_REFINERS), CALENDAR_LISTENER_REFINERS), CALENDAR_OPTION_REFINERS), VIEW_OPTION_REFINERS), pluginHooks.listenerRefiners), pluginHooks.optionRefiners);
+            var refined = {};
+            var currentRaw = this.currentViewOptionsInput;
+            var currentRefined = this.currentViewOptionsRefined;
+            var anyChanges = false;
+            var extra = {};
+            for (var optionName in raw) {
+                if (raw[optionName] === currentRaw[optionName]) {
+                    refined[optionName] = currentRefined[optionName];
+                }
+                else {
+                    if (raw[optionName] === this.currentCalendarOptionsInput[optionName]) {
+                        if (optionName in this.currentCalendarOptionsRefined) { // might be an "extra" prop
+                            refined[optionName] = this.currentCalendarOptionsRefined[optionName];
+                        }
+                    }
+                    else if (refiners[optionName]) {
+                        refined[optionName] = refiners[optionName](raw[optionName]);
+                    }
+                    else {
+                        extra[optionName] = raw[optionName];
+                    }
+                    anyChanges = true;
+                }
+            }
+            if (anyChanges) {
+                this.currentViewOptionsInput = raw;
+                this.currentViewOptionsRefined = refined;
+            }
+            return {
+                rawOptions: this.currentViewOptionsInput,
+                refinedOptions: this.currentViewOptionsRefined,
+                extra: extra,
+            };
+        };
+        return CalendarDataManager;
+    }());
+    function buildDateEnv(timeZone, explicitLocale, weekNumberCalculation, firstDay, weekText, pluginHooks, availableLocaleData, defaultSeparator) {
+        var locale = buildLocale(explicitLocale || availableLocaleData.defaultCode, availableLocaleData.map);
+        return new DateEnv({
+            calendarSystem: 'gregory',
+            timeZone: timeZone,
+            namedTimeZoneImpl: pluginHooks.namedTimeZonedImpl,
+            locale: locale,
+            weekNumberCalculation: weekNumberCalculation,
+            firstDay: firstDay,
+            weekText: weekText,
+            cmdFormatter: pluginHooks.cmdFormatter,
+            defaultSeparator: defaultSeparator,
+        });
+    }
+    function buildTheme(options, pluginHooks) {
+        var ThemeClass = pluginHooks.themeClasses[options.themeSystem] || StandardTheme;
+        return new ThemeClass(options);
+    }
+    function buildDateProfileGenerator(props) {
+        var DateProfileGeneratorClass = props.dateProfileGeneratorClass || DateProfileGenerator;
+        return new DateProfileGeneratorClass(props);
+    }
+    function buildViewApi(type, getCurrentData, dateEnv) {
+        return new ViewApi(type, getCurrentData, dateEnv);
+    }
+    function buildEventUiBySource(eventSources) {
+        return mapHash(eventSources, function (eventSource) { return eventSource.ui; });
+    }
+    function buildEventUiBases(eventDefs, eventUiSingleBase, eventUiBySource) {
+        var eventUiBases = { '': eventUiSingleBase };
+        for (var defId in eventDefs) {
+            var def = eventDefs[defId];
+            if (def.sourceId && eventUiBySource[def.sourceId]) {
+                eventUiBases[defId] = eventUiBySource[def.sourceId];
+            }
+        }
+        return eventUiBases;
+    }
+    function buildViewUiProps(calendarContext) {
+        var options = calendarContext.options;
+        return {
+            eventUiSingleBase: createEventUi({
+                display: options.eventDisplay,
+                editable: options.editable,
+                startEditable: options.eventStartEditable,
+                durationEditable: options.eventDurationEditable,
+                constraint: options.eventConstraint,
+                overlap: typeof options.eventOverlap === 'boolean' ? options.eventOverlap : undefined,
+                allow: options.eventAllow,
+                backgroundColor: options.eventBackgroundColor,
+                borderColor: options.eventBorderColor,
+                textColor: options.eventTextColor,
+                color: options.eventColor,
+                // classNames: options.eventClassNames // render hook will handle this
+            }, calendarContext),
+            selectionConfig: createEventUi({
+                constraint: options.selectConstraint,
+                overlap: typeof options.selectOverlap === 'boolean' ? options.selectOverlap : undefined,
+                allow: options.selectAllow,
+            }, calendarContext),
+        };
+    }
+    function computeIsLoading(state, context) {
+        for (var _i = 0, _a = context.pluginHooks.isLoadingFuncs; _i < _a.length; _i++) {
+            var isLoadingFunc = _a[_i];
+            if (isLoadingFunc(state)) {
+                return true;
+            }
+        }
+        return false;
+    }
+    function parseContextBusinessHours(calendarContext) {
+        return parseBusinessHours(calendarContext.options.businessHours, calendarContext);
+    }
+    function warnUnknownOptions(options, viewName) {
+        for (var optionName in options) {
+            console.warn("Unknown option '" + optionName + "'" +
+                (viewName ? " for view '" + viewName + "'" : ''));
+        }
+    }
+
+    // TODO: move this to react plugin?
+    var CalendarDataProvider = /** @class */ (function (_super) {
+        __extends(CalendarDataProvider, _super);
+        function CalendarDataProvider(props) {
+            var _this = _super.call(this, props) || this;
+            _this.handleData = function (data) {
+                if (!_this.dataManager) { // still within initial run, before assignment in constructor
+                    // eslint-disable-next-line react/no-direct-mutation-state
+                    _this.state = data; // can't use setState yet
+                }
+                else {
+                    _this.setState(data);
+                }
+            };
+            _this.dataManager = new CalendarDataManager({
+                optionOverrides: props.optionOverrides,
+                calendarApi: props.calendarApi,
+                onData: _this.handleData,
+            });
+            return _this;
+        }
+        CalendarDataProvider.prototype.render = function () {
+            return this.props.children(this.state);
+        };
+        CalendarDataProvider.prototype.componentDidUpdate = function (prevProps) {
+            var newOptionOverrides = this.props.optionOverrides;
+            if (newOptionOverrides !== prevProps.optionOverrides) { // prevent recursive handleData
+                this.dataManager.resetOptions(newOptionOverrides);
+            }
+        };
+        return CalendarDataProvider;
+    }(Component));
+
+    // HELPERS
+    /*
+    if nextDayThreshold is specified, slicing is done in an all-day fashion.
+    you can get nextDayThreshold from context.nextDayThreshold
+    */
+    function sliceEvents(props, allDay) {
+        return sliceEventStore(props.eventStore, props.eventUiBases, props.dateProfile.activeRange, allDay ? props.nextDayThreshold : null).fg;
+    }
+
+    var NamedTimeZoneImpl = /** @class */ (function () {
+        function NamedTimeZoneImpl(timeZoneName) {
+            this.timeZoneName = timeZoneName;
+        }
+        return NamedTimeZoneImpl;
+    }());
+
+    var SegHierarchy = /** @class */ (function () {
+        function SegHierarchy() {
+            // settings
+            this.strictOrder = false;
+            this.allowReslicing = false;
+            this.maxCoord = -1; // -1 means no max
+            this.maxStackCnt = -1; // -1 means no max
+            this.levelCoords = []; // ordered
+            this.entriesByLevel = []; // parallel with levelCoords
+            this.stackCnts = {}; // TODO: use better technique!?
+        }
+        SegHierarchy.prototype.addSegs = function (inputs) {
+            var hiddenEntries = [];
+            for (var _i = 0, inputs_1 = inputs; _i < inputs_1.length; _i++) {
+                var input = inputs_1[_i];
+                this.insertEntry(input, hiddenEntries);
+            }
+            return hiddenEntries;
+        };
+        SegHierarchy.prototype.insertEntry = function (entry, hiddenEntries) {
+            var insertion = this.findInsertion(entry);
+            if (this.isInsertionValid(insertion, entry)) {
+                this.insertEntryAt(entry, insertion);
+                return 1;
+            }
+            return this.handleInvalidInsertion(insertion, entry, hiddenEntries);
+        };
+        SegHierarchy.prototype.isInsertionValid = function (insertion, entry) {
+            return (this.maxCoord === -1 || insertion.levelCoord + entry.thickness <= this.maxCoord) &&
+                (this.maxStackCnt === -1 || insertion.stackCnt < this.maxStackCnt);
+        };
+        // returns number of new entries inserted
+        SegHierarchy.prototype.handleInvalidInsertion = function (insertion, entry, hiddenEntries) {
+            if (this.allowReslicing && insertion.touchingEntry) {
+                return this.splitEntry(entry, insertion.touchingEntry, hiddenEntries);
+            }
+            hiddenEntries.push(entry);
+            return 0;
+        };
+        SegHierarchy.prototype.splitEntry = function (entry, barrier, hiddenEntries) {
+            var partCnt = 0;
+            var splitHiddenEntries = [];
+            var entrySpan = entry.span;
+            var barrierSpan = barrier.span;
+            if (entrySpan.start < barrierSpan.start) {
+                partCnt += this.insertEntry({
+                    index: entry.index,
+                    thickness: entry.thickness,
+                    span: { start: entrySpan.start, end: barrierSpan.start },
+                }, splitHiddenEntries);
+            }
+            if (entrySpan.end > barrierSpan.end) {
+                partCnt += this.insertEntry({
+                    index: entry.index,
+                    thickness: entry.thickness,
+                    span: { start: barrierSpan.end, end: entrySpan.end },
+                }, splitHiddenEntries);
+            }
+            if (partCnt) {
+                hiddenEntries.push.apply(hiddenEntries, __spreadArray([{
+                        index: entry.index,
+                        thickness: entry.thickness,
+                        span: intersectSpans(barrierSpan, entrySpan), // guaranteed to intersect
+                    }], splitHiddenEntries));
+                return partCnt;
+            }
+            hiddenEntries.push(entry);
+            return 0;
+        };
+        SegHierarchy.prototype.insertEntryAt = function (entry, insertion) {
+            var _a = this, entriesByLevel = _a.entriesByLevel, levelCoords = _a.levelCoords;
+            if (insertion.lateral === -1) {
+                // create a new level
+                insertAt(levelCoords, insertion.level, insertion.levelCoord);
+                insertAt(entriesByLevel, insertion.level, [entry]);
+            }
+            else {
+                // insert into existing level
+                insertAt(entriesByLevel[insertion.level], insertion.lateral, entry);
+            }
+            this.stackCnts[buildEntryKey(entry)] = insertion.stackCnt;
+        };
+        SegHierarchy.prototype.findInsertion = function (newEntry) {
+            var _a = this, levelCoords = _a.levelCoords, entriesByLevel = _a.entriesByLevel, strictOrder = _a.strictOrder, stackCnts = _a.stackCnts;
+            var levelCnt = levelCoords.length;
+            var candidateCoord = 0;
+            var touchingLevel = -1;
+            var touchingLateral = -1;
+            var touchingEntry = null;
+            var stackCnt = 0;
+            for (var trackingLevel = 0; trackingLevel < levelCnt; trackingLevel += 1) {
+                var trackingCoord = levelCoords[trackingLevel];
+                // if the current level is past the placed entry, we have found a good empty space and can stop.
+                // if strictOrder, keep finding more lateral intersections.
+                if (!strictOrder && trackingCoord >= candidateCoord + newEntry.thickness) {
+                    break;
+                }
+                var trackingEntries = entriesByLevel[trackingLevel];
+                var trackingEntry = void 0;
+                var searchRes = binarySearch(trackingEntries, newEntry.span.start, getEntrySpanEnd); // find first entry after newEntry's end
+                var lateralIndex = searchRes[0] + searchRes[1]; // if exact match (which doesn't collide), go to next one
+                while ( // loop through entries that horizontally intersect
+                (trackingEntry = trackingEntries[lateralIndex]) && // but not past the whole entry list
+                    trackingEntry.span.start < newEntry.span.end // and not entirely past newEntry
+                ) {
+                    var trackingEntryBottom = trackingCoord + trackingEntry.thickness;
+                    // intersects into the top of the candidate?
+                    if (trackingEntryBottom > candidateCoord) {
+                        candidateCoord = trackingEntryBottom;
+                        touchingEntry = trackingEntry;
+                        touchingLevel = trackingLevel;
+                        touchingLateral = lateralIndex;
+                    }
+                    // butts up against top of candidate? (will happen if just intersected as well)
+                    if (trackingEntryBottom === candidateCoord) {
+                        // accumulate the highest possible stackCnt of the trackingEntries that butt up
+                        stackCnt = Math.max(stackCnt, stackCnts[buildEntryKey(trackingEntry)] + 1);
+                    }
+                    lateralIndex += 1;
+                }
+            }
+            // the destination level will be after touchingEntry's level. find it
+            var destLevel = 0;
+            if (touchingEntry) {
+                destLevel = touchingLevel + 1;
+                while (destLevel < levelCnt && levelCoords[destLevel] < candidateCoord) {
+                    destLevel += 1;
+                }
+            }
+            // if adding to an existing level, find where to insert
+            var destLateral = -1;
+            if (destLevel < levelCnt && levelCoords[destLevel] === candidateCoord) {
+                destLateral = binarySearch(entriesByLevel[destLevel], newEntry.span.end, getEntrySpanEnd)[0];
+            }
+            return {
+                touchingLevel: touchingLevel,
+                touchingLateral: touchingLateral,
+                touchingEntry: touchingEntry,
+                stackCnt: stackCnt,
+                levelCoord: candidateCoord,
+                level: destLevel,
+                lateral: destLateral,
+            };
+        };
+        // sorted by levelCoord (lowest to highest)
+        SegHierarchy.prototype.toRects = function () {
+            var _a = this, entriesByLevel = _a.entriesByLevel, levelCoords = _a.levelCoords;
+            var levelCnt = entriesByLevel.length;
+            var rects = [];
+            for (var level = 0; level < levelCnt; level += 1) {
+                var entries = entriesByLevel[level];
+                var levelCoord = levelCoords[level];
+                for (var _i = 0, entries_1 = entries; _i < entries_1.length; _i++) {
+                    var entry = entries_1[_i];
+                    rects.push(__assign(__assign({}, entry), { levelCoord: levelCoord }));
+                }
+            }
+            return rects;
+        };
+        return SegHierarchy;
+    }());
+    function getEntrySpanEnd(entry) {
+        return entry.span.end;
+    }
+    function buildEntryKey(entry) {
+        return entry.index + ':' + entry.span.start;
+    }
+    // returns groups with entries sorted by input order
+    function groupIntersectingEntries(entries) {
+        var merges = [];
+        for (var _i = 0, entries_2 = entries; _i < entries_2.length; _i++) {
+            var entry = entries_2[_i];
+            var filteredMerges = [];
+            var hungryMerge = {
+                span: entry.span,
+                entries: [entry],
+            };
+            for (var _a = 0, merges_1 = merges; _a < merges_1.length; _a++) {
+                var merge = merges_1[_a];
+                if (intersectSpans(merge.span, hungryMerge.span)) {
+                    hungryMerge = {
+                        entries: merge.entries.concat(hungryMerge.entries),
+                        span: joinSpans(merge.span, hungryMerge.span),
+                    };
+                }
+                else {
+                    filteredMerges.push(merge);
+                }
+            }
+            filteredMerges.push(hungryMerge);
+            merges = filteredMerges;
+        }
+        return merges;
+    }
+    function joinSpans(span0, span1) {
+        return {
+            start: Math.min(span0.start, span1.start),
+            end: Math.max(span0.end, span1.end),
+        };
+    }
+    function intersectSpans(span0, span1) {
+        var start = Math.max(span0.start, span1.start);
+        var end = Math.min(span0.end, span1.end);
+        if (start < end) {
+            return { start: start, end: end };
+        }
+        return null;
+    }
+    // general util
+    // ---------------------------------------------------------------------------------------------------------------------
+    function insertAt(arr, index, item) {
+        arr.splice(index, 0, item);
+    }
+    function binarySearch(a, searchVal, getItemVal) {
+        var startIndex = 0;
+        var endIndex = a.length; // exclusive
+        if (!endIndex || searchVal < getItemVal(a[startIndex])) { // no items OR before first item
+            return [0, 0];
+        }
+        if (searchVal > getItemVal(a[endIndex - 1])) { // after last item
+            return [endIndex, 0];
+        }
+        while (startIndex < endIndex) {
+            var middleIndex = Math.floor(startIndex + (endIndex - startIndex) / 2);
+            var middleVal = getItemVal(a[middleIndex]);
+            if (searchVal < middleVal) {
+                endIndex = middleIndex;
+            }
+            else if (searchVal > middleVal) {
+                startIndex = middleIndex + 1;
+            }
+            else { // equal!
+                return [middleIndex, 1];
+            }
+        }
+        return [startIndex, 0];
+    }
+
+    var Interaction = /** @class */ (function () {
+        function Interaction(settings) {
+            this.component = settings.component;
+            this.isHitComboAllowed = settings.isHitComboAllowed || null;
+        }
+        Interaction.prototype.destroy = function () {
+        };
+        return Interaction;
+    }());
+    function parseInteractionSettings(component, input) {
+        return {
+            component: component,
+            el: input.el,
+            useEventCenter: input.useEventCenter != null ? input.useEventCenter : true,
+            isHitComboAllowed: input.isHitComboAllowed || null,
+        };
+    }
+    function interactionSettingsToStore(settings) {
+        var _a;
+        return _a = {},
+            _a[settings.component.uid] = settings,
+            _a;
+    }
+    // global state
+    var interactionSettingsStore = {};
+
+    /*
+    An abstraction for a dragging interaction originating on an event.
+    Does higher-level things than PointerDragger, such as possibly:
+    - a "mirror" that moves with the pointer
+    - a minimum number of pixels or other criteria for a true drag to begin
+
+    subclasses must emit:
+    - pointerdown
+    - dragstart
+    - dragmove
+    - pointerup
+    - dragend
+    */
+    var ElementDragging = /** @class */ (function () {
+        function ElementDragging(el, selector) {
+            this.emitter = new Emitter();
+        }
+        ElementDragging.prototype.destroy = function () {
+        };
+        ElementDragging.prototype.setMirrorIsVisible = function (bool) {
+            // optional if subclass doesn't want to support a mirror
+        };
+        ElementDragging.prototype.setMirrorNeedsRevert = function (bool) {
+            // optional if subclass doesn't want to support a mirror
+        };
+        ElementDragging.prototype.setAutoScrollEnabled = function (bool) {
+            // optional
+        };
+        return ElementDragging;
+    }());
+
+    // TODO: get rid of this in favor of options system,
+    // tho it's really easy to access this globally rather than pass thru options.
+    var config = {};
+
+    /*
+    Information about what will happen when an external element is dragged-and-dropped
+    onto a calendar. Contains information for creating an event.
+    */
+    var DRAG_META_REFINERS = {
+        startTime: createDuration,
+        duration: createDuration,
+        create: Boolean,
+        sourceId: String,
+    };
+    function parseDragMeta(raw) {
+        var _a = refineProps(raw, DRAG_META_REFINERS), refined = _a.refined, extra = _a.extra;
+        return {
+            startTime: refined.startTime || null,
+            duration: refined.duration || null,
+            create: refined.create != null ? refined.create : true,
+            sourceId: refined.sourceId,
+            leftoverProps: extra,
+        };
+    }
+
+    var ToolbarSection = /** @class */ (function (_super) {
+        __extends(ToolbarSection, _super);
+        function ToolbarSection() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        ToolbarSection.prototype.render = function () {
+            var _this = this;
+            var children = this.props.widgetGroups.map(function (widgetGroup) { return _this.renderWidgetGroup(widgetGroup); });
+            return createElement.apply(void 0, __spreadArray(['div', { className: 'fc-toolbar-chunk' }], children));
+        };
+        ToolbarSection.prototype.renderWidgetGroup = function (widgetGroup) {
+            var props = this.props;
+            var theme = this.context.theme;
+            var children = [];
+            var isOnlyButtons = true;
+            for (var _i = 0, widgetGroup_1 = widgetGroup; _i < widgetGroup_1.length; _i++) {
+                var widget = widgetGroup_1[_i];
+                var buttonName = widget.buttonName, buttonClick = widget.buttonClick, buttonText = widget.buttonText, buttonIcon = widget.buttonIcon;
+                if (buttonName === 'title') {
+                    isOnlyButtons = false;
+                    children.push(createElement("h2", { className: "fc-toolbar-title" }, props.title));
+                }
+                else {
+                    var ariaAttrs = buttonIcon ? { 'aria-label': buttonName } : {};
+                    var buttonClasses = ["fc-" + buttonName + "-button", theme.getClass('button')];
+                    if (buttonName === props.activeButton) {
+                        buttonClasses.push(theme.getClass('buttonActive'));
+                    }
+                    var isDisabled = (!props.isTodayEnabled && buttonName === 'today') ||
+                        (!props.isPrevEnabled && buttonName === 'prev') ||
+                        (!props.isNextEnabled && buttonName === 'next');
+                    children.push(createElement("button", __assign({ disabled: isDisabled, className: buttonClasses.join(' '), onClick: buttonClick, type: "button" }, ariaAttrs), buttonText || (buttonIcon ? createElement("span", { className: buttonIcon }) : '')));
+                }
+            }
+            if (children.length > 1) {
+                var groupClassName = (isOnlyButtons && theme.getClass('buttonGroup')) || '';
+                return createElement.apply(void 0, __spreadArray(['div', { className: groupClassName }], children));
+            }
+            return children[0];
+        };
+        return ToolbarSection;
+    }(BaseComponent));
+
+    var Toolbar = /** @class */ (function (_super) {
+        __extends(Toolbar, _super);
+        function Toolbar() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        Toolbar.prototype.render = function () {
+            var _a = this.props, model = _a.model, extraClassName = _a.extraClassName;
+            var forceLtr = false;
+            var startContent;
+            var endContent;
+            var centerContent = model.center;
+            if (model.left) {
+                forceLtr = true;
+                startContent = model.left;
+            }
+            else {
+                startContent = model.start;
+            }
+            if (model.right) {
+                forceLtr = true;
+                endContent = model.right;
+            }
+            else {
+                endContent = model.end;
+            }
+            var classNames = [
+                extraClassName || '',
+                'fc-toolbar',
+                forceLtr ? 'fc-toolbar-ltr' : '',
+            ];
+            return (createElement("div", { className: classNames.join(' ') },
+                this.renderSection('start', startContent || []),
+                this.renderSection('center', centerContent || []),
+                this.renderSection('end', endContent || [])));
+        };
+        Toolbar.prototype.renderSection = function (key, widgetGroups) {
+            var props = this.props;
+            return (createElement(ToolbarSection, { key: key, widgetGroups: widgetGroups, title: props.title, activeButton: props.activeButton, isTodayEnabled: props.isTodayEnabled, isPrevEnabled: props.isPrevEnabled, isNextEnabled: props.isNextEnabled }));
+        };
+        return Toolbar;
+    }(BaseComponent));
+
+    // TODO: do function component?
+    var ViewContainer = /** @class */ (function (_super) {
+        __extends(ViewContainer, _super);
+        function ViewContainer() {
+            var _this = _super !== null && _super.apply(this, arguments) || this;
+            _this.state = {
+                availableWidth: null,
+            };
+            _this.handleEl = function (el) {
+                _this.el = el;
+                setRef(_this.props.elRef, el);
+                _this.updateAvailableWidth();
+            };
+            _this.handleResize = function () {
+                _this.updateAvailableWidth();
+            };
+            return _this;
+        }
+        ViewContainer.prototype.render = function () {
+            var _a = this, props = _a.props, state = _a.state;
+            var aspectRatio = props.aspectRatio;
+            var classNames = [
+                'fc-view-harness',
+                (aspectRatio || props.liquid || props.height)
+                    ? 'fc-view-harness-active' // harness controls the height
+                    : 'fc-view-harness-passive', // let the view do the height
+            ];
+            var height = '';
+            var paddingBottom = '';
+            if (aspectRatio) {
+                if (state.availableWidth !== null) {
+                    height = state.availableWidth / aspectRatio;
+                }
+                else {
+                    // while waiting to know availableWidth, we can't set height to *zero*
+                    // because will cause lots of unnecessary scrollbars within scrollgrid.
+                    // BETTER: don't start rendering ANYTHING yet until we know container width
+                    // NOTE: why not always use paddingBottom? Causes height oscillation (issue 5606)
+                    paddingBottom = (1 / aspectRatio) * 100 + "%";
+                }
+            }
+            else {
+                height = props.height || '';
+            }
+            return (createElement("div", { ref: this.handleEl, onClick: props.onClick, className: classNames.join(' '), style: { height: height, paddingBottom: paddingBottom } }, props.children));
+        };
+        ViewContainer.prototype.componentDidMount = function () {
+            this.context.addResizeHandler(this.handleResize);
+        };
+        ViewContainer.prototype.componentWillUnmount = function () {
+            this.context.removeResizeHandler(this.handleResize);
+        };
+        ViewContainer.prototype.updateAvailableWidth = function () {
+            if (this.el && // needed. but why?
+                this.props.aspectRatio // aspectRatio is the only height setting that needs availableWidth
+            ) {
+                this.setState({ availableWidth: this.el.offsetWidth });
+            }
+        };
+        return ViewContainer;
+    }(BaseComponent));
+
+    /*
+    Detects when the user clicks on an event within a DateComponent
+    */
+    var EventClicking = /** @class */ (function (_super) {
+        __extends(EventClicking, _super);
+        function EventClicking(settings) {
+            var _this = _super.call(this, settings) || this;
+            _this.handleSegClick = function (ev, segEl) {
+                var component = _this.component;
+                var context = component.context;
+                var seg = getElSeg(segEl);
+                if (seg && // might be the 
 surrounding the more link
+                    component.isValidSegDownEl(ev.target)) {
+                    // our way to simulate a link click for elements that can't be  tags
+                    // grab before trigger fired in case trigger trashes DOM thru rerendering
+                    var hasUrlContainer = elementClosest(ev.target, '.fc-event-forced-url');
+                    var url = hasUrlContainer ? hasUrlContainer.querySelector('a[href]').href : '';
+                    context.emitter.trigger('eventClick', {
+                        el: segEl,
+                        event: new EventApi(component.context, seg.eventRange.def, seg.eventRange.instance),
+                        jsEvent: ev,
+                        view: context.viewApi,
+                    });
+                    if (url && !ev.defaultPrevented) {
+                        window.location.href = url;
+                    }
+                }
+            };
+            _this.destroy = listenBySelector(settings.el, 'click', '.fc-event', // on both fg and bg events
+            _this.handleSegClick);
+            return _this;
+        }
+        return EventClicking;
+    }(Interaction));
+
+    /*
+    Triggers events and adds/removes core classNames when the user's pointer
+    enters/leaves event-elements of a component.
+    */
+    var EventHovering = /** @class */ (function (_super) {
+        __extends(EventHovering, _super);
+        function EventHovering(settings) {
+            var _this = _super.call(this, settings) || this;
+            // for simulating an eventMouseLeave when the event el is destroyed while mouse is over it
+            _this.handleEventElRemove = function (el) {
+                if (el === _this.currentSegEl) {
+                    _this.handleSegLeave(null, _this.currentSegEl);
+                }
+            };
+            _this.handleSegEnter = function (ev, segEl) {
+                if (getElSeg(segEl)) { // TODO: better way to make sure not hovering over more+ link or its wrapper
+                    _this.currentSegEl = segEl;
+                    _this.triggerEvent('eventMouseEnter', ev, segEl);
+                }
+            };
+            _this.handleSegLeave = function (ev, segEl) {
+                if (_this.currentSegEl) {
+                    _this.currentSegEl = null;
+                    _this.triggerEvent('eventMouseLeave', ev, segEl);
+                }
+            };
+            _this.removeHoverListeners = listenToHoverBySelector(settings.el, '.fc-event', // on both fg and bg events
+            _this.handleSegEnter, _this.handleSegLeave);
+            return _this;
+        }
+        EventHovering.prototype.destroy = function () {
+            this.removeHoverListeners();
+        };
+        EventHovering.prototype.triggerEvent = function (publicEvName, ev, segEl) {
+            var component = this.component;
+            var context = component.context;
+            var seg = getElSeg(segEl);
+            if (!ev || component.isValidSegDownEl(ev.target)) {
+                context.emitter.trigger(publicEvName, {
+                    el: segEl,
+                    event: new EventApi(context, seg.eventRange.def, seg.eventRange.instance),
+                    jsEvent: ev,
+                    view: context.viewApi,
+                });
+            }
+        };
+        return EventHovering;
+    }(Interaction));
+
+    var CalendarContent = /** @class */ (function (_super) {
+        __extends(CalendarContent, _super);
+        function CalendarContent() {
+            var _this = _super !== null && _super.apply(this, arguments) || this;
+            _this.buildViewContext = memoize(buildViewContext);
+            _this.buildViewPropTransformers = memoize(buildViewPropTransformers);
+            _this.buildToolbarProps = memoize(buildToolbarProps);
+            _this.handleNavLinkClick = buildDelegationHandler('a[data-navlink]', _this._handleNavLinkClick.bind(_this));
+            _this.headerRef = createRef();
+            _this.footerRef = createRef();
+            _this.interactionsStore = {};
+            // Component Registration
+            // -----------------------------------------------------------------------------------------------------------------
+            _this.registerInteractiveComponent = function (component, settingsInput) {
+                var settings = parseInteractionSettings(component, settingsInput);
+                var DEFAULT_INTERACTIONS = [
+                    EventClicking,
+                    EventHovering,
+                ];
+                var interactionClasses = DEFAULT_INTERACTIONS.concat(_this.props.pluginHooks.componentInteractions);
+                var interactions = interactionClasses.map(function (TheInteractionClass) { return new TheInteractionClass(settings); });
+                _this.interactionsStore[component.uid] = interactions;
+                interactionSettingsStore[component.uid] = settings;
+            };
+            _this.unregisterInteractiveComponent = function (component) {
+                for (var _i = 0, _a = _this.interactionsStore[component.uid]; _i < _a.length; _i++) {
+                    var listener = _a[_i];
+                    listener.destroy();
+                }
+                delete _this.interactionsStore[component.uid];
+                delete interactionSettingsStore[component.uid];
+            };
+            // Resizing
+            // -----------------------------------------------------------------------------------------------------------------
+            _this.resizeRunner = new DelayedRunner(function () {
+                _this.props.emitter.trigger('_resize', true); // should window resizes be considered "forced" ?
+                _this.props.emitter.trigger('windowResize', { view: _this.props.viewApi });
+            });
+            _this.handleWindowResize = function (ev) {
+                var options = _this.props.options;
+                if (options.handleWindowResize &&
+                    ev.target === window // avoid jqui events
+                ) {
+                    _this.resizeRunner.request(options.windowResizeDelay);
+                }
+            };
+            return _this;
+        }
+        /*
+        renders INSIDE of an outer div
+        */
+        CalendarContent.prototype.render = function () {
+            var props = this.props;
+            var toolbarConfig = props.toolbarConfig, options = props.options;
+            var toolbarProps = this.buildToolbarProps(props.viewSpec, props.dateProfile, props.dateProfileGenerator, props.currentDate, getNow(props.options.now, props.dateEnv), // TODO: use NowTimer????
+            props.viewTitle);
+            var viewVGrow = false;
+            var viewHeight = '';
+            var viewAspectRatio;
+            if (props.isHeightAuto || props.forPrint) {
+                viewHeight = '';
+            }
+            else if (options.height != null) {
+                viewVGrow = true;
+            }
+            else if (options.contentHeight != null) {
+                viewHeight = options.contentHeight;
+            }
+            else {
+                viewAspectRatio = Math.max(options.aspectRatio, 0.5); // prevent from getting too tall
+            }
+            var viewContext = this.buildViewContext(props.viewSpec, props.viewApi, props.options, props.dateProfileGenerator, props.dateEnv, props.theme, props.pluginHooks, props.dispatch, props.getCurrentData, props.emitter, props.calendarApi, this.registerInteractiveComponent, this.unregisterInteractiveComponent);
+            return (createElement(ViewContextType.Provider, { value: viewContext },
+                toolbarConfig.headerToolbar && (createElement(Toolbar, __assign({ ref: this.headerRef, extraClassName: "fc-header-toolbar", model: toolbarConfig.headerToolbar }, toolbarProps))),
+                createElement(ViewContainer, { liquid: viewVGrow, height: viewHeight, aspectRatio: viewAspectRatio, onClick: this.handleNavLinkClick },
+                    this.renderView(props),
+                    this.buildAppendContent()),
+                toolbarConfig.footerToolbar && (createElement(Toolbar, __assign({ ref: this.footerRef, extraClassName: "fc-footer-toolbar", model: toolbarConfig.footerToolbar }, toolbarProps)))));
+        };
+        CalendarContent.prototype.componentDidMount = function () {
+            var props = this.props;
+            this.calendarInteractions = props.pluginHooks.calendarInteractions
+                .map(function (CalendarInteractionClass) { return new CalendarInteractionClass(props); });
+            window.addEventListener('resize', this.handleWindowResize);
+            var propSetHandlers = props.pluginHooks.propSetHandlers;
+            for (var propName in propSetHandlers) {
+                propSetHandlers[propName](props[propName], props);
+            }
+        };
+        CalendarContent.prototype.componentDidUpdate = function (prevProps) {
+            var props = this.props;
+            var propSetHandlers = props.pluginHooks.propSetHandlers;
+            for (var propName in propSetHandlers) {
+                if (props[propName] !== prevProps[propName]) {
+                    propSetHandlers[propName](props[propName], props);
+                }
+            }
+        };
+        CalendarContent.prototype.componentWillUnmount = function () {
+            window.removeEventListener('resize', this.handleWindowResize);
+            this.resizeRunner.clear();
+            for (var _i = 0, _a = this.calendarInteractions; _i < _a.length; _i++) {
+                var interaction = _a[_i];
+                interaction.destroy();
+            }
+            this.props.emitter.trigger('_unmount');
+        };
+        CalendarContent.prototype._handleNavLinkClick = function (ev, anchorEl) {
+            var _a = this.props, dateEnv = _a.dateEnv, options = _a.options, calendarApi = _a.calendarApi;
+            var navLinkOptions = anchorEl.getAttribute('data-navlink');
+            navLinkOptions = navLinkOptions ? JSON.parse(navLinkOptions) : {};
+            var dateMarker = dateEnv.createMarker(navLinkOptions.date);
+            var viewType = navLinkOptions.type;
+            var customAction = viewType === 'day' ? options.navLinkDayClick :
+                viewType === 'week' ? options.navLinkWeekClick : null;
+            if (typeof customAction === 'function') {
+                customAction.call(calendarApi, dateEnv.toDate(dateMarker), ev);
+            }
+            else {
+                if (typeof customAction === 'string') {
+                    viewType = customAction;
+                }
+                calendarApi.zoomTo(dateMarker, viewType);
+            }
+        };
+        CalendarContent.prototype.buildAppendContent = function () {
+            var props = this.props;
+            var children = props.pluginHooks.viewContainerAppends.map(function (buildAppendContent) { return buildAppendContent(props); });
+            return createElement.apply(void 0, __spreadArray([Fragment, {}], children));
+        };
+        CalendarContent.prototype.renderView = function (props) {
+            var pluginHooks = props.pluginHooks;
+            var viewSpec = props.viewSpec;
+            var viewProps = {
+                dateProfile: props.dateProfile,
+                businessHours: props.businessHours,
+                eventStore: props.renderableEventStore,
+                eventUiBases: props.eventUiBases,
+                dateSelection: props.dateSelection,
+                eventSelection: props.eventSelection,
+                eventDrag: props.eventDrag,
+                eventResize: props.eventResize,
+                isHeightAuto: props.isHeightAuto,
+                forPrint: props.forPrint,
+            };
+            var transformers = this.buildViewPropTransformers(pluginHooks.viewPropsTransformers);
+            for (var _i = 0, transformers_1 = transformers; _i < transformers_1.length; _i++) {
+                var transformer = transformers_1[_i];
+                __assign(viewProps, transformer.transform(viewProps, props));
+            }
+            var ViewComponent = viewSpec.component;
+            return (createElement(ViewComponent, __assign({}, viewProps)));
+        };
+        return CalendarContent;
+    }(PureComponent));
+    function buildToolbarProps(viewSpec, dateProfile, dateProfileGenerator, currentDate, now, title) {
+        // don't force any date-profiles to valid date profiles (the `false`) so that we can tell if it's invalid
+        var todayInfo = dateProfileGenerator.build(now, undefined, false); // TODO: need `undefined` or else INFINITE LOOP for some reason
+        var prevInfo = dateProfileGenerator.buildPrev(dateProfile, currentDate, false);
+        var nextInfo = dateProfileGenerator.buildNext(dateProfile, currentDate, false);
+        return {
+            title: title,
+            activeButton: viewSpec.type,
+            isTodayEnabled: todayInfo.isValid && !rangeContainsMarker(dateProfile.currentRange, now),
+            isPrevEnabled: prevInfo.isValid,
+            isNextEnabled: nextInfo.isValid,
+        };
+    }
+    // Plugin
+    // -----------------------------------------------------------------------------------------------------------------
+    function buildViewPropTransformers(theClasses) {
+        return theClasses.map(function (TheClass) { return new TheClass(); });
+    }
+
+    var CalendarRoot = /** @class */ (function (_super) {
+        __extends(CalendarRoot, _super);
+        function CalendarRoot() {
+            var _this = _super !== null && _super.apply(this, arguments) || this;
+            _this.state = {
+                forPrint: false,
+            };
+            _this.handleBeforePrint = function () {
+                _this.setState({ forPrint: true });
+            };
+            _this.handleAfterPrint = function () {
+                _this.setState({ forPrint: false });
+            };
+            return _this;
+        }
+        CalendarRoot.prototype.render = function () {
+            var props = this.props;
+            var options = props.options;
+            var forPrint = this.state.forPrint;
+            var isHeightAuto = forPrint || options.height === 'auto' || options.contentHeight === 'auto';
+            var height = (!isHeightAuto && options.height != null) ? options.height : '';
+            var classNames = [
+                'fc',
+                forPrint ? 'fc-media-print' : 'fc-media-screen',
+                "fc-direction-" + options.direction,
+                props.theme.getClass('root'),
+            ];
+            if (!getCanVGrowWithinCell()) {
+                classNames.push('fc-liquid-hack');
+            }
+            return props.children(classNames, height, isHeightAuto, forPrint);
+        };
+        CalendarRoot.prototype.componentDidMount = function () {
+            var emitter = this.props.emitter;
+            emitter.on('_beforeprint', this.handleBeforePrint);
+            emitter.on('_afterprint', this.handleAfterPrint);
+        };
+        CalendarRoot.prototype.componentWillUnmount = function () {
+            var emitter = this.props.emitter;
+            emitter.off('_beforeprint', this.handleBeforePrint);
+            emitter.off('_afterprint', this.handleAfterPrint);
+        };
+        return CalendarRoot;
+    }(BaseComponent));
+
+    // Computes a default column header formatting string if `colFormat` is not explicitly defined
+    function computeFallbackHeaderFormat(datesRepDistinctDays, dayCnt) {
+        // if more than one week row, or if there are a lot of columns with not much space,
+        // put just the day numbers will be in each cell
+        if (!datesRepDistinctDays || dayCnt > 10) {
+            return createFormatter({ weekday: 'short' }); // "Sat"
+        }
+        if (dayCnt > 1) {
+            return createFormatter({ weekday: 'short', month: 'numeric', day: 'numeric', omitCommas: true }); // "Sat 11/12"
+        }
+        return createFormatter({ weekday: 'long' }); // "Saturday"
+    }
+
+    var CLASS_NAME = 'fc-col-header-cell'; // do the cushion too? no
+    function renderInner$1(hookProps) {
+        return hookProps.text;
+    }
+
+    var TableDateCell = /** @class */ (function (_super) {
+        __extends(TableDateCell, _super);
+        function TableDateCell() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        TableDateCell.prototype.render = function () {
+            var _a = this.context, dateEnv = _a.dateEnv, options = _a.options, theme = _a.theme, viewApi = _a.viewApi;
+            var props = this.props;
+            var date = props.date, dateProfile = props.dateProfile;
+            var dayMeta = getDateMeta(date, props.todayRange, null, dateProfile);
+            var classNames = [CLASS_NAME].concat(getDayClassNames(dayMeta, theme));
+            var text = dateEnv.format(date, props.dayHeaderFormat);
+            // if colCnt is 1, we are already in a day-view and don't need a navlink
+            var navLinkAttrs = (options.navLinks && !dayMeta.isDisabled && props.colCnt > 1)
+                ? { 'data-navlink': buildNavLinkData(date), tabIndex: 0 }
+                : {};
+            var hookProps = __assign(__assign(__assign({ date: dateEnv.toDate(date), view: viewApi }, props.extraHookProps), { text: text }), dayMeta);
+            return (createElement(RenderHook, { hookProps: hookProps, classNames: options.dayHeaderClassNames, content: options.dayHeaderContent, defaultContent: renderInner$1, didMount: options.dayHeaderDidMount, willUnmount: options.dayHeaderWillUnmount }, function (rootElRef, customClassNames, innerElRef, innerContent) { return (createElement("th", __assign({ ref: rootElRef, className: classNames.concat(customClassNames).join(' '), "data-date": !dayMeta.isDisabled ? formatDayString(date) : undefined, colSpan: props.colSpan }, props.extraDataAttrs),
+                createElement("div", { className: "fc-scrollgrid-sync-inner" }, !dayMeta.isDisabled && (createElement("a", __assign({ ref: innerElRef, className: [
+                        'fc-col-header-cell-cushion',
+                        props.isSticky ? 'fc-sticky' : '',
+                    ].join(' ') }, navLinkAttrs), innerContent))))); }));
+        };
+        return TableDateCell;
+    }(BaseComponent));
+
+    var TableDowCell = /** @class */ (function (_super) {
+        __extends(TableDowCell, _super);
+        function TableDowCell() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        TableDowCell.prototype.render = function () {
+            var props = this.props;
+            var _a = this.context, dateEnv = _a.dateEnv, theme = _a.theme, viewApi = _a.viewApi, options = _a.options;
+            var date = addDays(new Date(259200000), props.dow); // start with Sun, 04 Jan 1970 00:00:00 GMT
+            var dateMeta = {
+                dow: props.dow,
+                isDisabled: false,
+                isFuture: false,
+                isPast: false,
+                isToday: false,
+                isOther: false,
+            };
+            var classNames = [CLASS_NAME].concat(getDayClassNames(dateMeta, theme), props.extraClassNames || []);
+            var text = dateEnv.format(date, props.dayHeaderFormat);
+            var hookProps = __assign(__assign(__assign(__assign({ // TODO: make this public?
+                date: date }, dateMeta), { view: viewApi }), props.extraHookProps), { text: text });
+            return (createElement(RenderHook, { hookProps: hookProps, classNames: options.dayHeaderClassNames, content: options.dayHeaderContent, defaultContent: renderInner$1, didMount: options.dayHeaderDidMount, willUnmount: options.dayHeaderWillUnmount }, function (rootElRef, customClassNames, innerElRef, innerContent) { return (createElement("th", __assign({ ref: rootElRef, className: classNames.concat(customClassNames).join(' '), colSpan: props.colSpan }, props.extraDataAttrs),
+                createElement("div", { className: "fc-scrollgrid-sync-inner" },
+                    createElement("a", { className: [
+                            'fc-col-header-cell-cushion',
+                            props.isSticky ? 'fc-sticky' : '',
+                        ].join(' '), ref: innerElRef }, innerContent)))); }));
+        };
+        return TableDowCell;
+    }(BaseComponent));
+
+    var NowTimer = /** @class */ (function (_super) {
+        __extends(NowTimer, _super);
+        function NowTimer(props, context) {
+            var _this = _super.call(this, props, context) || this;
+            _this.initialNowDate = getNow(context.options.now, context.dateEnv);
+            _this.initialNowQueriedMs = new Date().valueOf();
+            _this.state = _this.computeTiming().currentState;
+            return _this;
+        }
+        NowTimer.prototype.render = function () {
+            var _a = this, props = _a.props, state = _a.state;
+            return props.children(state.nowDate, state.todayRange);
+        };
+        NowTimer.prototype.componentDidMount = function () {
+            this.setTimeout();
+        };
+        NowTimer.prototype.componentDidUpdate = function (prevProps) {
+            if (prevProps.unit !== this.props.unit) {
+                this.clearTimeout();
+                this.setTimeout();
+            }
+        };
+        NowTimer.prototype.componentWillUnmount = function () {
+            this.clearTimeout();
+        };
+        NowTimer.prototype.computeTiming = function () {
+            var _a = this, props = _a.props, context = _a.context;
+            var unroundedNow = addMs(this.initialNowDate, new Date().valueOf() - this.initialNowQueriedMs);
+            var currentUnitStart = context.dateEnv.startOf(unroundedNow, props.unit);
+            var nextUnitStart = context.dateEnv.add(currentUnitStart, createDuration(1, props.unit));
+            var waitMs = nextUnitStart.valueOf() - unroundedNow.valueOf();
+            // there is a max setTimeout ms value (https://stackoverflow.com/a/3468650/96342)
+            // ensure no longer than a day
+            waitMs = Math.min(1000 * 60 * 60 * 24, waitMs);
+            return {
+                currentState: { nowDate: currentUnitStart, todayRange: buildDayRange(currentUnitStart) },
+                nextState: { nowDate: nextUnitStart, todayRange: buildDayRange(nextUnitStart) },
+                waitMs: waitMs,
+            };
+        };
+        NowTimer.prototype.setTimeout = function () {
+            var _this = this;
+            var _a = this.computeTiming(), nextState = _a.nextState, waitMs = _a.waitMs;
+            this.timeoutId = setTimeout(function () {
+                _this.setState(nextState, function () {
+                    _this.setTimeout();
+                });
+            }, waitMs);
+        };
+        NowTimer.prototype.clearTimeout = function () {
+            if (this.timeoutId) {
+                clearTimeout(this.timeoutId);
+            }
+        };
+        NowTimer.contextType = ViewContextType;
+        return NowTimer;
+    }(Component));
+    function buildDayRange(date) {
+        var start = startOfDay(date);
+        var end = addDays(start, 1);
+        return { start: start, end: end };
+    }
+
+    var DayHeader = /** @class */ (function (_super) {
+        __extends(DayHeader, _super);
+        function DayHeader() {
+            var _this = _super !== null && _super.apply(this, arguments) || this;
+            _this.createDayHeaderFormatter = memoize(createDayHeaderFormatter);
+            return _this;
+        }
+        DayHeader.prototype.render = function () {
+            var context = this.context;
+            var _a = this.props, dates = _a.dates, dateProfile = _a.dateProfile, datesRepDistinctDays = _a.datesRepDistinctDays, renderIntro = _a.renderIntro;
+            var dayHeaderFormat = this.createDayHeaderFormatter(context.options.dayHeaderFormat, datesRepDistinctDays, dates.length);
+            return (createElement(NowTimer, { unit: "day" }, function (nowDate, todayRange) { return (createElement("tr", null,
+                renderIntro && renderIntro('day'),
+                dates.map(function (date) { return (datesRepDistinctDays ? (createElement(TableDateCell, { key: date.toISOString(), date: date, dateProfile: dateProfile, todayRange: todayRange, colCnt: dates.length, dayHeaderFormat: dayHeaderFormat })) : (createElement(TableDowCell, { key: date.getUTCDay(), dow: date.getUTCDay(), dayHeaderFormat: dayHeaderFormat }))); }))); }));
+        };
+        return DayHeader;
+    }(BaseComponent));
+    function createDayHeaderFormatter(explicitFormat, datesRepDistinctDays, dateCnt) {
+        return explicitFormat || computeFallbackHeaderFormat(datesRepDistinctDays, dateCnt);
+    }
+
+    var DaySeriesModel = /** @class */ (function () {
+        function DaySeriesModel(range, dateProfileGenerator) {
+            var date = range.start;
+            var end = range.end;
+            var indices = [];
+            var dates = [];
+            var dayIndex = -1;
+            while (date < end) { // loop each day from start to end
+                if (dateProfileGenerator.isHiddenDay(date)) {
+                    indices.push(dayIndex + 0.5); // mark that it's between indices
+                }
+                else {
+                    dayIndex += 1;
+                    indices.push(dayIndex);
+                    dates.push(date);
+                }
+                date = addDays(date, 1);
+            }
+            this.dates = dates;
+            this.indices = indices;
+            this.cnt = dates.length;
+        }
+        DaySeriesModel.prototype.sliceRange = function (range) {
+            var firstIndex = this.getDateDayIndex(range.start); // inclusive first index
+            var lastIndex = this.getDateDayIndex(addDays(range.end, -1)); // inclusive last index
+            var clippedFirstIndex = Math.max(0, firstIndex);
+            var clippedLastIndex = Math.min(this.cnt - 1, lastIndex);
+            // deal with in-between indices
+            clippedFirstIndex = Math.ceil(clippedFirstIndex); // in-between starts round to next cell
+            clippedLastIndex = Math.floor(clippedLastIndex); // in-between ends round to prev cell
+            if (clippedFirstIndex <= clippedLastIndex) {
+                return {
+                    firstIndex: clippedFirstIndex,
+                    lastIndex: clippedLastIndex,
+                    isStart: firstIndex === clippedFirstIndex,
+                    isEnd: lastIndex === clippedLastIndex,
+                };
+            }
+            return null;
+        };
+        // Given a date, returns its chronolocial cell-index from the first cell of the grid.
+        // If the date lies between cells (because of hiddenDays), returns a floating-point value between offsets.
+        // If before the first offset, returns a negative number.
+        // If after the last offset, returns an offset past the last cell offset.
+        // Only works for *start* dates of cells. Will not work for exclusive end dates for cells.
+        DaySeriesModel.prototype.getDateDayIndex = function (date) {
+            var indices = this.indices;
+            var dayOffset = Math.floor(diffDays(this.dates[0], date));
+            if (dayOffset < 0) {
+                return indices[0] - 1;
+            }
+            if (dayOffset >= indices.length) {
+                return indices[indices.length - 1] + 1;
+            }
+            return indices[dayOffset];
+        };
+        return DaySeriesModel;
+    }());
+
+    var DayTableModel = /** @class */ (function () {
+        function DayTableModel(daySeries, breakOnWeeks) {
+            var dates = daySeries.dates;
+            var daysPerRow;
+            var firstDay;
+            var rowCnt;
+            if (breakOnWeeks) {
+                // count columns until the day-of-week repeats
+                firstDay = dates[0].getUTCDay();
+                for (daysPerRow = 1; daysPerRow < dates.length; daysPerRow += 1) {
+                    if (dates[daysPerRow].getUTCDay() === firstDay) {
+                        break;
+                    }
+                }
+                rowCnt = Math.ceil(dates.length / daysPerRow);
+            }
+            else {
+                rowCnt = 1;
+                daysPerRow = dates.length;
+            }
+            this.rowCnt = rowCnt;
+            this.colCnt = daysPerRow;
+            this.daySeries = daySeries;
+            this.cells = this.buildCells();
+            this.headerDates = this.buildHeaderDates();
+        }
+        DayTableModel.prototype.buildCells = function () {
+            var rows = [];
+            for (var row = 0; row < this.rowCnt; row += 1) {
+                var cells = [];
+                for (var col = 0; col < this.colCnt; col += 1) {
+                    cells.push(this.buildCell(row, col));
+                }
+                rows.push(cells);
+            }
+            return rows;
+        };
+        DayTableModel.prototype.buildCell = function (row, col) {
+            var date = this.daySeries.dates[row * this.colCnt + col];
+            return {
+                key: date.toISOString(),
+                date: date,
+            };
+        };
+        DayTableModel.prototype.buildHeaderDates = function () {
+            var dates = [];
+            for (var col = 0; col < this.colCnt; col += 1) {
+                dates.push(this.cells[0][col].date);
+            }
+            return dates;
+        };
+        DayTableModel.prototype.sliceRange = function (range) {
+            var colCnt = this.colCnt;
+            var seriesSeg = this.daySeries.sliceRange(range);
+            var segs = [];
+            if (seriesSeg) {
+                var firstIndex = seriesSeg.firstIndex, lastIndex = seriesSeg.lastIndex;
+                var index = firstIndex;
+                while (index <= lastIndex) {
+                    var row = Math.floor(index / colCnt);
+                    var nextIndex = Math.min((row + 1) * colCnt, lastIndex + 1);
+                    segs.push({
+                        row: row,
+                        firstCol: index % colCnt,
+                        lastCol: (nextIndex - 1) % colCnt,
+                        isStart: seriesSeg.isStart && index === firstIndex,
+                        isEnd: seriesSeg.isEnd && (nextIndex - 1) === lastIndex,
+                    });
+                    index = nextIndex;
+                }
+            }
+            return segs;
+        };
+        return DayTableModel;
+    }());
+
+    var Slicer = /** @class */ (function () {
+        function Slicer() {
+            this.sliceBusinessHours = memoize(this._sliceBusinessHours);
+            this.sliceDateSelection = memoize(this._sliceDateSpan);
+            this.sliceEventStore = memoize(this._sliceEventStore);
+            this.sliceEventDrag = memoize(this._sliceInteraction);
+            this.sliceEventResize = memoize(this._sliceInteraction);
+            this.forceDayIfListItem = false; // hack
+        }
+        Slicer.prototype.sliceProps = function (props, dateProfile, nextDayThreshold, context) {
+            var extraArgs = [];
+            for (var _i = 4; _i < arguments.length; _i++) {
+                extraArgs[_i - 4] = arguments[_i];
+            }
+            var eventUiBases = props.eventUiBases;
+            var eventSegs = this.sliceEventStore.apply(this, __spreadArray([props.eventStore, eventUiBases, dateProfile, nextDayThreshold], extraArgs));
+            return {
+                dateSelectionSegs: this.sliceDateSelection.apply(this, __spreadArray([props.dateSelection, eventUiBases, context], extraArgs)),
+                businessHourSegs: this.sliceBusinessHours.apply(this, __spreadArray([props.businessHours, dateProfile, nextDayThreshold, context], extraArgs)),
+                fgEventSegs: eventSegs.fg,
+                bgEventSegs: eventSegs.bg,
+                eventDrag: this.sliceEventDrag.apply(this, __spreadArray([props.eventDrag, eventUiBases, dateProfile, nextDayThreshold], extraArgs)),
+                eventResize: this.sliceEventResize.apply(this, __spreadArray([props.eventResize, eventUiBases, dateProfile, nextDayThreshold], extraArgs)),
+                eventSelection: props.eventSelection,
+            }; // TODO: give interactionSegs?
+        };
+        Slicer.prototype.sliceNowDate = function (// does not memoize
+        date, context) {
+            var extraArgs = [];
+            for (var _i = 2; _i < arguments.length; _i++) {
+                extraArgs[_i - 2] = arguments[_i];
+            }
+            return this._sliceDateSpan.apply(this, __spreadArray([{ range: { start: date, end: addMs(date, 1) }, allDay: false },
+                {},
+                context], extraArgs));
+        };
+        Slicer.prototype._sliceBusinessHours = function (businessHours, dateProfile, nextDayThreshold, context) {
+            var extraArgs = [];
+            for (var _i = 4; _i < arguments.length; _i++) {
+                extraArgs[_i - 4] = arguments[_i];
+            }
+            if (!businessHours) {
+                return [];
+            }
+            return this._sliceEventStore.apply(this, __spreadArray([expandRecurring(businessHours, computeActiveRange(dateProfile, Boolean(nextDayThreshold)), context),
+                {},
+                dateProfile,
+                nextDayThreshold], extraArgs)).bg;
+        };
+        Slicer.prototype._sliceEventStore = function (eventStore, eventUiBases, dateProfile, nextDayThreshold) {
+            var extraArgs = [];
+            for (var _i = 4; _i < arguments.length; _i++) {
+                extraArgs[_i - 4] = arguments[_i];
+            }
+            if (eventStore) {
+                var rangeRes = sliceEventStore(eventStore, eventUiBases, computeActiveRange(dateProfile, Boolean(nextDayThreshold)), nextDayThreshold);
+                return {
+                    bg: this.sliceEventRanges(rangeRes.bg, extraArgs),
+                    fg: this.sliceEventRanges(rangeRes.fg, extraArgs),
+                };
+            }
+            return { bg: [], fg: [] };
+        };
+        Slicer.prototype._sliceInteraction = function (interaction, eventUiBases, dateProfile, nextDayThreshold) {
+            var extraArgs = [];
+            for (var _i = 4; _i < arguments.length; _i++) {
+                extraArgs[_i - 4] = arguments[_i];
+            }
+            if (!interaction) {
+                return null;
+            }
+            var rangeRes = sliceEventStore(interaction.mutatedEvents, eventUiBases, computeActiveRange(dateProfile, Boolean(nextDayThreshold)), nextDayThreshold);
+            return {
+                segs: this.sliceEventRanges(rangeRes.fg, extraArgs),
+                affectedInstances: interaction.affectedEvents.instances,
+                isEvent: interaction.isEvent,
+            };
+        };
+        Slicer.prototype._sliceDateSpan = function (dateSpan, eventUiBases, context) {
+            var extraArgs = [];
+            for (var _i = 3; _i < arguments.length; _i++) {
+                extraArgs[_i - 3] = arguments[_i];
+            }
+            if (!dateSpan) {
+                return [];
+            }
+            var eventRange = fabricateEventRange(dateSpan, eventUiBases, context);
+            var segs = this.sliceRange.apply(this, __spreadArray([dateSpan.range], extraArgs));
+            for (var _a = 0, segs_1 = segs; _a < segs_1.length; _a++) {
+                var seg = segs_1[_a];
+                seg.eventRange = eventRange;
+            }
+            return segs;
+        };
+        /*
+        "complete" seg means it has component and eventRange
+        */
+        Slicer.prototype.sliceEventRanges = function (eventRanges, extraArgs) {
+            var segs = [];
+            for (var _i = 0, eventRanges_1 = eventRanges; _i < eventRanges_1.length; _i++) {
+                var eventRange = eventRanges_1[_i];
+                segs.push.apply(segs, this.sliceEventRange(eventRange, extraArgs));
+            }
+            return segs;
+        };
+        /*
+        "complete" seg means it has component and eventRange
+        */
+        Slicer.prototype.sliceEventRange = function (eventRange, extraArgs) {
+            var dateRange = eventRange.range;
+            // hack to make multi-day events that are being force-displayed as list-items to take up only one day
+            if (this.forceDayIfListItem && eventRange.ui.display === 'list-item') {
+                dateRange = {
+                    start: dateRange.start,
+                    end: addDays(dateRange.start, 1),
+                };
+            }
+            var segs = this.sliceRange.apply(this, __spreadArray([dateRange], extraArgs));
+            for (var _i = 0, segs_2 = segs; _i < segs_2.length; _i++) {
+                var seg = segs_2[_i];
+                seg.eventRange = eventRange;
+                seg.isStart = eventRange.isStart && seg.isStart;
+                seg.isEnd = eventRange.isEnd && seg.isEnd;
+            }
+            return segs;
+        };
+        return Slicer;
+    }());
+    /*
+    for incorporating slotMinTime/slotMaxTime if appropriate
+    TODO: should be part of DateProfile!
+    TimelineDateProfile already does this btw
+    */
+    function computeActiveRange(dateProfile, isComponentAllDay) {
+        var range = dateProfile.activeRange;
+        if (isComponentAllDay) {
+            return range;
+        }
+        return {
+            start: addMs(range.start, dateProfile.slotMinTime.milliseconds),
+            end: addMs(range.end, dateProfile.slotMaxTime.milliseconds - 864e5), // 864e5 = ms in a day
+        };
+    }
+
+    // high-level segmenting-aware tester functions
+    // ------------------------------------------------------------------------------------------------------------------------
+    function isInteractionValid(interaction, dateProfile, context) {
+        var instances = interaction.mutatedEvents.instances;
+        for (var instanceId in instances) {
+            if (!rangeContainsRange(dateProfile.validRange, instances[instanceId].range)) {
+                return false;
+            }
+        }
+        return isNewPropsValid({ eventDrag: interaction }, context); // HACK: the eventDrag props is used for ALL interactions
+    }
+    function isDateSelectionValid(dateSelection, dateProfile, context) {
+        if (!rangeContainsRange(dateProfile.validRange, dateSelection.range)) {
+            return false;
+        }
+        return isNewPropsValid({ dateSelection: dateSelection }, context);
+    }
+    function isNewPropsValid(newProps, context) {
+        var calendarState = context.getCurrentData();
+        var props = __assign({ businessHours: calendarState.businessHours, dateSelection: '', eventStore: calendarState.eventStore, eventUiBases: calendarState.eventUiBases, eventSelection: '', eventDrag: null, eventResize: null }, newProps);
+        return (context.pluginHooks.isPropsValid || isPropsValid)(props, context);
+    }
+    function isPropsValid(state, context, dateSpanMeta, filterConfig) {
+        if (dateSpanMeta === void 0) { dateSpanMeta = {}; }
+        if (state.eventDrag && !isInteractionPropsValid(state, context, dateSpanMeta, filterConfig)) {
+            return false;
+        }
+        if (state.dateSelection && !isDateSelectionPropsValid(state, context, dateSpanMeta, filterConfig)) {
+            return false;
+        }
+        return true;
+    }
+    // Moving Event Validation
+    // ------------------------------------------------------------------------------------------------------------------------
+    function isInteractionPropsValid(state, context, dateSpanMeta, filterConfig) {
+        var currentState = context.getCurrentData();
+        var interaction = state.eventDrag; // HACK: the eventDrag props is used for ALL interactions
+        var subjectEventStore = interaction.mutatedEvents;
+        var subjectDefs = subjectEventStore.defs;
+        var subjectInstances = subjectEventStore.instances;
+        var subjectConfigs = compileEventUis(subjectDefs, interaction.isEvent ?
+            state.eventUiBases :
+            { '': currentState.selectionConfig });
+        if (filterConfig) {
+            subjectConfigs = mapHash(subjectConfigs, filterConfig);
+        }
+        // exclude the subject events. TODO: exclude defs too?
+        var otherEventStore = excludeInstances(state.eventStore, interaction.affectedEvents.instances);
+        var otherDefs = otherEventStore.defs;
+        var otherInstances = otherEventStore.instances;
+        var otherConfigs = compileEventUis(otherDefs, state.eventUiBases);
+        for (var subjectInstanceId in subjectInstances) {
+            var subjectInstance = subjectInstances[subjectInstanceId];
+            var subjectRange = subjectInstance.range;
+            var subjectConfig = subjectConfigs[subjectInstance.defId];
+            var subjectDef = subjectDefs[subjectInstance.defId];
+            // constraint
+            if (!allConstraintsPass(subjectConfig.constraints, subjectRange, otherEventStore, state.businessHours, context)) {
+                return false;
+            }
+            // overlap
+            var eventOverlap = context.options.eventOverlap;
+            var eventOverlapFunc = typeof eventOverlap === 'function' ? eventOverlap : null;
+            for (var otherInstanceId in otherInstances) {
+                var otherInstance = otherInstances[otherInstanceId];
+                // intersect! evaluate
+                if (rangesIntersect(subjectRange, otherInstance.range)) {
+                    var otherOverlap = otherConfigs[otherInstance.defId].overlap;
+                    // consider the other event's overlap. only do this if the subject event is a "real" event
+                    if (otherOverlap === false && interaction.isEvent) {
+                        return false;
+                    }
+                    if (subjectConfig.overlap === false) {
+                        return false;
+                    }
+                    if (eventOverlapFunc && !eventOverlapFunc(new EventApi(context, otherDefs[otherInstance.defId], otherInstance), // still event
+                    new EventApi(context, subjectDef, subjectInstance))) {
+                        return false;
+                    }
+                }
+            }
+            // allow (a function)
+            var calendarEventStore = currentState.eventStore; // need global-to-calendar, not local to component (splittable)state
+            for (var _i = 0, _a = subjectConfig.allows; _i < _a.length; _i++) {
+                var subjectAllow = _a[_i];
+                var subjectDateSpan = __assign(__assign({}, dateSpanMeta), { range: subjectInstance.range, allDay: subjectDef.allDay });
+                var origDef = calendarEventStore.defs[subjectDef.defId];
+                var origInstance = calendarEventStore.instances[subjectInstanceId];
+                var eventApi = void 0;
+                if (origDef) { // was previously in the calendar
+                    eventApi = new EventApi(context, origDef, origInstance);
+                }
+                else { // was an external event
+                    eventApi = new EventApi(context, subjectDef); // no instance, because had no dates
+                }
+                if (!subjectAllow(buildDateSpanApiWithContext(subjectDateSpan, context), eventApi)) {
+                    return false;
+                }
+            }
+        }
+        return true;
+    }
+    // Date Selection Validation
+    // ------------------------------------------------------------------------------------------------------------------------
+    function isDateSelectionPropsValid(state, context, dateSpanMeta, filterConfig) {
+        var relevantEventStore = state.eventStore;
+        var relevantDefs = relevantEventStore.defs;
+        var relevantInstances = relevantEventStore.instances;
+        var selection = state.dateSelection;
+        var selectionRange = selection.range;
+        var selectionConfig = context.getCurrentData().selectionConfig;
+        if (filterConfig) {
+            selectionConfig = filterConfig(selectionConfig);
+        }
+        // constraint
+        if (!allConstraintsPass(selectionConfig.constraints, selectionRange, relevantEventStore, state.businessHours, context)) {
+            return false;
+        }
+        // overlap
+        var selectOverlap = context.options.selectOverlap;
+        var selectOverlapFunc = typeof selectOverlap === 'function' ? selectOverlap : null;
+        for (var relevantInstanceId in relevantInstances) {
+            var relevantInstance = relevantInstances[relevantInstanceId];
+            // intersect! evaluate
+            if (rangesIntersect(selectionRange, relevantInstance.range)) {
+                if (selectionConfig.overlap === false) {
+                    return false;
+                }
+                if (selectOverlapFunc && !selectOverlapFunc(new EventApi(context, relevantDefs[relevantInstance.defId], relevantInstance), null)) {
+                    return false;
+                }
+            }
+        }
+        // allow (a function)
+        for (var _i = 0, _a = selectionConfig.allows; _i < _a.length; _i++) {
+            var selectionAllow = _a[_i];
+            var fullDateSpan = __assign(__assign({}, dateSpanMeta), selection);
+            if (!selectionAllow(buildDateSpanApiWithContext(fullDateSpan, context), null)) {
+                return false;
+            }
+        }
+        return true;
+    }
+    // Constraint Utils
+    // ------------------------------------------------------------------------------------------------------------------------
+    function allConstraintsPass(constraints, subjectRange, otherEventStore, businessHoursUnexpanded, context) {
+        for (var _i = 0, constraints_1 = constraints; _i < constraints_1.length; _i++) {
+            var constraint = constraints_1[_i];
+            if (!anyRangesContainRange(constraintToRanges(constraint, subjectRange, otherEventStore, businessHoursUnexpanded, context), subjectRange)) {
+                return false;
+            }
+        }
+        return true;
+    }
+    function constraintToRanges(constraint, subjectRange, // for expanding a recurring constraint, or expanding business hours
+    otherEventStore, // for if constraint is an even group ID
+    businessHoursUnexpanded, // for if constraint is 'businessHours'
+    context) {
+        if (constraint === 'businessHours') {
+            return eventStoreToRanges(expandRecurring(businessHoursUnexpanded, subjectRange, context));
+        }
+        if (typeof constraint === 'string') { // an group ID
+            return eventStoreToRanges(filterEventStoreDefs(otherEventStore, function (eventDef) { return eventDef.groupId === constraint; }));
+        }
+        if (typeof constraint === 'object' && constraint) { // non-null object
+            return eventStoreToRanges(expandRecurring(constraint, subjectRange, context));
+        }
+        return []; // if it's false
+    }
+    // TODO: move to event-store file?
+    function eventStoreToRanges(eventStore) {
+        var instances = eventStore.instances;
+        var ranges = [];
+        for (var instanceId in instances) {
+            ranges.push(instances[instanceId].range);
+        }
+        return ranges;
+    }
+    // TODO: move to geom file?
+    function anyRangesContainRange(outerRanges, innerRange) {
+        for (var _i = 0, outerRanges_1 = outerRanges; _i < outerRanges_1.length; _i++) {
+            var outerRange = outerRanges_1[_i];
+            if (rangeContainsRange(outerRange, innerRange)) {
+                return true;
+            }
+        }
+        return false;
+    }
+
+    var VISIBLE_HIDDEN_RE = /^(visible|hidden)$/;
+    var Scroller = /** @class */ (function (_super) {
+        __extends(Scroller, _super);
+        function Scroller() {
+            var _this = _super !== null && _super.apply(this, arguments) || this;
+            _this.handleEl = function (el) {
+                _this.el = el;
+                setRef(_this.props.elRef, el);
+            };
+            return _this;
+        }
+        Scroller.prototype.render = function () {
+            var props = this.props;
+            var liquid = props.liquid, liquidIsAbsolute = props.liquidIsAbsolute;
+            var isAbsolute = liquid && liquidIsAbsolute;
+            var className = ['fc-scroller'];
+            if (liquid) {
+                if (liquidIsAbsolute) {
+                    className.push('fc-scroller-liquid-absolute');
+                }
+                else {
+                    className.push('fc-scroller-liquid');
+                }
+            }
+            return (createElement("div", { ref: this.handleEl, className: className.join(' '), style: {
+                    overflowX: props.overflowX,
+                    overflowY: props.overflowY,
+                    left: (isAbsolute && -(props.overcomeLeft || 0)) || '',
+                    right: (isAbsolute && -(props.overcomeRight || 0)) || '',
+                    bottom: (isAbsolute && -(props.overcomeBottom || 0)) || '',
+                    marginLeft: (!isAbsolute && -(props.overcomeLeft || 0)) || '',
+                    marginRight: (!isAbsolute && -(props.overcomeRight || 0)) || '',
+                    marginBottom: (!isAbsolute && -(props.overcomeBottom || 0)) || '',
+                    maxHeight: props.maxHeight || '',
+                } }, props.children));
+        };
+        Scroller.prototype.needsXScrolling = function () {
+            if (VISIBLE_HIDDEN_RE.test(this.props.overflowX)) {
+                return false;
+            }
+            // testing scrollWidth>clientWidth is unreliable cross-browser when pixel heights aren't integers.
+            // much more reliable to see if children are taller than the scroller, even tho doesn't account for
+            // inner-child margins and absolute positioning
+            var el = this.el;
+            var realClientWidth = this.el.getBoundingClientRect().width - this.getYScrollbarWidth();
+            var children = el.children;
+            for (var i = 0; i < children.length; i += 1) {
+                var childEl = children[i];
+                if (childEl.getBoundingClientRect().width > realClientWidth) {
+                    return true;
+                }
+            }
+            return false;
+        };
+        Scroller.prototype.needsYScrolling = function () {
+            if (VISIBLE_HIDDEN_RE.test(this.props.overflowY)) {
+                return false;
+            }
+            // testing scrollHeight>clientHeight is unreliable cross-browser when pixel heights aren't integers.
+            // much more reliable to see if children are taller than the scroller, even tho doesn't account for
+            // inner-child margins and absolute positioning
+            var el = this.el;
+            var realClientHeight = this.el.getBoundingClientRect().height - this.getXScrollbarWidth();
+            var children = el.children;
+            for (var i = 0; i < children.length; i += 1) {
+                var childEl = children[i];
+                if (childEl.getBoundingClientRect().height > realClientHeight) {
+                    return true;
+                }
+            }
+            return false;
+        };
+        Scroller.prototype.getXScrollbarWidth = function () {
+            if (VISIBLE_HIDDEN_RE.test(this.props.overflowX)) {
+                return 0;
+            }
+            return this.el.offsetHeight - this.el.clientHeight; // only works because we guarantee no borders. TODO: add to CSS with important?
+        };
+        Scroller.prototype.getYScrollbarWidth = function () {
+            if (VISIBLE_HIDDEN_RE.test(this.props.overflowY)) {
+                return 0;
+            }
+            return this.el.offsetWidth - this.el.clientWidth; // only works because we guarantee no borders. TODO: add to CSS with important?
+        };
+        return Scroller;
+    }(BaseComponent));
+
+    /*
+    TODO: somehow infer OtherArgs from masterCallback?
+    TODO: infer RefType from masterCallback if provided
+    */
+    var RefMap = /** @class */ (function () {
+        function RefMap(masterCallback) {
+            var _this = this;
+            this.masterCallback = masterCallback;
+            this.currentMap = {};
+            this.depths = {};
+            this.callbackMap = {};
+            this.handleValue = function (val, key) {
+                var _a = _this, depths = _a.depths, currentMap = _a.currentMap;
+                var removed = false;
+                var added = false;
+                if (val !== null) {
+                    // for bug... ACTUALLY: can probably do away with this now that callers don't share numeric indices anymore
+                    removed = (key in currentMap);
+                    currentMap[key] = val;
+                    depths[key] = (depths[key] || 0) + 1;
+                    added = true;
+                }
+                else {
+                    depths[key] -= 1;
+                    if (!depths[key]) {
+                        delete currentMap[key];
+                        delete _this.callbackMap[key];
+                        removed = true;
+                    }
+                }
+                if (_this.masterCallback) {
+                    if (removed) {
+                        _this.masterCallback(null, String(key));
+                    }
+                    if (added) {
+                        _this.masterCallback(val, String(key));
+                    }
+                }
+            };
+        }
+        RefMap.prototype.createRef = function (key) {
+            var _this = this;
+            var refCallback = this.callbackMap[key];
+            if (!refCallback) {
+                refCallback = this.callbackMap[key] = function (val) {
+                    _this.handleValue(val, String(key));
+                };
+            }
+            return refCallback;
+        };
+        // TODO: check callers that don't care about order. should use getAll instead
+        // NOTE: this method has become less valuable now that we are encouraged to map order by some other index
+        // TODO: provide ONE array-export function, buildArray, which fails on non-numeric indexes. caller can manipulate and "collect"
+        RefMap.prototype.collect = function (startIndex, endIndex, step) {
+            return collectFromHash(this.currentMap, startIndex, endIndex, step);
+        };
+        RefMap.prototype.getAll = function () {
+            return hashValuesToArray(this.currentMap);
+        };
+        return RefMap;
+    }());
+
+    function computeShrinkWidth(chunkEls) {
+        var shrinkCells = findElements(chunkEls, '.fc-scrollgrid-shrink');
+        var largestWidth = 0;
+        for (var _i = 0, shrinkCells_1 = shrinkCells; _i < shrinkCells_1.length; _i++) {
+            var shrinkCell = shrinkCells_1[_i];
+            largestWidth = Math.max(largestWidth, computeSmallestCellWidth(shrinkCell));
+        }
+        return Math.ceil(largestWidth); //  elements work best with integers. round up to ensure contents fits
+    }
+    function getSectionHasLiquidHeight(props, sectionConfig) {
+        return props.liquid && sectionConfig.liquid; // does the section do liquid-height? (need to have whole scrollgrid liquid-height as well)
+    }
+    function getAllowYScrolling(props, sectionConfig) {
+        return sectionConfig.maxHeight != null || // if its possible for the height to max out, we might need scrollbars
+            getSectionHasLiquidHeight(props, sectionConfig); // if the section is liquid height, it might condense enough to require scrollbars
+    }
+    // TODO: ONLY use `arg`. force out internal function to use same API
+    function renderChunkContent(sectionConfig, chunkConfig, arg) {
+        var expandRows = arg.expandRows;
+        var content = typeof chunkConfig.content === 'function' ?
+            chunkConfig.content(arg) :
+            createElement('table', {
+                className: [
+                    chunkConfig.tableClassName,
+                    sectionConfig.syncRowHeights ? 'fc-scrollgrid-sync-table' : '',
+                ].join(' '),
+                style: {
+                    minWidth: arg.tableMinWidth,
+                    width: arg.clientWidth,
+                    height: expandRows ? arg.clientHeight : '', // css `height` on a 
 serves as a min-height
+                },
+            }, arg.tableColGroupNode, createElement('tbody', {}, typeof chunkConfig.rowContent === 'function' ? chunkConfig.rowContent(arg) : chunkConfig.rowContent));
+        return content;
+    }
+    function isColPropsEqual(cols0, cols1) {
+        return isArraysEqual(cols0, cols1, isPropsEqual);
+    }
+    function renderMicroColGroup(cols, shrinkWidth) {
+        var colNodes = [];
+        /*
+        for ColProps with spans, it would have been great to make a single +        HOWEVER, Chrome was getting messing up distributing the width to elements makes Chrome behave.
+        */
+        for (var _i = 0, cols_1 = cols; _i < cols_1.length; _i++) {
+            var colProps = cols_1[_i];
+            var span = colProps.span || 1;
+            for (var i = 0; i < span; i += 1) {
+                colNodes.push(createElement("col", { style: {
+                        width: colProps.width === 'shrink' ? sanitizeShrinkWidth(shrinkWidth) : (colProps.width || ''),
+                        minWidth: colProps.minWidth || '',
+                    } }));
+            }
+        }
+        return createElement.apply(void 0, __spreadArray(['colgroup', {}], colNodes));
+    }
+    function sanitizeShrinkWidth(shrinkWidth) {
+        /* why 4? if we do 0, it will kill any border, which are needed for computeSmallestCellWidth
+        4 accounts for 2 2-pixel borders. TODO: better solution? */
+        return shrinkWidth == null ? 4 : shrinkWidth;
+    }
+    function hasShrinkWidth(cols) {
+        for (var _i = 0, cols_2 = cols; _i < cols_2.length; _i++) {
+            var col = cols_2[_i];
+            if (col.width === 'shrink') {
+                return true;
+            }
+        }
+        return false;
+    }
+    function getScrollGridClassNames(liquid, context) {
+        var classNames = [
+            'fc-scrollgrid',
+            context.theme.getClass('table'),
+        ];
+        if (liquid) {
+            classNames.push('fc-scrollgrid-liquid');
+        }
+        return classNames;
+    }
+    function getSectionClassNames(sectionConfig, wholeTableVGrow) {
+        var classNames = [
+            'fc-scrollgrid-section',
+            "fc-scrollgrid-section-" + sectionConfig.type,
+            sectionConfig.className, // used?
+        ];
+        if (wholeTableVGrow && sectionConfig.liquid && sectionConfig.maxHeight == null) {
+            classNames.push('fc-scrollgrid-section-liquid');
+        }
+        if (sectionConfig.isSticky) {
+            classNames.push('fc-scrollgrid-section-sticky');
+        }
+        return classNames;
+    }
+    function renderScrollShim(arg) {
+        return (createElement("div", { className: "fc-scrollgrid-sticky-shim", style: {
+                width: arg.clientWidth,
+                minWidth: arg.tableMinWidth,
+            } }));
+    }
+    function getStickyHeaderDates(options) {
+        var stickyHeaderDates = options.stickyHeaderDates;
+        if (stickyHeaderDates == null || stickyHeaderDates === 'auto') {
+            stickyHeaderDates = options.height === 'auto' || options.viewHeight === 'auto';
+        }
+        return stickyHeaderDates;
+    }
+    function getStickyFooterScrollbar(options) {
+        var stickyFooterScrollbar = options.stickyFooterScrollbar;
+        if (stickyFooterScrollbar == null || stickyFooterScrollbar === 'auto') {
+            stickyFooterScrollbar = options.height === 'auto' || options.viewHeight === 'auto';
+        }
+        return stickyFooterScrollbar;
+    }
+
+    var SimpleScrollGrid = /** @class */ (function (_super) {
+        __extends(SimpleScrollGrid, _super);
+        function SimpleScrollGrid() {
+            var _this = _super !== null && _super.apply(this, arguments) || this;
+            _this.processCols = memoize(function (a) { return a; }, isColPropsEqual); // so we get same `cols` props every time
+            // yucky to memoize VNodes, but much more efficient for consumers
+            _this.renderMicroColGroup = memoize(renderMicroColGroup);
+            _this.scrollerRefs = new RefMap();
+            _this.scrollerElRefs = new RefMap(_this._handleScrollerEl.bind(_this));
+            _this.state = {
+                shrinkWidth: null,
+                forceYScrollbars: false,
+                scrollerClientWidths: {},
+                scrollerClientHeights: {},
+            };
+            // TODO: can do a really simple print-view. dont need to join rows
+            _this.handleSizing = function () {
+                _this.setState(__assign({ shrinkWidth: _this.computeShrinkWidth() }, _this.computeScrollerDims()));
+            };
+            return _this;
+        }
+        SimpleScrollGrid.prototype.render = function () {
+            var _a = this, props = _a.props, state = _a.state, context = _a.context;
+            var sectionConfigs = props.sections || [];
+            var cols = this.processCols(props.cols);
+            var microColGroupNode = this.renderMicroColGroup(cols, state.shrinkWidth);
+            var classNames = getScrollGridClassNames(props.liquid, context);
+            if (props.collapsibleWidth) {
+                classNames.push('fc-scrollgrid-collapsible');
+            }
+            // TODO: make DRY
+            var configCnt = sectionConfigs.length;
+            var configI = 0;
+            var currentConfig;
+            var headSectionNodes = [];
+            var bodySectionNodes = [];
+            var footSectionNodes = [];
+            while (configI < configCnt && (currentConfig = sectionConfigs[configI]).type === 'header') {
+                headSectionNodes.push(this.renderSection(currentConfig, microColGroupNode));
+                configI += 1;
+            }
+            while (configI < configCnt && (currentConfig = sectionConfigs[configI]).type === 'body') {
+                bodySectionNodes.push(this.renderSection(currentConfig, microColGroupNode));
+                configI += 1;
+            }
+            while (configI < configCnt && (currentConfig = sectionConfigs[configI]).type === 'footer') {
+                footSectionNodes.push(this.renderSection(currentConfig, microColGroupNode));
+                configI += 1;
+            }
+            // firefox bug: when setting height on table and there is a thead or tfoot,
+            // the necessary height:100% on the liquid-height body section forces the *whole* table to be taller. (bug #5524)
+            // use getCanVGrowWithinCell as a way to detect table-stupid firefox.
+            // if so, use a simpler dom structure, jam everything into a lone tbody.
+            var isBuggy = !getCanVGrowWithinCell();
+            return createElement('table', {
+                className: classNames.join(' '),
+                style: { height: props.height },
+            }, Boolean(!isBuggy && headSectionNodes.length) && createElement.apply(void 0, __spreadArray(['thead', {}], headSectionNodes)), Boolean(!isBuggy && bodySectionNodes.length) && createElement.apply(void 0, __spreadArray(['tbody', {}], bodySectionNodes)), Boolean(!isBuggy && footSectionNodes.length) && createElement.apply(void 0, __spreadArray(['tfoot', {}], footSectionNodes)), isBuggy && createElement.apply(void 0, __spreadArray(__spreadArray(__spreadArray(['tbody', {}], headSectionNodes), bodySectionNodes), footSectionNodes)));
+        };
+        SimpleScrollGrid.prototype.renderSection = function (sectionConfig, microColGroupNode) {
+            if ('outerContent' in sectionConfig) {
+                return (createElement(Fragment, { key: sectionConfig.key }, sectionConfig.outerContent));
+            }
+            return (createElement("tr", { key: sectionConfig.key, className: getSectionClassNames(sectionConfig, this.props.liquid).join(' ') }, this.renderChunkTd(sectionConfig, microColGroupNode, sectionConfig.chunk)));
+        };
+        SimpleScrollGrid.prototype.renderChunkTd = function (sectionConfig, microColGroupNode, chunkConfig) {
+            if ('outerContent' in chunkConfig) {
+                return chunkConfig.outerContent;
+            }
+            var props = this.props;
+            var _a = this.state, forceYScrollbars = _a.forceYScrollbars, scrollerClientWidths = _a.scrollerClientWidths, scrollerClientHeights = _a.scrollerClientHeights;
+            var needsYScrolling = getAllowYScrolling(props, sectionConfig); // TODO: do lazily. do in section config?
+            var isLiquid = getSectionHasLiquidHeight(props, sectionConfig);
+            // for `!props.liquid` - is WHOLE scrollgrid natural height?
+            // TODO: do same thing in advanced scrollgrid? prolly not b/c always has horizontal scrollbars
+            var overflowY = !props.liquid ? 'visible' :
+                forceYScrollbars ? 'scroll' :
+                    !needsYScrolling ? 'hidden' :
+                        'auto';
+            var sectionKey = sectionConfig.key;
+            var content = renderChunkContent(sectionConfig, chunkConfig, {
+                tableColGroupNode: microColGroupNode,
+                tableMinWidth: '',
+                clientWidth: (!props.collapsibleWidth && scrollerClientWidths[sectionKey] !== undefined) ? scrollerClientWidths[sectionKey] : null,
+                clientHeight: scrollerClientHeights[sectionKey] !== undefined ? scrollerClientHeights[sectionKey] : null,
+                expandRows: sectionConfig.expandRows,
+                syncRowHeights: false,
+                rowSyncHeights: [],
+                reportRowHeightChange: function () { },
+            });
+            return (createElement("td", { ref: chunkConfig.elRef },
+                createElement("div", { className: "fc-scroller-harness" + (isLiquid ? ' fc-scroller-harness-liquid' : '') },
+                    createElement(Scroller, { ref: this.scrollerRefs.createRef(sectionKey), elRef: this.scrollerElRefs.createRef(sectionKey), overflowY: overflowY, overflowX: !props.liquid ? 'visible' : 'hidden' /* natural height? */, maxHeight: sectionConfig.maxHeight, liquid: isLiquid, liquidIsAbsolute // because its within a harness
+                        : true }, content))));
+        };
+        SimpleScrollGrid.prototype._handleScrollerEl = function (scrollerEl, key) {
+            var section = getSectionByKey(this.props.sections, key);
+            if (section) {
+                setRef(section.chunk.scrollerElRef, scrollerEl);
+            }
+        };
+        SimpleScrollGrid.prototype.componentDidMount = function () {
+            this.handleSizing();
+            this.context.addResizeHandler(this.handleSizing);
+        };
+        SimpleScrollGrid.prototype.componentDidUpdate = function () {
+            // TODO: need better solution when state contains non-sizing things
+            this.handleSizing();
+        };
+        SimpleScrollGrid.prototype.componentWillUnmount = function () {
+            this.context.removeResizeHandler(this.handleSizing);
+        };
+        SimpleScrollGrid.prototype.computeShrinkWidth = function () {
+            return hasShrinkWidth(this.props.cols)
+                ? computeShrinkWidth(this.scrollerElRefs.getAll())
+                : 0;
+        };
+        SimpleScrollGrid.prototype.computeScrollerDims = function () {
+            var scrollbarWidth = getScrollbarWidths();
+            var _a = this, scrollerRefs = _a.scrollerRefs, scrollerElRefs = _a.scrollerElRefs;
+            var forceYScrollbars = false;
+            var scrollerClientWidths = {};
+            var scrollerClientHeights = {};
+            for (var sectionKey in scrollerRefs.currentMap) {
+                var scroller = scrollerRefs.currentMap[sectionKey];
+                if (scroller && scroller.needsYScrolling()) {
+                    forceYScrollbars = true;
+                    break;
+                }
+            }
+            for (var _i = 0, _b = this.props.sections; _i < _b.length; _i++) {
+                var section = _b[_i];
+                var sectionKey = section.key;
+                var scrollerEl = scrollerElRefs.currentMap[sectionKey];
+                if (scrollerEl) {
+                    var harnessEl = scrollerEl.parentNode; // TODO: weird way to get this. need harness b/c doesn't include table borders
+                    scrollerClientWidths[sectionKey] = Math.floor(harnessEl.getBoundingClientRect().width - (forceYScrollbars
+                        ? scrollbarWidth.y // use global because scroller might not have scrollbars yet but will need them in future
+                        : 0));
+                    scrollerClientHeights[sectionKey] = Math.floor(harnessEl.getBoundingClientRect().height);
+                }
+            }
+            return { forceYScrollbars: forceYScrollbars, scrollerClientWidths: scrollerClientWidths, scrollerClientHeights: scrollerClientHeights };
+        };
+        return SimpleScrollGrid;
+    }(BaseComponent));
+    SimpleScrollGrid.addStateEquality({
+        scrollerClientWidths: isPropsEqual,
+        scrollerClientHeights: isPropsEqual,
+    });
+    function getSectionByKey(sections, key) {
+        for (var _i = 0, sections_1 = sections; _i < sections_1.length; _i++) {
+            var section = sections_1[_i];
+            if (section.key === key) {
+                return section;
+            }
+        }
+        return null;
+    }
+
+    var EventRoot = /** @class */ (function (_super) {
+        __extends(EventRoot, _super);
+        function EventRoot() {
+            var _this = _super !== null && _super.apply(this, arguments) || this;
+            _this.elRef = createRef();
+            return _this;
+        }
+        EventRoot.prototype.render = function () {
+            var _a = this, props = _a.props, context = _a.context;
+            var options = context.options;
+            var seg = props.seg;
+            var eventRange = seg.eventRange;
+            var ui = eventRange.ui;
+            var hookProps = {
+                event: new EventApi(context, eventRange.def, eventRange.instance),
+                view: context.viewApi,
+                timeText: props.timeText,
+                textColor: ui.textColor,
+                backgroundColor: ui.backgroundColor,
+                borderColor: ui.borderColor,
+                isDraggable: !props.disableDragging && computeSegDraggable(seg, context),
+                isStartResizable: !props.disableResizing && computeSegStartResizable(seg, context),
+                isEndResizable: !props.disableResizing && computeSegEndResizable(seg),
+                isMirror: Boolean(props.isDragging || props.isResizing || props.isDateSelecting),
+                isStart: Boolean(seg.isStart),
+                isEnd: Boolean(seg.isEnd),
+                isPast: Boolean(props.isPast),
+                isFuture: Boolean(props.isFuture),
+                isToday: Boolean(props.isToday),
+                isSelected: Boolean(props.isSelected),
+                isDragging: Boolean(props.isDragging),
+                isResizing: Boolean(props.isResizing),
+            };
+            var standardClassNames = getEventClassNames(hookProps).concat(ui.classNames);
+            return (createElement(RenderHook, { hookProps: hookProps, classNames: options.eventClassNames, content: options.eventContent, defaultContent: props.defaultContent, didMount: options.eventDidMount, willUnmount: options.eventWillUnmount, elRef: this.elRef }, function (rootElRef, customClassNames, innerElRef, innerContent) { return props.children(rootElRef, standardClassNames.concat(customClassNames), innerElRef, innerContent, hookProps); }));
+        };
+        EventRoot.prototype.componentDidMount = function () {
+            setElSeg(this.elRef.current, this.props.seg);
+        };
+        /*
+        need to re-assign seg to the element if seg changes, even if the element is the same
+        */
+        EventRoot.prototype.componentDidUpdate = function (prevProps) {
+            var seg = this.props.seg;
+            if (seg !== prevProps.seg) {
+                setElSeg(this.elRef.current, seg);
+            }
+        };
+        return EventRoot;
+    }(BaseComponent));
+
+    // should not be a purecomponent
+    var StandardEvent = /** @class */ (function (_super) {
+        __extends(StandardEvent, _super);
+        function StandardEvent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        StandardEvent.prototype.render = function () {
+            var _a = this, props = _a.props, context = _a.context;
+            var seg = props.seg;
+            var timeFormat = context.options.eventTimeFormat || props.defaultTimeFormat;
+            var timeText = buildSegTimeText(seg, timeFormat, context, props.defaultDisplayEventTime, props.defaultDisplayEventEnd);
+            return (createElement(EventRoot, { seg: seg, timeText: timeText, disableDragging: props.disableDragging, disableResizing: props.disableResizing, defaultContent: props.defaultContent || renderInnerContent$4, isDragging: props.isDragging, isResizing: props.isResizing, isDateSelecting: props.isDateSelecting, isSelected: props.isSelected, isPast: props.isPast, isFuture: props.isFuture, isToday: props.isToday }, function (rootElRef, classNames, innerElRef, innerContent, hookProps) { return (createElement("a", __assign({ className: props.extraClassNames.concat(classNames).join(' '), style: {
+                    borderColor: hookProps.borderColor,
+                    backgroundColor: hookProps.backgroundColor,
+                }, ref: rootElRef }, getSegAnchorAttrs$1(seg)),
+                createElement("div", { className: "fc-event-main", ref: innerElRef, style: { color: hookProps.textColor } }, innerContent),
+                hookProps.isStartResizable &&
+                    createElement("div", { className: "fc-event-resizer fc-event-resizer-start" }),
+                hookProps.isEndResizable &&
+                    createElement("div", { className: "fc-event-resizer fc-event-resizer-end" }))); }));
+        };
+        return StandardEvent;
+    }(BaseComponent));
+    function renderInnerContent$4(innerProps) {
+        return (createElement("div", { className: "fc-event-main-frame" },
+            innerProps.timeText && (createElement("div", { className: "fc-event-time" }, innerProps.timeText)),
+            createElement("div", { className: "fc-event-title-container" },
+                createElement("div", { className: "fc-event-title fc-sticky" }, innerProps.event.title || createElement(Fragment, null, "\u00A0")))));
+    }
+    function getSegAnchorAttrs$1(seg) {
+        var url = seg.eventRange.def.url;
+        return url ? { href: url } : {};
+    }
+
+    var NowIndicatorRoot = function (props) { return (createElement(ViewContextType.Consumer, null, function (context) {
+        var options = context.options;
+        var hookProps = {
+            isAxis: props.isAxis,
+            date: context.dateEnv.toDate(props.date),
+            view: context.viewApi,
+        };
+        return (createElement(RenderHook, { hookProps: hookProps, classNames: options.nowIndicatorClassNames, content: options.nowIndicatorContent, didMount: options.nowIndicatorDidMount, willUnmount: options.nowIndicatorWillUnmount }, props.children));
+    })); };
+
+    var DAY_NUM_FORMAT = createFormatter({ day: 'numeric' });
+    var DayCellContent = /** @class */ (function (_super) {
+        __extends(DayCellContent, _super);
+        function DayCellContent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        DayCellContent.prototype.render = function () {
+            var _a = this, props = _a.props, context = _a.context;
+            var options = context.options;
+            var hookProps = refineDayCellHookProps({
+                date: props.date,
+                dateProfile: props.dateProfile,
+                todayRange: props.todayRange,
+                showDayNumber: props.showDayNumber,
+                extraProps: props.extraHookProps,
+                viewApi: context.viewApi,
+                dateEnv: context.dateEnv,
+            });
+            return (createElement(ContentHook, { hookProps: hookProps, content: options.dayCellContent, defaultContent: props.defaultContent }, props.children));
+        };
+        return DayCellContent;
+    }(BaseComponent));
+    function refineDayCellHookProps(raw) {
+        var date = raw.date, dateEnv = raw.dateEnv;
+        var dayMeta = getDateMeta(date, raw.todayRange, null, raw.dateProfile);
+        return __assign(__assign(__assign({ date: dateEnv.toDate(date), view: raw.viewApi }, dayMeta), { dayNumberText: raw.showDayNumber ? dateEnv.format(date, DAY_NUM_FORMAT) : '' }), raw.extraProps);
+    }
+
+    var DayCellRoot = /** @class */ (function (_super) {
+        __extends(DayCellRoot, _super);
+        function DayCellRoot() {
+            var _this = _super !== null && _super.apply(this, arguments) || this;
+            _this.refineHookProps = memoizeObjArg(refineDayCellHookProps);
+            _this.normalizeClassNames = buildClassNameNormalizer();
+            return _this;
+        }
+        DayCellRoot.prototype.render = function () {
+            var _a = this, props = _a.props, context = _a.context;
+            var options = context.options;
+            var hookProps = this.refineHookProps({
+                date: props.date,
+                dateProfile: props.dateProfile,
+                todayRange: props.todayRange,
+                showDayNumber: props.showDayNumber,
+                extraProps: props.extraHookProps,
+                viewApi: context.viewApi,
+                dateEnv: context.dateEnv,
+            });
+            var classNames = getDayClassNames(hookProps, context.theme).concat(hookProps.isDisabled
+                ? [] // don't use custom classNames if disabled
+                : this.normalizeClassNames(options.dayCellClassNames, hookProps));
+            var dataAttrs = hookProps.isDisabled ? {} : {
+                'data-date': formatDayString(props.date),
+            };
+            return (createElement(MountHook, { hookProps: hookProps, didMount: options.dayCellDidMount, willUnmount: options.dayCellWillUnmount, elRef: props.elRef }, function (rootElRef) { return props.children(rootElRef, classNames, dataAttrs, hookProps.isDisabled); }));
+        };
+        return DayCellRoot;
+    }(BaseComponent));
+
+    function renderFill(fillType) {
+        return (createElement("div", { className: "fc-" + fillType }));
+    }
+    var BgEvent = function (props) { return (createElement(EventRoot, { defaultContent: renderInnerContent$3, seg: props.seg /* uselesss i think */, timeText: "", disableDragging: true, disableResizing: true, isDragging: false, isResizing: false, isDateSelecting: false, isSelected: false, isPast: props.isPast, isFuture: props.isFuture, isToday: props.isToday }, function (rootElRef, classNames, innerElRef, innerContent, hookProps) { return (createElement("div", { ref: rootElRef, className: ['fc-bg-event'].concat(classNames).join(' '), style: {
+            backgroundColor: hookProps.backgroundColor,
+        } }, innerContent)); })); };
+    function renderInnerContent$3(props) {
+        var title = props.event.title;
+        return title && (createElement("div", { className: "fc-event-title" }, props.event.title));
+    }
+
+    var WeekNumberRoot = function (props) { return (createElement(ViewContextType.Consumer, null, function (context) {
+        var dateEnv = context.dateEnv, options = context.options;
+        var date = props.date;
+        var format = options.weekNumberFormat || props.defaultFormat;
+        var num = dateEnv.computeWeekNumber(date); // TODO: somehow use for formatting as well?
+        var text = dateEnv.format(date, format);
+        var hookProps = { num: num, text: text, date: date };
+        return (createElement(RenderHook, { hookProps: hookProps, classNames: options.weekNumberClassNames, content: options.weekNumberContent, defaultContent: renderInner, didMount: options.weekNumberDidMount, willUnmount: options.weekNumberWillUnmount }, props.children));
+    })); };
+    function renderInner(innerProps) {
+        return innerProps.text;
+    }
+
+    var PADDING_FROM_VIEWPORT = 10;
+    var Popover = /** @class */ (function (_super) {
+        __extends(Popover, _super);
+        function Popover() {
+            var _this = _super !== null && _super.apply(this, arguments) || this;
+            _this.handleRootEl = function (el) {
+                _this.rootEl = el;
+                if (_this.props.elRef) {
+                    setRef(_this.props.elRef, el);
+                }
+            };
+            // Triggered when the user clicks *anywhere* in the document, for the autoHide feature
+            _this.handleDocumentMousedown = function (ev) {
+                // only hide the popover if the click happened outside the popover
+                var target = getEventTargetViaRoot(ev);
+                if (!_this.rootEl.contains(target)) {
+                    _this.handleCloseClick();
+                }
+            };
+            _this.handleCloseClick = function () {
+                var onClose = _this.props.onClose;
+                if (onClose) {
+                    onClose();
+                }
+            };
+            return _this;
+        }
+        Popover.prototype.render = function () {
+            var theme = this.context.theme;
+            var props = this.props;
+            var classNames = [
+                'fc-popover',
+                theme.getClass('popover'),
+            ].concat(props.extraClassNames || []);
+            return createPortal(createElement("div", __assign({ className: classNames.join(' ') }, props.extraAttrs, { ref: this.handleRootEl }),
+                createElement("div", { className: 'fc-popover-header ' + theme.getClass('popoverHeader') },
+                    createElement("span", { className: "fc-popover-title" }, props.title),
+                    createElement("span", { className: 'fc-popover-close ' + theme.getIconClass('close'), onClick: this.handleCloseClick })),
+                createElement("div", { className: 'fc-popover-body ' + theme.getClass('popoverContent') }, props.children)), props.parentEl);
+        };
+        Popover.prototype.componentDidMount = function () {
+            document.addEventListener('mousedown', this.handleDocumentMousedown);
+            this.updateSize();
+        };
+        Popover.prototype.componentWillUnmount = function () {
+            document.removeEventListener('mousedown', this.handleDocumentMousedown);
+        };
+        Popover.prototype.updateSize = function () {
+            var isRtl = this.context.isRtl;
+            var _a = this.props, alignmentEl = _a.alignmentEl, alignGridTop = _a.alignGridTop;
+            var rootEl = this.rootEl;
+            var alignmentRect = computeClippedClientRect(alignmentEl);
+            if (alignmentRect) {
+                var popoverDims = rootEl.getBoundingClientRect();
+                // position relative to viewport
+                var popoverTop = alignGridTop
+                    ? elementClosest(alignmentEl, '.fc-scrollgrid').getBoundingClientRect().top
+                    : alignmentRect.top;
+                var popoverLeft = isRtl ? alignmentRect.right - popoverDims.width : alignmentRect.left;
+                // constrain
+                popoverTop = Math.max(popoverTop, PADDING_FROM_VIEWPORT);
+                popoverLeft = Math.min(popoverLeft, document.documentElement.clientWidth - PADDING_FROM_VIEWPORT - popoverDims.width);
+                popoverLeft = Math.max(popoverLeft, PADDING_FROM_VIEWPORT);
+                var origin_1 = rootEl.offsetParent.getBoundingClientRect();
+                applyStyle(rootEl, {
+                    top: popoverTop - origin_1.top,
+                    left: popoverLeft - origin_1.left,
+                });
+            }
+        };
+        return Popover;
+    }(BaseComponent));
+
+    var MorePopover = /** @class */ (function (_super) {
+        __extends(MorePopover, _super);
+        function MorePopover() {
+            var _this = _super !== null && _super.apply(this, arguments) || this;
+            _this.handleRootEl = function (rootEl) {
+                _this.rootEl = rootEl;
+                if (rootEl) {
+                    _this.context.registerInteractiveComponent(_this, {
+                        el: rootEl,
+                        useEventCenter: false,
+                    });
+                }
+                else {
+                    _this.context.unregisterInteractiveComponent(_this);
+                }
+            };
+            return _this;
+        }
+        MorePopover.prototype.render = function () {
+            var _a = this.context, options = _a.options, dateEnv = _a.dateEnv;
+            var props = this.props;
+            var startDate = props.startDate, todayRange = props.todayRange, dateProfile = props.dateProfile;
+            var title = dateEnv.format(startDate, options.dayPopoverFormat);
+            return (createElement(DayCellRoot, { date: startDate, dateProfile: dateProfile, todayRange: todayRange, elRef: this.handleRootEl }, function (rootElRef, dayClassNames, dataAttrs) { return (createElement(Popover, { elRef: rootElRef, title: title, extraClassNames: ['fc-more-popover'].concat(dayClassNames), extraAttrs: dataAttrs /* TODO: make these time-based when not whole-day? */, parentEl: props.parentEl, alignmentEl: props.alignmentEl, alignGridTop: props.alignGridTop, onClose: props.onClose },
+                createElement(DayCellContent, { date: startDate, dateProfile: dateProfile, todayRange: todayRange }, function (innerElRef, innerContent) { return (innerContent &&
+                    createElement("div", { className: "fc-more-popover-misc", ref: innerElRef }, innerContent)); }),
+                props.children)); }));
+        };
+        MorePopover.prototype.queryHit = function (positionLeft, positionTop, elWidth, elHeight) {
+            var _a = this, rootEl = _a.rootEl, props = _a.props;
+            if (positionLeft >= 0 && positionLeft < elWidth &&
+                positionTop >= 0 && positionTop < elHeight) {
+                return {
+                    dateProfile: props.dateProfile,
+                    dateSpan: __assign({ allDay: true, range: {
+                            start: props.startDate,
+                            end: props.endDate,
+                        } }, props.extraDateSpan),
+                    dayEl: rootEl,
+                    rect: {
+                        left: 0,
+                        top: 0,
+                        right: elWidth,
+                        bottom: elHeight,
+                    },
+                    layer: 1, // important when comparing with hits from other components
+                };
+            }
+            return null;
+        };
+        return MorePopover;
+    }(DateComponent));
+
+    var MoreLinkRoot = /** @class */ (function (_super) {
+        __extends(MoreLinkRoot, _super);
+        function MoreLinkRoot() {
+            var _this = _super !== null && _super.apply(this, arguments) || this;
+            _this.linkElRef = createRef();
+            _this.state = {
+                isPopoverOpen: false,
+            };
+            _this.handleClick = function (ev) {
+                var _a = _this, props = _a.props, context = _a.context;
+                var moreLinkClick = context.options.moreLinkClick;
+                var date = computeRange(props).start;
+                function buildPublicSeg(seg) {
+                    var _a = seg.eventRange, def = _a.def, instance = _a.instance, range = _a.range;
+                    return {
+                        event: new EventApi(context, def, instance),
+                        start: context.dateEnv.toDate(range.start),
+                        end: context.dateEnv.toDate(range.end),
+                        isStart: seg.isStart,
+                        isEnd: seg.isEnd,
+                    };
+                }
+                if (typeof moreLinkClick === 'function') {
+                    moreLinkClick = moreLinkClick({
+                        date: date,
+                        allDay: Boolean(props.allDayDate),
+                        allSegs: props.allSegs.map(buildPublicSeg),
+                        hiddenSegs: props.hiddenSegs.map(buildPublicSeg),
+                        jsEvent: ev,
+                        view: context.viewApi,
+                    });
+                }
+                if (!moreLinkClick || moreLinkClick === 'popover') {
+                    _this.setState({ isPopoverOpen: true });
+                }
+                else if (typeof moreLinkClick === 'string') { // a view name
+                    context.calendarApi.zoomTo(date, moreLinkClick);
+                }
+            };
+            _this.handlePopoverClose = function () {
+                _this.setState({ isPopoverOpen: false });
+            };
+            return _this;
+        }
+        MoreLinkRoot.prototype.render = function () {
+            var _this = this;
+            var props = this.props;
+            return (createElement(ViewContextType.Consumer, null, function (context) {
+                var viewApi = context.viewApi, options = context.options, calendarApi = context.calendarApi;
+                var moreLinkText = options.moreLinkText;
+                var moreCnt = props.moreCnt;
+                var range = computeRange(props);
+                var hookProps = {
+                    num: moreCnt,
+                    shortText: "+" + moreCnt,
+                    text: typeof moreLinkText === 'function'
+                        ? moreLinkText.call(calendarApi, moreCnt)
+                        : "+" + moreCnt + " " + moreLinkText,
+                    view: viewApi,
+                };
+                return (createElement(Fragment, null,
+                    Boolean(props.moreCnt) && (createElement(RenderHook, { elRef: _this.linkElRef, hookProps: hookProps, classNames: options.moreLinkClassNames, content: options.moreLinkContent, defaultContent: props.defaultContent || renderMoreLinkInner$1, didMount: options.moreLinkDidMount, willUnmount: options.moreLinkWillUnmount }, function (rootElRef, customClassNames, innerElRef, innerContent) { return props.children(rootElRef, ['fc-more-link'].concat(customClassNames), innerElRef, innerContent, _this.handleClick); })),
+                    _this.state.isPopoverOpen && (createElement(MorePopover, { startDate: range.start, endDate: range.end, dateProfile: props.dateProfile, todayRange: props.todayRange, extraDateSpan: props.extraDateSpan, parentEl: _this.parentEl, alignmentEl: props.alignmentElRef.current, alignGridTop: props.alignGridTop, onClose: _this.handlePopoverClose }, props.popoverContent()))));
+            }));
+        };
+        MoreLinkRoot.prototype.componentDidMount = function () {
+            this.updateParentEl();
+        };
+        MoreLinkRoot.prototype.componentDidUpdate = function () {
+            this.updateParentEl();
+        };
+        MoreLinkRoot.prototype.updateParentEl = function () {
+            if (this.linkElRef.current) {
+                this.parentEl = elementClosest(this.linkElRef.current, '.fc-view-harness');
+            }
+        };
+        return MoreLinkRoot;
+    }(BaseComponent));
+    function renderMoreLinkInner$1(props) {
+        return props.text;
+    }
+    function computeRange(props) {
+        if (props.allDayDate) {
+            return {
+                start: props.allDayDate,
+                end: addDays(props.allDayDate, 1),
+            };
+        }
+        var hiddenSegs = props.hiddenSegs;
+        return {
+            start: computeEarliestSegStart(hiddenSegs),
+            end: computeLatestSegEnd(hiddenSegs),
+        };
+    }
+    function computeEarliestSegStart(segs) {
+        return segs.reduce(pickEarliestStart).eventRange.range.start;
+    }
+    function pickEarliestStart(seg0, seg1) {
+        return seg0.eventRange.range.start < seg1.eventRange.range.start ? seg0 : seg1;
+    }
+    function computeLatestSegEnd(segs) {
+        return segs.reduce(pickLatestEnd).eventRange.range.end;
+    }
+    function pickLatestEnd(seg0, seg1) {
+        return seg0.eventRange.range.end > seg1.eventRange.range.end ? seg0 : seg1;
+    }
+
+    // exports
+    // --------------------------------------------------------------------------------------------------
+    var version = '5.9.0'; // important to type it, so .d.ts has generic string
+
+    var Calendar = /** @class */ (function (_super) {
+        __extends(Calendar, _super);
+        function Calendar(el, optionOverrides) {
+            if (optionOverrides === void 0) { optionOverrides = {}; }
+            var _this = _super.call(this) || this;
+            _this.isRendering = false;
+            _this.isRendered = false;
+            _this.currentClassNames = [];
+            _this.customContentRenderId = 0; // will affect custom generated classNames?
+            _this.handleAction = function (action) {
+                // actions we know we want to render immediately
+                switch (action.type) {
+                    case 'SET_EVENT_DRAG':
+                    case 'SET_EVENT_RESIZE':
+                        _this.renderRunner.tryDrain();
+                }
+            };
+            _this.handleData = function (data) {
+                _this.currentData = data;
+                _this.renderRunner.request(data.calendarOptions.rerenderDelay);
+            };
+            _this.handleRenderRequest = function () {
+                if (_this.isRendering) {
+                    _this.isRendered = true;
+                    var currentData_1 = _this.currentData;
+                    render(createElement(CalendarRoot, { options: currentData_1.calendarOptions, theme: currentData_1.theme, emitter: currentData_1.emitter }, function (classNames, height, isHeightAuto, forPrint) {
+                        _this.setClassNames(classNames);
+                        _this.setHeight(height);
+                        return (createElement(CustomContentRenderContext.Provider, { value: _this.customContentRenderId },
+                            createElement(CalendarContent, __assign({ isHeightAuto: isHeightAuto, forPrint: forPrint }, currentData_1))));
+                    }), _this.el);
+                }
+                else if (_this.isRendered) {
+                    _this.isRendered = false;
+                    unmountComponentAtNode(_this.el);
+                    _this.setClassNames([]);
+                    _this.setHeight('');
+                }
+                flushToDom();
+            };
+            _this.el = el;
+            _this.renderRunner = new DelayedRunner(_this.handleRenderRequest);
+            new CalendarDataManager({
+                optionOverrides: optionOverrides,
+                calendarApi: _this,
+                onAction: _this.handleAction,
+                onData: _this.handleData,
+            });
+            return _this;
+        }
+        Object.defineProperty(Calendar.prototype, "view", {
+            get: function () { return this.currentData.viewApi; } // for public API
+            ,
+            enumerable: false,
+            configurable: true
+        });
+        Calendar.prototype.render = function () {
+            var wasRendering = this.isRendering;
+            if (!wasRendering) {
+                this.isRendering = true;
+            }
+            else {
+                this.customContentRenderId += 1;
+            }
+            this.renderRunner.request();
+            if (wasRendering) {
+                this.updateSize();
+            }
+        };
+        Calendar.prototype.destroy = function () {
+            if (this.isRendering) {
+                this.isRendering = false;
+                this.renderRunner.request();
+            }
+        };
+        Calendar.prototype.updateSize = function () {
+            _super.prototype.updateSize.call(this);
+            flushToDom();
+        };
+        Calendar.prototype.batchRendering = function (func) {
+            this.renderRunner.pause('batchRendering');
+            func();
+            this.renderRunner.resume('batchRendering');
+        };
+        Calendar.prototype.pauseRendering = function () {
+            this.renderRunner.pause('pauseRendering');
+        };
+        Calendar.prototype.resumeRendering = function () {
+            this.renderRunner.resume('pauseRendering', true);
+        };
+        Calendar.prototype.resetOptions = function (optionOverrides, append) {
+            this.currentDataManager.resetOptions(optionOverrides, append);
+        };
+        Calendar.prototype.setClassNames = function (classNames) {
+            if (!isArraysEqual(classNames, this.currentClassNames)) {
+                var classList = this.el.classList;
+                for (var _i = 0, _a = this.currentClassNames; _i < _a.length; _i++) {
+                    var className = _a[_i];
+                    classList.remove(className);
+                }
+                for (var _b = 0, classNames_1 = classNames; _b < classNames_1.length; _b++) {
+                    var className = classNames_1[_b];
+                    classList.add(className);
+                }
+                this.currentClassNames = classNames;
+            }
+        };
+        Calendar.prototype.setHeight = function (height) {
+            applyStyleProp(this.el, 'height', height);
+        };
+        return Calendar;
+    }(CalendarApi));
+
+    config.touchMouseIgnoreWait = 500;
+    var ignoreMouseDepth = 0;
+    var listenerCnt = 0;
+    var isWindowTouchMoveCancelled = false;
+    /*
+    Uses a "pointer" abstraction, which monitors UI events for both mouse and touch.
+    Tracks when the pointer "drags" on a certain element, meaning down+move+up.
+
+    Also, tracks if there was touch-scrolling.
+    Also, can prevent touch-scrolling from happening.
+    Also, can fire pointermove events when scrolling happens underneath, even when no real pointer movement.
+
+    emits:
+    - pointerdown
+    - pointermove
+    - pointerup
+    */
+    var PointerDragging = /** @class */ (function () {
+        function PointerDragging(containerEl) {
+            var _this = this;
+            this.subjectEl = null;
+            // options that can be directly assigned by caller
+            this.selector = ''; // will cause subjectEl in all emitted events to be this element
+            this.handleSelector = '';
+            this.shouldIgnoreMove = false;
+            this.shouldWatchScroll = true; // for simulating pointermove on scroll
+            // internal states
+            this.isDragging = false;
+            this.isTouchDragging = false;
+            this.wasTouchScroll = false;
+            // Mouse
+            // ----------------------------------------------------------------------------------------------------
+            this.handleMouseDown = function (ev) {
+                if (!_this.shouldIgnoreMouse() &&
+                    isPrimaryMouseButton(ev) &&
+                    _this.tryStart(ev)) {
+                    var pev = _this.createEventFromMouse(ev, true);
+                    _this.emitter.trigger('pointerdown', pev);
+                    _this.initScrollWatch(pev);
+                    if (!_this.shouldIgnoreMove) {
+                        document.addEventListener('mousemove', _this.handleMouseMove);
+                    }
+                    document.addEventListener('mouseup', _this.handleMouseUp);
+                }
+            };
+            this.handleMouseMove = function (ev) {
+                var pev = _this.createEventFromMouse(ev);
+                _this.recordCoords(pev);
+                _this.emitter.trigger('pointermove', pev);
+            };
+            this.handleMouseUp = function (ev) {
+                document.removeEventListener('mousemove', _this.handleMouseMove);
+                document.removeEventListener('mouseup', _this.handleMouseUp);
+                _this.emitter.trigger('pointerup', _this.createEventFromMouse(ev));
+                _this.cleanup(); // call last so that pointerup has access to props
+            };
+            // Touch
+            // ----------------------------------------------------------------------------------------------------
+            this.handleTouchStart = function (ev) {
+                if (_this.tryStart(ev)) {
+                    _this.isTouchDragging = true;
+                    var pev = _this.createEventFromTouch(ev, true);
+                    _this.emitter.trigger('pointerdown', pev);
+                    _this.initScrollWatch(pev);
+                    // unlike mouse, need to attach to target, not document
+                    // https://stackoverflow.com/a/45760014
+                    var targetEl = ev.target;
+                    if (!_this.shouldIgnoreMove) {
+                        targetEl.addEventListener('touchmove', _this.handleTouchMove);
+                    }
+                    targetEl.addEventListener('touchend', _this.handleTouchEnd);
+                    targetEl.addEventListener('touchcancel', _this.handleTouchEnd); // treat it as a touch end
+                    // attach a handler to get called when ANY scroll action happens on the page.
+                    // this was impossible to do with normal on/off because 'scroll' doesn't bubble.
+                    // http://stackoverflow.com/a/32954565/96342
+                    window.addEventListener('scroll', _this.handleTouchScroll, true);
+                }
+            };
+            this.handleTouchMove = function (ev) {
+                var pev = _this.createEventFromTouch(ev);
+                _this.recordCoords(pev);
+                _this.emitter.trigger('pointermove', pev);
+            };
+            this.handleTouchEnd = function (ev) {
+                if (_this.isDragging) { // done to guard against touchend followed by touchcancel
+                    var targetEl = ev.target;
+                    targetEl.removeEventListener('touchmove', _this.handleTouchMove);
+                    targetEl.removeEventListener('touchend', _this.handleTouchEnd);
+                    targetEl.removeEventListener('touchcancel', _this.handleTouchEnd);
+                    window.removeEventListener('scroll', _this.handleTouchScroll, true); // useCaptured=true
+                    _this.emitter.trigger('pointerup', _this.createEventFromTouch(ev));
+                    _this.cleanup(); // call last so that pointerup has access to props
+                    _this.isTouchDragging = false;
+                    startIgnoringMouse();
+                }
+            };
+            this.handleTouchScroll = function () {
+                _this.wasTouchScroll = true;
+            };
+            this.handleScroll = function (ev) {
+                if (!_this.shouldIgnoreMove) {
+                    var pageX = (window.pageXOffset - _this.prevScrollX) + _this.prevPageX;
+                    var pageY = (window.pageYOffset - _this.prevScrollY) + _this.prevPageY;
+                    _this.emitter.trigger('pointermove', {
+                        origEvent: ev,
+                        isTouch: _this.isTouchDragging,
+                        subjectEl: _this.subjectEl,
+                        pageX: pageX,
+                        pageY: pageY,
+                        deltaX: pageX - _this.origPageX,
+                        deltaY: pageY - _this.origPageY,
+                    });
+                }
+            };
+            this.containerEl = containerEl;
+            this.emitter = new Emitter();
+            containerEl.addEventListener('mousedown', this.handleMouseDown);
+            containerEl.addEventListener('touchstart', this.handleTouchStart, { passive: true });
+            listenerCreated();
+        }
+        PointerDragging.prototype.destroy = function () {
+            this.containerEl.removeEventListener('mousedown', this.handleMouseDown);
+            this.containerEl.removeEventListener('touchstart', this.handleTouchStart, { passive: true });
+            listenerDestroyed();
+        };
+        PointerDragging.prototype.tryStart = function (ev) {
+            var subjectEl = this.querySubjectEl(ev);
+            var downEl = ev.target;
+            if (subjectEl &&
+                (!this.handleSelector || elementClosest(downEl, this.handleSelector))) {
+                this.subjectEl = subjectEl;
+                this.isDragging = true; // do this first so cancelTouchScroll will work
+                this.wasTouchScroll = false;
+                return true;
+            }
+            return false;
+        };
+        PointerDragging.prototype.cleanup = function () {
+            isWindowTouchMoveCancelled = false;
+            this.isDragging = false;
+            this.subjectEl = null;
+            // keep wasTouchScroll around for later access
+            this.destroyScrollWatch();
+        };
+        PointerDragging.prototype.querySubjectEl = function (ev) {
+            if (this.selector) {
+                return elementClosest(ev.target, this.selector);
+            }
+            return this.containerEl;
+        };
+        PointerDragging.prototype.shouldIgnoreMouse = function () {
+            return ignoreMouseDepth || this.isTouchDragging;
+        };
+        // can be called by user of this class, to cancel touch-based scrolling for the current drag
+        PointerDragging.prototype.cancelTouchScroll = function () {
+            if (this.isDragging) {
+                isWindowTouchMoveCancelled = true;
+            }
+        };
+        // Scrolling that simulates pointermoves
+        // ----------------------------------------------------------------------------------------------------
+        PointerDragging.prototype.initScrollWatch = function (ev) {
+            if (this.shouldWatchScroll) {
+                this.recordCoords(ev);
+                window.addEventListener('scroll', this.handleScroll, true); // useCapture=true
+            }
+        };
+        PointerDragging.prototype.recordCoords = function (ev) {
+            if (this.shouldWatchScroll) {
+                this.prevPageX = ev.pageX;
+                this.prevPageY = ev.pageY;
+                this.prevScrollX = window.pageXOffset;
+                this.prevScrollY = window.pageYOffset;
+            }
+        };
+        PointerDragging.prototype.destroyScrollWatch = function () {
+            if (this.shouldWatchScroll) {
+                window.removeEventListener('scroll', this.handleScroll, true); // useCaptured=true
+            }
+        };
+        // Event Normalization
+        // ----------------------------------------------------------------------------------------------------
+        PointerDragging.prototype.createEventFromMouse = function (ev, isFirst) {
+            var deltaX = 0;
+            var deltaY = 0;
+            // TODO: repeat code
+            if (isFirst) {
+                this.origPageX = ev.pageX;
+                this.origPageY = ev.pageY;
+            }
+            else {
+                deltaX = ev.pageX - this.origPageX;
+                deltaY = ev.pageY - this.origPageY;
+            }
+            return {
+                origEvent: ev,
+                isTouch: false,
+                subjectEl: this.subjectEl,
+                pageX: ev.pageX,
+                pageY: ev.pageY,
+                deltaX: deltaX,
+                deltaY: deltaY,
+            };
+        };
+        PointerDragging.prototype.createEventFromTouch = function (ev, isFirst) {
+            var touches = ev.touches;
+            var pageX;
+            var pageY;
+            var deltaX = 0;
+            var deltaY = 0;
+            // if touch coords available, prefer,
+            // because FF would give bad ev.pageX ev.pageY
+            if (touches && touches.length) {
+                pageX = touches[0].pageX;
+                pageY = touches[0].pageY;
+            }
+            else {
+                pageX = ev.pageX;
+                pageY = ev.pageY;
+            }
+            // TODO: repeat code
+            if (isFirst) {
+                this.origPageX = pageX;
+                this.origPageY = pageY;
+            }
+            else {
+                deltaX = pageX - this.origPageX;
+                deltaY = pageY - this.origPageY;
+            }
+            return {
+                origEvent: ev,
+                isTouch: true,
+                subjectEl: this.subjectEl,
+                pageX: pageX,
+                pageY: pageY,
+                deltaX: deltaX,
+                deltaY: deltaY,
+            };
+        };
+        return PointerDragging;
+    }());
+    // Returns a boolean whether this was a left mouse click and no ctrl key (which means right click on Mac)
+    function isPrimaryMouseButton(ev) {
+        return ev.button === 0 && !ev.ctrlKey;
+    }
+    // Ignoring fake mouse events generated by touch
+    // ----------------------------------------------------------------------------------------------------
+    function startIgnoringMouse() {
+        ignoreMouseDepth += 1;
+        setTimeout(function () {
+            ignoreMouseDepth -= 1;
+        }, config.touchMouseIgnoreWait);
+    }
+    // We want to attach touchmove as early as possible for Safari
+    // ----------------------------------------------------------------------------------------------------
+    function listenerCreated() {
+        listenerCnt += 1;
+        if (listenerCnt === 1) {
+            window.addEventListener('touchmove', onWindowTouchMove, { passive: false });
+        }
+    }
+    function listenerDestroyed() {
+        listenerCnt -= 1;
+        if (!listenerCnt) {
+            window.removeEventListener('touchmove', onWindowTouchMove, { passive: false });
+        }
+    }
+    function onWindowTouchMove(ev) {
+        if (isWindowTouchMoveCancelled) {
+            ev.preventDefault();
+        }
+    }
+
+    /*
+    An effect in which an element follows the movement of a pointer across the screen.
+    The moving element is a clone of some other element.
+    Must call start + handleMove + stop.
+    */
+    var ElementMirror = /** @class */ (function () {
+        function ElementMirror() {
+            this.isVisible = false; // must be explicitly enabled
+            this.sourceEl = null;
+            this.mirrorEl = null;
+            this.sourceElRect = null; // screen coords relative to viewport
+            // options that can be set directly by caller
+            this.parentNode = document.body; // HIGHLY SUGGESTED to set this to sidestep ShadowDOM issues
+            this.zIndex = 9999;
+            this.revertDuration = 0;
+        }
+        ElementMirror.prototype.start = function (sourceEl, pageX, pageY) {
+            this.sourceEl = sourceEl;
+            this.sourceElRect = this.sourceEl.getBoundingClientRect();
+            this.origScreenX = pageX - window.pageXOffset;
+            this.origScreenY = pageY - window.pageYOffset;
+            this.deltaX = 0;
+            this.deltaY = 0;
+            this.updateElPosition();
+        };
+        ElementMirror.prototype.handleMove = function (pageX, pageY) {
+            this.deltaX = (pageX - window.pageXOffset) - this.origScreenX;
+            this.deltaY = (pageY - window.pageYOffset) - this.origScreenY;
+            this.updateElPosition();
+        };
+        // can be called before start
+        ElementMirror.prototype.setIsVisible = function (bool) {
+            if (bool) {
+                if (!this.isVisible) {
+                    if (this.mirrorEl) {
+                        this.mirrorEl.style.display = '';
+                    }
+                    this.isVisible = bool; // needs to happen before updateElPosition
+                    this.updateElPosition(); // because was not updating the position while invisible
+                }
+            }
+            else if (this.isVisible) {
+                if (this.mirrorEl) {
+                    this.mirrorEl.style.display = 'none';
+                }
+                this.isVisible = bool;
+            }
+        };
+        // always async
+        ElementMirror.prototype.stop = function (needsRevertAnimation, callback) {
+            var _this = this;
+            var done = function () {
+                _this.cleanup();
+                callback();
+            };
+            if (needsRevertAnimation &&
+                this.mirrorEl &&
+                this.isVisible &&
+                this.revertDuration && // if 0, transition won't work
+                (this.deltaX || this.deltaY) // if same coords, transition won't work
+            ) {
+                this.doRevertAnimation(done, this.revertDuration);
+            }
+            else {
+                setTimeout(done, 0);
+            }
+        };
+        ElementMirror.prototype.doRevertAnimation = function (callback, revertDuration) {
+            var mirrorEl = this.mirrorEl;
+            var finalSourceElRect = this.sourceEl.getBoundingClientRect(); // because autoscrolling might have happened
+            mirrorEl.style.transition =
+                'top ' + revertDuration + 'ms,' +
+                    'left ' + revertDuration + 'ms';
+            applyStyle(mirrorEl, {
+                left: finalSourceElRect.left,
+                top: finalSourceElRect.top,
+            });
+            whenTransitionDone(mirrorEl, function () {
+                mirrorEl.style.transition = '';
+                callback();
+            });
+        };
+        ElementMirror.prototype.cleanup = function () {
+            if (this.mirrorEl) {
+                removeElement(this.mirrorEl);
+                this.mirrorEl = null;
+            }
+            this.sourceEl = null;
+        };
+        ElementMirror.prototype.updateElPosition = function () {
+            if (this.sourceEl && this.isVisible) {
+                applyStyle(this.getMirrorEl(), {
+                    left: this.sourceElRect.left + this.deltaX,
+                    top: this.sourceElRect.top + this.deltaY,
+                });
+            }
+        };
+        ElementMirror.prototype.getMirrorEl = function () {
+            var sourceElRect = this.sourceElRect;
+            var mirrorEl = this.mirrorEl;
+            if (!mirrorEl) {
+                mirrorEl = this.mirrorEl = this.sourceEl.cloneNode(true); // cloneChildren=true
+                // we don't want long taps or any mouse interaction causing selection/menus.
+                // would use preventSelection(), but that prevents selectstart, causing problems.
+                mirrorEl.classList.add('fc-unselectable');
+                mirrorEl.classList.add('fc-event-dragging');
+                applyStyle(mirrorEl, {
+                    position: 'fixed',
+                    zIndex: this.zIndex,
+                    visibility: '',
+                    boxSizing: 'border-box',
+                    width: sourceElRect.right - sourceElRect.left,
+                    height: sourceElRect.bottom - sourceElRect.top,
+                    right: 'auto',
+                    bottom: 'auto',
+                    margin: 0,
+                });
+                this.parentNode.appendChild(mirrorEl);
+            }
+            return mirrorEl;
+        };
+        return ElementMirror;
+    }());
+
+    /*
+    Is a cache for a given element's scroll information (all the info that ScrollController stores)
+    in addition the "client rectangle" of the element.. the area within the scrollbars.
+
+    The cache can be in one of two modes:
+    - doesListening:false - ignores when the container is scrolled by someone else
+    - doesListening:true - watch for scrolling and update the cache
+    */
+    var ScrollGeomCache = /** @class */ (function (_super) {
+        __extends(ScrollGeomCache, _super);
+        function ScrollGeomCache(scrollController, doesListening) {
+            var _this = _super.call(this) || this;
+            _this.handleScroll = function () {
+                _this.scrollTop = _this.scrollController.getScrollTop();
+                _this.scrollLeft = _this.scrollController.getScrollLeft();
+                _this.handleScrollChange();
+            };
+            _this.scrollController = scrollController;
+            _this.doesListening = doesListening;
+            _this.scrollTop = _this.origScrollTop = scrollController.getScrollTop();
+            _this.scrollLeft = _this.origScrollLeft = scrollController.getScrollLeft();
+            _this.scrollWidth = scrollController.getScrollWidth();
+            _this.scrollHeight = scrollController.getScrollHeight();
+            _this.clientWidth = scrollController.getClientWidth();
+            _this.clientHeight = scrollController.getClientHeight();
+            _this.clientRect = _this.computeClientRect(); // do last in case it needs cached values
+            if (_this.doesListening) {
+                _this.getEventTarget().addEventListener('scroll', _this.handleScroll);
+            }
+            return _this;
+        }
+        ScrollGeomCache.prototype.destroy = function () {
+            if (this.doesListening) {
+                this.getEventTarget().removeEventListener('scroll', this.handleScroll);
+            }
+        };
+        ScrollGeomCache.prototype.getScrollTop = function () {
+            return this.scrollTop;
+        };
+        ScrollGeomCache.prototype.getScrollLeft = function () {
+            return this.scrollLeft;
+        };
+        ScrollGeomCache.prototype.setScrollTop = function (top) {
+            this.scrollController.setScrollTop(top);
+            if (!this.doesListening) {
+                // we are not relying on the element to normalize out-of-bounds scroll values
+                // so we need to sanitize ourselves
+                this.scrollTop = Math.max(Math.min(top, this.getMaxScrollTop()), 0);
+                this.handleScrollChange();
+            }
+        };
+        ScrollGeomCache.prototype.setScrollLeft = function (top) {
+            this.scrollController.setScrollLeft(top);
+            if (!this.doesListening) {
+                // we are not relying on the element to normalize out-of-bounds scroll values
+                // so we need to sanitize ourselves
+                this.scrollLeft = Math.max(Math.min(top, this.getMaxScrollLeft()), 0);
+                this.handleScrollChange();
+            }
+        };
+        ScrollGeomCache.prototype.getClientWidth = function () {
+            return this.clientWidth;
+        };
+        ScrollGeomCache.prototype.getClientHeight = function () {
+            return this.clientHeight;
+        };
+        ScrollGeomCache.prototype.getScrollWidth = function () {
+            return this.scrollWidth;
+        };
+        ScrollGeomCache.prototype.getScrollHeight = function () {
+            return this.scrollHeight;
+        };
+        ScrollGeomCache.prototype.handleScrollChange = function () {
+        };
+        return ScrollGeomCache;
+    }(ScrollController));
+
+    var ElementScrollGeomCache = /** @class */ (function (_super) {
+        __extends(ElementScrollGeomCache, _super);
+        function ElementScrollGeomCache(el, doesListening) {
+            return _super.call(this, new ElementScrollController(el), doesListening) || this;
+        }
+        ElementScrollGeomCache.prototype.getEventTarget = function () {
+            return this.scrollController.el;
+        };
+        ElementScrollGeomCache.prototype.computeClientRect = function () {
+            return computeInnerRect(this.scrollController.el);
+        };
+        return ElementScrollGeomCache;
+    }(ScrollGeomCache));
+
+    var WindowScrollGeomCache = /** @class */ (function (_super) {
+        __extends(WindowScrollGeomCache, _super);
+        function WindowScrollGeomCache(doesListening) {
+            return _super.call(this, new WindowScrollController(), doesListening) || this;
+        }
+        WindowScrollGeomCache.prototype.getEventTarget = function () {
+            return window;
+        };
+        WindowScrollGeomCache.prototype.computeClientRect = function () {
+            return {
+                left: this.scrollLeft,
+                right: this.scrollLeft + this.clientWidth,
+                top: this.scrollTop,
+                bottom: this.scrollTop + this.clientHeight,
+            };
+        };
+        // the window is the only scroll object that changes it's rectangle relative
+        // to the document's topleft as it scrolls
+        WindowScrollGeomCache.prototype.handleScrollChange = function () {
+            this.clientRect = this.computeClientRect();
+        };
+        return WindowScrollGeomCache;
+    }(ScrollGeomCache));
+
+    // If available we are using native "performance" API instead of "Date"
+    // Read more about it on MDN:
+    // https://developer.mozilla.org/en-US/docs/Web/API/Performance
+    var getTime = typeof performance === 'function' ? performance.now : Date.now;
+    /*
+    For a pointer interaction, automatically scrolls certain scroll containers when the pointer
+    approaches the edge.
+
+    The caller must call start + handleMove + stop.
+    */
+    var AutoScroller = /** @class */ (function () {
+        function AutoScroller() {
+            var _this = this;
+            // options that can be set by caller
+            this.isEnabled = true;
+            this.scrollQuery = [window, '.fc-scroller'];
+            this.edgeThreshold = 50; // pixels
+            this.maxVelocity = 300; // pixels per second
+            // internal state
+            this.pointerScreenX = null;
+            this.pointerScreenY = null;
+            this.isAnimating = false;
+            this.scrollCaches = null;
+            // protect against the initial pointerdown being too close to an edge and starting the scroll
+            this.everMovedUp = false;
+            this.everMovedDown = false;
+            this.everMovedLeft = false;
+            this.everMovedRight = false;
+            this.animate = function () {
+                if (_this.isAnimating) { // wasn't cancelled between animation calls
+                    var edge = _this.computeBestEdge(_this.pointerScreenX + window.pageXOffset, _this.pointerScreenY + window.pageYOffset);
+                    if (edge) {
+                        var now = getTime();
+                        _this.handleSide(edge, (now - _this.msSinceRequest) / 1000);
+                        _this.requestAnimation(now);
+                    }
+                    else {
+                        _this.isAnimating = false; // will stop animation
+                    }
+                }
+            };
+        }
+        AutoScroller.prototype.start = function (pageX, pageY, scrollStartEl) {
+            if (this.isEnabled) {
+                this.scrollCaches = this.buildCaches(scrollStartEl);
+                this.pointerScreenX = null;
+                this.pointerScreenY = null;
+                this.everMovedUp = false;
+                this.everMovedDown = false;
+                this.everMovedLeft = false;
+                this.everMovedRight = false;
+                this.handleMove(pageX, pageY);
+            }
+        };
+        AutoScroller.prototype.handleMove = function (pageX, pageY) {
+            if (this.isEnabled) {
+                var pointerScreenX = pageX - window.pageXOffset;
+                var pointerScreenY = pageY - window.pageYOffset;
+                var yDelta = this.pointerScreenY === null ? 0 : pointerScreenY - this.pointerScreenY;
+                var xDelta = this.pointerScreenX === null ? 0 : pointerScreenX - this.pointerScreenX;
+                if (yDelta < 0) {
+                    this.everMovedUp = true;
+                }
+                else if (yDelta > 0) {
+                    this.everMovedDown = true;
+                }
+                if (xDelta < 0) {
+                    this.everMovedLeft = true;
+                }
+                else if (xDelta > 0) {
+                    this.everMovedRight = true;
+                }
+                this.pointerScreenX = pointerScreenX;
+                this.pointerScreenY = pointerScreenY;
+                if (!this.isAnimating) {
+                    this.isAnimating = true;
+                    this.requestAnimation(getTime());
+                }
+            }
+        };
+        AutoScroller.prototype.stop = function () {
+            if (this.isEnabled) {
+                this.isAnimating = false; // will stop animation
+                for (var _i = 0, _a = this.scrollCaches; _i < _a.length; _i++) {
+                    var scrollCache = _a[_i];
+                    scrollCache.destroy();
+                }
+                this.scrollCaches = null;
+            }
+        };
+        AutoScroller.prototype.requestAnimation = function (now) {
+            this.msSinceRequest = now;
+            requestAnimationFrame(this.animate);
+        };
+        AutoScroller.prototype.handleSide = function (edge, seconds) {
+            var scrollCache = edge.scrollCache;
+            var edgeThreshold = this.edgeThreshold;
+            var invDistance = edgeThreshold - edge.distance;
+            var velocity = // the closer to the edge, the faster we scroll
+             ((invDistance * invDistance) / (edgeThreshold * edgeThreshold)) * // quadratic
+                this.maxVelocity * seconds;
+            var sign = 1;
+            switch (edge.name) {
+                case 'left':
+                    sign = -1;
+                // falls through
+                case 'right':
+                    scrollCache.setScrollLeft(scrollCache.getScrollLeft() + velocity * sign);
+                    break;
+                case 'top':
+                    sign = -1;
+                // falls through
+                case 'bottom':
+                    scrollCache.setScrollTop(scrollCache.getScrollTop() + velocity * sign);
+                    break;
+            }
+        };
+        // left/top are relative to document topleft
+        AutoScroller.prototype.computeBestEdge = function (left, top) {
+            var edgeThreshold = this.edgeThreshold;
+            var bestSide = null;
+            for (var _i = 0, _a = this.scrollCaches; _i < _a.length; _i++) {
+                var scrollCache = _a[_i];
+                var rect = scrollCache.clientRect;
+                var leftDist = left - rect.left;
+                var rightDist = rect.right - left;
+                var topDist = top - rect.top;
+                var bottomDist = rect.bottom - top;
+                // completely within the rect?
+                if (leftDist >= 0 && rightDist >= 0 && topDist >= 0 && bottomDist >= 0) {
+                    if (topDist <= edgeThreshold && this.everMovedUp && scrollCache.canScrollUp() &&
+                        (!bestSide || bestSide.distance > topDist)) {
+                        bestSide = { scrollCache: scrollCache, name: 'top', distance: topDist };
+                    }
+                    if (bottomDist <= edgeThreshold && this.everMovedDown && scrollCache.canScrollDown() &&
+                        (!bestSide || bestSide.distance > bottomDist)) {
+                        bestSide = { scrollCache: scrollCache, name: 'bottom', distance: bottomDist };
+                    }
+                    if (leftDist <= edgeThreshold && this.everMovedLeft && scrollCache.canScrollLeft() &&
+                        (!bestSide || bestSide.distance > leftDist)) {
+                        bestSide = { scrollCache: scrollCache, name: 'left', distance: leftDist };
+                    }
+                    if (rightDist <= edgeThreshold && this.everMovedRight && scrollCache.canScrollRight() &&
+                        (!bestSide || bestSide.distance > rightDist)) {
+                        bestSide = { scrollCache: scrollCache, name: 'right', distance: rightDist };
+                    }
+                }
+            }
+            return bestSide;
+        };
+        AutoScroller.prototype.buildCaches = function (scrollStartEl) {
+            return this.queryScrollEls(scrollStartEl).map(function (el) {
+                if (el === window) {
+                    return new WindowScrollGeomCache(false); // false = don't listen to user-generated scrolls
+                }
+                return new ElementScrollGeomCache(el, false); // false = don't listen to user-generated scrolls
+            });
+        };
+        AutoScroller.prototype.queryScrollEls = function (scrollStartEl) {
+            var els = [];
+            for (var _i = 0, _a = this.scrollQuery; _i < _a.length; _i++) {
+                var query = _a[_i];
+                if (typeof query === 'object') {
+                    els.push(query);
+                }
+                else {
+                    els.push.apply(els, Array.prototype.slice.call(getElRoot(scrollStartEl).querySelectorAll(query)));
+                }
+            }
+            return els;
+        };
+        return AutoScroller;
+    }());
+
+    /*
+    Monitors dragging on an element. Has a number of high-level features:
+    - minimum distance required before dragging
+    - minimum wait time ("delay") before dragging
+    - a mirror element that follows the pointer
+    */
+    var FeaturefulElementDragging = /** @class */ (function (_super) {
+        __extends(FeaturefulElementDragging, _super);
+        function FeaturefulElementDragging(containerEl, selector) {
+            var _this = _super.call(this, containerEl) || this;
+            _this.containerEl = containerEl;
+            // options that can be directly set by caller
+            // the caller can also set the PointerDragging's options as well
+            _this.delay = null;
+            _this.minDistance = 0;
+            _this.touchScrollAllowed = true; // prevents drag from starting and blocks scrolling during drag
+            _this.mirrorNeedsRevert = false;
+            _this.isInteracting = false; // is the user validly moving the pointer? lasts until pointerup
+            _this.isDragging = false; // is it INTENTFULLY dragging? lasts until after revert animation
+            _this.isDelayEnded = false;
+            _this.isDistanceSurpassed = false;
+            _this.delayTimeoutId = null;
+            _this.onPointerDown = function (ev) {
+                if (!_this.isDragging) { // so new drag doesn't happen while revert animation is going
+                    _this.isInteracting = true;
+                    _this.isDelayEnded = false;
+                    _this.isDistanceSurpassed = false;
+                    preventSelection(document.body);
+                    preventContextMenu(document.body);
+                    // prevent links from being visited if there's an eventual drag.
+                    // also prevents selection in older browsers (maybe?).
+                    // not necessary for touch, besides, browser would complain about passiveness.
+                    if (!ev.isTouch) {
+                        ev.origEvent.preventDefault();
+                    }
+                    _this.emitter.trigger('pointerdown', ev);
+                    if (_this.isInteracting && // not destroyed via pointerdown handler
+                        !_this.pointer.shouldIgnoreMove) {
+                        // actions related to initiating dragstart+dragmove+dragend...
+                        _this.mirror.setIsVisible(false); // reset. caller must set-visible
+                        _this.mirror.start(ev.subjectEl, ev.pageX, ev.pageY); // must happen on first pointer down
+                        _this.startDelay(ev);
+                        if (!_this.minDistance) {
+                            _this.handleDistanceSurpassed(ev);
+                        }
+                    }
+                }
+            };
+            _this.onPointerMove = function (ev) {
+                if (_this.isInteracting) {
+                    _this.emitter.trigger('pointermove', ev);
+                    if (!_this.isDistanceSurpassed) {
+                        var minDistance = _this.minDistance;
+                        var distanceSq = void 0; // current distance from the origin, squared
+                        var deltaX = ev.deltaX, deltaY = ev.deltaY;
+                        distanceSq = deltaX * deltaX + deltaY * deltaY;
+                        if (distanceSq >= minDistance * minDistance) { // use pythagorean theorem
+                            _this.handleDistanceSurpassed(ev);
+                        }
+                    }
+                    if (_this.isDragging) {
+                        // a real pointer move? (not one simulated by scrolling)
+                        if (ev.origEvent.type !== 'scroll') {
+                            _this.mirror.handleMove(ev.pageX, ev.pageY);
+                            _this.autoScroller.handleMove(ev.pageX, ev.pageY);
+                        }
+                        _this.emitter.trigger('dragmove', ev);
+                    }
+                }
+            };
+            _this.onPointerUp = function (ev) {
+                if (_this.isInteracting) {
+                    _this.isInteracting = false;
+                    allowSelection(document.body);
+                    allowContextMenu(document.body);
+                    _this.emitter.trigger('pointerup', ev); // can potentially set mirrorNeedsRevert
+                    if (_this.isDragging) {
+                        _this.autoScroller.stop();
+                        _this.tryStopDrag(ev); // which will stop the mirror
+                    }
+                    if (_this.delayTimeoutId) {
+                        clearTimeout(_this.delayTimeoutId);
+                        _this.delayTimeoutId = null;
+                    }
+                }
+            };
+            var pointer = _this.pointer = new PointerDragging(containerEl);
+            pointer.emitter.on('pointerdown', _this.onPointerDown);
+            pointer.emitter.on('pointermove', _this.onPointerMove);
+            pointer.emitter.on('pointerup', _this.onPointerUp);
+            if (selector) {
+                pointer.selector = selector;
+            }
+            _this.mirror = new ElementMirror();
+            _this.autoScroller = new AutoScroller();
+            return _this;
+        }
+        FeaturefulElementDragging.prototype.destroy = function () {
+            this.pointer.destroy();
+            // HACK: simulate a pointer-up to end the current drag
+            // TODO: fire 'dragend' directly and stop interaction. discourage use of pointerup event (b/c might not fire)
+            this.onPointerUp({});
+        };
+        FeaturefulElementDragging.prototype.startDelay = function (ev) {
+            var _this = this;
+            if (typeof this.delay === 'number') {
+                this.delayTimeoutId = setTimeout(function () {
+                    _this.delayTimeoutId = null;
+                    _this.handleDelayEnd(ev);
+                }, this.delay); // not assignable to number!
+            }
+            else {
+                this.handleDelayEnd(ev);
+            }
+        };
+        FeaturefulElementDragging.prototype.handleDelayEnd = function (ev) {
+            this.isDelayEnded = true;
+            this.tryStartDrag(ev);
+        };
+        FeaturefulElementDragging.prototype.handleDistanceSurpassed = function (ev) {
+            this.isDistanceSurpassed = true;
+            this.tryStartDrag(ev);
+        };
+        FeaturefulElementDragging.prototype.tryStartDrag = function (ev) {
+            if (this.isDelayEnded && this.isDistanceSurpassed) {
+                if (!this.pointer.wasTouchScroll || this.touchScrollAllowed) {
+                    this.isDragging = true;
+                    this.mirrorNeedsRevert = false;
+                    this.autoScroller.start(ev.pageX, ev.pageY, this.containerEl);
+                    this.emitter.trigger('dragstart', ev);
+                    if (this.touchScrollAllowed === false) {
+                        this.pointer.cancelTouchScroll();
+                    }
+                }
+            }
+        };
+        FeaturefulElementDragging.prototype.tryStopDrag = function (ev) {
+            // .stop() is ALWAYS asynchronous, which we NEED because we want all pointerup events
+            // that come from the document to fire beforehand. much more convenient this way.
+            this.mirror.stop(this.mirrorNeedsRevert, this.stopDrag.bind(this, ev));
+        };
+        FeaturefulElementDragging.prototype.stopDrag = function (ev) {
+            this.isDragging = false;
+            this.emitter.trigger('dragend', ev);
+        };
+        // fill in the implementations...
+        FeaturefulElementDragging.prototype.setIgnoreMove = function (bool) {
+            this.pointer.shouldIgnoreMove = bool;
+        };
+        FeaturefulElementDragging.prototype.setMirrorIsVisible = function (bool) {
+            this.mirror.setIsVisible(bool);
+        };
+        FeaturefulElementDragging.prototype.setMirrorNeedsRevert = function (bool) {
+            this.mirrorNeedsRevert = bool;
+        };
+        FeaturefulElementDragging.prototype.setAutoScrollEnabled = function (bool) {
+            this.autoScroller.isEnabled = bool;
+        };
+        return FeaturefulElementDragging;
+    }(ElementDragging));
+
+    /*
+    When this class is instantiated, it records the offset of an element (relative to the document topleft),
+    and continues to monitor scrolling, updating the cached coordinates if it needs to.
+    Does not access the DOM after instantiation, so highly performant.
+
+    Also keeps track of all scrolling/overflow:hidden containers that are parents of the given element
+    and an determine if a given point is inside the combined clipping rectangle.
+    */
+    var OffsetTracker = /** @class */ (function () {
+        function OffsetTracker(el) {
+            this.origRect = computeRect(el);
+            // will work fine for divs that have overflow:hidden
+            this.scrollCaches = getClippingParents(el).map(function (scrollEl) { return new ElementScrollGeomCache(scrollEl, true); });
+        }
+        OffsetTracker.prototype.destroy = function () {
+            for (var _i = 0, _a = this.scrollCaches; _i < _a.length; _i++) {
+                var scrollCache = _a[_i];
+                scrollCache.destroy();
+            }
+        };
+        OffsetTracker.prototype.computeLeft = function () {
+            var left = this.origRect.left;
+            for (var _i = 0, _a = this.scrollCaches; _i < _a.length; _i++) {
+                var scrollCache = _a[_i];
+                left += scrollCache.origScrollLeft - scrollCache.getScrollLeft();
+            }
+            return left;
+        };
+        OffsetTracker.prototype.computeTop = function () {
+            var top = this.origRect.top;
+            for (var _i = 0, _a = this.scrollCaches; _i < _a.length; _i++) {
+                var scrollCache = _a[_i];
+                top += scrollCache.origScrollTop - scrollCache.getScrollTop();
+            }
+            return top;
+        };
+        OffsetTracker.prototype.isWithinClipping = function (pageX, pageY) {
+            var point = { left: pageX, top: pageY };
+            for (var _i = 0, _a = this.scrollCaches; _i < _a.length; _i++) {
+                var scrollCache = _a[_i];
+                if (!isIgnoredClipping(scrollCache.getEventTarget()) &&
+                    !pointInsideRect(point, scrollCache.clientRect)) {
+                    return false;
+                }
+            }
+            return true;
+        };
+        return OffsetTracker;
+    }());
+    // certain clipping containers should never constrain interactions, like  and 
+    // https://github.com/fullcalendar/fullcalendar/issues/3615
+    function isIgnoredClipping(node) {
+        var tagName = node.tagName;
+        return tagName === 'HTML' || tagName === 'BODY';
+    }
+
+    /*
+    Tracks movement over multiple droppable areas (aka "hits")
+    that exist in one or more DateComponents.
+    Relies on an existing draggable.
+
+    emits:
+    - pointerdown
+    - dragstart
+    - hitchange - fires initially, even if not over a hit
+    - pointerup
+    - (hitchange - again, to null, if ended over a hit)
+    - dragend
+    */
+    var HitDragging = /** @class */ (function () {
+        function HitDragging(dragging, droppableStore) {
+            var _this = this;
+            // options that can be set by caller
+            this.useSubjectCenter = false;
+            this.requireInitial = true; // if doesn't start out on a hit, won't emit any events
+            this.initialHit = null;
+            this.movingHit = null;
+            this.finalHit = null; // won't ever be populated if shouldIgnoreMove
+            this.handlePointerDown = function (ev) {
+                var dragging = _this.dragging;
+                _this.initialHit = null;
+                _this.movingHit = null;
+                _this.finalHit = null;
+                _this.prepareHits();
+                _this.processFirstCoord(ev);
+                if (_this.initialHit || !_this.requireInitial) {
+                    dragging.setIgnoreMove(false);
+                    // TODO: fire this before computing processFirstCoord, so listeners can cancel. this gets fired by almost every handler :(
+                    _this.emitter.trigger('pointerdown', ev);
+                }
+                else {
+                    dragging.setIgnoreMove(true);
+                }
+            };
+            this.handleDragStart = function (ev) {
+                _this.emitter.trigger('dragstart', ev);
+                _this.handleMove(ev, true); // force = fire even if initially null
+            };
+            this.handleDragMove = function (ev) {
+                _this.emitter.trigger('dragmove', ev);
+                _this.handleMove(ev);
+            };
+            this.handlePointerUp = function (ev) {
+                _this.releaseHits();
+                _this.emitter.trigger('pointerup', ev);
+            };
+            this.handleDragEnd = function (ev) {
+                if (_this.movingHit) {
+                    _this.emitter.trigger('hitupdate', null, true, ev);
+                }
+                _this.finalHit = _this.movingHit;
+                _this.movingHit = null;
+                _this.emitter.trigger('dragend', ev);
+            };
+            this.droppableStore = droppableStore;
+            dragging.emitter.on('pointerdown', this.handlePointerDown);
+            dragging.emitter.on('dragstart', this.handleDragStart);
+            dragging.emitter.on('dragmove', this.handleDragMove);
+            dragging.emitter.on('pointerup', this.handlePointerUp);
+            dragging.emitter.on('dragend', this.handleDragEnd);
+            this.dragging = dragging;
+            this.emitter = new Emitter();
+        }
+        // sets initialHit
+        // sets coordAdjust
+        HitDragging.prototype.processFirstCoord = function (ev) {
+            var origPoint = { left: ev.pageX, top: ev.pageY };
+            var adjustedPoint = origPoint;
+            var subjectEl = ev.subjectEl;
+            var subjectRect;
+            if (subjectEl instanceof HTMLElement) { // i.e. not a Document/ShadowRoot
+                subjectRect = computeRect(subjectEl);
+                adjustedPoint = constrainPoint(adjustedPoint, subjectRect);
+            }
+            var initialHit = this.initialHit = this.queryHitForOffset(adjustedPoint.left, adjustedPoint.top);
+            if (initialHit) {
+                if (this.useSubjectCenter && subjectRect) {
+                    var slicedSubjectRect = intersectRects(subjectRect, initialHit.rect);
+                    if (slicedSubjectRect) {
+                        adjustedPoint = getRectCenter(slicedSubjectRect);
+                    }
+                }
+                this.coordAdjust = diffPoints(adjustedPoint, origPoint);
+            }
+            else {
+                this.coordAdjust = { left: 0, top: 0 };
+            }
+        };
+        HitDragging.prototype.handleMove = function (ev, forceHandle) {
+            var hit = this.queryHitForOffset(ev.pageX + this.coordAdjust.left, ev.pageY + this.coordAdjust.top);
+            if (forceHandle || !isHitsEqual(this.movingHit, hit)) {
+                this.movingHit = hit;
+                this.emitter.trigger('hitupdate', hit, false, ev);
+            }
+        };
+        HitDragging.prototype.prepareHits = function () {
+            this.offsetTrackers = mapHash(this.droppableStore, function (interactionSettings) {
+                interactionSettings.component.prepareHits();
+                return new OffsetTracker(interactionSettings.el);
+            });
+        };
+        HitDragging.prototype.releaseHits = function () {
+            var offsetTrackers = this.offsetTrackers;
+            for (var id in offsetTrackers) {
+                offsetTrackers[id].destroy();
+            }
+            this.offsetTrackers = {};
+        };
+        HitDragging.prototype.queryHitForOffset = function (offsetLeft, offsetTop) {
+            var _a = this, droppableStore = _a.droppableStore, offsetTrackers = _a.offsetTrackers;
+            var bestHit = null;
+            for (var id in droppableStore) {
+                var component = droppableStore[id].component;
+                var offsetTracker = offsetTrackers[id];
+                if (offsetTracker && // wasn't destroyed mid-drag
+                    offsetTracker.isWithinClipping(offsetLeft, offsetTop)) {
+                    var originLeft = offsetTracker.computeLeft();
+                    var originTop = offsetTracker.computeTop();
+                    var positionLeft = offsetLeft - originLeft;
+                    var positionTop = offsetTop - originTop;
+                    var origRect = offsetTracker.origRect;
+                    var width = origRect.right - origRect.left;
+                    var height = origRect.bottom - origRect.top;
+                    if (
+                    // must be within the element's bounds
+                    positionLeft >= 0 && positionLeft < width &&
+                        positionTop >= 0 && positionTop < height) {
+                        var hit = component.queryHit(positionLeft, positionTop, width, height);
+                        if (hit && (
+                        // make sure the hit is within activeRange, meaning it's not a dead cell
+                        rangeContainsRange(hit.dateProfile.activeRange, hit.dateSpan.range)) &&
+                            (!bestHit || hit.layer > bestHit.layer)) {
+                            hit.componentId = id;
+                            hit.context = component.context;
+                            // TODO: better way to re-orient rectangle
+                            hit.rect.left += originLeft;
+                            hit.rect.right += originLeft;
+                            hit.rect.top += originTop;
+                            hit.rect.bottom += originTop;
+                            bestHit = hit;
+                        }
+                    }
+                }
+            }
+            return bestHit;
+        };
+        return HitDragging;
+    }());
+    function isHitsEqual(hit0, hit1) {
+        if (!hit0 && !hit1) {
+            return true;
+        }
+        if (Boolean(hit0) !== Boolean(hit1)) {
+            return false;
+        }
+        return isDateSpansEqual(hit0.dateSpan, hit1.dateSpan);
+    }
+
+    function buildDatePointApiWithContext(dateSpan, context) {
+        var props = {};
+        for (var _i = 0, _a = context.pluginHooks.datePointTransforms; _i < _a.length; _i++) {
+            var transform = _a[_i];
+            __assign(props, transform(dateSpan, context));
+        }
+        __assign(props, buildDatePointApi(dateSpan, context.dateEnv));
+        return props;
+    }
+    function buildDatePointApi(span, dateEnv) {
+        return {
+            date: dateEnv.toDate(span.range.start),
+            dateStr: dateEnv.formatIso(span.range.start, { omitTime: span.allDay }),
+            allDay: span.allDay,
+        };
+    }
+
+    /*
+    Monitors when the user clicks on a specific date/time of a component.
+    A pointerdown+pointerup on the same "hit" constitutes a click.
+    */
+    var DateClicking = /** @class */ (function (_super) {
+        __extends(DateClicking, _super);
+        function DateClicking(settings) {
+            var _this = _super.call(this, settings) || this;
+            _this.handlePointerDown = function (pev) {
+                var dragging = _this.dragging;
+                var downEl = pev.origEvent.target;
+                // do this in pointerdown (not dragend) because DOM might be mutated by the time dragend is fired
+                dragging.setIgnoreMove(!_this.component.isValidDateDownEl(downEl));
+            };
+            // won't even fire if moving was ignored
+            _this.handleDragEnd = function (ev) {
+                var component = _this.component;
+                var pointer = _this.dragging.pointer;
+                if (!pointer.wasTouchScroll) {
+                    var _a = _this.hitDragging, initialHit = _a.initialHit, finalHit = _a.finalHit;
+                    if (initialHit && finalHit && isHitsEqual(initialHit, finalHit)) {
+                        var context = component.context;
+                        var arg = __assign(__assign({}, buildDatePointApiWithContext(initialHit.dateSpan, context)), { dayEl: initialHit.dayEl, jsEvent: ev.origEvent, view: context.viewApi || context.calendarApi.view });
+                        context.emitter.trigger('dateClick', arg);
+                    }
+                }
+            };
+            // we DO want to watch pointer moves because otherwise finalHit won't get populated
+            _this.dragging = new FeaturefulElementDragging(settings.el);
+            _this.dragging.autoScroller.isEnabled = false;
+            var hitDragging = _this.hitDragging = new HitDragging(_this.dragging, interactionSettingsToStore(settings));
+            hitDragging.emitter.on('pointerdown', _this.handlePointerDown);
+            hitDragging.emitter.on('dragend', _this.handleDragEnd);
+            return _this;
+        }
+        DateClicking.prototype.destroy = function () {
+            this.dragging.destroy();
+        };
+        return DateClicking;
+    }(Interaction));
+
+    /*
+    Tracks when the user selects a portion of time of a component,
+    constituted by a drag over date cells, with a possible delay at the beginning of the drag.
+    */
+    var DateSelecting = /** @class */ (function (_super) {
+        __extends(DateSelecting, _super);
+        function DateSelecting(settings) {
+            var _this = _super.call(this, settings) || this;
+            _this.dragSelection = null;
+            _this.handlePointerDown = function (ev) {
+                var _a = _this, component = _a.component, dragging = _a.dragging;
+                var options = component.context.options;
+                var canSelect = options.selectable &&
+                    component.isValidDateDownEl(ev.origEvent.target);
+                // don't bother to watch expensive moves if component won't do selection
+                dragging.setIgnoreMove(!canSelect);
+                // if touch, require user to hold down
+                dragging.delay = ev.isTouch ? getComponentTouchDelay$1(component) : null;
+            };
+            _this.handleDragStart = function (ev) {
+                _this.component.context.calendarApi.unselect(ev); // unselect previous selections
+            };
+            _this.handleHitUpdate = function (hit, isFinal) {
+                var context = _this.component.context;
+                var dragSelection = null;
+                var isInvalid = false;
+                if (hit) {
+                    var initialHit = _this.hitDragging.initialHit;
+                    var disallowed = hit.componentId === initialHit.componentId
+                        && _this.isHitComboAllowed
+                        && !_this.isHitComboAllowed(initialHit, hit);
+                    if (!disallowed) {
+                        dragSelection = joinHitsIntoSelection(initialHit, hit, context.pluginHooks.dateSelectionTransformers);
+                    }
+                    if (!dragSelection || !isDateSelectionValid(dragSelection, hit.dateProfile, context)) {
+                        isInvalid = true;
+                        dragSelection = null;
+                    }
+                }
+                if (dragSelection) {
+                    context.dispatch({ type: 'SELECT_DATES', selection: dragSelection });
+                }
+                else if (!isFinal) { // only unselect if moved away while dragging
+                    context.dispatch({ type: 'UNSELECT_DATES' });
+                }
+                if (!isInvalid) {
+                    enableCursor();
+                }
+                else {
+                    disableCursor();
+                }
+                if (!isFinal) {
+                    _this.dragSelection = dragSelection; // only clear if moved away from all hits while dragging
+                }
+            };
+            _this.handlePointerUp = function (pev) {
+                if (_this.dragSelection) {
+                    // selection is already rendered, so just need to report selection
+                    triggerDateSelect(_this.dragSelection, pev, _this.component.context);
+                    _this.dragSelection = null;
+                }
+            };
+            var component = settings.component;
+            var options = component.context.options;
+            var dragging = _this.dragging = new FeaturefulElementDragging(settings.el);
+            dragging.touchScrollAllowed = false;
+            dragging.minDistance = options.selectMinDistance || 0;
+            dragging.autoScroller.isEnabled = options.dragScroll;
+            var hitDragging = _this.hitDragging = new HitDragging(_this.dragging, interactionSettingsToStore(settings));
+            hitDragging.emitter.on('pointerdown', _this.handlePointerDown);
+            hitDragging.emitter.on('dragstart', _this.handleDragStart);
+            hitDragging.emitter.on('hitupdate', _this.handleHitUpdate);
+            hitDragging.emitter.on('pointerup', _this.handlePointerUp);
+            return _this;
+        }
+        DateSelecting.prototype.destroy = function () {
+            this.dragging.destroy();
+        };
+        return DateSelecting;
+    }(Interaction));
+    function getComponentTouchDelay$1(component) {
+        var options = component.context.options;
+        var delay = options.selectLongPressDelay;
+        if (delay == null) {
+            delay = options.longPressDelay;
+        }
+        return delay;
+    }
+    function joinHitsIntoSelection(hit0, hit1, dateSelectionTransformers) {
+        var dateSpan0 = hit0.dateSpan;
+        var dateSpan1 = hit1.dateSpan;
+        var ms = [
+            dateSpan0.range.start,
+            dateSpan0.range.end,
+            dateSpan1.range.start,
+            dateSpan1.range.end,
+        ];
+        ms.sort(compareNumbers);
+        var props = {};
+        for (var _i = 0, dateSelectionTransformers_1 = dateSelectionTransformers; _i < dateSelectionTransformers_1.length; _i++) {
+            var transformer = dateSelectionTransformers_1[_i];
+            var res = transformer(hit0, hit1);
+            if (res === false) {
+                return null;
+            }
+            if (res) {
+                __assign(props, res);
+            }
+        }
+        props.range = { start: ms[0], end: ms[3] };
+        props.allDay = dateSpan0.allDay;
+        return props;
+    }
+
+    var EventDragging = /** @class */ (function (_super) {
+        __extends(EventDragging, _super);
+        function EventDragging(settings) {
+            var _this = _super.call(this, settings) || this;
+            // internal state
+            _this.subjectEl = null;
+            _this.subjectSeg = null; // the seg being selected/dragged
+            _this.isDragging = false;
+            _this.eventRange = null;
+            _this.relevantEvents = null; // the events being dragged
+            _this.receivingContext = null;
+            _this.validMutation = null;
+            _this.mutatedRelevantEvents = null;
+            _this.handlePointerDown = function (ev) {
+                var origTarget = ev.origEvent.target;
+                var _a = _this, component = _a.component, dragging = _a.dragging;
+                var mirror = dragging.mirror;
+                var options = component.context.options;
+                var initialContext = component.context;
+                _this.subjectEl = ev.subjectEl;
+                var subjectSeg = _this.subjectSeg = getElSeg(ev.subjectEl);
+                var eventRange = _this.eventRange = subjectSeg.eventRange;
+                var eventInstanceId = eventRange.instance.instanceId;
+                _this.relevantEvents = getRelevantEvents(initialContext.getCurrentData().eventStore, eventInstanceId);
+                dragging.minDistance = ev.isTouch ? 0 : options.eventDragMinDistance;
+                dragging.delay =
+                    // only do a touch delay if touch and this event hasn't been selected yet
+                    (ev.isTouch && eventInstanceId !== component.props.eventSelection) ?
+                        getComponentTouchDelay(component) :
+                        null;
+                if (options.fixedMirrorParent) {
+                    mirror.parentNode = options.fixedMirrorParent;
+                }
+                else {
+                    mirror.parentNode = elementClosest(origTarget, '.fc');
+                }
+                mirror.revertDuration = options.dragRevertDuration;
+                var isValid = component.isValidSegDownEl(origTarget) &&
+                    !elementClosest(origTarget, '.fc-event-resizer'); // NOT on a resizer
+                dragging.setIgnoreMove(!isValid);
+                // disable dragging for elements that are resizable (ie, selectable)
+                // but are not draggable
+                _this.isDragging = isValid &&
+                    ev.subjectEl.classList.contains('fc-event-draggable');
+            };
+            _this.handleDragStart = function (ev) {
+                var initialContext = _this.component.context;
+                var eventRange = _this.eventRange;
+                var eventInstanceId = eventRange.instance.instanceId;
+                if (ev.isTouch) {
+                    // need to select a different event?
+                    if (eventInstanceId !== _this.component.props.eventSelection) {
+                        initialContext.dispatch({ type: 'SELECT_EVENT', eventInstanceId: eventInstanceId });
+                    }
+                }
+                else {
+                    // if now using mouse, but was previous touch interaction, clear selected event
+                    initialContext.dispatch({ type: 'UNSELECT_EVENT' });
+                }
+                if (_this.isDragging) {
+                    initialContext.calendarApi.unselect(ev); // unselect *date* selection
+                    initialContext.emitter.trigger('eventDragStart', {
+                        el: _this.subjectEl,
+                        event: new EventApi(initialContext, eventRange.def, eventRange.instance),
+                        jsEvent: ev.origEvent,
+                        view: initialContext.viewApi,
+                    });
+                }
+            };
+            _this.handleHitUpdate = function (hit, isFinal) {
+                if (!_this.isDragging) {
+                    return;
+                }
+                var relevantEvents = _this.relevantEvents;
+                var initialHit = _this.hitDragging.initialHit;
+                var initialContext = _this.component.context;
+                // states based on new hit
+                var receivingContext = null;
+                var mutation = null;
+                var mutatedRelevantEvents = null;
+                var isInvalid = false;
+                var interaction = {
+                    affectedEvents: relevantEvents,
+                    mutatedEvents: createEmptyEventStore(),
+                    isEvent: true,
+                };
+                if (hit) {
+                    receivingContext = hit.context;
+                    var receivingOptions = receivingContext.options;
+                    if (initialContext === receivingContext ||
+                        (receivingOptions.editable && receivingOptions.droppable)) {
+                        mutation = computeEventMutation(initialHit, hit, receivingContext.getCurrentData().pluginHooks.eventDragMutationMassagers);
+                        if (mutation) {
+                            mutatedRelevantEvents = applyMutationToEventStore(relevantEvents, receivingContext.getCurrentData().eventUiBases, mutation, receivingContext);
+                            interaction.mutatedEvents = mutatedRelevantEvents;
+                            if (!isInteractionValid(interaction, hit.dateProfile, receivingContext)) {
+                                isInvalid = true;
+                                mutation = null;
+                                mutatedRelevantEvents = null;
+                                interaction.mutatedEvents = createEmptyEventStore();
+                            }
+                        }
+                    }
+                    else {
+                        receivingContext = null;
+                    }
+                }
+                _this.displayDrag(receivingContext, interaction);
+                if (!isInvalid) {
+                    enableCursor();
+                }
+                else {
+                    disableCursor();
+                }
+                if (!isFinal) {
+                    if (initialContext === receivingContext && // TODO: write test for this
+                        isHitsEqual(initialHit, hit)) {
+                        mutation = null;
+                    }
+                    _this.dragging.setMirrorNeedsRevert(!mutation);
+                    // render the mirror if no already-rendered mirror
+                    // TODO: wish we could somehow wait for dispatch to guarantee render
+                    _this.dragging.setMirrorIsVisible(!hit || !getElRoot(_this.subjectEl).querySelector('.fc-event-mirror'));
+                    // assign states based on new hit
+                    _this.receivingContext = receivingContext;
+                    _this.validMutation = mutation;
+                    _this.mutatedRelevantEvents = mutatedRelevantEvents;
+                }
+            };
+            _this.handlePointerUp = function () {
+                if (!_this.isDragging) {
+                    _this.cleanup(); // because handleDragEnd won't fire
+                }
+            };
+            _this.handleDragEnd = function (ev) {
+                if (_this.isDragging) {
+                    var initialContext_1 = _this.component.context;
+                    var initialView = initialContext_1.viewApi;
+                    var _a = _this, receivingContext_1 = _a.receivingContext, validMutation = _a.validMutation;
+                    var eventDef = _this.eventRange.def;
+                    var eventInstance = _this.eventRange.instance;
+                    var eventApi = new EventApi(initialContext_1, eventDef, eventInstance);
+                    var relevantEvents_1 = _this.relevantEvents;
+                    var mutatedRelevantEvents_1 = _this.mutatedRelevantEvents;
+                    var finalHit = _this.hitDragging.finalHit;
+                    _this.clearDrag(); // must happen after revert animation
+                    initialContext_1.emitter.trigger('eventDragStop', {
+                        el: _this.subjectEl,
+                        event: eventApi,
+                        jsEvent: ev.origEvent,
+                        view: initialView,
+                    });
+                    if (validMutation) {
+                        // dropped within same calendar
+                        if (receivingContext_1 === initialContext_1) {
+                            var updatedEventApi = new EventApi(initialContext_1, mutatedRelevantEvents_1.defs[eventDef.defId], eventInstance ? mutatedRelevantEvents_1.instances[eventInstance.instanceId] : null);
+                            initialContext_1.dispatch({
+                                type: 'MERGE_EVENTS',
+                                eventStore: mutatedRelevantEvents_1,
+                            });
+                            var eventChangeArg = {
+                                oldEvent: eventApi,
+                                event: updatedEventApi,
+                                relatedEvents: buildEventApis(mutatedRelevantEvents_1, initialContext_1, eventInstance),
+                                revert: function () {
+                                    initialContext_1.dispatch({
+                                        type: 'MERGE_EVENTS',
+                                        eventStore: relevantEvents_1, // the pre-change data
+                                    });
+                                },
+                            };
+                            var transformed = {};
+                            for (var _i = 0, _b = initialContext_1.getCurrentData().pluginHooks.eventDropTransformers; _i < _b.length; _i++) {
+                                var transformer = _b[_i];
+                                __assign(transformed, transformer(validMutation, initialContext_1));
+                            }
+                            initialContext_1.emitter.trigger('eventDrop', __assign(__assign(__assign({}, eventChangeArg), transformed), { el: ev.subjectEl, delta: validMutation.datesDelta, jsEvent: ev.origEvent, view: initialView }));
+                            initialContext_1.emitter.trigger('eventChange', eventChangeArg);
+                            // dropped in different calendar
+                        }
+                        else if (receivingContext_1) {
+                            var eventRemoveArg = {
+                                event: eventApi,
+                                relatedEvents: buildEventApis(relevantEvents_1, initialContext_1, eventInstance),
+                                revert: function () {
+                                    initialContext_1.dispatch({
+                                        type: 'MERGE_EVENTS',
+                                        eventStore: relevantEvents_1,
+                                    });
+                                },
+                            };
+                            initialContext_1.emitter.trigger('eventLeave', __assign(__assign({}, eventRemoveArg), { draggedEl: ev.subjectEl, view: initialView }));
+                            initialContext_1.dispatch({
+                                type: 'REMOVE_EVENTS',
+                                eventStore: relevantEvents_1,
+                            });
+                            initialContext_1.emitter.trigger('eventRemove', eventRemoveArg);
+                            var addedEventDef = mutatedRelevantEvents_1.defs[eventDef.defId];
+                            var addedEventInstance = mutatedRelevantEvents_1.instances[eventInstance.instanceId];
+                            var addedEventApi = new EventApi(receivingContext_1, addedEventDef, addedEventInstance);
+                            receivingContext_1.dispatch({
+                                type: 'MERGE_EVENTS',
+                                eventStore: mutatedRelevantEvents_1,
+                            });
+                            var eventAddArg = {
+                                event: addedEventApi,
+                                relatedEvents: buildEventApis(mutatedRelevantEvents_1, receivingContext_1, addedEventInstance),
+                                revert: function () {
+                                    receivingContext_1.dispatch({
+                                        type: 'REMOVE_EVENTS',
+                                        eventStore: mutatedRelevantEvents_1,
+                                    });
+                                },
+                            };
+                            receivingContext_1.emitter.trigger('eventAdd', eventAddArg);
+                            if (ev.isTouch) {
+                                receivingContext_1.dispatch({
+                                    type: 'SELECT_EVENT',
+                                    eventInstanceId: eventInstance.instanceId,
+                                });
+                            }
+                            receivingContext_1.emitter.trigger('drop', __assign(__assign({}, buildDatePointApiWithContext(finalHit.dateSpan, receivingContext_1)), { draggedEl: ev.subjectEl, jsEvent: ev.origEvent, view: finalHit.context.viewApi }));
+                            receivingContext_1.emitter.trigger('eventReceive', __assign(__assign({}, eventAddArg), { draggedEl: ev.subjectEl, view: finalHit.context.viewApi }));
+                        }
+                    }
+                    else {
+                        initialContext_1.emitter.trigger('_noEventDrop');
+                    }
+                }
+                _this.cleanup();
+            };
+            var component = _this.component;
+            var options = component.context.options;
+            var dragging = _this.dragging = new FeaturefulElementDragging(settings.el);
+            dragging.pointer.selector = EventDragging.SELECTOR;
+            dragging.touchScrollAllowed = false;
+            dragging.autoScroller.isEnabled = options.dragScroll;
+            var hitDragging = _this.hitDragging = new HitDragging(_this.dragging, interactionSettingsStore);
+            hitDragging.useSubjectCenter = settings.useEventCenter;
+            hitDragging.emitter.on('pointerdown', _this.handlePointerDown);
+            hitDragging.emitter.on('dragstart', _this.handleDragStart);
+            hitDragging.emitter.on('hitupdate', _this.handleHitUpdate);
+            hitDragging.emitter.on('pointerup', _this.handlePointerUp);
+            hitDragging.emitter.on('dragend', _this.handleDragEnd);
+            return _this;
+        }
+        EventDragging.prototype.destroy = function () {
+            this.dragging.destroy();
+        };
+        // render a drag state on the next receivingCalendar
+        EventDragging.prototype.displayDrag = function (nextContext, state) {
+            var initialContext = this.component.context;
+            var prevContext = this.receivingContext;
+            // does the previous calendar need to be cleared?
+            if (prevContext && prevContext !== nextContext) {
+                // does the initial calendar need to be cleared?
+                // if so, don't clear all the way. we still need to to hide the affectedEvents
+                if (prevContext === initialContext) {
+                    prevContext.dispatch({
+                        type: 'SET_EVENT_DRAG',
+                        state: {
+                            affectedEvents: state.affectedEvents,
+                            mutatedEvents: createEmptyEventStore(),
+                            isEvent: true,
+                        },
+                    });
+                    // completely clear the old calendar if it wasn't the initial
+                }
+                else {
+                    prevContext.dispatch({ type: 'UNSET_EVENT_DRAG' });
+                }
+            }
+            if (nextContext) {
+                nextContext.dispatch({ type: 'SET_EVENT_DRAG', state: state });
+            }
+        };
+        EventDragging.prototype.clearDrag = function () {
+            var initialCalendar = this.component.context;
+            var receivingContext = this.receivingContext;
+            if (receivingContext) {
+                receivingContext.dispatch({ type: 'UNSET_EVENT_DRAG' });
+            }
+            // the initial calendar might have an dummy drag state from displayDrag
+            if (initialCalendar !== receivingContext) {
+                initialCalendar.dispatch({ type: 'UNSET_EVENT_DRAG' });
+            }
+        };
+        EventDragging.prototype.cleanup = function () {
+            this.subjectSeg = null;
+            this.isDragging = false;
+            this.eventRange = null;
+            this.relevantEvents = null;
+            this.receivingContext = null;
+            this.validMutation = null;
+            this.mutatedRelevantEvents = null;
+        };
+        // TODO: test this in IE11
+        // QUESTION: why do we need it on the resizable???
+        EventDragging.SELECTOR = '.fc-event-draggable, .fc-event-resizable';
+        return EventDragging;
+    }(Interaction));
+    function computeEventMutation(hit0, hit1, massagers) {
+        var dateSpan0 = hit0.dateSpan;
+        var dateSpan1 = hit1.dateSpan;
+        var date0 = dateSpan0.range.start;
+        var date1 = dateSpan1.range.start;
+        var standardProps = {};
+        if (dateSpan0.allDay !== dateSpan1.allDay) {
+            standardProps.allDay = dateSpan1.allDay;
+            standardProps.hasEnd = hit1.context.options.allDayMaintainDuration;
+            if (dateSpan1.allDay) {
+                // means date1 is already start-of-day,
+                // but date0 needs to be converted
+                date0 = startOfDay(date0);
+            }
+        }
+        var delta = diffDates(date0, date1, hit0.context.dateEnv, hit0.componentId === hit1.componentId ?
+            hit0.largeUnit :
+            null);
+        if (delta.milliseconds) { // has hours/minutes/seconds
+            standardProps.allDay = false;
+        }
+        var mutation = {
+            datesDelta: delta,
+            standardProps: standardProps,
+        };
+        for (var _i = 0, massagers_1 = massagers; _i < massagers_1.length; _i++) {
+            var massager = massagers_1[_i];
+            massager(mutation, hit0, hit1);
+        }
+        return mutation;
+    }
+    function getComponentTouchDelay(component) {
+        var options = component.context.options;
+        var delay = options.eventLongPressDelay;
+        if (delay == null) {
+            delay = options.longPressDelay;
+        }
+        return delay;
+    }
+
+    var EventResizing = /** @class */ (function (_super) {
+        __extends(EventResizing, _super);
+        function EventResizing(settings) {
+            var _this = _super.call(this, settings) || this;
+            // internal state
+            _this.draggingSegEl = null;
+            _this.draggingSeg = null; // TODO: rename to resizingSeg? subjectSeg?
+            _this.eventRange = null;
+            _this.relevantEvents = null;
+            _this.validMutation = null;
+            _this.mutatedRelevantEvents = null;
+            _this.handlePointerDown = function (ev) {
+                var component = _this.component;
+                var segEl = _this.querySegEl(ev);
+                var seg = getElSeg(segEl);
+                var eventRange = _this.eventRange = seg.eventRange;
+                _this.dragging.minDistance = component.context.options.eventDragMinDistance;
+                // if touch, need to be working with a selected event
+                _this.dragging.setIgnoreMove(!_this.component.isValidSegDownEl(ev.origEvent.target) ||
+                    (ev.isTouch && _this.component.props.eventSelection !== eventRange.instance.instanceId));
+            };
+            _this.handleDragStart = function (ev) {
+                var context = _this.component.context;
+                var eventRange = _this.eventRange;
+                _this.relevantEvents = getRelevantEvents(context.getCurrentData().eventStore, _this.eventRange.instance.instanceId);
+                var segEl = _this.querySegEl(ev);
+                _this.draggingSegEl = segEl;
+                _this.draggingSeg = getElSeg(segEl);
+                context.calendarApi.unselect();
+                context.emitter.trigger('eventResizeStart', {
+                    el: segEl,
+                    event: new EventApi(context, eventRange.def, eventRange.instance),
+                    jsEvent: ev.origEvent,
+                    view: context.viewApi,
+                });
+            };
+            _this.handleHitUpdate = function (hit, isFinal, ev) {
+                var context = _this.component.context;
+                var relevantEvents = _this.relevantEvents;
+                var initialHit = _this.hitDragging.initialHit;
+                var eventInstance = _this.eventRange.instance;
+                var mutation = null;
+                var mutatedRelevantEvents = null;
+                var isInvalid = false;
+                var interaction = {
+                    affectedEvents: relevantEvents,
+                    mutatedEvents: createEmptyEventStore(),
+                    isEvent: true,
+                };
+                if (hit) {
+                    var disallowed = hit.componentId === initialHit.componentId
+                        && _this.isHitComboAllowed
+                        && !_this.isHitComboAllowed(initialHit, hit);
+                    if (!disallowed) {
+                        mutation = computeMutation(initialHit, hit, ev.subjectEl.classList.contains('fc-event-resizer-start'), eventInstance.range);
+                    }
+                }
+                if (mutation) {
+                    mutatedRelevantEvents = applyMutationToEventStore(relevantEvents, context.getCurrentData().eventUiBases, mutation, context);
+                    interaction.mutatedEvents = mutatedRelevantEvents;
+                    if (!isInteractionValid(interaction, hit.dateProfile, context)) {
+                        isInvalid = true;
+                        mutation = null;
+                        mutatedRelevantEvents = null;
+                        interaction.mutatedEvents = null;
+                    }
+                }
+                if (mutatedRelevantEvents) {
+                    context.dispatch({
+                        type: 'SET_EVENT_RESIZE',
+                        state: interaction,
+                    });
+                }
+                else {
+                    context.dispatch({ type: 'UNSET_EVENT_RESIZE' });
+                }
+                if (!isInvalid) {
+                    enableCursor();
+                }
+                else {
+                    disableCursor();
+                }
+                if (!isFinal) {
+                    if (mutation && isHitsEqual(initialHit, hit)) {
+                        mutation = null;
+                    }
+                    _this.validMutation = mutation;
+                    _this.mutatedRelevantEvents = mutatedRelevantEvents;
+                }
+            };
+            _this.handleDragEnd = function (ev) {
+                var context = _this.component.context;
+                var eventDef = _this.eventRange.def;
+                var eventInstance = _this.eventRange.instance;
+                var eventApi = new EventApi(context, eventDef, eventInstance);
+                var relevantEvents = _this.relevantEvents;
+                var mutatedRelevantEvents = _this.mutatedRelevantEvents;
+                context.emitter.trigger('eventResizeStop', {
+                    el: _this.draggingSegEl,
+                    event: eventApi,
+                    jsEvent: ev.origEvent,
+                    view: context.viewApi,
+                });
+                if (_this.validMutation) {
+                    var updatedEventApi = new EventApi(context, mutatedRelevantEvents.defs[eventDef.defId], eventInstance ? mutatedRelevantEvents.instances[eventInstance.instanceId] : null);
+                    context.dispatch({
+                        type: 'MERGE_EVENTS',
+                        eventStore: mutatedRelevantEvents,
+                    });
+                    var eventChangeArg = {
+                        oldEvent: eventApi,
+                        event: updatedEventApi,
+                        relatedEvents: buildEventApis(mutatedRelevantEvents, context, eventInstance),
+                        revert: function () {
+                            context.dispatch({
+                                type: 'MERGE_EVENTS',
+                                eventStore: relevantEvents, // the pre-change events
+                            });
+                        },
+                    };
+                    context.emitter.trigger('eventResize', __assign(__assign({}, eventChangeArg), { el: _this.draggingSegEl, startDelta: _this.validMutation.startDelta || createDuration(0), endDelta: _this.validMutation.endDelta || createDuration(0), jsEvent: ev.origEvent, view: context.viewApi }));
+                    context.emitter.trigger('eventChange', eventChangeArg);
+                }
+                else {
+                    context.emitter.trigger('_noEventResize');
+                }
+                // reset all internal state
+                _this.draggingSeg = null;
+                _this.relevantEvents = null;
+                _this.validMutation = null;
+                // okay to keep eventInstance around. useful to set it in handlePointerDown
+            };
+            var component = settings.component;
+            var dragging = _this.dragging = new FeaturefulElementDragging(settings.el);
+            dragging.pointer.selector = '.fc-event-resizer';
+            dragging.touchScrollAllowed = false;
+            dragging.autoScroller.isEnabled = component.context.options.dragScroll;
+            var hitDragging = _this.hitDragging = new HitDragging(_this.dragging, interactionSettingsToStore(settings));
+            hitDragging.emitter.on('pointerdown', _this.handlePointerDown);
+            hitDragging.emitter.on('dragstart', _this.handleDragStart);
+            hitDragging.emitter.on('hitupdate', _this.handleHitUpdate);
+            hitDragging.emitter.on('dragend', _this.handleDragEnd);
+            return _this;
+        }
+        EventResizing.prototype.destroy = function () {
+            this.dragging.destroy();
+        };
+        EventResizing.prototype.querySegEl = function (ev) {
+            return elementClosest(ev.subjectEl, '.fc-event');
+        };
+        return EventResizing;
+    }(Interaction));
+    function computeMutation(hit0, hit1, isFromStart, instanceRange) {
+        var dateEnv = hit0.context.dateEnv;
+        var date0 = hit0.dateSpan.range.start;
+        var date1 = hit1.dateSpan.range.start;
+        var delta = diffDates(date0, date1, dateEnv, hit0.largeUnit);
+        if (isFromStart) {
+            if (dateEnv.add(instanceRange.start, delta) < instanceRange.end) {
+                return { startDelta: delta };
+            }
+        }
+        else if (dateEnv.add(instanceRange.end, delta) > instanceRange.start) {
+            return { endDelta: delta };
+        }
+        return null;
+    }
+
+    var UnselectAuto = /** @class */ (function () {
+        function UnselectAuto(context) {
+            var _this = this;
+            this.context = context;
+            this.isRecentPointerDateSelect = false; // wish we could use a selector to detect date selection, but uses hit system
+            this.matchesCancel = false;
+            this.matchesEvent = false;
+            this.onSelect = function (selectInfo) {
+                if (selectInfo.jsEvent) {
+                    _this.isRecentPointerDateSelect = true;
+                }
+            };
+            this.onDocumentPointerDown = function (pev) {
+                var unselectCancel = _this.context.options.unselectCancel;
+                var downEl = getEventTargetViaRoot(pev.origEvent);
+                _this.matchesCancel = !!elementClosest(downEl, unselectCancel);
+                _this.matchesEvent = !!elementClosest(downEl, EventDragging.SELECTOR); // interaction started on an event?
+            };
+            this.onDocumentPointerUp = function (pev) {
+                var context = _this.context;
+                var documentPointer = _this.documentPointer;
+                var calendarState = context.getCurrentData();
+                // touch-scrolling should never unfocus any type of selection
+                if (!documentPointer.wasTouchScroll) {
+                    if (calendarState.dateSelection && // an existing date selection?
+                        !_this.isRecentPointerDateSelect // a new pointer-initiated date selection since last onDocumentPointerUp?
+                    ) {
+                        var unselectAuto = context.options.unselectAuto;
+                        if (unselectAuto && (!unselectAuto || !_this.matchesCancel)) {
+                            context.calendarApi.unselect(pev);
+                        }
+                    }
+                    if (calendarState.eventSelection && // an existing event selected?
+                        !_this.matchesEvent // interaction DIDN'T start on an event
+                    ) {
+                        context.dispatch({ type: 'UNSELECT_EVENT' });
+                    }
+                }
+                _this.isRecentPointerDateSelect = false;
+            };
+            var documentPointer = this.documentPointer = new PointerDragging(document);
+            documentPointer.shouldIgnoreMove = true;
+            documentPointer.shouldWatchScroll = false;
+            documentPointer.emitter.on('pointerdown', this.onDocumentPointerDown);
+            documentPointer.emitter.on('pointerup', this.onDocumentPointerUp);
+            /*
+            TODO: better way to know about whether there was a selection with the pointer
+            */
+            context.emitter.on('select', this.onSelect);
+        }
+        UnselectAuto.prototype.destroy = function () {
+            this.context.emitter.off('select', this.onSelect);
+            this.documentPointer.destroy();
+        };
+        return UnselectAuto;
+    }());
+
+    var OPTION_REFINERS$3 = {
+        fixedMirrorParent: identity,
+    };
+    var LISTENER_REFINERS = {
+        dateClick: identity,
+        eventDragStart: identity,
+        eventDragStop: identity,
+        eventDrop: identity,
+        eventResizeStart: identity,
+        eventResizeStop: identity,
+        eventResize: identity,
+        drop: identity,
+        eventReceive: identity,
+        eventLeave: identity,
+    };
+
+    /*
+    Given an already instantiated draggable object for one-or-more elements,
+    Interprets any dragging as an attempt to drag an events that lives outside
+    of a calendar onto a calendar.
+    */
+    var ExternalElementDragging = /** @class */ (function () {
+        function ExternalElementDragging(dragging, suppliedDragMeta) {
+            var _this = this;
+            this.receivingContext = null;
+            this.droppableEvent = null; // will exist for all drags, even if create:false
+            this.suppliedDragMeta = null;
+            this.dragMeta = null;
+            this.handleDragStart = function (ev) {
+                _this.dragMeta = _this.buildDragMeta(ev.subjectEl);
+            };
+            this.handleHitUpdate = function (hit, isFinal, ev) {
+                var dragging = _this.hitDragging.dragging;
+                var receivingContext = null;
+                var droppableEvent = null;
+                var isInvalid = false;
+                var interaction = {
+                    affectedEvents: createEmptyEventStore(),
+                    mutatedEvents: createEmptyEventStore(),
+                    isEvent: _this.dragMeta.create,
+                };
+                if (hit) {
+                    receivingContext = hit.context;
+                    if (_this.canDropElOnCalendar(ev.subjectEl, receivingContext)) {
+                        droppableEvent = computeEventForDateSpan(hit.dateSpan, _this.dragMeta, receivingContext);
+                        interaction.mutatedEvents = eventTupleToStore(droppableEvent);
+                        isInvalid = !isInteractionValid(interaction, hit.dateProfile, receivingContext);
+                        if (isInvalid) {
+                            interaction.mutatedEvents = createEmptyEventStore();
+                            droppableEvent = null;
+                        }
+                    }
+                }
+                _this.displayDrag(receivingContext, interaction);
+                // show mirror if no already-rendered mirror element OR if we are shutting down the mirror (?)
+                // TODO: wish we could somehow wait for dispatch to guarantee render
+                dragging.setMirrorIsVisible(isFinal || !droppableEvent || !document.querySelector('.fc-event-mirror'));
+                if (!isInvalid) {
+                    enableCursor();
+                }
+                else {
+                    disableCursor();
+                }
+                if (!isFinal) {
+                    dragging.setMirrorNeedsRevert(!droppableEvent);
+                    _this.receivingContext = receivingContext;
+                    _this.droppableEvent = droppableEvent;
+                }
+            };
+            this.handleDragEnd = function (pev) {
+                var _a = _this, receivingContext = _a.receivingContext, droppableEvent = _a.droppableEvent;
+                _this.clearDrag();
+                if (receivingContext && droppableEvent) {
+                    var finalHit = _this.hitDragging.finalHit;
+                    var finalView = finalHit.context.viewApi;
+                    var dragMeta = _this.dragMeta;
+                    receivingContext.emitter.trigger('drop', __assign(__assign({}, buildDatePointApiWithContext(finalHit.dateSpan, receivingContext)), { draggedEl: pev.subjectEl, jsEvent: pev.origEvent, view: finalView }));
+                    if (dragMeta.create) {
+                        var addingEvents_1 = eventTupleToStore(droppableEvent);
+                        receivingContext.dispatch({
+                            type: 'MERGE_EVENTS',
+                            eventStore: addingEvents_1,
+                        });
+                        if (pev.isTouch) {
+                            receivingContext.dispatch({
+                                type: 'SELECT_EVENT',
+                                eventInstanceId: droppableEvent.instance.instanceId,
+                            });
+                        }
+                        // signal that an external event landed
+                        receivingContext.emitter.trigger('eventReceive', {
+                            event: new EventApi(receivingContext, droppableEvent.def, droppableEvent.instance),
+                            relatedEvents: [],
+                            revert: function () {
+                                receivingContext.dispatch({
+                                    type: 'REMOVE_EVENTS',
+                                    eventStore: addingEvents_1,
+                                });
+                            },
+                            draggedEl: pev.subjectEl,
+                            view: finalView,
+                        });
+                    }
+                }
+                _this.receivingContext = null;
+                _this.droppableEvent = null;
+            };
+            var hitDragging = this.hitDragging = new HitDragging(dragging, interactionSettingsStore);
+            hitDragging.requireInitial = false; // will start outside of a component
+            hitDragging.emitter.on('dragstart', this.handleDragStart);
+            hitDragging.emitter.on('hitupdate', this.handleHitUpdate);
+            hitDragging.emitter.on('dragend', this.handleDragEnd);
+            this.suppliedDragMeta = suppliedDragMeta;
+        }
+        ExternalElementDragging.prototype.buildDragMeta = function (subjectEl) {
+            if (typeof this.suppliedDragMeta === 'object') {
+                return parseDragMeta(this.suppliedDragMeta);
+            }
+            if (typeof this.suppliedDragMeta === 'function') {
+                return parseDragMeta(this.suppliedDragMeta(subjectEl));
+            }
+            return getDragMetaFromEl(subjectEl);
+        };
+        ExternalElementDragging.prototype.displayDrag = function (nextContext, state) {
+            var prevContext = this.receivingContext;
+            if (prevContext && prevContext !== nextContext) {
+                prevContext.dispatch({ type: 'UNSET_EVENT_DRAG' });
+            }
+            if (nextContext) {
+                nextContext.dispatch({ type: 'SET_EVENT_DRAG', state: state });
+            }
+        };
+        ExternalElementDragging.prototype.clearDrag = function () {
+            if (this.receivingContext) {
+                this.receivingContext.dispatch({ type: 'UNSET_EVENT_DRAG' });
+            }
+        };
+        ExternalElementDragging.prototype.canDropElOnCalendar = function (el, receivingContext) {
+            var dropAccept = receivingContext.options.dropAccept;
+            if (typeof dropAccept === 'function') {
+                return dropAccept.call(receivingContext.calendarApi, el);
+            }
+            if (typeof dropAccept === 'string' && dropAccept) {
+                return Boolean(elementMatches(el, dropAccept));
+            }
+            return true;
+        };
+        return ExternalElementDragging;
+    }());
+    // Utils for computing event store from the DragMeta
+    // ----------------------------------------------------------------------------------------------------
+    function computeEventForDateSpan(dateSpan, dragMeta, context) {
+        var defProps = __assign({}, dragMeta.leftoverProps);
+        for (var _i = 0, _a = context.pluginHooks.externalDefTransforms; _i < _a.length; _i++) {
+            var transform = _a[_i];
+            __assign(defProps, transform(dateSpan, dragMeta));
+        }
+        var _b = refineEventDef(defProps, context), refined = _b.refined, extra = _b.extra;
+        var def = parseEventDef(refined, extra, dragMeta.sourceId, dateSpan.allDay, context.options.forceEventDuration || Boolean(dragMeta.duration), // hasEnd
+        context);
+        var start = dateSpan.range.start;
+        // only rely on time info if drop zone is all-day,
+        // otherwise, we already know the time
+        if (dateSpan.allDay && dragMeta.startTime) {
+            start = context.dateEnv.add(start, dragMeta.startTime);
+        }
+        var end = dragMeta.duration ?
+            context.dateEnv.add(start, dragMeta.duration) :
+            getDefaultEventEnd(dateSpan.allDay, start, context);
+        var instance = createEventInstance(def.defId, { start: start, end: end });
+        return { def: def, instance: instance };
+    }
+    // Utils for extracting data from element
+    // ----------------------------------------------------------------------------------------------------
+    function getDragMetaFromEl(el) {
+        var str = getEmbeddedElData(el, 'event');
+        var obj = str ?
+            JSON.parse(str) :
+            { create: false }; // if no embedded data, assume no event creation
+        return parseDragMeta(obj);
+    }
+    config.dataAttrPrefix = '';
+    function getEmbeddedElData(el, name) {
+        var prefix = config.dataAttrPrefix;
+        var prefixedName = (prefix ? prefix + '-' : '') + name;
+        return el.getAttribute('data-' + prefixedName) || '';
+    }
+
+    /*
+    Makes an element (that is *external* to any calendar) draggable.
+    Can pass in data that determines how an event will be created when dropped onto a calendar.
+    Leverages FullCalendar's internal drag-n-drop functionality WITHOUT a third-party drag system.
+    */
+    var ExternalDraggable = /** @class */ (function () {
+        function ExternalDraggable(el, settings) {
+            var _this = this;
+            if (settings === void 0) { settings = {}; }
+            this.handlePointerDown = function (ev) {
+                var dragging = _this.dragging;
+                var _a = _this.settings, minDistance = _a.minDistance, longPressDelay = _a.longPressDelay;
+                dragging.minDistance =
+                    minDistance != null ?
+                        minDistance :
+                        (ev.isTouch ? 0 : BASE_OPTION_DEFAULTS.eventDragMinDistance);
+                dragging.delay =
+                    ev.isTouch ? // TODO: eventually read eventLongPressDelay instead vvv
+                        (longPressDelay != null ? longPressDelay : BASE_OPTION_DEFAULTS.longPressDelay) :
+                        0;
+            };
+            this.handleDragStart = function (ev) {
+                if (ev.isTouch &&
+                    _this.dragging.delay &&
+                    ev.subjectEl.classList.contains('fc-event')) {
+                    _this.dragging.mirror.getMirrorEl().classList.add('fc-event-selected');
+                }
+            };
+            this.settings = settings;
+            var dragging = this.dragging = new FeaturefulElementDragging(el);
+            dragging.touchScrollAllowed = false;
+            if (settings.itemSelector != null) {
+                dragging.pointer.selector = settings.itemSelector;
+            }
+            if (settings.appendTo != null) {
+                dragging.mirror.parentNode = settings.appendTo; // TODO: write tests
+            }
+            dragging.emitter.on('pointerdown', this.handlePointerDown);
+            dragging.emitter.on('dragstart', this.handleDragStart);
+            new ExternalElementDragging(dragging, settings.eventData); // eslint-disable-line no-new
+        }
+        ExternalDraggable.prototype.destroy = function () {
+            this.dragging.destroy();
+        };
+        return ExternalDraggable;
+    }());
+
+    /*
+    Detects when a *THIRD-PARTY* drag-n-drop system interacts with elements.
+    The third-party system is responsible for drawing the visuals effects of the drag.
+    This class simply monitors for pointer movements and fires events.
+    It also has the ability to hide the moving element (the "mirror") during the drag.
+    */
+    var InferredElementDragging = /** @class */ (function (_super) {
+        __extends(InferredElementDragging, _super);
+        function InferredElementDragging(containerEl) {
+            var _this = _super.call(this, containerEl) || this;
+            _this.shouldIgnoreMove = false;
+            _this.mirrorSelector = '';
+            _this.currentMirrorEl = null;
+            _this.handlePointerDown = function (ev) {
+                _this.emitter.trigger('pointerdown', ev);
+                if (!_this.shouldIgnoreMove) {
+                    // fire dragstart right away. does not support delay or min-distance
+                    _this.emitter.trigger('dragstart', ev);
+                }
+            };
+            _this.handlePointerMove = function (ev) {
+                if (!_this.shouldIgnoreMove) {
+                    _this.emitter.trigger('dragmove', ev);
+                }
+            };
+            _this.handlePointerUp = function (ev) {
+                _this.emitter.trigger('pointerup', ev);
+                if (!_this.shouldIgnoreMove) {
+                    // fire dragend right away. does not support a revert animation
+                    _this.emitter.trigger('dragend', ev);
+                }
+            };
+            var pointer = _this.pointer = new PointerDragging(containerEl);
+            pointer.emitter.on('pointerdown', _this.handlePointerDown);
+            pointer.emitter.on('pointermove', _this.handlePointerMove);
+            pointer.emitter.on('pointerup', _this.handlePointerUp);
+            return _this;
+        }
+        InferredElementDragging.prototype.destroy = function () {
+            this.pointer.destroy();
+        };
+        InferredElementDragging.prototype.setIgnoreMove = function (bool) {
+            this.shouldIgnoreMove = bool;
+        };
+        InferredElementDragging.prototype.setMirrorIsVisible = function (bool) {
+            if (bool) {
+                // restore a previously hidden element.
+                // use the reference in case the selector class has already been removed.
+                if (this.currentMirrorEl) {
+                    this.currentMirrorEl.style.visibility = '';
+                    this.currentMirrorEl = null;
+                }
+            }
+            else {
+                var mirrorEl = this.mirrorSelector
+                    // TODO: somehow query FullCalendars WITHIN shadow-roots
+                    ? document.querySelector(this.mirrorSelector)
+                    : null;
+                if (mirrorEl) {
+                    this.currentMirrorEl = mirrorEl;
+                    mirrorEl.style.visibility = 'hidden';
+                }
+            }
+        };
+        return InferredElementDragging;
+    }(ElementDragging));
+
+    /*
+    Bridges third-party drag-n-drop systems with FullCalendar.
+    Must be instantiated and destroyed by caller.
+    */
+    var ThirdPartyDraggable = /** @class */ (function () {
+        function ThirdPartyDraggable(containerOrSettings, settings) {
+            var containerEl = document;
+            if (
+            // wish we could just test instanceof EventTarget, but doesn't work in IE11
+            containerOrSettings === document ||
+                containerOrSettings instanceof Element) {
+                containerEl = containerOrSettings;
+                settings = settings || {};
+            }
+            else {
+                settings = (containerOrSettings || {});
+            }
+            var dragging = this.dragging = new InferredElementDragging(containerEl);
+            if (typeof settings.itemSelector === 'string') {
+                dragging.pointer.selector = settings.itemSelector;
+            }
+            else if (containerEl === document) {
+                dragging.pointer.selector = '[data-event]';
+            }
+            if (typeof settings.mirrorSelector === 'string') {
+                dragging.mirrorSelector = settings.mirrorSelector;
+            }
+            new ExternalElementDragging(dragging, settings.eventData); // eslint-disable-line no-new
+        }
+        ThirdPartyDraggable.prototype.destroy = function () {
+            this.dragging.destroy();
+        };
+        return ThirdPartyDraggable;
+    }());
+
+    var interactionPlugin = createPlugin({
+        componentInteractions: [DateClicking, DateSelecting, EventDragging, EventResizing],
+        calendarInteractions: [UnselectAuto],
+        elementDraggingImpl: FeaturefulElementDragging,
+        optionRefiners: OPTION_REFINERS$3,
+        listenerRefiners: LISTENER_REFINERS,
+    });
+
+    /* An abstract class for the daygrid views, as well as month view. Renders one or more rows of day cells.
+    ----------------------------------------------------------------------------------------------------------------------*/
+    // It is a manager for a Table subcomponent, which does most of the heavy lifting.
+    // It is responsible for managing width/height.
+    var TableView = /** @class */ (function (_super) {
+        __extends(TableView, _super);
+        function TableView() {
+            var _this = _super !== null && _super.apply(this, arguments) || this;
+            _this.headerElRef = createRef();
+            return _this;
+        }
+        TableView.prototype.renderSimpleLayout = function (headerRowContent, bodyContent) {
+            var _a = this, props = _a.props, context = _a.context;
+            var sections = [];
+            var stickyHeaderDates = getStickyHeaderDates(context.options);
+            if (headerRowContent) {
+                sections.push({
+                    type: 'header',
+                    key: 'header',
+                    isSticky: stickyHeaderDates,
+                    chunk: {
+                        elRef: this.headerElRef,
+                        tableClassName: 'fc-col-header',
+                        rowContent: headerRowContent,
+                    },
+                });
+            }
+            sections.push({
+                type: 'body',
+                key: 'body',
+                liquid: true,
+                chunk: { content: bodyContent },
+            });
+            return (createElement(ViewRoot, { viewSpec: context.viewSpec }, function (rootElRef, classNames) { return (createElement("div", { ref: rootElRef, className: ['fc-daygrid'].concat(classNames).join(' ') },
+                createElement(SimpleScrollGrid, { liquid: !props.isHeightAuto && !props.forPrint, collapsibleWidth: props.forPrint, cols: [] /* TODO: make optional? */, sections: sections }))); }));
+        };
+        TableView.prototype.renderHScrollLayout = function (headerRowContent, bodyContent, colCnt, dayMinWidth) {
+            var ScrollGrid = this.context.pluginHooks.scrollGridImpl;
+            if (!ScrollGrid) {
+                throw new Error('No ScrollGrid implementation');
+            }
+            var _a = this, props = _a.props, context = _a.context;
+            var stickyHeaderDates = !props.forPrint && getStickyHeaderDates(context.options);
+            var stickyFooterScrollbar = !props.forPrint && getStickyFooterScrollbar(context.options);
+            var sections = [];
+            if (headerRowContent) {
+                sections.push({
+                    type: 'header',
+                    key: 'header',
+                    isSticky: stickyHeaderDates,
+                    chunks: [{
+                            key: 'main',
+                            elRef: this.headerElRef,
+                            tableClassName: 'fc-col-header',
+                            rowContent: headerRowContent,
+                        }],
+                });
+            }
+            sections.push({
+                type: 'body',
+                key: 'body',
+                liquid: true,
+                chunks: [{
+                        key: 'main',
+                        content: bodyContent,
+                    }],
+            });
+            if (stickyFooterScrollbar) {
+                sections.push({
+                    type: 'footer',
+                    key: 'footer',
+                    isSticky: true,
+                    chunks: [{
+                            key: 'main',
+                            content: renderScrollShim,
+                        }],
+                });
+            }
+            return (createElement(ViewRoot, { viewSpec: context.viewSpec }, function (rootElRef, classNames) { return (createElement("div", { ref: rootElRef, className: ['fc-daygrid'].concat(classNames).join(' ') },
+                createElement(ScrollGrid, { liquid: !props.isHeightAuto && !props.forPrint, collapsibleWidth: props.forPrint, colGroups: [{ cols: [{ span: colCnt, minWidth: dayMinWidth }] }], sections: sections }))); }));
+        };
+        return TableView;
+    }(DateComponent));
+
+    function splitSegsByRow(segs, rowCnt) {
+        var byRow = [];
+        for (var i = 0; i < rowCnt; i += 1) {
+            byRow[i] = [];
+        }
+        for (var _i = 0, segs_1 = segs; _i < segs_1.length; _i++) {
+            var seg = segs_1[_i];
+            byRow[seg.row].push(seg);
+        }
+        return byRow;
+    }
+    function splitSegsByFirstCol(segs, colCnt) {
+        var byCol = [];
+        for (var i = 0; i < colCnt; i += 1) {
+            byCol[i] = [];
+        }
+        for (var _i = 0, segs_2 = segs; _i < segs_2.length; _i++) {
+            var seg = segs_2[_i];
+            byCol[seg.firstCol].push(seg);
+        }
+        return byCol;
+    }
+    function splitInteractionByRow(ui, rowCnt) {
+        var byRow = [];
+        if (!ui) {
+            for (var i = 0; i < rowCnt; i += 1) {
+                byRow[i] = null;
+            }
+        }
+        else {
+            for (var i = 0; i < rowCnt; i += 1) {
+                byRow[i] = {
+                    affectedInstances: ui.affectedInstances,
+                    isEvent: ui.isEvent,
+                    segs: [],
+                };
+            }
+            for (var _i = 0, _a = ui.segs; _i < _a.length; _i++) {
+                var seg = _a[_i];
+                byRow[seg.row].segs.push(seg);
+            }
+        }
+        return byRow;
+    }
+
+    var TableCellTop = /** @class */ (function (_super) {
+        __extends(TableCellTop, _super);
+        function TableCellTop() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        TableCellTop.prototype.render = function () {
+            var props = this.props;
+            var navLinkAttrs = this.context.options.navLinks
+                ? { 'data-navlink': buildNavLinkData(props.date), tabIndex: 0 }
+                : {};
+            return (createElement(DayCellContent, { date: props.date, dateProfile: props.dateProfile, todayRange: props.todayRange, showDayNumber: props.showDayNumber, extraHookProps: props.extraHookProps, defaultContent: renderTopInner }, function (innerElRef, innerContent) { return ((innerContent || props.forceDayTop) && (createElement("div", { className: "fc-daygrid-day-top", ref: innerElRef },
+                createElement("a", __assign({ className: "fc-daygrid-day-number" }, navLinkAttrs), innerContent || createElement(Fragment, null, "\u00A0"))))); }));
+        };
+        return TableCellTop;
+    }(BaseComponent));
+    function renderTopInner(props) {
+        return props.dayNumberText;
+    }
+
+    var DEFAULT_TABLE_EVENT_TIME_FORMAT = createFormatter({
+        hour: 'numeric',
+        minute: '2-digit',
+        omitZeroMinute: true,
+        meridiem: 'narrow',
+    });
+    function hasListItemDisplay(seg) {
+        var display = seg.eventRange.ui.display;
+        return display === 'list-item' || (display === 'auto' &&
+            !seg.eventRange.def.allDay &&
+            seg.firstCol === seg.lastCol && // can't be multi-day
+            seg.isStart && // "
+            seg.isEnd // "
+        );
+    }
+
+    var TableBlockEvent = /** @class */ (function (_super) {
+        __extends(TableBlockEvent, _super);
+        function TableBlockEvent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        TableBlockEvent.prototype.render = function () {
+            var props = this.props;
+            return (createElement(StandardEvent, __assign({}, props, { extraClassNames: ['fc-daygrid-event', 'fc-daygrid-block-event', 'fc-h-event'], defaultTimeFormat: DEFAULT_TABLE_EVENT_TIME_FORMAT, defaultDisplayEventEnd: props.defaultDisplayEventEnd, disableResizing: !props.seg.eventRange.def.allDay })));
+        };
+        return TableBlockEvent;
+    }(BaseComponent));
+
+    var TableListItemEvent = /** @class */ (function (_super) {
+        __extends(TableListItemEvent, _super);
+        function TableListItemEvent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        TableListItemEvent.prototype.render = function () {
+            var _a = this, props = _a.props, context = _a.context;
+            var timeFormat = context.options.eventTimeFormat || DEFAULT_TABLE_EVENT_TIME_FORMAT;
+            var timeText = buildSegTimeText(props.seg, timeFormat, context, true, props.defaultDisplayEventEnd);
+            return (createElement(EventRoot, { seg: props.seg, timeText: timeText, defaultContent: renderInnerContent$2, isDragging: props.isDragging, isResizing: false, isDateSelecting: false, isSelected: props.isSelected, isPast: props.isPast, isFuture: props.isFuture, isToday: props.isToday }, function (rootElRef, classNames, innerElRef, innerContent) { return ( // we don't use styles!
+            createElement("a", __assign({ className: ['fc-daygrid-event', 'fc-daygrid-dot-event'].concat(classNames).join(' '), ref: rootElRef }, getSegAnchorAttrs(props.seg)), innerContent)); }));
+        };
+        return TableListItemEvent;
+    }(BaseComponent));
+    function renderInnerContent$2(innerProps) {
+        return (createElement(Fragment, null,
+            createElement("div", { className: "fc-daygrid-event-dot", style: { borderColor: innerProps.borderColor || innerProps.backgroundColor } }),
+            innerProps.timeText && (createElement("div", { className: "fc-event-time" }, innerProps.timeText)),
+            createElement("div", { className: "fc-event-title" }, innerProps.event.title || createElement(Fragment, null, "\u00A0"))));
+    }
+    function getSegAnchorAttrs(seg) {
+        var url = seg.eventRange.def.url;
+        return url ? { href: url } : {};
+    }
+
+    var TableCellMoreLink = /** @class */ (function (_super) {
+        __extends(TableCellMoreLink, _super);
+        function TableCellMoreLink() {
+            var _this = _super !== null && _super.apply(this, arguments) || this;
+            _this.compileSegs = memoize(compileSegs);
+            return _this;
+        }
+        TableCellMoreLink.prototype.render = function () {
+            var props = this.props;
+            var _a = this.compileSegs(props.singlePlacements), allSegs = _a.allSegs, invisibleSegs = _a.invisibleSegs;
+            return (createElement(MoreLinkRoot, { dateProfile: props.dateProfile, todayRange: props.todayRange, allDayDate: props.allDayDate, moreCnt: props.moreCnt, allSegs: allSegs, hiddenSegs: invisibleSegs, alignmentElRef: props.alignmentElRef, alignGridTop: props.alignGridTop, extraDateSpan: props.extraDateSpan, popoverContent: function () {
+                    var isForcedInvisible = (props.eventDrag ? props.eventDrag.affectedInstances : null) ||
+                        (props.eventResize ? props.eventResize.affectedInstances : null) ||
+                        {};
+                    return (createElement(Fragment, null, allSegs.map(function (seg) {
+                        var instanceId = seg.eventRange.instance.instanceId;
+                        return (createElement("div", { className: "fc-daygrid-event-harness", key: instanceId, style: {
+                                visibility: isForcedInvisible[instanceId] ? 'hidden' : '',
+                            } }, hasListItemDisplay(seg) ? (createElement(TableListItemEvent, __assign({ seg: seg, isDragging: false, isSelected: instanceId === props.eventSelection, defaultDisplayEventEnd: false }, getSegMeta(seg, props.todayRange)))) : (createElement(TableBlockEvent, __assign({ seg: seg, isDragging: false, isResizing: false, isDateSelecting: false, isSelected: instanceId === props.eventSelection, defaultDisplayEventEnd: false }, getSegMeta(seg, props.todayRange))))));
+                    })));
+                } }, function (rootElRef, classNames, innerElRef, innerContent, handleClick) { return (createElement("a", { ref: rootElRef, className: ['fc-daygrid-more-link'].concat(classNames).join(' '), onClick: handleClick }, innerContent)); }));
+        };
+        return TableCellMoreLink;
+    }(BaseComponent));
+    function compileSegs(singlePlacements) {
+        var allSegs = [];
+        var invisibleSegs = [];
+        for (var _i = 0, singlePlacements_1 = singlePlacements; _i < singlePlacements_1.length; _i++) {
+            var placement = singlePlacements_1[_i];
+            allSegs.push(placement.seg);
+            if (!placement.isVisible) {
+                invisibleSegs.push(placement.seg);
+            }
+        }
+        return { allSegs: allSegs, invisibleSegs: invisibleSegs };
+    }
+
+    var DEFAULT_WEEK_NUM_FORMAT$1 = createFormatter({ week: 'narrow' });
+    var TableCell = /** @class */ (function (_super) {
+        __extends(TableCell, _super);
+        function TableCell() {
+            var _this = _super !== null && _super.apply(this, arguments) || this;
+            _this.rootElRef = createRef();
+            _this.handleRootEl = function (el) {
+                setRef(_this.rootElRef, el);
+                setRef(_this.props.elRef, el);
+            };
+            return _this;
+        }
+        TableCell.prototype.render = function () {
+            var _a = this, props = _a.props, context = _a.context, rootElRef = _a.rootElRef;
+            var options = context.options;
+            var date = props.date, dateProfile = props.dateProfile;
+            var navLinkAttrs = options.navLinks
+                ? { 'data-navlink': buildNavLinkData(date, 'week'), tabIndex: 0 }
+                : {};
+            return (createElement(DayCellRoot, { date: date, dateProfile: dateProfile, todayRange: props.todayRange, showDayNumber: props.showDayNumber, extraHookProps: props.extraHookProps, elRef: this.handleRootEl }, function (dayElRef, dayClassNames, rootDataAttrs, isDisabled) { return (createElement("td", __assign({ ref: dayElRef, className: ['fc-daygrid-day'].concat(dayClassNames, props.extraClassNames || []).join(' ') }, rootDataAttrs, props.extraDataAttrs),
+                createElement("div", { className: "fc-daygrid-day-frame fc-scrollgrid-sync-inner", ref: props.innerElRef /* different from hook system! RENAME */ },
+                    props.showWeekNumber && (createElement(WeekNumberRoot, { date: date, defaultFormat: DEFAULT_WEEK_NUM_FORMAT$1 }, function (weekElRef, weekClassNames, innerElRef, innerContent) { return (createElement("a", __assign({ ref: weekElRef, className: ['fc-daygrid-week-number'].concat(weekClassNames).join(' ') }, navLinkAttrs), innerContent)); })),
+                    !isDisabled && (createElement(TableCellTop, { date: date, dateProfile: dateProfile, showDayNumber: props.showDayNumber, forceDayTop: props.forceDayTop, todayRange: props.todayRange, extraHookProps: props.extraHookProps })),
+                    createElement("div", { className: "fc-daygrid-day-events", ref: props.fgContentElRef },
+                        props.fgContent,
+                        createElement("div", { className: "fc-daygrid-day-bottom", style: { marginTop: props.moreMarginTop } },
+                            createElement(TableCellMoreLink, { allDayDate: date, singlePlacements: props.singlePlacements, moreCnt: props.moreCnt, alignmentElRef: rootElRef, alignGridTop: !props.showDayNumber, extraDateSpan: props.extraDateSpan, dateProfile: props.dateProfile, eventSelection: props.eventSelection, eventDrag: props.eventDrag, eventResize: props.eventResize, todayRange: props.todayRange }))),
+                    createElement("div", { className: "fc-daygrid-day-bg" }, props.bgContent)))); }));
+        };
+        return TableCell;
+    }(DateComponent));
+
+    function computeFgSegPlacement(segs, // assumed already sorted
+    dayMaxEvents, dayMaxEventRows, strictOrder, eventInstanceHeights, maxContentHeight, cells) {
+        var hierarchy = new DayGridSegHierarchy();
+        hierarchy.allowReslicing = true;
+        hierarchy.strictOrder = strictOrder;
+        if (dayMaxEvents === true || dayMaxEventRows === true) {
+            hierarchy.maxCoord = maxContentHeight;
+            hierarchy.hiddenConsumes = true;
+        }
+        else if (typeof dayMaxEvents === 'number') {
+            hierarchy.maxStackCnt = dayMaxEvents;
+        }
+        else if (typeof dayMaxEventRows === 'number') {
+            hierarchy.maxStackCnt = dayMaxEventRows;
+            hierarchy.hiddenConsumes = true;
+        }
+        // create segInputs only for segs with known heights
+        var segInputs = [];
+        var unknownHeightSegs = [];
+        for (var i = 0; i < segs.length; i += 1) {
+            var seg = segs[i];
+            var instanceId = seg.eventRange.instance.instanceId;
+            var eventHeight = eventInstanceHeights[instanceId];
+            if (eventHeight != null) {
+                segInputs.push({
+                    index: i,
+                    thickness: eventHeight,
+                    span: {
+                        start: seg.firstCol,
+                        end: seg.lastCol + 1,
+                    },
+                });
+            }
+            else {
+                unknownHeightSegs.push(seg);
+            }
+        }
+        var hiddenEntries = hierarchy.addSegs(segInputs);
+        var segRects = hierarchy.toRects();
+        var _a = placeRects(segRects, segs, cells), singleColPlacements = _a.singleColPlacements, multiColPlacements = _a.multiColPlacements, leftoverMargins = _a.leftoverMargins;
+        var moreCnts = [];
+        var moreMarginTops = [];
+        // add segs with unknown heights
+        for (var _i = 0, unknownHeightSegs_1 = unknownHeightSegs; _i < unknownHeightSegs_1.length; _i++) {
+            var seg = unknownHeightSegs_1[_i];
+            multiColPlacements[seg.firstCol].push({
+                seg: seg,
+                isVisible: false,
+                isAbsolute: true,
+                absoluteTop: 0,
+                marginTop: 0,
+            });
+            for (var col = seg.firstCol; col <= seg.lastCol; col += 1) {
+                singleColPlacements[col].push({
+                    seg: resliceSeg(seg, col, col + 1, cells),
+                    isVisible: false,
+                    isAbsolute: false,
+                    absoluteTop: 0,
+                    marginTop: 0,
+                });
+            }
+        }
+        // add the hidden entries
+        for (var col = 0; col < cells.length; col += 1) {
+            moreCnts.push(0);
+        }
+        for (var _b = 0, hiddenEntries_1 = hiddenEntries; _b < hiddenEntries_1.length; _b++) {
+            var hiddenEntry = hiddenEntries_1[_b];
+            var seg = segs[hiddenEntry.index];
+            var hiddenSpan = hiddenEntry.span;
+            multiColPlacements[hiddenSpan.start].push({
+                seg: resliceSeg(seg, hiddenSpan.start, hiddenSpan.end, cells),
+                isVisible: false,
+                isAbsolute: true,
+                absoluteTop: 0,
+                marginTop: 0,
+            });
+            for (var col = hiddenSpan.start; col < hiddenSpan.end; col += 1) {
+                moreCnts[col] += 1;
+                singleColPlacements[col].push({
+                    seg: resliceSeg(seg, col, col + 1, cells),
+                    isVisible: false,
+                    isAbsolute: false,
+                    absoluteTop: 0,
+                    marginTop: 0,
+                });
+            }
+        }
+        // deal with leftover margins
+        for (var col = 0; col < cells.length; col += 1) {
+            moreMarginTops.push(leftoverMargins[col]);
+        }
+        return { singleColPlacements: singleColPlacements, multiColPlacements: multiColPlacements, moreCnts: moreCnts, moreMarginTops: moreMarginTops };
+    }
+    // rects ordered by top coord, then left
+    function placeRects(allRects, segs, cells) {
+        var rectsByEachCol = groupRectsByEachCol(allRects, cells.length);
+        var singleColPlacements = [];
+        var multiColPlacements = [];
+        var leftoverMargins = [];
+        for (var col = 0; col < cells.length; col += 1) {
+            var rects = rectsByEachCol[col];
+            // compute all static segs in singlePlacements
+            var singlePlacements = [];
+            var currentHeight = 0;
+            var currentMarginTop = 0;
+            for (var _i = 0, rects_1 = rects; _i < rects_1.length; _i++) {
+                var rect = rects_1[_i];
+                var seg = segs[rect.index];
+                singlePlacements.push({
+                    seg: resliceSeg(seg, col, col + 1, cells),
+                    isVisible: true,
+                    isAbsolute: false,
+                    absoluteTop: rect.levelCoord,
+                    marginTop: rect.levelCoord - currentHeight,
+                });
+                currentHeight = rect.levelCoord + rect.thickness;
+            }
+            // compute mixed static/absolute segs in multiPlacements
+            var multiPlacements = [];
+            currentHeight = 0;
+            currentMarginTop = 0;
+            for (var _a = 0, rects_2 = rects; _a < rects_2.length; _a++) {
+                var rect = rects_2[_a];
+                var seg = segs[rect.index];
+                var isAbsolute = rect.span.end - rect.span.start > 1; // multi-column?
+                var isFirstCol = rect.span.start === col;
+                currentMarginTop += rect.levelCoord - currentHeight; // amount of space since bottom of previous seg
+                currentHeight = rect.levelCoord + rect.thickness; // height will now be bottom of current seg
+                if (isAbsolute) {
+                    currentMarginTop += rect.thickness;
+                    if (isFirstCol) {
+                        multiPlacements.push({
+                            seg: resliceSeg(seg, rect.span.start, rect.span.end, cells),
+                            isVisible: true,
+                            isAbsolute: true,
+                            absoluteTop: rect.levelCoord,
+                            marginTop: 0,
+                        });
+                    }
+                }
+                else if (isFirstCol) {
+                    multiPlacements.push({
+                        seg: resliceSeg(seg, rect.span.start, rect.span.end, cells),
+                        isVisible: true,
+                        isAbsolute: false,
+                        absoluteTop: rect.levelCoord,
+                        marginTop: currentMarginTop, // claim the margin
+                    });
+                    currentMarginTop = 0;
+                }
+            }
+            singleColPlacements.push(singlePlacements);
+            multiColPlacements.push(multiPlacements);
+            leftoverMargins.push(currentMarginTop);
+        }
+        return { singleColPlacements: singleColPlacements, multiColPlacements: multiColPlacements, leftoverMargins: leftoverMargins };
+    }
+    function groupRectsByEachCol(rects, colCnt) {
+        var rectsByEachCol = [];
+        for (var col = 0; col < colCnt; col += 1) {
+            rectsByEachCol.push([]);
+        }
+        for (var _i = 0, rects_3 = rects; _i < rects_3.length; _i++) {
+            var rect = rects_3[_i];
+            for (var col = rect.span.start; col < rect.span.end; col += 1) {
+                rectsByEachCol[col].push(rect);
+            }
+        }
+        return rectsByEachCol;
+    }
+    function resliceSeg(seg, spanStart, spanEnd, cells) {
+        if (seg.firstCol === spanStart && seg.lastCol === spanEnd - 1) {
+            return seg;
+        }
+        var eventRange = seg.eventRange;
+        var origRange = eventRange.range;
+        var slicedRange = intersectRanges(origRange, {
+            start: cells[spanStart].date,
+            end: addDays(cells[spanEnd - 1].date, 1),
+        });
+        return __assign(__assign({}, seg), { firstCol: spanStart, lastCol: spanEnd - 1, eventRange: {
+                def: eventRange.def,
+                ui: __assign(__assign({}, eventRange.ui), { durationEditable: false }),
+                instance: eventRange.instance,
+                range: slicedRange,
+            }, isStart: seg.isStart && slicedRange.start.valueOf() === origRange.start.valueOf(), isEnd: seg.isEnd && slicedRange.end.valueOf() === origRange.end.valueOf() });
+    }
+    var DayGridSegHierarchy = /** @class */ (function (_super) {
+        __extends(DayGridSegHierarchy, _super);
+        function DayGridSegHierarchy() {
+            var _this = _super !== null && _super.apply(this, arguments) || this;
+            // config
+            _this.hiddenConsumes = false;
+            // allows us to keep hidden entries in the hierarchy so they take up space
+            _this.forceHidden = {};
+            return _this;
+        }
+        DayGridSegHierarchy.prototype.addSegs = function (segInputs) {
+            var _this = this;
+            var hiddenSegs = _super.prototype.addSegs.call(this, segInputs);
+            var entriesByLevel = this.entriesByLevel;
+            var excludeHidden = function (entry) { return !_this.forceHidden[buildEntryKey(entry)]; };
+            // remove the forced-hidden segs
+            for (var level = 0; level < entriesByLevel.length; level += 1) {
+                entriesByLevel[level] = entriesByLevel[level].filter(excludeHidden);
+            }
+            return hiddenSegs;
+        };
+        DayGridSegHierarchy.prototype.handleInvalidInsertion = function (insertion, entry, hiddenEntries) {
+            var _a = this, entriesByLevel = _a.entriesByLevel, forceHidden = _a.forceHidden;
+            var touchingEntry = insertion.touchingEntry, touchingLevel = insertion.touchingLevel, touchingLateral = insertion.touchingLateral;
+            if (this.hiddenConsumes && touchingEntry) {
+                var touchingEntryId = buildEntryKey(touchingEntry);
+                // if not already hidden
+                if (!forceHidden[touchingEntryId]) {
+                    if (this.allowReslicing) {
+                        var placeholderEntry = __assign(__assign({}, touchingEntry), { span: intersectSpans(touchingEntry.span, entry.span) });
+                        var placeholderEntryId = buildEntryKey(placeholderEntry);
+                        forceHidden[placeholderEntryId] = true;
+                        entriesByLevel[touchingLevel][touchingLateral] = placeholderEntry; // replace touchingEntry with our placeholder
+                        this.splitEntry(touchingEntry, entry, hiddenEntries); // split up the touchingEntry, reinsert it
+                    }
+                    else {
+                        forceHidden[touchingEntryId] = true;
+                        hiddenEntries.push(touchingEntry);
+                    }
+                }
+            }
+            return _super.prototype.handleInvalidInsertion.call(this, insertion, entry, hiddenEntries);
+        };
+        return DayGridSegHierarchy;
+    }(SegHierarchy));
+
+    var TableRow = /** @class */ (function (_super) {
+        __extends(TableRow, _super);
+        function TableRow() {
+            var _this = _super !== null && _super.apply(this, arguments) || this;
+            _this.cellElRefs = new RefMap(); // the ?
+                    createElement("tr", { className: "fc-scrollgrid-section" },
+                        createElement("td", { className: 'fc-timegrid-divider ' + context.theme.getClass('tableCellShaded') }))),
+                });
+            }
+            sections.push({
+                type: 'body',
+                key: 'body',
+                liquid: true,
+                expandRows: Boolean(context.options.expandRows),
+                chunk: {
+                    scrollerElRef: this.scrollerElRef,
+                    content: timeContent,
+                },
+            });
+            return (createElement(ViewRoot, { viewSpec: context.viewSpec, elRef: this.rootElRef }, function (rootElRef, classNames) { return (createElement("div", { className: ['fc-timegrid'].concat(classNames).join(' '), ref: rootElRef },
+                createElement(SimpleScrollGrid, { liquid: !props.isHeightAuto && !props.forPrint, collapsibleWidth: props.forPrint, cols: [{ width: 'shrink' }], sections: sections }))); }));
+        };
+        TimeColsView.prototype.renderHScrollLayout = function (headerRowContent, allDayContent, timeContent, colCnt, dayMinWidth, slatMetas, slatCoords) {
+            var _this = this;
+            var ScrollGrid = this.context.pluginHooks.scrollGridImpl;
+            if (!ScrollGrid) {
+                throw new Error('No ScrollGrid implementation');
+            }
+            var _a = this, context = _a.context, props = _a.props;
+            var stickyHeaderDates = !props.forPrint && getStickyHeaderDates(context.options);
+            var stickyFooterScrollbar = !props.forPrint && getStickyFooterScrollbar(context.options);
+            var sections = [];
+            if (headerRowContent) {
+                sections.push({
+                    type: 'header',
+                    key: 'header',
+                    isSticky: stickyHeaderDates,
+                    syncRowHeights: true,
+                    chunks: [
+                        {
+                            key: 'axis',
+                            rowContent: function (arg) { return (createElement("tr", null, _this.renderHeadAxis('day', arg.rowSyncHeights[0]))); },
+                        },
+                        {
+                            key: 'cols',
+                            elRef: this.headerElRef,
+                            tableClassName: 'fc-col-header',
+                            rowContent: headerRowContent,
+                        },
+                    ],
+                });
+            }
+            if (allDayContent) {
+                sections.push({
+                    type: 'body',
+                    key: 'all-day',
+                    syncRowHeights: true,
+                    chunks: [
+                        {
+                            key: 'axis',
+                            rowContent: function (contentArg) { return (createElement("tr", null, _this.renderTableRowAxis(contentArg.rowSyncHeights[0]))); },
+                        },
+                        {
+                            key: 'cols',
+                            content: allDayContent,
+                        },
+                    ],
+                });
+                sections.push({
+                    key: 'all-day-divider',
+                    type: 'body',
+                    outerContent: ( // TODO: rename to cellContent so don't need to define ?
+                    createElement("tr", { className: "fc-scrollgrid-section" },
+                        createElement("td", { colSpan: 2, className: 'fc-timegrid-divider ' + context.theme.getClass('tableCellShaded') }))),
+                });
+            }
+            var isNowIndicator = context.options.nowIndicator;
+            sections.push({
+                type: 'body',
+                key: 'body',
+                liquid: true,
+                expandRows: Boolean(context.options.expandRows),
+                chunks: [
+                    {
+                        key: 'axis',
+                        content: function (arg) { return (
+                        // TODO: make this now-indicator arrow more DRY with TimeColsContent
+                        createElement("div", { className: "fc-timegrid-axis-chunk" },
+                            createElement("table", { style: { height: arg.expandRows ? arg.clientHeight : '' } },
+                                arg.tableColGroupNode,
+                                createElement("tbody", null,
+                                    createElement(TimeBodyAxis, { slatMetas: slatMetas }))),
+                            createElement("div", { className: "fc-timegrid-now-indicator-container" },
+                                createElement(NowTimer, { unit: isNowIndicator ? 'minute' : 'day' /* hacky */ }, function (nowDate) {
+                                    var nowIndicatorTop = isNowIndicator &&
+                                        slatCoords &&
+                                        slatCoords.safeComputeTop(nowDate); // might return void
+                                    if (typeof nowIndicatorTop === 'number') {
+                                        return (createElement(NowIndicatorRoot, { isAxis: true, date: nowDate }, function (rootElRef, classNames, innerElRef, innerContent) { return (createElement("div", { ref: rootElRef, className: ['fc-timegrid-now-indicator-arrow'].concat(classNames).join(' '), style: { top: nowIndicatorTop } }, innerContent)); }));
+                                    }
+                                    return null;
+                                })))); },
+                    },
+                    {
+                        key: 'cols',
+                        scrollerElRef: this.scrollerElRef,
+                        content: timeContent,
+                    },
+                ],
+            });
+            if (stickyFooterScrollbar) {
+                sections.push({
+                    key: 'footer',
+                    type: 'footer',
+                    isSticky: true,
+                    chunks: [
+                        {
+                            key: 'axis',
+                            content: renderScrollShim,
+                        },
+                        {
+                            key: 'cols',
+                            content: renderScrollShim,
+                        },
+                    ],
+                });
+            }
+            return (createElement(ViewRoot, { viewSpec: context.viewSpec, elRef: this.rootElRef }, function (rootElRef, classNames) { return (createElement("div", { className: ['fc-timegrid'].concat(classNames).join(' '), ref: rootElRef },
+                createElement(ScrollGrid, { liquid: !props.isHeightAuto && !props.forPrint, collapsibleWidth: false, colGroups: [
+                        { width: 'shrink', cols: [{ width: 'shrink' }] },
+                        { cols: [{ span: colCnt, minWidth: dayMinWidth }] },
+                    ], sections: sections }))); }));
+        };
+        /* Dimensions
+        ------------------------------------------------------------------------------------------------------------------*/
+        TimeColsView.prototype.getAllDayMaxEventProps = function () {
+            var _a = this.context.options, dayMaxEvents = _a.dayMaxEvents, dayMaxEventRows = _a.dayMaxEventRows;
+            if (dayMaxEvents === true || dayMaxEventRows === true) { // is auto?
+                dayMaxEvents = undefined;
+                dayMaxEventRows = AUTO_ALL_DAY_MAX_EVENT_ROWS; // make sure "auto" goes to a real number
+            }
+            return { dayMaxEvents: dayMaxEvents, dayMaxEventRows: dayMaxEventRows };
+        };
+        return TimeColsView;
+    }(DateComponent));
+    function renderAllDayInner$1(hookProps) {
+        return hookProps.text;
+    }
+
+    var TimeColsSlatsCoords = /** @class */ (function () {
+        function TimeColsSlatsCoords(positions, dateProfile, slotDuration) {
+            this.positions = positions;
+            this.dateProfile = dateProfile;
+            this.slotDuration = slotDuration;
+        }
+        TimeColsSlatsCoords.prototype.safeComputeTop = function (date) {
+            var dateProfile = this.dateProfile;
+            if (rangeContainsMarker(dateProfile.currentRange, date)) {
+                var startOfDayDate = startOfDay(date);
+                var timeMs = date.valueOf() - startOfDayDate.valueOf();
+                if (timeMs >= asRoughMs(dateProfile.slotMinTime) &&
+                    timeMs < asRoughMs(dateProfile.slotMaxTime)) {
+                    return this.computeTimeTop(createDuration(timeMs));
+                }
+            }
+            return null;
+        };
+        // Computes the top coordinate, relative to the bounds of the grid, of the given date.
+        // A `startOfDayDate` must be given for avoiding ambiguity over how to treat midnight.
+        TimeColsSlatsCoords.prototype.computeDateTop = function (when, startOfDayDate) {
+            if (!startOfDayDate) {
+                startOfDayDate = startOfDay(when);
+            }
+            return this.computeTimeTop(createDuration(when.valueOf() - startOfDayDate.valueOf()));
+        };
+        // Computes the top coordinate, relative to the bounds of the grid, of the given time (a Duration).
+        // This is a makeshify way to compute the time-top. Assumes all slatMetas dates are uniform.
+        // Eventually allow computation with arbirary slat dates.
+        TimeColsSlatsCoords.prototype.computeTimeTop = function (duration) {
+            var _a = this, positions = _a.positions, dateProfile = _a.dateProfile;
+            var len = positions.els.length;
+            // floating-point value of # of slots covered
+            var slatCoverage = (duration.milliseconds - asRoughMs(dateProfile.slotMinTime)) / asRoughMs(this.slotDuration);
+            var slatIndex;
+            var slatRemainder;
+            // compute a floating-point number for how many slats should be progressed through.
+            // from 0 to number of slats (inclusive)
+            // constrained because slotMinTime/slotMaxTime might be customized.
+            slatCoverage = Math.max(0, slatCoverage);
+            slatCoverage = Math.min(len, slatCoverage);
+            // an integer index of the furthest whole slat
+            // from 0 to number slats (*exclusive*, so len-1)
+            slatIndex = Math.floor(slatCoverage);
+            slatIndex = Math.min(slatIndex, len - 1);
+            // how much further through the slatIndex slat (from 0.0-1.0) must be covered in addition.
+            // could be 1.0 if slatCoverage is covering *all* the slots
+            slatRemainder = slatCoverage - slatIndex;
+            return positions.tops[slatIndex] +
+                positions.getHeight(slatIndex) * slatRemainder;
+        };
+        return TimeColsSlatsCoords;
+    }());
+
+    var TimeColsSlatsBody = /** @class */ (function (_super) {
+        __extends(TimeColsSlatsBody, _super);
+        function TimeColsSlatsBody() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        TimeColsSlatsBody.prototype.render = function () {
+            var _a = this, props = _a.props, context = _a.context;
+            var options = context.options;
+            var slatElRefs = props.slatElRefs;
+            return (createElement("tbody", null, props.slatMetas.map(function (slatMeta, i) {
+                var hookProps = {
+                    time: slatMeta.time,
+                    date: context.dateEnv.toDate(slatMeta.date),
+                    view: context.viewApi,
+                };
+                var classNames = [
+                    'fc-timegrid-slot',
+                    'fc-timegrid-slot-lane',
+                    slatMeta.isLabeled ? '' : 'fc-timegrid-slot-minor',
+                ];
+                return (createElement("tr", { key: slatMeta.key, ref: slatElRefs.createRef(slatMeta.key) },
+                    props.axis && (createElement(TimeColsAxisCell, __assign({}, slatMeta))),
+                    createElement(RenderHook, { hookProps: hookProps, classNames: options.slotLaneClassNames, content: options.slotLaneContent, didMount: options.slotLaneDidMount, willUnmount: options.slotLaneWillUnmount }, function (rootElRef, customClassNames, innerElRef, innerContent) { return (createElement("td", { ref: rootElRef, className: classNames.concat(customClassNames).join(' '), "data-time": slatMeta.isoTimeStr }, innerContent)); })));
+            })));
+        };
+        return TimeColsSlatsBody;
+    }(BaseComponent));
+
+    /*
+    for the horizontal "slats" that run width-wise. Has a time axis on a side. Depends on RTL.
+    */
+    var TimeColsSlats = /** @class */ (function (_super) {
+        __extends(TimeColsSlats, _super);
+        function TimeColsSlats() {
+            var _this = _super !== null && _super.apply(this, arguments) || this;
+            _this.rootElRef = createRef();
+            _this.slatElRefs = new RefMap();
+            return _this;
+        }
+        TimeColsSlats.prototype.render = function () {
+            var _a = this, props = _a.props, context = _a.context;
+            return (createElement("div", { className: "fc-timegrid-slots", ref: this.rootElRef },
+                createElement("table", { className: context.theme.getClass('table'), style: {
+                        minWidth: props.tableMinWidth,
+                        width: props.clientWidth,
+                        height: props.minHeight,
+                    } },
+                    props.tableColGroupNode /* relies on there only being a single for the axis */,
+                    createElement(TimeColsSlatsBody, { slatElRefs: this.slatElRefs, axis: props.axis, slatMetas: props.slatMetas }))));
+        };
+        TimeColsSlats.prototype.componentDidMount = function () {
+            this.updateSizing();
+        };
+        TimeColsSlats.prototype.componentDidUpdate = function () {
+            this.updateSizing();
+        };
+        TimeColsSlats.prototype.componentWillUnmount = function () {
+            if (this.props.onCoords) {
+                this.props.onCoords(null);
+            }
+        };
+        TimeColsSlats.prototype.updateSizing = function () {
+            var _a = this, context = _a.context, props = _a.props;
+            if (props.onCoords &&
+                props.clientWidth !== null // means sizing has stabilized
+            ) {
+                var rootEl = this.rootElRef.current;
+                if (rootEl.offsetHeight) { // not hidden by css
+                    props.onCoords(new TimeColsSlatsCoords(new PositionCache(this.rootElRef.current, collectSlatEls(this.slatElRefs.currentMap, props.slatMetas), false, true), this.props.dateProfile, context.options.slotDuration));
+                }
+            }
+        };
+        return TimeColsSlats;
+    }(BaseComponent));
+    function collectSlatEls(elMap, slatMetas) {
+        return slatMetas.map(function (slatMeta) { return elMap[slatMeta.key]; });
+    }
+
+    function splitSegsByCol(segs, colCnt) {
+        var segsByCol = [];
+        var i;
+        for (i = 0; i < colCnt; i += 1) {
+            segsByCol.push([]);
+        }
+        if (segs) {
+            for (i = 0; i < segs.length; i += 1) {
+                segsByCol[segs[i].col].push(segs[i]);
+            }
+        }
+        return segsByCol;
+    }
+    function splitInteractionByCol(ui, colCnt) {
+        var byRow = [];
+        if (!ui) {
+            for (var i = 0; i < colCnt; i += 1) {
+                byRow[i] = null;
+            }
+        }
+        else {
+            for (var i = 0; i < colCnt; i += 1) {
+                byRow[i] = {
+                    affectedInstances: ui.affectedInstances,
+                    isEvent: ui.isEvent,
+                    segs: [],
+                };
+            }
+            for (var _i = 0, _a = ui.segs; _i < _a.length; _i++) {
+                var seg = _a[_i];
+                byRow[seg.col].segs.push(seg);
+            }
+        }
+        return byRow;
+    }
+
+    var TimeColMoreLink = /** @class */ (function (_super) {
+        __extends(TimeColMoreLink, _super);
+        function TimeColMoreLink() {
+            var _this = _super !== null && _super.apply(this, arguments) || this;
+            _this.rootElRef = createRef();
+            return _this;
+        }
+        TimeColMoreLink.prototype.render = function () {
+            var _this = this;
+            var props = this.props;
+            return (createElement(MoreLinkRoot, { allDayDate: null, moreCnt: props.hiddenSegs.length, allSegs: props.hiddenSegs, hiddenSegs: props.hiddenSegs, alignmentElRef: this.rootElRef, defaultContent: renderMoreLinkInner, extraDateSpan: props.extraDateSpan, dateProfile: props.dateProfile, todayRange: props.todayRange, popoverContent: function () { return renderPlainFgSegs(props.hiddenSegs, props); } }, function (rootElRef, classNames, innerElRef, innerContent, handleClick) { return (createElement("a", { ref: function (el) {
+                    setRef(rootElRef, el);
+                    setRef(_this.rootElRef, el);
+                }, className: ['fc-timegrid-more-link'].concat(classNames).join(' '), style: { top: props.top, bottom: props.bottom }, onClick: handleClick },
+                createElement("div", { ref: innerElRef, className: "fc-timegrid-more-link-inner fc-sticky" }, innerContent))); }));
+        };
+        return TimeColMoreLink;
+    }(BaseComponent));
+    function renderMoreLinkInner(props) {
+        return props.shortText;
+    }
+
+    // segInputs assumed sorted
+    function buildPositioning(segInputs, strictOrder, maxStackCnt) {
+        var hierarchy = new SegHierarchy();
+        if (strictOrder != null) {
+            hierarchy.strictOrder = strictOrder;
+        }
+        if (maxStackCnt != null) {
+            hierarchy.maxStackCnt = maxStackCnt;
+        }
+        var hiddenEntries = hierarchy.addSegs(segInputs);
+        var hiddenGroups = groupIntersectingEntries(hiddenEntries);
+        var web = buildWeb(hierarchy);
+        web = stretchWeb(web, 1); // all levelCoords/thickness will have 0.0-1.0
+        var segRects = webToRects(web);
+        return { segRects: segRects, hiddenGroups: hiddenGroups };
+    }
+    function buildWeb(hierarchy) {
+        var entriesByLevel = hierarchy.entriesByLevel;
+        var buildNode = cacheable(function (level, lateral) { return level + ':' + lateral; }, function (level, lateral) {
+            var siblingRange = findNextLevelSegs(hierarchy, level, lateral);
+            var nextLevelRes = buildNodes(siblingRange, buildNode);
+            var entry = entriesByLevel[level][lateral];
+            return [
+                __assign(__assign({}, entry), { nextLevelNodes: nextLevelRes[0] }),
+                entry.thickness + nextLevelRes[1], // the pressure builds
+            ];
+        });
+        return buildNodes(entriesByLevel.length
+            ? { level: 0, lateralStart: 0, lateralEnd: entriesByLevel[0].length }
+            : null, buildNode)[0];
+    }
+    function buildNodes(siblingRange, buildNode) {
+        if (!siblingRange) {
+            return [[], 0];
+        }
+        var level = siblingRange.level, lateralStart = siblingRange.lateralStart, lateralEnd = siblingRange.lateralEnd;
+        var lateral = lateralStart;
+        var pairs = [];
+        while (lateral < lateralEnd) {
+            pairs.push(buildNode(level, lateral));
+            lateral += 1;
+        }
+        pairs.sort(cmpDescPressures);
+        return [
+            pairs.map(extractNode),
+            pairs[0][1], // first item's pressure
+        ];
+    }
+    function cmpDescPressures(a, b) {
+        return b[1] - a[1];
+    }
+    function extractNode(a) {
+        return a[0];
+    }
+    function findNextLevelSegs(hierarchy, subjectLevel, subjectLateral) {
+        var levelCoords = hierarchy.levelCoords, entriesByLevel = hierarchy.entriesByLevel;
+        var subjectEntry = entriesByLevel[subjectLevel][subjectLateral];
+        var afterSubject = levelCoords[subjectLevel] + subjectEntry.thickness;
+        var levelCnt = levelCoords.length;
+        var level = subjectLevel;
+        // skip past levels that are too high up
+        for (; level < levelCnt && levelCoords[level] < afterSubject; level += 1)
+            ; // do nothing
+        for (; level < levelCnt; level += 1) {
+            var entries = entriesByLevel[level];
+            var entry = void 0;
+            var searchIndex = binarySearch(entries, subjectEntry.span.start, getEntrySpanEnd);
+            var lateralStart = searchIndex[0] + searchIndex[1]; // if exact match (which doesn't collide), go to next one
+            var lateralEnd = lateralStart;
+            while ( // loop through entries that horizontally intersect
+            (entry = entries[lateralEnd]) && // but not past the whole seg list
+                entry.span.start < subjectEntry.span.end) {
+                lateralEnd += 1;
+            }
+            if (lateralStart < lateralEnd) {
+                return { level: level, lateralStart: lateralStart, lateralEnd: lateralEnd };
+            }
+        }
+        return null;
+    }
+    function stretchWeb(topLevelNodes, totalThickness) {
+        var stretchNode = cacheable(function (node, startCoord, prevThickness) { return buildEntryKey(node); }, function (node, startCoord, prevThickness) {
+            var nextLevelNodes = node.nextLevelNodes, thickness = node.thickness;
+            var allThickness = thickness + prevThickness;
+            var thicknessFraction = thickness / allThickness;
+            var endCoord;
+            var newChildren = [];
+            if (!nextLevelNodes.length) {
+                endCoord = totalThickness;
+            }
+            else {
+                for (var _i = 0, nextLevelNodes_1 = nextLevelNodes; _i < nextLevelNodes_1.length; _i++) {
+                    var childNode = nextLevelNodes_1[_i];
+                    if (endCoord === undefined) {
+                        var res = stretchNode(childNode, startCoord, allThickness);
+                        endCoord = res[0];
+                        newChildren.push(res[1]);
+                    }
+                    else {
+                        var res = stretchNode(childNode, endCoord, 0);
+                        newChildren.push(res[1]);
+                    }
+                }
+            }
+            var newThickness = (endCoord - startCoord) * thicknessFraction;
+            return [endCoord - newThickness, __assign(__assign({}, node), { thickness: newThickness, nextLevelNodes: newChildren })];
+        });
+        return topLevelNodes.map(function (node) { return stretchNode(node, 0, 0)[1]; });
+    }
+    // not sorted in any particular order
+    function webToRects(topLevelNodes) {
+        var rects = [];
+        var processNode = cacheable(function (node, levelCoord, stackDepth) { return buildEntryKey(node); }, function (node, levelCoord, stackDepth) {
+            var rect = __assign(__assign({}, node), { levelCoord: levelCoord,
+                stackDepth: stackDepth, stackForward: 0 });
+            rects.push(rect);
+            return (rect.stackForward = processNodes(node.nextLevelNodes, levelCoord + node.thickness, stackDepth + 1) + 1);
+        });
+        function processNodes(nodes, levelCoord, stackDepth) {
+            var stackForward = 0;
+            for (var _i = 0, nodes_1 = nodes; _i < nodes_1.length; _i++) {
+                var node = nodes_1[_i];
+                stackForward = Math.max(processNode(node, levelCoord, stackDepth), stackForward);
+            }
+            return stackForward;
+        }
+        processNodes(topLevelNodes, 0, 0);
+        return rects; // TODO: sort rects by levelCoord to be consistent with toRects?
+    }
+    // TODO: move to general util
+    function cacheable(keyFunc, workFunc) {
+        var cache = {};
+        return function () {
+            var args = [];
+            for (var _i = 0; _i < arguments.length; _i++) {
+                args[_i] = arguments[_i];
+            }
+            var key = keyFunc.apply(void 0, args);
+            return (key in cache)
+                ? cache[key]
+                : (cache[key] = workFunc.apply(void 0, args));
+        };
+    }
+
+    function computeSegVCoords(segs, colDate, slatCoords, eventMinHeight) {
+        if (slatCoords === void 0) { slatCoords = null; }
+        if (eventMinHeight === void 0) { eventMinHeight = 0; }
+        var vcoords = [];
+        if (slatCoords) {
+            for (var i = 0; i < segs.length; i += 1) {
+                var seg = segs[i];
+                var spanStart = slatCoords.computeDateTop(seg.start, colDate);
+                var spanEnd = Math.max(spanStart + (eventMinHeight || 0), // :(
+                slatCoords.computeDateTop(seg.end, colDate));
+                vcoords.push({
+                    start: Math.round(spanStart),
+                    end: Math.round(spanEnd), //
+                });
+            }
+        }
+        return vcoords;
+    }
+    function computeFgSegPlacements(segs, segVCoords, // might not have for every seg
+    eventOrderStrict, eventMaxStack) {
+        var segInputs = [];
+        var dumbSegs = []; // segs without coords
+        for (var i = 0; i < segs.length; i += 1) {
+            var vcoords = segVCoords[i];
+            if (vcoords) {
+                segInputs.push({
+                    index: i,
+                    thickness: 1,
+                    span: vcoords,
+                });
+            }
+            else {
+                dumbSegs.push(segs[i]);
+            }
+        }
+        var _a = buildPositioning(segInputs, eventOrderStrict, eventMaxStack), segRects = _a.segRects, hiddenGroups = _a.hiddenGroups;
+        var segPlacements = [];
+        for (var _i = 0, segRects_1 = segRects; _i < segRects_1.length; _i++) {
+            var segRect = segRects_1[_i];
+            segPlacements.push({
+                seg: segs[segRect.index],
+                rect: segRect,
+            });
+        }
+        for (var _b = 0, dumbSegs_1 = dumbSegs; _b < dumbSegs_1.length; _b++) {
+            var dumbSeg = dumbSegs_1[_b];
+            segPlacements.push({ seg: dumbSeg, rect: null });
+        }
+        return { segPlacements: segPlacements, hiddenGroups: hiddenGroups };
+    }
+
+    var DEFAULT_TIME_FORMAT$1 = createFormatter({
+        hour: 'numeric',
+        minute: '2-digit',
+        meridiem: false,
+    });
+    var TimeColEvent = /** @class */ (function (_super) {
+        __extends(TimeColEvent, _super);
+        function TimeColEvent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        TimeColEvent.prototype.render = function () {
+            var classNames = [
+                'fc-timegrid-event',
+                'fc-v-event',
+            ];
+            if (this.props.isShort) {
+                classNames.push('fc-timegrid-event-short');
+            }
+            return (createElement(StandardEvent, __assign({}, this.props, { defaultTimeFormat: DEFAULT_TIME_FORMAT$1, extraClassNames: classNames })));
+        };
+        return TimeColEvent;
+    }(BaseComponent));
+
+    var TimeColMisc = /** @class */ (function (_super) {
+        __extends(TimeColMisc, _super);
+        function TimeColMisc() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        TimeColMisc.prototype.render = function () {
+            var props = this.props;
+            return (createElement(DayCellContent, { date: props.date, dateProfile: props.dateProfile, todayRange: props.todayRange, extraHookProps: props.extraHookProps }, function (innerElRef, innerContent) { return (innerContent &&
+                createElement("div", { className: "fc-timegrid-col-misc", ref: innerElRef }, innerContent)); }));
+        };
+        return TimeColMisc;
+    }(BaseComponent));
+
+    var TimeCol = /** @class */ (function (_super) {
+        __extends(TimeCol, _super);
+        function TimeCol() {
+            var _this = _super !== null && _super.apply(this, arguments) || this;
+            _this.sortEventSegs = memoize(sortEventSegs);
+            return _this;
+        }
+        // TODO: memoize event-placement?
+        TimeCol.prototype.render = function () {
+            var _this = this;
+            var _a = this, props = _a.props, context = _a.context;
+            var isSelectMirror = context.options.selectMirror;
+            var mirrorSegs = (props.eventDrag && props.eventDrag.segs) ||
+                (props.eventResize && props.eventResize.segs) ||
+                (isSelectMirror && props.dateSelectionSegs) ||
+                [];
+            var interactionAffectedInstances = // TODO: messy way to compute this
+             (props.eventDrag && props.eventDrag.affectedInstances) ||
+                (props.eventResize && props.eventResize.affectedInstances) ||
+                {};
+            var sortedFgSegs = this.sortEventSegs(props.fgEventSegs, context.options.eventOrder);
+            return (createElement(DayCellRoot, { elRef: props.elRef, date: props.date, dateProfile: props.dateProfile, todayRange: props.todayRange, extraHookProps: props.extraHookProps }, function (rootElRef, classNames, dataAttrs) { return (createElement("td", __assign({ ref: rootElRef, className: ['fc-timegrid-col'].concat(classNames, props.extraClassNames || []).join(' ') }, dataAttrs, props.extraDataAttrs),
+                createElement("div", { className: "fc-timegrid-col-frame" },
+                    createElement("div", { className: "fc-timegrid-col-bg" },
+                        _this.renderFillSegs(props.businessHourSegs, 'non-business'),
+                        _this.renderFillSegs(props.bgEventSegs, 'bg-event'),
+                        _this.renderFillSegs(props.dateSelectionSegs, 'highlight')),
+                    createElement("div", { className: "fc-timegrid-col-events" }, _this.renderFgSegs(sortedFgSegs, interactionAffectedInstances, false, false, false)),
+                    createElement("div", { className: "fc-timegrid-col-events" }, _this.renderFgSegs(mirrorSegs, {}, Boolean(props.eventDrag), Boolean(props.eventResize), Boolean(isSelectMirror))),
+                    createElement("div", { className: "fc-timegrid-now-indicator-container" }, _this.renderNowIndicator(props.nowIndicatorSegs)),
+                    createElement(TimeColMisc, { date: props.date, dateProfile: props.dateProfile, todayRange: props.todayRange, extraHookProps: props.extraHookProps })))); }));
+        };
+        TimeCol.prototype.renderFgSegs = function (sortedFgSegs, segIsInvisible, isDragging, isResizing, isDateSelecting) {
+            var props = this.props;
+            if (props.forPrint) {
+                return renderPlainFgSegs(sortedFgSegs, props);
+            }
+            return this.renderPositionedFgSegs(sortedFgSegs, segIsInvisible, isDragging, isResizing, isDateSelecting);
+        };
+        TimeCol.prototype.renderPositionedFgSegs = function (segs, // if not mirror, needs to be sorted
+        segIsInvisible, isDragging, isResizing, isDateSelecting) {
+            var _this = this;
+            var _a = this.context.options, eventMaxStack = _a.eventMaxStack, eventShortHeight = _a.eventShortHeight, eventOrderStrict = _a.eventOrderStrict, eventMinHeight = _a.eventMinHeight;
+            var _b = this.props, date = _b.date, slatCoords = _b.slatCoords, eventSelection = _b.eventSelection, todayRange = _b.todayRange, nowDate = _b.nowDate;
+            var isMirror = isDragging || isResizing || isDateSelecting;
+            var segVCoords = computeSegVCoords(segs, date, slatCoords, eventMinHeight);
+            var _c = computeFgSegPlacements(segs, segVCoords, eventOrderStrict, eventMaxStack), segPlacements = _c.segPlacements, hiddenGroups = _c.hiddenGroups;
+            return (createElement(Fragment, null,
+                this.renderHiddenGroups(hiddenGroups, segs),
+                segPlacements.map(function (segPlacement) {
+                    var seg = segPlacement.seg, rect = segPlacement.rect;
+                    var instanceId = seg.eventRange.instance.instanceId;
+                    var isVisible = isMirror || Boolean(!segIsInvisible[instanceId] && rect);
+                    var vStyle = computeSegVStyle(rect && rect.span);
+                    var hStyle = (!isMirror && rect) ? _this.computeSegHStyle(rect) : { left: 0, right: 0 };
+                    var isInset = Boolean(rect) && rect.stackForward > 0;
+                    var isShort = Boolean(rect) && (rect.span.end - rect.span.start) < eventShortHeight; // look at other places for this problem
+                    return (createElement("div", { className: 'fc-timegrid-event-harness' +
+                            (isInset ? ' fc-timegrid-event-harness-inset' : ''), key: instanceId, style: __assign(__assign({ visibility: isVisible ? '' : 'hidden' }, vStyle), hStyle) },
+                        createElement(TimeColEvent, __assign({ seg: seg, isDragging: isDragging, isResizing: isResizing, isDateSelecting: isDateSelecting, isSelected: instanceId === eventSelection, isShort: isShort }, getSegMeta(seg, todayRange, nowDate)))));
+                })));
+        };
+        // will already have eventMinHeight applied because segInputs already had it
+        TimeCol.prototype.renderHiddenGroups = function (hiddenGroups, segs) {
+            var _a = this.props, extraDateSpan = _a.extraDateSpan, dateProfile = _a.dateProfile, todayRange = _a.todayRange, nowDate = _a.nowDate, eventSelection = _a.eventSelection, eventDrag = _a.eventDrag, eventResize = _a.eventResize;
+            return (createElement(Fragment, null, hiddenGroups.map(function (hiddenGroup) {
+                var positionCss = computeSegVStyle(hiddenGroup.span);
+                var hiddenSegs = compileSegsFromEntries(hiddenGroup.entries, segs);
+                return (createElement(TimeColMoreLink, { key: buildIsoString(computeEarliestSegStart(hiddenSegs)), hiddenSegs: hiddenSegs, top: positionCss.top, bottom: positionCss.bottom, extraDateSpan: extraDateSpan, dateProfile: dateProfile, todayRange: todayRange, nowDate: nowDate, eventSelection: eventSelection, eventDrag: eventDrag, eventResize: eventResize }));
+            })));
+        };
+        TimeCol.prototype.renderFillSegs = function (segs, fillType) {
+            var _a = this, props = _a.props, context = _a.context;
+            var segVCoords = computeSegVCoords(segs, props.date, props.slatCoords, context.options.eventMinHeight); // don't assume all populated
+            var children = segVCoords.map(function (vcoords, i) {
+                var seg = segs[i];
+                return (createElement("div", { key: buildEventRangeKey(seg.eventRange), className: "fc-timegrid-bg-harness", style: computeSegVStyle(vcoords) }, fillType === 'bg-event' ?
+                    createElement(BgEvent, __assign({ seg: seg }, getSegMeta(seg, props.todayRange, props.nowDate))) :
+                    renderFill(fillType)));
+            });
+            return createElement(Fragment, null, children);
+        };
+        TimeCol.prototype.renderNowIndicator = function (segs) {
+            var _a = this.props, slatCoords = _a.slatCoords, date = _a.date;
+            if (!slatCoords) {
+                return null;
+            }
+            return segs.map(function (seg, i) { return (createElement(NowIndicatorRoot, { isAxis: false, date: date, 
+                // key doesn't matter. will only ever be one
+                key: i }, function (rootElRef, classNames, innerElRef, innerContent) { return (createElement("div", { ref: rootElRef, className: ['fc-timegrid-now-indicator-line'].concat(classNames).join(' '), style: { top: slatCoords.computeDateTop(seg.start, date) } }, innerContent)); })); });
+        };
+        TimeCol.prototype.computeSegHStyle = function (segHCoords) {
+            var _a = this.context, isRtl = _a.isRtl, options = _a.options;
+            var shouldOverlap = options.slotEventOverlap;
+            var nearCoord = segHCoords.levelCoord; // the left side if LTR. the right side if RTL. floating-point
+            var farCoord = segHCoords.levelCoord + segHCoords.thickness; // the right side if LTR. the left side if RTL. floating-point
+            var left; // amount of space from left edge, a fraction of the total width
+            var right; // amount of space from right edge, a fraction of the total width
+            if (shouldOverlap) {
+                // double the width, but don't go beyond the maximum forward coordinate (1.0)
+                farCoord = Math.min(1, nearCoord + (farCoord - nearCoord) * 2);
+            }
+            if (isRtl) {
+                left = 1 - farCoord;
+                right = nearCoord;
+            }
+            else {
+                left = nearCoord;
+                right = 1 - farCoord;
+            }
+            var props = {
+                zIndex: segHCoords.stackDepth + 1,
+                left: left * 100 + '%',
+                right: right * 100 + '%',
+            };
+            if (shouldOverlap && !segHCoords.stackForward) {
+                // add padding to the edge so that forward stacked events don't cover the resizer's icon
+                props[isRtl ? 'marginLeft' : 'marginRight'] = 10 * 2; // 10 is a guesstimate of the icon's width
+            }
+            return props;
+        };
+        return TimeCol;
+    }(BaseComponent));
+    function renderPlainFgSegs(sortedFgSegs, _a) {
+        var todayRange = _a.todayRange, nowDate = _a.nowDate, eventSelection = _a.eventSelection, eventDrag = _a.eventDrag, eventResize = _a.eventResize;
+        var hiddenInstances = (eventDrag ? eventDrag.affectedInstances : null) ||
+            (eventResize ? eventResize.affectedInstances : null) ||
+            {};
+        return (createElement(Fragment, null, sortedFgSegs.map(function (seg) {
+            var instanceId = seg.eventRange.instance.instanceId;
+            return (createElement("div", { key: instanceId, style: { visibility: hiddenInstances[instanceId] ? 'hidden' : '' } },
+                createElement(TimeColEvent, __assign({ seg: seg, isDragging: false, isResizing: false, isDateSelecting: false, isSelected: instanceId === eventSelection, isShort: false }, getSegMeta(seg, todayRange, nowDate)))));
+        })));
+    }
+    function computeSegVStyle(segVCoords) {
+        if (!segVCoords) {
+            return { top: '', bottom: '' };
+        }
+        return {
+            top: segVCoords.start,
+            bottom: -segVCoords.end,
+        };
+    }
+    function compileSegsFromEntries(segEntries, allSegs) {
+        return segEntries.map(function (segEntry) { return allSegs[segEntry.index]; });
+    }
+
+    var TimeColsContent = /** @class */ (function (_super) {
+        __extends(TimeColsContent, _super);
+        function TimeColsContent() {
+            var _this = _super !== null && _super.apply(this, arguments) || this;
+            _this.splitFgEventSegs = memoize(splitSegsByCol);
+            _this.splitBgEventSegs = memoize(splitSegsByCol);
+            _this.splitBusinessHourSegs = memoize(splitSegsByCol);
+            _this.splitNowIndicatorSegs = memoize(splitSegsByCol);
+            _this.splitDateSelectionSegs = memoize(splitSegsByCol);
+            _this.splitEventDrag = memoize(splitInteractionByCol);
+            _this.splitEventResize = memoize(splitInteractionByCol);
+            _this.rootElRef = createRef();
+            _this.cellElRefs = new RefMap();
+            return _this;
+        }
+        TimeColsContent.prototype.render = function () {
+            var _this = this;
+            var _a = this, props = _a.props, context = _a.context;
+            var nowIndicatorTop = context.options.nowIndicator &&
+                props.slatCoords &&
+                props.slatCoords.safeComputeTop(props.nowDate); // might return void
+            var colCnt = props.cells.length;
+            var fgEventSegsByRow = this.splitFgEventSegs(props.fgEventSegs, colCnt);
+            var bgEventSegsByRow = this.splitBgEventSegs(props.bgEventSegs, colCnt);
+            var businessHourSegsByRow = this.splitBusinessHourSegs(props.businessHourSegs, colCnt);
+            var nowIndicatorSegsByRow = this.splitNowIndicatorSegs(props.nowIndicatorSegs, colCnt);
+            var dateSelectionSegsByRow = this.splitDateSelectionSegs(props.dateSelectionSegs, colCnt);
+            var eventDragByRow = this.splitEventDrag(props.eventDrag, colCnt);
+            var eventResizeByRow = this.splitEventResize(props.eventResize, colCnt);
+            return (createElement("div", { className: "fc-timegrid-cols", ref: this.rootElRef },
+                createElement("table", { style: {
+                        minWidth: props.tableMinWidth,
+                        width: props.clientWidth,
+                    } },
+                    props.tableColGroupNode,
+                    createElement("tbody", null,
+                        createElement("tr", null,
+                            props.axis && (createElement("td", { className: "fc-timegrid-col fc-timegrid-axis" },
+                                createElement("div", { className: "fc-timegrid-col-frame" },
+                                    createElement("div", { className: "fc-timegrid-now-indicator-container" }, typeof nowIndicatorTop === 'number' && (createElement(NowIndicatorRoot, { isAxis: true, date: props.nowDate }, function (rootElRef, classNames, innerElRef, innerContent) { return (createElement("div", { ref: rootElRef, className: ['fc-timegrid-now-indicator-arrow'].concat(classNames).join(' '), style: { top: nowIndicatorTop } }, innerContent)); })))))),
+                            props.cells.map(function (cell, i) { return (createElement(TimeCol, { key: cell.key, elRef: _this.cellElRefs.createRef(cell.key), dateProfile: props.dateProfile, date: cell.date, nowDate: props.nowDate, todayRange: props.todayRange, extraHookProps: cell.extraHookProps, extraDataAttrs: cell.extraDataAttrs, extraClassNames: cell.extraClassNames, extraDateSpan: cell.extraDateSpan, fgEventSegs: fgEventSegsByRow[i], bgEventSegs: bgEventSegsByRow[i], businessHourSegs: businessHourSegsByRow[i], nowIndicatorSegs: nowIndicatorSegsByRow[i], dateSelectionSegs: dateSelectionSegsByRow[i], eventDrag: eventDragByRow[i], eventResize: eventResizeByRow[i], slatCoords: props.slatCoords, eventSelection: props.eventSelection, forPrint: props.forPrint })); }))))));
+        };
+        TimeColsContent.prototype.componentDidMount = function () {
+            this.updateCoords();
+        };
+        TimeColsContent.prototype.componentDidUpdate = function () {
+            this.updateCoords();
+        };
+        TimeColsContent.prototype.updateCoords = function () {
+            var props = this.props;
+            if (props.onColCoords &&
+                props.clientWidth !== null // means sizing has stabilized
+            ) {
+                props.onColCoords(new PositionCache(this.rootElRef.current, collectCellEls(this.cellElRefs.currentMap, props.cells), true, // horizontal
+                false));
+            }
+        };
+        return TimeColsContent;
+    }(BaseComponent));
+    function collectCellEls(elMap, cells) {
+        return cells.map(function (cell) { return elMap[cell.key]; });
+    }
+
+    /* A component that renders one or more columns of vertical time slots
+    ----------------------------------------------------------------------------------------------------------------------*/
+    var TimeCols = /** @class */ (function (_super) {
+        __extends(TimeCols, _super);
+        function TimeCols() {
+            var _this = _super !== null && _super.apply(this, arguments) || this;
+            _this.processSlotOptions = memoize(processSlotOptions);
+            _this.state = {
+                slatCoords: null,
+            };
+            _this.handleRootEl = function (el) {
+                if (el) {
+                    _this.context.registerInteractiveComponent(_this, {
+                        el: el,
+                        isHitComboAllowed: _this.props.isHitComboAllowed,
+                    });
+                }
+                else {
+                    _this.context.unregisterInteractiveComponent(_this);
+                }
+            };
+            _this.handleScrollRequest = function (request) {
+                var onScrollTopRequest = _this.props.onScrollTopRequest;
+                var slatCoords = _this.state.slatCoords;
+                if (onScrollTopRequest && slatCoords) {
+                    if (request.time) {
+                        var top_1 = slatCoords.computeTimeTop(request.time);
+                        top_1 = Math.ceil(top_1); // zoom can give weird floating-point values. rather scroll a little bit further
+                        if (top_1) {
+                            top_1 += 1; // to overcome top border that slots beyond the first have. looks better
+                        }
+                        onScrollTopRequest(top_1);
+                    }
+                    return true;
+                }
+                return false;
+            };
+            _this.handleColCoords = function (colCoords) {
+                _this.colCoords = colCoords;
+            };
+            _this.handleSlatCoords = function (slatCoords) {
+                _this.setState({ slatCoords: slatCoords });
+                if (_this.props.onSlatCoords) {
+                    _this.props.onSlatCoords(slatCoords);
+                }
+            };
+            return _this;
+        }
+        TimeCols.prototype.render = function () {
+            var _a = this, props = _a.props, state = _a.state;
+            return (createElement("div", { className: "fc-timegrid-body", ref: this.handleRootEl, style: {
+                    // these props are important to give this wrapper correct dimensions for interactions
+                    // TODO: if we set it here, can we avoid giving to inner tables?
+                    width: props.clientWidth,
+                    minWidth: props.tableMinWidth,
+                } },
+                createElement(TimeColsSlats, { axis: props.axis, dateProfile: props.dateProfile, slatMetas: props.slatMetas, clientWidth: props.clientWidth, minHeight: props.expandRows ? props.clientHeight : '', tableMinWidth: props.tableMinWidth, tableColGroupNode: props.axis ? props.tableColGroupNode : null /* axis depends on the colgroup's shrinking */, onCoords: this.handleSlatCoords }),
+                createElement(TimeColsContent, { cells: props.cells, axis: props.axis, dateProfile: props.dateProfile, businessHourSegs: props.businessHourSegs, bgEventSegs: props.bgEventSegs, fgEventSegs: props.fgEventSegs, dateSelectionSegs: props.dateSelectionSegs, eventSelection: props.eventSelection, eventDrag: props.eventDrag, eventResize: props.eventResize, todayRange: props.todayRange, nowDate: props.nowDate, nowIndicatorSegs: props.nowIndicatorSegs, clientWidth: props.clientWidth, tableMinWidth: props.tableMinWidth, tableColGroupNode: props.tableColGroupNode, slatCoords: state.slatCoords, onColCoords: this.handleColCoords, forPrint: props.forPrint })));
+        };
+        TimeCols.prototype.componentDidMount = function () {
+            this.scrollResponder = this.context.createScrollResponder(this.handleScrollRequest);
+        };
+        TimeCols.prototype.componentDidUpdate = function (prevProps) {
+            this.scrollResponder.update(prevProps.dateProfile !== this.props.dateProfile);
+        };
+        TimeCols.prototype.componentWillUnmount = function () {
+            this.scrollResponder.detach();
+        };
+        TimeCols.prototype.queryHit = function (positionLeft, positionTop) {
+            var _a = this.context, dateEnv = _a.dateEnv, options = _a.options;
+            var colCoords = this.colCoords;
+            var dateProfile = this.props.dateProfile;
+            var slatCoords = this.state.slatCoords;
+            var _b = this.processSlotOptions(this.props.slotDuration, options.snapDuration), snapDuration = _b.snapDuration, snapsPerSlot = _b.snapsPerSlot;
+            var colIndex = colCoords.leftToIndex(positionLeft);
+            var slatIndex = slatCoords.positions.topToIndex(positionTop);
+            if (colIndex != null && slatIndex != null) {
+                var cell = this.props.cells[colIndex];
+                var slatTop = slatCoords.positions.tops[slatIndex];
+                var slatHeight = slatCoords.positions.getHeight(slatIndex);
+                var partial = (positionTop - slatTop) / slatHeight; // floating point number between 0 and 1
+                var localSnapIndex = Math.floor(partial * snapsPerSlot); // the snap # relative to start of slat
+                var snapIndex = slatIndex * snapsPerSlot + localSnapIndex;
+                var dayDate = this.props.cells[colIndex].date;
+                var time = addDurations(dateProfile.slotMinTime, multiplyDuration(snapDuration, snapIndex));
+                var start = dateEnv.add(dayDate, time);
+                var end = dateEnv.add(start, snapDuration);
+                return {
+                    dateProfile: dateProfile,
+                    dateSpan: __assign({ range: { start: start, end: end }, allDay: false }, cell.extraDateSpan),
+                    dayEl: colCoords.els[colIndex],
+                    rect: {
+                        left: colCoords.lefts[colIndex],
+                        right: colCoords.rights[colIndex],
+                        top: slatTop,
+                        bottom: slatTop + slatHeight,
+                    },
+                    layer: 0,
+                };
+            }
+            return null;
+        };
+        return TimeCols;
+    }(DateComponent));
+    function processSlotOptions(slotDuration, snapDurationOverride) {
+        var snapDuration = snapDurationOverride || slotDuration;
+        var snapsPerSlot = wholeDivideDurations(slotDuration, snapDuration);
+        if (snapsPerSlot === null) {
+            snapDuration = slotDuration;
+            snapsPerSlot = 1;
+            // TODO: say warning?
+        }
+        return { snapDuration: snapDuration, snapsPerSlot: snapsPerSlot };
+    }
+
+    var DayTimeColsSlicer = /** @class */ (function (_super) {
+        __extends(DayTimeColsSlicer, _super);
+        function DayTimeColsSlicer() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        DayTimeColsSlicer.prototype.sliceRange = function (range, dayRanges) {
+            var segs = [];
+            for (var col = 0; col < dayRanges.length; col += 1) {
+                var segRange = intersectRanges(range, dayRanges[col]);
+                if (segRange) {
+                    segs.push({
+                        start: segRange.start,
+                        end: segRange.end,
+                        isStart: segRange.start.valueOf() === range.start.valueOf(),
+                        isEnd: segRange.end.valueOf() === range.end.valueOf(),
+                        col: col,
+                    });
+                }
+            }
+            return segs;
+        };
+        return DayTimeColsSlicer;
+    }(Slicer));
+
+    var DayTimeCols = /** @class */ (function (_super) {
+        __extends(DayTimeCols, _super);
+        function DayTimeCols() {
+            var _this = _super !== null && _super.apply(this, arguments) || this;
+            _this.buildDayRanges = memoize(buildDayRanges);
+            _this.slicer = new DayTimeColsSlicer();
+            _this.timeColsRef = createRef();
+            return _this;
+        }
+        DayTimeCols.prototype.render = function () {
+            var _this = this;
+            var _a = this, props = _a.props, context = _a.context;
+            var dateProfile = props.dateProfile, dayTableModel = props.dayTableModel;
+            var isNowIndicator = context.options.nowIndicator;
+            var dayRanges = this.buildDayRanges(dayTableModel, dateProfile, context.dateEnv);
+            // give it the first row of cells
+            // TODO: would move this further down hierarchy, but sliceNowDate needs it
+            return (createElement(NowTimer, { unit: isNowIndicator ? 'minute' : 'day' }, function (nowDate, todayRange) { return (createElement(TimeCols, __assign({ ref: _this.timeColsRef }, _this.slicer.sliceProps(props, dateProfile, null, context, dayRanges), { forPrint: props.forPrint, axis: props.axis, dateProfile: dateProfile, slatMetas: props.slatMetas, slotDuration: props.slotDuration, cells: dayTableModel.cells[0], tableColGroupNode: props.tableColGroupNode, tableMinWidth: props.tableMinWidth, clientWidth: props.clientWidth, clientHeight: props.clientHeight, expandRows: props.expandRows, nowDate: nowDate, nowIndicatorSegs: isNowIndicator && _this.slicer.sliceNowDate(nowDate, context, dayRanges), todayRange: todayRange, onScrollTopRequest: props.onScrollTopRequest, onSlatCoords: props.onSlatCoords }))); }));
+        };
+        return DayTimeCols;
+    }(DateComponent));
+    function buildDayRanges(dayTableModel, dateProfile, dateEnv) {
+        var ranges = [];
+        for (var _i = 0, _a = dayTableModel.headerDates; _i < _a.length; _i++) {
+            var date = _a[_i];
+            ranges.push({
+                start: dateEnv.add(date, dateProfile.slotMinTime),
+                end: dateEnv.add(date, dateProfile.slotMaxTime),
+            });
+        }
+        return ranges;
+    }
+
+    // potential nice values for the slot-duration and interval-duration
+    // from largest to smallest
+    var STOCK_SUB_DURATIONS = [
+        { hours: 1 },
+        { minutes: 30 },
+        { minutes: 15 },
+        { seconds: 30 },
+        { seconds: 15 },
+    ];
+    function buildSlatMetas(slotMinTime, slotMaxTime, explicitLabelInterval, slotDuration, dateEnv) {
+        var dayStart = new Date(0);
+        var slatTime = slotMinTime;
+        var slatIterator = createDuration(0);
+        var labelInterval = explicitLabelInterval || computeLabelInterval(slotDuration);
+        var metas = [];
+        while (asRoughMs(slatTime) < asRoughMs(slotMaxTime)) {
+            var date = dateEnv.add(dayStart, slatTime);
+            var isLabeled = wholeDivideDurations(slatIterator, labelInterval) !== null;
+            metas.push({
+                date: date,
+                time: slatTime,
+                key: date.toISOString(),
+                isoTimeStr: formatIsoTimeString(date),
+                isLabeled: isLabeled,
+            });
+            slatTime = addDurations(slatTime, slotDuration);
+            slatIterator = addDurations(slatIterator, slotDuration);
+        }
+        return metas;
+    }
+    // Computes an automatic value for slotLabelInterval
+    function computeLabelInterval(slotDuration) {
+        var i;
+        var labelInterval;
+        var slotsPerLabel;
+        // find the smallest stock label interval that results in more than one slots-per-label
+        for (i = STOCK_SUB_DURATIONS.length - 1; i >= 0; i -= 1) {
+            labelInterval = createDuration(STOCK_SUB_DURATIONS[i]);
+            slotsPerLabel = wholeDivideDurations(labelInterval, slotDuration);
+            if (slotsPerLabel !== null && slotsPerLabel > 1) {
+                return labelInterval;
+            }
+        }
+        return slotDuration; // fall back
+    }
+
+    var DayTimeColsView = /** @class */ (function (_super) {
+        __extends(DayTimeColsView, _super);
+        function DayTimeColsView() {
+            var _this = _super !== null && _super.apply(this, arguments) || this;
+            _this.buildTimeColsModel = memoize(buildTimeColsModel);
+            _this.buildSlatMetas = memoize(buildSlatMetas);
+            return _this;
+        }
+        DayTimeColsView.prototype.render = function () {
+            var _this = this;
+            var _a = this.context, options = _a.options, dateEnv = _a.dateEnv, dateProfileGenerator = _a.dateProfileGenerator;
+            var props = this.props;
+            var dateProfile = props.dateProfile;
+            var dayTableModel = this.buildTimeColsModel(dateProfile, dateProfileGenerator);
+            var splitProps = this.allDaySplitter.splitProps(props);
+            var slatMetas = this.buildSlatMetas(dateProfile.slotMinTime, dateProfile.slotMaxTime, options.slotLabelInterval, options.slotDuration, dateEnv);
+            var dayMinWidth = options.dayMinWidth;
+            var hasAttachedAxis = !dayMinWidth;
+            var hasDetachedAxis = dayMinWidth;
+            var headerContent = options.dayHeaders && (createElement(DayHeader, { dates: dayTableModel.headerDates, dateProfile: dateProfile, datesRepDistinctDays: true, renderIntro: hasAttachedAxis ? this.renderHeadAxis : null }));
+            var allDayContent = (options.allDaySlot !== false) && (function (contentArg) { return (createElement(DayTable, __assign({}, splitProps.allDay, { dateProfile: dateProfile, dayTableModel: dayTableModel, nextDayThreshold: options.nextDayThreshold, tableMinWidth: contentArg.tableMinWidth, colGroupNode: contentArg.tableColGroupNode, renderRowIntro: hasAttachedAxis ? _this.renderTableRowAxis : null, showWeekNumbers: false, expandRows: false, headerAlignElRef: _this.headerElRef, clientWidth: contentArg.clientWidth, clientHeight: contentArg.clientHeight, forPrint: props.forPrint }, _this.getAllDayMaxEventProps()))); });
+            var timeGridContent = function (contentArg) { return (createElement(DayTimeCols, __assign({}, splitProps.timed, { dayTableModel: dayTableModel, dateProfile: dateProfile, axis: hasAttachedAxis, slotDuration: options.slotDuration, slatMetas: slatMetas, forPrint: props.forPrint, tableColGroupNode: contentArg.tableColGroupNode, tableMinWidth: contentArg.tableMinWidth, clientWidth: contentArg.clientWidth, clientHeight: contentArg.clientHeight, onSlatCoords: _this.handleSlatCoords, expandRows: contentArg.expandRows, onScrollTopRequest: _this.handleScrollTopRequest }))); };
+            return hasDetachedAxis
+                ? this.renderHScrollLayout(headerContent, allDayContent, timeGridContent, dayTableModel.colCnt, dayMinWidth, slatMetas, this.state.slatCoords)
+                : this.renderSimpleLayout(headerContent, allDayContent, timeGridContent);
+        };
+        return DayTimeColsView;
+    }(TimeColsView));
+    function buildTimeColsModel(dateProfile, dateProfileGenerator) {
+        var daySeries = new DaySeriesModel(dateProfile.renderRange, dateProfileGenerator);
+        return new DayTableModel(daySeries, false);
+    }
+
+    var OPTION_REFINERS$2 = {
+        allDaySlot: Boolean,
+    };
+
+    var timeGridPlugin = createPlugin({
+        initialView: 'timeGridWeek',
+        optionRefiners: OPTION_REFINERS$2,
+        views: {
+            timeGrid: {
+                component: DayTimeColsView,
+                usesMinMaxTime: true,
+                allDaySlot: true,
+                slotDuration: '00:30:00',
+                slotEventOverlap: true, // a bad name. confused with overlap/constraint system
+            },
+            timeGridDay: {
+                type: 'timeGrid',
+                duration: { days: 1 },
+            },
+            timeGridWeek: {
+                type: 'timeGrid',
+                duration: { weeks: 1 },
+            },
+        },
+    });
+
+    var ListViewHeaderRow = /** @class */ (function (_super) {
+        __extends(ListViewHeaderRow, _super);
+        function ListViewHeaderRow() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        ListViewHeaderRow.prototype.render = function () {
+            var _a = this.props, dayDate = _a.dayDate, todayRange = _a.todayRange;
+            var _b = this.context, theme = _b.theme, dateEnv = _b.dateEnv, options = _b.options, viewApi = _b.viewApi;
+            var dayMeta = getDateMeta(dayDate, todayRange);
+            // will ever be falsy?
+            var text = options.listDayFormat ? dateEnv.format(dayDate, options.listDayFormat) : '';
+            // will ever be falsy? also, BAD NAME "alt"
+            var sideText = options.listDaySideFormat ? dateEnv.format(dayDate, options.listDaySideFormat) : '';
+            var navLinkData = options.navLinks
+                ? buildNavLinkData(dayDate)
+                : null;
+            var hookProps = __assign({ date: dateEnv.toDate(dayDate), view: viewApi, text: text,
+                sideText: sideText,
+                navLinkData: navLinkData }, dayMeta);
+            var classNames = ['fc-list-day'].concat(getDayClassNames(dayMeta, theme));
+            // TODO: make a reusable HOC for dayHeader (used in daygrid/timegrid too)
+            return (createElement(RenderHook, { hookProps: hookProps, classNames: options.dayHeaderClassNames, content: options.dayHeaderContent, defaultContent: renderInnerContent, didMount: options.dayHeaderDidMount, willUnmount: options.dayHeaderWillUnmount }, function (rootElRef, customClassNames, innerElRef, innerContent) { return (createElement("tr", { ref: rootElRef, className: classNames.concat(customClassNames).join(' '), "data-date": formatDayString(dayDate) },
+                createElement("th", { colSpan: 3 },
+                    createElement("div", { className: 'fc-list-day-cushion ' + theme.getClass('tableCellShaded'), ref: innerElRef }, innerContent)))); }));
+        };
+        return ListViewHeaderRow;
+    }(BaseComponent));
+    function renderInnerContent(props) {
+        var navLinkAttrs = props.navLinkData // is there a type for this?
+            ? { 'data-navlink': props.navLinkData, tabIndex: 0 }
+            : {};
+        return (createElement(Fragment, null,
+            props.text && (createElement("a", __assign({ className: "fc-list-day-text" }, navLinkAttrs), props.text)),
+            props.sideText && (createElement("a", __assign({ className: "fc-list-day-side-text" }, navLinkAttrs), props.sideText))));
+    }
+
+    var DEFAULT_TIME_FORMAT = createFormatter({
+        hour: 'numeric',
+        minute: '2-digit',
+        meridiem: 'short',
+    });
+    var ListViewEventRow = /** @class */ (function (_super) {
+        __extends(ListViewEventRow, _super);
+        function ListViewEventRow() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        ListViewEventRow.prototype.render = function () {
+            var _a = this, props = _a.props, context = _a.context;
+            var seg = props.seg;
+            var timeFormat = context.options.eventTimeFormat || DEFAULT_TIME_FORMAT;
+            return (createElement(EventRoot, { seg: seg, timeText: "" // BAD. because of all-day content
+                , disableDragging: true, disableResizing: true, defaultContent: renderEventInnerContent, isPast: props.isPast, isFuture: props.isFuture, isToday: props.isToday, isSelected: props.isSelected, isDragging: props.isDragging, isResizing: props.isResizing, isDateSelecting: props.isDateSelecting }, function (rootElRef, classNames, innerElRef, innerContent, hookProps) { return (createElement("tr", { className: ['fc-list-event', hookProps.event.url ? 'fc-event-forced-url' : ''].concat(classNames).join(' '), ref: rootElRef },
+                buildTimeContent(seg, timeFormat, context),
+                createElement("td", { className: "fc-list-event-graphic" },
+                    createElement("span", { className: "fc-list-event-dot", style: { borderColor: hookProps.borderColor || hookProps.backgroundColor } })),
+                createElement("td", { className: "fc-list-event-title", ref: innerElRef }, innerContent))); }));
+        };
+        return ListViewEventRow;
+    }(BaseComponent));
+    function renderEventInnerContent(props) {
+        var event = props.event;
+        var url = event.url;
+        var anchorAttrs = url ? { href: url } : {};
+        return (createElement("a", __assign({}, anchorAttrs), event.title));
+    }
+    function buildTimeContent(seg, timeFormat, context) {
+        var options = context.options;
+        if (options.displayEventTime !== false) {
+            var eventDef = seg.eventRange.def;
+            var eventInstance = seg.eventRange.instance;
+            var doAllDay = false;
+            var timeText = void 0;
+            if (eventDef.allDay) {
+                doAllDay = true;
+            }
+            else if (isMultiDayRange(seg.eventRange.range)) { // TODO: use (!isStart || !isEnd) instead?
+                if (seg.isStart) {
+                    timeText = buildSegTimeText(seg, timeFormat, context, null, null, eventInstance.range.start, seg.end);
+                }
+                else if (seg.isEnd) {
+                    timeText = buildSegTimeText(seg, timeFormat, context, null, null, seg.start, eventInstance.range.end);
+                }
+                else {
+                    doAllDay = true;
+                }
+            }
+            else {
+                timeText = buildSegTimeText(seg, timeFormat, context);
+            }
+            if (doAllDay) {
+                var hookProps = {
+                    text: context.options.allDayText,
+                    view: context.viewApi,
+                };
+                return (createElement(RenderHook, { hookProps: hookProps, classNames: options.allDayClassNames, content: options.allDayContent, defaultContent: renderAllDayInner, didMount: options.allDayDidMount, willUnmount: options.allDayWillUnmount }, function (rootElRef, classNames, innerElRef, innerContent) { return (createElement("td", { className: ['fc-list-event-time'].concat(classNames).join(' '), ref: rootElRef }, innerContent)); }));
+            }
+            return (createElement("td", { className: "fc-list-event-time" }, timeText));
+        }
+        return null;
+    }
+    function renderAllDayInner(hookProps) {
+        return hookProps.text;
+    }
+
+    /*
+    Responsible for the scroller, and forwarding event-related actions into the "grid".
+    */
+    var ListView = /** @class */ (function (_super) {
+        __extends(ListView, _super);
+        function ListView() {
+            var _this = _super !== null && _super.apply(this, arguments) || this;
+            _this.computeDateVars = memoize(computeDateVars);
+            _this.eventStoreToSegs = memoize(_this._eventStoreToSegs);
+            _this.setRootEl = function (rootEl) {
+                if (rootEl) {
+                    _this.context.registerInteractiveComponent(_this, {
+                        el: rootEl,
+                    });
+                }
+                else {
+                    _this.context.unregisterInteractiveComponent(_this);
+                }
+            };
+            return _this;
+        }
+        ListView.prototype.render = function () {
+            var _this = this;
+            var _a = this, props = _a.props, context = _a.context;
+            var extraClassNames = [
+                'fc-list',
+                context.theme.getClass('table'),
+                context.options.stickyHeaderDates !== false ? 'fc-list-sticky' : '',
+            ];
+            var _b = this.computeDateVars(props.dateProfile), dayDates = _b.dayDates, dayRanges = _b.dayRanges;
+            var eventSegs = this.eventStoreToSegs(props.eventStore, props.eventUiBases, dayRanges);
+            return (createElement(ViewRoot, { viewSpec: context.viewSpec, elRef: this.setRootEl }, function (rootElRef, classNames) { return (createElement("div", { ref: rootElRef, className: extraClassNames.concat(classNames).join(' ') },
+                createElement(Scroller, { liquid: !props.isHeightAuto, overflowX: props.isHeightAuto ? 'visible' : 'hidden', overflowY: props.isHeightAuto ? 'visible' : 'auto' }, eventSegs.length > 0 ?
+                    _this.renderSegList(eventSegs, dayDates) :
+                    _this.renderEmptyMessage()))); }));
+        };
+        ListView.prototype.renderEmptyMessage = function () {
+            var _a = this.context, options = _a.options, viewApi = _a.viewApi;
+            var hookProps = {
+                text: options.noEventsText,
+                view: viewApi,
+            };
+            return (createElement(RenderHook, { hookProps: hookProps, classNames: options.noEventsClassNames, content: options.noEventsContent, defaultContent: renderNoEventsInner, didMount: options.noEventsDidMount, willUnmount: options.noEventsWillUnmount }, function (rootElRef, classNames, innerElRef, innerContent) { return (createElement("div", { className: ['fc-list-empty'].concat(classNames).join(' '), ref: rootElRef },
+                createElement("div", { className: "fc-list-empty-cushion", ref: innerElRef }, innerContent))); }));
+        };
+        ListView.prototype.renderSegList = function (allSegs, dayDates) {
+            var _a = this.context, theme = _a.theme, options = _a.options;
+            var segsByDay = groupSegsByDay(allSegs); // sparse array
+            return (createElement(NowTimer, { unit: "day" }, function (nowDate, todayRange) {
+                var innerNodes = [];
+                for (var dayIndex = 0; dayIndex < segsByDay.length; dayIndex += 1) {
+                    var daySegs = segsByDay[dayIndex];
+                    if (daySegs) { // sparse array, so might be undefined
+                        var dayStr = dayDates[dayIndex].toISOString();
+                        // append a day header
+                        innerNodes.push(createElement(ListViewHeaderRow, { key: dayStr, dayDate: dayDates[dayIndex], todayRange: todayRange }));
+                        daySegs = sortEventSegs(daySegs, options.eventOrder);
+                        for (var _i = 0, daySegs_1 = daySegs; _i < daySegs_1.length; _i++) {
+                            var seg = daySegs_1[_i];
+                            innerNodes.push(createElement(ListViewEventRow, __assign({ key: dayStr + ':' + seg.eventRange.instance.instanceId /* are multiple segs for an instanceId */, seg: seg, isDragging: false, isResizing: false, isDateSelecting: false, isSelected: false }, getSegMeta(seg, todayRange, nowDate))));
+                        }
+                    }
+                }
+                return (createElement("table", { className: 'fc-list-table ' + theme.getClass('table') },
+                    createElement("tbody", null, innerNodes)));
+            }));
+        };
+        ListView.prototype._eventStoreToSegs = function (eventStore, eventUiBases, dayRanges) {
+            return this.eventRangesToSegs(sliceEventStore(eventStore, eventUiBases, this.props.dateProfile.activeRange, this.context.options.nextDayThreshold).fg, dayRanges);
+        };
+        ListView.prototype.eventRangesToSegs = function (eventRanges, dayRanges) {
+            var segs = [];
+            for (var _i = 0, eventRanges_1 = eventRanges; _i < eventRanges_1.length; _i++) {
+                var eventRange = eventRanges_1[_i];
+                segs.push.apply(segs, this.eventRangeToSegs(eventRange, dayRanges));
+            }
+            return segs;
+        };
+        ListView.prototype.eventRangeToSegs = function (eventRange, dayRanges) {
+            var dateEnv = this.context.dateEnv;
+            var nextDayThreshold = this.context.options.nextDayThreshold;
+            var range = eventRange.range;
+            var allDay = eventRange.def.allDay;
+            var dayIndex;
+            var segRange;
+            var seg;
+            var segs = [];
+            for (dayIndex = 0; dayIndex < dayRanges.length; dayIndex += 1) {
+                segRange = intersectRanges(range, dayRanges[dayIndex]);
+                if (segRange) {
+                    seg = {
+                        component: this,
+                        eventRange: eventRange,
+                        start: segRange.start,
+                        end: segRange.end,
+                        isStart: eventRange.isStart && segRange.start.valueOf() === range.start.valueOf(),
+                        isEnd: eventRange.isEnd && segRange.end.valueOf() === range.end.valueOf(),
+                        dayIndex: dayIndex,
+                    };
+                    segs.push(seg);
+                    // detect when range won't go fully into the next day,
+                    // and mutate the latest seg to the be the end.
+                    if (!seg.isEnd && !allDay &&
+                        dayIndex + 1 < dayRanges.length &&
+                        range.end <
+                            dateEnv.add(dayRanges[dayIndex + 1].start, nextDayThreshold)) {
+                        seg.end = range.end;
+                        seg.isEnd = true;
+                        break;
+                    }
+                }
+            }
+            return segs;
+        };
+        return ListView;
+    }(DateComponent));
+    function renderNoEventsInner(hookProps) {
+        return hookProps.text;
+    }
+    function computeDateVars(dateProfile) {
+        var dayStart = startOfDay(dateProfile.renderRange.start);
+        var viewEnd = dateProfile.renderRange.end;
+        var dayDates = [];
+        var dayRanges = [];
+        while (dayStart < viewEnd) {
+            dayDates.push(dayStart);
+            dayRanges.push({
+                start: dayStart,
+                end: addDays(dayStart, 1),
+            });
+            dayStart = addDays(dayStart, 1);
+        }
+        return { dayDates: dayDates, dayRanges: dayRanges };
+    }
+    // Returns a sparse array of arrays, segs grouped by their dayIndex
+    function groupSegsByDay(segs) {
+        var segsByDay = []; // sparse array
+        var i;
+        var seg;
+        for (i = 0; i < segs.length; i += 1) {
+            seg = segs[i];
+            (segsByDay[seg.dayIndex] || (segsByDay[seg.dayIndex] = []))
+                .push(seg);
+        }
+        return segsByDay;
+    }
+
+    var OPTION_REFINERS$1 = {
+        listDayFormat: createFalsableFormatter,
+        listDaySideFormat: createFalsableFormatter,
+        noEventsClassNames: identity,
+        noEventsContent: identity,
+        noEventsDidMount: identity,
+        noEventsWillUnmount: identity,
+        // noEventsText is defined in base options
+    };
+    function createFalsableFormatter(input) {
+        return input === false ? null : createFormatter(input);
+    }
+
+    var listPlugin = createPlugin({
+        optionRefiners: OPTION_REFINERS$1,
+        views: {
+            list: {
+                component: ListView,
+                buttonTextKey: 'list',
+                listDayFormat: { month: 'long', day: 'numeric', year: 'numeric' }, // like "January 1, 2016"
+            },
+            listDay: {
+                type: 'list',
+                duration: { days: 1 },
+                listDayFormat: { weekday: 'long' }, // day-of-week is all we need. full date is probably in headerToolbar
+            },
+            listWeek: {
+                type: 'list',
+                duration: { weeks: 1 },
+                listDayFormat: { weekday: 'long' },
+                listDaySideFormat: { month: 'long', day: 'numeric', year: 'numeric' },
+            },
+            listMonth: {
+                type: 'list',
+                duration: { month: 1 },
+                listDaySideFormat: { weekday: 'long' }, // day-of-week is nice-to-have
+            },
+            listYear: {
+                type: 'list',
+                duration: { year: 1 },
+                listDaySideFormat: { weekday: 'long' }, // day-of-week is nice-to-have
+            },
+        },
+    });
+
+    var BootstrapTheme = /** @class */ (function (_super) {
+        __extends(BootstrapTheme, _super);
+        function BootstrapTheme() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        return BootstrapTheme;
+    }(Theme));
+    BootstrapTheme.prototype.classes = {
+        root: 'fc-theme-bootstrap',
+        table: 'table-bordered',
+        tableCellShaded: 'table-active',
+        buttonGroup: 'btn-group',
+        button: 'btn btn-primary',
+        buttonActive: 'active',
+        popover: 'popover',
+        popoverHeader: 'popover-header',
+        popoverContent: 'popover-body',
+    };
+    BootstrapTheme.prototype.baseIconClass = 'fa';
+    BootstrapTheme.prototype.iconClasses = {
+        close: 'fa-times',
+        prev: 'fa-chevron-left',
+        next: 'fa-chevron-right',
+        prevYear: 'fa-angle-double-left',
+        nextYear: 'fa-angle-double-right',
+    };
+    BootstrapTheme.prototype.rtlIconClasses = {
+        prev: 'fa-chevron-right',
+        next: 'fa-chevron-left',
+        prevYear: 'fa-angle-double-right',
+        nextYear: 'fa-angle-double-left',
+    };
+    BootstrapTheme.prototype.iconOverrideOption = 'bootstrapFontAwesome'; // TODO: make TS-friendly. move the option-processing into this plugin
+    BootstrapTheme.prototype.iconOverrideCustomButtonOption = 'bootstrapFontAwesome';
+    BootstrapTheme.prototype.iconOverridePrefix = 'fa-';
+    var plugin = createPlugin({
+        themeClasses: {
+            bootstrap: BootstrapTheme,
+        },
+    });
+
+    // rename this file to options.ts like other packages?
+    var OPTION_REFINERS = {
+        googleCalendarApiKey: String,
+    };
+
+    var EVENT_SOURCE_REFINERS = {
+        googleCalendarApiKey: String,
+        googleCalendarId: String,
+        googleCalendarApiBase: String,
+        extraParams: identity,
+    };
+
+    // TODO: expose somehow
+    var API_BASE = 'https://www.googleapis.com/calendar/v3/calendars';
+    var eventSourceDef = {
+        parseMeta: function (refined) {
+            var googleCalendarId = refined.googleCalendarId;
+            if (!googleCalendarId && refined.url) {
+                googleCalendarId = parseGoogleCalendarId(refined.url);
+            }
+            if (googleCalendarId) {
+                return {
+                    googleCalendarId: googleCalendarId,
+                    googleCalendarApiKey: refined.googleCalendarApiKey,
+                    googleCalendarApiBase: refined.googleCalendarApiBase,
+                    extraParams: refined.extraParams,
+                };
+            }
+            return null;
+        },
+        fetch: function (arg, onSuccess, onFailure) {
+            var _a = arg.context, dateEnv = _a.dateEnv, options = _a.options;
+            var meta = arg.eventSource.meta;
+            var apiKey = meta.googleCalendarApiKey || options.googleCalendarApiKey;
+            if (!apiKey) {
+                onFailure({
+                    message: 'Specify a googleCalendarApiKey. See http://fullcalendar.io/docs/google_calendar/',
+                });
+            }
+            else {
+                var url = buildUrl(meta);
+                // TODO: make DRY with json-feed-event-source
+                var extraParams = meta.extraParams;
+                var extraParamsObj = typeof extraParams === 'function' ? extraParams() : extraParams;
+                var requestParams_1 = buildRequestParams(arg.range, apiKey, extraParamsObj, dateEnv);
+                requestJson('GET', url, requestParams_1, function (body, xhr) {
+                    if (body.error) {
+                        onFailure({
+                            message: 'Google Calendar API: ' + body.error.message,
+                            errors: body.error.errors,
+                            xhr: xhr,
+                        });
+                    }
+                    else {
+                        onSuccess({
+                            rawEvents: gcalItemsToRawEventDefs(body.items, requestParams_1.timeZone),
+                            xhr: xhr,
+                        });
+                    }
+                }, function (message, xhr) {
+                    onFailure({ message: message, xhr: xhr });
+                });
+            }
+        },
+    };
+    function parseGoogleCalendarId(url) {
+        var match;
+        // detect if the ID was specified as a single string.
+        // will match calendars like "asdf1234@calendar.google.com" in addition to person email calendars.
+        if (/^[^/]+@([^/.]+\.)*(google|googlemail|gmail)\.com$/.test(url)) {
+            return url;
+        }
+        if ((match = /^https:\/\/www.googleapis.com\/calendar\/v3\/calendars\/([^/]*)/.exec(url)) ||
+            (match = /^https?:\/\/www.google.com\/calendar\/feeds\/([^/]*)/.exec(url))) {
+            return decodeURIComponent(match[1]);
+        }
+        return null;
+    }
+    function buildUrl(meta) {
+        var apiBase = meta.googleCalendarApiBase;
+        if (!apiBase) {
+            apiBase = API_BASE;
+        }
+        return apiBase + '/' + encodeURIComponent(meta.googleCalendarId) + '/events';
+    }
+    function buildRequestParams(range, apiKey, extraParams, dateEnv) {
+        var params;
+        var startStr;
+        var endStr;
+        if (dateEnv.canComputeOffset) {
+            // strings will naturally have offsets, which GCal needs
+            startStr = dateEnv.formatIso(range.start);
+            endStr = dateEnv.formatIso(range.end);
+        }
+        else {
+            // when timezone isn't known, we don't know what the UTC offset should be, so ask for +/- 1 day
+            // from the UTC day-start to guarantee we're getting all the events
+            // (start/end will be UTC-coerced dates, so toISOString is okay)
+            startStr = addDays(range.start, -1).toISOString();
+            endStr = addDays(range.end, 1).toISOString();
+        }
+        params = __assign(__assign({}, (extraParams || {})), { key: apiKey, timeMin: startStr, timeMax: endStr, singleEvents: true, maxResults: 9999 });
+        if (dateEnv.timeZone !== 'local') {
+            params.timeZone = dateEnv.timeZone;
+        }
+        return params;
+    }
+    function gcalItemsToRawEventDefs(items, gcalTimezone) {
+        return items.map(function (item) { return gcalItemToRawEventDef(item, gcalTimezone); });
+    }
+    function gcalItemToRawEventDef(item, gcalTimezone) {
+        var url = item.htmlLink || null;
+        // make the URLs for each event show times in the correct timezone
+        if (url && gcalTimezone) {
+            url = injectQsComponent(url, 'ctz=' + gcalTimezone);
+        }
+        return {
+            id: item.id,
+            title: item.summary,
+            start: item.start.dateTime || item.start.date,
+            end: item.end.dateTime || item.end.date,
+            url: url,
+            location: item.location,
+            description: item.description,
+            attachments: item.attachments || [],
+            extendedProps: (item.extendedProperties || {}).shared || {},
+        };
+    }
+    // Injects a string like "arg=value" into the querystring of a URL
+    // TODO: move to a general util file?
+    function injectQsComponent(url, component) {
+        // inject it after the querystring but before the fragment
+        return url.replace(/(\?.*?)?(#|$)/, function (whole, qs, hash) { return (qs ? qs + '&' : '?') + component + hash; });
+    }
+    var googleCalendarPlugin = createPlugin({
+        eventSourceDefs: [eventSourceDef],
+        optionRefiners: OPTION_REFINERS,
+        eventSourceRefiners: EVENT_SOURCE_REFINERS,
+    });
+
+    globalPlugins.push(interactionPlugin, dayGridPlugin, timeGridPlugin, listPlugin, plugin, googleCalendarPlugin);
+
+    exports.BASE_OPTION_DEFAULTS = BASE_OPTION_DEFAULTS;
+    exports.BASE_OPTION_REFINERS = BASE_OPTION_REFINERS;
+    exports.BaseComponent = BaseComponent;
+    exports.BgEvent = BgEvent;
+    exports.BootstrapTheme = BootstrapTheme;
+    exports.Calendar = Calendar;
+    exports.CalendarApi = CalendarApi;
+    exports.CalendarContent = CalendarContent;
+    exports.CalendarDataManager = CalendarDataManager;
+    exports.CalendarDataProvider = CalendarDataProvider;
+    exports.CalendarRoot = CalendarRoot;
+    exports.Component = Component;
+    exports.ContentHook = ContentHook;
+    exports.CustomContentRenderContext = CustomContentRenderContext;
+    exports.DateComponent = DateComponent;
+    exports.DateEnv = DateEnv;
+    exports.DateProfileGenerator = DateProfileGenerator;
+    exports.DayCellContent = DayCellContent;
+    exports.DayCellRoot = DayCellRoot;
+    exports.DayGridView = DayTableView;
+    exports.DayHeader = DayHeader;
+    exports.DaySeriesModel = DaySeriesModel;
+    exports.DayTable = DayTable;
+    exports.DayTableModel = DayTableModel;
+    exports.DayTableSlicer = DayTableSlicer;
+    exports.DayTimeCols = DayTimeCols;
+    exports.DayTimeColsSlicer = DayTimeColsSlicer;
+    exports.DayTimeColsView = DayTimeColsView;
+    exports.DelayedRunner = DelayedRunner;
+    exports.Draggable = ExternalDraggable;
+    exports.ElementDragging = ElementDragging;
+    exports.ElementScrollController = ElementScrollController;
+    exports.Emitter = Emitter;
+    exports.EventApi = EventApi;
+    exports.EventRoot = EventRoot;
+    exports.EventSourceApi = EventSourceApi;
+    exports.FeaturefulElementDragging = FeaturefulElementDragging;
+    exports.Fragment = Fragment;
+    exports.Interaction = Interaction;
+    exports.ListView = ListView;
+    exports.MoreLinkRoot = MoreLinkRoot;
+    exports.MountHook = MountHook;
+    exports.NamedTimeZoneImpl = NamedTimeZoneImpl;
+    exports.NowIndicatorRoot = NowIndicatorRoot;
+    exports.NowTimer = NowTimer;
+    exports.PointerDragging = PointerDragging;
+    exports.PositionCache = PositionCache;
+    exports.RefMap = RefMap;
+    exports.RenderHook = RenderHook;
+    exports.ScrollController = ScrollController;
+    exports.ScrollResponder = ScrollResponder;
+    exports.Scroller = Scroller;
+    exports.SegHierarchy = SegHierarchy;
+    exports.SimpleScrollGrid = SimpleScrollGrid;
+    exports.Slicer = Slicer;
+    exports.Splitter = Splitter;
+    exports.StandardEvent = StandardEvent;
+    exports.Table = Table;
+    exports.TableDateCell = TableDateCell;
+    exports.TableDowCell = TableDowCell;
+    exports.TableView = TableView;
+    exports.Theme = Theme;
+    exports.ThirdPartyDraggable = ThirdPartyDraggable;
+    exports.TimeCols = TimeCols;
+    exports.TimeColsSlatsCoords = TimeColsSlatsCoords;
+    exports.TimeColsView = TimeColsView;
+    exports.ViewApi = ViewApi;
+    exports.ViewContextType = ViewContextType;
+    exports.ViewRoot = ViewRoot;
+    exports.WeekNumberRoot = WeekNumberRoot;
+    exports.WindowScrollController = WindowScrollController;
+    exports.addDays = addDays;
+    exports.addDurations = addDurations;
+    exports.addMs = addMs;
+    exports.addWeeks = addWeeks;
+    exports.allowContextMenu = allowContextMenu;
+    exports.allowSelection = allowSelection;
+    exports.applyMutationToEventStore = applyMutationToEventStore;
+    exports.applyStyle = applyStyle;
+    exports.applyStyleProp = applyStyleProp;
+    exports.asCleanDays = asCleanDays;
+    exports.asRoughMinutes = asRoughMinutes;
+    exports.asRoughMs = asRoughMs;
+    exports.asRoughSeconds = asRoughSeconds;
+    exports.binarySearch = binarySearch;
+    exports.buildClassNameNormalizer = buildClassNameNormalizer;
+    exports.buildDayRanges = buildDayRanges;
+    exports.buildDayTableModel = buildDayTableModel;
+    exports.buildEntryKey = buildEntryKey;
+    exports.buildEventApis = buildEventApis;
+    exports.buildEventRangeKey = buildEventRangeKey;
+    exports.buildHashFromArray = buildHashFromArray;
+    exports.buildIsoString = buildIsoString;
+    exports.buildNavLinkData = buildNavLinkData;
+    exports.buildSegCompareObj = buildSegCompareObj;
+    exports.buildSegTimeText = buildSegTimeText;
+    exports.buildSlatMetas = buildSlatMetas;
+    exports.buildTimeColsModel = buildTimeColsModel;
+    exports.collectFromHash = collectFromHash;
+    exports.combineEventUis = combineEventUis;
+    exports.compareByFieldSpec = compareByFieldSpec;
+    exports.compareByFieldSpecs = compareByFieldSpecs;
+    exports.compareNumbers = compareNumbers;
+    exports.compareObjs = compareObjs;
+    exports.computeEarliestSegStart = computeEarliestSegStart;
+    exports.computeEdges = computeEdges;
+    exports.computeFallbackHeaderFormat = computeFallbackHeaderFormat;
+    exports.computeHeightAndMargins = computeHeightAndMargins;
+    exports.computeInnerRect = computeInnerRect;
+    exports.computeRect = computeRect;
+    exports.computeSegDraggable = computeSegDraggable;
+    exports.computeSegEndResizable = computeSegEndResizable;
+    exports.computeSegStartResizable = computeSegStartResizable;
+    exports.computeShrinkWidth = computeShrinkWidth;
+    exports.computeSmallestCellWidth = computeSmallestCellWidth;
+    exports.computeVisibleDayRange = computeVisibleDayRange;
+    exports.config = config;
+    exports.constrainPoint = constrainPoint;
+    exports.createContext = createContext;
+    exports.createDuration = createDuration;
+    exports.createElement = createElement;
+    exports.createEmptyEventStore = createEmptyEventStore;
+    exports.createEventInstance = createEventInstance;
+    exports.createEventUi = createEventUi;
+    exports.createFormatter = createFormatter;
+    exports.createPlugin = createPlugin;
+    exports.createPortal = createPortal;
+    exports.createRef = createRef;
+    exports.diffDates = diffDates;
+    exports.diffDayAndTime = diffDayAndTime;
+    exports.diffDays = diffDays;
+    exports.diffPoints = diffPoints;
+    exports.diffWeeks = diffWeeks;
+    exports.diffWholeDays = diffWholeDays;
+    exports.diffWholeWeeks = diffWholeWeeks;
+    exports.disableCursor = disableCursor;
+    exports.elementClosest = elementClosest;
+    exports.elementMatches = elementMatches;
+    exports.enableCursor = enableCursor;
+    exports.eventTupleToStore = eventTupleToStore;
+    exports.filterEventStoreDefs = filterEventStoreDefs;
+    exports.filterHash = filterHash;
+    exports.findDirectChildren = findDirectChildren;
+    exports.findElements = findElements;
+    exports.flexibleCompare = flexibleCompare;
+    exports.flushToDom = flushToDom;
+    exports.formatDate = formatDate;
+    exports.formatDayString = formatDayString;
+    exports.formatIsoTimeString = formatIsoTimeString;
+    exports.formatRange = formatRange;
+    exports.getAllowYScrolling = getAllowYScrolling;
+    exports.getCanVGrowWithinCell = getCanVGrowWithinCell;
+    exports.getClippingParents = getClippingParents;
+    exports.getDateMeta = getDateMeta;
+    exports.getDayClassNames = getDayClassNames;
+    exports.getDefaultEventEnd = getDefaultEventEnd;
+    exports.getElRoot = getElRoot;
+    exports.getElSeg = getElSeg;
+    exports.getEntrySpanEnd = getEntrySpanEnd;
+    exports.getEventClassNames = getEventClassNames;
+    exports.getEventTargetViaRoot = getEventTargetViaRoot;
+    exports.getIsRtlScrollbarOnLeft = getIsRtlScrollbarOnLeft;
+    exports.getRectCenter = getRectCenter;
+    exports.getRelevantEvents = getRelevantEvents;
+    exports.getScrollGridClassNames = getScrollGridClassNames;
+    exports.getScrollbarWidths = getScrollbarWidths;
+    exports.getSectionClassNames = getSectionClassNames;
+    exports.getSectionHasLiquidHeight = getSectionHasLiquidHeight;
+    exports.getSegMeta = getSegMeta;
+    exports.getSlotClassNames = getSlotClassNames;
+    exports.getStickyFooterScrollbar = getStickyFooterScrollbar;
+    exports.getStickyHeaderDates = getStickyHeaderDates;
+    exports.getUnequalProps = getUnequalProps;
+    exports.globalLocales = globalLocales;
+    exports.globalPlugins = globalPlugins;
+    exports.greatestDurationDenominator = greatestDurationDenominator;
+    exports.groupIntersectingEntries = groupIntersectingEntries;
+    exports.guid = guid;
+    exports.hasBgRendering = hasBgRendering;
+    exports.hasShrinkWidth = hasShrinkWidth;
+    exports.identity = identity;
+    exports.interactionSettingsStore = interactionSettingsStore;
+    exports.interactionSettingsToStore = interactionSettingsToStore;
+    exports.intersectRanges = intersectRanges;
+    exports.intersectRects = intersectRects;
+    exports.intersectSpans = intersectSpans;
+    exports.isArraysEqual = isArraysEqual;
+    exports.isColPropsEqual = isColPropsEqual;
+    exports.isDateSelectionValid = isDateSelectionValid;
+    exports.isDateSpansEqual = isDateSpansEqual;
+    exports.isInt = isInt;
+    exports.isInteractionValid = isInteractionValid;
+    exports.isMultiDayRange = isMultiDayRange;
+    exports.isPropsEqual = isPropsEqual;
+    exports.isPropsValid = isPropsValid;
+    exports.isValidDate = isValidDate;
+    exports.joinSpans = joinSpans;
+    exports.listenBySelector = listenBySelector;
+    exports.mapHash = mapHash;
+    exports.memoize = memoize;
+    exports.memoizeArraylike = memoizeArraylike;
+    exports.memoizeHashlike = memoizeHashlike;
+    exports.memoizeObjArg = memoizeObjArg;
+    exports.mergeEventStores = mergeEventStores;
+    exports.multiplyDuration = multiplyDuration;
+    exports.padStart = padStart;
+    exports.parseBusinessHours = parseBusinessHours;
+    exports.parseClassNames = parseClassNames;
+    exports.parseDragMeta = parseDragMeta;
+    exports.parseEventDef = parseEventDef;
+    exports.parseFieldSpecs = parseFieldSpecs;
+    exports.parseMarker = parse;
+    exports.pointInsideRect = pointInsideRect;
+    exports.preventContextMenu = preventContextMenu;
+    exports.preventDefault = preventDefault;
+    exports.preventSelection = preventSelection;
+    exports.rangeContainsMarker = rangeContainsMarker;
+    exports.rangeContainsRange = rangeContainsRange;
+    exports.rangesEqual = rangesEqual;
+    exports.rangesIntersect = rangesIntersect;
+    exports.refineEventDef = refineEventDef;
+    exports.refineProps = refineProps;
+    exports.removeElement = removeElement;
+    exports.removeExact = removeExact;
+    exports.render = render;
+    exports.renderChunkContent = renderChunkContent;
+    exports.renderFill = renderFill;
+    exports.renderMicroColGroup = renderMicroColGroup;
+    exports.renderScrollShim = renderScrollShim;
+    exports.requestJson = requestJson;
+    exports.sanitizeShrinkWidth = sanitizeShrinkWidth;
+    exports.setElSeg = setElSeg;
+    exports.setRef = setRef;
+    exports.sliceEventStore = sliceEventStore;
+    exports.sliceEvents = sliceEvents;
+    exports.sortEventSegs = sortEventSegs;
+    exports.startOfDay = startOfDay;
+    exports.translateRect = translateRect;
+    exports.triggerDateSelect = triggerDateSelect;
+    exports.unmountComponentAtNode = unmountComponentAtNode;
+    exports.unpromisify = unpromisify;
+    exports.version = version;
+    exports.whenTransitionDone = whenTransitionDone;
+    exports.wholeDivideDurations = wholeDivideDurations;
+
+    Object.defineProperty(exports, '__esModule', { value: true });
+
+    return exports;
+
+}({}));
diff --git a/apps/schoolCalendar/screenshot_basic.png b/apps/schoolCalendar/screenshot_basic.png
new file mode 100644
index 000000000..879ad6a3c
Binary files /dev/null and b/apps/schoolCalendar/screenshot_basic.png differ
diff --git a/apps/schoolCalendar/screenshot_info.png b/apps/schoolCalendar/screenshot_info.png
new file mode 100644
index 000000000..c539b1b1c
Binary files /dev/null and b/apps/schoolCalendar/screenshot_info.png differ
diff --git a/apps/sclock/ChangeLog b/apps/sclock/ChangeLog
index 44a0ec504..dc76b8299 100644
--- a/apps/sclock/ChangeLog
+++ b/apps/sclock/ChangeLog
@@ -3,3 +3,4 @@
 0.04: Make this clock do 12h and 24h
 0.05: setUI, screen size changes
 0.06: Use Bangle.setUI for button/launcher handling
+0.07: Update *on* the minute rather than every 15 secs
diff --git a/apps/sclock/clock-simple.js b/apps/sclock/clock-simple.js
index 8fb204d22..a399b05a7 100644
--- a/apps/sclock/clock-simple.js
+++ b/apps/sclock/clock-simple.js
@@ -1,4 +1,3 @@
-/* jshint esversion: 6 */
 const big = g.getWidth()>200;
 const timeFontSize = big?6:5;
 const dateFontSize = big?3:2;
@@ -14,7 +13,19 @@ const yposGMT = xyCenter*1.9;
 // Check settings for what type our clock should be
 var is12Hour = (require("Storage").readJSON("setting.json",1)||{})["12hour"];
 
-function drawSimpleClock() {
+// timeout used to update every minute
+var drawTimeout;
+
+// schedule a draw for the next minute
+function queueDraw() {
+  if (drawTimeout) clearTimeout(drawTimeout);
+  drawTimeout = setTimeout(function() {
+    drawTimeout = undefined;
+    draw();
+  }, 60000 - (Date.now() % 60000));
+}
+
+function draw() {
   // get date
   var d = new Date();
   var da = d.toString().split(" ");
@@ -60,11 +71,18 @@ function drawSimpleClock() {
   var gmt = da[5];
   g.setFont(font, gmtFontSize);
   g.drawString(gmt, xyCenter, yposGMT, true);
+
+  queueDraw();
 }
 
-// handle switch display on by pressing BTN1
-Bangle.on('lcdPower', function(on) {
-  if (on) drawSimpleClock();
+// Stop updates when LCD is off, restart when on
+Bangle.on('lcdPower',on=>{
+  if (on) {
+    draw(); // draw immediately, queue redraw
+  } else { // stop draw timer
+    if (drawTimeout) clearTimeout(drawTimeout);
+    drawTimeout = undefined;
+  }
 });
 
 // clean app screen
@@ -74,8 +92,5 @@ Bangle.setUI("clock");
 Bangle.loadWidgets();
 Bangle.drawWidgets();
 
-// refesh every 15 sec
-setInterval(drawSimpleClock, 15E3);
-
 // draw now
-drawSimpleClock();
+draw();
diff --git a/apps/sclock/screenshot_simplec.png b/apps/sclock/screenshot_simplec.png
new file mode 100644
index 000000000..a12db3ec8
Binary files /dev/null and b/apps/sclock/screenshot_simplec.png differ
diff --git a/apps/scolor/bangle1-view-color-screenshot.png b/apps/scolor/bangle1-view-color-screenshot.png
new file mode 100644
index 000000000..d5139f4d9
Binary files /dev/null and b/apps/scolor/bangle1-view-color-screenshot.png differ
diff --git a/apps/score/ChangeLog b/apps/score/ChangeLog
new file mode 100644
index 000000000..5560f00bc
--- /dev/null
+++ b/apps/score/ChangeLog
@@ -0,0 +1 @@
+0.01: New App!
diff --git a/apps/score/README.md b/apps/score/README.md
new file mode 100644
index 000000000..6a5bf8172
--- /dev/null
+++ b/apps/score/README.md
@@ -0,0 +1,50 @@
+This app will allow you to keep scores for most kinds of sports.
+
+# Keybinds
+To correct a falsely awarded point simply open and close the menu within .5 seconds. This will put the app into correction mode (indicated by the `R`).
+In this mode any score increments will be decrements. To move back a set, reduce both players scores to 0, then decrement one of the scores once again.
+
+## Screenshot
+![](screenshot_score.png)
+
+## Bangle.js 1
+| Keybinding          | Description                  |
+|---------------------|------------------------------|
+| `BTN1`              | Increment left player score  |
+| `BTN3`              | Increment right player score |
+| `BTN2`              | Menu                         |
+| touch on left side  | Scroll up                    |
+| touch on right side | Scroll down                  |
+
+## Bangle.js 2
+| Keybinding                          | Description                  |
+|-------------------------------------|------------------------------|
+| `BTN1`                              | Menu                         |
+| touch on left side of divider line  | Increment left player score  |
+| touch on right side of divider line | Increment right player score |
+
+# Settings
+| Setting                            | Description                                                                                                                  |
+|------------------------------------|------------------------------------------------------------------------------------------------------------------------------|
+| `Presets`                          | Enable a preset for one of the configured sports                                                                             |
+| `Sets to win`                      | How many sets a player has to win before the match is won (Maximum sets: this*2-1)                                           |
+| `Sets per page`                    | How many sets should be shown in the app. Further sets will be available by scrolling (ignored if higher than `Sets to win`) |
+| `Score to win`                     | What score ends a given set                                                                                                  |
+| `2-point lead`                     | Does winning a set require a two-point lead                                                                                  |
+| `Maximum score?`                   | Should there be a maximum score, at which point the two-point lead rule falls away                                           |
+| `Maximum score`                    | At which score should the two-point lead rule fall away (ignored if lower than Sets to win)                                  |
+| `Tennis scoring`                   | If enabled, each point in a set will require a full tennis game                                                              |
+| `TB sets?`                         | Should sets that have reached `(maxScore-1):(maxScore-1)` be decided with a tiebreak                                         |
+| All other options starting with TB | Equivalent to option with same name but applied to tiebreaks                                                                 |
+
+The settings can be changed both from within the app by simply pressing `BTN2` (`BTN1` on Bangle.js 2) or in the `App Settings` in the `Settings` app.
+
+If changes are made to the settings from within the app, a new match will automatically be initialized upon exiting the settings.
+
+By default the settings will reflect Badminton rules.
+
+## Tennis Scoring
+While tennis scoring is available, correcting in this mode will reset to the beginning of the current game.
+Resetting at the beginning of the current game will reset to the beginning of the previous game, leaving the user to fast-forward to the correct score once again.
+
+This might get changed at some point.
diff --git a/apps/score/score.app-icon.js b/apps/score/score.app-icon.js
new file mode 100644
index 000000000..b1d4631ba
--- /dev/null
+++ b/apps/score/score.app-icon.js
@@ -0,0 +1 @@
+require("heatshrink").decompress(atob("mEwxH+AH4A/AH4A/AE2IxAKSCigv/F/4vS44ABB4IECAAoKECgM7AAIJBAgQAFBQguJF6HHEhAvKGAwvy4wPB4wuGBQwdCmgJBmguGBQwvJ0ulF5AKFEgeCwQvIBQqPJ4wuHBQ4lEFw4KHF5IAQFJAALF+vNACYv/F/4v053P64vPxPXAAOJF6vP6wbCF52zCQQAB2YvTDIgvOLoWzMJQvOL6JeCss7spgIF5nPMQgvNCAQEBr4FEd6YvVAowv/F/4v4d9WzCANlndlAgOzF82JFQWJGgWJF8xgDAAReGF8RhDLo4vRABQiHABgv/F/4v/F4owTCgIuZAH4A/AH4A/ADgA=="))
diff --git a/apps/score/score.app.js b/apps/score/score.app.js
new file mode 100644
index 000000000..5a0f9c1e1
--- /dev/null
+++ b/apps/score/score.app.js
@@ -0,0 +1,478 @@
+require('Font5x9Numeric7Seg').add(Graphics);
+require('Font7x11Numeric7Seg').add(Graphics);
+require('FontTeletext5x9Ascii').add(Graphics);
+
+let settingsMenu = eval(require('Storage').read('score.settings.js'));
+let settings = settingsMenu(null, null, true);
+
+let tennisScores = ['00','15','30','40','DC','AD'];
+
+let scores = null;
+let tScores = null;
+let cSet = null;
+
+let firstShownSet = null;
+
+let settingsMenuOpened = null;
+let correctionMode = false;
+
+let w = g.getWidth();
+let h = g.getHeight();
+
+let isBangle1 = process.env.BOARD === 'BANGLEJS';
+
+function getXCoord(func) {
+  let offset = 40;
+  return func(w-offset)+offset;
+}
+
+function getSecondsTime() {
+  return Math.floor(getTime() * 1000);
+}
+
+function setupDisplay() {
+  // make sure LCD on Bangle.js 1 stays on
+  if (isBangle1) {
+    if (settings.keepDisplayOn) {
+      Bangle.setLCDTimeout(0);
+      Bangle.setLCDPower(true);
+    } else {
+      Bangle.setLCDTimeout(10);
+    }
+  }
+}
+
+function setupInputWatchers(init) {
+  Bangle.setUI('updown', v => {
+    if (v) {
+      if (isBangle1) {
+        let i = settings.mirrorScoreButtons ? v : v * -1;
+        handleInput(Math.floor((i+2)/2));
+      } else {
+        handleInput(Math.floor((v+2)/2)+3);
+      }
+    }
+  });
+  if (init) {
+    setWatch(() => handleInput(2), isBangle1 ? BTN2 : BTN, { repeat: true });
+    Bangle.on('touch', (b, e) => {
+      if (isBangle1) {
+        if (b === 1) {
+          handleInput(3);
+        } else {
+          handleInput(4);
+        }
+      } else {
+        if (e.x < getXCoord(w => w/2)) {
+          handleInput(0);
+        } else {
+          handleInput(1);
+        }
+      }
+    });
+  }
+}
+
+function setupMatch() {
+  scores = [];
+  for (let s = 0; s < sets(); s++) {
+    scores.push([0,0,null,0,0]);
+  }
+  scores.push([0,0,null,0,0]);
+
+  if (settings.enableTennisScoring) {
+    tScores = [0,0];
+  } else {
+    tScores = null;
+  }
+
+  scores[0][2] = getSecondsTime();
+
+  cSet = 0;
+  setFirstShownSet();
+
+  correctionMode = false;
+}
+
+function showSettingsMenu() {
+  settingsMenuOpened = getSecondsTime();
+  l = null;
+  settingsMenu(function (s, reset) {
+    E.showMenu();
+
+    settings = s;
+
+    if (reset) {
+      setupMatch();
+    } else if (getSecondsTime() - settingsMenuOpened < 500 || correctionMode) {
+      correctionMode = !correctionMode;
+    }
+
+    settingsMenuOpened = null;
+
+    draw();
+
+    setupDisplay();
+    setupInputWatchers();
+  }, function (msg) {
+    switch (msg) {
+      case 'end_set':
+        updateCurrentSet(1);
+        break;
+    }
+  });
+}
+
+function maxScore() {
+  return Math.max(settings.maxScore, settings.winScore);
+}
+
+function tiebreakMaxScore() {
+  return Math.max(settings.maxScoreTiebreakMaxScore, settings.maxScoreTiebreakWinScore);
+}
+
+function setsPerPage() {
+  return Math.min(settings.setsPerPage, sets());
+}
+
+function sets() {
+  return settings.winSets * 2 - 1;
+}
+
+function currentSet() {
+  return matchEnded() ? cSet - 1 : cSet;
+}
+
+function shouldTiebreak() {
+  return settings.enableMaxScoreTiebreak &&
+    scores[cSet][0] + scores[cSet][1] === (maxScore() - 1) * 2;
+}
+
+function formatNumber(num, length) {
+  return num.toString().padStart(length ? length : 2,"0");
+}
+
+function formatDuration(duration) {
+  let durS = Math.floor(duration / 1000);
+  let durM = Math.floor(durS / 60);
+  let durH = Math.floor(durM / 60);
+  durS = durS - durM * 60;
+  durM = durM - durH * 60;
+
+  durS = formatNumber(durS);
+  durM = formatNumber(durM);
+  durH = formatNumber(durH);
+
+  let dur = null;
+  if (durH > 0) {
+    dur = durH + ':' + durM;
+  } else {
+    dur = durM + ':' + durS;
+  }
+
+  return dur;
+}
+
+function tiebreakWon(set, player) {
+  let pScore = scores[set][3+player];
+  let p2Score = scores[set][3+~~!player];
+
+  let winScoreReached = pScore >= settings.maxScoreTiebreakWinScore;
+  let isTwoAhead = !settings.maxScoreTiebreakEnableTwoAhead || pScore - p2Score >= 2;
+  let reachedMaxScore = settings.maxScoreTiebreakEnableMaxScore && pScore >= tiebreakMaxScore();
+
+  return reachedMaxScore || (winScoreReached && isTwoAhead);
+}
+
+function setWon(set, player) {
+  let pScore = scores[set][player];
+  let p2Score = scores[set][~~!player];
+
+  let winScoreReached = pScore >= settings.winScore;
+  let isTwoAhead = !settings.enableTwoAhead || pScore - p2Score >= 2;
+  let tiebreakW = tiebreakWon(set, player);
+  let reachedMaxScore = settings.enableMaxScore && pScore >= maxScore();
+  let manuallyEndedWon = cSet > set ? pScore > p2Score : false;
+
+  return (
+    (settings.enableMaxScoreTiebreak ? tiebreakW : reachedMaxScore) ||
+      (winScoreReached && isTwoAhead) ||
+      manuallyEndedWon
+  );
+}
+
+function setEnded(set) {
+  return setWon(set, 0) || setWon(set, 1);
+}
+
+function setsWon(player) {
+  return Array(sets()).fill(0).map((_, s) => ~~setWon(s, player)).reduce((a,v) => a+v, 0);
+}
+
+function matchWon(player) {
+  return setsWon(player) >= settings.winSets;
+}
+
+function matchEnded() {
+  return (matchWon(0) || matchWon(1)) && cSet > (setsWon(0) + setsWon(1) - 1);
+}
+
+function matchScore(player) {
+  return scores.reduce((acc, val) => acc += val[player], 0);
+}
+
+function setFirstShownSet() {
+  firstShownSet = Math.max(0, currentSet() - setsPerPage() + 1);
+}
+
+function updateCurrentSet(val) {
+  if (val > 0) {
+    cSet++;
+  } else if (val < 0) {
+    cSet--;
+  } else {
+    return;
+  }
+  setFirstShownSet();
+
+  if (val > 0) {
+    scores[cSet][2] = getSecondsTime();
+
+    if (matchEnded()) {
+      firstShownSet = 0;
+    }
+  }
+}
+
+function score(player) {
+  if (!matchEnded()) {
+    setFirstShownSet();
+  }
+
+  if (correctionMode) {
+    if (
+      scores[cSet][0] === 0 && scores[cSet][1] === 0 &&
+        scores[cSet][3] === 0 && scores[cSet][4] === 0 &&
+        cSet > 0
+    ) {
+      updateCurrentSet(-1);
+    }
+
+    if (scores[cSet][3] > 0 || scores[cSet][4] > 0) {
+      if (scores[cSet][3+player] > 0) {
+        scores[cSet][3+player]--;
+      }
+    } else if (scores[cSet][player] > 0) {
+      if (
+        !settings.enableTennisScoring ||
+          (tScores[player] === 0 && tScores[~~!player] === 0)
+      ) {
+        scores[cSet][player]--;
+      } else {
+        tScores[player] = 0;
+        tScores[~~!player] = 0;
+      }
+    }
+  } else {
+    if (matchEnded()) return;
+
+    if (shouldTiebreak()) {
+      scores[cSet][3+player]++;
+    } else if (settings.enableTennisScoring) {
+      if (tScores[player] === 4 && tScores[~~!player] === 5) { // DC : AD
+        tScores[~~!player]--;
+      } else if (tScores[player] === 2 && tScores[~~!player] === 3) { // 30 : 40
+        tScores[0] = 4;
+        tScores[1] = 4;
+      } else if (tScores[player] === 3 || tScores[player] === 5) { // 40 / AD
+        tScores[0] = 0;
+        tScores[1] = 0;
+        scores[cSet][player]++;
+      } else {
+        tScores[player]++;
+      }
+    } else {
+      scores[cSet][player]++;
+    }
+
+    if (setEnded(cSet) && cSet < sets()) {
+      if (shouldTiebreak()) {
+        scores[cSet][player]++;
+      }
+      updateCurrentSet(1);
+    }
+  }
+}
+
+function handleInput(button) {
+  if (settingsMenuOpened) {
+    return;
+  }
+
+  switch (button) {
+    case 0:
+    case 1:
+      score(button);
+      break;
+    case 2:
+      showSettingsMenu();
+      return;
+    case 3:
+    case 4:
+      let hLimit = currentSet() - setsPerPage() + 1;
+      let lLimit = 0;
+      let val = (button * 2 - 7);
+      firstShownSet += val;
+      if (firstShownSet > hLimit) firstShownSet = hLimit;
+      if (firstShownSet < lLimit) firstShownSet = lLimit;
+      break;
+  }
+
+  draw();
+}
+
+function draw() {
+  g.setFontAlign(0,0);
+  g.clear();
+
+  for (let p = 0; p < 2; p++) {
+    if (matchWon(p)) {
+      g.setFontAlign(0,0);
+      g.setFont('Teletext5x9Ascii',2);
+      g.drawString(
+        "WINNER",
+        getXCoord(w => p === 0 ? w/4 : w/4*3),
+        15
+      );
+    } else if (matchEnded()) {
+      g.setFontAlign(1,0);
+
+      g.setFont('Teletext5x9Ascii',1);
+      g.drawString(
+        (currentSet()+1) + ' set' + (currentSet() > 0 ? 's' : ''),
+        40,
+        8
+      );
+
+      let dur1 = formatDuration(scores[cSet][2] - scores[0][2]);
+      g.setFont('5x9Numeric7Seg',1);
+      g.drawString(
+        dur1,
+        40,
+        18
+      );
+    }
+
+    g.setFontAlign(p === 0 ? -1 : 1,1);
+    g.setFont('5x9Numeric7Seg',2);
+    g.drawString(
+      setsWon(p),
+      getXCoord(w => p === 0 ? 5 : w-3),
+      h-5
+    );
+
+    if (!settings.enableTennisScoring) {
+      g.setFontAlign(p === 0 ? 1 : -1,1);
+      g.setFont('7x11Numeric7Seg',2);
+      g.drawString(
+        formatNumber(matchScore(p), 3),
+        getXCoord(w => p === 0 ? w/2 - 3 : w/2 + 6),
+        h-5
+      );
+    }
+  }
+  g.setFontAlign(0,0);
+
+  if (correctionMode) {
+    g.setFont('Teletext5x9Ascii',2);
+    g.drawString(
+      "R",
+      getXCoord(w => w/2),
+      h-10
+    );
+  }
+
+  let lastShownSet = Math.min(
+    sets(),
+    currentSet() + 1,
+    firstShownSet+setsPerPage()
+  );
+  let setsOnCurrentPage = Math.min(
+    sets(),
+    setsPerPage()
+  );
+  for (let set = firstShownSet; set < lastShownSet; set++) {
+    if (set < 0) continue;
+
+    let y = (h-15)/(setsOnCurrentPage+1)*(set-firstShownSet+1)+5;
+
+    g.setFontAlign(-1,0);
+    g.setFont('7x11Numeric7Seg',1);
+    g.drawString(set+1, 5, y-10);
+    if (scores[set+1][2] != null) {
+      let dur2 = formatDuration(scores[set+1][2] - scores[set][2]);
+      g.drawString(dur2, 5, y+10);
+    }
+
+    for (let p = 0; p < 2; p++) {
+      if (!setWon(set, p === 0 ? 1 : 0) || matchEnded()) {
+        let bigNumX = getXCoord(w => p === 0 ? w/4-12 : w/4*3+15);
+        let smallNumX = getXCoord(w => p === 0 ? w/2-2 : w/2+3);
+
+        if (settings.enableTennisScoring && set === cSet && !shouldTiebreak()) {
+          g.setFontAlign(0,0);
+          g.setFont('7x11Numeric7Seg',3);
+          g.drawString(
+            formatNumber(tennisScores[tScores[p]]),
+            bigNumX,
+            y
+          );
+        } else if (shouldTiebreak() && set === cSet) {
+          g.setFontAlign(0,0);
+          g.setFont('7x11Numeric7Seg',3);
+          g.drawString(
+            formatNumber(scores[set][3+p], 3),
+            bigNumX,
+            y
+          );
+        } else {
+          g.setFontAlign(0,0);
+          g.setFont('7x11Numeric7Seg',3);
+          g.drawString(
+            formatNumber(scores[set][p]),
+            bigNumX,
+            y
+          );
+        }
+
+        if ((shouldTiebreak() || settings.enableTennisScoring) && set === cSet) {
+          g.setFontAlign(p === 0 ? 1 : -1,0);
+          g.setFont('7x11Numeric7Seg',1);
+          g.drawString(
+            formatNumber(scores[set][p]),
+            smallNumX,
+            y
+          );
+        } else if ((scores[set][3] !== 0 || scores[set][4] !== 0) && set !== cSet) {
+          g.setFontAlign(p === 0 ? 1 : -1,0);
+          g.setFont('7x11Numeric7Seg',1);
+          g.drawString(
+            formatNumber(scores[set][3+p], 3),
+            smallNumX,
+            y
+          );
+        }
+      }
+    }
+  }
+
+  // draw separator
+  g.drawLine(getXCoord(w => w/2), 20, getXCoord(w => w/2), h-25);
+
+  g.flip();
+}
+
+setupDisplay();
+setupInputWatchers(true);
+setupMatch();
+draw();
diff --git a/apps/score/score.app.png b/apps/score/score.app.png
new file mode 100644
index 000000000..c1e7e2215
Binary files /dev/null and b/apps/score/score.app.png differ
diff --git a/apps/score/score.presets.json b/apps/score/score.presets.json
new file mode 100644
index 000000000..b57b52157
--- /dev/null
+++ b/apps/score/score.presets.json
@@ -0,0 +1,30 @@
+{
+  "Badminton": {
+    "winScore": 21,
+    "enableTwoAhead": true,
+    "enableMaxScore": true,
+    "maxScore": 30
+  },
+  "Tennis": {
+    "winScore": 6,
+    "enableTwoAhead": true,
+    "enableMaxScore": true,
+    "maxScore": 7,
+    "enableMaxScoreTiebreak": true,
+    "maxScoreTiebreakWinScore": 7,
+    "maxScoreTiebreakEnableTwoAhead": true,
+    "maxScoreTiebreakEnableMaxScore": false,
+    "enableTennisScoring": true
+  },
+  "Soccer": {
+    "winSets": 1,
+    "winScore": 9999,
+    "enableTwoAhead": false,
+    "enableMaxScore": false
+  },
+  "Table Tennis": {
+    "winScore": 11,
+    "enableTwoAhead": true,
+    "enableMaxScore": false
+  }
+}
diff --git a/apps/score/score.settings.js b/apps/score/score.settings.js
new file mode 100644
index 000000000..88e367821
--- /dev/null
+++ b/apps/score/score.settings.js
@@ -0,0 +1,219 @@
+(function () {
+  return (function (back, inApp, ret) {
+    const isBangle1 = process.env.BOARD === 'BANGLEJS'
+
+    function fillSettingsWithDefaults(settings) {
+      if (isBangle1) {
+        if (settings.mirrorScoreButtons == null) {
+          settings.mirrorScoreButtons = false;
+        }
+        if (settings.keepDisplayOn == null) {
+          settings.keepDisplayOn = true;
+        }
+      }
+      if (settings.winSets == null) {
+        settings.winSets = 2;
+      }
+      if (settings.setsPerPage == null) {
+        settings.setsPerPage = 5;
+      }
+      if (settings.winScore == null) {
+        settings.winScore = 21;
+      }
+      if (settings.enableTwoAhead == null) {
+        settings.enableTwoAhead = true;
+      }
+      if (settings.enableMaxScore == null) {
+        settings.enableMaxScore = true;
+      }
+      if (settings.maxScore == null) {
+        settings.maxScore = 30;
+      }
+      if (settings.enableTennisScoring == null) {
+        settings.enableTennisScoring = false;
+      }
+
+      if (settings.enableMaxScoreTiebreak == null) {
+        settings.enableMaxScoreTiebreak = false;
+      }
+      if (settings.maxScoreTiebreakWinScore == null) {
+        settings.maxScoreTiebreakWinScore = 6;
+      }
+      if (settings.maxScoreTiebreakEnableTwoAhead == null) {
+        settings.maxScoreTiebreakEnableTwoAhead = true;
+      }
+      if (settings.maxScoreTiebreakEnableMaxScore == null) {
+        settings.maxScoreTiebreakEnableMaxScore = false;
+      }
+      if (settings.maxScoreTiebreakMaxScore == null) {
+        settings.maxScoreTiebreakMaxScore = 15;
+      }
+
+      return settings;
+    }
+
+    const fileName = 'score.json';
+    let settings = require('Storage').readJSON(fileName, 1) || {};
+    const offon = ['No', 'Yes'];
+
+    let presetsFileName = 'score.presets.json';
+    let presets = require('Storage').readJSON(presetsFileName);
+    let presetNames = Object.keys(presets);
+
+    let changed = false;
+
+    function save(settings) {
+      require('Storage').writeJSON(fileName, settings);
+    }
+
+    function setAndSave(key, value, notChanged) {
+      if (!notChanged) {
+        changed = true;
+      }
+      settings[key] = value;
+      if (key === 'winScore' && settings.maxScore < value) {
+        settings.maxScore = value;
+      }
+      save(settings);
+    }
+
+    settings = fillSettingsWithDefaults(settings);
+
+    if (ret) {
+      return settings;
+    }
+
+    const presetMenu = function (appMenuBack) {
+      let ret = function (changed) { E.showMenu(appMenu(appMenuBack, changed ? 2 : null)); };
+      let m = {
+        '': {'title': 'Score Presets'},
+        '< Back': ret,
+      };
+      for (let i = 0; i < presetNames.length; i++) {
+        m[presetNames[i]] = (function (i) {
+          return function() {
+            changed = true;
+            let mirrorScoreButtons = settings.mirrorScoreButtons;
+            let keepDisplayOn = settings.keepDisplayOn;
+
+            settings = fillSettingsWithDefaults(presets[presetNames[i]]);
+
+            settings.mirrorScoreButtons = mirrorScoreButtons;
+            settings.keepDisplayOn = keepDisplayOn;
+            save(settings);
+            ret(true);
+          };
+        })(i);
+      }
+
+      return m;
+    };
+
+    const appMenu = function (back, selected) {
+      let m = {};
+
+      m[''] = {'title': 'Score Settings'};
+      if (selected != null) {
+        m[''].selected = selected;
+      }
+      m['< Back'] = function () { back(settings, changed); };
+      m['Presets'] = function () { E.showMenu(presetMenu(back)); };
+      if (isBangle1) {
+        m['Mirror Buttons'] = {
+          value: settings.mirrorScoreButtons,
+          format: m => offon[~~m],
+          onchange: m => setAndSave('mirrorScoreButtons', m, true),
+        };
+        m['Keep display on'] = {
+          value: settings.keepDisplayOn,
+          format: m => offon[~~m],
+          onchange: m => setAndSave('keepDisplayOn', m, true),
+        }
+      }
+      m['Sets to win'] = {
+        value: settings.winSets,
+        min:1,
+        onchange: m => setAndSave('winSets', m),
+      };
+      m['Sets per page'] = {
+        value: settings.setsPerPage,
+        min:1,
+        max:5,
+        onchange: m => setAndSave('setsPerPage', m),
+      };
+      m['Score to win'] = {
+        value: settings.winScore,
+        min:1,
+        max: 999,
+        onchange: m => setAndSave('winScore', m),
+      };
+      m['2-point lead'] = {
+        value: settings.enableTwoAhead,
+        format: m => offon[~~m],
+        onchange: m => setAndSave('enableTwoAhead', m),
+      };
+      m['Maximum score?'] = {
+        value: settings.enableMaxScore,
+        format: m => offon[~~m],
+        onchange: m => setAndSave('enableMaxScore', m),
+      };
+      m['Maximum score'] = {
+        value: settings.maxScore,
+        min: 1,
+        max: 999,
+        onchange: m => setAndSave('maxScore', m),
+      };
+      m['Tennis scoring'] = {
+        value: settings.enableTennisScoring,
+        format: m => offon[~~m],
+        onchange: m => setAndSave('enableTennisScoring', m),
+      };
+      m['TB sets?'] = {
+        value: settings.enableMaxScoreTiebreak,
+        format: m => offon[~~m],
+        onchange: m => setAndSave('enableMaxScoreTiebreak', m),
+      };
+      m['TB Score to win'] = {
+        value: settings.maxScoreTiebreakWinScore,
+        onchange: m => setAndSave('maxScoreTiebreakWinScore', m),
+      };
+      m['TB 2-point lead'] = {
+        value: settings.maxScoreTiebreakEnableTwoAhead,
+        format: m => offon[~~m],
+        onchange: m => setAndSave('maxScoreTiebreakEnableTwoAhead', m),
+      };
+      m['TB max score?'] = {
+        value: settings.maxScoreTiebreakEnableMaxScore,
+        format: m => offon[~~m],
+        onchange: m => setAndSave('maxScoreTiebreakEnableMaxScore', m),
+      };
+      m['TB max score'] = {
+        value: settings.maxScoreTiebreakMaxScore,
+        onchange: m => setAndSave('maxScoreTiebreakMaxScore', m),
+      };
+
+      return m;
+    };
+
+    const inAppMenu = function () {
+      let m = {
+        '': {'title': 'Score Menu'},
+        '< Back': function () { back(settings, changed); },
+        'Reset match': function () { back(settings, true); },
+        'End current set': function () { inApp('end_set'); back(settings, changed); },
+        'Configuration': function () { E.showMenu(appMenu(function () {
+          E.showMenu(inAppMenu());
+        })); },
+      };
+
+      return m;
+    };
+
+    if (inApp != null) {
+      E.showMenu(inAppMenu());
+    } else {
+      E.showMenu(appMenu(back));
+    }
+
+  });
+})();
diff --git a/apps/score/screenshot_score.png b/apps/score/screenshot_score.png
new file mode 100644
index 000000000..662c59e9e
Binary files /dev/null and b/apps/score/screenshot_score.png differ
diff --git a/apps/setting/ChangeLog b/apps/setting/ChangeLog
index 5a96451f2..faa50405f 100644
--- a/apps/setting/ChangeLog
+++ b/apps/setting/ChangeLog
@@ -31,3 +31,8 @@
 0.26: Use Bangle.softOff if available as this keeps the time
 0.27: Add Theme menu
 0.28: Update Quiet Mode widget (if present)
+0.29: Add Customize to Theme menu
+0.30: Move '< Back' to the top of menus
+0.31: Remove Bangle 1 settings when running on Bangle 2
+0.32: Fix 'beep' menu on Bangle.js 2
+0.33: Really fix 'beep' menu on Bangle.js 2 this time
diff --git a/apps/setting/README.md b/apps/setting/README.md
index f81f3fb05..1875fc3b0 100644
--- a/apps/setting/README.md
+++ b/apps/setting/README.md
@@ -15,6 +15,7 @@ This is Bangle.js's settings menu
   * **NOTE:** on some platforms enabling HID can cause you problems when trying to connect to Bangle.js to upload apps.
 * **Set Time** Configure the current time - Note that this can be done much more easily by choosing 'Set Time' from the App Loader
 * **LCD** Configure settings about the screen. How long it stays on, how bright it is, and when it turns on - see below.
+* **Theme** Adjust the colour scheme
 * **Reset Settings** Reset the settings to defaults
 * **Turn Off** Turn Bangle.js off
 
diff --git a/apps/setting/settings-icon.js b/apps/setting/settings-icon.js
index 7b68f80c0..abc7a3060 100644
--- a/apps/setting/settings-icon.js
+++ b/apps/setting/settings-icon.js
@@ -1 +1 @@
-require("heatshrink").decompress(atob("mEwghC/AFEiAAgX/C/4SFkADBgQXFBIgECAAYSCkAWGBIoXGyQTHABBZLkUhiMRiQXLIQwVBAAZlIC44tCAAYxGIxIWFGA4XIFwwwHXBAWHGAwXHFxAwGPAYXTX44XDiAJBgIXGyDAHFAYKDMAq+EGAgXNCwwX/C453XU6IWHa6ZFCC6JJCC4hgEAAoOEC5AwIFwhgEBAgwIBoqmGGBIuFVAgXFGAwLFYAoLFGIYtFeA4MGABMpC4pICkBMGBIpGFC4SuIBIoWFAAxZLC/4X/AFQ"))
+require("heatshrink").decompress(atob("mEw4UA///+Nj5lCt9TH+cBqtVoALWqALTgoLUiALFgoLDqoBBAAQGCHAdRBYdFKwZECqv614ECGQQsCr2q1W1BYkVAoPqBYOrAoNUBYdXBQIAB6oLDEQgkEBYdaBYelBYt6BYetBYYvBtWq0EK1WpF4ZfBIwIFBJATCDBY6PDiuq1AEBlWqBdA7KKZZrLQZabNWZLLLcZb7LBYVV/WvAgRfCNYNRBAVVoq/FJQRECR4gnBEwQEBggLDGQg4CBag4DBaBWBBaoATA"))
diff --git a/apps/setting/settings.js b/apps/setting/settings.js
index 1b1cc5478..fcf651b6f 100644
--- a/apps/setting/settings.js
+++ b/apps/setting/settings.js
@@ -1,6 +1,7 @@
 Bangle.loadWidgets();
 Bangle.drawWidgets();
 
+const BANGLEJS2 = process.env.HWVERSION==2;
 const storage = require('Storage');
 let settings;
 
@@ -37,7 +38,7 @@ function resetSettings() {
     quiet: 0,              // quiet mode:  0: off, 1: priority only, 2: total silence
     timeout: 10,           // Default LCD timeout in seconds
     vibrate: true,         // Vibration enabled by default. App must support
-    beep: "vib",            // Beep enabled by default. App must support
+    beep: BANGLEJS2?true:"vib",            // Beep enabled by default. App must support
     timezone: 0,           // Set the timezone for the device
     HID: false,           // BLE HID mode, off by default
     clock: null,           // a string for the default clock's name
@@ -71,10 +72,40 @@ if (!('qmOptions' in settings)) settings.qmOptions = {}; // easier if this alway
 const boolFormat = v => v ? "On" : "Off";
 
 function showMainMenu() {
-  var beepV = [false, true, "vib"];
-  var beepN = ["Off", "Piezo", "Vibrate"];
+  var beepMenuItem;
+  if (BANGLEJS2) {
+    beepMenuItem = {
+      value: settings.beep!=false,
+      format: boolFormat,
+      onchange: v => {
+        settings.beep = v;
+        updateSettings();
+        if (settings.beep) {
+          analogWrite(VIBRATE,0.1,{freq:2000});
+          setTimeout(()=>VIBRATE.reset(),200);
+        } // beep with vibration moter
+      }
+    };
+  } else { // Bangle.js 1
+    var beepV = [false, true, "vib"];
+    var beepN = ["Off", "Piezo", "Vibrate"];
+    beepMenuItem = {
+      value: Math.max(0 | beepV.indexOf(settings.beep),0),
+      min: 0, max: beepV.length-1,
+      format: v => beepN[v],
+      onchange: v => {
+        settings.beep = beepV[v];
+        if (v==1) { analogWrite(D18,0.5,{freq:2000});setTimeout(()=>D18.reset(),200); } // piezo on Bangle.js 1
+        else if (v==2) { analogWrite(VIBRATE,0.1,{freq:2000});setTimeout(()=>VIBRATE.reset(),200); } // vibrate
+        updateSettings();
+      }
+    };
+  }
+
+
   const mainmenu = {
     '': { 'title': 'Settings' },
+    '< Back': ()=>load(),
     'Make Connectable': ()=>makeConnectable(),
     'App/Widget Settings': ()=>showAppSettingsMenu(),
     'BLE': ()=>showBLEMenu(),
@@ -86,17 +117,7 @@ function showMainMenu() {
         updateSettings();
       }
     },
-    'Beep': {
-      value: 0 | beepV.indexOf(settings.beep),
-      min: 0, max: 2,
-      format: v => beepN[v],
-      onchange: v => {
-        settings.beep = beepV[v];
-        if (v==1) { analogWrite(D18,0.5,{freq:2000});setTimeout(()=>D18.reset(),200); } // piezo
-        else if (v==2) { analogWrite(D13,0.1,{freq:2000});setTimeout(()=>D13.reset(),200); } // vibrate
-        updateSettings();
-      }
-    },
+    'Beep': beepMenuItem,
     'Vibration': {
       value: settings.vibrate,
       format: boolFormat,
@@ -117,8 +138,8 @@ function showMainMenu() {
     'Theme': ()=>showThemeMenu(),
     'Reset Settings': ()=>showResetMenu(),
     'Turn Off': ()=>{ if (Bangle.softOff) Bangle.softOff(); else Bangle.off() },
-    '< Back': ()=>load()
   };
+
   return E.showMenu(mainmenu);
 }
 
@@ -126,6 +147,7 @@ function showBLEMenu() {
   var hidV = [false, "kbmedia", "kb", "joy"];
   var hidN = ["Off", "Kbrd & Media", "Kbrd","Joystick"];
   E.showMenu({
+    '< Back': ()=>showMainMenu(),
     'BLE': {
       value: settings.ble,
       format: boolFormat,
@@ -143,7 +165,7 @@ function showBLEMenu() {
       }
     },
     'HID': {
-      value: 0 | hidV.indexOf(settings.HID),
+      value: Math.max(0,0 | hidV.indexOf(settings.HID)),
       min: 0, max: 3,
       format: v => hidN[v],
       onchange: v => {
@@ -158,8 +180,7 @@ function showBLEMenu() {
     'Whitelist': {
       value: settings.whitelist?(settings.whitelist.length+" devs"):"off",
       onchange: () => setTimeout(showWhitelistMenu) // graphical_menu redraws after the call
-    },
-    '< Back': ()=>showMainMenu()
+    }
   });
 }
 
@@ -178,6 +199,8 @@ function showThemeMenu() {
     m.draw();
   }
   var m = E.showMenu({
+    '':{title:'Theme'},
+    '< Back': ()=>showMainMenu(),
     'Dark BW': ()=>{
       upd({
         fg:cl("#fff"), bg:cl("#000"),
@@ -189,17 +212,74 @@ function showThemeMenu() {
     'Light BW': ()=>{
       upd({
         fg:cl("#000"), bg:cl("#fff"),
-        fg2:cl("#00f"), bg2:cl("#0ff"),
+        fg2:cl("#000"), bg2:cl("#cff"),
         fgH:cl("#000"), bgH:cl("#0ff"),
         dark:false
       });
     },
-    '< Back': ()=>showMainMenu()
+    'Customize': ()=>showCustomThemeMenu(),
   });
+
+  function showCustomThemeMenu() {
+    function cv(x) { return g.setColor(x).getColor(); }
+    function setT(t, v) {
+      let th = g.theme;
+      th[t] = v;
+      if (t==="bg") {
+        th['dark'] = (v===cv("#000"));
+      }
+      upd(th);
+    }
+    const rgb = {
+      black: "#000", white: "#fff",
+      red: "#f00", green: "#0f0", blue: "#00f",
+      cyan: "#0ff", magenta: "#f0f", yellow: "#ff0",
+    };
+    let colors = [], names = [];
+    for(const c in rgb) {
+      names.push(c);
+      colors.push(cv(rgb[c]));
+    }
+    function cn(v) {
+      const i = colors.indexOf(v);
+      return i!== -1 ? names[i] : v; // another color: just show value
+    }
+    let menu = {
+      '':{title:'Custom Theme'},
+      "< Back": () => showThemeMenu()
+    };
+    const labels = {
+      fg: 'Foreground', bg: 'Background',
+      fg2: 'Foreground 2', bg2: 'Background 2',
+      fgH: 'Highlight FG', bgH: 'Highlight BG',
+    };
+    ["fg", "bg", "fg2", "bg2", "fgH", "bgH"].forEach(t => {
+      menu[labels[t]] = {
+          value: colors.indexOf(g.theme[t]),
+          format: () => cn(g.theme[t]),
+          onchange: function(v) {
+            // wrap around
+            if (v>=colors.length) {v = 0;}
+            if (v<0) {v = colors.length-1;}
+            this.value = v;
+            const c = colors[v];
+            // if we select the same fg and bg: set the other to the old color
+            // e.g. bg=black;fg=white, user selects fg=black -> bg changes to white automatically
+            // so users don't end up with a black-on-black menu
+            if (t === 'fg' && g.theme.bg === c) setT('bg', g.theme.fg);
+            if (t === 'bg' && g.theme.fg === c) setT('fg', g.theme.bg);
+            setT(t, c);
+          },
+        };
+    });
+    menu["< Back"] = () => showThemeMenu();
+    m = E.showMenu(menu);
+  }
 }
 
 function showPasskeyMenu() {
   var menu = {
+    "< Back" : ()=>showBLEMenu(),
     "Disable" : () => {
       settings.passkey = undefined;
       updateSettings();
@@ -220,12 +300,12 @@ function showPasskeyMenu() {
       }
     };
   })(i);
-  menu['< Back']=()=>showBLEMenu();
   E.showMenu(menu);
 }
 
 function showWhitelistMenu() {
   var menu = {
+    "< Back" : ()=>showBLEMenu(),
     "Disable" : () => {
       settings.whitelist = undefined;
       updateSettings();
@@ -257,7 +337,6 @@ function showWhitelistMenu() {
       showWhitelistMenu();
     });
   };
-  menu['< Back']=()=>showBLEMenu();
   E.showMenu(menu);
 }
 
@@ -298,7 +377,10 @@ function showLCDMenu() {
         settings.options.wakeOnBTN1 = !settings.options.wakeOnBTN1;
         updateOptions();
       }
-    },
+    }
+  };
+  if (!BANGLEJS2)
+    Object.assign(lcdMenu, {
     'Wake on BTN2': {
       value: settings.options.wakeOnBTN2,
       format: boolFormat,
@@ -314,7 +396,8 @@ function showLCDMenu() {
         settings.options.wakeOnBTN3 = !settings.options.wakeOnBTN3;
         updateOptions();
       }
-    },
+    }});
+  Object.assign(lcdMenu, {
     'Wake on FaceUp': {
       value: settings.options.wakeOnFaceUp,
       format: boolFormat,
@@ -369,7 +452,7 @@ function showLCDMenu() {
         updateOptions();
       }
     }
-  }
+  });
   return E.showMenu(lcdMenu)
 }
 function showQuietModeMenu() {
diff --git a/apps/shortcuts/boot.js b/apps/shortcuts/boot.js
index 4e3e02da6..f71f6d6ca 100644
--- a/apps/shortcuts/boot.js
+++ b/apps/shortcuts/boot.js
@@ -4,7 +4,6 @@
     if (mode!="clock") return sui(mode,cb);
     return sui("clockupdown", (dir) => {
       let settings = require("Storage").readJSON("shortcuts.json", 1)||{};
-      console.log(settings);
       if (dir == -1) {
         if (settings.BTN1) load(settings.BTN1);
       } else if (dir == 1) {
diff --git a/apps/simplest/ChangeLog b/apps/simplest/ChangeLog
index d69da4ddc..f37015d6a 100644
--- a/apps/simplest/ChangeLog
+++ b/apps/simplest/ChangeLog
@@ -1,2 +1,3 @@
 0.01: Modified for use with new bootloader and firmware
 0.02: Use Bangle.setUI for button/launcher handling
+0.03: Fix display for Bangle 2
diff --git a/apps/simplest/app.js b/apps/simplest/app.js
index 2ed4e5580..68564ff33 100644
--- a/apps/simplest/app.js
+++ b/apps/simplest/app.js
@@ -1,14 +1,17 @@
 
+const h = g.getHeight();
+const w = g.getWidth();
+
 function draw() {
   var d = new Date();
   var da = d.toString().split(" ");
   var time = da[4].substr(0,5);
 
   g.reset();
-  g.clearRect(0, 30, 239, 99);
+  g.clearRect(0, 30, w, 99);
   g.setFontAlign(0, -1);
-  g.setFont("Vector", 80);
-  g.drawString(time, 120, 40);
+  g.setFont("Vector", w/3);
+  g.drawString(time, w/2, 40);
 }
 
 // handle switch display on by pressing BTN1
diff --git a/apps/simplest/screenshot_simplest.png b/apps/simplest/screenshot_simplest.png
new file mode 100644
index 000000000..9affc3d1c
Binary files /dev/null and b/apps/simplest/screenshot_simplest.png differ
diff --git a/apps/simpletimer/bangle1-timer-screenshot.png b/apps/simpletimer/bangle1-timer-screenshot.png
new file mode 100644
index 000000000..91462d3d4
Binary files /dev/null and b/apps/simpletimer/bangle1-timer-screenshot.png differ
diff --git a/apps/slevel/ChangeLog b/apps/slevel/ChangeLog
index 5560f00bc..3a6431e50 100644
--- a/apps/slevel/ChangeLog
+++ b/apps/slevel/ChangeLog
@@ -1 +1,2 @@
 0.01: New App!
+0.02: Updated to work with both Bangle.js 1 and 2.
diff --git a/apps/slevel/spiritlevel.js b/apps/slevel/spiritlevel.js
index 492fc60e1..9db54b825 100644
--- a/apps/slevel/spiritlevel.js
+++ b/apps/slevel/spiritlevel.js
@@ -1,5 +1,7 @@
 g.clear();
 var old = {x:0,y:0};
+var W = g.getWidth();
+var H = g.getHeight();
 Bangle.on('accel',function(v) {
   var max = Math.max(Math.abs(v.x),Math.abs(v.y),Math.abs(v.z));
   if (Math.abs(v.y)==max) {
@@ -14,17 +16,17 @@ Bangle.on('accel',function(v) {
   g.setColor(1,1,1);
   g.setFont("6x8",2);
   g.setFontAlign(0,-1);
-  g.clearRect(60,0,180,16);
-  g.drawString(ang.toFixed(1),120,0);
+  g.clearRect(W*(1/4),0,W*(3/4),H*(1/16));
+  g.drawString(ang.toFixed(1),W/2,0);
   var n = {
-    x:E.clip(120+v.x*256,4,236),
-    y:E.clip(120+v.y*256,4,236)};
+    x:E.clip(W/2+v.x*256,4,W-4),
+    y:E.clip(H/2+v.y*256,4,H-4)};
   g.clearRect(old.x-3,old.y-3,old.x+6,old.y+6);
   g.setColor(1,1,1);
   g.fillRect(n.x-3,n.y-3,n.x+6,n.y+6);
   g.setColor(1,0,0);
-  g.drawCircle(120,120,20);
-  g.drawCircle(120,120,60);
-  g.drawCircle(120,120,100);
+  g.drawCircle(W/2,H/2,W*(1/12));
+  g.drawCircle(W/2,H/2,W*(1/4));
+  g.drawCircle(W/2,H/2,W*(5/12));
   old = n;
 });
diff --git a/apps/slidingtext/ChangeLog b/apps/slidingtext/ChangeLog
index 413d50d40..3bd656cb0 100644
--- a/apps/slidingtext/ChangeLog
+++ b/apps/slidingtext/ChangeLog
@@ -4,3 +4,4 @@
 0.04: Added German Language
 0.05: BUGFIX: pedometer widget interfered with the clock Font Alignment
 0.06: Use Bangle.setUI for button/launcher handling
+0.07: Support for Bangle.js 2 and themes
diff --git a/apps/slidingtext/slidingtext.js b/apps/slidingtext/slidingtext.js
index 9fa21ccc2..3be502cfe 100644
--- a/apps/slidingtext/slidingtext.js
+++ b/apps/slidingtext/slidingtext.js
@@ -146,12 +146,6 @@ class ShiftText {
     //console.log("bgcolor:" + this.bg_color);
     g.setColor(this.bg_color[0],this.bg_color[1],this.bg_color[2]);
     g.drawString(this.txt, this.x, this.y);
-    /*g.fillPoly([this.x - 1, this.y,
-              240, this.y,
-              240, this.y + this.font_size,
-              this.x -1 , this.y + this.font_size,
-             ]);
-             */
   }
   setText(txt){
     this.txt = txt;
@@ -239,13 +233,21 @@ class ShiftText {
 
 const CLOCK_TEXT_SPEED_X = 10;
 // a list of display rows
-let row_displays = [
-  new ShiftText(240,50,'',"Vector",40,CLOCK_TEXT_SPEED_X,1,10,main_color(),bg_color()),
-  new ShiftText(240,90,'',"Vector",30,CLOCK_TEXT_SPEED_X,1,10,other_color(),bg_color()),
-  new ShiftText(240,120,'',"Vector",30,CLOCK_TEXT_SPEED_X,1,10,other_color(),bg_color()),
-  new ShiftText(240,150,'',"Vector",30,CLOCK_TEXT_SPEED_X,1,10,other_color(),bg_color()),
-  new ShiftText(240,180,'',"Vector",40,CLOCK_TEXT_SPEED_X,1,10,main_color(),bg_color())
-];
+let row_displays;
+function setRowDisplays(y, heights) {
+  var cols = [
+    main_color(), other_color(), other_color(), other_color(), main_color()
+  ];
+  row_displays = [];
+  for (var i=0;i200)
+  setRowDisplays(50, [40,30,30,30,40]);
+else
+  setRowDisplays(34, [35,25,25,25,35]);
 
 function nextColorTheme(){
   //console.log("next color theme");
@@ -274,11 +276,7 @@ function setColor(main_color,other_color,bg_color){
   row_displays[row_displays.length - 1].setColor(main_color);
   row_displays[row_displays.length - 1].setBgColor(bg_color);
   g.setColor(bg_color[0],bg_color[1],bg_color[2]);
-  g.fillPoly([0,25,
-    0,240,
-    240,240,
-    240,25
-  ]);
+  g.fillRect(0,24, g.getWidth(), g.getHeight());
 }
 
 // load the date formats and laguages required
@@ -510,12 +508,14 @@ const PREFERENCE_FILE = "slidingtext.settings.json";
  * Called on startup to set the watch to the last preference settings
  */
 function load_settings(){
+  var setScheme = false;
   try{
     settings = require("Storage").readJSON(PREFERENCE_FILE);
     if(settings != null){
       console.log("loaded:" + JSON.stringify(settings));
       if(settings.color_scheme != null){
         set_colorscheme(settings.color_scheme);
+        setScheme = true;
       }
       if(settings.date_format != null){
         set_dateformat(settings.date_format);
@@ -526,6 +526,9 @@ function load_settings(){
   } catch(e){
     console.log("failed to load settings:" + e);
   }
+  // just set up as default
+  if (!setScheme)
+    setColorScheme(color_schemes[color_scheme_index]);
 }
 
 /**
@@ -636,11 +639,7 @@ Bangle.drawWidgets();
 
 startTimers();
 // Show launcher when button pressed
-Bangle.setUI("clock");
-
-
-// Handle button 1 being pressed
-setWatch(button1pressed, BTN1,{repeat:true,edge:"falling"});
-
-// Handle button 3 being pressed
-setWatch(button3pressed, BTN3,{repeat:true,edge:"falling"});
+Bangle.setUI("clockupdown", d=>{
+  if (d<0) button1pressed();
+  if (d>0) button3pressed();
+});
diff --git a/apps/slidingtext/slidingtext.locale.de.js b/apps/slidingtext/slidingtext.locale.de.js
index 11124c24a..3cb178232 100644
--- a/apps/slidingtext/slidingtext.locale.de.js
+++ b/apps/slidingtext/slidingtext.locale.de.js
@@ -1,15 +1,15 @@
 var DateFormatter = require("slidingtext.dtfmt.js");
 
-const germanNumberStr = [ ["ZERO",""], // 0
+const germanNumberStr = [ ["NULL",""], // 0
     ["EINS",""], // 1
     ["ZWEI",""], //2
     ["DREI",''], //3
     ["VIER",''], //4
     ["FÜNF",''], //5
     ["SECHS",''], //6
-    ["SEIBEN",''], //7
+    ["SIEBEN",''], //7
     ["ACHT",''], //8
-    ["NUEN",''], // 9,
+    ["NEUN",''], // 9,
     ["ZEHN",''], // 10
     ["ELF",''], // 11,
     ["ZWÖLF",''], // 12
@@ -22,7 +22,7 @@ const germanNumberStr = [ ["ZERO",""], // 0
     ["NEUN",'ZEHN'], // 19
 ];
 
-const germanTensStr = ["ZERO",//0
+const germanTensStr = ["NULL",//0
     "ZEHN",//10
     "ZWANZIG",//20
     "DREIßIG",//30
@@ -38,7 +38,7 @@ const germanUnit = ["",//0
     "VIERUND", //4
     "FÜNFUND", //5
     "SECHSUND", //6
-    "SEIBENUND", //7
+    "SIEBENUND", //7
     "ACHTUND", //8
     "NEUNUND" //9
 ]
@@ -91,4 +91,4 @@ class GermanDateFormatter extends DateFormatter {
     }
 }
 
-module.exports = GermanDateFormatter;
\ No newline at end of file
+module.exports = GermanDateFormatter;
diff --git a/apps/slidingtext/slidingtext.locale.es.js b/apps/slidingtext/slidingtext.locale.es.js
index e1f3bc18b..1b6f6d11b 100644
--- a/apps/slidingtext/slidingtext.locale.es.js
+++ b/apps/slidingtext/slidingtext.locale.es.js
@@ -7,7 +7,7 @@ const spanishNumberStr = [ ["ZERO"], // 0
     ["CUATRO",''], //4
     ["CINCO",''], //5
     ["SEIS",''], //6
-    ["SEITO",''], //7
+    ["SIETE",''], //7
     ["OCHO",''], //8
     ["NUEVE",''], // 9,
     ["DIEZ",''], // 10
@@ -20,7 +20,7 @@ const spanishNumberStr = [ ["ZERO"], // 0
     ["DIECI",'SIETE'], // 17
     ["DIECI",'OCHO'], // 18
     ["DIECI",'NEUVE'], // 19
-    ["VEINTA",''], // 20
+    ["VEINTE",''], // 20
     ["VEINTI",'UNO'], // 21
     ["VEINTI",'DOS'], // 22
     ["VEINTI",'TRES'], // 23
@@ -74,4 +74,4 @@ class SpanishDateFormatter extends DateFormatter {
     }
 }
 
-module.exports = SpanishDateFormatter;
\ No newline at end of file
+module.exports = SpanishDateFormatter;
diff --git a/apps/slomoclock/ChangeLog b/apps/slomoclock/ChangeLog
new file mode 100644
index 000000000..cfab5da55
--- /dev/null
+++ b/apps/slomoclock/ChangeLog
@@ -0,0 +1,2 @@
+0.01: Created app
+0.10: Different colour schemes selectable in SloMo Clock settings.
diff --git a/apps/slomoclock/README.md b/apps/slomoclock/README.md
new file mode 100644
index 000000000..9a6bbbdd2
--- /dev/null
+++ b/apps/slomoclock/README.md
@@ -0,0 +1,6 @@
+# SloMo Clock
+
+Simple 24h clock with large digits.
+
+![](Screenshot.JPG)
+
diff --git a/apps/slomoclock/app-icon.js b/apps/slomoclock/app-icon.js
new file mode 100644
index 000000000..22e264124
--- /dev/null
+++ b/apps/slomoclock/app-icon.js
@@ -0,0 +1 @@
+require("heatshrink").decompress(atob("oFAwhC/ABOIABgfymYAKD+Z/9hGDL5c4wAf/XzjASTxqgQhAfPMB2IPxiACIBo+BDxqACIBg+CLxpANHwQPBABgvCIBT8CJ5owDD5iPOOAQfLBojiDCYQGFGIQfICIQfdBYJNMOI6SHD8jeNOIYzID8hfRD9LfEAoTdFBIifLAAIffBoQRBAJpxMD84JCD+S/GL56fID8ALBb6ZhID8qtJCZ4fgT4YDBABq/PD7RNEL6IRKD8WID5pfCD5kzNhKSFmYfMBwSeOGBoPDABgvCJ5wAON5pADABivPIAIAOd5xABABweOD4J+OD58IQBj8LD/6gUDyAfhXzgfiP/wA2"))
diff --git a/apps/slomoclock/app.js b/apps/slomoclock/app.js
new file mode 100644
index 000000000..e3933af1b
--- /dev/null
+++ b/apps/slomoclock/app.js
@@ -0,0 +1,118 @@
+/*
+Simple watch [slomoclock]
+Mike Bennett mike[at]kereru.com
+0.01 : Initial
+0.03 : Use Layout library
+*/
+
+var v='0.10';
+
+// Colours
+const col = [];
+col[2] = 0xF800;
+col[3] = 0xFAE0;
+col[4] = 0xF7E0;
+col[5] = 0x4FE0;
+col[6] = 0x019F;
+col[7] = 0x681F;
+col[8] = 0xFFFF;
+
+const colH = [];
+colH[0]= 0x001F;
+colH[1]= 0x023F;
+colH[2]= 0x039F;
+colH[3]= 0x051F;
+colH[4]= 0x067F;
+colH[5]= 0x07FD;
+colH[6]= 0x07F6;
+colH[7]= 0x07EF;
+colH[8]= 0x07E8;
+colH[9]= 0x07E3;
+colH[10]= 0x07E0;
+colH[11]= 0x5FE0;
+colH[12]= 0x97E0;
+colH[13]= 0xCFE0;
+colH[14]= 0xFFE0;
+colH[15]= 0xFE60;
+colH[16]= 0xFC60;
+colH[17]= 0xFAA0;
+colH[18]= 0xF920;
+colH[19]= 0xF803;
+colH[20]= 0xF80E;
+colH[21]= 0x981F;
+colH[22]= 0x681F;
+colH[23]= 0x301F;
+
+// Colour incremented with every 10 sec timer event
+var colNum = 0;
+var lastMin = -1;
+
+var Layout = require("Layout");
+var layout = new Layout( {
+  type:"h", c: [
+      {type:"v", c: [
+        {type:"txt", font:"40%", label:"", id:"hour", valign:1},
+        {type:"txt", font:"40%", label:"", id:"min", valign:-1},
+      ]},
+      {type:"v", c: [
+        {type:"txt", font:"10%", label:"", id:"day", col:0xEFE0, halign:1},
+        {type:"txt", font:"10%", label:"", id:"mon", col:0xEFE0, halign:1},
+      ]}
+    ]
+}, {lazy:true});
+
+// update the screen
+function draw() {
+  var date = new Date();
+  
+  // Update time
+  var timeStr = require("locale").time(date,1);
+  var hh = parseFloat(timeStr.substring(0,2));
+  var mm = parseFloat(timeStr.substring(3,5));
+
+  // Surprise colours
+  if ( lastMin != mm ) colNum = Math.floor(Math.random() * 24);  
+  lastMin = mm;
+  
+  layout.hour.label = timeStr.substring(0,2);
+  layout.min.label = timeStr.substring(3,5);
+  
+  // Mysterion (0) different colour each hour. Surprise (1) different colour every 10 secs.
+  layout.hour.col = cfg.colour==0 ? colH[hh] : cfg.colour==1 ? colH[colNum] : col[cfg.colour];
+  layout.min.col = cfg.colour==0 ? colH[hh] :  cfg.colour==1 ? colH[colNum] :col[cfg.colour];
+  
+  // Update date
+  layout.day.label = date.getDate();
+  layout.mon.label = require("locale").month(date,1);
+   
+  layout.render();
+}
+
+// Events
+
+// Stop updates when LCD is off, restart when on
+Bangle.on('lcdPower',on=>{
+  if (secondInterval) clearInterval(secondInterval);
+  secondInterval = undefined;
+  if (on) {
+    secondInterval = setInterval(draw, 10000);
+    draw(); // draw immediately
+  }
+});
+
+var secondInterval = setInterval(draw, 10000);
+
+// Configuration
+let cfg = require('Storage').readJSON('slomoclock.json',1)||{};
+cfg.colour = cfg.colour||0;  // Colours
+
+// update time and draw
+g.clear();
+draw();
+
+// Show launcher when middle button pressed
+Bangle.setUI("clock");
+
+// Load widgets
+Bangle.loadWidgets();
+Bangle.drawWidgets();
diff --git a/apps/slomoclock/bangle1-slow-mo-clock-screenshot.png b/apps/slomoclock/bangle1-slow-mo-clock-screenshot.png
new file mode 100644
index 000000000..59018f93c
Binary files /dev/null and b/apps/slomoclock/bangle1-slow-mo-clock-screenshot.png differ
diff --git a/apps/slomoclock/settings.js b/apps/slomoclock/settings.js
new file mode 100644
index 000000000..af67069dc
--- /dev/null
+++ b/apps/slomoclock/settings.js
@@ -0,0 +1,38 @@
+(function(back) {
+
+  let settings = require('Storage').readJSON('slomoclock.json',1)||{};
+  
+  function writeSettings() {
+    require('Storage').write('slomoclock.json',settings);
+  }
+  
+  function setColour(c) {
+    settings.colour = c;
+    writeSettings();
+  }
+  
+  const appMenu = {
+    '': {'title': 'SloMo Clock'},
+    '< Back': back,
+    'Colours' : function() { E.showMenu(colMenu); }
+    //,'Widget Space Top' : {value : settings.widTop, format : v => v?"On":"Off",onchange : () => { settings.widTop = !settings.widTop; writeSettings(); }
+    //,'Widget Space Bottom' : {value : settings.widBot, format : v => v?"On":"Off",onchange : () => { settings.widBot = !settings.widBot; writeSettings(); }
+  };
+  
+  const colMenu = {
+    '': {'title': 'Colours'},
+    '< Back': function() { E.showMenu(appMenu); },
+    'Mysterion' : function() { setColour(0); },
+    'Surprise' : function() { setColour(1); },
+    'Red' : function() { setColour(2); },
+    'Orange' : function() { setColour(3); },
+    'Yellow' : function() { setColour(4); },
+    'Green' : function() { setColour(5); },
+    'Blue' : function() { setColour(6); },
+    'Violet' : function() { setColour(7); },
+    'White' : function() { setColour(8); }
+  };
+  
+  E.showMenu(appMenu);
+
+});
diff --git a/apps/slomoclock/watch.png b/apps/slomoclock/watch.png
new file mode 100644
index 000000000..b77f302d5
Binary files /dev/null and b/apps/slomoclock/watch.png differ
diff --git a/apps/snake/README.md b/apps/snake/README.md
index 483eae7a9..278dffbc4 100644
--- a/apps/snake/README.md
+++ b/apps/snake/README.md
@@ -7,8 +7,7 @@ Eat apples and don't bite your tail.
 
 ## Controls
 
-- UP: BTN1
-- DOWN: BTN3
-- LEFT: BTN4
-- RIGHT: BTN5
-- PAUSE: BTN2
+- BTN1: turn to left
+- BTN2: pause
+- BTN3: turn to right
+
diff --git a/apps/speedalt/settings.js b/apps/speedalt/settings.js
index 488ba3b81..63d77971e 100644
--- a/apps/speedalt/settings.js
+++ b/apps/speedalt/settings.js
@@ -32,7 +32,7 @@
 
   
   const appMenu = {
-    '': {'title': 'GPS Speed Alt'},
+    '': {'title': 'GPS Adv Sprt'},
     '< Back': back,
     '< Load GPS Adv Sport': ()=>{load('speedalt.app.js');},
     'Units' : function() { E.showMenu(unitsMenu); },
diff --git a/apps/speedalt2/ChangeLog b/apps/speedalt2/ChangeLog
new file mode 100644
index 000000000..91f01988e
--- /dev/null
+++ b/apps/speedalt2/ChangeLog
@@ -0,0 +1,2 @@
+0.01: Initial import.
+0.07: Add swipe to change screens.
diff --git a/apps/speedalt2/README.md b/apps/speedalt2/README.md
new file mode 100644
index 000000000..30a706b7b
--- /dev/null
+++ b/apps/speedalt2/README.md
@@ -0,0 +1,134 @@
+# GPS Speed, Altimeter and Distance to Waypoint
+
+What is the difference between **GPS Adventure Sports** and **GPS Adventure Sports II** ?
+
+**GPS Adventure Sports** has 3 screens, each of which display different sets of information.
+
+**GPS Adventure Sports II** has 5 screens, each of which displays just one of Speed, Altitude, Distance to waypoint, Position or Time.
+
+In all other respect they perform the same functions.
+
+The waypoints list is the same as that used with the [GPS Navigation](https://banglejs.com/apps/#gps%20navigation) app so the same set of waypoints can be used across both apps. Refer to that app for waypoint file information.
+
+## Buttons and Controls
+
+**BTN1** ( Speed and Altitude ) Short press < 2 secs toggles the display between last reading and maximum recorded.  Long press > 2 secs resets the recorded maximum values.
+
+**BTN1** ( Distance ) Select next waypoint. Last fix distance from selected waypoint is displayed.
+
+**BTN2** : Disables/Restores power saving timeout. Locks the screen on and GPS in SuperE mode to enable reading for longer periods but uses maximum battery drain. Red LED (dot) at top of screen when screen is locked on. Press again to restore power saving timeouts.
+
+**BTN3** : Cycles the screens between Speed, Altitude, Distance to waypoint, Position and Time
+
+**BTN3** : Long press exit and return to watch.
+
+**Touch Screen** If the 'Touch' setting is ON then :
+
+Swipe Left/Right cycles between the five screens.
+
+Touch functions as BTN1 short press.
+
+
+## App Settings
+
+Select the desired display units. Speed can be as per the default locale, kph, knots, mph or m/s. Distance can be km, miles or nautical miles. Altitude can be feet or metres. Select one of three colour schemes. Default (three colours), high contrast (all white on black) or night ( all red on black ). 
+
+## Kalman Filter
+
+This filter smooths the altitude and the speed values and reduces these values 'jumping around' from one GPS fix to the next. The down side of this is that if these values change rapidly ( eg. a quick change in altitude ) then it can take a few GPS fixes for the values to move to the new values. Disabling the Kalman filter in the settings will cause the raw values to be displayed from each GPS fix as they are found.
+
+## Loss of fix
+
+When the GPS obtains a fix the number of satellites is displayed as 'Sats:nn'. When unable to obtain a fix then the last known fix is used and the age of that fix in seconds is displayed as 'Age:nn'. Seeing 'Sats'  or 'Age' indicates whether the GPS has a current fix or not.  
+
+## Power Saving
+
+The The GPS Adv Sport app obeys the watch screen off timeouts as a power saving measure. Restore the screen as per any of the colck/watch apps. Use BTN2 to lock the screen on but doing this will use more battery.
+
+This app will work quite happily on its own but will use the [GPS Setup App](https://banglejs.com/apps/#gps%20setup) if it is installed. You may choose to use the GPS Setup App to gain significantly longer battery life while the GPS is on. Please read the Low Power GPS Setup App Readme to understand what this does.
+
+When using the GPS Setup App this app switches the GPS to SuperE (default) mode while the display is lit and showing fix information. This ensures that that fixes are updated every second or so. 10 seconds after the display is blanked by the watch this app will switch the GPS to PSMOO mode and will only attempt to get a fix every two minutes. This improves power saving while the display is off and the delay gives an opportunity to restore the display before the GPS power mode is switched.
+
+The MAX values continue to be collected with the display off so may appear a little odd after the intermittent fixes of the low power mode. 
+
+## Waypoints
+
+Waypoints are used in [D]istance mode. Create a file waypoints.json and write to storage on the Bangle.js using the IDE. The first 6 characters of the name are displayed in Speed+[D]istance mode.
+
+The [GPS Navigation](https://banglejs.com/apps/#gps%20navigation) app in the App Loader has a really nice waypoints file editor. (Must be connected to your Bangle.JS and then click on the Download icon.)
+
+Sample waypoints.json (My sailing waypoints)
+
+
+[
+  {
+  "name":"NONE"
+  },
+  {
+  "name":"Omori",
+  "lat":-38.9058670,
+  "lon":175.7613350
+  },
+  {
+  "name":"DeltaW",
+  "lat":-38.9438550,
+  "lon":175.7676930
+  },
+  {
+  "name":"DeltaE",
+  "lat":-38.9395240,
+  "lon":175.7814420
+  },
+  {
+  "name":"BtClub",
+  "lat":-38.9446020,
+  "lon":175.8475720
+  },
+  {
+  "name":"Hapua",
+  "lat":-38.8177750,
+  "lon":175.8088720
+  },
+  {
+  "name":"Nook",
+  "lat":-38.7848090,
+  "lon":175.7839440
+  },
+  {
+  "name":"ChryBy",
+  "lat":-38.7975050,
+  "lon":175.7551960
+  },
+  {
+  "name":"Waiha",
+  "lat":-38.7219630,
+  "lon":175.7481520
+  },
+  {
+  "name":"KwaKwa",
+  "lat":-38.6632310,
+  "lon":175.8670320
+  },
+  {
+  "name":"Hatepe",
+  "lat":-38.8547420,
+  "lon":176.0089124
+  },
+  {
+  "name":"Kinloc",
+  "lat":-38.6614442,
+  "lon":175.9161607
+  }
+]
+

+
+## Comments and Feedback
+
+Developed for my use in sailing, cycling and motorcycling. If you find this software useful or have feedback drop me a line mike[at]kereru.com. Enjoy!
+
+## Thanks
+
+Many thanks to Gordon Williams. Awesome job.
+
+Special thanks also to @jeffmer, for the [GPS Navigation](https://banglejs.com/apps/#gps%20navigation) app and @hughbarney for the Low power GPS code development and Wouter Bulten for the Kalman filter code.
+
diff --git a/apps/speedalt2/app-icon.js b/apps/speedalt2/app-icon.js
new file mode 100644
index 000000000..f4f24a18b
--- /dev/null
+++ b/apps/speedalt2/app-icon.js
@@ -0,0 +1 @@
+require("heatshrink").decompress(atob("mEwxH+AH4A/AE+sFtoABF12swItsF9QuFR4IwmFwwvnFw4vCGEYuIF4JgjFxIvkFxQvCGBfOAAQvqFwYwRFxYvDGBIvUFxgv/F6IuNF4n+0nB4TvXFxwvF4XBAALlPF7ZfBGC4uPF4rABGAYAGTQwvad4YwKFzYvIGBQvfFwgAE3Qvt4IvEFzgvCLxO7Lx7vULzIzTFwIvgGZheFRAiNRGSQvpGYouesYAGmQAKq3CE4PIC4wviq2eFwPCroveCRSGEC6Qv0DAwRLcoouWC4VdVYQXkr1eAgVdAoIABroNEB4gHHC5QvHwQSDAAOCA74vH1uICQIABxGtA74vIAEwv/F/4vXAH4A/AHY"))
diff --git a/apps/speedalt2/app.js b/apps/speedalt2/app.js
new file mode 100644
index 000000000..0db9629c7
--- /dev/null
+++ b/apps/speedalt2/app.js
@@ -0,0 +1,725 @@
+/*
+Speed and Altitude [speedalt2]
+Mike Bennett mike[at]kereru.com
+0.01 : Initial
+0.06 : Add Posn screen
+0.07 : Add swipe to change screens same as BTN3
+*/
+var v = '1.05';
+
+/*kalmanjs, Wouter Bulten, MIT, https://github.com/wouterbulten/kalmanjs */
+var KalmanFilter = (function () {
+  'use strict';
+
+  function _classCallCheck(instance, Constructor) {
+    if (!(instance instanceof Constructor)) {
+      throw new TypeError("Cannot call a class as a function");
+    }
+  }
+
+  function _defineProperties(target, props) {
+    for (var i = 0; i < props.length; i++) {
+      var descriptor = props[i];
+      descriptor.enumerable = descriptor.enumerable || false;
+      descriptor.configurable = true;
+      if ("value" in descriptor) descriptor.writable = true;
+      Object.defineProperty(target, descriptor.key, descriptor);
+    }
+  }
+
+  function _createClass(Constructor, protoProps, staticProps) {
+    if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+    if (staticProps) _defineProperties(Constructor, staticProps);
+    return Constructor;
+  }
+
+  /**
+  * KalmanFilter
+  * @class
+  * @author Wouter Bulten
+  * @see {@link http://github.com/wouterbulten/kalmanjs}
+  * @version Version: 1.0.0-beta
+  * @copyright Copyright 2015-2018 Wouter Bulten
+  * @license MIT License
+  * @preserve
+  */
+  var KalmanFilter =
+  /*#__PURE__*/
+  function () {
+    /**
+    * Create 1-dimensional kalman filter
+    * @param  {Number} options.R Process noise
+    * @param  {Number} options.Q Measurement noise
+    * @param  {Number} options.A State vector
+    * @param  {Number} options.B Control vector
+    * @param  {Number} options.C Measurement vector
+    * @return {KalmanFilter}
+    */
+    function KalmanFilter() {
+      var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+          _ref$R = _ref.R,
+          R = _ref$R === void 0 ? 1 : _ref$R,
+          _ref$Q = _ref.Q,
+          Q = _ref$Q === void 0 ? 1 : _ref$Q,
+          _ref$A = _ref.A,
+          A = _ref$A === void 0 ? 1 : _ref$A,
+          _ref$B = _ref.B,
+          B = _ref$B === void 0 ? 0 : _ref$B,
+          _ref$C = _ref.C,
+          C = _ref$C === void 0 ? 1 : _ref$C;
+
+      _classCallCheck(this, KalmanFilter);
+
+      this.R = R; // noise power desirable
+
+      this.Q = Q; // noise power estimated
+
+      this.A = A;
+      this.C = C;
+      this.B = B;
+      this.cov = NaN;
+      this.x = NaN; // estimated signal without noise
+    }
+    /**
+    * Filter a new value
+    * @param  {Number} z Measurement
+    * @param  {Number} u Control
+    * @return {Number}
+    */
+
+
+    _createClass(KalmanFilter, [{
+      key: "filter",
+      value: function filter(z) {
+        var u = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+
+        if (isNaN(this.x)) {
+          this.x = 1 / this.C * z;
+          this.cov = 1 / this.C * this.Q * (1 / this.C);
+        } else {
+          // Compute prediction
+          var predX = this.predict(u);
+          var predCov = this.uncertainty(); // Kalman gain
+
+          var K = predCov * this.C * (1 / (this.C * predCov * this.C + this.Q)); // Correction
+
+          this.x = predX + K * (z - this.C * predX);
+          this.cov = predCov - K * this.C * predCov;
+        }
+
+        return this.x;
+      }
+      /**
+      * Predict next value
+      * @param  {Number} [u] Control
+      * @return {Number}
+      */
+
+    }, {
+      key: "predict",
+      value: function predict() {
+        var u = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+        return this.A * this.x + this.B * u;
+      }
+      /**
+      * Return uncertainty of filter
+      * @return {Number}
+      */
+
+    }, {
+      key: "uncertainty",
+      value: function uncertainty() {
+        return this.A * this.cov * this.A + this.R;
+      }
+      /**
+      * Return the last filtered measurement
+      * @return {Number}
+      */
+
+    }, {
+      key: "lastMeasurement",
+      value: function lastMeasurement() {
+        return this.x;
+      }
+      /**
+      * Set measurement noise Q
+      * @param {Number} noise
+      */
+
+    }, {
+      key: "setMeasurementNoise",
+      value: function setMeasurementNoise(noise) {
+        this.Q = noise;
+      }
+      /**
+      * Set the process noise R
+      * @param {Number} noise
+      */
+
+    }, {
+      key: "setProcessNoise",
+      value: function setProcessNoise(noise) {
+        this.R = noise;
+      }
+    }]);
+
+    return KalmanFilter;
+  }();
+
+  return KalmanFilter;
+
+}());
+
+
+var buf = Graphics.createArrayBuffer(240,160,2,{msb:true});
+
+// Load fonts
+//require("Font7x11Numeric7Seg").add(Graphics);
+
+var lf = {fix:0,satellites:0};
+var showMax = 0;        // 1 = display the max values. 0 = display the cur fix
+var pwrSav = 1;         // 1 = default power saving with watch screen off and GPS to PMOO mode. 0 = screen kept on.
+var canDraw = 1;
+var time = '';    // Last time string displayed. Re displayed in background colour to remove before drawing new time.
+var tmrLP;            // Timer for delay in switching to low power after screen turns off
+
+var max = {};
+max.spd = 0;
+max.alt = 0;
+max.n = 0;    // counter. Only start comparing for max after a certain number of fixes to allow kalman filter to have smoohed the data.
+
+var emulator = (process.env.BOARD=="EMSCRIPTEN")?1:0;  // 1 = running in emulator. Supplies test values;
+
+var wp = {};        // Waypoint to use for distance from cur position.
+
+function nxtWp(inc){
+  cfg.wp+=inc;
+  loadWp();
+}
+
+function loadWp() {
+  var w = require("Storage").readJSON('waypoints.json')||[{name:"NONE"}];
+  if (cfg.wp>=w.length) cfg.wp=0;
+  if (cfg.wp<0) cfg.wp = w.length-1;
+  savSettings();
+  wp = w[cfg.wp];
+}
+
+function radians(a) {
+  return a*Math.PI/180;
+}
+
+function distance(a,b){
+  var x = radians(a.lon-b.lon) * Math.cos(radians((a.lat+b.lat)/2));
+  var y = radians(b.lat-a.lat);
+  
+  // Distance in selected units
+  var d = Math.sqrt(x*x + y*y) * 6371000;
+  d = (d/parseFloat(cfg.dist)).toFixed(2);
+  if ( d >= 100 ) d = parseFloat(d).toFixed(1);
+  if ( d >= 1000 ) d = parseFloat(d).toFixed(0);
+
+  return d;
+}
+
+function drawScrn(dat) {
+
+  if (!canDraw) return;
+
+  buf.clear();
+
+  var n;
+  n = dat.val.toString();
+  
+  var s=50;    // Font size
+  var l=n.length;
+  
+  if ( l <= 7 ) s=55;
+  if ( l <= 6 ) s=60;
+  if ( l <= 5 ) s=80;
+  if ( l <= 4 ) s=100;
+  if ( l <= 3 ) s=120;
+        
+  buf.setFontAlign(0,0); //Centre 
+  buf.setColor(1);  
+  buf.setFontVector(s);
+  buf.drawString(n,126,52);
+
+  
+  // Primary Units
+  buf.setFontAlign(-1,1); //left, bottom
+  buf.setColor(2);  
+  buf.setFontVector(35);
+  buf.drawString(dat.unit,5,164);  
+  
+  if ( dat.max ) drawMax(); // MAX display indicator
+  if ( dat.wp ) drawWP();  // Waypoint name
+  
+  //Sats
+  if ( dat.sat ) {
+    if ( dat.age > 10 ) {
+      if ( dat.age > 90 ) dat.age = '>90';
+      drawSats('Age:'+dat.age);
+    }
+    else drawSats('Sats:'+dat.sats);
+  }
+  
+  g.reset();
+  g.drawImage(img,0,40);
+  
+  if ( pwrSav ) LED1.reset();
+  else LED1.set();
+
+}
+
+function drawPosn(dat) {
+  if (!canDraw) return;
+  buf.clear();
+
+  var x, y;
+  x=210;
+  y=0;
+  buf.setFontAlign(1,-1); 
+  buf.setFontVector(60);
+  buf.setColor(1);
+
+  buf.drawString(dat.lat,x,y);
+  buf.drawString(dat.lon,x,y+70);
+
+  x = 240;
+  buf.setColor(2);
+  buf.setFontVector(40);
+  buf.drawString(dat.ns,x,y);
+  buf.drawString(dat.ew,x,y+70);
+
+
+  //Sats
+  if ( dat.sat ) {
+    if ( dat.age > 10 ) {
+      if ( dat.age > 90 ) dat.age = '>90';
+      drawSats('Age:'+dat.age);
+    }
+    else drawSats('Sats:'+dat.sats);
+  }
+
+  g.reset();
+  g.drawImage(img,0,40);
+
+  if ( pwrSav ) LED1.reset();
+  else LED1.set();
+
+}
+
+function drawClock() {
+  if (!canDraw) return;
+  
+  buf.clear();
+  var x, y;
+  x=185;
+  y=0;
+  buf.setFontAlign(1,-1); 
+  buf.setFontVector(94);
+  time = require("locale").time(new Date(),1);
+  
+  buf.setColor(1);
+  
+  buf.drawString(time.substring(0,2),x,y);
+  buf.drawString(time.substring(3,5),x,y+80);
+  
+  g.reset();
+  g.drawImage(img,0,40);
+  
+  if ( pwrSav ) LED1.reset();
+  else LED1.set(); 
+}
+
+function drawWP() {
+  var nm = wp.name;
+  if ( nm == undefined || nm == 'NONE' || cfg.modeA ==1 ) nm = '';
+  buf.setColor(2);  
+
+  buf.setFontAlign(0,1); //left, bottom
+  buf.setFontVector(48);
+  buf.drawString(nm.substring(0,8),120,140);  
+
+}
+
+function drawSats(sats) {
+  buf.setColor(3);  
+  buf.setFont("6x8", 2);
+  buf.setFontAlign(1,1); //right, bottom
+  buf.drawString(sats,240,160);  
+}
+
+function drawMax() {
+  buf.setFontVector(30);
+  buf.setColor(2); 
+  buf.setFontAlign(0,1); //centre, bottom
+  buf.drawString('MAX',120,164);
+}
+
+function onGPS(fix) {
+  
+ if ( emulator ) {
+    fix.fix = 1;
+    fix.speed = 10 + (Math.random()*5);
+    fix.alt = 354 + (Math.random()*50);
+    fix.lat = -38.92;
+    fix.lon = 175.7613350;   
+    fix.course = 245;
+    fix.satellites = 12;
+    fix.time = new Date();
+    fix.smoothed = 0;
+  }
+
+  var m;
+
+  var sp = '---';        
+  var al = '---';
+  var di = '---';
+  var age = '---';
+  var lat = '---.--';
+  var ns = '';
+  var ew = '';
+  var lon = '---.--';
+  
+
+  if (fix.fix) lf = fix;
+
+  if (lf.fix) {
+
+    // Smooth data
+    if ( lf.smoothed !== 1 ) {
+      if ( cfg.spdFilt ) lf.speed = spdFilter.filter(lf.speed);
+      if ( cfg.altFilt ) lf.alt = altFilter.filter(lf.alt);
+      lf.smoothed = 1;
+      if ( max.n <= 15 ) max.n++;
+    }
+
+
+    // Speed
+    if ( cfg.spd == 0 ) {
+      m = require("locale").speed(lf.speed).match(/([0-9,\.]+)(.*)/); // regex splits numbers from units
+      sp = parseFloat(m[1]);
+      cfg.spd_unit = m[2];
+    }
+    else sp = parseFloat(lf.speed)/parseFloat(cfg.spd); // Calculate for selected units
+
+    if ( sp < 10 ) sp = sp.toFixed(1);
+    else sp = Math.round(sp);
+    
+    if (parseFloat(sp) > parseFloat(max.spd) && max.n > 15 ) max.spd = sp;
+
+    // Altitude
+    al = lf.alt;
+    al = Math.round(parseFloat(al)/parseFloat(cfg.alt));
+    
+    if (parseFloat(al) > parseFloat(max.alt) && max.n > 15 ) max.alt = al;
+
+    // Distance to waypoint
+    di = distance(lf,wp);
+    if (isNaN(di)) di = 0;
+
+    // Age of last fix (secs)
+    age = Math.max(0,Math.round(getTime())-(lf.time.getTime()/1000));
+
+    // Lat / Lon
+    ns = 'N';
+    if ( lf.lat < 0 ) ns = 'S';
+    lat = Math.abs(lf.lat.toFixed(2)); 
+
+    ew = 'E';
+    if ( lf.lon < 0 ) ew = 'W';
+    lon = Math.abs(lf.lon.toFixed(2)); 
+
+  }
+
+  if ( cfg.modeA == 0 )  {
+    // Speed
+    if ( showMax ) 
+      drawScrn({
+        val:max.spd,
+        unit:cfg.spd_unit,
+        sats:lf.satellites,
+        age:age,
+        max:true,
+        wp:false,
+        sat:true
+      }); // Speed maximums
+    else
+      drawScrn({
+        val:sp,
+        unit:cfg.spd_unit,
+        sats:lf.satellites,
+        age:age,
+        max:false,
+        wp:false,
+        sat:true
+      });
+  }
+
+  if ( cfg.modeA == 1 ) {
+    // Alt
+    if ( showMax ) 
+      drawScrn({
+        val:max.alt,
+        unit:cfg.alt_unit,
+        sats:lf.satellites,
+        age:age,
+        max:true,
+        wp:false,
+        sat:true
+      }); // Alt maximums
+    else 
+      drawScrn({
+        val:al,
+        unit:cfg.alt_unit,
+        sats:lf.satellites,
+        age:age,
+        max:false,
+        wp:false,
+        sat:true
+      });
+  }
+
+  if ( cfg.modeA == 2 ) {
+    // Dist
+      drawScrn({
+        val:di,
+        unit:cfg.dist_unit,
+        sats:lf.satellites,
+        age:age,
+        max:false,
+        wp:true,
+        sat:true
+      });
+  }
+
+  if ( cfg.modeA == 3 ) {
+    // Position
+      drawPosn({
+        sats:lf.satellites,
+        age:age,
+        lat:lat,
+        lon:lon,
+        ns:ns,
+        ew:ew,
+        sat:true
+      });
+  }
+  
+  if ( cfg.modeA == 4 )  {
+    // Large clock
+    drawClock();
+  }
+
+}
+
+function prevScrn() {
+    cfg.modeA = cfg.modeA-1;
+    if ( cfg.modeA < 0 ) cfg.modeA = 4;
+    savSettings();
+    onGPS(lf); 
+}
+
+function nextScrn() {
+    cfg.modeA = cfg.modeA+1;
+    if ( cfg.modeA > 4 ) cfg.modeA = 0;
+    savSettings();
+    onGPS(lf); 
+}
+
+// Next function on a screen
+function nextFunc(dur) {
+    if ( cfg.modeA == 0 || cfg.modeA == 1 ) {
+      // Spd+Alt mode - Switch between fix and MAX
+      if ( dur < 2 ) showMax = !showMax;   // Short press toggle fix/max display
+      else { max.spd = 0; max.alt = 0; }  // Long press resets max values.
+    }
+    else  if ( cfg.modeA == 2) nxtWp(1);  // Dist mode - Select next waypoint
+    onGPS(lf);
+}
+
+
+function updateClock() {
+  if (!canDraw) return;
+  if ( cfg.modeA != 4 )  return;
+  drawClock(); 
+  if ( emulator ) {max.spd++;max.alt++;}
+}
+
+function startDraw(){
+  canDraw=true;
+  g.clear();
+  Bangle.drawWidgets();
+  setLpMode('SuperE'); // off
+  onGPS(lf);  // draw app screen
+}
+
+function stopDraw() {
+  canDraw=false;
+  if (!tmrLP) tmrLP=setInterval(function () {if (lf.fix) setLpMode('PSMOO');}, 10000);   //Drop to low power in 10 secs. Keep lp mode off until we have a  first fix.
+}
+
+function savSettings() {
+  require("Storage").write('speedalt2.json',cfg);
+}
+
+function setLpMode(m) {
+  if (tmrLP) {clearInterval(tmrLP);tmrLP = false;} // Stop any scheduled drop to low power
+  if ( !gpssetup ) return;
+  gpssetup.setPowerMode({power_mode:m});
+}
+
+// == Events
+
+function setButtons(){
+
+  // BTN1 - Max speed/alt or next waypoint
+  setWatch(function(e) {
+    var dur = e.time - e.lastTime;
+    nextFunc(dur);
+  }, BTN1, { edge:"falling",repeat:true});
+  
+  // Power saving on/off 
+  setWatch(function(e){
+    pwrSav=!pwrSav; 
+    if ( pwrSav ) {
+      LED1.reset();
+      var s = require('Storage').readJSON('setting.json',1)||{};
+      var t = s.timeout||10;
+      Bangle.setLCDTimeout(t);
+    }
+    else {
+      Bangle.setLCDTimeout(0);
+//      Bangle.setLCDPower(1);
+      LED1.set();
+    }
+  }, BTN2, {repeat:true,edge:"falling"});
+  
+  // BTN3 - next screen
+  setWatch(function(e){
+    nextScrn();
+  }, BTN3, {repeat:true,edge:"falling"});
+  
+/* 
+  // Touch screen same as BTN1 short
+  setWatch(function(e){
+    nextFunc(1);  // Same as BTN1 short
+  }, BTN4, {repeat:true,edge:"falling"});
+  setWatch(function(e){
+    nextFunc(1);  // Same as BTN1 short
+  }, BTN5, {repeat:true,edge:"falling"});
+*/
+
+}
+
+Bangle.on('lcdPower',function(on) {
+  if (!SCREENACCESS.withApp) return;
+  if (on) startDraw(); 
+  else stopDraw();
+});
+
+Bangle.on('swipe',function(dir) {
+  if ( ! cfg.touch ) return;
+  if(dir == 1) prevScrn();
+  else nextScrn();
+});
+
+Bangle.on('touch', function(button){
+  if ( ! cfg.touch ) return;
+  nextFunc(0);  // Same function as short BTN1
+/*  
+    switch(button){
+    case 1:    // BTN4
+console.log('BTN4');
+        prevScrn();
+      break;
+    case 2:    // BTN5
+console.log('BTN5');
+      nextScrn();
+      break;
+    case 3:
+console.log('MDL');
+      nextFunc(0);  // Centre - same function as short BTN1
+      break;
+    }
+*/
+  });
+
+
+
+// == Main Prog
+
+// Read settings. 
+let cfg = require('Storage').readJSON('speedalt2.json',1)||{};
+
+cfg.spd = cfg.spd||0;  // Multiplier for speed unit conversions. 0 = use the locale values for speed
+cfg.spd_unit = cfg.spd_unit||'';  // Displayed speed unit
+cfg.alt = cfg.alt||0.3048;// Multiplier for altitude unit conversions.
+cfg.alt_unit = cfg.alt_unit||'feet';  // Displayed altitude units
+cfg.dist = cfg.dist||1000;// Multiplier for distnce unit conversions.
+cfg.dist_unit = cfg.dist_unit||'km';  // Displayed altitude units
+cfg.colour = cfg.colour||0;          // Colour scheme.
+cfg.wp = cfg.wp||0;        // Last selected waypoint for dist
+cfg.modeA = cfg.modeA||0;    // 0=Speed 1=Alt 2=Dist 3=Position 4=Clock 
+cfg.primSpd = cfg.primSpd||0;    // 1 = Spd in primary, 0 = Spd in secondary
+
+cfg.spdFilt = cfg.spdFilt==undefined?true:cfg.spdFilt; 
+cfg.altFilt = cfg.altFilt==undefined?true:cfg.altFilt;
+cfg.touch = cfg.touch==undefined?true:cfg.touch;
+
+if ( cfg.spdFilt ) var spdFilter = new KalmanFilter({R: 0.1 , Q: 1 });
+if ( cfg.altFilt ) var altFilter = new KalmanFilter({R: 0.01, Q: 2 });
+
+loadWp();
+
+/*
+Colour Pallet Idx
+0 : Background (black)
+1 : Speed/Alt
+2 : Units
+3 : Sats
+*/
+var img = {
+  width:buf.getWidth(),
+  height:buf.getHeight(),
+  bpp:2,
+  buffer:buf.buffer,
+  palette:new Uint16Array([0,0x4FE0,0xEFE0,0x07DB])
+};
+
+if ( cfg.colour == 1 ) img.palette = new Uint16Array([0,0xFFFF,0xFFF6,0xDFFF]);
+if ( cfg.colour == 2 ) img.palette = new Uint16Array([0,0xFF800,0xFAE0,0xF813]);
+
+var SCREENACCESS = {
+      withApp:true,
+      request:function(){this.withApp=false;stopDraw();},
+      release:function(){this.withApp=true;startDraw();}
+}; 
+
+var gpssetup;
+try {
+  gpssetup = require("gpssetup");
+} catch(e) {
+  gpssetup = false;
+}
+
+// All set up. Lets go.
+g.clear();
+Bangle.loadWidgets();
+Bangle.drawWidgets();
+onGPS(lf);
+Bangle.setGPSPower(1);
+
+if ( gpssetup ) {
+  gpssetup.setPowerMode({power_mode:"SuperE"}).then(function() { Bangle.setGPSPower(1); });
+}
+else {
+  Bangle.setGPSPower(1);
+}
+
+Bangle.on('GPS', onGPS);
+
+setButtons();
+setInterval(updateClock, 10000);
diff --git a/apps/speedalt2/app.png b/apps/speedalt2/app.png
new file mode 100644
index 000000000..93d8e57dc
Binary files /dev/null and b/apps/speedalt2/app.png differ
diff --git a/apps/speedalt2/settings.js b/apps/speedalt2/settings.js
new file mode 100644
index 000000000..96174a89b
--- /dev/null
+++ b/apps/speedalt2/settings.js
@@ -0,0 +1,89 @@
+(function(back) {
+
+  let settings = require('Storage').readJSON('speedalt2.json',1)||{};
+  //settings.buzz = settings.buzz||1;
+  
+  function writeSettings() {
+    require('Storage').write('speedalt2.json',settings);
+  }
+  
+   function setUnits(m,u) {
+    settings.spd = m;
+    settings.spd_unit = u;
+    writeSettings();
+  }
+
+  function setUnitsAlt(m,u) {
+    settings.alt = m;
+    settings.alt_unit = u;
+    writeSettings();
+  }
+
+  function setUnitsDist(d,u) {
+    settings.dist = d;
+    settings.dist_unit = u;
+    writeSettings();
+  }
+
+  function setColour(c) {
+    settings.colour = c;
+    writeSettings();
+  }
+
+  
+  const appMenu = {
+    '': {'title': 'GPS Adv Sprt II'},
+    '< Back': back,
+    '< Load GPS Adv Sport': ()=>{load('speedalt2.app.js');},
+    'Units' : function() { E.showMenu(unitsMenu); },
+    'Colours' : function() { E.showMenu(colMenu); },
+    'Kalman Filter' : function() { E.showMenu(kalMenu); },
+    'Touch' : {
+       value : settings.touch,
+       format : v => v?"On":"Off",
+       onchange : () => { settings.touch = !settings.touch; writeSettings(); }
+    }
+  };
+  
+  const unitsMenu = {
+    '': {'title': 'Units'},
+    '< Back': function() { E.showMenu(appMenu); },
+    'default (spd)' : function() { setUnits(0,''); },
+    'Kph (spd)' : function() { setUnits(1,'kph'); },
+    'Knots (spd)' : function() { setUnits(1.852,'kts'); },
+    'Mph (spd)' : function() { setUnits(1.60934,'mph'); },
+    'm/s (spd)' : function() { setUnits(3.6,'m/s'); },
+    'Km (dist)' : function() { setUnitsDist(1000,'km'); },
+    'Miles (dist)' : function() { setUnitsDist(1609.344,'mi'); },
+    'Nm (dist)' : function() { setUnitsDist(1852.001,'nm'); },
+    'Meters (alt)' : function() { setUnitsAlt(1,'m'); },
+    'Feet (alt)' : function() { setUnitsAlt(0.3048,'ft'); }
+  };
+
+  const colMenu = {
+    '': {'title': 'Colours'},
+    '< Back': function() { E.showMenu(appMenu); },
+    'Default' : function() { setColour(0); },
+    'Hi Contrast' : function() { setColour(1); },
+    'Night' : function() { setColour(2); }
+  };
+  
+  const kalMenu = {
+    '': {'title': 'Kalman Filter'},
+    '< Back': function() { E.showMenu(appMenu); },
+    'Speed' : {
+    value : settings.spdFilt,
+    format : v => v?"On":"Off",
+    onchange : () => { settings.spdFilt = !settings.spdFilt; writeSettings(); }
+    },
+    'Altitude' : {
+    value : settings.altFilt,
+    format : v => v?"On":"Off",
+    onchange : () => { settings.altFilt = !settings.altFilt; writeSettings(); }
+    }
+  };
+
+  
+  E.showMenu(appMenu);
+
+});
diff --git a/apps/speedo/ChangeLog b/apps/speedo/ChangeLog
index 35cef4520..91df52211 100644
--- a/apps/speedo/ChangeLog
+++ b/apps/speedo/ChangeLog
@@ -3,3 +3,4 @@
 0.03: Use offscreen buffer (not doublebuffer)
       Use 'locale' to get internationalised speed
 0.04: Start GPS after loading app, just in case widgets affect it (#449)
+0.05: Use Layout lib for Bangle.js 2 compatibility
diff --git a/apps/speedo/speedo.js b/apps/speedo/speedo.js
index 174702d71..1d87859a8 100644
--- a/apps/speedo/speedo.js
+++ b/apps/speedo/speedo.js
@@ -1,33 +1,61 @@
-var buf = Graphics.createArrayBuffer(240,120,1,{msb:true});
-var lastFix = {fix:0,satellites:0};
+var Layout = require("Layout");
+var layout;
+
+var lastFix = {fix:-1,satellites:0};
+
+function speedoImage() {
+  return require("heatshrink").decompress(atob("kkdxH+ABteAAwWOECImZDQ2CAQglUD4us2fX68ymQDB1omFESWtDgIACEYYACrolPBwddmWIEZWsmVWJYgiLwXX2YcB1gdDq+BAodWGIWsEhQiDRAWBmQdEAAhGBroFC1ojMC4etERIlDAggkHNIgAWSYYjFVwNWGwgAP5KkBEYoFC1ihBagwAL5W72vKJAxpExCiDABnQ4W12vD6AHBEYxnT4YhB3ghCSIhqDe4SIP3giBM4LfFEYpiMDoQhC3fDCA7+DfBwiCAARmFAAmtEYlYagMywISHEQhEId4UyEYleqwABEZBHERQwABroZBq5rR6BGLNZKzMAAPKRZKzJr2tfaAAKxD7CfgRsD1g1GAAwME2YGDwQjFNgOzwMyCwuCwIAEBg0yHoKODEYmCcYNWCwutAAuzBgg4BCwJGEEgj7JV5r7BIwgjEWrDVCEQYkCWgYAWNYIjF/z8awQfD"));
+}
+
 function onGPS(fix) {
+  if (lastFix.fix != fix.fix) {
+    // if fix is different, change the layout
+    if (fix.fix) {
+      layout = new Layout( {
+        type:"v", c: [
+         {type:"txt", font:"6x8:2", label:"Speed" },
+         {type:"h", c: [
+           {type:"img", src:speedoImage, pad:4 },
+           {type:"txt", font:"35%", label:"--", fillx:true, id:"speed" },
+         ]},
+         {type:"txt", font:"6x8", label:"--", id:"units" },
+         {type:"h", c: [
+            {type:"txt", font:"10%", label:fix.satellites, pad:2, id:"sat" },
+            {type:"txt", font:"6x8", pad:3, label:"Satellites" }
+          ]},
+        ]},{lazy:true});
+    } else {
+      layout = new Layout( {
+        type:"v", c: [
+         {type:"txt", font:"6x8:2", label:"Speed" },
+          {type:"img", src:speedoImage, pad:4 },
+          {type:"txt", font:"6x8", label:"Waiting for GPS" },
+          {type:"h", c: [
+            {type:"txt", font:"10%", label:fix.satellites, pad:2, id:"sat" },
+            {type:"txt", font:"6x8", pad:3, label:"Satellites" }
+          ]},
+        ]},{lazy:true});
+    }
+    g.clearRect(0,24,g.getWidth(),g.getHeight());
+    layout.render();
+  }
   lastFix = fix;
-  buf.clear();
-  buf.setFontAlign(0,0);
-  buf.setFont("6x8");
-  buf.drawString(fix.satellites+" satellites",120,6);
-  if (fix.fix) {
+
+  if (fix.fix && isFinite(fix.speed)) {
     var speed = require("locale").speed(fix.speed);
     var m = speed.match(/([0-9,\.]+)(.*)/); // regex splits numbers from units
     var txt = (fix.speed<20) ? fix.speed.toFixed(1) : Math.round(fix.speed);
-    var value = m[1], units = m[2];
-    var s = 80;
-    buf.setFontVector(s);
-    buf.drawString(value,120,10+s/2);
-    buf.setFont("6x8",2);
-    buf.drawString(units,120,s+26);
-  } else {
-    buf.setFont("6x8",2);
-    buf.drawString("Waiting for GPS",120,56);
+    layout.speed.label = m[1];
+    layout.units.label = m[2];
   }
-  g.reset();
-  g.drawImage({width:buf.getWidth(),height:buf.getHeight(),bpp:1,buffer:buf.buffer},0,70);
-  g.flip();
+  layout.sat.label = fix.satellites;
+  layout.render();
 }
 g.clear();
-onGPS(lastFix);
+onGPS({fix:0,satellites:0});
+// onGPS({fix:1,satellites:3,speed:200}); // testing
 Bangle.loadWidgets();
 Bangle.drawWidgets();
 
 Bangle.on('GPS', onGPS);
-Bangle.setGPSPower(1);
+Bangle.setGPSPower(1, "app");
diff --git a/apps/stopwatch/A.jpg b/apps/stopwatch/A.jpg
new file mode 100644
index 000000000..9155b9986
Binary files /dev/null and b/apps/stopwatch/A.jpg differ
diff --git a/apps/stopwatch/B.jpg b/apps/stopwatch/B.jpg
new file mode 100644
index 000000000..639ff5d42
Binary files /dev/null and b/apps/stopwatch/B.jpg differ
diff --git a/apps/stopwatch/ChangeLog b/apps/stopwatch/ChangeLog
new file mode 100644
index 000000000..9db0e26c5
--- /dev/null
+++ b/apps/stopwatch/ChangeLog
@@ -0,0 +1 @@
+0.01: first release
diff --git a/apps/stopwatch/README.md b/apps/stopwatch/README.md
new file mode 100644
index 000000000..30a9306d1
--- /dev/null
+++ b/apps/stopwatch/README.md
@@ -0,0 +1,33 @@
+# Stopwatch Touch
+
+A touch screen based stop watch for Bangle 2
+
+## Screenshots
+
+![](screenshot1.png)
+![](screenshot2.png)
+![](screenshot3.png)
+
+## Features
+
+* Attractive UI design
+* Will run up to 99 hours
+* Shows 10th of seconds up to 1 hour
+* Start / Pause button
+* Reset button
+
+## Future features
+
+I'm keen to complete this project with
+
+* Ability to dismiss the app and leave it running in the background
+* A small widget to show the elapsed time on the current active clock
+* Laptimes, with a way to view all the laptimes on a scrollable screen
+
+
+## One of these is a genuine Bangle Js 2 Open Source Smartwatch, the other isn't
+
+Which one is which ?
+
+![](A.jpg)
+![](B.jpg)
diff --git a/apps/stopwatch/pause-24.png b/apps/stopwatch/pause-24.png
new file mode 100644
index 000000000..eb3d8feaa
Binary files /dev/null and b/apps/stopwatch/pause-24.png differ
diff --git a/apps/stopwatch/pause-24a.png b/apps/stopwatch/pause-24a.png
new file mode 100644
index 000000000..7838ef640
Binary files /dev/null and b/apps/stopwatch/pause-24a.png differ
diff --git a/apps/stopwatch/play-24.png b/apps/stopwatch/play-24.png
new file mode 100644
index 000000000..268b5dc31
Binary files /dev/null and b/apps/stopwatch/play-24.png differ
diff --git a/apps/stopwatch/screenshot1.png b/apps/stopwatch/screenshot1.png
new file mode 100644
index 000000000..6d94ce05c
Binary files /dev/null and b/apps/stopwatch/screenshot1.png differ
diff --git a/apps/stopwatch/screenshot2.png b/apps/stopwatch/screenshot2.png
new file mode 100644
index 000000000..0baa73331
Binary files /dev/null and b/apps/stopwatch/screenshot2.png differ
diff --git a/apps/stopwatch/screenshot3.png b/apps/stopwatch/screenshot3.png
new file mode 100644
index 000000000..1e7cfca58
Binary files /dev/null and b/apps/stopwatch/screenshot3.png differ
diff --git a/apps/stopwatch/stop-24.png b/apps/stopwatch/stop-24.png
new file mode 100644
index 000000000..658d614ca
Binary files /dev/null and b/apps/stopwatch/stop-24.png differ
diff --git a/apps/stopwatch/stop-24a.png b/apps/stopwatch/stop-24a.png
new file mode 100644
index 000000000..e89ddae05
Binary files /dev/null and b/apps/stopwatch/stop-24a.png differ
diff --git a/apps/stopwatch/stopwatch.app.js b/apps/stopwatch/stopwatch.app.js
new file mode 100644
index 000000000..48d4f26ea
--- /dev/null
+++ b/apps/stopwatch/stopwatch.app.js
@@ -0,0 +1,220 @@
+let w = g.getWidth();
+let h = g.getHeight();
+let tTotal = Date.now();
+let tStart = tTotal;
+let tCurrent = tTotal;
+let running = false;
+let timeY = 2*h/5;
+let displayInterval;
+let redrawButtons = true;
+const iconScale = g.getWidth() / 178; // scale up/down based on Bangle 2 size
+
+// 24 pixel images, scale to watch
+// 1 bit optimal, image string, no E.toArrayBuffer()
+const pause_img = atob("GBiBAf////////////////wYP/wYP/wYP/wYP/wYP/wYP/wYP/wYP/wYP/wYP/wYP/wYP/wYP/wYP/wYP/wYP////////////////w==");
+const play_img = atob("GBjBAP//AAAAAAAAAAAIAAAOAAAPgAAP4AAP+AAP/AAP/wAP/8AP//AP//gP//gP//AP/8AP/wAP/AAP+AAP4AAPgAAOAAAIAAAAAAAAAAA=");
+const reset_img = atob("GBiBAf////////////AAD+AAB+f/5+f/5+f/5+cA5+cA5+cA5+cA5+cA5+cA5+cA5+cA5+f/5+f/5+f/5+AAB/AAD////////////w==");
+
+function log_debug(o) {
+  //console.log(o);
+}
+
+function timeToText(t) {
+  let hrs = Math.floor(t/3600000);
+  let mins = Math.floor(t/60000)%60;
+  let secs = Math.floor(t/1000)%60;
+  let tnth = Math.floor(t/100)%10;
+  let text;
+
+  if (hrs === 0) 
+    text = ("0"+mins).substr(-2) + ":" + ("0"+secs).substr(-2) + "." + tnth;
+  else
+    text = ("0"+hrs) + ":" + ("0"+mins).substr(-2) + ":" + ("0"+secs).substr(-2);
+
+  //log_debug(text);
+  return text;
+}
+
+function drawButtons() {
+  log_debug("drawButtons()");
+  if (!running && tCurrent == tTotal) {
+    bigPlayPauseBtn.draw();
+  } else if (!running && tCurrent != tTotal) {
+    resetBtn.draw();
+    smallPlayPauseBtn.draw();
+  } else {
+    bigPlayPauseBtn.draw();
+  }
+  
+  redrawButtons = false;
+}
+
+function drawTime() {
+  log_debug("drawTime()");
+  let Tt = tCurrent-tTotal;
+  let Ttxt = timeToText(Tt);
+
+  // total time
+  g.setFont("Vector",38);  // check
+  g.setFontAlign(0,0);
+  g.clearRect(0, timeY - 21, w, timeY + 21);
+  g.setColor(g.theme.fg); 
+  g.drawString(Ttxt, w/2, timeY);
+}
+
+function draw() {
+  let last = tCurrent;
+  if (running) tCurrent = Date.now();
+  g.setColor(g.theme.fg);
+  if (redrawButtons) drawButtons();
+  drawTime();
+}
+
+function startTimer() {
+  log_debug("startTimer()");
+  draw();
+  displayInterval = setInterval(draw, 100);
+}
+
+function stopTimer() {
+  log_debug("stopTimer()");
+  if (displayInterval) {
+    clearInterval(displayInterval);
+    displayInterval = undefined;
+  }
+}
+
+// BTN stop start
+function stopStart() {
+  log_debug("stopStart()");
+
+  if (running)
+    stopTimer();
+
+  running = !running;
+  Bangle.buzz();
+
+  if (running)
+    tStart = Date.now() + tStart- tCurrent;  
+  tTotal = Date.now() + tTotal - tCurrent;
+  tCurrent = Date.now();
+
+  setButtonImages();
+  redrawButtons = true;
+  if (running) {
+    startTimer();
+  } else {
+    draw();
+  }
+}
+
+function setButtonImages() {
+  if (running) {
+    bigPlayPauseBtn.setImage(pause_img);
+    smallPlayPauseBtn.setImage(pause_img);
+    resetBtn.setImage(reset_img);
+  } else {
+    bigPlayPauseBtn.setImage(play_img);
+    smallPlayPauseBtn.setImage(play_img);
+    resetBtn.setImage(reset_img);
+  }
+}
+
+// lap or reset
+function lapReset() {
+  log_debug("lapReset()");
+  if (!running && tStart != tCurrent) {
+    redrawButtons = true;
+    Bangle.buzz();
+    tStart = tCurrent = tTotal = Date.now();
+    g.clearRect(0,24,w,h);
+    draw();
+  }
+}
+
+// simple on screen button class
+function BUTTON(name,x,y,w,h,c,f,i) {
+  this.name = name;
+  this.x = x;
+  this.y = y;
+  this.w = w;
+  this.h = h;
+  this.color = c;
+  this.callback = f;
+  this.img = i;
+}
+
+BUTTON.prototype.setImage = function(i) {
+  this.img = i;
+}
+
+// if pressed the callback
+BUTTON.prototype.check = function(x,y) {
+  //console.log(this.name + ":check() x=" + x + " y=" + y +"\n");
+  
+  if (x>= this.x && x<= (this.x + this.w) && y>= this.y && y<= (this.y + this.h)) {
+    log_debug(this.name + ":callback\n");
+    this.callback();
+    return true;
+  }
+  return false;
+};
+
+BUTTON.prototype.draw = function() {
+  g.setColor(this.color);
+  g.fillRect(this.x, this.y, this.x + this.w, this.y + this.h);
+  g.setColor("#000"); // the icons and boxes are drawn black
+  if (this.img != undefined) {
+    let iw = iconScale * 24;  // the images were loaded as 24 pixels, we will scale
+    let ix = this.x + ((this.w - iw) /2);
+    let iy = this.y + ((this.h - iw) /2);
+    log_debug("g.drawImage(" + ix + "," + iy + "{scale: " + iconScale + "})");
+    g.drawImage(this.img, ix, iy, {scale: iconScale}); 
+  }
+  g.drawRect(this.x, this.y, this.x + this.w, this.y + this.h);
+};
+
+
+var bigPlayPauseBtn = new BUTTON("big",0, 3*h/4 ,w, h/4, "#0ff", stopStart, play_img);
+var smallPlayPauseBtn = new BUTTON("small",w/2, 3*h/4 ,w/2, h/4, "#0ff", stopStart, play_img);
+var resetBtn = new BUTTON("rst",0, 3*h/4, w/2, h/4, "#ff0", lapReset, pause_img);
+
+bigPlayPauseBtn.setImage(play_img);
+smallPlayPauseBtn.setImage(play_img);
+resetBtn.setImage(pause_img);
+
+
+Bangle.on('touch', function(button, xy) {
+  // not running, and reset
+  if (!running && tCurrent == tTotal && bigPlayPauseBtn.check(xy.x, xy.y)) return;
+
+  // paused and hit play
+  if (!running && tCurrent != tTotal && smallPlayPauseBtn.check(xy.x, xy.y)) return;
+
+  // paused and press reset
+  if (!running && tCurrent != tTotal && resetBtn.check(xy.x, xy.y)) return;
+
+  // must be running
+  if (running && bigPlayPauseBtn.check(xy.x, xy.y)) return;
+});
+
+// Stop updates when LCD is off, restart when on
+Bangle.on('lcdPower',on=>{
+  if (on) {
+    draw(); // draw immediately, queue redraw
+  } else { // stop draw timer
+    if (drawTimeout) clearTimeout(drawTimeout);
+    drawTimeout = undefined;
+  }
+});
+
+// Clear the screen once, at startup
+g.setTheme({bg:"#000",fg:"#fff",dark:true}).clear();
+// above not working, hence using next 2 lines
+g.setColor("#000");
+g.fillRect(0,0,w,h);
+
+Bangle.loadWidgets();
+Bangle.drawWidgets();
+draw();
+Bangle.setUI("clock"); // Show launcher when button pressed
diff --git a/apps/stopwatch/stopwatch.icon.js b/apps/stopwatch/stopwatch.icon.js
new file mode 100644
index 000000000..32281b7ab
--- /dev/null
+++ b/apps/stopwatch/stopwatch.icon.js
@@ -0,0 +1 @@
+require("heatshrink").decompress(atob("mEw4UA///vvvvEF/muH+cDHgPABf4AElWoKhILClALH1WqAQIWHBYIABwAKEgQKD1WgBYkK1X1r4XHlWtqtVvQLG1XVBYNXHYsC1YJBBoPqC4kKEQILCvQ7EhW1BYdeBYkqytVqwCCQwkqCgILCq4LFIoILCqoLEIwIsBGQJIBBZ+pA4Na0oDBtQLGvSFCBaYjIHYR3CI5AADBYhrCAAaDHAASDGQASGCBYizCAASzFZYQACZYrjCIwb7QHgIkCvQ6EGAWq+tf1QuEGAWqAAQuFEgQKBEQw9DHIwAuA="))
diff --git a/apps/stopwatch/stopwatch.png b/apps/stopwatch/stopwatch.png
new file mode 100644
index 000000000..92ffe73b7
Binary files /dev/null and b/apps/stopwatch/stopwatch.png differ
diff --git a/apps/svclock/ChangeLog b/apps/svclock/ChangeLog
index 671de492c..fb71fbeb8 100644
--- a/apps/svclock/ChangeLog
+++ b/apps/svclock/ChangeLog
@@ -1,2 +1,4 @@
 0.01: Modification of SimpleClock 0.04 to use Vectorfont
 0.02: Use Bangle.setUI for button/launcher handling
+0.03: Scale to BangleJS 2 and add locale
+0.04: Fix rendering issue on real hardware, now update *on* the minute rather than every 15 secs
diff --git a/apps/svclock/bangle2-simple-v-clock-screenshot.png b/apps/svclock/bangle2-simple-v-clock-screenshot.png
new file mode 100644
index 000000000..a2050bb89
Binary files /dev/null and b/apps/svclock/bangle2-simple-v-clock-screenshot.png differ
diff --git a/apps/svclock/vclock-simple.js b/apps/svclock/vclock-simple.js
index f3ab911bc..e08c6fa2c 100644
--- a/apps/svclock/vclock-simple.js
+++ b/apps/svclock/vclock-simple.js
@@ -1,84 +1,109 @@
-/* jshint esversion: 6 */
-const timeFontSize = 65;
-const dateFontSize = 20;
-const gmtFontSize = 10;
-const font = "Vector";
+const locale = require("locale");
 
-const xyCenter = g.getWidth() / 2;
-const yposTime = 75;
-const yposDate = 130;
-const yposYear = 175;
-const yposGMT = 220;
+var timeFontSize;
+var dateFontSize;
+var gmtFontSize;
+var font = "Vector";
 
+var xyCenter = g.getWidth() / 2;
+var yposTime;
+var yposDate;
+var yposYear;
+var yposGMT;
+
+if (g.getWidth() > 200) {
+    timeFontSize = 65;
+    dateFontSize = 20;
+    gmtFontSize = 10;
+
+    yposTime = 75;
+    yposDate = 130;
+    yposYear = 175;
+    yposGMT = 220;
+} else {
+    timeFontSize = 48;
+    dateFontSize = 15;
+    gmtFontSize = 10;
+
+    yposTime = 55;
+    yposDate = 95;
+    yposYear = 128;
+    yposGMT = 161;
+}
 // Check settings for what type our clock should be
 var is12Hour = (require("Storage").readJSON("setting.json",1)||{})["12hour"];
 
-function drawSimpleClock() {
+// timeout used to update every minute
+var drawTimeout;
+
+// schedule a draw for the next minute
+function queueDraw() {
+  if (drawTimeout) clearTimeout(drawTimeout);
+  drawTimeout = setTimeout(function() {
+    drawTimeout = undefined;
+    draw();
+  }, 60000 - (Date.now() % 60000));
+}
+
+function draw() {
   g.clear();
   Bangle.drawWidgets();
 
   // get date
   var d = new Date();
-  var da = d.toString().split(" ");
 
   g.reset(); // default draw styles
   // drawSting centered
   g.setFontAlign(0, 0);
 
-  // draw time
-  var time = da[4].substr(0, 5).split(":");
-  var hours = time[0],
-    minutes = time[1];
-  var meridian = "";
+  // drawTime
+  var hours;
   if (is12Hour) {
-    hours = parseInt(hours,10);
-    meridian = "AM";
-    if (hours == 0) {
-      hours = 12;
-      meridian = "AM";
-    } else if (hours >= 12) {
-      meridian = "PM";
-      if (hours>12) hours -= 12;
-    }
-    hours = (" "+hours).substr(-2);
+    hours = ("0" + d.getHours()%12).slice(-2);
+  } else {
+    hours = ("0" + d.getHours()).slice(-2);
   }
+  var minutes = ("0" + d.getMinutes()).slice(-2);
 
   g.setFont(font, timeFontSize);
   g.drawString(`${hours}:${minutes}`, xyCenter, yposTime, true);
-  g.setFont(font, gmtFontSize);
-  g.drawString(meridian, xyCenter + 102, yposTime + 10, true);
+
+  if (is12Hour) {
+    g.setFont(font, gmtFontSize);
+    g.drawString(locale.meridian(d), xyCenter + 102, yposTime + 10, true);
+  }
 
   // draw Day, name of month, Date
-  var date = [da[0], da[1], da[2]].join(" ");
   g.setFont(font, dateFontSize);
-
-  g.drawString(date, xyCenter, yposDate, true);
+  g.drawString([locale.dow(d,1), locale.month(d,1), d.getDate()].join(" "), xyCenter, yposDate, true);
 
   // draw year
   g.setFont(font, dateFontSize);
   g.drawString(d.getFullYear(), xyCenter, yposYear, true);
 
   // draw gmt
-  var gmt = da[5];
   g.setFont(font, gmtFontSize);
-  g.drawString(gmt, xyCenter, yposGMT, true);
+  g.drawString(d.toString().match(/GMT[+-]\d+/), xyCenter, yposGMT, true);
+
+  queueDraw();
 }
 
-// handle switch display on by pressing BTN1
-Bangle.on('lcdPower', function(on) {
-  if (on) drawSimpleClock();
+// Stop updates when LCD is off, restart when on
+Bangle.on('lcdPower',on=>{
+  if (on) {
+    draw(); // draw immediately, queue redraw
+  } else { // stop draw timer
+    if (drawTimeout) clearTimeout(drawTimeout);
+    drawTimeout = undefined;
+  }
 });
 
+// Show launcher when button pressed
+Bangle.setUI("clock");
 // clean app screen
 g.clear();
 Bangle.loadWidgets();
 Bangle.drawWidgets();
 
-// refesh every 15 sec
-setInterval(drawSimpleClock, 15E3);
-
 // draw now
-drawSimpleClock();
-
-// Show launcher when button pressed
-Bangle.setUI("clock");
+draw();
diff --git a/apps/swatch/bangle1-stopwatch-screenshot.png b/apps/swatch/bangle1-stopwatch-screenshot.png
new file mode 100644
index 000000000..be3ed0c9a
Binary files /dev/null and b/apps/swatch/bangle1-stopwatch-screenshot.png differ
diff --git a/apps/sweepclock/bangle1-sweep-clock-screenshot.png b/apps/sweepclock/bangle1-sweep-clock-screenshot.png
new file mode 100644
index 000000000..4ad5a0b7a
Binary files /dev/null and b/apps/sweepclock/bangle1-sweep-clock-screenshot.png differ
diff --git a/apps/swiperclocklaunch/ChangeLog b/apps/swiperclocklaunch/ChangeLog
new file mode 100644
index 000000000..c1b4a5fbb
--- /dev/null
+++ b/apps/swiperclocklaunch/ChangeLog
@@ -0,0 +1,2 @@
+0.01: New App!
+0.02: Fix issue with mode being undefined
diff --git a/apps/swiperclocklaunch/boot.js b/apps/swiperclocklaunch/boot.js
new file mode 100644
index 000000000..e9b203eee
--- /dev/null
+++ b/apps/swiperclocklaunch/boot.js
@@ -0,0 +1,18 @@
+// clock -> launcher
+(function() {
+    var sui = Bangle.setUI;
+    Bangle.setUI = function(mode, cb) {
+        sui(mode,cb);
+        if(!mode) return;
+        if (!mode.startsWith("clock")) return;
+        Bangle.swipeHandler = dir => { if (dir<0) Bangle.showLauncher(); };
+        Bangle.on("swipe", Bangle.swipeHandler);
+    };
+})();
+// launcher -> clock
+setTimeout(function() {  
+    if (global.__FILE__ && __FILE__.endsWith(".app.js") && (require("Storage").readJSON(__FILE__.slice(0,-6)+"info",1)||{}).type=="launch") {
+        Bangle.swipeHandler = dir => { if (dir>0) load(); };
+        Bangle.on("swipe", Bangle.swipeHandler);
+    }
+}, 10);
diff --git a/apps/swiperclocklaunch/icon.js b/apps/swiperclocklaunch/icon.js
new file mode 100644
index 000000000..c9089ce5c
--- /dev/null
+++ b/apps/swiperclocklaunch/icon.js
@@ -0,0 +1 @@
+require("heatshrink").decompress(atob("lEoxH+AB8WAAwYQEaQrdEp4pWEyYoRC49kxGs2fX6+z1mIsgpUCQtAxAjCAA+zxFAFCAQFxAkJAAuIFBxMF1oeHgEABI+sFBomEORInJPgJ7EEyonLFAJQJBIh0IE5x6GE47CME5nXsgnGOojmME5p5HJyAnO6+IE5LEKE6JQEE4lkC5gnPUIh2SE6B4EAAesC5oAP1gnHTxpPDAQIAFeJQACH5wnP64nWAA3CBJB3WAA203fQBAp3IY4plENQ4HC2gABkjHNxAnX2nJBYeIEYf+AYVkE5oDGE4e0UgdkEwYnDUAITEACikBTwgnFxAnZFAJ2FE4lAJ7dAE4pQFY6yfCToYmDE4kW1jvX1geEE4YoF2YfFABRzD67EEEwqiGFCAmETg5QJPQYAMTQJ0GE5AoGshSPYQgmKFA72BFJWzxBzEExgoIKYOI1grC2esxBLGExwpKABolPFCwmSFKQlVFZoXP"))
\ No newline at end of file
diff --git a/apps/swiperclocklaunch/swiperclocklaunch.png b/apps/swiperclocklaunch/swiperclocklaunch.png
new file mode 100644
index 000000000..c7f16c2b1
Binary files /dev/null and b/apps/swiperclocklaunch/swiperclocklaunch.png differ
diff --git a/apps/swlclk/bangle1-SWL-clock-screenshot.png b/apps/swlclk/bangle1-SWL-clock-screenshot.png
new file mode 100644
index 000000000..6b4f8fceb
Binary files /dev/null and b/apps/swlclk/bangle1-SWL-clock-screenshot.png differ
diff --git a/apps/thermom/ChangeLog b/apps/thermom/ChangeLog
index 78fed5826..6ab6ba8e5 100644
--- a/apps/thermom/ChangeLog
+++ b/apps/thermom/ChangeLog
@@ -1 +1,2 @@
 0.02: New App!
+0.03: Improved messages and added Celsius sign
diff --git a/apps/thermom/app.js b/apps/thermom/app.js
index baa38e8ec..7eae9b3d4 100644
--- a/apps/thermom/app.js
+++ b/apps/thermom/app.js
@@ -3,9 +3,9 @@ function onTemperature(p) {
   g.setFont("6x8",2).setFontAlign(0,0);
   var x = g.getWidth()/2;
   var y = g.getHeight()/2 + 10;
-  g.drawString("Temperature", x, y - 45);
+  g.drawString("Temperature:", x, y - 45);
   g.setFontVector(70).setFontAlign(0,0);
-  g.drawString(p.temperature.toFixed(1), x, y);
+  g.drawString(p.temperature.toFixed(1) + " °C", x, y);
 }
 
 function drawTemperature() {
@@ -23,6 +23,6 @@ setInterval(function() {
   drawTemperature();
 }, 20000);
 drawTemperature();
-E.showMessage("Loading...");
+E.showMessage("Reading temperature...");
 Bangle.loadWidgets();
-Bangle.drawWidgets();
\ No newline at end of file
+Bangle.drawWidgets();
diff --git a/apps/timecal/icon.png b/apps/timecal/icon.png
new file mode 100644
index 000000000..ca57bf416
Binary files /dev/null and b/apps/timecal/icon.png differ
diff --git a/apps/timecal/timecal.app.js b/apps/timecal/timecal.app.js
new file mode 100644
index 000000000..b28326c46
--- /dev/null
+++ b/apps/timecal/timecal.app.js
@@ -0,0 +1,94 @@
+var center = g.getWidth() / 2;
+var lastDayDraw;
+var lastTimeDraw;
+
+var fontColor = g.theme.fg;
+var accentColor = "#FF0000";
+var locale = require("locale");
+
+function loop() {
+  var d = new Date();
+  var cleared = false;
+   if(lastDayDraw != d.getDate()){
+     lastDayDraw = d.getDate();
+     drawDate(d);
+     drawCal(d);
+   }
+  
+  if(lastTimeDraw != d.getMinutes() || cleared){
+     lastTimeDraw = d.getMinutes();
+     drawTime(d);
+   }
+}
+function drawTime(d){
+  var hour = ("0" + d.getHours()).slice(-2);
+  var min = ("0" + d.getMinutes()).slice(-2);
+  g.setFontAlign(0,-1,0);
+  g.setFont("Vector",40);
+  g.setColor(fontColor);
+  g.clearRect(0,50,g.getWidth(),90);
+  g.drawString(hour + ":" + min,center,50);
+}
+function drawDate(d){
+ var day = ("0" + d.getDate()).slice(-2);
+  var month = ("0" + d.getMonth()).slice(-2);
+  var dateStr = locale.date(d,1);
+  g.clearRect(0,24,g.getWidth(),44);
+  g.setFont("Vector",20);
+  g.setColor(fontColor);
+  g.setFontAlign(0,-1,0);
+  g.drawString(dateStr,center,24);
+}
+
+function drawCal(d){
+  var calStart = 101;
+  var cellSize = g.getWidth() / 7;
+  var halfSize = cellSize / 2;
+  g.clearRect(0,calStart,g.getWidth(),g.getHeight());
+  g.drawLine(0,calStart,g.getWidth(),calStart);
+  var days = ["Mo","Tu","We","Th","Fr","Sa","Su"];
+  g.setFont("Vector",10);
+  g.setColor(fontColor);
+  g.setFontAlign(-1,-1,0);
+  for(var i = 0; i < days.length;i++){
+    g.drawString(days[i],i*cellSize+5,calStart -11);
+    if(i!=0){
+      g.drawLine(i*cellSize,calStart,i*cellSize,g.getHeight());
+    }
+  }
+  var cellHeight = (g.getHeight() -calStart  ) / 3;
+  for(var i = 0;i < 3;i++){
+    var starty = calStart + i * cellHeight;
+    g.drawLine(0,starty,g.getWidth(),starty);
+  }
+  
+  g.setFont("Vector",15);
+  
+  var dayOfWeek = d.getDay();
+  var dayRem = d.getDay() - 1;
+  if(dayRem <0){
+    dayRem = 0;
+  }
+  
+  var start = new Date();
+  start.setDate(start.getDate()-(7+dayRem));
+  g.setFontAlign(0,-1,0);
+  for (var y = 0;y < 3; y++){ 
+    for(var x = 0;x < 7; x++){
+      if(start.getDate() === d.getDate()){
+        g.setColor(accentColor);
+      }else{
+        g.setColor(fontColor);
+      }
+      g.drawString(start.getDate(),x*cellSize +(cellSize / 2) + 2,calStart+(cellHeight*y) + 5);
+      start.setDate(start.getDate()+1);
+    }
+  }
+}
+
+g.clear();
+Bangle.setUI("clock");
+Bangle.loadWidgets();
+Bangle.drawWidgets();
+loop();
+setInterval(loop,1000);
\ No newline at end of file
diff --git a/apps/toucher/ChangeLog b/apps/toucher/ChangeLog
index 494110d55..7b5c53de7 100644
--- a/apps/toucher/ChangeLog
+++ b/apps/toucher/ChangeLog
@@ -3,4 +3,5 @@
 0.03: Close launcher when lcd turn off
 0.04: Complete rewrite to add animation and loop ( issue  #210 )
 0.05: Improve perf
-0.06: Complete rewrite in 80x80, better perf, add settings
\ No newline at end of file
+0.06: Complete rewrite in 80x80, better perf, add settings
+0.07: Added suppport for Bangle 2, added README file
diff --git a/apps/toucher/README.md b/apps/toucher/README.md
new file mode 100644
index 000000000..27cb32eeb
--- /dev/null
+++ b/apps/toucher/README.md
@@ -0,0 +1,22 @@
+# Toucher - A touch based launcher, swipe left, swipe right, tap to launch
+
+* Designed specifically for Bangle 1 and Bangle 2
+
+## Installation
+- Use the App loader to install toucher
+- Then delete the existing launcher
+- When you restart the new launcher will be loaded
+- To return to the default launcher, delete toucher and install the default launcher.
+
+## Bangle 1
+In the settings menu 'Low Res' refers to setting the Bangle 1 screen into 80x80 mode.
+This significantly improves the animation performance.
+
+## Bangle 2
+The Hires/Lowres settings is ignored.
+Touch the top third of the screen to launch the selected app.
+Press button 1 to launch the selected app.
+
+## Screenshots
+
+![](screenshot1.jpg)
diff --git a/apps/toucher/app.js b/apps/toucher/app.js
index 455a29c5d..8ac198f52 100644
--- a/apps/toucher/app.js
+++ b/apps/toucher/app.js
@@ -7,8 +7,11 @@ let settings = Storage.readJSON(filename,1) || {
   debug: false
 };
 
-if(!settings.highres) Bangle.setLCDMode("80x80");
-else Bangle.setLCDMode();
+// this means that setFont('6x8',1) is actually setFont('6x8',3)
+if (process.env.HWVERSION == 1) {
+  if(!settings.highres) Bangle.setLCDMode("80x80");
+  else Bangle.setLCDMode();
+}
 
 g.clear();
 g.flip();
@@ -23,7 +26,7 @@ const ORIGINAL_ICON_SIZE = 48;
 const STATE = {
   settings_open: false,
   index: 0,
-  target: 240,
+  target: g.getWidth(),
   offset: 0
 };
 
@@ -63,7 +66,7 @@ const APPS = getApps();
 
 function noIcon(x, y, scale){
   if(scale < 0.2) return;
-  g.setColor(scale, scale, scale);
+  g.setColor(g.theme.fg);
   g.setFontAlign(0,0);
   g.setFont('6x8',settings.highres ? 6:3);
   g.drawString('x_x', x+1.5, y);
@@ -81,23 +84,24 @@ function render(){
   g.clear();
   const visibleApps = APPS.filter(app => app.x >= STATE.offset-HALF && app.x <= STATE.offset+WIDTH-HALF );
 
+  let cycle = 0;
+  let lastCycle = visibleApps.length;
+  
   visibleApps.forEach(app => {
-
-    const x = app.x+HALF-STATE.offset;
-    const y = HALF - (HALF*0.3);
+    cycle++;
+    const x = app.x + HALF - STATE.offset;
+    const y = HALF;
 
     let dist = HALF - x;
     if(dist < 0) dist *= -1;
-
     const scale = 1 - (dist / HALF);
 
     if(!scale) return;
 
     if(app.special){
-      const font = settings.highres ? '6x8' : '4x6';
-      const fontSize = settings.highres ? 2 : 1;
-      g.setFont(font, fontSize);
-      g.setColor(scale,scale,scale);
+      const fontSize = (process.env.HWVERSION == 2) ? 4 : (settings.highres ? 6 : 2);
+      g.setFont('6x8', fontSize);
+      g.setColor(g.theme.fg);
       g.setFontAlign(0,0);
       g.drawString(app.name, HALF, HALF);
       return;
@@ -111,26 +115,69 @@ function render(){
     if(icon){
       icons[app.name] = icon;
       try {
-        const rescale = settings.highres ? scale*ORIGINAL_ICON_SIZE : (scale*(ORIGINAL_ICON_SIZE/2));
-        const imageScale = settings.highres ? scale*2 : scale;
+        let rescale;
+        let imageScale;
+
+        if (process.env.HWVERSION == 1) {
+          // on a bangle 1 !highres means 80x80
+          rescale = settings.highres ? scale*ORIGINAL_ICON_SIZE : (scale*(ORIGINAL_ICON_SIZE/2));
+          imageScale = settings.highres ? scale*2 : scale;
+        } else {
+          // !highres mode is meaningless on a bangle 2 at present
+          rescale = 1.25*scale*ORIGINAL_ICON_SIZE;
+          imageScale = 2.5*scale;
+        }
+
         g.drawImage(icon, x-rescale, y-rescale, { scale: imageScale });
-      } catch(e){
+      } catch(e) {
         noIcon(x, y, scale);
       }
-    }else{
+    } else {
       noIcon(x, y, scale);
     }
 
     //draw text
-    g.setColor(scale,scale,scale);
-    if(scale > 0.1){
-      const font = settings.highres ? '6x8': '4x6';
-      const fontSize = settings.highres ? 2 : 1;
-      g.setFont(font, fontSize);
-      g.setFontAlign(0,0);
-      g.drawString(app.name, HALF, HEIGHT/4*3);
-    }
+    g.setColor(g.theme.fg);
 
+    if (cycle == 2 && scale > 0.1) {
+      let fontSize = (process.env.HWVERSION == 2) ? 2 : 1;
+      if (process.env.HWVERSION == 1) {
+        fontSize = (settings.highres) ? 3 : 1;
+      }
+      
+      if (app.name.length <= 12) {
+        g.setFont("6x8", fontSize);
+        g.setFontAlign(0,1);
+        g.drawString(app.name, HALF, HEIGHT);
+      } else {
+        // some app names are too long for one line
+        var name = app.name;
+        var first = name.substring(0, name.indexOf(" "));
+        var last = name.substring(name.indexOf(" ") + 1, name.length);
+
+        // all this to handle long names like
+        // Simple 7 Segment Clock
+        if (last.length > 12 && process.env.HWVERSION == 1) {
+          g.setFont((settings.highres ? "6x8" : "4x6"),(settings.highres ? 2 : 1) ); 
+        } else {
+          g.setFont("6x8", fontSize);
+        }
+        
+        g.setFontAlign(0,-1);
+        g.drawString(first, HALF, 0);
+
+        if (last.length > 12 && process.env.HWVERSION == 1) {
+          g.setFont((settings.highres ? "6x8" : "4x6"),(settings.highres ? 2 : 1) );
+        } else {
+          g.setFont("6x8", fontSize);
+        }
+
+        g.setFontAlign(0,1);
+        g.drawString(last, HALF, HEIGHT);
+      }
+    }
+    
+    /*
     if(settings.highres){
       const type = app.type ? app.type : 'App';
       const version = app.version ? app.version : '0.00';
@@ -138,18 +185,21 @@ function render(){
       g.setFontAlign(0,1);
       g.setFont('6x8', 1.5);
       g.setColor(scale,scale,scale);
-      g.drawString(info, HALF, 215, { scale: scale });
+      g.drawString(info, HALF, HEIGHT/8*7, { scale: scale });
     }
+    */
 
   });
 
   const duration = Math.floor(Date.now()-start);
   if(settings.debug){
     g.setFontAlign(0,1);
-    g.setColor(0, 1, 0);
-    const fontSize = settings.highres ? 2 : 1;
-    g.setFont('4x6',fontSize);
-    g.drawString('Render: '+duration+'ms', HALF, HEIGHT);
+    g.setColor(g.theme.fgH);   
+    const fontSize = (process.env.HWVERSION == 2) ? 2 : (settings.highres ? 2 : 1);
+    g.setFont(((process.env.HWVERSION == 2) ? '6x8' : (settings.highres ? '6x8' :'4x6')), fontSize);
+    // steal the bottom line, and print the duration
+    g.clearRect(0, HEIGHT - (process.env.HWVERSION == 1 && !settings.highres ? 8 : 24), WIDTH, HEIGHT);
+    g.drawString('Render: '+duration+' ms', HALF, HEIGHT);
   }
   g.flip();
   if(STATE.offset == STATE.target) return;
@@ -202,7 +252,7 @@ function run(){
     E.showMessage("App Source\nNot found");
     setTimeout(render, 2000);
   } else {
-    Bangle.setLCDMode();
+    if (process.env.HWVERSION == 1) Bangle.setLCDMode();
     g.clear();
     g.flip();
     E.showMessage("Loading...");
@@ -211,10 +261,11 @@ function run(){
 
 }
 
-// Screen event
-Bangle.on('touch', function(button){
-  if(STATE.settings_open) return;
-  switch(button){
+if (process.env.HWVERSION == 1) {
+  // Screen event
+  Bangle.on('touch', function(button){
+    if(STATE.settings_open) return;
+    switch(button){
     case 1:
       prev();
       break;
@@ -224,8 +275,17 @@ Bangle.on('touch', function(button){
     case 3:
       run();
       break;
-  }
-});
+    }
+  });
+}
+
+if (process.env.HWVERSION == 2) {
+  // tap at top 1/3 of screen to launch app
+  Bangle.on('touch', function(button, xy) {
+    if (xy.y < HEIGHT / 3)
+      run();
+  });
+}
 
 Bangle.on('swipe', dir => {
   if(STATE.settings_open) return;
@@ -238,9 +298,12 @@ Bangle.on('lcdPower', on => {
   if(!on) return load();
 });
 
+if (process.env.HWVERSION == 1) {
+  setWatch(prev, BTN1, { repeat: true });
+  setWatch(next, BTN3, { repeat: true });
+  setWatch(run, BTN2, { repeat:true });
+} else {
+  setWatch(run, BTN1, { repeat:true });
+}
 
-setWatch(prev, BTN1, { repeat: true });
-setWatch(next, BTN3, { repeat: true });
-setWatch(run, BTN2, { repeat:true });
-
-jumpTo(1);
\ No newline at end of file
+jumpTo(1);
diff --git a/apps/toucher/screenshot1.jpg b/apps/toucher/screenshot1.jpg
new file mode 100644
index 000000000..698121cbe
Binary files /dev/null and b/apps/toucher/screenshot1.jpg differ
diff --git a/apps/toucher/settings.js b/apps/toucher/settings.js
index 6f7320513..51275d846 100644
--- a/apps/toucher/settings.js
+++ b/apps/toucher/settings.js
@@ -9,7 +9,7 @@
       highres: true,
       animation : true,
       frame : 3,
-      debug: true
+      debug: false
     };
   }
   
@@ -56,4 +56,4 @@
     },
     '< Back': back
   });
-});
\ No newline at end of file
+});
diff --git a/apps/trex/README.md b/apps/trex/README.md
new file mode 100644
index 000000000..03e3f5883
--- /dev/null
+++ b/apps/trex/README.md
@@ -0,0 +1,4 @@
+# T-Rex
+
+![](screenshot_trex.png)
+
diff --git a/apps/trex/screenshot_trex.png b/apps/trex/screenshot_trex.png
new file mode 100644
index 000000000..a66cc013f
Binary files /dev/null and b/apps/trex/screenshot_trex.png differ
diff --git a/apps/vectorclock/bangle1-vector-clock-screenshot.png b/apps/vectorclock/bangle1-vector-clock-screenshot.png
new file mode 100644
index 000000000..9a98a8782
Binary files /dev/null and b/apps/vectorclock/bangle1-vector-clock-screenshot.png differ
diff --git a/apps/vernierrespirate/ChangeLog b/apps/vernierrespirate/ChangeLog
new file mode 100644
index 000000000..5560f00bc
--- /dev/null
+++ b/apps/vernierrespirate/ChangeLog
@@ -0,0 +1 @@
+0.01: New App!
diff --git a/apps/vernierrespirate/README.md b/apps/vernierrespirate/README.md
new file mode 100644
index 000000000..54dfc274b
--- /dev/null
+++ b/apps/vernierrespirate/README.md
@@ -0,0 +1,26 @@
+# Vernier Go Direct Respiration Belt
+
+Connects to a [Go Direct Respiration Belt](https://www.vernier.com/product/go-direct-respiration-belt/) via Bluetooth and shows respiration rate
+
+![](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALAAAACwCAYAAACvt+ReAAAAAXNSR0IArs4c6QAADldJREFUeF7tnet2GysMhZP3f+h02TEuJoD2FuKu/jhntSOELh8awYzt75+fn58v/+MR2DQC3w7wpplzs58RcIAvBuH7ScDXV+ke/P39lFjmT65ZcICXSc94Q558PhrIAsQO8Pic+IxEBCJ+sxAHgGdvk2p2eAUmEn6a6KMCh/Yh1044wKdl/DB/QgUObqUQpwB/P3oNoz8/z94F++MVGIvT0VL5Cvu5gQs9cUDLAT4aif2c+1NhX3u452HEqxzHddEB3i/Hx1scQxx64By8v1D/tgxhE+ctxPF47OFggDgcoT3+n+tIVwM4je5jYfkpxB7MmVsZQ1zaTjnA5mF3hVYRkB5irNhCeAW2yv7memJ4kSdxq/TADvDm4FmYH2/Y2CdxszdxDrAFARvr+HvOyz2Jmw2wv8yzMXytpmfPeaNz4GfP+/rP+/GyH6O1ht3H94xA/C5E7mHGaqcQXoF70rCh7vhdCORJ3CwX/V2IWZFffF72SdwsdxzgWZFffF7pYYa/0L54Am83r/QORIiLA3w7Ie5/9wj4uxDdQ+wT9IzA8gCv8rGWnklw3foIOMD62PnIBSJwLcBe2Regz8CELQB+vrj8/f3+ZICB32991notbHMdeASuBDiG1gHGYVlR0gE2ruwrJvlkm5YGuEelzFXcE6pw+tBh9rfpjFo0DvDr07c7JTz3hCy2/4QFiS6AbQB+OGSRmBMqsBQH6ToKxw5yDrDRwhiVbARORGaUvb3ncYAHAGwJFKoLlUMAs9SFzMfIOMCvaPVKUtBrpR/Vg8pJsKz+wMcUYEtnSwloTUwvvSUQrE9SUP9ROQTgHg+SpHnR62YAj6o0LYmpjW3Ri8AbZFrmYcYysoj9FvpQKBk5c4AtTgt6gdZLLwJALKOFgRnHyObsT8e36mOgZGRNALZ2thdoUhKk62hgpVZKOw8zjpF1gDOPY7UBlMZJ12uQSWOl6wzA0oMRzVzMGEY29as0tkUnGjtWrrkCWzuLBAmRQarKh8z37/fOSOBJAWZs6yXb0sb1uvtJcdNebwJYSoB0HV35WjloXPgttPDKZhik/AHTrM/pN4hEhj3lH38X5mNjqYXYAU6TQ4CAJgmVEwHOgAXrjr9UIfLxPT7+kUAGzgLsH3ZVFsTT59d1dHGEOEm+S9fRKmql5+nq710T/8UY1Fm2AjBOMbJxUBEIVLojWN/fdkPE9M+cCaCI3dWWSQKeeBqpik9inIWON4c9AWYghpyyAkW6pRPwFRcIWo5K8OR8BVqN6oKtjIfiT4Bech+dBw2fqgIzRqCyolypKkU9bNXpsEkDIBBtKUykHSctdK1etB9n9DOy1bsCSqggRwPMOoDIizItvaqiJxft2Rng0CMHH5DPG0bxf/fVQCEQ9yAGEHcHWKou4nVkUwMEgoWytzyaXNYOuqVRHB++bSI2qmKegRxmKzrTA2uDWRun1ckGhJ2nt/wqALN+FuMutHKaeRCmqQpMGVHahES3LhFCYffM2MPIBhOZMYws0xv20qvxERpTAPnDD+BUBIH3yc/HEXpl9w0HEnHgZR2s06Dn1M6FjENkkITk9LTqlsZL15nFVvJRMwcSr/8A//9RhP/jcofzklbyeMrCMVQHKofe2uleU4pd5ohKazNjm3YOZhwjC4TpQ6TcQjSeuUor18opSc/j+v+uhX9gI7U50vxMQlJdFrprOlr0o2NROSZOHwtU2sRZGxD0WeqNdcXAPhzVPGVkqnAvP6SFgya8F8CofZbxyRbFGQBbgRVvKlqrrAREKRGWCepRgWugtdoujZeuSzFHrj/fRhuRHKYvQwyfIdMLsHghvn/W1fgrr3I5tgCsZ4VHcjwFYMSwFWV6AxxXSwu4akXDUn+vxYEw8H4feKYRiKGryKT9tkWPnQPNErARrdaIxZ3tgeN3KXtsgFYBz9KOHhvRFDLrhWHpf0lXzM8o+5s+kTEiKCvOERI1KkkrxmAVmxxgZSZ63OKVplw9zAG+Ov37O+8A75/Dqz1wgK9O//7OO8D75/BqDxzgq9O/v/MO8P45vNoDB/jq9O/vvAO8fw6v9sABvjr9+zvvAO+fw6s9cICvTv/+zjvA++fwag8c4KvTv7/zDvD+ObzaAwf46vTv7/xSAFu9KM7qaXm3t2Xs/vjkPRgZk64Aaz5iYuU8o4eRTVPWMtYBbo9AN4BrH/KrgV36cGlwtfSxc+RDhbl5a58DLNnJfHYwvhvkbEz9evwdmVeKQ/y5vYfO+ONPtTjkflaWiRsTm3Z8v76GAVwyVgKvVOG044Id8fjSokmTXkpu7bNxMUjxeMn+1E42DmkbldpR0l+yV7JHiqcFrDkdUwCWql4OHOnWjQBRmleq+nGVROaJba0BnPoUV9X4Wu7f0Qqci1tuXtbOWhxKi60HxMMAlipArjKG22muwkkgMdeRCszah1Y4dmGilRCt2D3sPAJgtJcr9Welni2Wlyp5rfdj+sJc/52rkNlb3OsronILuHZHSPUjvtbuFOldIae/1OLk5kYKRBq3rSpwD2Ndp0fgzx1L9SuHHkePwCIR6NYDL+Kfm3F4BBzgwxN8unvLA5xuINLNF5qgnB50bE6u1/ei3eZvSw6eBwWr9sAIcAxEiD4mmMzcqN6SjZq5dvAXjUtNbjmANYFHEqzRWwscMieaIMk2zVySTtS2EUdhrC0fR4IrVeDWoEuPdFsClY7VQJWbH/FZMxeil4mHxgZGv1Z2qQrcGvSdAGZ81cDD6Efg0diA6G2VWQZgpv+rJacUaKvNUWvAnxuP+EeyAYUaeFbyF3BRLbI0wJqKujPA4VGuRbviAKvXBD9QG+zWqq2pbLx3f0cw7zU8Rmvs1MbUwr+ROpapwFqn0UShclo7mHGxLSmcVnZa6WH8miHrAE+I+gOu3q2OAzwhsZop0UTV5FAdGvvYMVa27OIvG59UfusKzCSb3fmHQGn6z5akMD7V5tnF35ZYPU90VnqQwTjDbOA0R1cWJwGMP0F2NsCzFq4mVtsCzMJrAfCoxK4C8Ch/teC+F/xOFVi6LWrOjdkA9m4pHGAuI9u0EC3wShW49KHRUih7QjwC4JX85XD9K70FwK3w1gDWVO2dAV7N36MBlsB9OI/CpK1smn67JSlaO/8cL2Xet0BiNdrfllgtvYmT4EWS0Roc65MBxB4rgJG5SjIr2IDav2QLsRK8pfaj1wJaAZ4VbNgSYAlcpmVAA4DIjUzoyLm8AiPZJ2RqAPeqeIh5I6EaOZcDjGQflFkVXm8hfhM4s4DUEFqmB+69+9VWtt52WZ0eWOkZ7S9Y34piSwA8qvqyEM9IJmtjtTqRR2kz/D0eYI2DzLu2vfWzT71622OpX6PLeszyFVjjsOZpEzoPq3smwKX+HfV15d43+OAAM9kUNjPo7R85LmTMYheVlW5GTy/Z6wDWViVkF74iwD397QUlo/dKgN+3H+D7GRBwa/pmtxAxDEjlZ/xlQOsluwTAvZxzvedHwAE+P8dHe+gAH53e851zgM/P8dEeOsBHp/d85xzg83N8tIcO8NHpPd85B/j8HB/toQN8dHrPd257gB9Pl3o9Peqp+wS0VojPFIDjR5oSfIysNRQrJMjaJ0t9K8RnOMA1p3OwxvLp2CAfL4IgU7oWEpiOSf89fW8AXWgPuZKdjzmkeR8yUhyCTDwX6m8sh9hZigMbH8uF8/F+x+jvRisBnAtmCYYcsMGpNJEx0CXQay/AS+DG86ZAIfaXxqcJr8UnXhiov6mcJv5XV+C0ymgCGFeiFIQcAOm/5QD7WN1Ef10CIq1UKWzxfGGxaCow62/OXiQ+tTtirypb0zu9hUArRg5WFuDSq40jK3BpoUl3JnSBIwsZuVMgdl5ZgUs9Xq33y/WtaK+YVlSp4qF9aukWn1uQTB9Z6y1z12oQ1eRRO0sLJ23Z0riNqsbDK/Aox3yeOyLgAN+R52O9dICPTe0djjnAd+T5WC+XB7h2DGWVlRFz1DaTrX6gZ9W5jVdpg9xq06jxSwOcA8tyt1vSnzupsEwIMi8zHwowMi+qi7Gvp+ySAEuBbg2ypD8X8NY5Z1bg2f5eBTAS7BaYEP21gLfMXbuFtyTZv5mnJXpGYxmwWiBi5ulViVttSO1ygI0g1KphE6oFmOmpazZp59fGR2o/ao/C0UW4qr9SzJbogWtgWZ4QsLoY4KVAW11nfGBkH/at6K8UtyUBLr0z23LkwyZT6ldnVGHGB0ZWqvCWJz8SkOz15QBOwdAmIg2ElR42wJbyjA+MrKWNo3UtAzDTx2mq3+4JZe1n5UeDZzXfEgDXnLFKRE2P1RxWScnpYW3c3V80llcDjARJU+0RvayMBcDInKv4i9j63HiO/kwcalhtE6UJMntUl9qpmZP1tSTPwls7UUBtmukvaqMDzETqJTsjsTMADqGZ4S+TFq/ATLQm/GKlBl6LCuwAk2BY3j7RTVAtSas8meoBcOnDraUcrFyFr6/AmvcIRibUGuDV/WXr3tUAIyDOfLyqhbfUQqzuLwvv9Zs4JKEtMGgSEo+ZAfBMfzXx8goMRK0FJEB9VqR1zpbxLWO1/mrHOcBA5GYktHXOlvEtY4Fwmoo4wEA4ZyS0dc6W8S1jgXCaijjAQDhHJ9RivhYdLWOBcJqKOMBCOGecQlgApNUxw98Woq8BWLO7npFMLXjowxs/B25ZLoWxrS/apGqZd4s17jD60aO6YEdvgC391eiyHrNEBR4FcKkKM0FlK9hMgHv7y8Stl6wDTEa2J8CW1bdW0RmX2QXI6LaQvQ5gbVVCEtkKYOv4EhCaOxzirwWArTquBJipTkwiWwBsGYtCgIDM+IvO21NuCYB7Oui6z46AA3x2fo/3zgE+PsVnO+gAn53f471zgI9P8dkOOsBn5/d47xzg41N8toMO8Nn5Pd67f9vZ68My1rETAAAAAElFTkSuQmCC)
+
+## Usage
+
+In the main menu:
+
+* `Connect` - connect and start displaying respiration
+* `Vib` - Should we vibrate if the breaths per minute (BPM) is above a certain value?
+  * `No`   - don't vibrate
+  * `Calculated`   - vibrate if the app's reading is high. This is based on raw
+  sensor data and it responds quickly but may not be accurate.
+  * `Vernier`   - vibrate if the Vernier sensor's own reading is high. This is
+  more accurate but responds very slowly.
+* `Connect` - connect and start displaying respiration
+
+## TODO
+
+* Logging to a file?
+
+## Creator
+
+Gordon Williams
diff --git a/apps/vernierrespirate/app-icon.js b/apps/vernierrespirate/app-icon.js
new file mode 100644
index 000000000..f687d2a9d
--- /dev/null
+++ b/apps/vernierrespirate/app-icon.js
@@ -0,0 +1 @@
+require("heatshrink").decompress(atob("mEw4UA///9nou30h/qJf8Ah/wBasK0ALhHcMBqALBgtABYsVqgLBAYILFqtUF4MVqoKEgoLFqALGEYQLFAwILEGAlV6tUlWoitXGAgLC1WqBYsBq+VqwLBAYPVMIUFBYN61Uq1oLBHgQLC1WohWqrwLDiteEIOggQDB2pICivqA4IFBlWq1YLCq/V9WkAoMa1YHBKQVf9XUAoMX1f1KgVVEYIpDEYILBLwIuBC4YFBMAMBLAILFLQILBrdV12UBYMW3VV8tAgt9q+2BYee6t9qEFuoLHroLBqte6wvDy+1ZoILBvdWSoeV9oLD+tfBYYFBBYTEBrq5CgN1aQNQgNVAALdEAAISBAYL1EfgISCAgIKDDAQSEAH4AQ"))
diff --git a/apps/vernierrespirate/app.js b/apps/vernierrespirate/app.js
new file mode 100644
index 000000000..945b72b77
--- /dev/null
+++ b/apps/vernierrespirate/app.js
@@ -0,0 +1,256 @@
+
+// get settings
+var settings = require("Storage").readJSON("vernierrespirate.json",1)||{};
+settings.vibrateBPM = settings.vibrateBPM||27;
+// settings.vibrate; // undefined / "calculated" / "vernier"
+
+function saveSettings() {
+  require("Storage").writeJSON("vernierrespirate.json", settings);
+}
+
+
+g.clear();
+var graphHeight = g.getHeight()-100;
+var last = {
+  time : Date.now(),
+  x : 0,
+  y : 24,
+};
+var avrValue;
+var aboveAvr = false;
+var lastBreath;
+var lastBreaths = [];
+var vibrateInterval;
+
+function onMsg(txt) {
+  print(txt);
+  E.showMessage(txt);
+}
+
+function setVibrate(isOn) {
+  var wasOn = vibrateInterval!==undefined;
+  if (isOn == wasOn) return;
+
+  if (isOn) {
+    vibrateInterval = setInterval(function() {
+      Bangle.buzz();
+    }, 1000);
+  } else {
+    clearInterval(vibrateInterval);
+    vibrateInterval = undefined;
+  }
+}
+
+function onBreath() {
+  var t = Date.now();
+  if (lastBreath!==undefined) {
+    // time between breaths
+    var value = 60000 / (t-lastBreath);
+    // average of last 3
+    while (lastBreaths.length>=3) lastBreaths.shift(); // keep length small
+    lastBreaths.push(value);
+    value = E.sum(lastBreaths) / lastBreaths.length;
+    // draw value
+    g.reset();
+    g.clearRect(0,g.getHeight()-100,g.getWidth(),g.getHeight()-50);
+    g.setFont("6x8").setFontAlign(0,0);
+    g.drawString("Calculated measurement", g.getWidth()/2, g.getHeight()-95);
+    g.setFont("Vector",40).setFontAlign(0,0);
+    g.drawString(value.toFixed(2), g.getWidth()/2, g.getHeight()-70);
+    // set vibration IF we're doing it from our calculations
+    if (settings.vibrate == "calculated")
+      setVibrate(value > settings.vibrateBPM);
+  }
+  lastBreath = t;
+}
+
+function onData(n, value) {
+  g.reset();
+  if (n==2) {
+    function scale(v) {
+      return Math.max(graphHeight - (1+v*4),24);
+    }
+    if (avrValue==undefined) avrValue=value;
+    avrValue = avrValue*0.95 + value*0.05;
+    if (avrValue < 1) avrValue = 1;
+    if (value > avrValue) {
+      if (!aboveAvr) onBreath();
+      aboveAvr = true;
+    } else aboveAvr = false;
+
+    var t = Date.now();
+    var x = Math.round((t - last.time) / 100) // 10 per second
+    if (last.x>=g.getWidth()) {
+      x = 0;
+      last.x = 0;
+      last.time = t;
+      g.clearRect(0,24,g.getWidth(),graphHeight);
+    }
+    var y = scale(value);
+    g.setPixel(x, scale(avrValue), "#f00");
+    g.drawLine(last.x, last.y, x, y);
+    last.x = x;
+    last.y = y;
+  }
+  if (n==4) {
+    g.clearRect(0,g.getHeight()-50,g.getWidth(),g.getHeight());
+    g.setFont("6x8").setFontAlign(0,0);
+    g.drawString("GoDirect measurement", g.getWidth()/2, g.getHeight()-45);
+    g.setFont("Vector",40).setFontAlign(0,0);
+    g.drawString(value.toFixed(2), g.getWidth()/2, g.getHeight()-20);
+    // set vibration IF we're doing it from our calculations
+    if (settings.vibrate == "vernier")
+      setVibrate(value > settings.vibrateBPM);
+  }
+  Bangle.setLCDPower(1); // ensure LCD is on
+}
+
+function connect() {
+  var gatt, service, rx, tx;
+  var rollingCounter = 0xFF;
+
+  // any button to exit
+  Bangle.setUI("updown", function() {
+    setVibrate(false);
+    Bangle.buzz();
+    try {
+      if (gatt) gatt.disconnect();
+    } catch (e) {
+    }
+    setTimeout(mainMenu, 1000);
+  });
+
+  function sendCommand(subCommand) {
+    const command = new Uint8Array(4 + subCommand.length);
+    command.set(new Uint8Array(subCommand), 4);
+    // Populate the packet header bytes
+    command[0] = 0x58; // header
+    command[1] = command.length;
+    command[2] = --rollingCounter;
+    command[3] = E.sum(command) & 0xFF; // checksum
+    return tx.writeValue(command);
+  }
+  function firstSetBit(v) {
+      return v & -v;
+  }
+  function handleResponse(dv) {
+    //print(dv.buffer);
+    var resType = dv.getUint8(0);
+    if (resType==0x20) {
+      // [32, 25, 207, 216, 6, 6, 0, 2, 252, 128, 138, 7, 191, 0, 0, 192, 127, 128, 49, 8, 191, 0, 0, 192, 127])
+      // 6 = data type = real
+      // 6,0 = bit mask for sensors
+      // 2 = value count
+      if (dv.getUint8(4)!=6) return; //throw "Not float32 data";
+      var sensorIds = dv.getUint16(5, true);
+      // var count = dv.getUint8(7); doesn't seem right
+      var offs = 9;
+      while (sensorIds) {
+        var value = dv.getFloat32(offs, true);
+        var s = firstSetBit(sensorIds);
+        if (isFinite(value)) onData(s,value);
+        //else print(s,value);
+        sensorIds &= ~s;
+        offs += 4;
+      }
+    } else {
+      var cmd = dv.getUint8(4); // cmd
+      //print("CMD",dv.buffer);
+    }
+  }
+
+  onMsg("Searching...");
+  NRF.requestDevice({ filters: [{ namePrefix: 'GDX-RB' }] }).then(function(device) {
+    device.on("gattserverdisconnected", function() {
+      onMsg("Device disconnected");
+    });
+    onMsg("Found. Connecting...");
+    return device.gatt.connect({minInterval:20, maxInterval:20});
+  }).then(function(g) {
+    gatt = g;
+    return gatt.getPrimaryService("d91714ef-28b9-4f91-ba16-f0d9a604f112");
+  }).then(function(s) {
+    service = s;
+    return service.getCharacteristic("f4bf14a6-c7d5-4b6d-8aa8-df1a7c83adcb");
+  }).then(function(c) {
+    tx = c;
+    return service.getCharacteristic("b41e6675-a329-40e0-aa01-44d2f444babe");
+  }).then(function(c) {
+    rx = c;
+    rx.on('characteristicvaluechanged', function(event) {
+      //print("EVT",event.target.value.buffer);
+      handleResponse(event.target.value);
+    });
+    return rx.startNotifications();
+  }).then(function() {
+    onMsg("Init");
+    sendCommand([ // init
+      0x1a,    0xa5,    0x4a,    0x06,
+      0x49,    0x07,    0x48,    0x08,
+      0x47,    0x09,    0x46,    0x0a,
+      0x45,    0x0b,    0x44,    0x0c,
+      0x43,    0x0d,    0x42,    0x0e,
+      0x41,
+    ]);
+    /*setTimeout(function() {
+      print("Set measurement period");
+      var us = 100000; // period in us
+      sendCommand([0x1b, 0xff, 0x00,
+        us & 255,
+        (us >> 8) & 255,
+        (us >> 16) & 255,
+        (us >> 24) & 255,
+        0x00,
+        0x00,
+        0x00,
+        0x00]);
+    }, 100);*/
+
+  /*  setTimeout(function() {
+      print("Get sensor info");
+      sendCommand([0x51, 0]); // get sensor IDs
+      // returns [152, 10, 1, 39, 81, 253, 54, 0, 0, 0]
+      // 54 is the bit mask of available channels
+      //sendCommand([106, 16]); // get sensor info
+    }, 2000);*/
+
+    setTimeout(function() {
+      onMsg("Start measurements");
+      //https://github.com/VernierST/godirect-js/blob/main/src/Device.js#L588
+      var channels = 6; // data channels 4 and 2
+      sendCommand([ // start measurements
+      0x18,    0xff,    0x01,    channels,
+      0x00,    0x00,    0x00,    0x00,
+      0x00,    0x00,    0x00,    0x00,
+      0x00,    0x00,    0x00
+      ]);
+    }, 500);
+  }).catch(function() {
+    onMsg("Connect Fail");
+  });
+}
+
+Bangle.loadWidgets();
+Bangle.drawWidgets();
+
+function mainMenu() {
+  var vibText = ["No","Calculated","Vernier"];
+  var vibValue = ["","calculated","vernier"];
+  E.showMenu({"":{title:"Respiration Belt"},
+    "< Back" : () => { saveSettings(); load(); },
+    "Connect" : () => { saveSettings(); E.showMenu(); connect(); },
+    "Vib" : {
+      value : Math.max(vibValue.indexOf(settings.vibrate),0),
+      format : v => vibText[v],
+      min:0,max:2,
+      onchange : v => { settings.vibrate=vibValue[v]; }
+    },
+    "BPM" : {
+      value : settings.vibrateBPM,
+      min:10,max:50,
+      onchange : v => { settings.vibrateBPM=v; }
+    }
+  });
+}
+
+mainMenu();
diff --git a/apps/vernierrespirate/app.png b/apps/vernierrespirate/app.png
new file mode 100644
index 000000000..0f6b22af1
Binary files /dev/null and b/apps/vernierrespirate/app.png differ
diff --git a/apps/verticalface/bangle1-vertical-watch-face-screenshot.png b/apps/verticalface/bangle1-vertical-watch-face-screenshot.png
new file mode 100644
index 000000000..044d194bc
Binary files /dev/null and b/apps/verticalface/bangle1-vertical-watch-face-screenshot.png differ
diff --git a/apps/vibrclock/bangle1-vibrate-clock-screenshot.png b/apps/vibrclock/bangle1-vibrate-clock-screenshot.png
new file mode 100644
index 000000000..da135dc7d
Binary files /dev/null and b/apps/vibrclock/bangle1-vibrate-clock-screenshot.png differ
diff --git a/apps/waveclk/ChangeLog b/apps/waveclk/ChangeLog
new file mode 100644
index 000000000..8c2a33143
--- /dev/null
+++ b/apps/waveclk/ChangeLog
@@ -0,0 +1,2 @@
+0.01: New App!
+0.02: Load widgets after setUI so widclk knows when to hide
diff --git a/apps/waveclk/README.md b/apps/waveclk/README.md
new file mode 100644
index 000000000..470a27c6c
--- /dev/null
+++ b/apps/waveclk/README.md
@@ -0,0 +1,4 @@
+# Wave Clock
+
+![](screenshot.png)
+
diff --git a/apps/waveclk/app-icon.js b/apps/waveclk/app-icon.js
new file mode 100644
index 000000000..00892e9c3
--- /dev/null
+++ b/apps/waveclk/app-icon.js
@@ -0,0 +1 @@
+require("heatshrink").decompress(atob("mEwge27dtAX4C+/dt+wFB/wCECIu3/dvBYNv34RC7/tCIu//99EYN9C4IpB74jG3379ovDFIIRBEYxHD/47D2wjHCIX+AQJHBCIIXBNZt/+5QBEZIgBAQX///9EZRWBBARHDEwhlC/9/EAJoBDQIOBNwyPCEYYCDJQ4CJSQ4CB0O2lojL2lwBIXFiwsK0f/KgUbuwRJo6cBPAO34cUmJHH7U/97tBgEGBIODEY/RXoOw7cAgHbtlxoojGx7hCjAjD20ANA1378MEIIAB4d0u5HGNAPYCAYAB2n2SQSPDjv3CIsF2lxEYto//+CoOGCIUt0O3EYtHvqMBvlw4UAgJQBqIjERgQDBsO+7FAhaMH64DB+4qB+3AgARG9uhIgQJD4dghd+7dLBQZoBaISwC4cArf27dpCIf/23f9uHCIQABhoNClsl20ttuwgYKBEAIAChOmCIOH/vx9ttwB2BDgMBAoIRBmnbpkbtk2ltsgAMCJQOwAgMBk+eq3AhiSBsE2GAX//4WCAAOBAoVbtt8mCJBgHHfYMHdgoRBott+zmDsEAn/tEwkC7UAVoYACgPbv4REAASTBEYY0BPIPwCJAjEu3Dvq8BCAnbsEwGgm2jbAC8EAjFvEAQREjuwDQXbvvx7cd2K/EgEb9oRCAoLOBjEAgk/A="))
diff --git a/apps/waveclk/app.js b/apps/waveclk/app.js
new file mode 100644
index 000000000..f1c67ce2f
--- /dev/null
+++ b/apps/waveclk/app.js
@@ -0,0 +1,72 @@
+function getImg() {
+  return require("heatshrink").decompress(atob("2Ftge27dtAX4C/AUmgVoJB87UAgOi6EAhZB6wEbAweAlo+12kKgsAg3bvu+74MBIIPago+wfwIACgO3/f9/5BC4BBxtB9CBIe+/d9B4fYi3QIN3QgA+EYQP+/YSFRwJBtYQMbHYS/C9//IIoFCgBBsgE2/fv+/fvu+79vQwIPDizIEINVAhu/PoP3/ft+zFBIIkBwEDt4FBINXQgd//4AD94MC3zFF4F9+yDD0FbIMm0gH7HwXt/zCBCQ4IB7Ft+3AA4NogFQgECIMUB3xAC/d9/37/v3CQzLB7EN33AHYNAsFQ7cAQ0Noh7BDQwf/+7CF7bUB/cNZANi7dDsEA4BBh7UDF4P/9+/7YCB7/9QwIVG33fHYMDAQMbtkmwrCg23Qj58CIgPbHwP/vv2CQcAgAFCJQOEPYO0BAXFIMG0g7CDv++Aofv+37O4PaIIObDAPfDYXtAQNsg3AIMGgn46BXgLCB/f/337QwKACjACBjYbEIgYLBgpBggJ8CYoX3/d9B4fYGQIACIIm37/vBwMW7UtIL9ov4/C+/fYoL4BIKAOC23aQYVFILlDIAS8B79vBgW0qa2EII5QHA4NAILfQj7DD/379oMBtgsBB4JAEgEQhohHsEmIgNaIgRBZwBADYoIMDIIQ4BIIoICc5UA4BBa2kPIAf9+wMEwEAgO24BBRLIOAixBZ0E/II+wjEN2BBJpu2jYhF96VBsEAgdCILMBYghBCNAMDgJBCwBBGDYMDII32BgNbocCILFoj5AD/ftBIJoCHARBKAQP+7YHB7f/+3ADgNAYrNAIAf3IIoAMaIVt33bi3Qjd///YHzICB7UH//+IIP+/dtF4IARIIfagdvRILCZAQPQQQf/BINsICUAsO+7R9Bodv+5Bcw4+B3xBDYRwAEgcAm3ADIJBB/6JBILO0YgP/+//v4JBQSYACgpBg0N/YoxBWlpBCv/2DoMLILEPHwX+QbI4DoYgB7dsILFoUIP7/pBD7BBVrZBD9/27KDZoXvIIKFCIIsB2BAPgQjC7UDvu24u0JQYCT7UfHoPfv6DB97FEhpBQiwjBi3ajft20tQCwCB6E//+3IIO+/ZBEgdtIIUwIBcFEYQFBjYnBILOAQQP3YoO/IgIMBtEAzYPBZAICBABQ4DIIiMDIKm0h5BEYoN/+wPC/f9AoTILgIjD0BBBsE27ZBX0F/IILCBAQXv//ftoFB/v+CQOAIJ7pBjdsgnZIK8DIAP9QYQ+BvoFBBAIFB/37IJkLEwnaIIIKBHygCBpEfHgPvIIf/t+3AgQ+BRIRBBhhBIrZBFBAKAWDQKCC/Y7B7Z6B75BD/3Ctu37/tIIK3CIAsCHC4CI6CCC7dv237vu+AoRHB+0AVoKSB2EbvuwQQz7XAROBXIR9C/ftBgX2B4UCkEwn/vDAZBn2kPXIT4B2wCCQYK/BhGA6ENQAJBE4FtIIiAeAQMAv///v2HwX7B4tsg3bhuAgA+ChqDBBARBitCCC/v+/d9CRPf9/wjEB20DgOwYgsFIL3aQQX/vu+Bgn2Qwm3/ZQB7dh20boJBGlpBewEfv/+YQJBEt++/ftIIffCIP7IIPb8BAFIL+0gyBBF4Pv+xBEHYNvAoN9+4RBAALLCtkG4BBLyxBWgM/IIf9+4SIQAO/RIIRBRIX9+xBK5oECRifagEN/xBB253BYogCFQwPfvqSD/dgg3bhhACgIWDzYbEQyWAj5xB//vHwL+DARXtwEbAoPYgBBBtuAIItuOA1bIJ+gg7yDVoIPHRgIFDw3btkAgQ+BYQXYgJBGmwhGpZBPgP3/f9AQKAB/d9II3fAoY1CAAZBCAQRBE7IxIIJ9v+//v++IIICBQwxBBJQUNIKPNGJGtIJzDD/3/HAP79/3B4dvRgP9AoMMIAsAjDFCIIwxJ2pBOv7CB/6ABt++74ICB4PDvv27/92HDII5EFIIezGhQGGwMAgRBF33/94+Btu+PoO/AoIPBjuGj6DCthBJAAhBB3ZBKywDC7QVCjUgTYQLB97EBGQI7C7EPQYN9B4Mfw3D/+0rdgIKC4L6wDB2kAgb4D2EFB4R6CHAK/C4EPZYIfCh5BC+0bILvaAYMgg3ft5BB9o1BB4Vt+wIC7dggwlB+wcC7Ftg3Yv+2IKEAl3btJBLtENXIPv+68Bw3YixBCPQgyCgO2TAIIBgE27cBwAODIKObtobBI4narUAv5BEvgYBIIZYEVIewgBkG0xBRk3bpum6ZBBzZBB7QtDjd9/z7B2/ftgYBYoZBHAAVtwypGDQQANg3TtJBBtO0HwM2I4XQg3b9/+XIT+B2EtII/YE4sMwEbIJM24BBKgnTps0IIubpu0gLNBEwn7/u24pBGX4IAHgcNZAuAagJWHAAuatM07SGDAQNNwAjFMoJuCIIvDIJSvCCQP2EAWIUge2JAIAHiaDB3Q+ByfN02atEDF4RECIIMYU4JBHFBIAC7dvQwu379tizIJgZBBz1Nmuarsmzx6CUIfbsDpDgpBE7BBOtv3IIvbBYJBJgA+Dk+S9Nm2CkBPoJBBwGbIIW2wxBGhgLBhugYpW//fvQwhBMhM1HwNl6XLkp3BC4QACjZBBHwPQlpBE7dAB4KGJIINv3//voUBZYPaTJYABk2yrtk3VZNYJxBCI4+DIIaPBAwMbTAQAGmEDvv//6DB/f/+xrFABOXpcs61AgYsBB48BHwZBDwxWCAwKDIgBBC7/v2//v5BQgVJsglBFJRBJ4EBIJtv+6ABZAPv+3AIJwADmzCDggLFhZBHw/bsJBNtv279///79u26BBSABZBHgEO/ZBB79t2BBK20D9//7dggyDTABdbII19+/bhO2/YJBOJBBBJoN9/w+Hgy2DACcFII3aFgP2gdN23/QwIpJhuwgdsmwLGgO379gQbm0A4JxBjdt+/fIJcB2ECsBBHh//AALgJAA8KAYUoIIoPE7dv35BOAYJBHv5BC+zIUIItABIVoAwNv/37IIPbBAMAgWAD48G4AGEgfvIIX/ZCWgAYULIIPaBYZIC9/3/cNSAR6BIJIAGjf/cAJCC/hBUgNt2gLEtu3798I4lsVSXf9/27f9IIP9LJ4AMtv2nf8m/TIIQcT/f9IIKhBIQJBPgoMLt+wnf9w7CBIKkH/99cYW+I4LgBILT+B49twxBC7BBSm//9pBB9qGBv/2ILmG4EAmyDVgO//9v23fDQV9/wjBIJ8oIJIgBAQyqPgEN//fvu3DQdv/zjTIKOADR9v35BBDQv//dsIDEbII8DsC3DoAaKgd9+44BcAltZwIFBgFhAQIASgyAYLgXv+/bhodF2//9+379/23AEiMBEYJBNlAcKGQRBE24gC///+4CC7BAQgdvHwfftv24ENQaMG/fvIJPf//+IIO+/YjUtkA7ftcCk2/YXBIIm/EAXbv4+B9u//dgERsN33/9uAgZBB7AmBICUBfALdChqACdIv2BwO///8PQzOChdjTwffHwMAhkAjEB23AIKNt3wyB0AFBYQYCH2///uwDYk3DQP3a4X7vrCDAAUYWAJTCAB0DPQewjY1B4ChCMQPbEYPbF4P/v/+BAKeC/y8BX4ILDgwjCSpAAOjd9+3bsO2I4O24YjDMQRBDO4P//YOBPQIFB9q/B/v2GoQgCX6RTE75BCsE2HwSGBIIRiCkxBC7d/IQN/+/79++I4LXDO4sDICkBMQIvB4ZBDFISnDFgKwBIIVt//f9v2HwO+BAMAgQaCgFAgoaB/ZBUtv+/fsm2AGoJBEA4IABjCDCt4LC2/7XgJ9CTwJlCIIQAB0EH/5ATjdv+/btkGjYCBIJUgZwK2BXghBGAAKJCI4LXBBYgABhRAKWAP9III4BGQOGGoXb9pBFKwILB4ENfwgFCGoWggEDCIUPIIJiEABieB/fvNYuAAoXfEAkDAQQvCXIVt2AKBmxBBgNAigrDgfv//fA"));
+}
+var IMAGEWIDTH = 176;
+var IMAGEHEIGHT = 109;
+
+Graphics.prototype.setFontZCOOL = function() {
+// Actual height 40 (46 - 7)
+var widths = atob("CxAhEh8hJCIjGSMdCw==");
+var font = atob("AAAAAAAAAAAAAAAEAAAAAAAPAAAAAAAP4AAAAAAD+AAAAAAA/gAAAAAAP8AAAAAAB/AAAAAAAfAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAcAAAAAAAfgAAAAAAf4AAAAAA/+AAAAAA//AAAAAB/+AAAAAB/+AAAAAD/8AAAAAD/8AAAAAD/4AAAAAH/4AAAAAH/wAAAAAD/wAAAAAAfwAAAAAAHgAAAAAAAAAAAAAAAAAAAAAAAAAABgAAAAAAP8AAAAAB//gAAAAP//4AAAB////AAAP////wAAf///h8AAH//8AfAAD//gAHwAA/8AAB8AAPgAAAfAAD4AAAHwAAfAAAB+AAHwAAAPgAB8AAAD4AAfAAAA+AAHwAAAPgAB8AAAD4AAPgAAA+AAD4AAAPgAA+AAAD8AAPgAAAfAAD4AAAHwAA/////8AAH/////AAB/////wAAf////4AAD////8AAAAAAAAAAAAAAAAAAAAAAAAAAAADAAAAAAAB8AAAAAAA/AAAAAAAfgAAAAAAH4AAAAAAD8AAAAAAB+AAAAAAA/AAAAAAAPwAAH/gAH4D///4AD/////+AB//////gAf/////4AD////gAAA//wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADgAAAAAAB8AAAGAAAfAAAD4AAPwAAB/AAH4AAA/wAB8AAAf8AA/AAAP/AAfgAAP/gAHwAAH/4AD8AAD++AB+AAB/PgAfAAA/j4AHwAAfw+AB+AAP4PgAfwAH8D4AD8AH+A+AAfgD/AfAAD8B/AHwAAfg/gB8AAD8fwAfAAA/v4AHwAAH/8AB8AAA/+AAfAAAH/AAHwAAA/AAB8AAAHgAA+AAAAAAAPgAAAAAAD4AAAAAAA+AAAAAAAAAAAAAAABAAAAAAAD4AAAAAAA+AAAAAAAPgAAAAAAD4AAAAAAA+AAAAAAAHwAAMAAAB8AAfAAAAfAAHwAAAHwAB8AAAA+AAfAAAAPgAHwAfAD4AA+AP4A+AAPgD+APgAD4B/gB8AA+A/8AfAAPgf/AHwAD4H/wB8AA+D98AfgAHh+fgD4AB4/D4A+AAffg+A/gAH34Pg/4AB/8D8f8AAf+Aff+AAH/AH/+AAA/wB/+AAAP4Af+AAAD8AD/AAAA+AA/AAAAHgADAAAAAAAAAAAAAAAAAAAAAAAADgAAAAAAD+AAAAAAH/gAAAAAH/4AAAAAP/+AAAAAP//gAAAAf/z4AAAAf/w+AAAA//gPgAAA//gD4AAAf/AA+AAAH/AAPgAAB/AAD4AAAeAAA+AAACAAAPgAAAAAAD4AAAAAAA+AAAAAAAPgAAAAAAD4AAAAAAA+AAAAAAAP/+AAAAP///gAB/////4AAf////+AAH/////AAB///+AAAAf/APgAAAAAAD4AAAAAAA+AAAAAAAPgAAAAAAD4AAAAAAA+AAAAAAAPgAAAAAAD4AAAAAAAAAAAAAAAACAAAAAAAHwAAAAAAB8AAAAAAAfAAAAAAAH4AAAAAAA+AAAAAAAPgAAAAAAD4AAAAfwA+AAAH/+AHwAAf//gB8AAP//4AfAAH//+AHwAB/+PwB+AAfwB8APgAHwAfAD4AB8AHwA+AAfAB8APgAHwAfAB8AB8AHwAfAAfAB8AHwAHwAfAB8AB8AH4AfAAfAA+AH4AHwAPgH+AB8AD4H/gAfAA+H/wAHwAPv/4AB8AD//4AAfAA//wAAHwAP/wAAB8AD/gAAAAAAfgAAAAAABAAAAAAAAAAAAAAAAAHwAAAAAAH8AAAAAAD/gAAAAAD/4AAAAAD/+AAAAAD/3wAAAAD/x8AAAAD/4PgAAAD/4D4AAAD/4A+AAAB/4AHwAAB/4AB8AAB/4AAfAAB/4CAD4AB/8DgA+AAf8B8APgAD8AfAB8AA8AH4AfAAEAA+AH4AAAAPgA+AAAAD8AfgAAAAfAP4AAAAH4P8AAAAA+H+AAAAAPj+AAAAAB9/AAAAAAf/gAAAAAH/wAAAAAA/4AAAAAAP8AAAAAAB8AAAAAAAOAAAAAAAAAAAAAAAAAAAAD4AAAAAAA+AAAAAAAPwAAAAAAB8AAAAAAAfAAAAAAAHwAAAAAAB8AAAAAAAfAAAAAAAHwAAADAAB8AAAD4AAfAAAD+AAHwAAH/wAB8AAH/4AAfgAH/4AAH4AH/4AAA+AH/wAAAPgH/wAAAD4H/wAAAA+H/wAAAAPv/wAAAAD//wAAAAA//gAAAAAP/gAAAAAD/gAAAAAAfgAAAAAAAAAAAAAAAAAAAAAAAAAAAPgAAAAAAH4AAAAAAB+AAAHwAA/wAAB8AAf8AAA/gAP/AAAP8AH/wAAH/gD8+AAB/4B+PgAAf/A/j4AAPn4Pw+AAD4/H4HwAB+Pz8B8AAfB/+AfAAPwP/AHwAD4B/gB+AA+AfwAPgAfAP+AD4AHwD/wA+AB+B/+AfgAfw/PgPwAB/fj8D8AAP/wfh+AAB/4D8fAAAP+AfPwAAB/AH/4AAAPgA/8AAAAAAH/AAAAAAA/gAAAAAAPwAAAAAAB8AAAAAAAAAAAAAAAAAAAAAGAAAAAAAD4AAAAAAB/AAAAAAB/wAAAAAA/+AAAAAAf/gAAAAAf78AAAAAP8fAAAAAP+H4AAAAD+A+AAAAB/APgAAAAfAB8AAAAH4AfAAYAA+AD4AfAAPgA+AfwAD4APgf+AA+ABgf/AAHwAA//AAB8AA//AAAfAA//AAAHwA//AAAB+A/+AAAAPh/+AAAAD5/+AAAAA//+AAAAAP/+AAAAAB/8AAAAAAf8AAAAAAH8AAAAAAAAAAAAAAAAADgAOAAAAH4AfgAAAD+AP4AAAA/wD/AAAAH8AfwAAAB/AH8AAAAfwB/AAAADgAOAAAAAAAAAAAAAAAAA=");
+var scale = 1; // size multiplier for this font
+g.setFontCustom(font, 46, widths, 50+(scale<<8)+(1<<16));
+};
+
+// timeout used to update every minute
+var drawTimeout;
+
+// schedule a draw for the next minute
+function queueDraw() {
+  if (drawTimeout) clearTimeout(drawTimeout);
+  drawTimeout = setTimeout(function() {
+    drawTimeout = undefined;
+    draw();
+  }, 60000 - (Date.now() % 60000));
+}
+
+
+function draw() {
+  var x = g.getWidth()/2;
+  var y = 24+20;
+
+  g.reset().clearRect(0,24,g.getWidth(),g.getHeight()-IMAGEHEIGHT);
+  if (g.getWidth() == IMAGEWIDTH)
+    g.drawImage(getImg(),0,g.getHeight()-IMAGEHEIGHT);
+  else {
+    let scale = g.getWidth()/IMAGEWIDTH;
+    y *= scale;
+    g.drawImage(getImg(),0,g.getHeight()-IMAGEHEIGHT*scale,{scale:scale});
+  }
+  // work out locale-friendly date/time
+  var date = new Date();
+  var timeStr = require("locale").time(date,1);
+  var dateStr = require("locale").date(date).toUpperCase();
+  // draw time
+  g.setFontAlign(0,0).setFont("ZCOOL");
+  g.drawString(timeStr,x,y);
+  // draw date
+  y += 35;
+  g.setFontAlign(0,0,1).setFont("6x8");
+  g.drawString(dateStr,g.getWidth()-8,g.getHeight()/2);
+  // queue draw in one minute
+  queueDraw();
+}
+
+// Clear the screen once, at startup
+g.setTheme({bg:"#f0f",fg:"#fff",dark:true}).clear();
+// draw immediately at first, queue update
+draw();
+// Stop updates when LCD is off, restart when on
+Bangle.on('lcdPower',on=>{
+  if (on) {
+    draw(); // draw immediately, queue redraw
+  } else { // stop draw timer
+    if (drawTimeout) clearTimeout(drawTimeout);
+    drawTimeout = undefined;
+  }
+});
+// Show launcher when middle button pressed
+Bangle.setUI("clock");
+// Load widgets
+Bangle.loadWidgets();
+Bangle.drawWidgets();
diff --git a/apps/waveclk/app.png b/apps/waveclk/app.png
new file mode 100644
index 000000000..ff43bb106
Binary files /dev/null and b/apps/waveclk/app.png differ
diff --git a/apps/waveclk/screenshot.png b/apps/waveclk/screenshot.png
new file mode 100644
index 000000000..7f05ce688
Binary files /dev/null and b/apps/waveclk/screenshot.png differ
diff --git a/apps/wclock/screenshot_word.png b/apps/wclock/screenshot_word.png
new file mode 100644
index 000000000..56e0ce98f
Binary files /dev/null and b/apps/wclock/screenshot_word.png differ
diff --git a/apps/weather/ChangeLog b/apps/weather/ChangeLog
index 04e49e460..c1a0504a4 100644
--- a/apps/weather/ChangeLog
+++ b/apps/weather/ChangeLog
@@ -2,4 +2,9 @@
 0.03: Fix flickering last updated time.
 0.04: Adjust "weather unknown" message according to Bluetooth connection.
 0.05: Add wind direction.
-0.06: Use setUI for launcher.
\ No newline at end of file
+0.06: Use setUI for launcher.
+0.07: Add theme support and unknown icon.
+0.08: Refactor and reduce widget ram usage.
+0.09: Fix crash when weather.json is absent.
+0.10: Use new Layout library
+0.11: Bangle.js 2 support
diff --git a/apps/weather/app.js b/apps/weather/app.js
index 0e0010249..8c8526fbd 100644
--- a/apps/weather/app.js
+++ b/apps/weather/app.js
@@ -1,95 +1,106 @@
-(() => {
-  const weather = require('weather');
+const Layout = require('Layout');
+const locale = require('locale');
+const weather = require('weather');
+let current = weather.get();
 
-  function formatDuration(millis) {
-    let pluralize = (n, w) => n + " " + w + (n == 1 ? "" : "s");
-    if (millis < 60000) return "< 1 minute";
-    if (millis < 3600000) return pluralize(Math.floor(millis/60000), "minute");
-    if (millis < 86400000) return pluralize(Math.floor(millis/3600000), "hour");
-    return pluralize(Math.floor(millis/86400000), "day");
-  }
+Bangle.loadWidgets();
 
-  function draw() {
-    let w = weather.current;
-    g.reset();
-    g.setColor(0).fillRect(0, 24, 239, 239);
+var layout = new Layout({type:"v", bgCol: g.theme.bg, c: [
+  {filly: 1},
+  {type: "h", filly: 0, c: [
+    {type: "custom", width: g.getWidth()/2, height: g.getWidth()/2, valign: -1, txt: "unknown", id: "icon",
+      render: l => weather.drawIcon(l.txt, l.x+l.w/2, l.y+l.h/2, l.w/2-5)},
+    {type: "v", fillx: 1, c: [
+      {type: "h", pad: 2, c: [
+        {type: "txt", font: "18%", id: "temp", label: "000"},
+        {type: "txt", font: "12%", valign: -1, id: "tempUnit", label: "°C"},
+      ]},
+      {filly: 1},
+      {type: "txt", font: "6x8", pad: 2, halign: 1, label: "Humidity"},
+      {type: "txt", font: "9%", pad: 2, halign: 1, id: "hum", label: "000%"},
+      {filly: 1},
+      {type: "txt", font: "6x8", pad: 2, halign: -1, label: "Wind"},
+      {type: "h", halign: -1, c: [
+        {type: "txt", font: "9%", pad: 2, id: "wind",  label: "00"},
+        {type: "txt", font: "6x8", pad: 2, valign: -1, id: "windUnit", label: "km/h"},
+      ]},
+    ]},
+  ]},
+  {filly: 1},
+  {type: "txt", font: "9%", wrap: true, height: g.getHeight()*0.18, fillx: 1, id: "cond", label: "Weather condition"},
+  {filly: 1},
+  {type: "h", c: [
+    {type: "txt", font: "6x8", pad: 4, id: "loc", label: "Toronto"},
+    {fillx: 1},
+    {type: "txt", font: "6x8", pad: 4, id: "updateTime", label: "15 minutes ago"},
+  ]},
+  {filly: 1},
+]}, {lazy: true});
 
-    weather.drawIcon(w.txt, 65, 90, 55);
-    const locale = require("locale");
+function formatDuration(millis) {
+  let pluralize = (n, w) => n + " " + w + (n == 1 ? "" : "s");
+  if (millis < 60000) return "< 1 minute";
+  if (millis < 3600000) return pluralize(Math.floor(millis/60000), "minute");
+  if (millis < 86400000) return pluralize(Math.floor(millis/3600000), "hour");
+  return pluralize(Math.floor(millis/86400000), "day");
+}
 
-    g.setColor(-1);
+function draw() {
+  layout.icon.txt = current.txt;
+  const temp = locale.temp(current.temp-273.15).match(/^(\D*\d*)(.*)$/);
+  layout.temp.label = temp[1];
+  layout.tempUnit.label = temp[2];
+  layout.hum.label = current.hum+"%";
+  const wind = locale.speed(current.wind).match(/^(\D*\d*)(.*)$/);
+  layout.wind.label = wind[1];
+  layout.windUnit.label = wind[2] + " " + (current.wrose||'').toUpperCase();
+  layout.cond.label = current.txt.charAt(0).toUpperCase()+(current.txt||'').slice(1);
+  layout.loc.label = current.loc;
+  layout.updateTime.label = `${formatDuration(Date.now() - current.time)} ago`;
+  layout.update();
+  layout.render();
+}
 
-    const temp = locale.temp(w.temp-273.15).match(/^(\D*\d*)(.*)$/);
-    let width = g.setFont("Vector", 40).stringWidth(temp[1]);
-    width += g.setFont("Vector", 20).stringWidth(temp[2]);
-    g.setFont("Vector", 40).setFontAlign(-1, -1, 0);
-    g.drawString(temp[1], 180-width/2, 70);
-    g.setFont("Vector", 20).setFontAlign(1, -1, 0);
-    g.drawString(temp[2], 180+width/2, 70);
+function drawUpdateTime() {
+  if (!current || !current.time) return;
+  layout.updateTime.label = `${formatDuration(Date.now() - current.time)} ago`;
+  layout.update();
+  layout.render();
+}
 
-    g.setFont("6x8", 1);
-    g.setFontAlign(-1, 0, 0);
-    g.drawString("Humidity", 135, 130);
-    g.setFontAlign(1, 0, 0);
-    g.drawString(w.hum+"%", 225, 130);
-    if ('wind' in w) {
-      g.setFontAlign(-1, 0, 0);
-      g.drawString("Wind", 135, 142);
-      g.setFontAlign(1, 0, 0);
-      g.drawString(locale.speed(w.wind)+' '+w.wrose.toUpperCase(), 225, 142);
-    }
-
-    g.setFont("6x8", 2).setFontAlign(0, 0, 0);
-    g.drawString(w.loc, 120, 170);
-
-    g.setFont("6x8", 1).setFontAlign(0, 0, 0);
-    g.drawString(w.txt.charAt(0).toUpperCase()+w.txt.slice(1), 120, 190);
-
-    drawUpdateTime();
-
-    g.flip();
-  }
-
-  function drawUpdateTime() {
-    if (!weather.current || !weather.current.time) return;
-    let text = `Last update received ${formatDuration(Date.now() - weather.current.time)} ago`;
-    g.reset();
-    g.setColor(0).fillRect(0, 202, 239, 210);
-    g.setColor(-1).setFont("6x8", 1).setFontAlign(0, 0, 0);
-    g.drawString(text, 120, 206);
-  }
-
-  function update() {
-    NRF.removeListener("connect", update);
-    if (weather.current) {
-      draw();
-    } else if (NRF.getSecurityStatus().connected) {
-      E.showMessage("Weather unknown\n\nIs Gadgetbridge\nweather reporting\nset up on your\nphone?");
+function update() {
+  current = weather.get();
+  NRF.removeListener("connect", update);
+  if (current) {
+    draw();
+  } else {
+    layout.forgetLazyState();
+    if (NRF.getSecurityStatus().connected) {
+      E.showMessage("Weather\nunknown\n\nIs Gadgetbridge\nweather\nreporting set\nup on your\nphone?");
     } else {
-      E.showMessage("Weather unknown\n\nGadgetbridge\nnot connected");
+      E.showMessage("Weather\nunknown\n\nGadgetbridge\nnot connected");
       NRF.on("connect", update);
     }
   }
+}
 
-  let interval = setInterval(drawUpdateTime, 60000);
-  Bangle.on('lcdPower', (on) => {
-    if (interval) {
-      clearInterval(interval);
-      interval = undefined;
-    }
-    if (on) {
-      drawUpdateTime();
-      interval = setInterval(drawUpdateTime, 60000);
-    }
-  });
+let interval = setInterval(drawUpdateTime, 60000);
+Bangle.on('lcdPower', (on) => {
+  if (interval) {
+    clearInterval(interval);
+    interval = undefined;
+  }
+  if (on) {
+    drawUpdateTime();
+    interval = setInterval(drawUpdateTime, 60000);
+  }
+});
 
-  weather.on("update", update);
+weather.on("update", update);
 
-  update();
+update();
 
-  // Show launcher when middle button pressed
-  Bangle.setUI("clock");
+// Show launcher when middle button pressed
+Bangle.setUI("clock");
 
-  Bangle.loadWidgets();
-  Bangle.drawWidgets();
-})()
+Bangle.drawWidgets();
diff --git a/apps/weather/lib.js b/apps/weather/lib.js
index 597eac105..76ed2aaa4 100644
--- a/apps/weather/lib.js
+++ b/apps/weather/lib.js
@@ -1,6 +1,7 @@
 const storage = require('Storage');
+const B2 = process.env.HWVERSION===2;
 
-let expiryTimeout = undefined;
+let expiryTimeout;
 function scheduleExpiry(json) {
   if (expiryTimeout) {
     clearTimeout(expiryTimeout);
@@ -9,53 +10,35 @@ function scheduleExpiry(json) {
   let expiry = "expiry" in json ? json.expiry : 2*3600000;
   if (json.weather && json.weather.time && expiry) {
     let t = json.weather.time + expiry - Date.now();
-    expiryTimeout = setTimeout(() => {
-      expiryTimeout = undefined;
-
-      let json = storage.readJSON('weather.json')||{};
-      delete json.weather;
-      storage.write('weather.json', json);
-
-      exports.current = undefined;
-      exports.emit("update");
-    }, t);
+    expiryTimeout = setTimeout(update, t);
   }
 }
 
-/**
- * Convert numeric direction into human-readable label
- *
- * @param {number} deg - Direction in degrees
- * @return {string|null} - Nearest compass point
- */
-function compassRose(deg) {
-  if (typeof deg === 'undefined') return null;
-  while (deg<0 || deg>360) {
-    deg = (deg+360)%360;
-  }
-  return ['n','ne','e','se','s','sw','w','nw','n'][Math.floor((deg+22.5)/45)];
-}
-
-function setCurrentWeather(json) {
-  scheduleExpiry(json);
-  exports.current = json.weather;
-}
-
 function update(weatherEvent) {
-  let weather = Object.assign({}, weatherEvent);
-  weather.time = Date.now();
-  if ('wdir' in weather) {
-    weather.wrose = compassRose(weather.wdir);
-  }
-  delete weather.t;
-
   let json = storage.readJSON('weather.json')||{};
-  json.weather = weather;
+  
+  if (weatherEvent) {
+    let weather = weatherEvent.clone();
+    delete weather.t;
+    weather.time = Date.now();
+    if (weather.wdir != null) {
+      // Convert numeric direction into human-readable label
+      let deg = weather.wdir;
+      while (deg<0 || deg>360) {
+        deg = (deg+360)%360;
+      }
+      weather.wrose = ['n','ne','e','se','s','sw','w','nw','n'][Math.floor((deg+22.5)/45)];
+    }
+
+    json.weather = weather;
+  }
+  else {
+    delete json.weather;
+  }
+
   storage.write('weather.json', json);
-
-  setCurrentWeather(json);
-
-  exports.emit("update");
+  scheduleExpiry(json);
+  exports.emit("update", json.weather);
 }
 
 const _GB = global.GB;
@@ -64,17 +47,21 @@ global.GB = (event) => {
   if (_GB) setTimeout(_GB, 0, event);
 };
 
-setCurrentWeather(storage.readJSON('weather.json')||{});
+exports.get = function() {
+  return (storage.readJSON('weather.json')||{}).weather;
+}
+
+scheduleExpiry(storage.readJSON('weather.json')||{});
 
 exports.drawIcon = function(cond, x, y, r) {
   function drawSun(x, y, r) {
-    g.setColor("#FF7700");
+    g.setColor(B2 ? '#FF0' : (g.theme.dark ? "#FE0" : "#FC0"));
     g.fillCircle(x, y, r);
   }
 
   function drawCloud(x, y, r, c) {
     const u = r/12;
-    if (c==null) c = "#EEEEEE";
+    if (c==null) c = B2 ? '#FFF': (g.theme.dark ? "#BBB" : "#AAA");
     g.setColor(c);
     g.fillCircle(x-8*u, y+3*u, 4*u);
     g.fillCircle(x-4*u, y-2*u, 5*u);
@@ -91,7 +78,7 @@ exports.drawIcon = function(cond, x, y, r) {
   }
 
   function drawBrokenClouds(x, y, r) {
-    drawCloud(x+1/8*r, y-1/8*r, 7/8*r, "#777777");
+    drawCloud(x+1/8*r, y-1/8*r, 7/8*r, "#777"); // dithers on B2, but that's ok
     drawCloud(x-1/8*r, y+1/8*r, 7/8*r);
   }
 
@@ -101,24 +88,25 @@ exports.drawIcon = function(cond, x, y, r) {
   }
 
   function drawRainLines(x, y, r) {
-    g.setColor("#FFFFFF");
+    g.setColor(B2 ? '#0FF' : (g.theme.dark ? "#0CF" : "#07F"));
     const y1 = y+1/2*r;
     const y2 = y+1*r;
-    g.fillPoly([
-      x-6/12*r+1, y1,
-      x-8/12*r+1, y2,
+    const poly = g.fillPolyAA ? p => g.fillPolyAA(p) : p => g.fillPoly(p);
+    poly([
+      x-6/12*r, y1,
+      x-8/12*r, y2,
       x-7/12*r, y2,
       x-5/12*r, y1,
     ]);
-    g.fillPoly([
-      x-2/12*r+1, y1,
-      x-4/12*r+1, y2,
+    poly([
+      x-2/12*r, y1,
+      x-4/12*r, y2,
       x-3/12*r, y2,
       x-1/12*r, y1,
     ]);
-    g.fillPoly([
-      x+2/12*r+1, y1,
-      x+0/12*r+1, y2,
+    poly([
+      x+2/12*r, y1,
+      x+0/12*r, y2,
       x+1/12*r, y2,
       x+3/12*r, y1,
     ]);
@@ -136,7 +124,7 @@ exports.drawIcon = function(cond, x, y, r) {
 
   function drawThunderstorm(x, y, r) {
     function drawLightning(x, y, r) {
-      g.setColor("#FF7700");
+      g.setColor(B2 ? '#FF0' : (g.theme.dark ? "#FE0" : "#FC0"));
       g.fillPoly([
         x-2/6*r, y-r,
         x-4/6*r, y+1/6*r,
@@ -164,7 +152,7 @@ exports.drawIcon = function(cond, x, y, r) {
       }
     }
 
-    g.setColor("#FFFFFF");
+    g.setColor(B2 ? '#FFF' : (g.theme.dark ? "#FFF" : "#CCC"));
     const w = 1/12*r;
     for(let i = 0; i<=6; ++i) {
       const points = [
@@ -199,7 +187,7 @@ exports.drawIcon = function(cond, x, y, r) {
       [-0.2, 0.3],
     ];
 
-    g.setColor("#FFFFFF");
+    g.setColor(B2 ? '#FFF' : (g.theme.dark ? "#FFF" : "#CCC"));
     for(let i = 0; i<5; ++i) {
       g.fillRect(x+layers[i][0]*r, y+(0.4*i-0.9)*r, x+layers[i][1]*r,
         y+(0.4*i-0.7)*r-1);
@@ -208,6 +196,11 @@ exports.drawIcon = function(cond, x, y, r) {
     }
   }
 
+  function drawUnknown(x, y, r) {
+    drawCloud(x, y, r, "#777"); // dithers on B2, but that's ok
+    g.setColor(g.theme.fg).setFontAlign(0, 0).setFont('Vector', r*2).drawString("?", x+r/10, y+r/6);
+  }
+
   function chooseIcon(condition) {
     if (!condition) return () => {};
     condition = condition.toLowerCase();
@@ -225,7 +218,18 @@ exports.drawIcon = function(cond, x, y, r) {
     if (condition.includes("few clouds")) return drawFewClouds;
     if (condition.includes("scattered clouds")) return drawCloud;
     if (condition.includes("clouds")) return drawBrokenClouds;
-    return drawMist;
+    if (condition.includes("mist") ||
+      condition.includes("smoke") ||
+      condition.includes("haze") ||
+      condition.includes("sand") ||
+      condition.includes("dust") ||
+      condition.includes("fog") ||
+      condition.includes("ash") ||
+      condition.includes("squalls") ||
+      condition.includes("tornado")) {
+      return drawMist;
+    }
+    return drawUnknown;
   }
 
   chooseIcon(cond)(x, y, r);
diff --git a/apps/weather/widget.js b/apps/weather/widget.js
index eb5ead949..4871ceda4 100644
--- a/apps/weather/widget.js
+++ b/apps/weather/widget.js
@@ -1,45 +1,23 @@
 (() => {
   const weather = require('weather');
 
-  function draw() {
-    const w = weather.current;
-    if (!w) return;
-    g.reset();
-    g.setColor(0).fillRect(this.x, this.y, this.x+this.width-1, this.y+23);
-    if (w.txt) {
-      weather.drawIcon(w.txt, this.x+10, this.y+8, 7.5);
-    }
-    if (w.temp) {
-      let t = require('locale').temp(w.temp-273.15);  // applies conversion
-      t = t.match(/[\d\-]*/)[0]; // but we have no room for units
-      g.setFontAlign(0, 1); // center horizontally at bottom of widget
-      g.setFont('6x8', 1);
-      g.setColor(-1);
-      g.drawString(t, this.x+10, this.y+24);
-    }
-  }
-
   var dirty = false;
 
-  function update() {
-    if (!WIDGETS["weather"].width) {
-      WIDGETS["weather"].width = 20;
-      Bangle.drawWidgets();
-    } else if (Bangle.isLCDOn()) {
-      WIDGETS["weather"].draw();
-    } else {
-      dirty = true;
+  weather.on("update", w => {
+    if (w) {
+      if (!WIDGETS["weather"].width) {
+        WIDGETS["weather"].width = 20;
+        Bangle.drawWidgets();
+      } else if (Bangle.isLCDOn()) {
+        WIDGETS["weather"].draw();
+      } else {
+        dirty = true;
+      }
+    }
+    else {
+      WIDGETS["weather"].width = 0;
+      Bangle.drawWidgets();
     }
-  }
-
-  function hide() {
-    WIDGETS["weather"].width = 0;
-    Bangle.drawWidgets();
-  }
-
-  weather.on("update", () => {
-    if (weather.current) update();
-    else hide();
   });
 
   Bangle.on('lcdPower', on => {
@@ -51,7 +29,23 @@
 
   WIDGETS["weather"] = {
     area: "tl",
-    width: weather.current ? 20 : 0,
-    draw: draw,
+    width: weather.get() ? 20 : 0,
+    draw: function() {
+      const w = weather.get();
+      if (!w) return;
+      g.reset();
+      g.clearRect(this.x, this.y, this.x+this.width-1, this.y+23);
+      if (w.txt) {
+        weather.drawIcon(w.txt, this.x+10, this.y+8, 7.5);
+      }
+      if (w.temp) {
+        let t = require('locale').temp(w.temp-273.15);  // applies conversion
+        t = t.match(/[\d\-]*/)[0]; // but we have no room for units
+        g.reset();
+        g.setFontAlign(0, 1); // center horizontally at bottom of widget
+        g.setFont('6x8', 1);
+        g.drawString(t, this.x+10, this.y+24);
+      }
+    },
   };
 })();
diff --git a/apps/welcome/ChangeLog b/apps/welcome/ChangeLog
index 519222c52..8e2f99b9a 100644
--- a/apps/welcome/ChangeLog
+++ b/apps/welcome/ChangeLog
@@ -14,3 +14,5 @@
 0.10: Tweaks to reduce memory usage
 0.11: Fix initial screen fill colour
 0.12: Fix swipe direction (#800)
+0.13: Mods for Bangle.js 2
+0.14: Turn off and run later to use softOff to time is set right
diff --git a/apps/welcome/app.js b/apps/welcome/app-bangle1.js
similarity index 97%
rename from apps/welcome/app.js
rename to apps/welcome/app-bangle1.js
index 047b0cdb2..949750b38 100644
--- a/apps/welcome/app.js
+++ b/apps/welcome/app-bangle1.js
@@ -290,14 +290,6 @@ setWatch(()=>{
 }, BTN2, {repeat:true,edge:"falling"});
 setWatch(()=>move(-1), BTN1, {repeat:true});
 
-(function migrateSettings(){
-  let global_settings = require('Storage').readJSON('setting.json', 1)
-  if (global_settings) {
-    delete global_settings.welcomed
-    require('Storage').write('setting.json', global_settings)
-  }
-})()
-
 Bangle.setLCDTimeout(0);
 Bangle.setLCDPower(1);
 move(0);
diff --git a/apps/welcome/app-bangle2.js b/apps/welcome/app-bangle2.js
new file mode 100644
index 000000000..93d1c5657
--- /dev/null
+++ b/apps/welcome/app-bangle2.js
@@ -0,0 +1,248 @@
+// exec each function from seq one after the other
+function animate(seq,period) {
+  var c = g.getColor();
+  var i = setInterval(function() {
+    if (seq.length) {
+      var f = seq.shift();
+      g.setColor(c);
+      if (f) f();
+    } else clearInterval(i);
+  },period);
+}
+
+// Fade in to FG color with angled lines
+function fade(col, callback) {
+  var n = 0;
+  function f() {"ram"
+    g.setColor(col);
+    for (var i=n;i<240;i+=10) g.drawLine(i,0,0,i).drawLine(i,240,240,i);
+    g.flip();
+    n++;
+    if (n<10) setTimeout(f,0);
+    else callback();
+  }
+  f();
+}
+
+
+var SCENE_COUNT=10;
+function getScene(n) {
+  if (n==0) return function() {
+    g.reset().setBgColor(0).clearRect(0,0,176,176);
+    g.setFont("6x15");
+    var n=0;
+    var l = Bangle.getLogo();
+    var im = g.imageMetrics(l);
+    var i = setInterval(function() {
+      n+=0.1;
+      g.setColor(n,n,n);
+      g.drawImage(l,(176-im.width)/2,(176-im.height)/2);
+      if (n>=1) {
+        clearInterval(i);
+        setTimeout(()=>g.drawString("Open",44,104), 500);
+        setTimeout(()=>g.drawString("Hackable",44,116), 1000);
+        setTimeout(()=>g.drawString("Smart Watch",44,128), 1500);
+      }
+    },50);
+  };
+  if (n==1) return function() {
+    var img = require("heatshrink").decompress(atob("ptR4n/j/4gH+8H5wl+jOukVVoHZ8dt/n//n37OtgH9sHhwHp4H5xmkGiH72MRje/LL/7iIAEE7sPEgoAC+AlagIlIiMQErPxDwUYxAABwIHCj8N7nOl3uEqa6BEggnFjfM5nCkUil3gEq5KDAAQmC6QmBE4JxSEhIABiQmB8QmSXoQlCYRMdEwIlCAAIlNhYlOiO85nNEyMPEoZwIAAcsYIYmPXoYlMiKaFExX/u9VEqLBBOYrCH+czmtVqJyDEpiaCOYsgSYszmc3qtTEqMR7hzG8AlGmd1OQglOOY6aEgYlCmmZoJMCTBrnD6SaIEoU/zOUuolSjbnBJgqaCEoU5zOXX4RyQYBBzCS4X5zNDqqZCJiERJg5zBEoVJEoM1JgYlQjhMHc4JLEmZMEEp6ZIJgPzS4WTmZMVTILmFYAK+BmglCmd1JgUYJiPNEorABEIOZygDBm5MCiJMQlhMH8ByBXwIlBJgUxJiMd5nOTIzlBTAK+BAANVq4jPAAS/HJgJyCTATAEACC/B4S/IJgIlCYAgAPiS/Kn5yEYANTEyPc5niOQxMB/LlCOapyJJgbpBYAZzROQK/Gl0ATIWfEoZzBc6IlB6SYGgBJBJgpzSlhyH8EAh5MBTIjnCuIlOjjlHTAJzC/LmDTSSYIEoTABOYIlETSKYHXwIABOYM0yYmETSCYHEobnDOYqaBExu8TAwlEc4U5EoiaCmK+NTAolFEwX0TQzBMXwXiEpTBCAAomNEoS+EEo4mIYIImKEoS+EEpDoBEyUbEo3gEo4mJdAImIJY4lJEycdEoPOOBYmPuIlE+HcJYhKKTZ1fhYkB2EAhnNcYMuEhomMr8A3YABEoJyB5gjOAAYmHm9VgELEoJMBEoXAEyXzE45YBJgXwEqx1I+ByDOYJyVJw5yCgEB3cQGgJMWJwQnCu6/CgFBigDB13S/glVAAf1qomCglEoADB1QDBADEPEoNVqEAolEgEKolKErJMDYAJMD0lE0AmaEoNaAgJMCFIYAahV/IgIiDOTgABNYJMEOToiCIoJMCOTzfCN4RMBOTxsDJIRyfIwZMBKQZzfJgRyfOYZMBOUBzCJgNKOT5zDJgLoCADxKBOAIABOT6aCAARyfOYRyjOYRyjOYlKEsBzEEsBzEOUJzDOUIABOUiaDOURzCOUZzCEscKCiY"));
+    var im = g.imageMetrics(img);
+    g.reset();
+    g.setBgColor("#ff00ff");
+    var y = 176, speed = 5;
+    function balloon(callback) {
+      y-=speed;
+      var x = (176-im.width)/2;
+      g.drawImage(img,x,y);
+      g.clearRect(x,y+81,x+77,y+81+speed);
+      if (y>30) setTimeout(balloon,0,callback);
+      else callback();
+    }
+    fade("#ff00ff", function() {
+      balloon(function() {
+        g.setColor(-1).setFont("6x15:2").setFontAlign(0,0);
+        g.drawString("Welcome.",88,130);
+      });
+    });
+    setTimeout(function() {
+      var n=0;
+      var i = setInterval(function() {
+        n+=4;
+        g.scroll(0,-4);
+        if (n>150)
+          clearInterval(i);
+      },20);
+    },3500);
+
+  };
+  if (n==2) return function() {
+    g.reset();
+    g.setBgColor("#ffff00").setColor(0).clear();
+    g.setFont("12x20").setFontAlign(0,0);
+    var x = 70, y = 25, h=25;
+    animate([
+      ()=>g.drawString("Your",x,y+=h),
+      ()=>g.drawString("Bangle.js",x,y+=h),
+      ()=>g.drawString("has one",x,y+=h),
+      ()=>g.drawString("button",x,y+=h),
+      ()=>{g.setFont("12x20:2").setFontAlign(0,0,1).drawString("HERE!",150,88);}
+    ],200);
+  };
+  if (n==3) return function() {
+    g.reset();
+    g.setBgColor("#00ffff").setColor(0).clear();
+    g.setFontAlign(0,0).setFont("6x15:2");
+    g.drawString("Press",88,40).setFontAlign(0,-1);
+    g.setFont("12x20");
+    g.drawString("To wake the\nscreen up, or to\nselect", 88,60);
+  };
+  if (n==4) return function() {
+    g.reset();
+    g.setBgColor("#00ffff").setColor(0).clear();
+    g.setFontAlign(0,0).setFont("6x15:2");
+    g.drawString("Long Press",88,40).setFontAlign(0,-1);
+    g.setFont("12x20");
+    g.drawString("To go back to\nthe clock", 88,60);
+  };
+  if (n==5) return function() {
+    g.reset();
+    g.setBgColor("#ff0000").setColor(0).clear();
+    g.setFontAlign(0,0).setFont("12x20");
+    g.drawString("If Bangle.js ever\nstops, hold the\nbutton for\nten seconds.\n\nBangle.js will\nthen reboot.", 88,78);
+  };
+  if (n==6) return function() {
+    g.reset();
+    g.setBgColor("#0000ff").setColor(-1).clear();
+    g.setFont("12x20").setFontAlign(0,0);
+    var x = 88, y = -20, h=60;
+    animate([
+      ()=>{g.drawString("Bangle.js has a\nfull touchscreen",x,y+=h);},
+      0,0,
+      ()=>{g.drawString("Drag up and down\nto scroll and\ntap to select",x,y+=h);},
+    ],300);
+  };
+  if (n==7) return function() {
+    g.reset();
+    g.setBgColor("#00ff00").setColor(0).clear();
+    g.setFont("12x20").setFontAlign(0,0);
+    var x = 88, y = -35, h=80;
+    animate([
+      ()=>{g.drawString("Bangle.js comes\nwith a few\napps installed",x,y+=h);},
+      0,0,
+      ()=>{g.drawString("To add more, visit\nbanglejs.com/apps",x,y+=h);},
+    ],400);
+  };
+  if (n==8) return function() {
+    g.reset();
+    g.setBgColor("#ff0000").setColor(0).clear();
+    g.setFont("12x20").setFontAlign(0,0);
+    var x = 88;
+    g.drawString("You can also make\nyour own apps!",x,30);
+    g.drawString("Check out\nbanglejs.com",x,130);
+
+    var rx = 0, ry = 0;
+    // draw a cube
+    function draw() {
+      // rotate
+      rx += 0.1;
+      ry += 0.11;
+      var rcx=Math.cos(rx),
+        rsx=Math.sin(rx),
+        rcy=Math.cos(ry),
+        rsy=Math.sin(ry);
+      // Project 3D coordinates into 2D
+      function p(x,y,z) {
+        var t;
+        t = x*rcy + z*rsy;
+        z = z*rcy - x*rsy;
+        x=t;
+        t = y*rcx + z*rsx;
+        z = z*rcx - y*rsx;
+        y=t;
+        z += 4;
+        return [88 + 60*x/z, 78+ 60*y/z];
+      }
+
+      var a;
+      // draw a series of lines to make up our cube
+      var s = 30;
+      g.clearRect(88-s,78-s,88+s,78+s);
+      a = p(-1,-1,-1); g.moveTo(a[0],a[1]);
+      a = p(1,-1,-1); g.lineTo(a[0],a[1]);
+      a = p(1,1,-1); g.lineTo(a[0],a[1]);
+      a = p(-1,1,-1); g.lineTo(a[0],a[1]);
+      a = p(-1,-1,-1); g.lineTo(a[0],a[1]);
+      a = p(-1,-1,1); g.moveTo(a[0],a[1]);
+      a = p(1,-1,1); g.lineTo(a[0],a[1]);
+      a = p(1,1,1); g.lineTo(a[0],a[1]);
+      a = p(-1,1,1); g.lineTo(a[0],a[1]);
+      a = p(-1,-1,1); g.lineTo(a[0],a[1]);
+      a = p(-1,-1,-1); g.moveTo(a[0],a[1]);
+      a = p(-1,-1,1); g.lineTo(a[0],a[1]);
+      a = p(1,-1,-1); g.moveTo(a[0],a[1]);
+      a = p(1,-1,1); g.lineTo(a[0],a[1]);
+      a = p(1,1,-1); g.moveTo(a[0],a[1]);
+      a = p(1,1,1); g.lineTo(a[0],a[1]);
+      a = p(-1,1,-1); g.moveTo(a[0],a[1]);
+      a = p(-1,1,1); g.lineTo(a[0],a[1]);
+    }
+
+    setInterval(draw,50);
+  };
+  if (n==9) return function() {
+    g.reset();
+    g.setBgColor("#ffffff");g.clear();
+    g.setFontAlign(0,0);
+    g.setFont("12x20");
+
+    var x = 88, y = 10, h=21;
+    animate([
+      ()=>g.drawString("That's it!",x,y+=h),
+      ()=>{g.drawString("Press",x,y+=h*2);
+        g.drawString("the button",x,y+=h);
+        g.drawString("to start",x,y+=h);
+        g.drawString("Bangle.js",x,y+=h);}
+    ],400);
+  }
+}
+
+var sceneNumber = 0;
+
+function move(dir) {
+  if (dir>0 && sceneNumber+1 == SCENE_COUNT) return; // at the end
+  sceneNumber = (sceneNumber+dir)%SCENE_COUNT;
+  if (sceneNumber<0) sceneNumber=0;
+  clearInterval();
+  getScene(sceneNumber)();
+  if (sceneNumber>1) {
+    var l = SCENE_COUNT;
+    for (var i=0;i move(dir));
+setWatch(()=>{
+  if (sceneNumber == SCENE_COUNT-1)
+    load();
+  else
+    move(1);
+}, BTN1, {repeat:true});
+
+Bangle.setLCDTimeout(0);
+Bangle.setLCDPower(1);
+move(0);
diff --git a/apps/welcome/screenshot_welcome.png b/apps/welcome/screenshot_welcome.png
new file mode 100644
index 000000000..4c574839d
Binary files /dev/null and b/apps/welcome/screenshot_welcome.png differ
diff --git a/apps/welcome/settings.js b/apps/welcome/settings.js
index f269f238e..27a322c7f 100644
--- a/apps/welcome/settings.js
+++ b/apps/welcome/settings.js
@@ -11,7 +11,8 @@
     'Run Now': () => load('welcome.app.js'),
     'Turn off & run next': () => {
       require('Storage').write('welcome.json', {welcomed: false});
-      Bangle.off();
+      Bangle.setLocked(true); // fix for pre-2v11 firmware that can accidentally leave touchscreen on
+      if (Bangle.softOff()) Bangle.softOff(); else Bangle.off();
     },
     '< Back': back,
   })
diff --git a/apps/wid_a_battery_widget/ChangeLog b/apps/wid_a_battery_widget/ChangeLog
new file mode 100644
index 000000000..9b0649c27
--- /dev/null
+++ b/apps/wid_a_battery_widget/ChangeLog
@@ -0,0 +1,2 @@
+1.00: Release for Bangle 2 (2021/11/18)
+1.01: Internal id update to wid_* as per Gordon's request (2021/11/21)
diff --git a/apps/wid_a_battery_widget/README.md b/apps/wid_a_battery_widget/README.md
new file mode 100644
index 000000000..534931dd2
--- /dev/null
+++ b/apps/wid_a_battery_widget/README.md
@@ -0,0 +1,14 @@
+# A Battery Widget (with percentage)
+
+Show the current battery level and charging status in the top right of the clock, with charge percentage
+
+* Works with Bangle 2
+* Simple design, no settings
+  *  Red when the batterly level is below 30%
+  *  Blue when charging
+*  40 pixels wide
+
+![](a_battery_widget-pic.jpg)
+
+## Creator
+[@alainsaas](https://github.com/alainsaas)
diff --git a/apps/wid_a_battery_widget/a_battery_widget-pic.jpg b/apps/wid_a_battery_widget/a_battery_widget-pic.jpg
new file mode 100644
index 000000000..9d9a4decc
Binary files /dev/null and b/apps/wid_a_battery_widget/a_battery_widget-pic.jpg differ
diff --git a/apps/wid_a_battery_widget/widget.js b/apps/wid_a_battery_widget/widget.js
new file mode 100644
index 000000000..9fb06e320
--- /dev/null
+++ b/apps/wid_a_battery_widget/widget.js
@@ -0,0 +1,45 @@
+(function(){
+  let COLORS = {
+    'white':    "#fff",
+    'black':    "#000",
+    'charging': "#08f",
+    'high':     "#000",
+    'low':      "#f00",
+  };
+
+  const levelColor = (l) => {
+    if (Bangle.isCharging()) return COLORS.charging;
+    if (l >= 30) return COLORS.high;
+    return COLORS.low;
+  };
+
+  function draw() {
+    var s = 29;
+    var x = this.x, y = this.y;
+
+    const l = E.getBattery();
+
+    let xl = x+4+l*(s-12)/100;
+
+    g.setColor(COLORS.white);
+    g.fillRect(x+2,y+5,x+s-6,y+18);
+
+    g.setColor(levelColor(l));
+    g.fillRect(x+1,y+3,x+s-5,y+4);
+    g.fillRect(x+1,y+19,x+s-5,y+20);
+    g.fillRect(x,y+4,x+1,y+19);
+    g.fillRect(x+s-5,y+4,x+s-4,y+19);
+    g.fillRect(x+s-3,y+8,x+s-2,y+16); // tip of the battery
+    g.fillRect(x+4,y+15,xl,y+16); // charging bar
+
+    g.setColor(COLORS.black);
+    g.setFontAlign(0,0);
+    g.setFont('6x8');
+    g.drawString(l, x + 14, y + 10);
+  }
+
+  Bangle.on('charging',function(charging) { draw(); });
+  setInterval(()=>WIDGETS["wid_a_battery_widget"].draw(), 60000);
+
+  WIDGETS["wid_a_battery_widget"]={area:"tr",width:30,draw:draw};
+})();
diff --git a/apps/wid_a_battery_widget/widget.png b/apps/wid_a_battery_widget/widget.png
new file mode 100644
index 000000000..868628b60
Binary files /dev/null and b/apps/wid_a_battery_widget/widget.png differ
diff --git a/apps/widbat/ChangeLog b/apps/widbat/ChangeLog
index a5fdc31cc..5986ecf3f 100644
--- a/apps/widbat/ChangeLog
+++ b/apps/widbat/ChangeLog
@@ -5,3 +5,4 @@
 0.06: Use 'g.theme' (requires bootloader 0.23)
 0.07: Move CHARGING variable to more readable string
 0.08: Ensure battery updates every 60s even if LCD was on at boot and stays on
+0.09: Misc speed/memory tweaks
diff --git a/apps/widbat/widget.js b/apps/widbat/widget.js
index 739326df0..a8a0c5382 100644
--- a/apps/widbat/widget.js
+++ b/apps/widbat/widget.js
@@ -1,26 +1,11 @@
 (function(){
-
   function setWidth() {
     WIDGETS["bat"].width = 40 + (Bangle.isCharging()?16:0);
   }
-  function draw() {
-    var s = 39;
-    var x = this.x, y = this.y;
-    g.reset();
-    if (Bangle.isCharging()) {
-      g.setColor("#0f0").drawImage(atob("DhgBHOBzgc4HOP////////////////////3/4HgB4AeAHgB4AeAHgB4AeAHg"),x,y);
-      x+=16;
-    }
-    g.setColor(g.theme.fg);
-    g.fillRect(x,y+2,x+s-4,y+21);
-    g.clearRect(x+2,y+4,x+s-6,y+19);
-    g.fillRect(x+s-3,y+10,x+s,y+14);
-    g.setColor("#0f0").fillRect(x+4,y+6,x+4+E.getBattery()*(s-12)/100,y+17);
-  }
   Bangle.on('charging',function(charging) {
     if(charging) Bangle.buzz();
     setWidth();
-    Bangle.drawWidgets(); // relayout widgets
+    Bangle.drawWidgets(); // re-layout widgets
     g.flip();
   });
   var batteryInterval = Bangle.isLCDOn() ? setInterval(()=>WIDGETS["bat"].draw(), 60000) : undefined;
@@ -37,6 +22,16 @@
       }
     }
   });
-  WIDGETS["bat"]={area:"tr",width:40,draw:draw};
+  WIDGETS["bat"]={area:"tr",width:40,draw:function() {
+    var s = 39;
+    var x = this.x, y = this.y;
+    g.reset();
+    if (Bangle.isCharging()) {
+      g.setColor("#0f0").drawImage(atob("DhgBHOBzgc4HOP////////////////////3/4HgB4AeAHgB4AeAHgB4AeAHg"),x,y);
+      x+=16;
+    }
+    g.setColor(g.theme.fg).fillRect(x,y+2,x+s-4,y+21).clearRect(x+2,y+4,x+s-6,y+19).fillRect(x+s-3,y+10,x+s,y+14);
+    g.setColor("#0f0").fillRect(x+4,y+6,x+4+E.getBattery()*(s-12)/100,y+17);
+  }};
   setWidth();
 })()
diff --git a/apps/widbat/widget.png b/apps/widbat/widget.png
index 630692e38..4f7491ee9 100644
Binary files a/apps/widbat/widget.png and b/apps/widbat/widget.png differ
diff --git a/apps/widbatpc/ChangeLog b/apps/widbatpc/ChangeLog
index a8851b1d8..09e4fabf4 100644
--- a/apps/widbatpc/ChangeLog
+++ b/apps/widbatpc/ChangeLog
@@ -8,3 +8,5 @@
 0.09: Fix regression stopping correct widget updates
 0.10: Add 'hide if charge greater than'
 0.11: Don't overwrite existing settings on app update
+0.12: Fixed for Bangle 2
+0.13: Fillbar setting added, see README
diff --git a/apps/widbatpc/README.md b/apps/widbatpc/README.md
new file mode 100644
index 000000000..c75154f72
--- /dev/null
+++ b/apps/widbatpc/README.md
@@ -0,0 +1,16 @@
+# Battery Widget
+
+Show the current battery level and charging status in the top right of the clock, with charge percentage
+        
+Works with Bangle 1 and Bangle 2
+
+When the fillbar setting is on the level colour will fill the entire
+bar.  This makes for an easier to read dsiplay when the charge is
+below 50%.
+
+![](widbatpc.full.jpg)
+
+When the fillbar setting is off the level colour will follow the battry percentage
+
+![](widbatpc.part.jpg)
+
diff --git a/apps/widbatpc/settings.js b/apps/widbatpc/settings.js
index 009fa4994..b7a5db9e6 100644
--- a/apps/widbatpc/settings.js
+++ b/apps/widbatpc/settings.js
@@ -10,6 +10,7 @@
   let s = {
     'color': COLORS[0],
     'percentage': true,
+    'fillbar': false,
     'charger': true,
     'hideifmorethan': 100,
   }
@@ -54,6 +55,11 @@
         save('color')(s.color)
       }
     },
+    'Fill Bar': {
+      value: s.fillbar,
+      format: onOffFormat,
+      onchange: save('fillbar'),
+    },
     'Hide if >': {
       value: s.hideifmorethan||100,
       min: 10,
diff --git a/apps/widbatpc/widbatpc.full.jpg b/apps/widbatpc/widbatpc.full.jpg
new file mode 100644
index 000000000..3df2184fe
Binary files /dev/null and b/apps/widbatpc/widbatpc.full.jpg differ
diff --git a/apps/widbatpc/widbatpc.part.jpg b/apps/widbatpc/widbatpc.part.jpg
new file mode 100644
index 000000000..d59276e22
Binary files /dev/null and b/apps/widbatpc/widbatpc.part.jpg differ
diff --git a/apps/widbatpc/widget.js b/apps/widbatpc/widget.js
index 9bf43cfaa..caecf8ae4 100644
--- a/apps/widbatpc/widget.js
+++ b/apps/widbatpc/widget.js
@@ -1,10 +1,23 @@
 (function(){
-  const COLORS = {
-    'white': -1,
-    'charging': 0x07E0, // "Green"
-    'high':  0x05E0, // slightly darker green
-    'ok': 0xFD20, // "Orange"
-    'low':0xF800, // "Red"
+  let COLORS = {};
+  
+  if (process.env.HWVERSION == 1) {
+    COLORS = {
+      'white':    -1,     // White
+      'charging': 0x07E0, // Green
+      'high':     0x05E0, // lightly darker green
+      'ok':       0xFD20, // Orange
+      'low':      0xF800, // Red
+    };
+  } else {
+    // bangle 2 is only 7 bit colors
+    COLORS = {
+      'white':    "#fff", // White
+      'charging': "#0f0", // Green
+      'high':     "#0f0", // Green
+      'ok':       "#ff0", // Orange
+      'low':      "#f00", // Red
+    };   
   }
   const SETTINGS_FILE = 'widbatpc.json'
 
@@ -66,29 +79,33 @@
     // else...
     var s = 39;
     var x = this.x, y = this.y;
-    const l = E.getBattery(),
-      c = levelColor(l);
-    const xl = x+4+l*(s-12)/100
+    const l = E.getBattery();
+    let xl = x+4+l*(s-12)/100;
 
+    // show bar full in the level color, as you cant see the color if the bar is too small
+    if (setting('fillbar'))
+      xl = x+4+100*(s-12)/100;
+    
+    c = levelColor(l);
+    
     if (Bangle.isCharging() && setting('charger')) {
       g.setColor(chargerColor()).drawImage(atob(
         "DhgBHOBzgc4HOP////////////////////3/4HgB4AeAHgB4AeAHgB4AeAHg"),x,y);
       x+=16;
     }
-    g.setColor(-1);
+    g.setColor(g.theme.fg);
     g.fillRect(x,y+2,x+s-4,y+21);
     g.clearRect(x+2,y+4,x+s-6,y+19);
     g.fillRect(x+s-3,y+10,x+s,y+14);
-
     g.setColor(c).fillRect(x+4,y+6,xl,y+17);
-    g.setColor(-1);
+    g.setColor(g.theme.fg);
     if (!setting('percentage')) {
       return;
     }
     let gfx = g
     if (setting('color') === 'Monochrome') {
     // draw text inverted on battery level
-      gfx = Graphics.createCallback(240, 240, 1,
+      gfx = Graphics.createCallback(g.getWidth(),g.getHeight(), 1,
         (x,y) => {g.setPixel(x,y,x<=xl?0:-1)})
     }
     gfx.setFontAlign(-1,-1);
diff --git a/apps/widbatv/ChangeLog b/apps/widbatv/ChangeLog
new file mode 100644
index 000000000..55cda0f21
--- /dev/null
+++ b/apps/widbatv/ChangeLog
@@ -0,0 +1 @@
+0.01: New widget
diff --git a/apps/widbatv/widget.js b/apps/widbatv/widget.js
new file mode 100644
index 000000000..cc52a0f8e
--- /dev/null
+++ b/apps/widbatv/widget.js
@@ -0,0 +1,19 @@
+Bangle.on('charging',function(charging) {
+  if(charging) Bangle.buzz();
+  WIDGETS["batv"].draw();
+});
+setInterval(()=>WIDGETS["batv"].draw(), 60000);
+Bangle.on('lcdPower', function(on) {
+  if (on) WIDGETS["batv"].draw(); // refresh at power on
+});
+WIDGETS["batv"]={area:"tr",width:14,draw:function() {
+  var x = this.x, y = this.y;
+  g.reset();
+  if (Bangle.isCharging()) {
+    g.setColor("#0f0").drawImage(atob("DhgBHOBzgc4HOP////////////////////3/4HgB4AeAHgB4AeAHgB4AeAHg"),x,y);
+  } else {
+    g.clearRect(x,y,x+14,y+24);
+    g.setColor(g.theme.fg).fillRect(x+2,y+2,x+12,y+22).clearRect(x+4,y+4,x+10,y+20).fillRect(x+5,y+1,x+9,y+2);
+    g.setColor("#0f0").fillRect(x+4,y+20-(E.getBattery()*16/100),x+10,y+20);
+  }
+}};
diff --git a/apps/widbatv/widget.png b/apps/widbatv/widget.png
new file mode 100644
index 000000000..e31704d7b
Binary files /dev/null and b/apps/widbatv/widget.png differ
diff --git a/apps/widbt/ChangeLog b/apps/widbt/ChangeLog
index e639f4044..7aa96ce5c 100644
--- a/apps/widbt/ChangeLog
+++ b/apps/widbt/ChangeLog
@@ -2,3 +2,5 @@
 0.03: Ensure redrawing works with variable size widget system
 0.04: Fix automatic update of Bluetooth connection status
 0.05: Make Bluetooth widget thinner, and when on a bright theme use light grey for disabled color
+0.06: Tweaking colors for dark/light themes and low bpp screens
+0.07: Memory usage improvements
diff --git a/apps/widbt/widget.js b/apps/widbt/widget.js
index 89a3cbdb8..88be3d5c9 100644
--- a/apps/widbt/widget.js
+++ b/apps/widbt/widget.js
@@ -1,17 +1,13 @@
-(function(){
-  function draw() {
-    g.reset();
-    if (NRF.getSecurityStatus().connected)
-      g.setColor("#07f");
-    else
-      g.setColor(g.theme.bg ? "#AAA" : "#555");
-    g.drawImage(atob("CxQBBgDgFgJgR4jZMawfAcA4D4NYybEYIwTAsBwDAA=="),2+this.x,2+this.y);
-  }
-  function changed() {
-    WIDGETS["bluetooth"].draw();
-    g.flip();// turns screen on
-  }
-  NRF.on('connect',changed);
-  NRF.on('disconnect',changed);
-  WIDGETS["bluetooth"]={area:"tr",width:15,draw:draw};
-})()
+WIDGETS["bluetooth"]={area:"tr",width:15,draw:function() {
+  g.reset();
+  if (NRF.getSecurityStatus().connected)
+    g.setColor((g.getBPP()>8) ? "#07f" : (g.theme.dark ? "#0ff" : "#00f"));
+  else
+    g.setColor(g.theme.dark ? "#666" : "#999");
+  g.drawImage(atob("CxQBBgDgFgJgR4jZMawfAcA4D4NYybEYIwTAsBwDAA=="),2+this.x,2+this.y);
+},changed:function() {
+  WIDGETS["bluetooth"].draw();
+  Bangle.setLCDPower(1); // turn screen on
+}};
+NRF.on('connect',WIDGETS["bluetooth"].changed);
+NRF.on('disconnect',WIDGETS["bluetooth"].changed);
diff --git a/apps/widclk/ChangeLog b/apps/widclk/ChangeLog
index 655679515..c74857ab4 100644
--- a/apps/widclk/ChangeLog
+++ b/apps/widclk/ChangeLog
@@ -2,3 +2,4 @@
 0.03: Ensure redrawing works with variable size widget system
 0.04: Fix regression stopping correct widget updates
 0.05: Don't show clock widget if already showing clock app
+0.06: Use 7 segment font, update *on* the minute, use less memory
diff --git a/apps/widclk/widget.js b/apps/widclk/widget.js
index cd4b29367..9e035ca9a 100644
--- a/apps/widclk/widget.js
+++ b/apps/widclk/widget.js
@@ -1,30 +1,16 @@
-(function() {
-  // don't show widget if we know we have a clock app running
-  if (Bangle.CLOCK) return;
+/* Simple clock that appears in the widget bar if no other clock
+is running. We update once per minute, but don't bother stopping
+if the */
 
-  let intervalRef = null;
-  var width = 5 * 6*2
-
-  function draw() {
-    g.reset().setFont("6x8", 2).setFontAlign(-1, 0);
-    var time = require("locale").time(new Date(),1);
-    g.drawString(time, this.x, this.y+11, true); // 5 * 6*2 = 60
-  }
-  function clearTimers(){
-    if(intervalRef) {
-      clearInterval(intervalRef);
-      intervalRef = null;
-    }
-  }
-  function startTimers(){
-    intervalRef = setInterval(()=>WIDGETS["wdclk"].draw(), 60*1000);
-    WIDGETS["wdclk"].draw();
-  }
-  Bangle.on('lcdPower', (on) => {
-    clearTimers();
-    if (on) startTimers();
-  });
-
-  WIDGETS["wdclk"]={area:"tr",width:width,draw:draw};
-  if (Bangle.isLCDOn) intervalRef = setInterval(()=>WIDGETS["wdclk"].draw(), 60*1000);
-})()
+// don't show widget if we know we have a clock app running
+if (!Bangle.CLOCK) WIDGETS["wdclk"]={area:"tl",width:52/* g.stringWidth("00:00") */,draw:function() {
+  g.reset().setFontCustom(atob("AAAAAAAAAAIAAAQCAQAAAd0BgMBdwAAAAAAAdwAB0RiMRcAAAERiMRdwAcAQCAQdwAcERiMRBwAd0RiMRBwAAEAgEAdwAd0RiMRdwAcERiMRdwAFAAd0QiEQdwAdwRCIRBwAd0BgMBAAABwRCIRdwAd0RiMRAAAd0QiEQAAAAAAAAAA="), 32, atob("BgAAAAAAAAAAAAAAAAYCAAYGBgYGBgYGBgYCAAAAAAAABgYGBgYG"), 512+9);
+  var time = require("locale").time(new Date(),1);
+  g.drawString(time, this.x, this.y+3, true); // 5 * 6*2 = 60
+  // queue draw in one minute
+  if (this.drawTimeout) clearTimeout(this.drawTimeout);
+  this.drawTimeout = setTimeout(()=>{
+    this.drawTimeout = undefined;
+    this.draw();
+  }, 60000 - (Date.now() % 60000));
+}};
diff --git a/apps/widcom/ChangeLog b/apps/widcom/ChangeLog
new file mode 100644
index 000000000..5d08e91e6
--- /dev/null
+++ b/apps/widcom/ChangeLog
@@ -0,0 +1,3 @@
+0.02: Works with light theme
+      Doesn't drain battery by updating every 2 secs
+      Fix alignment
diff --git a/apps/widcom/widget.js b/apps/widcom/widget.js
index b9c911dbf..bce9453c5 100644
--- a/apps/widcom/widget.js
+++ b/apps/widcom/widget.js
@@ -1,30 +1,17 @@
 (function(){
-  //var img = E.toArrayBuffer(atob("FBSBAAAAAAAAA/wAf+AP/wH/2D/zw/w8PwfD9nw+b8Pg/Dw/w8/8G/+A//AH/gA/wAAAAAAA"));
-  //var img = E.toArrayBuffer(atob("GBiBAAB+AAP/wAeB4A4AcBgAGDAADHAADmABhmAHhsAfA8A/A8BmA8BmA8D8A8D4A2HgBmGABnAADjAADBgAGA4AcAeB4AP/wAB+AA=="));
-  var img = E.toArrayBuffer(atob("FBSBAAH4AH/gHAODgBwwAMYABkAMLAPDwPg8CYPBkDwfA8PANDACYABjAAw4AcHAOAf+AB+A"));        
-  
-  function draw() {
+  var cp = Bangle.setCompassPower;
+  Bangle.setCompassPower = () => {
+    cp.apply(Bangle, arguments);
+    WIDGETS.compass.draw();
+  };
+
+  WIDGETS.compass={area:"tr",width:24,draw:function() {
     g.reset();
     if (Bangle.isCompassOn()) {
-      g.setColor(1,0.8,0);     // on = amber
+      g.setColor(g.theme.dark ? "#FC0" : "#F00");
     } else {
-      g.setColor(0.3,0.3,0.3); // off = grey
+      g.setColor(g.theme.dark ? "#333" : "#CCC");
     }
-    g.drawImage(img, 10+this.x, 2+this.var);
-  }
-
-  var timerInterval;
-  Bangle.on('lcdPower', function(on) {
-    if (on) {
-      WIDGETS.compass.draw();
-      if (!timerInterval) timerInterval = setInterval(()=>WIDGETS.compass.draw(), 2000);
-    } else {
-      if (timerInterval) {
-        clearInterval(timerInterval);
-        timerInterval = undefined;
-      }
-    }
-  });
-
-  WIDGETS.compass={area:"tr",width:24,draw:draw};
+    g.drawImage(atob("FBSBAAH4AH/gHAODgBwwAMYABkAMLAPDwPg8CYPBkDwfA8PANDACYABjAAw4AcHAOAf+AB+A"), 2+this.x, 2+this.var);
+  }};
 })();
diff --git a/apps/widgps/ChangeLog b/apps/widgps/ChangeLog
index d80e09912..57bb53bb7 100644
--- a/apps/widgps/ChangeLog
+++ b/apps/widgps/ChangeLog
@@ -1,2 +1,3 @@
 0.01: First version
 0.02: Don't break if running on 2v08 firmware (just don't display anything)
+0.03: Fix positioning
diff --git a/apps/widgps/widget.js b/apps/widgps/widget.js
index 19be2abaf..6ef55e27b 100644
--- a/apps/widgps/widget.js
+++ b/apps/widgps/widget.js
@@ -4,11 +4,11 @@
   function draw() {
     g.reset();
     if (Bangle.isGPSOn()) {
-      g.setColor(1,0.8,0);     // on = amber
+      g.setColor("#FD0");     // on = amber
     } else {
-      g.setColor(0.3,0.3,0.3); // off = grey
+      g.setColor("#888"); // off = grey
     }
-    g.drawImage(atob("GBiBAAAAAAAAAAAAAA//8B//+BgYGBgYGBgYGBgYGBgYGBgYGB//+B//+BgYGBgYGBgYGBgYGBgYGBgYGB//+A//8AAAAAAAAAAAAA=="), 10+this.x, 2+this.y);
+    g.drawImage(atob("GBiBAAAAAAAAAAAAAA//8B//+BgYGBgYGBgYGBgYGBgYGBgYGB//+B//+BgYGBgYGBgYGBgYGBgYGBgYGB//+A//8AAAAAAAAAAAAA=="), this.x, 2+this.y);
   }
 
   var timerInterval;
diff --git a/apps/widhrm/ChangeLog b/apps/widhrm/ChangeLog
index 45dcfa87e..93e2eaf66 100644
--- a/apps/widhrm/ChangeLog
+++ b/apps/widhrm/ChangeLog
@@ -2,3 +2,4 @@
 0.02: Tweaks for variable size widget system
 0.03: Ensure redrawing works with variable size widget system
 0.04: tag HRM power requests to allow this ot work alongside other widgets/apps (fix #799)
+0.05: Use new 'lock' event, not LCD (so it works on Bangle.js 2)
diff --git a/apps/widhrm/widget.js b/apps/widhrm/widget.js
index 54b105d1e..7ffe1aa6d 100644
--- a/apps/widhrm/widget.js
+++ b/apps/widhrm/widget.js
@@ -1,13 +1,38 @@
 (() => {
-  var currentBPM = undefined;
-  var lastBPM = undefined;
-  var firstBPM = true; // first reading since sensor turned on
+  if (!Bangle.isLocked) return; // old firmware
+  var currentBPM;
+  var lastBPM;
+  var isHRMOn = false;
 
-  function draw() {
+  // turn on sensor when the LCD is unlocked
+  Bangle.on('lock', function(isLocked) {
+    if (!isLocked) {
+      Bangle.setHRMPower(1,"widhrm");
+      currentBPM = undefined;
+      WIDGETS["hrm"].draw();
+    } else {
+      Bangle.setHRMPower(0,"widhrm");
+    }
+  });
+
+  var hp = Bangle.setHRMPower;
+  Bangle.setHRMPower = () => {
+    hp.apply(Bangle, arguments);
+    isHRMOn = Bangle.isHRMOn();
+    WIDGETS["hrm"].draw();
+  };
+
+  Bangle.on('HRM',function(d) {
+    currentBPM = d.bpm;
+    lastBPM = currentBPM;
+    WIDGETS["hrm"].draw();
+  });
+
+  // add your widget
+  WIDGETS["hrm"]={area:"tl",width:24,draw:function() {
     var width = 24;
     g.reset();
-    g.setFont("6x8", 1);
-    g.setFontAlign(0, 0);
+    g.setFont("6x8", 1).setFontAlign(0, 0);
     g.clearRect(this.x,this.y+15,this.x+width,this.y+23); // erase background
     var bpm = currentBPM, isCurrent = true;
     if (bpm===undefined) {
@@ -16,36 +41,12 @@
     }
     if (bpm===undefined)
       bpm = "--";
-    g.setColor(isCurrent ? "#ffffff" : "#808080");
+    g.setColor(isCurrent ? g.theme.fg : "#808080");
     g.drawString(bpm, this.x+width/2, this.y+19);
-    g.setColor(isCurrent ? "#ff0033" : "#808080");
+    g.setColor(isHRMOn ? "#ff0033" : "#808080");
     g.drawImage(atob("CgoCAAABpaQ//9v//r//5//9L//A/+AC+AAFAA=="),this.x+(width-10)/2,this.y+1);
     g.setColor(-1);
-  }
+  }};
 
-  // redraw when the LCD turns on
-  Bangle.on('lcdPower', function(on) {
-    if (on) {
-      Bangle.setHRMPower(1,"widhrm");
-      firstBPM = true;
-      currentBPM = undefined;
-      WIDGETS["hrm"].draw();
-    } else {
-      Bangle.setHRMPower(0,"widhrm");
-    }
-  });
-
-  Bangle.on('HRM',function(d) {
-    if (firstBPM)
-      firstBPM=false; // ignore the first one as it's usually rubbish
-    else {
-      currentBPM = d.bpm;
-      lastBPM = currentBPM;
-    }
-    WIDGETS["hrm"].draw();
-  });
-  Bangle.setHRMPower(Bangle.isLCDOn(),"widhrm");
-
-  // add your widget
-  WIDGETS["hrm"]={area:"tl",width:24,draw:draw};
+  Bangle.setHRMPower(!Bangle.isLocked(),"widhrm");
 })();
diff --git a/apps/widhrt/ChangeLog b/apps/widhrt/ChangeLog
index fdb495797..39520ad6a 100644
--- a/apps/widhrt/ChangeLog
+++ b/apps/widhrt/ChangeLog
@@ -1,3 +1,5 @@
 0.01: First version
 0.02: Don't break if running on 2v08 firmware (just don't display anything)
-
+0.03: Works with light theme
+      Doesn't drain battery by updating every 2 secs
+      fix alignment
diff --git a/apps/widhrt/widget.js b/apps/widhrt/widget.js
index 8ac76def8..d9716fa24 100644
--- a/apps/widhrt/widget.js
+++ b/apps/widhrt/widget.js
@@ -1,28 +1,18 @@
 (function(){
   if (!Bangle.isHRMOn) return; // old firmware
+  var hp = Bangle.setHRMPower;
+  Bangle.setHRMPower = () => {
+    hp.apply(Bangle, arguments);
+    WIDGETS.widhrt.draw();
+  };
 
-  function draw() {
+  WIDGETS.widhrt={area:"tr",width:24,draw:function() {
     g.reset();
     if (Bangle.isHRMOn()) {
-      g.setColor(1,0,0);     // on = red
+      g.setColor("#f00");     // on = red
     } else {
-      g.setColor(0.3,0.3,0.3); // off = grey
+      g.setColor(g.theme.dark ? "#333" : "#CCC"); // off = grey
     }
-    g.drawImage(atob("FhaBAAAAAAAAAAAAAcDgD8/AYeGDAwMMDAwwADDAAMOABwYAGAwAwBgGADAwAGGAAMwAAeAAAwAAAAAAAAAAAAA="), 10+this.x, 2+this.y);
-  }
-
-  var timerInterval;
-  Bangle.on('lcdPower', function(on) {
-    if (on) {
-      WIDGETS.widhrt.draw();
-      if (!timerInterval) timerInterval = setInterval(()=>WIDGETS["widhrt"].draw(), 2000);
-    } else {
-      if (timerInterval) {
-        clearInterval(timerInterval);
-        timerInterval = undefined;
-      }
-    }
-  });
-
-  WIDGETS.widhrt={area:"tr",width:24,draw:draw};
+    g.drawImage(atob("FhaBAAAAAAAAAAAAAcDgD8/AYeGDAwMMDAwwADDAAMOABwYAGAwAwBgGADAwAGGAAMwAAeAAAwAAAAAAAAAAAAA="), 1+this.x, 1+this.y);
+  }};
 })();
diff --git a/apps/widid/ChangeLog b/apps/widid/ChangeLog
index 4152a8406..56f114d5f 100644
--- a/apps/widid/ChangeLog
+++ b/apps/widid/ChangeLog
@@ -1,2 +1,3 @@
 0.01: New Widget!
 0.02: Tweaks for variable size widget system
+0.03: Tweaking colors for dark/light themes
diff --git a/apps/widid/widget.js b/apps/widid/widget.js
index d4f4d6386..1c7a721bc 100644
--- a/apps/widid/widget.js
+++ b/apps/widid/widget.js
@@ -1,8 +1,7 @@
-/* jshint esversion: 6 */
 (() => {
   function draw() {
     var id = NRF.getAddress().substr().substr(12).split(":");
-    g.reset().setColor(0, 0.49, 1).setFont("6x8", 1);
+    g.reset().setColor(g.theme.dark ? "#0ff" : "#00f").setFont("6x8", 1);
     g.drawString(id[0], this.x+2, this.y+4, true);
     g.drawString(id[1], this.x+2, this.y+14, true);
   }
diff --git a/apps/widmp/ChangeLog b/apps/widmp/ChangeLog
index 5560f00bc..3996d9e74 100644
--- a/apps/widmp/ChangeLog
+++ b/apps/widmp/ChangeLog
@@ -1 +1,3 @@
 0.01: New App!
+0.02: Fix position and overdraw bugs
+      Better memory usage, theme support
diff --git a/apps/widmp/widget.js b/apps/widmp/widget.js
index cebdb60f5..d8abc3a9c 100644
--- a/apps/widmp/widget.js
+++ b/apps/widmp/widget.js
@@ -1,20 +1,6 @@
-/* jshint esversion: 6 */
-(() => {
-
-  const BLACK = 0, MOON = 0x41f, MC = 29.5305882, NM = 694039.09; 
-  var r = 12, mx = 0, my = 0;
-
-  var moon = {
-    0: () => { g.reset().setColor(BLACK).fillRect(mx - r, my - r, mx + r, my + r);},
-    1: () => { moon[0](); g.setColor(MOON).drawCircle(mx, my, r);},
-    2: () => { moon[3](); g.setColor(BLACK).fillEllipse(mx - r / 2, my - r, mx + r / 2, my + r);},
-    3: () => { moon[0](); g.setColor(MOON).fillCircle(mx, my, r).setColor(BLACK).fillRect(mx - r, my - r, mx, my + r);},
-    4: () => { moon[3](); g.setColor(MOON).fillEllipse(mx - r / 2, my - r, mx + r / 2, my + r);},
-    5: () => { moon[0](); g.setColor(MOON).fillCircle(mx, my, r);},
-    6: () => { moon[7](); g.setColor(MOON).fillEllipse(mx - r / 2, my - r, mx + r / 2, my + r);},
-    7: () => { moon[0](); g.setColor(MOON).fillCircle(mx, my, r).setColor(BLACK).fillRect(mx, my - r, mx + r + r, my + r);},
-    8: () => { moon[7](); g.setColor(BLACK).fillEllipse(mx - r / 2, my - r, mx + r / 2, my + r);}
-  };
+WIDGETS["widmoon"] = { area: "tr", width: 24, draw: function() {
+  const MC = 29.5305882, NM = 694039.09; 
+  var r = 11, mx = this.x + 12; my = this.y + 12;
 
   function moonPhase(d) {
     var tmp, month = d.getMonth(), year = d.getFullYear(), day = d.getDate();
@@ -23,11 +9,18 @@
     return Math.round(((tmp - (tmp | 0)) * 7)+1);
   }
 
-  function draw() {
-    mx = this.x; my = this.y + 12;
-    moon[moonPhase(Date())]();
-  }
+  const BLACK = g.theme.bg, MOON = 0x41f;
+  var moon = {
+    0: () => { g.reset().setColor(BLACK).fillRect(mx - r, my - r, mx + r, my + r);},
+    1: () => { moon[0](); g.setColor(MOON).drawCircle(mx, my, r);},
+    2: () => { moon[3](); g.setColor(BLACK).fillEllipse(mx - r / 2, my - r, mx + r / 2, my + r);},
+    3: () => { moon[0](); g.setColor(MOON).fillCircle(mx, my, r).setColor(BLACK).fillRect(mx - r, my - r, mx, my + r);},
+    4: () => { moon[3](); g.setColor(MOON).fillEllipse(mx - r / 2, my - r, mx + r / 2, my + r);},
+    5: () => { moon[0](); g.setColor(MOON).fillCircle(mx, my, r);},
+    6: () => { moon[7](); g.setColor(MOON).fillEllipse(mx - r / 2, my - r, mx + r / 2, my + r);},
+    7: () => { moon[0](); g.setColor(MOON).fillCircle(mx, my, r).setColor(BLACK).fillRect(mx, my - r, mx + r, my + r);},
+    8: () => { moon[7](); g.setColor(BLACK).fillEllipse(mx - r / 2, my - r, mx + r / 2, my + r);}
+  };
+  moon[moonPhase(Date())]();
+} };
 
-  WIDGETS["widmoon"] = { area: "tr", width: 24, draw: draw };
-
-})();
diff --git a/apps/widpedom/ChangeLog b/apps/widpedom/ChangeLog
index a5ed0eeb2..2f36c7647 100644
--- a/apps/widpedom/ChangeLog
+++ b/apps/widpedom/ChangeLog
@@ -14,3 +14,8 @@
 0.15: Settings option to hide the widget icon
 0.16: Settings option to show large digits in widget area
 0.17: Cope with 2v10+ firmware sometimes reporting >1 step
+0.18: Adjust widget width when displaying large text
+0.19: Allow goal in large font mode
+      Stop goal drawing outside widget area
+      Fix issue with widget overwrite in large font mode
+      Memory usage enhancements
diff --git a/apps/widpedom/settings.js b/apps/widpedom/settings.js
index 754b636c9..4455ce7d7 100644
--- a/apps/widpedom/settings.js
+++ b/apps/widpedom/settings.js
@@ -32,7 +32,7 @@
       onchange: (g) => {
         s.goal = g
         s.progress = !!g
-        save()
+        save();
       },
     },
     'Show Progress': {
@@ -40,7 +40,7 @@
       format: () => (s.progress ? 'Yes' : 'No'),
       onchange: () => {
         s.progress = !s.progress
-        save()
+        save();
       },
     },
     'Large Digits': {
@@ -48,7 +48,7 @@
       format: () => (s.large ? 'Yes' : 'No'),
       onchange: () => {
         s.large = !s.large
-        save()
+        save();
       },
     },
     'Hide Widget': {
@@ -56,7 +56,7 @@
       format: () => (s.hide ? 'Yes' : 'No'),
       onchange: () => {
         s.hide = !s.hide
-        save()
+        save();
       },
     },
     '< Back': back,
diff --git a/apps/widpedom/widget.js b/apps/widpedom/widget.js
index 975112e02..3c861cf54 100644
--- a/apps/widpedom/widget.js
+++ b/apps/widpedom/widget.js
@@ -23,78 +23,6 @@
     return (key in settings) ? settings[key] : DEFAULTS[key];
   }
 
-  function drawProgress(stps) {
-    if (setting('hide')) return;
-    const width = 24, half = width/2;
-    const goal = setting('goal'), left = Math.max(goal-stps,0);
-    const c = left ? "#00f" : "#090"; // blue or dark green
-    g.setColor(c).fillCircle(this.x + half, this.y + half, half);
-    const TAU = Math.PI*2;
-    if (left) {
-      const f = left/goal; // fraction to blank out
-      let p = [];
-      p.push(half,half);
-      p.push(half,0);
-      if(f>1/8) p.push(0,0);
-      if(f>2/8) p.push(0,half);
-      if(f>3/8) p.push(0,width);
-      if(f>4/8) p.push(half,width);
-      if(f>5/8) p.push(width,width);
-      if(f>6/8) p.push(width,half);
-      if(f>7/8) p.push(width,0);
-      p.push(half - Math.sin(f * TAU) * half);
-      p.push(half - Math.cos(f * TAU) * half);
-      for (let i = p.length; i; i -= 2) {
-        p[i - 2] += this.x;
-        p[i - 1] += this.y;
-      }
-      g.setColor(g.theme.bg).fillPoly(p);
-    }
-  }
-
-  // show the step count in the widget area in a readable sized font
-  function draw_large(st) {
-    var width = 12 * st.length;
-    g.reset();
-    g.clearRect(this.x, this.y, this.x + width, this.y + 16); // erase background
-    g.setColor(g.theme.fg);
-    g.setFont("6x8",2);
-    g.setFontAlign(-1, -1);
-    g.drawString(st, this.x + 4, this.y + 2);
-  }
-
-  // draw your widget
-  function draw() {
-    if (setting('hide')) return;
-    var width = 24;
-    if (stp_today > 99999){
-      stp_today = stp_today % 100000; // cap to five digits + comma = 6 characters
-    }
-    let stps = stp_today.toString();
-    if (setting('large')) {
-      draw_large.call(this, stps);
-      return;
-    }
-    g.reset().clearRect(this.x, this.y, this.x + width, this.y + 23); // erase background
-    if (setting('progress')){ drawProgress.call(this, stps); }
-    g.setColor(g.theme.fg);
-    if (stps.length > 3){
-      stps = stps.slice(0,-3) + "," + stps.slice(-3);
-      g.setFont("4x6", 1); // if big, shrink text to fix
-    } else {
-      g.setFont("6x8", 1);
-    }
-    g.setFontAlign(0, 0); // align to x: center, y: center
-    g.drawString(stps, this.x+width/2, this.y+19);
-    // on low bpp screens, draw 1 bit. Currently there is no getBPP so we just do it based on resolution
-    g.drawImage(atob("CgoCLguH9f2/7+v6/79f56CtAAAD9fw/n8Hx9A=="),this.x+(width-10)/2,this.y+2);
-  }
-
-  function reload() {
-    loadSettings()
-    draw()
-  }
-
   Bangle.on('step', stepCount => {
     var steps = stepCount-lastStepCount;
     if (lastStepCount===undefined || steps<0) steps=1;
@@ -115,11 +43,11 @@
     }
     lastUpdate = date
     //console.log("up: " + up + " stp: " + stp_today + " " + date.toString());
-    if (Bangle.isLCDOn()) WIDGETS["wpedom"].draw();
+    WIDGETS["wpedom"].redraw();
   });
   // redraw when the LCD turns on
   Bangle.on('lcdPower', function(on) {
-    if (on) WIDGETS["wpedom"].draw();
+    if (on) WIDGETS["wpedom"].redraw();
   });
   // When unloading, save state
   E.on('kill', () => {
@@ -134,10 +62,80 @@
 
   // add your widget
   WIDGETS["wpedom"]={area:"tl",width:26,
-         draw:draw,
-         reload:reload,
-         getSteps:()=>stp_today
-        };
+    redraw:function() { // work out the width, and queue a full redraw if needed
+      let stps = stp_today.toString();
+      let newWidth = 24;
+      if (setting('hide')) 
+        newWidth = 0;
+      else {
+        if (setting('large')) {
+          newWidth = 12 * stps.length + 3;
+          if (setting('progress'))
+            newWidth += 24;
+        }
+      }
+      if (newWidth!=this.width) {
+        // width has changed, re-layout all widgets
+        this.width = newWidth;
+        Bangle.drawWidgets();
+      } else {
+        // width not changed - just redraw
+        WIDGETS["wpedom"].draw();
+      }
+    },
+    draw:function() {
+      if (setting('hide')) return;
+      if (stp_today > 99999)
+        stp_today = stp_today % 100000; // cap to five digits + comma = 6 characters
+      let stps = stp_today.toString();
+      g.reset().clearRect(this.x, this.y, this.x + this.width, this.y + 23); // erase background
+      if (setting('progress')) { 
+        const width = 23, half = 11;
+        const goal = setting('goal'), left = Math.max(goal-stps,0);
+        // blue or dark green
+        g.setColor(left ? "#08f" : "#080").fillCircle(this.x + half, this.y + half, half);
+        if (left) {
+          const TAU = Math.PI*2;
+          const f = left/goal; // fraction to blank out
+          let p = [];
+          p.push(half,half);
+          p.push(half,0);
+          if(f>1/8) p.push(0,0);
+          if(f>2/8) p.push(0,half);
+          if(f>3/8) p.push(0,width);
+          if(f>4/8) p.push(half,width);
+          if(f>5/8) p.push(width,width);
+          if(f>6/8) p.push(width,half);
+          if(f>7/8) p.push(width,0);
+          p.push(half - Math.sin(f * TAU) * half);
+          p.push(half - Math.cos(f * TAU) * half);
+          g.setColor(g.theme.bg).fillPoly(g.transformVertices(p,{x:this.x,y:this.y}));
+        }
+        g.reset();
+      }
+      if (setting('large')) {
+        g.setFont("6x8",2);
+        g.setFontAlign(-1, 0);
+        g.drawString(stps, this.x + (setting('progress')?28:4), this.y + 12);
+      } else {
+        let w = 24;
+        if (stps.length > 3){
+          stps = stps.slice(0,-3) + "," + stps.slice(-3);
+          g.setFont("4x6", 1); // if big, shrink text to fix
+        } else {
+          g.setFont("6x8", 1);
+        }
+        g.setFontAlign(0, 0); // align to x: center, y: center
+        g.drawString(stps, this.x+w/2, this.y+19);
+        g.drawImage(atob("CgoCLguH9f2/7+v6/79f56CtAAAD9fw/n8Hx9A=="),this.x+(w-10)/2,this.y+2);
+      }
+    },
+    reload:function() {
+      loadSettings();
+      WIDGETS["wpedom"].redraw();
+    },
+    getSteps:()=>stp_today
+  };
   // Load data at startup
   let pedomData = require("Storage").readJSON(PEDOMFILE,1);
   if (pedomData) {
diff --git a/apps/widtbat/ChangeLog b/apps/widtbat/ChangeLog
index 4c21f3ace..37513808a 100644
--- a/apps/widtbat/ChangeLog
+++ b/apps/widtbat/ChangeLog
@@ -1 +1,2 @@
 0.01: New Widget!
+0.02: Theme support, memory savings
diff --git a/apps/widtbat/widget.js b/apps/widtbat/widget.js
index 6d5aded8b..c78653358 100644
--- a/apps/widtbat/widget.js
+++ b/apps/widtbat/widget.js
@@ -1,17 +1,11 @@
-/* jshint esversion: 6 */
-(() => {
-  const CBS = 0x41f, CBC = 0x07E0;
-  var xo = 6, xl = 22, yo = 9, h = 17;
-
-  function draw() {
-    g.reset().setColor(CBS).drawImage(require("heatshrink").decompress(atob("j0TwIHEv///kD////EfAYPwuEAgPB4EAg/HCgMfzgDBvwOC/IOC84ONDoUcFgc/AYOAHYRDE")), this.x + 1, this.y + 4);
-    g.setColor(0).fillRect(this.x + xo, this.y + yo, this.x + xl, this.y + h);
-    var cbc = (Bangle.isCharging()) ? CBC : CBS;
-    g.setColor(cbc).fillRect(this.x + xo, this.y + yo, this.x + (xl - xo) / 100 * E.getBattery() + xo, this.y + h);
-  }
-  Bangle.on('charging', function(charging) {
-    if (charging) Bangle.buzz();
-    Bangle.drawWidgets();
-  });
-  WIDGETS["widtbat"] = { area:"tr", width:32, draw: draw };
-})();
+Bangle.on('charging', function(charging) {
+  if (charging) Bangle.buzz();
+  WIDGETS["widtbat"].draw();
+});
+WIDGETS["widtbat"] = { area:"tr", width:32, draw: function() {
+  const xo = 6, xl = 22, yo = 9, h = 17;
+  g.reset().setColor("#08f").drawImage(require("heatshrink").decompress(atob("j0TwIHEv///kD////EfAYPwuEAgPB4EAg/HCgMfzgDBvwOC/IOC84ONDoUcFgc/AYOAHYRDE")), this.x + 1, this.y + 4);
+  g.clearRect(this.x + xo, this.y + yo, this.x + xl, this.y + h);
+  var cbc = (Bangle.isCharging()) ? "#0f0" : "#08f";
+  g.setColor(cbc).fillRect(this.x + xo, this.y + yo, this.x + (xl - xo) / 100 * E.getBattery() + xo, this.y + h);
+} };
diff --git a/apps/widtbat/widget.png b/apps/widtbat/widget.png
index 4294f0ca3..f2943bc52 100644
Binary files a/apps/widtbat/widget.png and b/apps/widtbat/widget.png differ
diff --git a/apps/widver/ChangeLog b/apps/widver/ChangeLog
index adb5b038a..06bf45fbd 100644
--- a/apps/widver/ChangeLog
+++ b/apps/widver/ChangeLog
@@ -1 +1,3 @@
 0.01: New Widget
+0.02: Display "Rel" (Release) instead of 'undefined' when there is no Build number.
+0.03: Add theme support, lower memory usage
diff --git a/apps/widver/widget.js b/apps/widver/widget.js
index 5da66444f..b6a8b7432 100644
--- a/apps/widver/widget.js
+++ b/apps/widver/widget.js
@@ -1,11 +1,9 @@
-/* jshint esversion: 6 */
-(() => {
-  var width = 28,
-    ver = process.env.VERSION.split('.');
-  function draw() {
-    g.reset().setColor(0, 0.5, 1).setFont("6x8", 1);
-    g.drawString(ver[0], this.x + 2, this.y + 4, true);
-    g.setFontAlign(0, -1, 0).drawString(ver[1], this.x + width / 2, this.y + 14, true);
-  }
-  WIDGETS["version"] = { area: "tr", width: width, draw: draw };
-})();
+WIDGETS["version"] = { area: "tr", width: 28, draw: function() {
+  var ver = process.env.VERSION.split('.');
+	// Example: if ver is 2v11 instead of 2v10.142 write "Rel" (Release) instead of Build number
+  if(typeof ver[1] === 'undefined') ver[1] = "Rel";
+
+  g.reset().setColor((g.getBPP()<8)?(g.theme.dark?"#0ff":"#00f"):"#08f").setFont("6x8");
+  g.drawString(ver[0], this.x + 2, this.y + 4, true);
+  g.setFontAlign(0, -1, 0).drawString(ver[1], this.x + this.width / 2, this.y + 14, true);
+} };
diff --git a/apps/wohrm/bangle1-workout-HRM-screenshot.png b/apps/wohrm/bangle1-workout-HRM-screenshot.png
new file mode 100644
index 000000000..3280f310d
Binary files /dev/null and b/apps/wohrm/bangle1-workout-HRM-screenshot.png differ
diff --git a/apps/worldclock/ChangeLog b/apps/worldclock/ChangeLog
index e922ef2a4..831dd3b5c 100644
--- a/apps/worldclock/ChangeLog
+++ b/apps/worldclock/ChangeLog
@@ -2,3 +2,5 @@
 0.02: Update custom.html for refactor; add README
 0.03: Update for larger secondary timezone display (#610)
 0.04: setUI, different screen sizes
+0.05: Now update *on* the minute rather than every 15 secs
+      Fix rendering of single extra timezone on Bangle.js 2
diff --git a/apps/worldclock/app.js b/apps/worldclock/app.js
index 84cb29874..2627e056c 100644
--- a/apps/worldclock/app.js
+++ b/apps/worldclock/app.js
@@ -1,5 +1,3 @@
-/* jshint esversion: 6 */
-
 const big = g.getWidth()>200;
 // Font for primary time and date
 const primaryTimeFontSize = big?6:5;
@@ -16,8 +14,13 @@ const xcol2 = g.getWidth() - xcol1;
 
 const font = "6x8";
 
+/* TODO: we could totally use 'Layout' here and
+avoid a whole bunch of hard-coded offsets */
+
+
 const xyCenter = g.getWidth() / 2;
 const yposTime = big ? 75 : 60;
+const yposTime2 = yposTime + (big ? 100 : 60);
 const yposDate = big ? 130 : 90;
 const yposWorld = big ? 170 : 120;
 
@@ -29,41 +32,52 @@ var offsets = require("Storage").readJSON("worldclock.settings.json") || [];
 // TESTING CODE
 // Used to test offset array values during development.
 // Uncomment to override secondary offsets value
-
-// const mockOffsets = {
-//   zeroOffsets: [],
-//   oneOffset: [["UTC", 0]],
-//   twoOffsets: [
-//     ["Tokyo", 9],
-//     ["UTC", 0],
-//   ],
-//   fourOffsets: [
-//     ["Tokyo", 9],
-//     ["UTC", 0],
-//     ["Denver", -7],
-//     ["Miami", -5],
-//   ],
-//   fiveOffsets: [
-//     ["Tokyo", 9],
-//     ["UTC", 0],
-//     ["Denver", -7],
-//     ["Chicago", -6],
-//     ["Miami", -5],
-//   ],
-// };
+/*
+const mockOffsets = {
+ zeroOffsets: [],
+ oneOffset: [["UTC", 0]],
+ twoOffsets: [
+   ["Tokyo", 9],
+   ["UTC", 0],
+ ],
+ fourOffsets: [
+   ["Tokyo", 9],
+   ["UTC", 0],
+   ["Denver", -7],
+   ["Miami", -5],
+ ],
+ fiveOffsets: [
+   ["Tokyo", 9],
+   ["UTC", 0],
+   ["Denver", -7],
+   ["Chicago", -6],
+   ["Miami", -5],
+   ],
+};*/
 
 // Uncomment one at a time to test various offsets array scenarios
-// offsets = mockOffsets.zeroOffsets; // should render nothing below primary time
-// offsets = mockOffsets.oneOffset; // should render larger in two rows
-// offsets = mockOffsets.twoOffsets; // should render two in columns
-// offsets = mockOffsets.fourOffsets; // should render in columns
-// offsets = mockOffsets.fiveOffsets; // should render first four in columns
+//offsets = mockOffsets.zeroOffsets; // should render nothing below primary time
+//offsets = mockOffsets.oneOffset; // should render larger in two rows
+//offsets = mockOffsets.twoOffsets; // should render two in columns
+//offsets = mockOffsets.fourOffsets; // should render in columns
+//offsets = mockOffsets.fiveOffsets; // should render first four in columns
 
 // END TESTING CODE
 
 // Check settings for what type our clock should be
 //var is12Hour = (require("Storage").readJSON("setting.json",1)||{})["12hour"];
-var secondInterval;
+
+// timeout used to update every minute
+var drawTimeout;
+
+// schedule a draw for the next minute
+function queueDraw() {
+  if (drawTimeout) clearTimeout(drawTimeout);
+  drawTimeout = setTimeout(function() {
+    drawTimeout = undefined;
+    draw();
+  }, 60000 - (Date.now() % 60000));
+}
 
 function doublenum(x) {
   return x < 10 ? "0" + x : "" + x;
@@ -73,7 +87,7 @@ function getCurrentTimeFromOffset(dt, offset) {
   return new Date(dt.getTime() + offset * 60 * 60 * 1000);
 }
 
-function drawSimpleClock() {
+function draw() {
   // get date
   var d = new Date();
   var da = d.toString().split(" ");
@@ -111,9 +125,9 @@ function drawSimpleClock() {
       // For a single secondary timezone, draw it bigger and drop time zone to second line
       const xOffset = 30;
       g.setFont(font, secondaryTimeFontSize);
-      g.drawString(`${hours}:${minutes}`, xyCenter, yposTime + 100, true);
+      g.drawString(`${hours}:${minutes}`, xyCenter, yposTime2, true);
       g.setFont(font, secondaryTimeZoneFontSize);
-      g.drawString(offset[OFFSET_TIME_ZONE], xyCenter, yposTime + 130, true);
+      g.drawString(offset[OFFSET_TIME_ZONE], xyCenter, yposTime2 + 30, true);
 
       // draw Day, name of month, Date
       g.setFont(font, secondaryTimeZoneFontSize);
@@ -132,6 +146,8 @@ function drawSimpleClock() {
       g.drawString(`${hours}:${minutes}`, xcol2, yposWorld + index * 15, true);
     }
   });
+
+  queueDraw();
 }
 
 // clean app screen
@@ -141,18 +157,15 @@ Bangle.setUI("clock");
 Bangle.loadWidgets();
 Bangle.drawWidgets();
 
-// refesh every 15 sec when screen is on
-Bangle.on("lcdPower", (on) => {
-  if (secondInterval) clearInterval(secondInterval);
-  secondInterval = undefined;
+// Stop updates when LCD is off, restart when on
+Bangle.on('lcdPower',on=>{
   if (on) {
-    secondInterval = setInterval(drawSimpleClock, 15e3);
-    drawSimpleClock(); // draw immediately
+    draw(); // draw immediately, queue redraw
+  } else { // stop draw timer
+    if (drawTimeout) clearTimeout(drawTimeout);
+    drawTimeout = undefined;
   }
 });
 
-// draw now and every 15 sec until display goes off
-drawSimpleClock();
-if (Bangle.isLCDOn()) {
-  secondInterval = setInterval(drawSimpleClock, 15e3);
-}
+// draw now
+draw();
diff --git a/apps/worldclock/screenshot_world.png b/apps/worldclock/screenshot_world.png
new file mode 100644
index 000000000..ebae637b7
Binary files /dev/null and b/apps/worldclock/screenshot_world.png differ
diff --git a/bin/create_app_supports_field.js b/bin/create_app_supports_field.js
new file mode 100644
index 000000000..d6aada357
--- /dev/null
+++ b/bin/create_app_supports_field.js
@@ -0,0 +1,99 @@
+#!/usr/bin/nodejs
+/* Quick hack to add proper 'supports' field to apps.json
+*/
+
+var fs = require("fs");
+
+var BASEDIR = __dirname+"/../";
+
+var appsFile, apps;
+try {
+  appsFile = fs.readFileSync(BASEDIR+"apps.json").toString();
+} catch (e) {
+  ERROR("apps.json not found");
+}
+try{
+  apps = JSON.parse(appsFile);
+} catch (e) {
+  console.log(e);
+  var m = e.toString().match(/in JSON at position (\d+)/);
+  if (m) {
+    var char = parseInt(m[1]);
+    console.log("===============================================");
+    console.log("LINE "+appsFile.substr(0,char).split("\n").length);
+    console.log("===============================================");
+    console.log(appsFile.substr(char-10, 20));
+    console.log("===============================================");
+  }
+  console.log(m);
+  ERROR("apps.json not valid JSON");
+
+}
+
+apps = apps.map((app,appIdx) => {
+  if (app.supports) return app; // already sorted
+  var tags = [];
+  if (app.tags) tags = app.tags.split(",").map(t=>t.trim());
+  var supportsB1 = true;
+  var supportsB2 = false;
+  if (tags.includes("b2")) {
+    tags = tags.filter(x=>x!="b2");
+    supportsB2 = true;
+  }
+  if (tags.includes("bno2")) {
+    tags = tags.filter(x=>x!="bno2");
+    supportsB2 = false;
+  }
+  if (tags.includes("bno1")) {
+    tags = tags.filter(x=>x!="bno1");
+    supportsB1 = false;
+  }
+  app.tags = tags.join(",");
+  app.supports = [];
+  if (supportsB1) app.supports.push("BANGLEJS");
+  if (supportsB2) app.supports.push("BANGLEJS2");
+  return app;
+});
+
+// search for screenshots
+apps = apps.map((app,appIdx) => {
+  if (app.screenshots) return app; // already sorted
+
+  var files = require("fs").readdirSync(__dirname+"/../apps/"+app.id);
+  var screenshots = files.filter(fn=>fn.startsWith("screenshot") && fn.endsWith(".png"));
+  if (screenshots.length)
+    app.screenshots = screenshots.map(fn => ({url:fn}));
+  return app;
+});
+
+var KEY_ORDER = [
+  "id","name","shortName","version","description","icon","screenshots","type","tags","supports",
+  "dependencies", "readme", "custom", "customConnect", "interface",
+  "allow_emulator", "storage", "data", "sortorder"
+];
+
+var JS = JSON.stringify;
+var json = "[\n  "+apps.map(app=>{
+  var keys = KEY_ORDER.filter(k=>k in app);
+  Object.keys(app).forEach(k=>{
+    if (!KEY_ORDER.includes(k))
+      throw new Error(`Key named ${k} not known!`);
+  });
+  //var keys = Object.keys(app); // don't re-order
+
+  return "{\n    "+keys.map(k=>{
+    var js = JS(app[k]);
+    if (k=="storage") {
+      if (app.storage.length)
+        js = "[\n      "+app.storage.map(s=>JS(s)).join(",\n      ")+"\n    ]";
+      else
+        js = "[]";
+    }
+    return JS(k)+": "+js;
+  }).join(",\n    ")+"\n  }";
+}).join(",\n  ")+"\n]\n";
+
+//console.log(json);
+
+console.log("new apps.json written");
+fs.writeFileSync(BASEDIR+"apps.json", json);
diff --git a/bin/firmwaremaker.js b/bin/firmwaremaker.js
index 4e22dd168..4bc2a70b2 100755
--- a/bin/firmwaremaker.js
+++ b/bin/firmwaremaker.js
@@ -12,6 +12,7 @@ var ROOTDIR = path.join(__dirname, '..');
 var APPDIR = ROOTDIR+'/apps';
 var APPJSON = ROOTDIR+'/apps.json';
 var OUTFILE = ROOTDIR+'/firmware.js';
+var DEVICE = "BANGLEJS";
 var APPS = [ // IDs of apps to install
   "boot","launch","mclock","setting",
   "about","alarm","widbat","widbt","welcome"
@@ -61,7 +62,8 @@ Promise.all(APPS.map(appid => {
   if (app===undefined) throw new Error(`App ${appid} not found`);
   return AppInfo.getFiles(app, {
     fileGetter : fileGetter,
-    settings : SETTINGS
+    settings : SETTINGS,
+    device : { id : DEVICE }
   }).then(files => {
     appfiles = appfiles.concat(files);
   });
diff --git a/bin/build_bangle2_c.js b/bin/firmwaremaker_c.js
similarity index 81%
rename from bin/build_bangle2_c.js
rename to bin/firmwaremaker_c.js
index 5b4464691..14ced9ef8 100755
--- a/bin/build_bangle2_c.js
+++ b/bin/firmwaremaker_c.js
@@ -11,16 +11,35 @@ var SETTINGS = {
   pretokenise : true
 };
 
+var DEVICE = process.argv[2];
+
 var path = require('path');
 var ROOTDIR = path.join(__dirname, '..');
 var APPDIR = ROOTDIR+'/apps';
 var APPJSON = ROOTDIR+'/apps.json';
-var OUTFILE = path.join(ROOTDIR, '../Espruino/libs/banglejs/banglejs2_storage_default.c');
-var APPS = [ // IDs of apps to install
-  "boot","launchb2","s7clk","setting",
-  "about","alarm","widlock","widbat","widbt"
-];
 var MINIFY = true;
+var OUTFILE, APPS;
+
+if (DEVICE=="BANGLEJS") {
+  var OUTFILE = path.join(ROOTDIR, '../Espruino/libs/banglejs/banglejs1_storage_default.c');
+  var APPS = [ // IDs of apps to install
+    "boot","launch","mclock","setting",
+    "about","alarm","widbat","widbt","welcome"
+  ];
+} else if (DEVICE=="BANGLEJS2") {
+  var OUTFILE = path.join(ROOTDIR, '../Espruino/libs/banglejs/banglejs2_storage_default.c');
+  var APPS = [ // IDs of apps to install
+    "boot","launch","antonclk","setting",
+    "about","alarm","health","widlock","widbat","widbt","widid","welcome"
+  ];
+} else {
+  console.log("USAGE:");
+  console.log("  bin/firmwaremaker_c.js BANGLEJS");
+  console.log("  bin/firmwaremaker_c.js BANGLEJS2");
+  process.exit(1);
+}
+console.log("Device = ",DEVICE);
+
 
 var fs = require("fs");
 global.Const = {
@@ -83,7 +102,13 @@ function fileGetter(url) {
       fs.writeFileSync(url, code);
     }
   }
-  return Promise.resolve(fs.readFileSync(url).toString("binary"));
+  var blob = fs.readFileSync(url);
+  var data;
+  if (url.endsWith(".js") || url.endsWith(".json"))
+    data = blob.toString(); // allow JS/etc to be written in UTF-8
+  else
+    data = blob.toString("binary")
+  return Promise.resolve(data);
 }
 
 // If file should be evaluated, try and do it...
@@ -113,7 +138,8 @@ Promise.all(APPS.map(appid => {
   if (app===undefined) throw new Error(`App ${appid} not found`);
   return AppInfo.getFiles(app, {
     fileGetter : fileGetter,
-    settings : SETTINGS
+    settings : SETTINGS,
+    device : { id : DEVICE }
   }).then(files => {
     appfiles = appfiles.concat(files);
   });
diff --git a/bin/sanitycheck.js b/bin/sanitycheck.js
index b98aa9ef3..ea45dc19b 100755
--- a/bin/sanitycheck.js
+++ b/bin/sanitycheck.js
@@ -50,11 +50,12 @@ try{
 }
 
 const APP_KEYS = [
-  'id', 'name', 'shortName', 'version', 'icon', 'description', 'tags', 'type',
-  'sortorder', 'readme', 'custom', 'customConnect', 'interface', 'storage', 'data', 'allow_emulator',
+  'id', 'name', 'shortName', 'version', 'icon', 'screenshots', 'description', 'tags', 'type',
+  'sortorder', 'readme', 'custom', 'customConnect', 'interface', 'storage', 'data',
+  'supports', 'allow_emulator',
   'dependencies'
 ];
-const STORAGE_KEYS = ['name', 'url', 'content', 'evaluate', 'noOverwite'];
+const STORAGE_KEYS = ['name', 'url', 'content', 'evaluate', 'noOverwite', 'supports'];
 const DATA_KEYS = ['name', 'wildcard', 'storageFile', 'url', 'content', 'evaluate'];
 const FORBIDDEN_FILE_NAME_CHARS = /[,;]/; // used as separators in appid.info
 const VALID_DUPLICATES = [ '.tfmodel', '.tfnames' ];
@@ -81,6 +82,14 @@ apps.forEach((app,appIdx) => {
   if (!app.name) ERROR(`App ${app.id} has no name`);
   var isApp = !app.type || app.type=="app";
   if (app.name.length>20 && !app.shortName && isApp) ERROR(`App ${app.id} has a long name, but no shortName`);
+  if (!Array.isArray(app.supports)) ERROR(`App ${app.id} has no 'supports' field or it's not an array`);
+  else {
+    app.supports.forEach(dev => {
+      if (!["BANGLEJS","BANGLEJS2"].includes(dev))
+        ERROR(`App ${app.id} has unknown device in 'supports' field - ${dev}`);
+    });
+  }
+
   if (!app.version) WARN(`App ${app.id} has no version`);
   else {
     if (!fs.existsSync(appDir+"ChangeLog")) {
@@ -98,6 +107,13 @@ apps.forEach((app,appIdx) => {
   if (!app.description) ERROR(`App ${app.id} has no description`);
   if (!app.icon) ERROR(`App ${app.id} has no icon`);
   if (!fs.existsSync(appDir+app.icon)) ERROR(`App ${app.id} icon doesn't exist`);
+  if (app.screenshots) {
+    if (!Array.isArray(app.screenshots)) ERROR(`App ${app.id} screenshots is not an array`);
+    app.screenshots.forEach(screenshot => {
+      if (!fs.existsSync(appDir+screenshot.url))
+        ERROR(`App ${app.id} screenshot file ${screenshot.url} not found`);
+    });
+  }
   if (app.readme && !fs.existsSync(appDir+app.readme)) ERROR(`App ${app.id} README file doesn't exist`);
   if (app.custom && !fs.existsSync(appDir+app.custom)) ERROR(`App ${app.id} custom HTML doesn't exist`);
   if (app.customConnect && !app.custom) ERROR(`App ${app.id} has customConnect but no customn HTML`);
@@ -105,8 +121,8 @@ apps.forEach((app,appIdx) => {
   if (app.dependencies) {
     if (("object"==typeof app.dependencies) && !Array.isArray(app.dependencies)) {
       Object.keys(app.dependencies).forEach(dependency => {
-        if (app.dependencies[dependency]!="type")
-          ERROR(`App ${app.id} 'dependencies' must all be tagged 'type' right now`);
+        if (!["type","app"].includes(app.dependencies[dependency]))
+          ERROR(`App ${app.id} 'dependencies' must all be tagged 'type' or 'app' right now`);
       });
     } else
       ERROR(`App ${app.id} 'dependencies' must be an object`);
@@ -117,7 +133,7 @@ apps.forEach((app,appIdx) => {
     if (isGlob(file.name)) ERROR(`App ${app.id} storage file ${file.name} contains wildcards`);
     let char = file.name.match(FORBIDDEN_FILE_NAME_CHARS)
     if (char) ERROR(`App ${app.id} storage file ${file.name} contains invalid character "${char[0]}"`)
-    if (fileNames.includes(file.name))
+    if (fileNames.includes(file.name) && !file.supports)  // assume that there aren't duplicates if 'supports' is set
       ERROR(`App ${app.id} file ${file.name} is a duplicate`);
     fileNames.push(file.name);
     allFiles.push({app: app.id, file: file.name});
@@ -126,6 +142,7 @@ apps.forEach((app,appIdx) => {
     var fileContents = "";
     if (file.content) fileContents = file.content;
     if (file.url) fileContents = fs.readFileSync(appDir+file.url).toString();
+    if (file.supports && !Array.isArray(file.supports)) ERROR(`App ${app.id} file ${file.name} supports field is not an array`);
     if (file.evaluate) {
       try {
         acorn.parse("("+fileContents+")");
@@ -156,7 +173,7 @@ apps.forEach((app,appIdx) => {
       }
     }
     for (const key in file) {
-      if (!STORAGE_KEYS.includes(key)) ERROR(`App ${app.id}'s ${file.name} has unknown key ${key}`);
+      if (!STORAGE_KEYS.includes(key)) ERROR(`App ${app.id} file ${file.name} has unknown key ${key}`);
     }
   });
   let dataNames = [];
@@ -192,6 +209,8 @@ apps.forEach((app,appIdx) => {
   // prefer "appid.json" over "appid.settings.json" (TODO: change to ERROR once all apps comply?)
   if (dataNames.includes(app.id+".settings.json") && !dataNames.includes(app.id+".json"))
     WARN(`App ${app.id} uses data file ${app.id+'.settings.json'} instead of ${app.id+'.json'}`)
+  else if (dataNames.includes(app.id+".settings.json"))
+    WARN(`App ${app.id} uses data file ${app.id+'.settings.json'}`)
   // settings files should be listed under data, not storage (TODO: change to ERROR once all apps comply?)
   if (fileNames.includes(app.id+".settings.json"))
     WARN(`App ${app.id} uses storage file ${app.id+'.settings.json'} instead of data file`)
diff --git a/bin/thumbnailer.js b/bin/thumbnailer.js
new file mode 100755
index 000000000..b6862741a
--- /dev/null
+++ b/bin/thumbnailer.js
@@ -0,0 +1,164 @@
+#!/usr/bin/node
+
+/*
+var EMULATOR = "banglejs2";
+var DEVICEID = "BANGLEJS2";
+*/
+var EMULATOR = "banglejs1";
+var DEVICEID = "BANGLEJS";
+
+var singleAppId;
+
+if (process.argv.length!=3 && process.argv.length!=2) {
+  console.log("USAGE:");
+  console.log("  bin/thumbnailer.js");
+  console.log("    - all thumbnails");
+  console.log("  bin/thumbnailer.js APP_ID");
+  console.log("    - just one app");
+  process.exit(1);
+}
+if (process.argv.length==3)
+  singleAppId = process.argv[2];
+
+if (!require("fs").existsSync(__dirname + "/../../EspruinoWebIDE")) {
+  console.log("You need to:");
+  console.log("  git clone https://github.com/espruino/EspruinoWebIDE");
+  console.log("At the same level as this project");
+  process.exit(1);
+}
+
+eval(require("fs").readFileSync(__dirname + "/../../EspruinoWebIDE/emu/emulator_"+EMULATOR+".js").toString());
+eval(require("fs").readFileSync(__dirname + "/../../EspruinoWebIDE/emu/emu_"+EMULATOR+".js").toString());
+eval(require("fs").readFileSync(__dirname + "/../../EspruinoWebIDE/emu/common.js").toString());
+
+var SETTINGS = {
+  pretokenise : true
+};
+var Const = {
+};
+module = undefined;
+eval(require("fs").readFileSync(__dirname + "/../core/lib/espruinotools.js").toString());
+eval(require("fs").readFileSync(__dirname + "/../core/js/utils.js").toString());
+eval(require("fs").readFileSync(__dirname + "/../core/js/appinfo.js").toString());
+var apps = JSON.parse(require("fs").readFileSync(__dirname+"/../apps.json"));
+
+/* we factory reset ONCE, get this, then we can use it to reset
+state quickly for each new app */
+var factoryFlashMemory = new Uint8Array(FLASH_SIZE);
+// Log of messages from app
+var appLog = "";
+// List of apps that errored
+var erroredApps = [];
+
+jsRXCallback = function() {};
+jsUpdateGfx = function() {};
+
+function ERROR(s) {
+  console.error(s);
+  process.exit(1);
+}
+
+function onConsoleOutput(txt) {
+  appLog += txt + "\n";
+}
+
+function getThumbnail(appId, imageFn) {
+  console.log("Thumbnail for "+appId);
+  var app = apps.find(a=>a.id==appId);
+  if (!app) ERROR(`App ${JSON.stringify(appId)} not found`);
+  if (app.custom) ERROR(`App ${JSON.stringify(appId)} requires HTML customisation`);
+
+
+  return new Promise(resolve => {
+    AppInfo.getFiles(app, {
+      fileGetter:function(url) {
+        console.log(__dirname+"/"+url);
+        return Promise.resolve(require("fs").readFileSync(__dirname+"/../"+url).toString("binary"));
+      },
+      settings : SETTINGS,
+      device : { id : DEVICEID }
+      }).then(files => {
+        console.log("AppInfo returned");//, files);
+        flashMemory.set(factoryFlashMemory);
+        jsTransmitString("reset()\n");
+        console.log("Uploading...");
+        jsTransmitString("g.clear()\n");
+        var command = files.map(f=>f.cmd).join("\n")+"\n";
+        command += `load("${appId}.app.js")\n`;
+        appLog = "";
+        jsTransmitString(command);
+        console.log("Done.");
+        jsStopIdle();
+
+        var rgba = new Uint8Array(GFX_WIDTH*GFX_HEIGHT*4);
+        jsGetGfxContents(rgba);
+        var rgba32 = new Uint32Array(rgba.buffer);
+        var firstPixel = rgba32[0];
+        var blankImage = rgba32.every(col=>col==firstPixel)
+
+        if (appLog.indexOf("Uncaught")>=0)
+          erroredApps.push( { id : app.id, log : appLog } );
+
+        if (!blankImage) {
+          var Jimp = require("jimp");
+          let image = new Jimp(GFX_WIDTH, GFX_HEIGHT, function (err, image) {
+            if (err) throw err;
+            let buffer = image.bitmap.data;
+            buffer.set(rgba);
+            image.write(imageFn, (err) => {
+              if (err) throw err;
+              console.log("Image written as "+imageFn);
+              resolve(true);
+            });
+          });
+        } else {
+          console.log("Image is empty");
+          resolve(false);
+        }
+
+      });
+    });
+}
+
+var screenshots = [];
+
+// wait until loaded...
+setTimeout(function() {
+  console.log("Loaded...");
+  jsInit();
+  jsIdle();
+  console.log("Factory reset");
+  jsTransmitString("Bangle.factoryReset()\n");
+  factoryFlashMemory.set(flashMemory);
+  console.log("Ready!");
+
+  if (singleAppId) {
+    getThumbnail(singleAppId, "screenshots/"+singleAppId+"-"+EMULATOR+".png");
+    return;
+  }
+
+  var appList = apps.filter(app => (!app.type || app.type=="clock") && !app.custom);
+  appList = appList.filter(app => !app.screenshots && app.supports.includes(DEVICEID));
+
+  var promise = Promise.resolve();
+  appList.forEach(app => {
+    promise = promise.then(() => {
+      var imageFile = "screenshots/"+app.id+"-"+EMULATOR+".png";
+      return getThumbnail(app.id, imageFile).then(ok => {
+        screenshots.push({
+          id : app.id,
+          url : imageFile,
+          version: app.version
+        });
+      });
+    });
+  });
+
+  promise.then(function() {
+    console.log("Complete!");
+    require("fs").writeFileSync("screenshots.json", JSON.stringify(screenshots,null,2));
+    console.log("Errored Apps", erroredApps);
+  });
+
+
+});
diff --git a/core b/core
index 39f89acf1..50aa45f13 160000
--- a/core
+++ b/core
@@ -1 +1 @@
-Subproject commit 39f89acf1468dc7d58ac54d15a092b2bd6d73cce
+Subproject commit 50aa45f13f06cc2f40684971d4c0a68d061b1f3c
diff --git a/css/main.css b/css/main.css
index 0dbe8da14..f4850babe 100644
--- a/css/main.css
+++ b/css/main.css
@@ -1,8 +1,52 @@
-.navbar { background-color: #5755d9; padding: 0.5em 1em 0.5em 1em; }
+.navbar { background-color: #5755d9; padding: 1em 1em 1em 1em; }
 .navbar .navbar-brand {
   color: #fff;
   font-weight: bold;
 }
+
+.container.apploader-tab, ul.tab.tab-block {
+  padding-left: 1rem;
+  padding-right: 1rem;
+  border-bottom: 0px;
+}
+
+.navbar-brand.mr-2 > img {
+  margin-left: 0.3rem;
+}
+
+.panel-body.columns {
+  margin: 1px;
+}
+
+.tile.column.col-6.col-sm-12.col-xs-12.app-tile {
+  border: solid 1px #fafafa;
+  margin: 0;
+  min-height: 150px;
+  padding-top: 0.5rem;
+}
+
+.tab.tab-block .tab-item  {
+  border-bottom: solid 1px #dadee4;
+}
+
+a.mr-2{
+  display: flex; 
+  align-items: center;
+}
+
+.navbar-section > a > div {
+   margin-left: 0.75rem;
+}
+
+.dropdown-container {
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+}
+
+a.btn.btn-link.dropdown-toggle {
+  padding-left: 0.01em;
+}
+
 .avatar img {
   border-radius: 5px 5px 5px 5px;
   background: #fff;
@@ -23,15 +67,50 @@
 .filter-nav {
   display: inline-block;
 }
+.device-nav {
+  display: inline-block;
+}
 .sort-nav {
   float: right;
 }
+
+.app-tile {
+  position: relative;
+  border-bottom: 1px solid #EEE;
+  margin-bottom: 4px;
+  min-height: 8em;
+}
+
 .tile-content { position: relative; }
 .link-github {
   position:absolute;
   top: 36px;
   left: -24px;
 }
-.btn-favourite {
-  color: red;
+.tile-screenshot {
+  position:absolute;bottom:1em;right:1em;
+  width:4em;height:4em;
+  padding:2px;border:1px solid black;
+  cursor:pointer;
+}
+
+.btn.btn-favourite { color: red; }
+.btn.btn-favourite:hover { color: red; }
+
+.icon.icon-emulator { text-indent: 0px; } /*override spectre*/
+.icon.icon-emulator {
+  content: url("data:image/svg+xml,%3Csvg fill='rgb(87, 85, 217)' xmlns='http://www.w3.org/2000/svg' viewBox='4 4 40 40' width='1em' height='1em'%3E%3Cpath d='M 8.5 5 C 6.0324991 5 4 7.0324991 4 9.5 L 4 30.5 C 4 32.967501 6.0324991 35 8.5 35 L 17 35 L 17 40 L 13.5 40 A 1.50015 1.50015 0 1 0 13.5 43 L 18.253906 43 A 1.50015 1.50015 0 0 0 18.740234 43 L 29.253906 43 A 1.50015 1.50015 0 0 0 29.740234 43 L 34.5 43 A 1.50015 1.50015 0 1 0 34.5 40 L 31 40 L 31 35 L 39.5 35 C 41.967501 35 44 32.967501 44 30.5 L 44 9.5 C 44 7.0324991 41.967501 5 39.5 5 L 8.5 5 z M 8.5 8 L 39.5 8 C 40.346499 8 41 8.6535009 41 9.5 L 41 30.5 C 41 31.346499 40.346499 32 39.5 32 L 29.746094 32 A 1.50015 1.50015 0 0 0 29.259766 32 L 18.746094 32 A 1.50015 1.50015 0 0 0 18.259766 32 L 8.5 32 C 7.6535009 32 7 31.346499 7 30.5 L 7 9.5 C 7 8.6535009 7.6535009 8 8.5 8 z M 17.5 12 C 16.136406 12 15 13.136406 15 14.5 L 15 25.5 C 15 26.863594 16.136406 28 17.5 28 L 30.5 28 C 31.863594 28 33 26.863594 33 25.5 L 33 14.5 C 33 13.136406 31.863594 12 30.5 12 L 17.5 12 z M 18 18 L 30 18 L 30 25 L 18 25 L 18 18 z M 20 35 L 28 35 L 28 40 L 20 40 L 20 35 z'/%3E%3C/svg%3E");
+}
+.icon.icon-favourite { text-indent: 0px; } /*override spectre*/
+.icon.icon-favourite::before {
+  content: "\02661"; /* 0x2661 = empty heart; 0x2606 = empty star */
+}
+.icon.icon-favourite-active::before {
+  content: "\02665"; /* 0x2665 = solid heart; 0x2605 = solid star  */
+}
+.icon.icon-interface {text-indent: 0px;} /*override spectre*/
+.icon.icon-interface::before {
+  position: absolute; left: 50%; top: 70%;
+  transform: translate(-50%,-50%);
+  content: url("data:image/svg+xml,%3C%3Fxml version='1.0'%3F%3E%3Csvg fill='rgb(87, 85, 217)' xmlns='http://www.w3.org/2000/svg' viewBox='2 2 28 28' width='1.5em' height='1.5em'%3E%3Cpath d='M 6 4 C 4.895 4 4 4.895 4 6 L 4 24 C 4 25.105 4.895 26 6 26 L 24 26 C 25.105 26 26 25.105 26 24 L 26 8 L 22 4 L 20 4 L 20 10 C 20 10.552 19.552 11 19 11 L 10 11 C 9.448 11 9 10.552 9 10 L 9 4 L 6 4 z M 16 4 L 16 9 L 18 9 L 18 4 L 16 4 z M 10 16 L 20 16 C 21.105 16 22 16.895 22 18 L 22 24 L 8 24 L 8 18 C 8 16.895 8.895 16 10 16 z'/%3E%3C/svg%3E");
 }
diff --git a/css/spectre-exp.min.css b/css/spectre-exp.min.css
index 942cf59bf..d3137743a 100644
--- a/css/spectre-exp.min.css
+++ b/css/spectre-exp.min.css
@@ -1 +1 @@
-/*! Spectre.css Experimentals v0.5.8 | MIT License | github.com/picturepan2/spectre */.form-autocomplete{position:relative}.form-autocomplete .form-autocomplete-input{align-content:flex-start;display:flex;display:-ms-flexbox;-ms-flex-line-pack:start;-ms-flex-wrap:wrap;flex-wrap:wrap;height:auto;min-height:1.6rem;padding:.1rem}.form-autocomplete .form-autocomplete-input.is-focused{border-color:#5755d9;box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}.form-autocomplete .form-autocomplete-input .form-input{border-color:transparent;box-shadow:none;display:inline-block;-ms-flex:1 0 auto;flex:1 0 auto;height:1.2rem;line-height:.8rem;margin:.1rem;width:auto}.form-autocomplete .menu{left:0;position:absolute;top:100%;width:100%}.form-autocomplete.autocomplete-oneline .form-autocomplete-input{-ms-flex-wrap:nowrap;flex-wrap:nowrap;overflow-x:auto}.form-autocomplete.autocomplete-oneline .chip{-ms-flex:1 0 auto;flex:1 0 auto}.calendar{border:.05rem solid #dadee4;border-radius:.1rem;display:block;min-width:280px}.calendar .calendar-nav{align-items:center;background:#f7f8f9;border-top-left-radius:.1rem;border-top-right-radius:.1rem;display:flex;display:-ms-flexbox;-ms-flex-align:center;font-size:.9rem;padding:.4rem}.calendar .calendar-body,.calendar .calendar-header{display:flex;display:-ms-flexbox;-ms-flex-pack:center;-ms-flex-wrap:wrap;flex-wrap:wrap;justify-content:center;padding:.4rem 0}.calendar .calendar-body .calendar-date,.calendar .calendar-header .calendar-date{-ms-flex:0 0 14.28%;flex:0 0 14.28%;max-width:14.28%}.calendar .calendar-header{background:#f7f8f9;border-bottom:.05rem solid #dadee4;color:#bcc3ce;font-size:.7rem;text-align:center}.calendar .calendar-body{color:#66758c}.calendar .calendar-date{border:0;padding:.2rem}.calendar .calendar-date .date-item{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;border:.05rem solid transparent;border-radius:50%;color:#66758c;cursor:pointer;font-size:.7rem;height:1.4rem;line-height:1rem;outline:0;padding:.1rem;position:relative;text-align:center;text-decoration:none;transition:background .2s,border .2s,box-shadow .2s,color .2s;vertical-align:middle;white-space:nowrap;width:1.4rem}.calendar .calendar-date .date-item.date-today{border-color:#e5e5f9;color:#5755d9}.calendar .calendar-date .date-item:focus{box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}.calendar .calendar-date .date-item:focus,.calendar .calendar-date .date-item:hover{background:#fefeff;border-color:#e5e5f9;color:#5755d9;text-decoration:none}.calendar .calendar-date .date-item.active,.calendar .calendar-date .date-item:active{background:#4b48d6;border-color:#3634d2;color:#fff}.calendar .calendar-date .date-item.badge::after{position:absolute;right:3px;top:3px;transform:translate(50%,-50%)}.calendar .calendar-date .calendar-event.disabled,.calendar .calendar-date .calendar-event:disabled,.calendar .calendar-date .date-item.disabled,.calendar .calendar-date .date-item:disabled{cursor:default;opacity:.25;pointer-events:none}.calendar .calendar-date.next-month .calendar-event,.calendar .calendar-date.next-month .date-item,.calendar .calendar-date.prev-month .calendar-event,.calendar .calendar-date.prev-month .date-item{opacity:.25}.calendar .calendar-range{position:relative}.calendar .calendar-range::before{background:#f1f1fc;content:"";height:1.4rem;left:0;position:absolute;right:0;top:50%;transform:translateY(-50%)}.calendar .calendar-range.range-start::before{left:50%}.calendar .calendar-range.range-end::before{right:50%}.calendar .calendar-range.range-end .date-item,.calendar .calendar-range.range-start .date-item{background:#4b48d6;border-color:#3634d2;color:#fff}.calendar .calendar-range .date-item{color:#5755d9}.calendar.calendar-lg .calendar-body{padding:0}.calendar.calendar-lg .calendar-body .calendar-date{border-bottom:.05rem solid #dadee4;border-right:.05rem solid #dadee4;display:flex;display:-ms-flexbox;-ms-flex-direction:column;flex-direction:column;height:5.5rem;padding:0}.calendar.calendar-lg .calendar-body .calendar-date:nth-child(7n){border-right:0}.calendar.calendar-lg .calendar-body .calendar-date:nth-last-child(-n+7){border-bottom:0}.calendar.calendar-lg .date-item{align-self:flex-end;-ms-flex-item-align:end;height:1.4rem;margin-right:.2rem;margin-top:.2rem}.calendar.calendar-lg .calendar-range::before{top:19px}.calendar.calendar-lg .calendar-range.range-start::before{left:auto;width:19px}.calendar.calendar-lg .calendar-range.range-end::before{right:19px}.calendar.calendar-lg .calendar-events{flex-grow:1;-ms-flex-positive:1;line-height:1;overflow-y:auto;padding:.2rem}.calendar.calendar-lg .calendar-event{border-radius:.1rem;display:block;font-size:.7rem;margin:.1rem auto;overflow:hidden;padding:3px 4px;text-overflow:ellipsis;white-space:nowrap}.carousel .carousel-locator:nth-of-type(1):checked~.carousel-container .carousel-item:nth-of-type(1),.carousel .carousel-locator:nth-of-type(2):checked~.carousel-container .carousel-item:nth-of-type(2),.carousel .carousel-locator:nth-of-type(3):checked~.carousel-container .carousel-item:nth-of-type(3),.carousel .carousel-locator:nth-of-type(4):checked~.carousel-container .carousel-item:nth-of-type(4),.carousel .carousel-locator:nth-of-type(5):checked~.carousel-container .carousel-item:nth-of-type(5),.carousel .carousel-locator:nth-of-type(6):checked~.carousel-container .carousel-item:nth-of-type(6),.carousel .carousel-locator:nth-of-type(7):checked~.carousel-container .carousel-item:nth-of-type(7),.carousel .carousel-locator:nth-of-type(8):checked~.carousel-container .carousel-item:nth-of-type(8){animation:carousel-slidein .75s ease-in-out 1;opacity:1;z-index:100}.carousel .carousel-locator:nth-of-type(1):checked~.carousel-nav .nav-item:nth-of-type(1),.carousel .carousel-locator:nth-of-type(2):checked~.carousel-nav .nav-item:nth-of-type(2),.carousel .carousel-locator:nth-of-type(3):checked~.carousel-nav .nav-item:nth-of-type(3),.carousel .carousel-locator:nth-of-type(4):checked~.carousel-nav .nav-item:nth-of-type(4),.carousel .carousel-locator:nth-of-type(5):checked~.carousel-nav .nav-item:nth-of-type(5),.carousel .carousel-locator:nth-of-type(6):checked~.carousel-nav .nav-item:nth-of-type(6),.carousel .carousel-locator:nth-of-type(7):checked~.carousel-nav .nav-item:nth-of-type(7),.carousel .carousel-locator:nth-of-type(8):checked~.carousel-nav .nav-item:nth-of-type(8){color:#f7f8f9}.carousel{background:#f7f8f9;display:block;overflow:hidden;-webkit-overflow-scrolling:touch;position:relative;width:100%;z-index:1}.carousel .carousel-container{height:100%;left:0;position:relative}.carousel .carousel-container::before{content:"";display:block;padding-bottom:56.25%}.carousel .carousel-container .carousel-item{animation:carousel-slideout 1s ease-in-out 1;height:100%;left:0;margin:0;opacity:0;position:absolute;top:0;width:100%}.carousel .carousel-container .carousel-item:hover .item-next,.carousel .carousel-container .carousel-item:hover .item-prev{opacity:1}.carousel .carousel-container .item-next,.carousel .carousel-container .item-prev{background:rgba(247,248,249,.25);border-color:rgba(247,248,249,.5);color:#f7f8f9;opacity:0;position:absolute;top:50%;transform:translateY(-50%);transition:all .4s;z-index:100}.carousel .carousel-container .item-prev{left:1rem}.carousel .carousel-container .item-next{right:1rem}.carousel .carousel-nav{bottom:.4rem;display:flex;display:-ms-flexbox;-ms-flex-pack:center;justify-content:center;left:50%;position:absolute;transform:translateX(-50%);width:10rem;z-index:100}.carousel .carousel-nav .nav-item{color:rgba(247,248,249,.5);display:block;-ms-flex:1 0 auto;flex:1 0 auto;height:1.6rem;margin:.2rem;max-width:2.5rem;position:relative}.carousel .carousel-nav .nav-item::before{background:currentColor;content:"";display:block;height:.1rem;position:absolute;top:.5rem;width:100%}@keyframes carousel-slidein{0%{transform:translateX(100%)}100%{transform:translateX(0)}}@keyframes carousel-slideout{0%{opacity:1;transform:translateX(0)}100%{opacity:1;transform:translateX(-50%)}}.comparison-slider{height:50vh;overflow:hidden;-webkit-overflow-scrolling:touch;position:relative;width:100%}.comparison-slider .comparison-after,.comparison-slider .comparison-before{height:100%;left:0;margin:0;overflow:hidden;position:absolute;top:0}.comparison-slider .comparison-after img,.comparison-slider .comparison-before img{height:100%;object-fit:cover;object-position:left center;position:absolute;width:100%}.comparison-slider .comparison-before{width:100%;z-index:1}.comparison-slider .comparison-before .comparison-label{right:.8rem}.comparison-slider .comparison-after{max-width:100%;min-width:0;z-index:2}.comparison-slider .comparison-after::before{background:0 0;content:"";cursor:default;height:100%;left:0;position:absolute;right:.8rem;top:0;z-index:1}.comparison-slider .comparison-after::after{background:currentColor;border-radius:50%;box-shadow:0 -5px,0 5px;color:#fff;content:"";height:3px;position:absolute;right:.4rem;top:50%;transform:translate(50%,-50%);width:3px}.comparison-slider .comparison-after .comparison-label{left:.8rem}.comparison-slider .comparison-resizer{animation:first-run 1.5s 1 ease-in-out;cursor:ew-resize;height:.8rem;left:0;max-width:100%;min-width:.8rem;opacity:0;outline:0;position:relative;resize:horizontal;top:50%;transform:translateY(-50%) scaleY(30);width:0}.comparison-slider .comparison-label{background:rgba(48,55,66,.5);bottom:.8rem;color:#fff;padding:.2rem .4rem;position:absolute;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}@keyframes first-run{0%{width:0}25%{width:2.4rem}50%{width:.8rem}75%{width:1.2rem}100%{width:0}}.filter .filter-tag#tag-0:checked~.filter-nav .chip[for=tag-0],.filter .filter-tag#tag-1:checked~.filter-nav .chip[for=tag-1],.filter .filter-tag#tag-2:checked~.filter-nav .chip[for=tag-2],.filter .filter-tag#tag-3:checked~.filter-nav .chip[for=tag-3],.filter .filter-tag#tag-4:checked~.filter-nav .chip[for=tag-4],.filter .filter-tag#tag-5:checked~.filter-nav .chip[for=tag-5],.filter .filter-tag#tag-6:checked~.filter-nav .chip[for=tag-6],.filter .filter-tag#tag-7:checked~.filter-nav .chip[for=tag-7],.filter .filter-tag#tag-8:checked~.filter-nav .chip[for=tag-8]{background:#5755d9;color:#fff}.filter .filter-tag#tag-1:checked~.filter-body .filter-item:not([data-tag~=tag-1]),.filter .filter-tag#tag-2:checked~.filter-body .filter-item:not([data-tag~=tag-2]),.filter .filter-tag#tag-3:checked~.filter-body .filter-item:not([data-tag~=tag-3]),.filter .filter-tag#tag-4:checked~.filter-body .filter-item:not([data-tag~=tag-4]),.filter .filter-tag#tag-5:checked~.filter-body .filter-item:not([data-tag~=tag-5]),.filter .filter-tag#tag-6:checked~.filter-body .filter-item:not([data-tag~=tag-6]),.filter .filter-tag#tag-7:checked~.filter-body .filter-item:not([data-tag~=tag-7]),.filter .filter-tag#tag-8:checked~.filter-body .filter-item:not([data-tag~=tag-8]){display:none}.filter .filter-nav{margin:.4rem 0}.filter .filter-body{display:flex;display:-ms-flexbox;-ms-flex-wrap:wrap;flex-wrap:wrap}.meter{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#f7f8f9;border:0;border-radius:.1rem;display:block;height:.8rem;width:100%}.meter::-webkit-meter-inner-element{display:block}.meter::-webkit-meter-bar,.meter::-webkit-meter-even-less-good-value,.meter::-webkit-meter-optimum-value,.meter::-webkit-meter-suboptimum-value{border-radius:.1rem}.meter::-webkit-meter-bar{background:#f7f8f9}.meter::-webkit-meter-optimum-value{background:#32b643}.meter::-webkit-meter-suboptimum-value{background:#ffb700}.meter::-webkit-meter-even-less-good-value{background:#e85600}.meter:-moz-meter-optimum,.meter:-moz-meter-sub-optimum,.meter:-moz-meter-sub-sub-optimum,.meter::-moz-meter-bar{border-radius:.1rem}.meter:-moz-meter-optimum::-moz-meter-bar{background:#32b643}.meter:-moz-meter-sub-optimum::-moz-meter-bar{background:#ffb700}.meter:-moz-meter-sub-sub-optimum::-moz-meter-bar{background:#e85600}.off-canvas{display:flex;display:-ms-flexbox;-ms-flex-flow:nowrap;flex-flow:nowrap;height:100%;position:relative;width:100%}.off-canvas .off-canvas-toggle{display:block;left:.4rem;position:absolute;top:.4rem;transition:none;z-index:1}.off-canvas .off-canvas-sidebar{background:#f7f8f9;bottom:0;left:0;min-width:10rem;overflow-y:auto;position:fixed;top:0;transform:translateX(-100%);transition:transform .25s;z-index:200}.off-canvas .off-canvas-content{-ms-flex:1 1 auto;flex:1 1 auto;height:100%;padding:.4rem .4rem .4rem 4rem}.off-canvas .off-canvas-overlay{background:rgba(48,55,66,.1);border-color:transparent;border-radius:0;bottom:0;display:none;height:100%;left:0;position:fixed;right:0;top:0;width:100%}.off-canvas .off-canvas-sidebar.active,.off-canvas .off-canvas-sidebar:target{transform:translateX(0)}.off-canvas .off-canvas-sidebar.active~.off-canvas-overlay,.off-canvas .off-canvas-sidebar:target~.off-canvas-overlay{display:block;z-index:100}@media (min-width:960px){.off-canvas.off-canvas-sidebar-show .off-canvas-toggle{display:none}.off-canvas.off-canvas-sidebar-show .off-canvas-sidebar{-ms-flex:0 0 auto;flex:0 0 auto;position:relative;transform:none}.off-canvas.off-canvas-sidebar-show .off-canvas-overlay{display:none!important}}.parallax{display:block;height:auto;position:relative;width:auto}.parallax .parallax-content{box-shadow:0 1rem 2.1rem rgba(48,55,66,.3);height:auto;transform:perspective(1000px);transform-style:preserve-3d;transition:all .4s ease;width:100%}.parallax .parallax-content::before{content:"";display:block;height:100%;left:0;position:absolute;top:0;width:100%}.parallax .parallax-front{align-items:center;color:#fff;display:flex;display:-ms-flexbox;-ms-flex-align:center;-ms-flex-pack:center;height:100%;justify-content:center;left:0;position:absolute;text-align:center;text-shadow:0 0 20px rgba(48,55,66,.75);top:0;transform:translateZ(50px) scale(.95);transition:transform .4s;width:100%;z-index:1}.parallax .parallax-top-left{height:50%;left:0;outline:0;position:absolute;top:0;width:50%;z-index:100}.parallax .parallax-top-left:focus~.parallax-content,.parallax .parallax-top-left:hover~.parallax-content{transform:perspective(1000px) rotateX(3deg) rotateY(-3deg)}.parallax .parallax-top-left:focus~.parallax-content::before,.parallax .parallax-top-left:hover~.parallax-content::before{background:linear-gradient(135deg,rgba(255,255,255,.35) 0,transparent 50%)}.parallax .parallax-top-left:focus~.parallax-content .parallax-front,.parallax .parallax-top-left:hover~.parallax-content .parallax-front{transform:translate3d(4.5px,4.5px,50px) scale(.95)}.parallax .parallax-top-right{height:50%;outline:0;position:absolute;right:0;top:0;width:50%;z-index:100}.parallax .parallax-top-right:focus~.parallax-content,.parallax .parallax-top-right:hover~.parallax-content{transform:perspective(1000px) rotateX(3deg) rotateY(3deg)}.parallax .parallax-top-right:focus~.parallax-content::before,.parallax .parallax-top-right:hover~.parallax-content::before{background:linear-gradient(-135deg,rgba(255,255,255,.35) 0,transparent 50%)}.parallax .parallax-top-right:focus~.parallax-content .parallax-front,.parallax .parallax-top-right:hover~.parallax-content .parallax-front{transform:translate3d(-4.5px,4.5px,50px) scale(.95)}.parallax .parallax-bottom-left{bottom:0;height:50%;left:0;outline:0;position:absolute;width:50%;z-index:100}.parallax .parallax-bottom-left:focus~.parallax-content,.parallax .parallax-bottom-left:hover~.parallax-content{transform:perspective(1000px) rotateX(-3deg) rotateY(-3deg)}.parallax .parallax-bottom-left:focus~.parallax-content::before,.parallax .parallax-bottom-left:hover~.parallax-content::before{background:linear-gradient(45deg,rgba(255,255,255,.35) 0,transparent 50%)}.parallax .parallax-bottom-left:focus~.parallax-content .parallax-front,.parallax .parallax-bottom-left:hover~.parallax-content .parallax-front{transform:translate3d(4.5px,-4.5px,50px) scale(.95)}.parallax .parallax-bottom-right{bottom:0;height:50%;outline:0;position:absolute;right:0;width:50%;z-index:100}.parallax .parallax-bottom-right:focus~.parallax-content,.parallax .parallax-bottom-right:hover~.parallax-content{transform:perspective(1000px) rotateX(-3deg) rotateY(3deg)}.parallax .parallax-bottom-right:focus~.parallax-content::before,.parallax .parallax-bottom-right:hover~.parallax-content::before{background:linear-gradient(-45deg,rgba(255,255,255,.35) 0,transparent 50%)}.parallax .parallax-bottom-right:focus~.parallax-content .parallax-front,.parallax .parallax-bottom-right:hover~.parallax-content .parallax-front{transform:translate3d(-4.5px,-4.5px,50px) scale(.95)}.progress{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#eef0f3;border:0;border-radius:.1rem;color:#5755d9;height:.2rem;position:relative;width:100%}.progress::-webkit-progress-bar{background:0 0;border-radius:.1rem}.progress::-webkit-progress-value{background:#5755d9;border-radius:.1rem}.progress::-moz-progress-bar{background:#5755d9;border-radius:.1rem}.progress:indeterminate{animation:progress-indeterminate 1.5s linear infinite;background:#eef0f3 linear-gradient(to right,#5755d9 30%,#eef0f3 30%) top left/150% 150% no-repeat}.progress:indeterminate::-moz-progress-bar{background:0 0}@keyframes progress-indeterminate{0%{background-position:200% 0}100%{background-position:-200% 0}}.slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;display:block;height:1.2rem;width:100%}.slider:focus{box-shadow:0 0 0 .1rem rgba(87,85,217,.2);outline:0}.slider.tooltip:not([data-tooltip])::after{content:attr(value)}.slider::-webkit-slider-thumb{-webkit-appearance:none;background:#5755d9;border:0;border-radius:50%;height:.6rem;margin-top:-.25rem;transition:transform .2s;width:.6rem}.slider::-moz-range-thumb{background:#5755d9;border:0;border-radius:50%;height:.6rem;transition:transform .2s;width:.6rem}.slider::-ms-thumb{background:#5755d9;border:0;border-radius:50%;height:.6rem;transition:transform .2s;width:.6rem}.slider:active::-webkit-slider-thumb{transform:scale(1.25)}.slider:active::-moz-range-thumb{transform:scale(1.25)}.slider:active::-ms-thumb{transform:scale(1.25)}.slider.disabled::-webkit-slider-thumb,.slider:disabled::-webkit-slider-thumb{background:#f7f8f9;transform:scale(1)}.slider.disabled::-moz-range-thumb,.slider:disabled::-moz-range-thumb{background:#f7f8f9;transform:scale(1)}.slider.disabled::-ms-thumb,.slider:disabled::-ms-thumb{background:#f7f8f9;transform:scale(1)}.slider::-webkit-slider-runnable-track{background:#eef0f3;border-radius:.1rem;height:.1rem;width:100%}.slider::-moz-range-track{background:#eef0f3;border-radius:.1rem;height:.1rem;width:100%}.slider::-ms-track{background:#eef0f3;border-radius:.1rem;height:.1rem;width:100%}.slider::-ms-fill-lower{background:#5755d9}.timeline .timeline-item{display:flex;display:-ms-flexbox;margin-bottom:1.2rem;position:relative}.timeline .timeline-item::before{background:#dadee4;content:"";height:100%;left:11px;position:absolute;top:1.2rem;width:2px}.timeline .timeline-item .timeline-left{-ms-flex:0 0 auto;flex:0 0 auto}.timeline .timeline-item .timeline-content{-ms-flex:1 1 auto;flex:1 1 auto;padding:2px 0 2px .8rem}.timeline .timeline-item .timeline-icon{align-items:center;border-radius:50%;color:#fff;display:-ms-flexbox;display:flex;-ms-flex-align:center;-ms-flex-pack:center;height:1.2rem;justify-content:center;text-align:center;width:1.2rem}.timeline .timeline-item .timeline-icon::before{border:.1rem solid #5755d9;border-radius:50%;content:"";display:block;height:.4rem;left:.4rem;position:absolute;top:.4rem;width:.4rem}.timeline .timeline-item .timeline-icon.icon-lg{background:#5755d9;line-height:1.2rem}.timeline .timeline-item .timeline-icon.icon-lg::before{content:none}.viewer-360{align-items:center;display:flex;display:-ms-flexbox;-ms-flex-align:center;-ms-flex-direction:column;flex-direction:column}.viewer-360 .viewer-slider[max="36"][value="1"]+.viewer-image{background-position-y:0}.viewer-360 .viewer-slider[max="36"][value="2"]+.viewer-image{background-position-y:2.8571428571%}.viewer-360 .viewer-slider[max="36"][value="3"]+.viewer-image{background-position-y:5.7142857143%}.viewer-360 .viewer-slider[max="36"][value="4"]+.viewer-image{background-position-y:8.5714285714%}.viewer-360 .viewer-slider[max="36"][value="5"]+.viewer-image{background-position-y:11.4285714286%}.viewer-360 .viewer-slider[max="36"][value="6"]+.viewer-image{background-position-y:14.2857142857%}.viewer-360 .viewer-slider[max="36"][value="7"]+.viewer-image{background-position-y:17.1428571429%}.viewer-360 .viewer-slider[max="36"][value="8"]+.viewer-image{background-position-y:20%}.viewer-360 .viewer-slider[max="36"][value="9"]+.viewer-image{background-position-y:22.8571428571%}.viewer-360 .viewer-slider[max="36"][value="10"]+.viewer-image{background-position-y:25.7142857143%}.viewer-360 .viewer-slider[max="36"][value="11"]+.viewer-image{background-position-y:28.5714285714%}.viewer-360 .viewer-slider[max="36"][value="12"]+.viewer-image{background-position-y:31.4285714286%}.viewer-360 .viewer-slider[max="36"][value="13"]+.viewer-image{background-position-y:34.2857142857%}.viewer-360 .viewer-slider[max="36"][value="14"]+.viewer-image{background-position-y:37.1428571429%}.viewer-360 .viewer-slider[max="36"][value="15"]+.viewer-image{background-position-y:40%}.viewer-360 .viewer-slider[max="36"][value="16"]+.viewer-image{background-position-y:42.8571428571%}.viewer-360 .viewer-slider[max="36"][value="17"]+.viewer-image{background-position-y:45.7142857143%}.viewer-360 .viewer-slider[max="36"][value="18"]+.viewer-image{background-position-y:48.5714285714%}.viewer-360 .viewer-slider[max="36"][value="19"]+.viewer-image{background-position-y:51.4285714286%}.viewer-360 .viewer-slider[max="36"][value="20"]+.viewer-image{background-position-y:54.2857142857%}.viewer-360 .viewer-slider[max="36"][value="21"]+.viewer-image{background-position-y:57.1428571429%}.viewer-360 .viewer-slider[max="36"][value="22"]+.viewer-image{background-position-y:60%}.viewer-360 .viewer-slider[max="36"][value="23"]+.viewer-image{background-position-y:62.8571428571%}.viewer-360 .viewer-slider[max="36"][value="24"]+.viewer-image{background-position-y:65.7142857143%}.viewer-360 .viewer-slider[max="36"][value="25"]+.viewer-image{background-position-y:68.5714285714%}.viewer-360 .viewer-slider[max="36"][value="26"]+.viewer-image{background-position-y:71.4285714286%}.viewer-360 .viewer-slider[max="36"][value="27"]+.viewer-image{background-position-y:74.2857142857%}.viewer-360 .viewer-slider[max="36"][value="28"]+.viewer-image{background-position-y:77.1428571429%}.viewer-360 .viewer-slider[max="36"][value="29"]+.viewer-image{background-position-y:80%}.viewer-360 .viewer-slider[max="36"][value="30"]+.viewer-image{background-position-y:82.8571428571%}.viewer-360 .viewer-slider[max="36"][value="31"]+.viewer-image{background-position-y:85.7142857143%}.viewer-360 .viewer-slider[max="36"][value="32"]+.viewer-image{background-position-y:88.5714285714%}.viewer-360 .viewer-slider[max="36"][value="33"]+.viewer-image{background-position-y:91.4285714286%}.viewer-360 .viewer-slider[max="36"][value="34"]+.viewer-image{background-position-y:94.2857142857%}.viewer-360 .viewer-slider[max="36"][value="35"]+.viewer-image{background-position-y:97.1428571429%}.viewer-360 .viewer-slider[max="36"][value="36"]+.viewer-image{background-position-y:100%}.viewer-360 .viewer-slider{cursor:ew-resize;-ms-flex-order:2;margin:1rem;order:2;width:60%}.viewer-360 .viewer-image{background-position-y:0;background-repeat:no-repeat;background-size:100%;-ms-flex-order:1;max-width:100%;order:1}
\ No newline at end of file
+/*! Spectre.css Experimentals v0.5.9 | MIT License | github.com/picturepan2/spectre */.form-autocomplete{position:relative}.form-autocomplete .form-autocomplete-input{align-content:flex-start;display:-ms-flexbox;display:flex;-ms-flex-line-pack:start;-ms-flex-wrap:wrap;flex-wrap:wrap;height:auto;min-height:1.6rem;padding:.1rem}.form-autocomplete .form-autocomplete-input.is-focused{border-color:#5755d9;box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}.form-autocomplete .form-autocomplete-input .form-input{border-color:transparent;box-shadow:none;display:inline-block;-ms-flex:1 0 auto;flex:1 0 auto;height:1.2rem;line-height:.8rem;margin:.1rem;width:auto}.form-autocomplete .menu{left:0;position:absolute;top:100%;width:100%}.form-autocomplete.autocomplete-oneline .form-autocomplete-input{-ms-flex-wrap:nowrap;flex-wrap:nowrap;overflow-x:auto}.form-autocomplete.autocomplete-oneline .chip{-ms-flex:1 0 auto;flex:1 0 auto}.calendar{border:.05rem solid #dadee4;border-radius:.1rem;display:block;min-width:280px}.calendar .calendar-nav{align-items:center;background:#f7f8f9;border-top-left-radius:.1rem;border-top-right-radius:.1rem;display:-ms-flexbox;display:flex;-ms-flex-align:center;font-size:.9rem;padding:.4rem}.calendar .calendar-body,.calendar .calendar-header{display:-ms-flexbox;display:flex;-ms-flex-pack:center;-ms-flex-wrap:wrap;flex-wrap:wrap;justify-content:center;padding:.4rem 0}.calendar .calendar-body .calendar-date,.calendar .calendar-header .calendar-date{-ms-flex:0 0 14.28%;flex:0 0 14.28%;max-width:14.28%}.calendar .calendar-header{background:#f7f8f9;border-bottom:.05rem solid #dadee4;color:#bcc3ce;font-size:.7rem;text-align:center}.calendar .calendar-body{color:#66758c}.calendar .calendar-date{border:0;padding:.2rem}.calendar .calendar-date .date-item{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;border:.05rem solid transparent;border-radius:50%;color:#66758c;cursor:pointer;font-size:.7rem;height:1.4rem;line-height:1rem;outline:0;padding:.1rem;position:relative;text-align:center;text-decoration:none;transition:background .2s,border .2s,box-shadow .2s,color .2s;vertical-align:middle;white-space:nowrap;width:1.4rem}.calendar .calendar-date .date-item.date-today{border-color:#e5e5f9;color:#5755d9}.calendar .calendar-date .date-item:focus{box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}.calendar .calendar-date .date-item:focus,.calendar .calendar-date .date-item:hover{background:#fefeff;border-color:#e5e5f9;color:#5755d9;text-decoration:none}.calendar .calendar-date .date-item.active,.calendar .calendar-date .date-item:active{background:#4b48d6;border-color:#3634d2;color:#fff}.calendar .calendar-date .date-item.badge::after{position:absolute;right:3px;top:3px;transform:translate(50%,-50%)}.calendar .calendar-date .calendar-event.disabled,.calendar .calendar-date .calendar-event:disabled,.calendar .calendar-date .date-item.disabled,.calendar .calendar-date .date-item:disabled{cursor:default;opacity:.25;pointer-events:none}.calendar .calendar-date.next-month .calendar-event,.calendar .calendar-date.next-month .date-item,.calendar .calendar-date.prev-month .calendar-event,.calendar .calendar-date.prev-month .date-item{opacity:.25}.calendar .calendar-range{position:relative}.calendar .calendar-range::before{background:#f1f1fc;content:"";height:1.4rem;left:0;position:absolute;right:0;top:50%;transform:translateY(-50%)}.calendar .calendar-range.range-start::before{left:50%}.calendar .calendar-range.range-end::before{right:50%}.calendar .calendar-range.range-end .date-item,.calendar .calendar-range.range-start .date-item{background:#4b48d6;border-color:#3634d2;color:#fff}.calendar .calendar-range .date-item{color:#5755d9}.calendar.calendar-lg .calendar-body{padding:0}.calendar.calendar-lg .calendar-body .calendar-date{border-bottom:.05rem solid #dadee4;border-right:.05rem solid #dadee4;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;height:5.5rem;padding:0}.calendar.calendar-lg .calendar-body .calendar-date:nth-child(7n){border-right:0}.calendar.calendar-lg .calendar-body .calendar-date:nth-last-child(-n+7){border-bottom:0}.calendar.calendar-lg .date-item{align-self:flex-end;-ms-flex-item-align:end;height:1.4rem;margin-right:.2rem;margin-top:.2rem}.calendar.calendar-lg .calendar-range::before{top:19px}.calendar.calendar-lg .calendar-range.range-start::before{left:auto;width:19px}.calendar.calendar-lg .calendar-range.range-end::before{right:19px}.calendar.calendar-lg .calendar-events{flex-grow:1;-ms-flex-positive:1;line-height:1;overflow-y:auto;padding:.2rem}.calendar.calendar-lg .calendar-event{border-radius:.1rem;display:block;font-size:.7rem;margin:.1rem auto;overflow:hidden;padding:3px 4px;text-overflow:ellipsis;white-space:nowrap}.carousel .carousel-locator:nth-of-type(1):checked~.carousel-container .carousel-item:nth-of-type(1),.carousel .carousel-locator:nth-of-type(2):checked~.carousel-container .carousel-item:nth-of-type(2),.carousel .carousel-locator:nth-of-type(3):checked~.carousel-container .carousel-item:nth-of-type(3),.carousel .carousel-locator:nth-of-type(4):checked~.carousel-container .carousel-item:nth-of-type(4),.carousel .carousel-locator:nth-of-type(5):checked~.carousel-container .carousel-item:nth-of-type(5),.carousel .carousel-locator:nth-of-type(6):checked~.carousel-container .carousel-item:nth-of-type(6),.carousel .carousel-locator:nth-of-type(7):checked~.carousel-container .carousel-item:nth-of-type(7),.carousel .carousel-locator:nth-of-type(8):checked~.carousel-container .carousel-item:nth-of-type(8){animation:carousel-slidein .75s ease-in-out 1;opacity:1;z-index:100}.carousel .carousel-locator:nth-of-type(1):checked~.carousel-nav .nav-item:nth-of-type(1),.carousel .carousel-locator:nth-of-type(2):checked~.carousel-nav .nav-item:nth-of-type(2),.carousel .carousel-locator:nth-of-type(3):checked~.carousel-nav .nav-item:nth-of-type(3),.carousel .carousel-locator:nth-of-type(4):checked~.carousel-nav .nav-item:nth-of-type(4),.carousel .carousel-locator:nth-of-type(5):checked~.carousel-nav .nav-item:nth-of-type(5),.carousel .carousel-locator:nth-of-type(6):checked~.carousel-nav .nav-item:nth-of-type(6),.carousel .carousel-locator:nth-of-type(7):checked~.carousel-nav .nav-item:nth-of-type(7),.carousel .carousel-locator:nth-of-type(8):checked~.carousel-nav .nav-item:nth-of-type(8){color:#f7f8f9}.carousel{background:#f7f8f9;display:block;overflow:hidden;-webkit-overflow-scrolling:touch;position:relative;width:100%;z-index:1}.carousel .carousel-container{height:100%;left:0;position:relative}.carousel .carousel-container::before{content:"";display:block;padding-bottom:56.25%}.carousel .carousel-container .carousel-item{animation:carousel-slideout 1s ease-in-out 1;height:100%;left:0;margin:0;opacity:0;position:absolute;top:0;width:100%}.carousel .carousel-container .carousel-item:hover .item-next,.carousel .carousel-container .carousel-item:hover .item-prev{opacity:1}.carousel .carousel-container .item-next,.carousel .carousel-container .item-prev{background:rgba(247,248,249,.25);border-color:rgba(247,248,249,.5);color:#f7f8f9;opacity:0;position:absolute;top:50%;transform:translateY(-50%);transition:all .4s;z-index:100}.carousel .carousel-container .item-prev{left:1rem}.carousel .carousel-container .item-next{right:1rem}.carousel .carousel-nav{bottom:.4rem;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;left:50%;position:absolute;transform:translateX(-50%);width:10rem;z-index:100}.carousel .carousel-nav .nav-item{color:rgba(247,248,249,.5);display:block;-ms-flex:1 0 auto;flex:1 0 auto;height:1.6rem;margin:.2rem;max-width:2.5rem;position:relative}.carousel .carousel-nav .nav-item::before{background:currentColor;content:"";display:block;height:.1rem;position:absolute;top:.5rem;width:100%}@keyframes carousel-slidein{0%{transform:translateX(100%)}100%{transform:translateX(0)}}@keyframes carousel-slideout{0%{opacity:1;transform:translateX(0)}100%{opacity:1;transform:translateX(-50%)}}.comparison-slider{height:50vh;overflow:hidden;-webkit-overflow-scrolling:touch;position:relative;width:100%}.comparison-slider .comparison-after,.comparison-slider .comparison-before{height:100%;left:0;margin:0;overflow:hidden;position:absolute;top:0}.comparison-slider .comparison-after img,.comparison-slider .comparison-before img{height:100%;object-fit:cover;object-position:left center;position:absolute;width:100%}.comparison-slider .comparison-before{width:100%;z-index:1}.comparison-slider .comparison-before .comparison-label{right:.8rem}.comparison-slider .comparison-after{max-width:100%;min-width:0;z-index:2}.comparison-slider .comparison-after::before{background:0 0;content:"";cursor:default;height:100%;left:0;position:absolute;right:.8rem;top:0;z-index:1}.comparison-slider .comparison-after::after{background:currentColor;border-radius:50%;box-shadow:0 -5px,0 5px;color:#fff;content:"";height:3px;pointer-events:none;position:absolute;right:.4rem;top:50%;transform:translate(50%,-50%);width:3px}.comparison-slider .comparison-after .comparison-label{left:.8rem}.comparison-slider .comparison-resizer{animation:first-run 1.5s 1 ease-in-out;cursor:ew-resize;height:.8rem;left:0;max-width:100%;min-width:.8rem;opacity:0;outline:0;position:relative;resize:horizontal;top:50%;transform:translateY(-50%) scaleY(30);width:0}.comparison-slider .comparison-label{background:rgba(48,55,66,.5);bottom:.8rem;color:#fff;padding:.2rem .4rem;position:absolute;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}@keyframes first-run{0%{width:0}25%{width:2.4rem}50%{width:.8rem}75%{width:1.2rem}100%{width:0}}.filter .filter-tag#tag-0:checked~.filter-nav .chip[for=tag-0],.filter .filter-tag#tag-1:checked~.filter-nav .chip[for=tag-1],.filter .filter-tag#tag-2:checked~.filter-nav .chip[for=tag-2],.filter .filter-tag#tag-3:checked~.filter-nav .chip[for=tag-3],.filter .filter-tag#tag-4:checked~.filter-nav .chip[for=tag-4],.filter .filter-tag#tag-5:checked~.filter-nav .chip[for=tag-5],.filter .filter-tag#tag-6:checked~.filter-nav .chip[for=tag-6],.filter .filter-tag#tag-7:checked~.filter-nav .chip[for=tag-7],.filter .filter-tag#tag-8:checked~.filter-nav .chip[for=tag-8]{background:#5755d9;color:#fff}.filter .filter-tag#tag-1:checked~.filter-body .filter-item:not([data-tag~=tag-1]),.filter .filter-tag#tag-2:checked~.filter-body .filter-item:not([data-tag~=tag-2]),.filter .filter-tag#tag-3:checked~.filter-body .filter-item:not([data-tag~=tag-3]),.filter .filter-tag#tag-4:checked~.filter-body .filter-item:not([data-tag~=tag-4]),.filter .filter-tag#tag-5:checked~.filter-body .filter-item:not([data-tag~=tag-5]),.filter .filter-tag#tag-6:checked~.filter-body .filter-item:not([data-tag~=tag-6]),.filter .filter-tag#tag-7:checked~.filter-body .filter-item:not([data-tag~=tag-7]),.filter .filter-tag#tag-8:checked~.filter-body .filter-item:not([data-tag~=tag-8]){display:none}.filter .filter-nav{margin:.4rem 0}.filter .filter-body{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.meter{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#f7f8f9;border:0;border-radius:.1rem;display:block;height:.8rem;width:100%}.meter::-webkit-meter-inner-element{display:block}.meter::-webkit-meter-bar,.meter::-webkit-meter-even-less-good-value,.meter::-webkit-meter-optimum-value,.meter::-webkit-meter-suboptimum-value{border-radius:.1rem}.meter::-webkit-meter-bar{background:#f7f8f9}.meter::-webkit-meter-optimum-value{background:#32b643}.meter::-webkit-meter-suboptimum-value{background:#ffb700}.meter::-webkit-meter-even-less-good-value{background:#e85600}.meter:-moz-meter-optimum,.meter:-moz-meter-sub-optimum,.meter:-moz-meter-sub-sub-optimum,.meter::-moz-meter-bar{border-radius:.1rem}.meter:-moz-meter-optimum::-moz-meter-bar{background:#32b643}.meter:-moz-meter-sub-optimum::-moz-meter-bar{background:#ffb700}.meter:-moz-meter-sub-sub-optimum::-moz-meter-bar{background:#e85600}.off-canvas{display:-ms-flexbox;display:flex;-ms-flex-flow:nowrap;flex-flow:nowrap;height:100%;position:relative;width:100%}.off-canvas .off-canvas-toggle{display:block;left:.4rem;position:absolute;top:.4rem;transition:none;z-index:1}.off-canvas .off-canvas-sidebar{background:#f7f8f9;bottom:0;left:0;min-width:10rem;overflow-y:auto;position:fixed;top:0;transform:translateX(-100%);transition:transform .25s;z-index:200}.off-canvas .off-canvas-content{-ms-flex:1 1 auto;flex:1 1 auto;height:100%;padding:.4rem .4rem .4rem 4rem}.off-canvas .off-canvas-overlay{background:rgba(48,55,66,.1);border-color:transparent;border-radius:0;bottom:0;display:none;height:100%;left:0;position:fixed;right:0;top:0;width:100%}.off-canvas .off-canvas-sidebar.active,.off-canvas .off-canvas-sidebar:target{transform:translateX(0)}.off-canvas .off-canvas-sidebar.active~.off-canvas-overlay,.off-canvas .off-canvas-sidebar:target~.off-canvas-overlay{display:block;z-index:100}@media (min-width:960px){.off-canvas.off-canvas-sidebar-show .off-canvas-toggle{display:none}.off-canvas.off-canvas-sidebar-show .off-canvas-sidebar{-ms-flex:0 0 auto;flex:0 0 auto;position:relative;transform:none}.off-canvas.off-canvas-sidebar-show .off-canvas-overlay{display:none!important}}.parallax{display:block;height:auto;position:relative;width:auto}.parallax .parallax-content{box-shadow:0 1rem 2.1rem rgba(48,55,66,.3);height:auto;transform:perspective(1000px);transform-style:preserve-3d;transition:all .4s ease;width:100%}.parallax .parallax-content::before{content:"";display:block;height:100%;left:0;position:absolute;top:0;width:100%}.parallax .parallax-front{align-items:center;color:#fff;display:-ms-flexbox;display:flex;-ms-flex-align:center;-ms-flex-pack:center;height:100%;justify-content:center;left:0;position:absolute;text-align:center;text-shadow:0 0 20px rgba(48,55,66,.75);top:0;transform:translateZ(50px) scale(.95);transition:transform .4s;width:100%;z-index:1}.parallax .parallax-top-left{height:50%;left:0;outline:0;position:absolute;top:0;width:50%;z-index:100}.parallax .parallax-top-left:focus~.parallax-content,.parallax .parallax-top-left:hover~.parallax-content{transform:perspective(1000px) rotateX(3deg) rotateY(-3deg)}.parallax .parallax-top-left:focus~.parallax-content::before,.parallax .parallax-top-left:hover~.parallax-content::before{background:linear-gradient(135deg,rgba(255,255,255,.35) 0,transparent 50%)}.parallax .parallax-top-left:focus~.parallax-content .parallax-front,.parallax .parallax-top-left:hover~.parallax-content .parallax-front{transform:translate3d(4.5px,4.5px,50px) scale(.95)}.parallax .parallax-top-right{height:50%;outline:0;position:absolute;right:0;top:0;width:50%;z-index:100}.parallax .parallax-top-right:focus~.parallax-content,.parallax .parallax-top-right:hover~.parallax-content{transform:perspective(1000px) rotateX(3deg) rotateY(3deg)}.parallax .parallax-top-right:focus~.parallax-content::before,.parallax .parallax-top-right:hover~.parallax-content::before{background:linear-gradient(-135deg,rgba(255,255,255,.35) 0,transparent 50%)}.parallax .parallax-top-right:focus~.parallax-content .parallax-front,.parallax .parallax-top-right:hover~.parallax-content .parallax-front{transform:translate3d(-4.5px,4.5px,50px) scale(.95)}.parallax .parallax-bottom-left{bottom:0;height:50%;left:0;outline:0;position:absolute;width:50%;z-index:100}.parallax .parallax-bottom-left:focus~.parallax-content,.parallax .parallax-bottom-left:hover~.parallax-content{transform:perspective(1000px) rotateX(-3deg) rotateY(-3deg)}.parallax .parallax-bottom-left:focus~.parallax-content::before,.parallax .parallax-bottom-left:hover~.parallax-content::before{background:linear-gradient(45deg,rgba(255,255,255,.35) 0,transparent 50%)}.parallax .parallax-bottom-left:focus~.parallax-content .parallax-front,.parallax .parallax-bottom-left:hover~.parallax-content .parallax-front{transform:translate3d(4.5px,-4.5px,50px) scale(.95)}.parallax .parallax-bottom-right{bottom:0;height:50%;outline:0;position:absolute;right:0;width:50%;z-index:100}.parallax .parallax-bottom-right:focus~.parallax-content,.parallax .parallax-bottom-right:hover~.parallax-content{transform:perspective(1000px) rotateX(-3deg) rotateY(3deg)}.parallax .parallax-bottom-right:focus~.parallax-content::before,.parallax .parallax-bottom-right:hover~.parallax-content::before{background:linear-gradient(-45deg,rgba(255,255,255,.35) 0,transparent 50%)}.parallax .parallax-bottom-right:focus~.parallax-content .parallax-front,.parallax .parallax-bottom-right:hover~.parallax-content .parallax-front{transform:translate3d(-4.5px,-4.5px,50px) scale(.95)}.progress{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#eef0f3;border:0;border-radius:.1rem;color:#5755d9;height:.2rem;position:relative;width:100%}.progress::-webkit-progress-bar{background:0 0;border-radius:.1rem}.progress::-webkit-progress-value{background:#5755d9;border-radius:.1rem}.progress::-moz-progress-bar{background:#5755d9;border-radius:.1rem}.progress:indeterminate{animation:progress-indeterminate 1.5s linear infinite;background:#eef0f3 linear-gradient(to right,#5755d9 30%,#eef0f3 30%) top left/150% 150% no-repeat}.progress:indeterminate::-moz-progress-bar{background:0 0}@keyframes progress-indeterminate{0%{background-position:200% 0}100%{background-position:-200% 0}}.slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;display:block;height:1.2rem;width:100%}.slider:focus{box-shadow:0 0 0 .1rem rgba(87,85,217,.2);outline:0}.slider.tooltip:not([data-tooltip])::after{content:attr(value)}.slider::-webkit-slider-thumb{-webkit-appearance:none;background:#5755d9;border:0;border-radius:50%;height:.6rem;margin-top:-.25rem;-webkit-transition:transform .2s;transition:transform .2s;width:.6rem}.slider::-moz-range-thumb{background:#5755d9;border:0;border-radius:50%;height:.6rem;-moz-transition:transform .2s;transition:transform .2s;width:.6rem}.slider::-ms-thumb{background:#5755d9;border:0;border-radius:50%;height:.6rem;-ms-transition:transform .2s;transition:transform .2s;width:.6rem}.slider:active::-webkit-slider-thumb{transform:scale(1.25)}.slider:active::-moz-range-thumb{transform:scale(1.25)}.slider:active::-ms-thumb{transform:scale(1.25)}.slider.disabled::-webkit-slider-thumb,.slider:disabled::-webkit-slider-thumb{background:#f7f8f9;transform:scale(1)}.slider.disabled::-moz-range-thumb,.slider:disabled::-moz-range-thumb{background:#f7f8f9;transform:scale(1)}.slider.disabled::-ms-thumb,.slider:disabled::-ms-thumb{background:#f7f8f9;transform:scale(1)}.slider::-webkit-slider-runnable-track{background:#eef0f3;border-radius:.1rem;height:.1rem;width:100%}.slider::-moz-range-track{background:#eef0f3;border-radius:.1rem;height:.1rem;width:100%}.slider::-ms-track{background:#eef0f3;border-radius:.1rem;height:.1rem;width:100%}.slider::-ms-fill-lower{background:#5755d9}.timeline .timeline-item{display:-ms-flexbox;display:flex;margin-bottom:1.2rem;position:relative}.timeline .timeline-item::before{background:#dadee4;content:"";height:100%;left:11px;position:absolute;top:1.2rem;width:2px}.timeline .timeline-item .timeline-left{-ms-flex:0 0 auto;flex:0 0 auto}.timeline .timeline-item .timeline-content{-ms-flex:1 1 auto;flex:1 1 auto;padding:2px 0 2px .8rem}.timeline .timeline-item .timeline-icon{align-items:center;border-radius:50%;color:#fff;display:-ms-flexbox;display:flex;-ms-flex-align:center;-ms-flex-pack:center;height:1.2rem;justify-content:center;text-align:center;width:1.2rem}.timeline .timeline-item .timeline-icon::before{border:.1rem solid #5755d9;border-radius:50%;content:"";display:block;height:.4rem;left:.4rem;position:absolute;top:.4rem;width:.4rem}.timeline .timeline-item .timeline-icon.icon-lg{background:#5755d9;line-height:1.2rem}.timeline .timeline-item .timeline-icon.icon-lg::before{content:none}.viewer-360{align-items:center;display:-ms-flexbox;display:flex;-ms-flex-align:center;-ms-flex-direction:column;flex-direction:column}.viewer-360 .viewer-slider[max="36"][value="1"]+.viewer-image{background-position-y:0}.viewer-360 .viewer-slider[max="36"][value="2"]+.viewer-image{background-position-y:2.8571428571%}.viewer-360 .viewer-slider[max="36"][value="3"]+.viewer-image{background-position-y:5.7142857143%}.viewer-360 .viewer-slider[max="36"][value="4"]+.viewer-image{background-position-y:8.5714285714%}.viewer-360 .viewer-slider[max="36"][value="5"]+.viewer-image{background-position-y:11.4285714286%}.viewer-360 .viewer-slider[max="36"][value="6"]+.viewer-image{background-position-y:14.2857142857%}.viewer-360 .viewer-slider[max="36"][value="7"]+.viewer-image{background-position-y:17.1428571429%}.viewer-360 .viewer-slider[max="36"][value="8"]+.viewer-image{background-position-y:20%}.viewer-360 .viewer-slider[max="36"][value="9"]+.viewer-image{background-position-y:22.8571428571%}.viewer-360 .viewer-slider[max="36"][value="10"]+.viewer-image{background-position-y:25.7142857143%}.viewer-360 .viewer-slider[max="36"][value="11"]+.viewer-image{background-position-y:28.5714285714%}.viewer-360 .viewer-slider[max="36"][value="12"]+.viewer-image{background-position-y:31.4285714286%}.viewer-360 .viewer-slider[max="36"][value="13"]+.viewer-image{background-position-y:34.2857142857%}.viewer-360 .viewer-slider[max="36"][value="14"]+.viewer-image{background-position-y:37.1428571429%}.viewer-360 .viewer-slider[max="36"][value="15"]+.viewer-image{background-position-y:40%}.viewer-360 .viewer-slider[max="36"][value="16"]+.viewer-image{background-position-y:42.8571428571%}.viewer-360 .viewer-slider[max="36"][value="17"]+.viewer-image{background-position-y:45.7142857143%}.viewer-360 .viewer-slider[max="36"][value="18"]+.viewer-image{background-position-y:48.5714285714%}.viewer-360 .viewer-slider[max="36"][value="19"]+.viewer-image{background-position-y:51.4285714286%}.viewer-360 .viewer-slider[max="36"][value="20"]+.viewer-image{background-position-y:54.2857142857%}.viewer-360 .viewer-slider[max="36"][value="21"]+.viewer-image{background-position-y:57.1428571429%}.viewer-360 .viewer-slider[max="36"][value="22"]+.viewer-image{background-position-y:60%}.viewer-360 .viewer-slider[max="36"][value="23"]+.viewer-image{background-position-y:62.8571428571%}.viewer-360 .viewer-slider[max="36"][value="24"]+.viewer-image{background-position-y:65.7142857143%}.viewer-360 .viewer-slider[max="36"][value="25"]+.viewer-image{background-position-y:68.5714285714%}.viewer-360 .viewer-slider[max="36"][value="26"]+.viewer-image{background-position-y:71.4285714286%}.viewer-360 .viewer-slider[max="36"][value="27"]+.viewer-image{background-position-y:74.2857142857%}.viewer-360 .viewer-slider[max="36"][value="28"]+.viewer-image{background-position-y:77.1428571429%}.viewer-360 .viewer-slider[max="36"][value="29"]+.viewer-image{background-position-y:80%}.viewer-360 .viewer-slider[max="36"][value="30"]+.viewer-image{background-position-y:82.8571428571%}.viewer-360 .viewer-slider[max="36"][value="31"]+.viewer-image{background-position-y:85.7142857143%}.viewer-360 .viewer-slider[max="36"][value="32"]+.viewer-image{background-position-y:88.5714285714%}.viewer-360 .viewer-slider[max="36"][value="33"]+.viewer-image{background-position-y:91.4285714286%}.viewer-360 .viewer-slider[max="36"][value="34"]+.viewer-image{background-position-y:94.2857142857%}.viewer-360 .viewer-slider[max="36"][value="35"]+.viewer-image{background-position-y:97.1428571429%}.viewer-360 .viewer-slider[max="36"][value="36"]+.viewer-image{background-position-y:100%}.viewer-360 .viewer-slider{cursor:ew-resize;-ms-flex-order:2;margin:1rem;order:2;width:60%}.viewer-360 .viewer-image{background-position-y:0;background-repeat:no-repeat;background-size:100%;-ms-flex-order:1;max-width:100%;order:1}
\ No newline at end of file
diff --git a/css/spectre-icons.min.css b/css/spectre-icons.min.css
index 9b6167caa..0276f7b84 100644
--- a/css/spectre-icons.min.css
+++ b/css/spectre-icons.min.css
@@ -1 +1 @@
-/*! Spectre.css Icons v0.5.8 | MIT License | github.com/picturepan2/spectre */.icon{box-sizing:border-box;display:inline-block;font-size:inherit;font-style:normal;height:1em;position:relative;text-indent:-9999px;vertical-align:middle;width:1em}.icon::after,.icon::before{content:"";display:block;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.icon.icon-2x{font-size:1.6rem}.icon.icon-3x{font-size:2.4rem}.icon.icon-4x{font-size:3.2rem}.accordion .icon,.btn .icon,.menu .icon,.toast .icon{vertical-align:-10%}.btn-lg .icon{vertical-align:-15%}.icon-arrow-down::before,.icon-arrow-left::before,.icon-arrow-right::before,.icon-arrow-up::before,.icon-back::before,.icon-downward::before,.icon-forward::before,.icon-upward::before{border:.1rem solid currentColor;border-bottom:0;border-right:0;height:.65em;width:.65em}.icon-arrow-down::before{transform:translate(-50%,-75%) rotate(225deg)}.icon-arrow-left::before{transform:translate(-25%,-50%) rotate(-45deg)}.icon-arrow-right::before{transform:translate(-75%,-50%) rotate(135deg)}.icon-arrow-up::before{transform:translate(-50%,-25%) rotate(45deg)}.icon-back::after,.icon-forward::after{background:currentColor;height:.1rem;width:.8em}.icon-downward::after,.icon-upward::after{background:currentColor;height:.8em;width:.1rem}.icon-back::after{left:55%}.icon-back::before{transform:translate(-50%,-50%) rotate(-45deg)}.icon-downward::after{top:45%}.icon-downward::before{transform:translate(-50%,-50%) rotate(-135deg)}.icon-forward::after{left:45%}.icon-forward::before{transform:translate(-50%,-50%) rotate(135deg)}.icon-upward::after{top:55%}.icon-upward::before{transform:translate(-50%,-50%) rotate(45deg)}.icon-caret::before{border-left:.3em solid transparent;border-right:.3em solid transparent;border-top:.3em solid currentColor;height:0;transform:translate(-50%,-25%);width:0}.icon-menu::before{background:currentColor;box-shadow:0 -.35em,0 .35em;height:.1rem;width:100%}.icon-apps::before{background:currentColor;box-shadow:-.35em -.35em,-.35em 0,-.35em .35em,0 -.35em,0 .35em,.35em -.35em,.35em 0,.35em .35em;height:3px;width:3px}.icon-resize-horiz::after,.icon-resize-horiz::before,.icon-resize-vert::after,.icon-resize-vert::before{border:.1rem solid currentColor;border-bottom:0;border-right:0;height:.45em;width:.45em}.icon-resize-horiz::before,.icon-resize-vert::before{transform:translate(-50%,-90%) rotate(45deg)}.icon-resize-horiz::after,.icon-resize-vert::after{transform:translate(-50%,-10%) rotate(225deg)}.icon-resize-horiz::before{transform:translate(-90%,-50%) rotate(-45deg)}.icon-resize-horiz::after{transform:translate(-10%,-50%) rotate(135deg)}.icon-more-horiz::before,.icon-more-vert::before{background:currentColor;border-radius:50%;box-shadow:-.4em 0,.4em 0;height:3px;width:3px}.icon-more-vert::before{box-shadow:0 -.4em,0 .4em}.icon-cross::before,.icon-minus::before,.icon-plus::before{background:currentColor;height:.1rem;width:100%}.icon-cross::after,.icon-plus::after{background:currentColor;height:100%;width:.1rem}.icon-cross::before{width:100%}.icon-cross::after{height:100%}.icon-cross::after,.icon-cross::before{transform:translate(-50%,-50%) rotate(45deg)}.icon-check::before{border:.1rem solid currentColor;border-right:0;border-top:0;height:.5em;transform:translate(-50%,-75%) rotate(-45deg);width:.9em}.icon-stop{border:.1rem solid currentColor;border-radius:50%}.icon-stop::before{background:currentColor;height:.1rem;transform:translate(-50%,-50%) rotate(45deg);width:1em}.icon-shutdown{border:.1rem solid currentColor;border-radius:50%;border-top-color:transparent}.icon-shutdown::before{background:currentColor;content:"";height:.5em;top:.1em;width:.1rem}.icon-refresh::before{border:.1rem solid currentColor;border-radius:50%;border-right-color:transparent;height:1em;width:1em}.icon-refresh::after{border:.2em solid currentColor;border-left-color:transparent;border-top-color:transparent;height:0;left:80%;top:20%;width:0}.icon-search::before{border:.1rem solid currentColor;border-radius:50%;height:.75em;left:5%;top:5%;transform:translate(0,0) rotate(45deg);width:.75em}.icon-search::after{background:currentColor;height:.1rem;left:80%;top:80%;transform:translate(-50%,-50%) rotate(45deg);width:.4em}.icon-edit::before{border:.1rem solid currentColor;height:.4em;transform:translate(-40%,-60%) rotate(-45deg);width:.85em}.icon-edit::after{border:.15em solid currentColor;border-right-color:transparent;border-top-color:transparent;height:0;left:5%;top:95%;transform:translate(0,-100%);width:0}.icon-delete::before{border:.1rem solid currentColor;border-bottom-left-radius:.1rem;border-bottom-right-radius:.1rem;border-top:0;height:.75em;top:60%;width:.75em}.icon-delete::after{background:currentColor;box-shadow:-.25em .2em,.25em .2em;height:.1rem;top:.05rem;width:.5em}.icon-share{border:.1rem solid currentColor;border-radius:.1rem;border-right:0;border-top:0}.icon-share::before{border:.1rem solid currentColor;border-left:0;border-top:0;height:.4em;left:100%;top:.25em;transform:translate(-125%,-50%) rotate(-45deg);width:.4em}.icon-share::after{border:.1rem solid currentColor;border-bottom:0;border-radius:75% 0;border-right:0;height:.5em;width:.6em}.icon-flag::before{background:currentColor;height:1em;left:15%;width:.1rem}.icon-flag::after{border:.1rem solid currentColor;border-bottom-right-radius:.1rem;border-left:0;border-top-right-radius:.1rem;height:.65em;left:60%;top:35%;width:.8em}.icon-bookmark::before{border:.1rem solid currentColor;border-bottom:0;border-top-left-radius:.1rem;border-top-right-radius:.1rem;height:.9em;width:.8em}.icon-bookmark::after{border:.1rem solid currentColor;border-bottom:0;border-left:0;border-radius:.1rem;height:.5em;transform:translate(-50%,35%) rotate(-45deg) skew(15deg,15deg);width:.5em}.icon-download,.icon-upload{border-bottom:.1rem solid currentColor}.icon-download::before,.icon-upload::before{border:.1rem solid currentColor;border-bottom:0;border-right:0;height:.5em;transform:translate(-50%,-60%) rotate(-135deg);width:.5em}.icon-download::after,.icon-upload::after{background:currentColor;height:.6em;top:40%;width:.1rem}.icon-upload::before{transform:translate(-50%,-60%) rotate(45deg)}.icon-upload::after{top:50%}.icon-copy::before{border:.1rem solid currentColor;border-bottom:0;border-radius:.1rem;border-right:0;height:.8em;left:40%;top:35%;width:.8em}.icon-copy::after{border:.1rem solid currentColor;border-radius:.1rem;height:.8em;left:60%;top:60%;width:.8em}.icon-time{border:.1rem solid currentColor;border-radius:50%}.icon-time::before{background:currentColor;height:.4em;transform:translate(-50%,-75%);width:.1rem}.icon-time::after{background:currentColor;height:.3em;transform:translate(-50%,-75%) rotate(90deg);transform-origin:50% 90%;width:.1rem}.icon-mail::before{border:.1rem solid currentColor;border-radius:.1rem;height:.8em;width:1em}.icon-mail::after{border:.1rem solid currentColor;border-right:0;border-top:0;height:.5em;transform:translate(-50%,-90%) rotate(-45deg) skew(10deg,10deg);width:.5em}.icon-people::before{border:.1rem solid currentColor;border-radius:50%;height:.45em;top:25%;width:.45em}.icon-people::after{border:.1rem solid currentColor;border-radius:50% 50% 0 0;height:.4em;top:75%;width:.9em}.icon-message{border:.1rem solid currentColor;border-bottom:0;border-radius:.1rem;border-right:0}.icon-message::before{border:.1rem solid currentColor;border-bottom-right-radius:.1rem;border-left:0;border-top:0;height:.8em;left:65%;top:40%;width:.7em}.icon-message::after{background:currentColor;border-radius:.1rem;height:.3em;left:10%;top:100%;transform:translate(0,-90%) rotate(45deg);width:.1rem}.icon-photo{border:.1rem solid currentColor;border-radius:.1rem}.icon-photo::before{border:.1rem solid currentColor;border-radius:50%;height:.25em;left:35%;top:35%;width:.25em}.icon-photo::after{border:.1rem solid currentColor;border-bottom:0;border-left:0;height:.5em;left:60%;transform:translate(-50%,25%) rotate(-45deg);width:.5em}.icon-link::after,.icon-link::before{border:.1rem solid currentColor;border-radius:5em 0 0 5em;border-right:0;height:.5em;width:.75em}.icon-link::before{transform:translate(-70%,-45%) rotate(-45deg)}.icon-link::after{transform:translate(-30%,-55%) rotate(135deg)}.icon-location::before{border:.1rem solid currentColor;border-radius:50% 50% 50% 0;height:.8em;transform:translate(-50%,-60%) rotate(-45deg);width:.8em}.icon-location::after{border:.1rem solid currentColor;border-radius:50%;height:.2em;transform:translate(-50%,-80%);width:.2em}.icon-emoji{border:.1rem solid currentColor;border-radius:50%}.icon-emoji::before{border-radius:50%;box-shadow:-.17em -.1em,.17em -.1em;height:.15em;width:.15em}.icon-emoji::after{border:.1rem solid currentColor;border-bottom-color:transparent;border-radius:50%;border-right-color:transparent;height:.5em;transform:translate(-50%,-40%) rotate(-135deg);width:.5em}
\ No newline at end of file
+/*! Spectre.css Icons v0.5.9 | MIT License | github.com/picturepan2/spectre */.icon{box-sizing:border-box;display:inline-block;font-size:inherit;font-style:normal;height:1em;position:relative;text-indent:-9999px;vertical-align:middle;width:1em}.icon::after,.icon::before{content:"";display:block;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.icon.icon-2x{font-size:1.6rem}.icon.icon-3x{font-size:2.4rem}.icon.icon-4x{font-size:3.2rem}.accordion .icon,.btn .icon,.menu .icon,.toast .icon{vertical-align:-10%}.btn-lg .icon{vertical-align:-15%}.icon-arrow-down::before,.icon-arrow-left::before,.icon-arrow-right::before,.icon-arrow-up::before,.icon-back::before,.icon-downward::before,.icon-forward::before,.icon-upward::before{border:.1rem solid currentColor;border-bottom:0;border-right:0;height:.65em;width:.65em}.icon-arrow-down::before{transform:translate(-50%,-75%) rotate(225deg)}.icon-arrow-left::before{transform:translate(-25%,-50%) rotate(-45deg)}.icon-arrow-right::before{transform:translate(-75%,-50%) rotate(135deg)}.icon-arrow-up::before{transform:translate(-50%,-25%) rotate(45deg)}.icon-back::after,.icon-forward::after{background:currentColor;height:.1rem;width:.8em}.icon-downward::after,.icon-upward::after{background:currentColor;height:.8em;width:.1rem}.icon-back::after{left:55%}.icon-back::before{transform:translate(-50%,-50%) rotate(-45deg)}.icon-downward::after{top:45%}.icon-downward::before{transform:translate(-50%,-50%) rotate(-135deg)}.icon-forward::after{left:45%}.icon-forward::before{transform:translate(-50%,-50%) rotate(135deg)}.icon-upward::after{top:55%}.icon-upward::before{transform:translate(-50%,-50%) rotate(45deg)}.icon-caret::before{border-left:.3em solid transparent;border-right:.3em solid transparent;border-top:.3em solid currentColor;height:0;transform:translate(-50%,-25%);width:0}.icon-menu::before{background:currentColor;box-shadow:0 -.35em,0 .35em;height:.1rem;width:100%}.icon-apps::before{background:currentColor;box-shadow:-.35em -.35em,-.35em 0,-.35em .35em,0 -.35em,0 .35em,.35em -.35em,.35em 0,.35em .35em;height:3px;width:3px}.icon-resize-horiz::after,.icon-resize-horiz::before,.icon-resize-vert::after,.icon-resize-vert::before{border:.1rem solid currentColor;border-bottom:0;border-right:0;height:.45em;width:.45em}.icon-resize-horiz::before,.icon-resize-vert::before{transform:translate(-50%,-90%) rotate(45deg)}.icon-resize-horiz::after,.icon-resize-vert::after{transform:translate(-50%,-10%) rotate(225deg)}.icon-resize-horiz::before{transform:translate(-90%,-50%) rotate(-45deg)}.icon-resize-horiz::after{transform:translate(-10%,-50%) rotate(135deg)}.icon-more-horiz::before,.icon-more-vert::before{background:currentColor;border-radius:50%;box-shadow:-.4em 0,.4em 0;height:3px;width:3px}.icon-more-vert::before{box-shadow:0 -.4em,0 .4em}.icon-cross::before,.icon-minus::before,.icon-plus::before{background:currentColor;height:.1rem;width:100%}.icon-cross::after,.icon-plus::after{background:currentColor;height:100%;width:.1rem}.icon-cross::before{width:100%}.icon-cross::after{height:100%}.icon-cross::after,.icon-cross::before{transform:translate(-50%,-50%) rotate(45deg)}.icon-check::before{border:.1rem solid currentColor;border-right:0;border-top:0;height:.5em;transform:translate(-50%,-75%) rotate(-45deg);width:.9em}.icon-stop{border:.1rem solid currentColor;border-radius:50%}.icon-stop::before{background:currentColor;height:.1rem;transform:translate(-50%,-50%) rotate(45deg);width:1em}.icon-shutdown{border:.1rem solid currentColor;border-radius:50%;border-top-color:transparent}.icon-shutdown::before{background:currentColor;content:"";height:.5em;top:.1em;width:.1rem}.icon-refresh::before{border:.1rem solid currentColor;border-radius:50%;border-right-color:transparent;height:1em;width:1em}.icon-refresh::after{border:.2em solid currentColor;border-left-color:transparent;border-top-color:transparent;height:0;left:80%;top:20%;width:0}.icon-search::before{border:.1rem solid currentColor;border-radius:50%;height:.75em;left:5%;top:5%;transform:translate(0,0) rotate(45deg);width:.75em}.icon-search::after{background:currentColor;height:.1rem;left:80%;top:80%;transform:translate(-50%,-50%) rotate(45deg);width:.4em}.icon-edit::before{border:.1rem solid currentColor;height:.4em;transform:translate(-40%,-60%) rotate(-45deg);width:.85em}.icon-edit::after{border:.15em solid currentColor;border-right-color:transparent;border-top-color:transparent;height:0;left:5%;top:95%;transform:translate(0,-100%);width:0}.icon-delete::before{border:.1rem solid currentColor;border-bottom-left-radius:.1rem;border-bottom-right-radius:.1rem;border-top:0;height:.75em;top:60%;width:.75em}.icon-delete::after{background:currentColor;box-shadow:-.25em .2em,.25em .2em;height:.1rem;top:.05rem;width:.5em}.icon-share{border:.1rem solid currentColor;border-radius:.1rem;border-right:0;border-top:0}.icon-share::before{border:.1rem solid currentColor;border-left:0;border-top:0;height:.4em;left:100%;top:.25em;transform:translate(-125%,-50%) rotate(-45deg);width:.4em}.icon-share::after{border:.1rem solid currentColor;border-bottom:0;border-radius:75% 0;border-right:0;height:.5em;width:.6em}.icon-flag::before{background:currentColor;height:1em;left:15%;width:.1rem}.icon-flag::after{border:.1rem solid currentColor;border-bottom-right-radius:.1rem;border-left:0;border-top-right-radius:.1rem;height:.65em;left:60%;top:35%;width:.8em}.icon-bookmark::before{border:.1rem solid currentColor;border-bottom:0;border-top-left-radius:.1rem;border-top-right-radius:.1rem;height:.9em;width:.8em}.icon-bookmark::after{border:.1rem solid currentColor;border-bottom:0;border-left:0;border-radius:.1rem;height:.5em;transform:translate(-50%,35%) rotate(-45deg) skew(15deg,15deg);width:.5em}.icon-download,.icon-upload{border-bottom:.1rem solid currentColor}.icon-download::before,.icon-upload::before{border:.1rem solid currentColor;border-bottom:0;border-right:0;height:.5em;transform:translate(-50%,-60%) rotate(-135deg);width:.5em}.icon-download::after,.icon-upload::after{background:currentColor;height:.6em;top:40%;width:.1rem}.icon-upload::before{transform:translate(-50%,-60%) rotate(45deg)}.icon-upload::after{top:50%}.icon-copy::before{border:.1rem solid currentColor;border-bottom:0;border-radius:.1rem;border-right:0;height:.8em;left:40%;top:35%;width:.8em}.icon-copy::after{border:.1rem solid currentColor;border-radius:.1rem;height:.8em;left:60%;top:60%;width:.8em}.icon-time{border:.1rem solid currentColor;border-radius:50%}.icon-time::before{background:currentColor;height:.4em;transform:translate(-50%,-75%);width:.1rem}.icon-time::after{background:currentColor;height:.3em;transform:translate(-50%,-75%) rotate(90deg);transform-origin:50% 90%;width:.1rem}.icon-mail::before{border:.1rem solid currentColor;border-radius:.1rem;height:.8em;width:1em}.icon-mail::after{border:.1rem solid currentColor;border-right:0;border-top:0;height:.5em;transform:translate(-50%,-90%) rotate(-45deg) skew(10deg,10deg);width:.5em}.icon-people::before{border:.1rem solid currentColor;border-radius:50%;height:.45em;top:25%;width:.45em}.icon-people::after{border:.1rem solid currentColor;border-radius:50% 50% 0 0;height:.4em;top:75%;width:.9em}.icon-message{border:.1rem solid currentColor;border-bottom:0;border-radius:.1rem;border-right:0}.icon-message::before{border:.1rem solid currentColor;border-bottom-right-radius:.1rem;border-left:0;border-top:0;height:.8em;left:65%;top:40%;width:.7em}.icon-message::after{background:currentColor;border-radius:.1rem;height:.3em;left:10%;top:100%;transform:translate(0,-90%) rotate(45deg);width:.1rem}.icon-photo{border:.1rem solid currentColor;border-radius:.1rem}.icon-photo::before{border:.1rem solid currentColor;border-radius:50%;height:.25em;left:35%;top:35%;width:.25em}.icon-photo::after{border:.1rem solid currentColor;border-bottom:0;border-left:0;height:.5em;left:60%;transform:translate(-50%,25%) rotate(-45deg);width:.5em}.icon-link::after,.icon-link::before{border:.1rem solid currentColor;border-radius:5em 0 0 5em;border-right:0;height:.5em;width:.75em}.icon-link::before{transform:translate(-70%,-45%) rotate(-45deg)}.icon-link::after{transform:translate(-30%,-55%) rotate(135deg)}.icon-location::before{border:.1rem solid currentColor;border-radius:50% 50% 50% 0;height:.8em;transform:translate(-50%,-60%) rotate(-45deg);width:.8em}.icon-location::after{border:.1rem solid currentColor;border-radius:50%;height:.2em;transform:translate(-50%,-80%);width:.2em}.icon-emoji{border:.1rem solid currentColor;border-radius:50%}.icon-emoji::before{border-radius:50%;box-shadow:-.17em -.1em,.17em -.1em;height:.15em;width:.15em}.icon-emoji::after{border:.1rem solid currentColor;border-bottom-color:transparent;border-radius:50%;border-right-color:transparent;height:.5em;transform:translate(-50%,-40%) rotate(-135deg);width:.5em}
\ No newline at end of file
diff --git a/css/spectre.min.css b/css/spectre.min.css
index 8df0bf64f..0fe23d9c0 100644
--- a/css/spectre.min.css
+++ b/css/spectre.min.css
@@ -1 +1 @@
-/*! Spectre.css v0.5.8 | MIT License | github.com/picturepan2/spectre */html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}hr{box-sizing:content-box;height:0;overflow:visible}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}address{font-style:normal}b,strong{font-weight:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:"SF Mono","Segoe UI Mono","Roboto Mono",Menlo,Courier,monospace;font-size:1em}dfn{font-style:italic}small{font-size:80%;font-weight:400}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}fieldset{border:0;margin:0;padding:0}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item;outline:0}canvas{display:inline-block}template{display:none}[hidden]{display:none}*,::after,::before{box-sizing:inherit}html{box-sizing:border-box;font-size:20px;line-height:1.5;-webkit-tap-highlight-color:transparent}body{background:#fff;color:#3b4351;font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;font-size:.8rem;overflow-x:hidden;text-rendering:optimizeLegibility}a{color:#5755d9;outline:0;text-decoration:none}a:focus{box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}a.active,a:active,a:focus,a:hover{color:#302ecd;text-decoration:underline}a:visited{color:#807fe2}h1,h2,h3,h4,h5,h6{color:inherit;font-weight:500;line-height:1.2;margin-bottom:.5em;margin-top:0}.h1,.h2,.h3,.h4,.h5,.h6{font-weight:500}.h1,h1{font-size:2rem}.h2,h2{font-size:1.6rem}.h3,h3{font-size:1.4rem}.h4,h4{font-size:1.2rem}.h5,h5{font-size:1rem}.h6,h6{font-size:.8rem}p{margin:0 0 1.2rem}a,ins,u{-webkit-text-decoration-skip:ink edges;text-decoration-skip:ink edges}abbr[title]{border-bottom:.05rem dotted;cursor:help;text-decoration:none}kbd{background:#303742;border-radius:.1rem;color:#fff;font-size:.7rem;line-height:1.25;padding:.1rem .2rem}mark{background:#ffe9b3;border-bottom:.05rem solid #ffd367;border-radius:.1rem;color:#3b4351;padding:.05rem .1rem 0}blockquote{border-left:.1rem solid #dadee4;margin-left:0;padding:.4rem .8rem}blockquote p:last-child{margin-bottom:0}ol,ul{margin:.8rem 0 .8rem .8rem;padding:0}ol ol,ol ul,ul ol,ul ul{margin:.8rem 0 .8rem .8rem}ol li,ul li{margin-top:.4rem}ul{list-style:disc inside}ul ul{list-style-type:circle}ol{list-style:decimal inside}ol ol{list-style-type:lower-alpha}dl dt{font-weight:700}dl dd{margin:.4rem 0 .8rem 0}.lang-zh,.lang-zh-hans,html:lang(zh),html:lang(zh-Hans){font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",sans-serif}.lang-zh-hant,html:lang(zh-Hant){font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang TC","Hiragino Sans CNS","Microsoft JhengHei","Helvetica Neue",sans-serif}.lang-ja,html:lang(ja){font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Hiragino Sans","Hiragino Kaku Gothic Pro","Yu Gothic",YuGothic,Meiryo,"Helvetica Neue",sans-serif}.lang-ko,html:lang(ko){font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Malgun Gothic","Helvetica Neue",sans-serif}.lang-cjk ins,.lang-cjk u,:lang(ja) ins,:lang(ja) u,:lang(zh) ins,:lang(zh) u{border-bottom:.05rem solid;text-decoration:none}.lang-cjk del+del,.lang-cjk del+s,.lang-cjk ins+ins,.lang-cjk ins+u,.lang-cjk s+del,.lang-cjk s+s,.lang-cjk u+ins,.lang-cjk u+u,:lang(ja) del+del,:lang(ja) del+s,:lang(ja) ins+ins,:lang(ja) ins+u,:lang(ja) s+del,:lang(ja) s+s,:lang(ja) u+ins,:lang(ja) u+u,:lang(zh) del+del,:lang(zh) del+s,:lang(zh) ins+ins,:lang(zh) ins+u,:lang(zh) s+del,:lang(zh) s+s,:lang(zh) u+ins,:lang(zh) u+u{margin-left:.125em}.table{border-collapse:collapse;border-spacing:0;text-align:left;width:100%}.table.table-striped tbody tr:nth-of-type(odd){background:#f7f8f9}.table tbody tr.active,.table.table-striped tbody tr.active{background:#eef0f3}.table.table-hover tbody tr:hover{background:#eef0f3}.table.table-scroll{display:block;overflow-x:auto;padding-bottom:.75rem;white-space:nowrap}.table td,.table th{border-bottom:.05rem solid #dadee4;padding:.6rem .4rem}.table th{border-bottom-width:.1rem}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#fff;border:.05rem solid #5755d9;border-radius:.1rem;color:#5755d9;cursor:pointer;display:inline-block;font-size:.8rem;height:1.8rem;line-height:1.2rem;outline:0;padding:.25rem .4rem;text-align:center;text-decoration:none;transition:background .2s,border .2s,box-shadow .2s,color .2s;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap}.btn:focus{box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}.btn:focus,.btn:hover{background:#f1f1fc;border-color:#4b48d6;text-decoration:none}.btn.active,.btn:active{background:#4b48d6;border-color:#3634d2;color:#fff;text-decoration:none}.btn.active.loading::after,.btn:active.loading::after{border-bottom-color:#fff;border-left-color:#fff}.btn.disabled,.btn:disabled,.btn[disabled]{cursor:default;opacity:.5;pointer-events:none}.btn.btn-primary{background:#5755d9;border-color:#4b48d6;color:#fff}.btn.btn-primary:focus,.btn.btn-primary:hover{background:#4240d4;border-color:#3634d2;color:#fff}.btn.btn-primary.active,.btn.btn-primary:active{background:#3a38d2;border-color:#302ecd;color:#fff}.btn.btn-primary.loading::after{border-bottom-color:#fff;border-left-color:#fff}.btn.btn-success{background:#32b643;border-color:#2faa3f;color:#fff}.btn.btn-success:focus{box-shadow:0 0 0 .1rem rgba(50,182,67,.2)}.btn.btn-success:focus,.btn.btn-success:hover{background:#30ae40;border-color:#2da23c;color:#fff}.btn.btn-success.active,.btn.btn-success:active{background:#2a9a39;border-color:#278e34;color:#fff}.btn.btn-success.loading::after{border-bottom-color:#fff;border-left-color:#fff}.btn.btn-error{background:#e85600;border-color:#d95000;color:#fff}.btn.btn-error:focus{box-shadow:0 0 0 .1rem rgba(232,86,0,.2)}.btn.btn-error:focus,.btn.btn-error:hover{background:#de5200;border-color:#cf4d00;color:#fff}.btn.btn-error.active,.btn.btn-error:active{background:#c44900;border-color:#b54300;color:#fff}.btn.btn-error.loading::after{border-bottom-color:#fff;border-left-color:#fff}.btn.btn-link{background:0 0;border-color:transparent;color:#5755d9}.btn.btn-link.active,.btn.btn-link:active,.btn.btn-link:focus,.btn.btn-link:hover{color:#302ecd}.btn.btn-sm{font-size:.7rem;height:1.4rem;padding:.05rem .3rem}.btn.btn-lg{font-size:.9rem;height:2rem;padding:.35rem .6rem}.btn.btn-block{display:block;width:100%}.btn.btn-action{padding-left:0;padding-right:0;width:1.8rem}.btn.btn-action.btn-sm{width:1.4rem}.btn.btn-action.btn-lg{width:2rem}.btn.btn-clear{background:0 0;border:0;color:currentColor;height:1rem;line-height:.8rem;margin-left:.2rem;margin-right:-2px;opacity:1;padding:.1rem;text-decoration:none;width:1rem}.btn.btn-clear:focus,.btn.btn-clear:hover{background:rgba(247,248,249,.5);opacity:.95}.btn.btn-clear::before{content:"\2715"}.btn-group{display:inline-flex;display:-ms-inline-flexbox;-ms-flex-wrap:wrap;flex-wrap:wrap}.btn-group .btn{-ms-flex:1 0 auto;flex:1 0 auto}.btn-group .btn:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.btn-group .btn:not(:first-child):not(:last-child){border-radius:0;margin-left:-.05rem}.btn-group .btn:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0;margin-left:-.05rem}.btn-group .btn.active,.btn-group .btn:active,.btn-group .btn:focus,.btn-group .btn:hover{z-index:1}.btn-group.btn-group-block{display:flex;display:-ms-flexbox}.btn-group.btn-group-block .btn{-ms-flex:1 0 0;flex:1 0 0}.form-group:not(:last-child){margin-bottom:.4rem}fieldset{margin-bottom:.8rem}legend{font-size:.9rem;font-weight:500;margin-bottom:.8rem}.form-label{display:block;line-height:1.2rem;padding:.3rem 0}.form-label.label-sm{font-size:.7rem;padding:.1rem 0}.form-label.label-lg{font-size:.9rem;padding:.4rem 0}.form-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#fff;background-image:none;border:.05rem solid #bcc3ce;border-radius:.1rem;color:#3b4351;display:block;font-size:.8rem;height:1.8rem;line-height:1.2rem;max-width:100%;outline:0;padding:.25rem .4rem;position:relative;transition:background .2s,border .2s,box-shadow .2s,color .2s;width:100%}.form-input:focus{border-color:#5755d9;box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}.form-input:-ms-input-placeholder{color:#bcc3ce}.form-input::-ms-input-placeholder{color:#bcc3ce}.form-input::placeholder{color:#bcc3ce}.form-input.input-sm{font-size:.7rem;height:1.4rem;padding:.05rem .3rem}.form-input.input-lg{font-size:.9rem;height:2rem;padding:.35rem .6rem}.form-input.input-inline{display:inline-block;vertical-align:middle;width:auto}.form-input[type=file]{height:auto}textarea.form-input,textarea.form-input.input-lg,textarea.form-input.input-sm{height:auto}.form-input-hint{color:#bcc3ce;font-size:.7rem;margin-top:.2rem}.has-success .form-input-hint,.is-success+.form-input-hint{color:#32b643}.has-error .form-input-hint,.is-error+.form-input-hint{color:#e85600}.form-select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#fff;border:.05rem solid #bcc3ce;border-radius:.1rem;color:inherit;font-size:.8rem;height:1.8rem;line-height:1.2rem;outline:0;padding:.25rem .4rem;vertical-align:middle;width:100%}.form-select:focus{border-color:#5755d9;box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}.form-select::-ms-expand{display:none}.form-select.select-sm{font-size:.7rem;height:1.4rem;padding:.05rem 1.1rem .05rem .3rem}.form-select.select-lg{font-size:.9rem;height:2rem;padding:.35rem 1.4rem .35rem .6rem}.form-select[multiple],.form-select[size]{height:auto;padding:.25rem .4rem}.form-select[multiple] option,.form-select[size] option{padding:.1rem .2rem}.form-select:not([multiple]):not([size]){background:#fff url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%204%205'%3E%3Cpath%20fill='%23667189'%20d='M2%200L0%202h4zm0%205L0%203h4z'/%3E%3C/svg%3E") no-repeat right .35rem center/.4rem .5rem;padding-right:1.2rem}.has-icon-left,.has-icon-right{position:relative}.has-icon-left .form-icon,.has-icon-right .form-icon{height:.8rem;margin:0 .25rem;position:absolute;top:50%;transform:translateY(-50%);width:.8rem;z-index:2}.has-icon-left .form-icon{left:.05rem}.has-icon-left .form-input{padding-left:1.3rem}.has-icon-right .form-icon{right:.05rem}.has-icon-right .form-input{padding-right:1.3rem}.form-checkbox,.form-radio,.form-switch{display:block;line-height:1.2rem;margin:.2rem 0;min-height:1.4rem;padding:.1rem .4rem .1rem 1.2rem;position:relative}.form-checkbox input,.form-radio input,.form-switch input{clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;position:absolute;width:1px}.form-checkbox input:focus+.form-icon,.form-radio input:focus+.form-icon,.form-switch input:focus+.form-icon{border-color:#5755d9;box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}.form-checkbox input:checked+.form-icon,.form-radio input:checked+.form-icon,.form-switch input:checked+.form-icon{background:#5755d9;border-color:#5755d9}.form-checkbox .form-icon,.form-radio .form-icon,.form-switch .form-icon{border:.05rem solid #bcc3ce;cursor:pointer;display:inline-block;position:absolute;transition:background .2s,border .2s,box-shadow .2s,color .2s}.form-checkbox.input-sm,.form-radio.input-sm,.form-switch.input-sm{font-size:.7rem;margin:0}.form-checkbox.input-lg,.form-radio.input-lg,.form-switch.input-lg{font-size:.9rem;margin:.3rem 0}.form-checkbox .form-icon,.form-radio .form-icon{background:#fff;height:.8rem;left:0;top:.3rem;width:.8rem}.form-checkbox input:active+.form-icon,.form-radio input:active+.form-icon{background:#eef0f3}.form-checkbox .form-icon{border-radius:.1rem}.form-checkbox input:checked+.form-icon::before{background-clip:padding-box;border:.1rem solid #fff;border-left-width:0;border-top-width:0;content:"";height:9px;left:50%;margin-left:-3px;margin-top:-6px;position:absolute;top:50%;transform:rotate(45deg);width:6px}.form-checkbox input:indeterminate+.form-icon{background:#5755d9;border-color:#5755d9}.form-checkbox input:indeterminate+.form-icon::before{background:#fff;content:"";height:2px;left:50%;margin-left:-5px;margin-top:-1px;position:absolute;top:50%;width:10px}.form-radio .form-icon{border-radius:50%}.form-radio input:checked+.form-icon::before{background:#fff;border-radius:50%;content:"";height:6px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:6px}.form-switch{padding-left:2rem}.form-switch .form-icon{background:#bcc3ce;background-clip:padding-box;border-radius:.45rem;height:.9rem;left:0;top:.25rem;width:1.6rem}.form-switch .form-icon::before{background:#fff;border-radius:50%;content:"";display:block;height:.8rem;left:0;position:absolute;top:0;transition:background .2s,border .2s,box-shadow .2s,color .2s,left .2s;width:.8rem}.form-switch input:checked+.form-icon::before{left:14px}.form-switch input:active+.form-icon::before{background:#f7f8f9}.input-group{display:flex;display:-ms-flexbox}.input-group .input-group-addon{background:#f7f8f9;border:.05rem solid #bcc3ce;border-radius:.1rem;line-height:1.2rem;padding:.25rem .4rem;white-space:nowrap}.input-group .input-group-addon.addon-sm{font-size:.7rem;padding:.05rem .3rem}.input-group .input-group-addon.addon-lg{font-size:.9rem;padding:.35rem .6rem}.input-group .form-input,.input-group .form-select{-ms-flex:1 1 auto;flex:1 1 auto;width:1%}.input-group .input-group-btn{z-index:1}.input-group .form-input:first-child:not(:last-child),.input-group .form-select:first-child:not(:last-child),.input-group .input-group-addon:first-child:not(:last-child),.input-group .input-group-btn:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.input-group .form-input:not(:first-child):not(:last-child),.input-group .form-select:not(:first-child):not(:last-child),.input-group .input-group-addon:not(:first-child):not(:last-child),.input-group .input-group-btn:not(:first-child):not(:last-child){border-radius:0;margin-left:-.05rem}.input-group .form-input:last-child:not(:first-child),.input-group .form-select:last-child:not(:first-child),.input-group .input-group-addon:last-child:not(:first-child),.input-group .input-group-btn:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0;margin-left:-.05rem}.input-group .form-input:focus,.input-group .form-select:focus,.input-group .input-group-addon:focus,.input-group .input-group-btn:focus{z-index:2}.input-group .form-select{width:auto}.input-group.input-inline{display:inline-flex;display:-ms-inline-flexbox}.form-input.is-success,.form-select.is-success,.has-success .form-input,.has-success .form-select{background:#f9fdfa;border-color:#32b643}.form-input.is-success:focus,.form-select.is-success:focus,.has-success .form-input:focus,.has-success .form-select:focus{box-shadow:0 0 0 .1rem rgba(50,182,67,.2)}.form-input.is-error,.form-select.is-error,.has-error .form-input,.has-error .form-select{background:#fffaf7;border-color:#e85600}.form-input.is-error:focus,.form-select.is-error:focus,.has-error .form-input:focus,.has-error .form-select:focus{box-shadow:0 0 0 .1rem rgba(232,86,0,.2)}.form-checkbox.is-error .form-icon,.form-radio.is-error .form-icon,.form-switch.is-error .form-icon,.has-error .form-checkbox .form-icon,.has-error .form-radio .form-icon,.has-error .form-switch .form-icon{border-color:#e85600}.form-checkbox.is-error input:checked+.form-icon,.form-radio.is-error input:checked+.form-icon,.form-switch.is-error input:checked+.form-icon,.has-error .form-checkbox input:checked+.form-icon,.has-error .form-radio input:checked+.form-icon,.has-error .form-switch input:checked+.form-icon{background:#e85600;border-color:#e85600}.form-checkbox.is-error input:focus+.form-icon,.form-radio.is-error input:focus+.form-icon,.form-switch.is-error input:focus+.form-icon,.has-error .form-checkbox input:focus+.form-icon,.has-error .form-radio input:focus+.form-icon,.has-error .form-switch input:focus+.form-icon{border-color:#e85600;box-shadow:0 0 0 .1rem rgba(232,86,0,.2)}.form-checkbox.is-error input:indeterminate+.form-icon,.has-error .form-checkbox input:indeterminate+.form-icon{background:#e85600;border-color:#e85600}.form-input:not(:placeholder-shown):invalid{border-color:#e85600}.form-input:not(:placeholder-shown):invalid:focus{background:#fffaf7;box-shadow:0 0 0 .1rem rgba(232,86,0,.2)}.form-input:not(:placeholder-shown):invalid+.form-input-hint{color:#e85600}.form-input.disabled,.form-input:disabled,.form-select.disabled,.form-select:disabled{background-color:#eef0f3;cursor:not-allowed;opacity:.5}.form-input[readonly]{background-color:#f7f8f9}input.disabled+.form-icon,input:disabled+.form-icon{background:#eef0f3;cursor:not-allowed;opacity:.5}.form-switch input.disabled+.form-icon::before,.form-switch input:disabled+.form-icon::before{background:#fff}.form-horizontal{padding:.4rem 0}.form-horizontal .form-group{display:flex;display:-ms-flexbox;-ms-flex-wrap:wrap;flex-wrap:wrap}.form-inline{display:inline-block}.label{background:#eef0f3;border-radius:.1rem;color:#455060;display:inline-block;line-height:1.25;padding:.1rem .2rem}.label.label-rounded{border-radius:5rem;padding-left:.4rem;padding-right:.4rem}.label.label-primary{background:#5755d9;color:#fff}.label.label-secondary{background:#f1f1fc;color:#5755d9}.label.label-success{background:#32b643;color:#fff}.label.label-warning{background:#ffb700;color:#fff}.label.label-error{background:#e85600;color:#fff}code{background:#fcf2f2;border-radius:.1rem;color:#d73e48;font-size:85%;line-height:1.25;padding:.1rem .2rem}.code{border-radius:.1rem;color:#3b4351;position:relative}.code::before{color:#bcc3ce;content:attr(data-lang);font-size:.7rem;position:absolute;right:.4rem;top:.1rem}.code code{background:#f7f8f9;color:inherit;display:block;line-height:1.5;overflow-x:auto;padding:1rem;width:100%}.img-responsive{display:block;height:auto;max-width:100%}.img-fit-cover{object-fit:cover}.img-fit-contain{object-fit:contain}.video-responsive{display:block;overflow:hidden;padding:0;position:relative;width:100%}.video-responsive::before{content:"";display:block;padding-bottom:56.25%}.video-responsive embed,.video-responsive iframe,.video-responsive object{border:0;bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%}video.video-responsive{height:auto;max-width:100%}video.video-responsive::before{content:none}.video-responsive-4-3::before{padding-bottom:75%}.video-responsive-1-1::before{padding-bottom:100%}.figure{margin:0 0 .4rem 0}.figure .figure-caption{color:#66758c;margin-top:.4rem}.container{margin-left:auto;margin-right:auto;padding-left:.4rem;padding-right:.4rem;width:100%}.container.grid-xl{max-width:1296px}.container.grid-lg{max-width:976px}.container.grid-md{max-width:856px}.container.grid-sm{max-width:616px}.container.grid-xs{max-width:496px}.show-lg,.show-md,.show-sm,.show-xl,.show-xs{display:none!important}.columns{display:flex;display:-ms-flexbox;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-left:-.4rem;margin-right:-.4rem}.columns.col-gapless{margin-left:0;margin-right:0}.columns.col-gapless>.column{padding-left:0;padding-right:0}.columns.col-oneline{-ms-flex-wrap:nowrap;flex-wrap:nowrap;overflow-x:auto}.column{-ms-flex:1;flex:1;max-width:100%;padding-left:.4rem;padding-right:.4rem}.column.col-1,.column.col-10,.column.col-11,.column.col-12,.column.col-2,.column.col-3,.column.col-4,.column.col-5,.column.col-6,.column.col-7,.column.col-8,.column.col-9,.column.col-auto{-ms-flex:none;flex:none}.col-12{width:100%}.col-11{width:91.66666667%}.col-10{width:83.33333333%}.col-9{width:75%}.col-8{width:66.66666667%}.col-7{width:58.33333333%}.col-6{width:50%}.col-5{width:41.66666667%}.col-4{width:33.33333333%}.col-3{width:25%}.col-2{width:16.66666667%}.col-1{width:8.33333333%}.col-auto{-ms-flex:0 0 auto;flex:0 0 auto;max-width:none;width:auto}.col-mx-auto{margin-left:auto;margin-right:auto}.col-ml-auto{margin-left:auto}.col-mr-auto{margin-right:auto}@media (max-width:1280px){.col-xl-1,.col-xl-10,.col-xl-11,.col-xl-12,.col-xl-2,.col-xl-3,.col-xl-4,.col-xl-5,.col-xl-6,.col-xl-7,.col-xl-8,.col-xl-9,.col-xl-auto{-ms-flex:none;flex:none}.col-xl-12{width:100%}.col-xl-11{width:91.66666667%}.col-xl-10{width:83.33333333%}.col-xl-9{width:75%}.col-xl-8{width:66.66666667%}.col-xl-7{width:58.33333333%}.col-xl-6{width:50%}.col-xl-5{width:41.66666667%}.col-xl-4{width:33.33333333%}.col-xl-3{width:25%}.col-xl-2{width:16.66666667%}.col-xl-1{width:8.33333333%}.col-xl-auto{width:auto}.hide-xl{display:none!important}.show-xl{display:block!important}}@media (max-width:960px){.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-auto{-ms-flex:none;flex:none}.col-lg-12{width:100%}.col-lg-11{width:91.66666667%}.col-lg-10{width:83.33333333%}.col-lg-9{width:75%}.col-lg-8{width:66.66666667%}.col-lg-7{width:58.33333333%}.col-lg-6{width:50%}.col-lg-5{width:41.66666667%}.col-lg-4{width:33.33333333%}.col-lg-3{width:25%}.col-lg-2{width:16.66666667%}.col-lg-1{width:8.33333333%}.col-lg-auto{width:auto}.hide-lg{display:none!important}.show-lg{display:block!important}}@media (max-width:840px){.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-auto{-ms-flex:none;flex:none}.col-md-12{width:100%}.col-md-11{width:91.66666667%}.col-md-10{width:83.33333333%}.col-md-9{width:75%}.col-md-8{width:66.66666667%}.col-md-7{width:58.33333333%}.col-md-6{width:50%}.col-md-5{width:41.66666667%}.col-md-4{width:33.33333333%}.col-md-3{width:25%}.col-md-2{width:16.66666667%}.col-md-1{width:8.33333333%}.col-md-auto{width:auto}.hide-md{display:none!important}.show-md{display:block!important}}@media (max-width:600px){.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-auto{-ms-flex:none;flex:none}.col-sm-12{width:100%}.col-sm-11{width:91.66666667%}.col-sm-10{width:83.33333333%}.col-sm-9{width:75%}.col-sm-8{width:66.66666667%}.col-sm-7{width:58.33333333%}.col-sm-6{width:50%}.col-sm-5{width:41.66666667%}.col-sm-4{width:33.33333333%}.col-sm-3{width:25%}.col-sm-2{width:16.66666667%}.col-sm-1{width:8.33333333%}.col-sm-auto{width:auto}.hide-sm{display:none!important}.show-sm{display:block!important}}@media (max-width:480px){.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9,.col-xs-auto{-ms-flex:none;flex:none}.col-xs-12{width:100%}.col-xs-11{width:91.66666667%}.col-xs-10{width:83.33333333%}.col-xs-9{width:75%}.col-xs-8{width:66.66666667%}.col-xs-7{width:58.33333333%}.col-xs-6{width:50%}.col-xs-5{width:41.66666667%}.col-xs-4{width:33.33333333%}.col-xs-3{width:25%}.col-xs-2{width:16.66666667%}.col-xs-1{width:8.33333333%}.col-xs-auto{width:auto}.hide-xs{display:none!important}.show-xs{display:block!important}}.hero{display:flex;display:-ms-flexbox;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between;padding-bottom:4rem;padding-top:4rem}.hero.hero-sm{padding-bottom:2rem;padding-top:2rem}.hero.hero-lg{padding-bottom:8rem;padding-top:8rem}.hero .hero-body{padding:.4rem}.navbar{align-items:stretch;display:flex;display:-ms-flexbox;-ms-flex-align:stretch;-ms-flex-pack:justify;-ms-flex-wrap:wrap;flex-wrap:wrap;justify-content:space-between}.navbar .navbar-section{align-items:center;display:flex;display:-ms-flexbox;-ms-flex:1 0 0;flex:1 0 0;-ms-flex-align:center}.navbar .navbar-section:not(:first-child):last-child{-ms-flex-pack:end;justify-content:flex-end}.navbar .navbar-center{align-items:center;display:flex;display:-ms-flexbox;-ms-flex:0 0 auto;flex:0 0 auto;-ms-flex-align:center}.navbar .navbar-brand{font-size:.9rem;text-decoration:none}.accordion input:checked~.accordion-header .icon,.accordion[open] .accordion-header .icon{transform:rotate(90deg)}.accordion input:checked~.accordion-body,.accordion[open] .accordion-body{max-height:50rem}.accordion .accordion-header{display:block;padding:.2rem .4rem}.accordion .accordion-header .icon{transition:transform .25s}.accordion .accordion-body{margin-bottom:.4rem;max-height:0;overflow:hidden;transition:max-height .25s}summary.accordion-header::-webkit-details-marker{display:none}.avatar{background:#5755d9;border-radius:50%;color:rgba(255,255,255,.85);display:inline-block;font-size:.8rem;font-weight:300;height:1.6rem;line-height:1.25;margin:0;position:relative;vertical-align:middle;width:1.6rem}.avatar.avatar-xs{font-size:.4rem;height:.8rem;width:.8rem}.avatar.avatar-sm{font-size:.6rem;height:1.2rem;width:1.2rem}.avatar.avatar-lg{font-size:1.2rem;height:2.4rem;width:2.4rem}.avatar.avatar-xl{font-size:1.6rem;height:3.2rem;width:3.2rem}.avatar img{border-radius:50%;height:100%;position:relative;width:100%;z-index:1}.avatar .avatar-icon,.avatar .avatar-presence{background:#fff;bottom:14.64%;height:50%;padding:.1rem;position:absolute;right:14.64%;transform:translate(50%,50%);width:50%;z-index:2}.avatar .avatar-presence{background:#bcc3ce;border-radius:50%;box-shadow:0 0 0 .1rem #fff;height:.5em;width:.5em}.avatar .avatar-presence.online{background:#32b643}.avatar .avatar-presence.busy{background:#e85600}.avatar .avatar-presence.away{background:#ffb700}.avatar[data-initial]::before{color:currentColor;content:attr(data-initial);left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);z-index:1}.badge{position:relative;white-space:nowrap}.badge:not([data-badge])::after,.badge[data-badge]::after{background:#5755d9;background-clip:padding-box;border-radius:.5rem;box-shadow:0 0 0 .1rem #fff;color:#fff;content:attr(data-badge);display:inline-block;transform:translate(-.05rem,-.5rem)}.badge[data-badge]::after{font-size:.7rem;height:.9rem;line-height:1;min-width:.9rem;padding:.1rem .2rem;text-align:center;white-space:nowrap}.badge:not([data-badge])::after,.badge[data-badge=""]::after{height:6px;min-width:6px;padding:0;width:6px}.badge.btn::after{position:absolute;right:0;top:0;transform:translate(50%,-50%)}.badge.avatar::after{position:absolute;right:14.64%;top:14.64%;transform:translate(50%,-50%);z-index:100}.breadcrumb{list-style:none;margin:.2rem 0;padding:.2rem 0}.breadcrumb .breadcrumb-item{color:#66758c;display:inline-block;margin:0;padding:.2rem 0}.breadcrumb .breadcrumb-item:not(:last-child){margin-right:.2rem}.breadcrumb .breadcrumb-item:not(:last-child) a{color:#66758c}.breadcrumb .breadcrumb-item:not(:first-child)::before{color:#66758c;content:"/";padding-right:.4rem}.bar{background:#eef0f3;border-radius:.1rem;display:flex;display:-ms-flexbox;-ms-flex-wrap:nowrap;flex-wrap:nowrap;height:.8rem;width:100%}.bar.bar-sm{height:.2rem}.bar .bar-item{background:#5755d9;color:#fff;display:block;-ms-flex-negative:0;flex-shrink:0;font-size:.7rem;height:100%;line-height:.8rem;position:relative;text-align:center;width:0}.bar .bar-item:first-child{border-bottom-left-radius:.1rem;border-top-left-radius:.1rem}.bar .bar-item:last-child{border-bottom-right-radius:.1rem;border-top-right-radius:.1rem;-ms-flex-negative:1;flex-shrink:1}.bar-slider{height:.1rem;margin:.4rem 0;position:relative}.bar-slider .bar-item{left:0;padding:0;position:absolute}.bar-slider .bar-item:not(:last-child):first-child{background:#eef0f3;z-index:1}.bar-slider .bar-slider-btn{background:#5755d9;border:0;border-radius:50%;height:.6rem;padding:0;position:absolute;right:0;top:50%;transform:translate(50%,-50%);width:.6rem}.bar-slider .bar-slider-btn:active{box-shadow:0 0 0 .1rem #5755d9}.card{background:#fff;border:.05rem solid #dadee4;border-radius:.1rem;display:flex;display:-ms-flexbox;-ms-flex-direction:column;flex-direction:column}.card .card-body,.card .card-footer,.card .card-header{padding:.8rem;padding-bottom:0}.card .card-body:last-child,.card .card-footer:last-child,.card .card-header:last-child{padding-bottom:.8rem}.card .card-body{-ms-flex:1 1 auto;flex:1 1 auto}.card .card-image{padding-top:.8rem}.card .card-image:first-child{padding-top:0}.card .card-image:first-child img{border-top-left-radius:.1rem;border-top-right-radius:.1rem}.card .card-image:last-child img{border-bottom-left-radius:.1rem;border-bottom-right-radius:.1rem}.chip{align-items:center;background:#eef0f3;border-radius:5rem;display:inline-flex;display:-ms-inline-flexbox;-ms-flex-align:center;font-size:90%;height:1.2rem;line-height:.8rem;margin:.1rem;max-width:320px;overflow:hidden;padding:.2rem .4rem;text-decoration:none;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}.chip.active{background:#5755d9;color:#fff}.chip .avatar{margin-left:-.4rem;margin-right:.2rem}.chip .btn-clear{border-radius:50%;transform:scale(.75)}.dropdown{display:inline-block;position:relative}.dropdown .menu{animation:slide-down .15s ease 1;display:none;left:0;max-height:50vh;overflow-y:auto;position:absolute;top:100%}.dropdown.dropdown-right .menu{left:auto;right:0}.dropdown .dropdown-toggle:focus+.menu,.dropdown .menu:hover,.dropdown.active .menu{display:block}.dropdown .btn-group .dropdown-toggle:nth-last-child(2){border-bottom-right-radius:.1rem;border-top-right-radius:.1rem}.empty{background:#f7f8f9;border-radius:.1rem;color:#66758c;padding:3.2rem 1.6rem;text-align:center}.empty .empty-icon{margin-bottom:.8rem}.empty .empty-subtitle,.empty .empty-title{margin:.4rem auto}.empty .empty-action{margin-top:.8rem}.menu{background:#fff;border-radius:.1rem;box-shadow:0 .05rem .2rem rgba(48,55,66,.3);list-style:none;margin:0;min-width:180px;padding:.4rem;transform:translateY(.2rem);z-index:300}.menu.menu-nav{background:0 0;box-shadow:none}.menu .menu-item{margin-top:0;padding:0 .4rem;position:relative;text-decoration:none}.menu .menu-item>a{border-radius:.1rem;color:inherit;display:block;margin:0 -.4rem;padding:.2rem .4rem;text-decoration:none}.menu .menu-item>a:focus,.menu .menu-item>a:hover{background:#f1f1fc;color:#5755d9}.menu .menu-item>a.active,.menu .menu-item>a:active{background:#f1f1fc;color:#5755d9}.menu .menu-item .form-checkbox,.menu .menu-item .form-radio,.menu .menu-item .form-switch{margin:.1rem 0}.menu .menu-item+.menu-item{margin-top:.2rem}.menu .menu-badge{align-items:center;display:flex;display:-ms-flexbox;-ms-flex-align:center;height:100%;position:absolute;right:0;top:0}.menu .menu-badge .label{margin-right:.4rem}.modal{align-items:center;bottom:0;display:none;-ms-flex-align:center;-ms-flex-pack:center;justify-content:center;left:0;opacity:0;overflow:hidden;padding:.4rem;position:fixed;right:0;top:0}.modal.active,.modal:target{display:flex;display:-ms-flexbox;opacity:1;z-index:400}.modal.active .modal-overlay,.modal:target .modal-overlay{background:rgba(247,248,249,.75);bottom:0;cursor:default;display:block;left:0;position:absolute;right:0;top:0}.modal.active .modal-container,.modal:target .modal-container{animation:slide-down .2s ease 1;z-index:1}.modal.modal-sm .modal-container{max-width:320px;padding:0 .4rem}.modal.modal-lg .modal-overlay{background:#fff}.modal.modal-lg .modal-container{box-shadow:none;max-width:960px}.modal-container{background:#fff;border-radius:.1rem;box-shadow:0 .2rem .5rem rgba(48,55,66,.3);display:flex;display:-ms-flexbox;-ms-flex-direction:column;flex-direction:column;max-height:75vh;max-width:640px;padding:0 .8rem;width:100%}.modal-container.modal-fullheight{max-height:100vh}.modal-container .modal-header{color:#303742;padding:.8rem}.modal-container .modal-body{overflow-y:auto;padding:.8rem;position:relative}.modal-container .modal-footer{padding:.8rem;text-align:right}.nav{display:flex;display:-ms-flexbox;-ms-flex-direction:column;flex-direction:column;list-style:none;margin:.2rem 0}.nav .nav-item a{color:#66758c;padding:.2rem .4rem;text-decoration:none}.nav .nav-item a:focus,.nav .nav-item a:hover{color:#5755d9}.nav .nav-item.active>a{color:#505c6e;font-weight:700}.nav .nav-item.active>a:focus,.nav .nav-item.active>a:hover{color:#5755d9}.nav .nav{margin-bottom:.4rem;margin-left:.8rem}.pagination{display:flex;display:-ms-flexbox;list-style:none;margin:.2rem 0;padding:.2rem 0}.pagination .page-item{margin:.2rem .05rem}.pagination .page-item span{display:inline-block;padding:.2rem .2rem}.pagination .page-item a{border-radius:.1rem;display:inline-block;padding:.2rem .4rem;text-decoration:none}.pagination .page-item a:focus,.pagination .page-item a:hover{color:#5755d9}.pagination .page-item.disabled a{cursor:default;opacity:.5;pointer-events:none}.pagination .page-item.active a{background:#5755d9;color:#fff}.pagination .page-item.page-next,.pagination .page-item.page-prev{-ms-flex:1 0 50%;flex:1 0 50%}.pagination .page-item.page-next{text-align:right}.pagination .page-item .page-item-title{margin:0}.pagination .page-item .page-item-subtitle{margin:0;opacity:.5}.panel{border:.05rem solid #dadee4;border-radius:.1rem;display:flex;display:-ms-flexbox;-ms-flex-direction:column;flex-direction:column}.panel .panel-footer,.panel .panel-header{-ms-flex:0 0 auto;flex:0 0 auto;padding:.8rem}.panel .panel-nav{-ms-flex:0 0 auto;flex:0 0 auto}.panel .panel-body{-ms-flex:1 1 auto;flex:1 1 auto;overflow-y:auto;padding:0 .8rem}.popover{display:inline-block;position:relative}.popover .popover-container{left:50%;opacity:0;padding:.4rem;position:absolute;top:0;transform:translate(-50%,-50%) scale(0);transition:transform .2s;width:320px;z-index:300}.popover :focus+.popover-container,.popover:hover .popover-container{display:block;opacity:1;transform:translate(-50%,-100%) scale(1)}.popover.popover-right .popover-container{left:100%;top:50%}.popover.popover-right :focus+.popover-container,.popover.popover-right:hover .popover-container{transform:translate(0,-50%) scale(1)}.popover.popover-bottom .popover-container{left:50%;top:100%}.popover.popover-bottom :focus+.popover-container,.popover.popover-bottom:hover .popover-container{transform:translate(-50%,0) scale(1)}.popover.popover-left .popover-container{left:0;top:50%}.popover.popover-left :focus+.popover-container,.popover.popover-left:hover .popover-container{transform:translate(-100%,-50%) scale(1)}.popover .card{border:0;box-shadow:0 .2rem .5rem rgba(48,55,66,.3)}.step{display:flex;display:-ms-flexbox;-ms-flex-wrap:nowrap;flex-wrap:nowrap;list-style:none;margin:.2rem 0;width:100%}.step .step-item{-ms-flex:1 1 0;flex:1 1 0;margin-top:0;min-height:1rem;position:relative;text-align:center}.step .step-item:not(:first-child)::before{background:#5755d9;content:"";height:2px;left:-50%;position:absolute;top:9px;width:100%}.step .step-item a{color:#5755d9;display:inline-block;padding:20px 10px 0;text-decoration:none}.step .step-item a::before{background:#5755d9;border:.1rem solid #fff;border-radius:50%;content:"";display:block;height:.6rem;left:50%;position:absolute;top:.2rem;transform:translateX(-50%);width:.6rem;z-index:1}.step .step-item.active a::before{background:#fff;border:.1rem solid #5755d9}.step .step-item.active~.step-item::before{background:#dadee4}.step .step-item.active~.step-item a{color:#bcc3ce}.step .step-item.active~.step-item a::before{background:#dadee4}.tab{align-items:center;border-bottom:.05rem solid #dadee4;display:flex;display:-ms-flexbox;-ms-flex-align:center;-ms-flex-wrap:wrap;flex-wrap:wrap;list-style:none;margin:.2rem 0 .15rem 0}.tab .tab-item{margin-top:0}.tab .tab-item a{border-bottom:.1rem solid transparent;color:inherit;display:block;margin:0 .4rem 0 0;padding:.4rem .2rem .3rem .2rem;text-decoration:none}.tab .tab-item a:focus,.tab .tab-item a:hover{color:#5755d9}.tab .tab-item a.active,.tab .tab-item.active a{border-bottom-color:#5755d9;color:#5755d9}.tab .tab-item.tab-action{-ms-flex:1 0 auto;flex:1 0 auto;text-align:right}.tab .tab-item .btn-clear{margin-top:-.2rem}.tab.tab-block .tab-item{-ms-flex:1 0 0;flex:1 0 0;text-align:center}.tab.tab-block .tab-item a{margin:0}.tab.tab-block .tab-item .badge[data-badge]::after{position:absolute;right:.1rem;top:.1rem;transform:translate(0,0)}.tab:not(.tab-block) .badge{padding-right:0}.tile{align-content:space-between;align-items:flex-start;display:flex;display:-ms-flexbox;-ms-flex-align:start;-ms-flex-line-pack:justify}.tile .tile-action,.tile .tile-icon{-ms-flex:0 0 auto;flex:0 0 auto}.tile .tile-content{-ms-flex:1 1 auto;flex:1 1 auto}.tile .tile-content:not(:first-child){padding-left:.4rem}.tile .tile-content:not(:last-child){padding-right:.4rem}.tile .tile-subtitle,.tile .tile-title{line-height:1.2rem}.tile.tile-centered{align-items:center;-ms-flex-align:center}.tile.tile-centered .tile-content{overflow:hidden}.tile.tile-centered .tile-subtitle,.tile.tile-centered .tile-title{margin-bottom:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.toast{background:rgba(48,55,66,.95);border:.05rem solid #303742;border-color:#303742;border-radius:.1rem;color:#fff;display:block;padding:.4rem;width:100%}.toast.toast-primary{background:rgba(87,85,217,.95);border-color:#5755d9}.toast.toast-success{background:rgba(50,182,67,.95);border-color:#32b643}.toast.toast-warning{background:rgba(255,183,0,.95);border-color:#ffb700}.toast.toast-error{background:rgba(232,86,0,.95);border-color:#e85600}.toast a{color:#fff;text-decoration:underline}.toast a.active,.toast a:active,.toast a:focus,.toast a:hover{opacity:.75}.toast .btn-clear{margin:.1rem}.toast p:last-child{margin-bottom:0}.tooltip{position:relative}.tooltip::after{background:rgba(48,55,66,.95);border-radius:.1rem;bottom:100%;color:#fff;content:attr(data-tooltip);display:block;font-size:.7rem;left:50%;max-width:320px;opacity:0;overflow:hidden;padding:.2rem .4rem;pointer-events:none;position:absolute;text-overflow:ellipsis;transform:translate(-50%,.4rem);transition:opacity .2s,transform .2s;white-space:pre;z-index:300}.tooltip:focus::after,.tooltip:hover::after{opacity:1;transform:translate(-50%,-.2rem)}.tooltip.disabled,.tooltip[disabled]{pointer-events:auto}.tooltip.tooltip-right::after{bottom:50%;left:100%;transform:translate(-.2rem,50%)}.tooltip.tooltip-right:focus::after,.tooltip.tooltip-right:hover::after{transform:translate(.2rem,50%)}.tooltip.tooltip-bottom::after{bottom:auto;top:100%;transform:translate(-50%,-.4rem)}.tooltip.tooltip-bottom:focus::after,.tooltip.tooltip-bottom:hover::after{transform:translate(-50%,.2rem)}.tooltip.tooltip-left::after{bottom:50%;left:auto;right:100%;transform:translate(.4rem,50%)}.tooltip.tooltip-left:focus::after,.tooltip.tooltip-left:hover::after{transform:translate(-.2rem,50%)}@keyframes loading{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes slide-down{0%{opacity:0;transform:translateY(-1.6rem)}100%{opacity:1;transform:translateY(0)}}.text-primary{color:#5755d9!important}a.text-primary:focus,a.text-primary:hover{color:#4240d4}a.text-primary:visited{color:#6c6ade}.text-secondary{color:#e5e5f9!important}a.text-secondary:focus,a.text-secondary:hover{color:#d1d0f4}a.text-secondary:visited{color:#fafafe}.text-gray{color:#bcc3ce!important}a.text-gray:focus,a.text-gray:hover{color:#adb6c4}a.text-gray:visited{color:#cbd0d9}.text-light{color:#fff!important}a.text-light:focus,a.text-light:hover{color:#f2f2f2}a.text-light:visited{color:#fff}.text-dark{color:#3b4351!important}a.text-dark:focus,a.text-dark:hover{color:#303742}a.text-dark:visited{color:#455060}.text-success{color:#32b643!important}a.text-success:focus,a.text-success:hover{color:#2da23c}a.text-success:visited{color:#39c94b}.text-warning{color:#ffb700!important}a.text-warning:focus,a.text-warning:hover{color:#e6a500}a.text-warning:visited{color:#ffbe1a}.text-error{color:#e85600!important}a.text-error:focus,a.text-error:hover{color:#cf4d00}a.text-error:visited{color:#ff6003}.bg-primary{background:#5755d9!important;color:#fff}.bg-secondary{background:#f1f1fc!important}.bg-dark{background:#303742!important;color:#fff}.bg-gray{background:#f7f8f9!important}.bg-success{background:#32b643!important;color:#fff}.bg-warning{background:#ffb700!important;color:#fff}.bg-error{background:#e85600!important;color:#fff}.c-hand{cursor:pointer}.c-move{cursor:move}.c-zoom-in{cursor:zoom-in}.c-zoom-out{cursor:zoom-out}.c-not-allowed{cursor:not-allowed}.c-auto{cursor:auto}.d-block{display:block}.d-inline{display:inline}.d-inline-block{display:inline-block}.d-flex{display:flex;display:-ms-flexbox}.d-inline-flex{display:inline-flex;display:-ms-inline-flexbox}.d-hide,.d-none{display:none!important}.d-visible{visibility:visible}.d-invisible{visibility:hidden}.text-hide{background:0 0;border:0;color:transparent;font-size:0;line-height:0;text-shadow:none}.text-assistive{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.divider,.divider-vert{display:block;position:relative}.divider-vert[data-content]::after,.divider[data-content]::after{background:#fff;color:#bcc3ce;content:attr(data-content);display:inline-block;font-size:.7rem;padding:0 .4rem;transform:translateY(-.65rem)}.divider{border-top:.05rem solid #f1f3f5;height:.05rem;margin:.4rem 0}.divider[data-content]{margin:.8rem 0}.divider-vert{display:block;padding:.8rem}.divider-vert::before{border-left:.05rem solid #dadee4;bottom:.4rem;content:"";display:block;left:50%;position:absolute;top:.4rem;transform:translateX(-50%)}.divider-vert[data-content]::after{left:50%;padding:.2rem 0;position:absolute;top:50%;transform:translate(-50%,-50%)}.loading{color:transparent!important;min-height:.8rem;pointer-events:none;position:relative}.loading::after{animation:loading .5s infinite linear;border:.1rem solid #5755d9;border-radius:50%;border-right-color:transparent;border-top-color:transparent;content:"";display:block;height:.8rem;left:50%;margin-left:-.4rem;margin-top:-.4rem;position:absolute;top:50%;width:.8rem;z-index:1}.loading.loading-lg{min-height:2rem}.loading.loading-lg::after{height:1.6rem;margin-left:-.8rem;margin-top:-.8rem;width:1.6rem}.clearfix::after{clear:both;content:"";display:table}.float-left{float:left!important}.float-right{float:right!important}.p-relative{position:relative!important}.p-absolute{position:absolute!important}.p-fixed{position:fixed!important}.p-sticky{position:sticky!important;position:-webkit-sticky!important}.p-centered{display:block;float:none;margin-left:auto;margin-right:auto}.flex-centered{align-items:center;display:flex;display:-ms-flexbox;-ms-flex-align:center;-ms-flex-pack:center;justify-content:center}.m-0{margin:0!important}.mb-0{margin-bottom:0!important}.ml-0{margin-left:0!important}.mr-0{margin-right:0!important}.mt-0{margin-top:0!important}.mx-0{margin-left:0!important;margin-right:0!important}.my-0{margin-bottom:0!important;margin-top:0!important}.m-1{margin:.2rem!important}.mb-1{margin-bottom:.2rem!important}.ml-1{margin-left:.2rem!important}.mr-1{margin-right:.2rem!important}.mt-1{margin-top:.2rem!important}.mx-1{margin-left:.2rem!important;margin-right:.2rem!important}.my-1{margin-bottom:.2rem!important;margin-top:.2rem!important}.m-2{margin:.4rem!important}.mb-2{margin-bottom:.4rem!important}.ml-2{margin-left:.4rem!important}.mr-2{margin-right:.4rem!important}.mt-2{margin-top:.4rem!important}.mx-2{margin-left:.4rem!important;margin-right:.4rem!important}.my-2{margin-bottom:.4rem!important;margin-top:.4rem!important}.p-0{padding:0!important}.pb-0{padding-bottom:0!important}.pl-0{padding-left:0!important}.pr-0{padding-right:0!important}.pt-0{padding-top:0!important}.px-0{padding-left:0!important;padding-right:0!important}.py-0{padding-bottom:0!important;padding-top:0!important}.p-1{padding:.2rem!important}.pb-1{padding-bottom:.2rem!important}.pl-1{padding-left:.2rem!important}.pr-1{padding-right:.2rem!important}.pt-1{padding-top:.2rem!important}.px-1{padding-left:.2rem!important;padding-right:.2rem!important}.py-1{padding-bottom:.2rem!important;padding-top:.2rem!important}.p-2{padding:.4rem!important}.pb-2{padding-bottom:.4rem!important}.pl-2{padding-left:.4rem!important}.pr-2{padding-right:.4rem!important}.pt-2{padding-top:.4rem!important}.px-2{padding-left:.4rem!important;padding-right:.4rem!important}.py-2{padding-bottom:.4rem!important;padding-top:.4rem!important}.s-rounded{border-radius:.1rem}.s-circle{border-radius:50%}.text-left{text-align:left}.text-right{text-align:right}.text-center{text-align:center}.text-justify{text-align:justify}.text-lowercase{text-transform:lowercase}.text-uppercase{text-transform:uppercase}.text-capitalize{text-transform:capitalize}.text-normal{font-weight:400}.text-bold{font-weight:700}.text-italic{font-style:italic}.text-large{font-size:1.2em}.text-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.text-clip{overflow:hidden;text-overflow:clip;white-space:nowrap}.text-break{-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;word-break:break-word;word-wrap:break-word}
\ No newline at end of file
+/*! Spectre.css v0.5.9 | MIT License | github.com/picturepan2/spectre */html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}hr{box-sizing:content-box;height:0;overflow:visible}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}address{font-style:normal}b,strong{font-weight:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:"SF Mono","Segoe UI Mono","Roboto Mono",Menlo,Courier,monospace;font-size:1em}dfn{font-style:italic}small{font-size:80%;font-weight:400}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}fieldset{border:0;margin:0;padding:0}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item;outline:0}canvas{display:inline-block}template{display:none}[hidden]{display:none}*,::after,::before{box-sizing:inherit}html{box-sizing:border-box;font-size:20px;line-height:1.5;-webkit-tap-highlight-color:transparent}body{background:#fff;color:#3b4351;font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;font-size:.8rem;overflow-x:hidden;text-rendering:optimizeLegibility}a{color:#5755d9;outline:0;text-decoration:none}a:focus{box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}a.active,a:active,a:focus,a:hover{color:#302ecd;text-decoration:underline}a:visited{color:#807fe2}h1,h2,h3,h4,h5,h6{color:inherit;font-weight:500;line-height:1.2;margin-bottom:.5em;margin-top:0}.h1,.h2,.h3,.h4,.h5,.h6{font-weight:500}.h1,h1{font-size:2rem}.h2,h2{font-size:1.6rem}.h3,h3{font-size:1.4rem}.h4,h4{font-size:1.2rem}.h5,h5{font-size:1rem}.h6,h6{font-size:.8rem}p{margin:0 0 1.2rem}a,ins,u{-webkit-text-decoration-skip:ink edges;text-decoration-skip:ink edges}abbr[title]{border-bottom:.05rem dotted;cursor:help;text-decoration:none}kbd{background:#303742;border-radius:.1rem;color:#fff;font-size:.7rem;line-height:1.25;padding:.1rem .2rem}mark{background:#ffe9b3;border-bottom:.05rem solid #ffd367;border-radius:.1rem;color:#3b4351;padding:.05rem .1rem 0}blockquote{border-left:.1rem solid #dadee4;margin-left:0;padding:.4rem .8rem}blockquote p:last-child{margin-bottom:0}ol,ul{margin:.8rem 0 .8rem .8rem;padding:0}ol ol,ol ul,ul ol,ul ul{margin:.8rem 0 .8rem .8rem}ol li,ul li{margin-top:.4rem}ul{list-style:disc inside}ul ul{list-style-type:circle}ol{list-style:decimal inside}ol ol{list-style-type:lower-alpha}dl dt{font-weight:700}dl dd{margin:.4rem 0 .8rem 0}.lang-zh,.lang-zh-hans,html:lang(zh),html:lang(zh-Hans){font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",sans-serif}.lang-zh-hant,html:lang(zh-Hant){font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang TC","Hiragino Sans CNS","Microsoft JhengHei","Helvetica Neue",sans-serif}.lang-ja,html:lang(ja){font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Hiragino Sans","Hiragino Kaku Gothic Pro","Yu Gothic",YuGothic,Meiryo,"Helvetica Neue",sans-serif}.lang-ko,html:lang(ko){font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Malgun Gothic","Helvetica Neue",sans-serif}.lang-cjk ins,.lang-cjk u,:lang(ja) ins,:lang(ja) u,:lang(zh) ins,:lang(zh) u{border-bottom:.05rem solid;text-decoration:none}.lang-cjk del+del,.lang-cjk del+s,.lang-cjk ins+ins,.lang-cjk ins+u,.lang-cjk s+del,.lang-cjk s+s,.lang-cjk u+ins,.lang-cjk u+u,:lang(ja) del+del,:lang(ja) del+s,:lang(ja) ins+ins,:lang(ja) ins+u,:lang(ja) s+del,:lang(ja) s+s,:lang(ja) u+ins,:lang(ja) u+u,:lang(zh) del+del,:lang(zh) del+s,:lang(zh) ins+ins,:lang(zh) ins+u,:lang(zh) s+del,:lang(zh) s+s,:lang(zh) u+ins,:lang(zh) u+u{margin-left:.125em}.table{border-collapse:collapse;border-spacing:0;text-align:left;width:100%}.table.table-striped tbody tr:nth-of-type(odd){background:#f7f8f9}.table tbody tr.active,.table.table-striped tbody tr.active{background:#eef0f3}.table.table-hover tbody tr:hover{background:#eef0f3}.table.table-scroll{display:block;overflow-x:auto;padding-bottom:.75rem;white-space:nowrap}.table td,.table th{border-bottom:.05rem solid #dadee4;padding:.6rem .4rem}.table th{border-bottom-width:.1rem}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#fff;border:.05rem solid #5755d9;border-radius:.1rem;color:#5755d9;cursor:pointer;display:inline-block;font-size:.8rem;height:1.8rem;line-height:1.2rem;outline:0;padding:.25rem .4rem;text-align:center;text-decoration:none;transition:background .2s,border .2s,box-shadow .2s,color .2s;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap}.btn:focus{box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}.btn:focus,.btn:hover{background:#f1f1fc;border-color:#4b48d6;text-decoration:none}.btn.active,.btn:active{background:#4b48d6;border-color:#3634d2;color:#fff;text-decoration:none}.btn.active.loading::after,.btn:active.loading::after{border-bottom-color:#fff;border-left-color:#fff}.btn.disabled,.btn:disabled,.btn[disabled]{cursor:default;opacity:.5;pointer-events:none}.btn.btn-primary{background:#5755d9;border-color:#4b48d6;color:#fff}.btn.btn-primary:focus,.btn.btn-primary:hover{background:#4240d4;border-color:#3634d2;color:#fff}.btn.btn-primary.active,.btn.btn-primary:active{background:#3a38d2;border-color:#302ecd;color:#fff}.btn.btn-primary.loading::after{border-bottom-color:#fff;border-left-color:#fff}.btn.btn-success{background:#32b643;border-color:#2faa3f;color:#fff}.btn.btn-success:focus{box-shadow:0 0 0 .1rem rgba(50,182,67,.2)}.btn.btn-success:focus,.btn.btn-success:hover{background:#30ae40;border-color:#2da23c;color:#fff}.btn.btn-success.active,.btn.btn-success:active{background:#2a9a39;border-color:#278e34;color:#fff}.btn.btn-success.loading::after{border-bottom-color:#fff;border-left-color:#fff}.btn.btn-error{background:#e85600;border-color:#d95000;color:#fff}.btn.btn-error:focus{box-shadow:0 0 0 .1rem rgba(232,86,0,.2)}.btn.btn-error:focus,.btn.btn-error:hover{background:#de5200;border-color:#cf4d00;color:#fff}.btn.btn-error.active,.btn.btn-error:active{background:#c44900;border-color:#b54300;color:#fff}.btn.btn-error.loading::after{border-bottom-color:#fff;border-left-color:#fff}.btn.btn-link{background:0 0;border-color:transparent;color:#5755d9}.btn.btn-link.active,.btn.btn-link:active,.btn.btn-link:focus,.btn.btn-link:hover{color:#302ecd}.btn.btn-sm{font-size:.7rem;height:1.4rem;padding:.05rem .3rem}.btn.btn-lg{font-size:.9rem;height:2rem;padding:.35rem .6rem}.btn.btn-block{display:block;width:100%}.btn.btn-action{padding-left:0;padding-right:0;width:1.8rem}.btn.btn-action.btn-sm{width:1.4rem}.btn.btn-action.btn-lg{width:2rem}.btn.btn-clear{background:0 0;border:0;color:currentColor;height:1rem;line-height:.8rem;margin-left:.2rem;margin-right:-2px;opacity:1;padding:.1rem;text-decoration:none;width:1rem}.btn.btn-clear:focus,.btn.btn-clear:hover{background:rgba(247,248,249,.5);opacity:.95}.btn.btn-clear::before{content:"\2715"}.btn-group{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.btn-group .btn{-ms-flex:1 0 auto;flex:1 0 auto}.btn-group .btn:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.btn-group .btn:not(:first-child):not(:last-child){border-radius:0;margin-left:-.05rem}.btn-group .btn:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0;margin-left:-.05rem}.btn-group .btn.active,.btn-group .btn:active,.btn-group .btn:focus,.btn-group .btn:hover{z-index:1}.btn-group.btn-group-block{display:-ms-flexbox;display:flex}.btn-group.btn-group-block .btn{-ms-flex:1 0 0;flex:1 0 0}.form-group:not(:last-child){margin-bottom:.4rem}fieldset{margin-bottom:.8rem}legend{font-size:.9rem;font-weight:500;margin-bottom:.8rem}.form-label{display:block;line-height:1.2rem;padding:.3rem 0}.form-label.label-sm{font-size:.7rem;padding:.1rem 0}.form-label.label-lg{font-size:.9rem;padding:.4rem 0}.form-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#fff;background-image:none;border:.05rem solid #bcc3ce;border-radius:.1rem;color:#3b4351;display:block;font-size:.8rem;height:1.8rem;line-height:1.2rem;max-width:100%;outline:0;padding:.25rem .4rem;position:relative;transition:background .2s,border .2s,box-shadow .2s,color .2s;width:100%}.form-input:focus{border-color:#5755d9;box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}.form-input:-ms-input-placeholder{color:#bcc3ce}.form-input::-ms-input-placeholder{color:#bcc3ce}.form-input::placeholder{color:#bcc3ce}.form-input.input-sm{font-size:.7rem;height:1.4rem;padding:.05rem .3rem}.form-input.input-lg{font-size:.9rem;height:2rem;padding:.35rem .6rem}.form-input.input-inline{display:inline-block;vertical-align:middle;width:auto}.form-input[type=file]{height:auto}textarea.form-input,textarea.form-input.input-lg,textarea.form-input.input-sm{height:auto}.form-input-hint{color:#bcc3ce;font-size:.7rem;margin-top:.2rem}.has-success .form-input-hint,.is-success+.form-input-hint{color:#32b643}.has-error .form-input-hint,.is-error+.form-input-hint{color:#e85600}.form-select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#fff;border:.05rem solid #bcc3ce;border-radius:.1rem;color:inherit;font-size:.8rem;height:1.8rem;line-height:1.2rem;outline:0;padding:.25rem .4rem;vertical-align:middle;width:100%}.form-select:focus{border-color:#5755d9;box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}.form-select::-ms-expand{display:none}.form-select.select-sm{font-size:.7rem;height:1.4rem;padding:.05rem 1.1rem .05rem .3rem}.form-select.select-lg{font-size:.9rem;height:2rem;padding:.35rem 1.4rem .35rem .6rem}.form-select[multiple],.form-select[size]{height:auto;padding:.25rem .4rem}.form-select[multiple] option,.form-select[size] option{padding:.1rem .2rem}.form-select:not([multiple]):not([size]){background:#fff url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%204%205'%3E%3Cpath%20fill='%23667189'%20d='M2%200L0%202h4zm0%205L0%203h4z'/%3E%3C/svg%3E") no-repeat right .35rem center/.4rem .5rem;padding-right:1.2rem}.has-icon-left,.has-icon-right{position:relative}.has-icon-left .form-icon,.has-icon-right .form-icon{height:.8rem;margin:0 .25rem;position:absolute;top:50%;transform:translateY(-50%);width:.8rem;z-index:2}.has-icon-left .form-icon{left:.05rem}.has-icon-left .form-input{padding-left:1.3rem}.has-icon-right .form-icon{right:.05rem}.has-icon-right .form-input{padding-right:1.3rem}.form-checkbox,.form-radio,.form-switch{display:block;line-height:1.2rem;margin:.2rem 0;min-height:1.4rem;padding:.1rem .4rem .1rem 1.2rem;position:relative}.form-checkbox input,.form-radio input,.form-switch input{clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;position:absolute;width:1px}.form-checkbox input:focus+.form-icon,.form-radio input:focus+.form-icon,.form-switch input:focus+.form-icon{border-color:#5755d9;box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}.form-checkbox input:checked+.form-icon,.form-radio input:checked+.form-icon,.form-switch input:checked+.form-icon{background:#5755d9;border-color:#5755d9}.form-checkbox .form-icon,.form-radio .form-icon,.form-switch .form-icon{border:.05rem solid #bcc3ce;cursor:pointer;display:inline-block;position:absolute;transition:background .2s,border .2s,box-shadow .2s,color .2s}.form-checkbox.input-sm,.form-radio.input-sm,.form-switch.input-sm{font-size:.7rem;margin:0}.form-checkbox.input-lg,.form-radio.input-lg,.form-switch.input-lg{font-size:.9rem;margin:.3rem 0}.form-checkbox .form-icon,.form-radio .form-icon{background:#fff;height:.8rem;left:0;top:.3rem;width:.8rem}.form-checkbox input:active+.form-icon,.form-radio input:active+.form-icon{background:#eef0f3}.form-checkbox .form-icon{border-radius:.1rem}.form-checkbox input:checked+.form-icon::before{background-clip:padding-box;border:.1rem solid #fff;border-left-width:0;border-top-width:0;content:"";height:9px;left:50%;margin-left:-3px;margin-top:-6px;position:absolute;top:50%;transform:rotate(45deg);width:6px}.form-checkbox input:indeterminate+.form-icon{background:#5755d9;border-color:#5755d9}.form-checkbox input:indeterminate+.form-icon::before{background:#fff;content:"";height:2px;left:50%;margin-left:-5px;margin-top:-1px;position:absolute;top:50%;width:10px}.form-radio .form-icon{border-radius:50%}.form-radio input:checked+.form-icon::before{background:#fff;border-radius:50%;content:"";height:6px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:6px}.form-switch{padding-left:2rem}.form-switch .form-icon{background:#bcc3ce;background-clip:padding-box;border-radius:.45rem;height:.9rem;left:0;top:.25rem;width:1.6rem}.form-switch .form-icon::before{background:#fff;border-radius:50%;content:"";display:block;height:.8rem;left:0;position:absolute;top:0;transition:background .2s,border .2s,box-shadow .2s,color .2s,left .2s;width:.8rem}.form-switch input:checked+.form-icon::before{left:14px}.form-switch input:active+.form-icon::before{background:#f7f8f9}.input-group{display:-ms-flexbox;display:flex}.input-group .input-group-addon{background:#f7f8f9;border:.05rem solid #bcc3ce;border-radius:.1rem;line-height:1.2rem;padding:.25rem .4rem;white-space:nowrap}.input-group .input-group-addon.addon-sm{font-size:.7rem;padding:.05rem .3rem}.input-group .input-group-addon.addon-lg{font-size:.9rem;padding:.35rem .6rem}.input-group .form-input,.input-group .form-select{-ms-flex:1 1 auto;flex:1 1 auto;width:1%}.input-group .input-group-btn{z-index:1}.input-group .form-input:first-child:not(:last-child),.input-group .form-select:first-child:not(:last-child),.input-group .input-group-addon:first-child:not(:last-child),.input-group .input-group-btn:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.input-group .form-input:not(:first-child):not(:last-child),.input-group .form-select:not(:first-child):not(:last-child),.input-group .input-group-addon:not(:first-child):not(:last-child),.input-group .input-group-btn:not(:first-child):not(:last-child){border-radius:0;margin-left:-.05rem}.input-group .form-input:last-child:not(:first-child),.input-group .form-select:last-child:not(:first-child),.input-group .input-group-addon:last-child:not(:first-child),.input-group .input-group-btn:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0;margin-left:-.05rem}.input-group .form-input:focus,.input-group .form-select:focus,.input-group .input-group-addon:focus,.input-group .input-group-btn:focus{z-index:2}.input-group .form-select{width:auto}.input-group.input-inline{display:-ms-inline-flexbox;display:inline-flex}.form-input.is-success,.form-select.is-success,.has-success .form-input,.has-success .form-select{background:#f9fdfa;border-color:#32b643}.form-input.is-success:focus,.form-select.is-success:focus,.has-success .form-input:focus,.has-success .form-select:focus{box-shadow:0 0 0 .1rem rgba(50,182,67,.2)}.form-input.is-error,.form-select.is-error,.has-error .form-input,.has-error .form-select{background:#fffaf7;border-color:#e85600}.form-input.is-error:focus,.form-select.is-error:focus,.has-error .form-input:focus,.has-error .form-select:focus{box-shadow:0 0 0 .1rem rgba(232,86,0,.2)}.form-checkbox.is-error .form-icon,.form-radio.is-error .form-icon,.form-switch.is-error .form-icon,.has-error .form-checkbox .form-icon,.has-error .form-radio .form-icon,.has-error .form-switch .form-icon{border-color:#e85600}.form-checkbox.is-error input:checked+.form-icon,.form-radio.is-error input:checked+.form-icon,.form-switch.is-error input:checked+.form-icon,.has-error .form-checkbox input:checked+.form-icon,.has-error .form-radio input:checked+.form-icon,.has-error .form-switch input:checked+.form-icon{background:#e85600;border-color:#e85600}.form-checkbox.is-error input:focus+.form-icon,.form-radio.is-error input:focus+.form-icon,.form-switch.is-error input:focus+.form-icon,.has-error .form-checkbox input:focus+.form-icon,.has-error .form-radio input:focus+.form-icon,.has-error .form-switch input:focus+.form-icon{border-color:#e85600;box-shadow:0 0 0 .1rem rgba(232,86,0,.2)}.form-checkbox.is-error input:indeterminate+.form-icon,.has-error .form-checkbox input:indeterminate+.form-icon{background:#e85600;border-color:#e85600}.form-input:not(:-ms-input-placeholder):invalid{border-color:#e85600}.form-input:not(:placeholder-shown):invalid{border-color:#e85600}.form-input:not(:-ms-input-placeholder):invalid:focus{background:#fffaf7;box-shadow:0 0 0 .1rem rgba(232,86,0,.2)}.form-input:not(:placeholder-shown):invalid:focus{background:#fffaf7;box-shadow:0 0 0 .1rem rgba(232,86,0,.2)}.form-input:not(:-ms-input-placeholder):invalid+.form-input-hint{color:#e85600}.form-input:not(:placeholder-shown):invalid+.form-input-hint{color:#e85600}.form-input.disabled,.form-input:disabled,.form-select.disabled,.form-select:disabled{background-color:#eef0f3;cursor:not-allowed;opacity:.5}.form-input[readonly]{background-color:#f7f8f9}input.disabled+.form-icon,input:disabled+.form-icon{background:#eef0f3;cursor:not-allowed;opacity:.5}.form-switch input.disabled+.form-icon::before,.form-switch input:disabled+.form-icon::before{background:#fff}.form-horizontal{padding:.4rem 0}.form-horizontal .form-group{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.form-inline{display:inline-block}.label{background:#eef0f3;border-radius:.1rem;color:#455060;display:inline-block;line-height:1.25;padding:.1rem .2rem}.label.label-rounded{border-radius:5rem;padding-left:.4rem;padding-right:.4rem}.label.label-primary{background:#5755d9;color:#fff}.label.label-secondary{background:#f1f1fc;color:#5755d9}.label.label-success{background:#32b643;color:#fff}.label.label-warning{background:#ffb700;color:#fff}.label.label-error{background:#e85600;color:#fff}code{background:#fcf2f2;border-radius:.1rem;color:#d73e48;font-size:85%;line-height:1.25;padding:.1rem .2rem}.code{border-radius:.1rem;color:#3b4351;position:relative}.code::before{color:#bcc3ce;content:attr(data-lang);font-size:.7rem;position:absolute;right:.4rem;top:.1rem}.code code{background:#f7f8f9;color:inherit;display:block;line-height:1.5;overflow-x:auto;padding:1rem;width:100%}.img-responsive{display:block;height:auto;max-width:100%}.img-fit-cover{object-fit:cover}.img-fit-contain{object-fit:contain}.video-responsive{display:block;overflow:hidden;padding:0;position:relative;width:100%}.video-responsive::before{content:"";display:block;padding-bottom:56.25%}.video-responsive embed,.video-responsive iframe,.video-responsive object{border:0;bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%}video.video-responsive{height:auto;max-width:100%}video.video-responsive::before{content:none}.video-responsive-4-3::before{padding-bottom:75%}.video-responsive-1-1::before{padding-bottom:100%}.figure{margin:0 0 .4rem 0}.figure .figure-caption{color:#66758c;margin-top:.4rem}.container{margin-left:auto;margin-right:auto;padding-left:.4rem;padding-right:.4rem;width:100%}.container.grid-xl{max-width:1296px}.container.grid-lg{max-width:976px}.container.grid-md{max-width:856px}.container.grid-sm{max-width:616px}.container.grid-xs{max-width:496px}.show-lg,.show-md,.show-sm,.show-xl,.show-xs{display:none!important}.cols,.columns{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-left:-.4rem;margin-right:-.4rem}.cols.col-gapless,.columns.col-gapless{margin-left:0;margin-right:0}.cols.col-gapless>.column,.columns.col-gapless>.column{padding-left:0;padding-right:0}.cols.col-oneline,.columns.col-oneline{-ms-flex-wrap:nowrap;flex-wrap:nowrap;overflow-x:auto}.column,[class~=col-]{-ms-flex:1;flex:1;max-width:100%;padding-left:.4rem;padding-right:.4rem}.column.col-1,.column.col-10,.column.col-11,.column.col-12,.column.col-2,.column.col-3,.column.col-4,.column.col-5,.column.col-6,.column.col-7,.column.col-8,.column.col-9,.column.col-auto,[class~=col-].col-1,[class~=col-].col-10,[class~=col-].col-11,[class~=col-].col-12,[class~=col-].col-2,[class~=col-].col-3,[class~=col-].col-4,[class~=col-].col-5,[class~=col-].col-6,[class~=col-].col-7,[class~=col-].col-8,[class~=col-].col-9,[class~=col-].col-auto{-ms-flex:none;flex:none}.col-12{width:100%}.col-11{width:91.66666667%}.col-10{width:83.33333333%}.col-9{width:75%}.col-8{width:66.66666667%}.col-7{width:58.33333333%}.col-6{width:50%}.col-5{width:41.66666667%}.col-4{width:33.33333333%}.col-3{width:25%}.col-2{width:16.66666667%}.col-1{width:8.33333333%}.col-auto{-ms-flex:0 0 auto;flex:0 0 auto;max-width:none;width:auto}.col-mx-auto{margin-left:auto;margin-right:auto}.col-ml-auto{margin-left:auto}.col-mr-auto{margin-right:auto}@media (max-width:1280px){.col-xl-1,.col-xl-10,.col-xl-11,.col-xl-12,.col-xl-2,.col-xl-3,.col-xl-4,.col-xl-5,.col-xl-6,.col-xl-7,.col-xl-8,.col-xl-9,.col-xl-auto{-ms-flex:none;flex:none}.col-xl-12{width:100%}.col-xl-11{width:91.66666667%}.col-xl-10{width:83.33333333%}.col-xl-9{width:75%}.col-xl-8{width:66.66666667%}.col-xl-7{width:58.33333333%}.col-xl-6{width:50%}.col-xl-5{width:41.66666667%}.col-xl-4{width:33.33333333%}.col-xl-3{width:25%}.col-xl-2{width:16.66666667%}.col-xl-1{width:8.33333333%}.col-xl-auto{width:auto}.hide-xl{display:none!important}.show-xl{display:block!important}}@media (max-width:960px){.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-auto{-ms-flex:none;flex:none}.col-lg-12{width:100%}.col-lg-11{width:91.66666667%}.col-lg-10{width:83.33333333%}.col-lg-9{width:75%}.col-lg-8{width:66.66666667%}.col-lg-7{width:58.33333333%}.col-lg-6{width:50%}.col-lg-5{width:41.66666667%}.col-lg-4{width:33.33333333%}.col-lg-3{width:25%}.col-lg-2{width:16.66666667%}.col-lg-1{width:8.33333333%}.col-lg-auto{width:auto}.hide-lg{display:none!important}.show-lg{display:block!important}}@media (max-width:840px){.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-auto{-ms-flex:none;flex:none}.col-md-12{width:100%}.col-md-11{width:91.66666667%}.col-md-10{width:83.33333333%}.col-md-9{width:75%}.col-md-8{width:66.66666667%}.col-md-7{width:58.33333333%}.col-md-6{width:50%}.col-md-5{width:41.66666667%}.col-md-4{width:33.33333333%}.col-md-3{width:25%}.col-md-2{width:16.66666667%}.col-md-1{width:8.33333333%}.col-md-auto{width:auto}.hide-md{display:none!important}.show-md{display:block!important}}@media (max-width:600px){.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-auto{-ms-flex:none;flex:none}.col-sm-12{width:100%}.col-sm-11{width:91.66666667%}.col-sm-10{width:83.33333333%}.col-sm-9{width:75%}.col-sm-8{width:66.66666667%}.col-sm-7{width:58.33333333%}.col-sm-6{width:50%}.col-sm-5{width:41.66666667%}.col-sm-4{width:33.33333333%}.col-sm-3{width:25%}.col-sm-2{width:16.66666667%}.col-sm-1{width:8.33333333%}.col-sm-auto{width:auto}.hide-sm{display:none!important}.show-sm{display:block!important}}@media (max-width:480px){.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9,.col-xs-auto{-ms-flex:none;flex:none}.col-xs-12{width:100%}.col-xs-11{width:91.66666667%}.col-xs-10{width:83.33333333%}.col-xs-9{width:75%}.col-xs-8{width:66.66666667%}.col-xs-7{width:58.33333333%}.col-xs-6{width:50%}.col-xs-5{width:41.66666667%}.col-xs-4{width:33.33333333%}.col-xs-3{width:25%}.col-xs-2{width:16.66666667%}.col-xs-1{width:8.33333333%}.col-xs-auto{width:auto}.hide-xs{display:none!important}.show-xs{display:block!important}}.hero{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between;padding-bottom:4rem;padding-top:4rem}.hero.hero-sm{padding-bottom:2rem;padding-top:2rem}.hero.hero-lg{padding-bottom:8rem;padding-top:8rem}.hero .hero-body{padding:.4rem}.navbar{align-items:stretch;display:-ms-flexbox;display:flex;-ms-flex-align:stretch;-ms-flex-pack:justify;-ms-flex-wrap:wrap;flex-wrap:wrap;justify-content:space-between}.navbar .navbar-section{align-items:center;display:-ms-flexbox;display:flex;-ms-flex:1 0 0;flex:1 0 0;-ms-flex-align:center}.navbar .navbar-section:not(:first-child):last-child{-ms-flex-pack:end;justify-content:flex-end}.navbar .navbar-center{align-items:center;display:-ms-flexbox;display:flex;-ms-flex:0 0 auto;flex:0 0 auto;-ms-flex-align:center}.navbar .navbar-brand{font-size:.9rem;text-decoration:none}.accordion input:checked~.accordion-header>.icon:first-child,.accordion[open] .accordion-header>.icon:first-child{transform:rotate(90deg)}.accordion input:checked~.accordion-body,.accordion[open] .accordion-body{max-height:50rem}.accordion .accordion-header{display:block;padding:.2rem .4rem}.accordion .accordion-header .icon{transition:transform .25s}.accordion .accordion-body{margin-bottom:.4rem;max-height:0;overflow:hidden;transition:max-height .25s}summary.accordion-header::-webkit-details-marker{display:none}.avatar{background:#5755d9;border-radius:50%;color:rgba(255,255,255,.85);display:inline-block;font-size:.8rem;font-weight:300;height:1.6rem;line-height:1.25;margin:0;position:relative;vertical-align:middle;width:1.6rem}.avatar.avatar-xs{font-size:.4rem;height:.8rem;width:.8rem}.avatar.avatar-sm{font-size:.6rem;height:1.2rem;width:1.2rem}.avatar.avatar-lg{font-size:1.2rem;height:2.4rem;width:2.4rem}.avatar.avatar-xl{font-size:1.6rem;height:3.2rem;width:3.2rem}.avatar img{border-radius:50%;height:100%;position:relative;width:100%;z-index:1}.avatar .avatar-icon,.avatar .avatar-presence{background:#fff;bottom:14.64%;height:50%;padding:.1rem;position:absolute;right:14.64%;transform:translate(50%,50%);width:50%;z-index:2}.avatar .avatar-presence{background:#bcc3ce;border-radius:50%;box-shadow:0 0 0 .1rem #fff;height:.5em;width:.5em}.avatar .avatar-presence.online{background:#32b643}.avatar .avatar-presence.busy{background:#e85600}.avatar .avatar-presence.away{background:#ffb700}.avatar[data-initial]::before{color:currentColor;content:attr(data-initial);left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);z-index:1}.badge{position:relative;white-space:nowrap}.badge:not([data-badge])::after,.badge[data-badge]::after{background:#5755d9;background-clip:padding-box;border-radius:.5rem;box-shadow:0 0 0 .1rem #fff;color:#fff;content:attr(data-badge);display:inline-block;transform:translate(-.05rem,-.5rem)}.badge[data-badge]::after{font-size:.7rem;height:.9rem;line-height:1;min-width:.9rem;padding:.1rem .2rem;text-align:center;white-space:nowrap}.badge:not([data-badge])::after,.badge[data-badge=""]::after{height:6px;min-width:6px;padding:0;width:6px}.badge.btn::after{position:absolute;right:0;top:0;transform:translate(50%,-50%)}.badge.avatar::after{position:absolute;right:14.64%;top:14.64%;transform:translate(50%,-50%);z-index:100}.breadcrumb{list-style:none;margin:.2rem 0;padding:.2rem 0}.breadcrumb .breadcrumb-item{color:#66758c;display:inline-block;margin:0;padding:.2rem 0}.breadcrumb .breadcrumb-item:not(:last-child){margin-right:.2rem}.breadcrumb .breadcrumb-item:not(:last-child) a{color:#66758c}.breadcrumb .breadcrumb-item:not(:first-child)::before{color:#66758c;content:"/";padding-right:.4rem}.bar{background:#eef0f3;border-radius:.1rem;display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap;height:.8rem;width:100%}.bar.bar-sm{height:.2rem}.bar .bar-item{background:#5755d9;color:#fff;display:block;-ms-flex-negative:0;flex-shrink:0;font-size:.7rem;height:100%;line-height:.8rem;position:relative;text-align:center;width:0}.bar .bar-item:first-child{border-bottom-left-radius:.1rem;border-top-left-radius:.1rem}.bar .bar-item:last-child{border-bottom-right-radius:.1rem;border-top-right-radius:.1rem;-ms-flex-negative:1;flex-shrink:1}.bar-slider{height:.1rem;margin:.4rem 0;position:relative}.bar-slider .bar-item{left:0;padding:0;position:absolute}.bar-slider .bar-item:not(:last-child):first-child{background:#eef0f3;z-index:1}.bar-slider .bar-slider-btn{background:#5755d9;border:0;border-radius:50%;height:.6rem;padding:0;position:absolute;right:0;top:50%;transform:translate(50%,-50%);width:.6rem}.bar-slider .bar-slider-btn:active{box-shadow:0 0 0 .1rem #5755d9}.card{background:#fff;border:.05rem solid #dadee4;border-radius:.1rem;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.card .card-body,.card .card-footer,.card .card-header{padding:.8rem;padding-bottom:0}.card .card-body:last-child,.card .card-footer:last-child,.card .card-header:last-child{padding-bottom:.8rem}.card .card-body{-ms-flex:1 1 auto;flex:1 1 auto}.card .card-image{padding-top:.8rem}.card .card-image:first-child{padding-top:0}.card .card-image:first-child img{border-top-left-radius:.1rem;border-top-right-radius:.1rem}.card .card-image:last-child img{border-bottom-left-radius:.1rem;border-bottom-right-radius:.1rem}.chip{align-items:center;background:#eef0f3;border-radius:5rem;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;font-size:90%;height:1.2rem;line-height:.8rem;margin:.1rem;max-width:320px;overflow:hidden;padding:.2rem .4rem;text-decoration:none;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}.chip.active{background:#5755d9;color:#fff}.chip .avatar{margin-left:-.4rem;margin-right:.2rem}.chip .btn-clear{border-radius:50%;transform:scale(.75)}.dropdown{display:inline-block;position:relative}.dropdown .menu{animation:slide-down .15s ease 1;display:none;left:0;max-height:50vh;overflow-y:auto;position:absolute;top:100%}.dropdown.dropdown-right .menu{left:auto;right:0}.dropdown .dropdown-toggle:focus+.menu,.dropdown .menu:hover,.dropdown.active .menu{display:block}.dropdown .btn-group .dropdown-toggle:nth-last-child(2){border-bottom-right-radius:.1rem;border-top-right-radius:.1rem}.empty{background:#f7f8f9;border-radius:.1rem;color:#66758c;padding:3.2rem 1.6rem;text-align:center}.empty .empty-icon{margin-bottom:.8rem}.empty .empty-subtitle,.empty .empty-title{margin:.4rem auto}.empty .empty-action{margin-top:.8rem}.menu{background:#fff;border-radius:.1rem;box-shadow:0 .05rem .2rem rgba(48,55,66,.3);list-style:none;margin:0;min-width:180px;padding:.4rem;transform:translateY(.2rem);z-index:300}.menu.menu-nav{background:0 0;box-shadow:none}.menu .menu-item{margin-top:0;padding:0 .4rem;position:relative;text-decoration:none}.menu .menu-item>a{border-radius:.1rem;color:inherit;display:block;margin:0 -.4rem;padding:.2rem .4rem;text-decoration:none}.menu .menu-item>a:focus,.menu .menu-item>a:hover{background:#f1f1fc;color:#5755d9}.menu .menu-item>a.active,.menu .menu-item>a:active{background:#f1f1fc;color:#5755d9}.menu .menu-item .form-checkbox,.menu .menu-item .form-radio,.menu .menu-item .form-switch{margin:.1rem 0}.menu .menu-item+.menu-item{margin-top:.2rem}.menu .menu-badge{align-items:center;display:-ms-flexbox;display:flex;-ms-flex-align:center;height:100%;position:absolute;right:0;top:0}.menu .menu-badge .label{margin-right:.4rem}.modal{align-items:center;bottom:0;display:none;-ms-flex-align:center;-ms-flex-pack:center;justify-content:center;left:0;opacity:0;overflow:hidden;padding:.4rem;position:fixed;right:0;top:0}.modal.active,.modal:target{display:-ms-flexbox;display:flex;opacity:1;z-index:400}.modal.active .modal-overlay,.modal:target .modal-overlay{background:rgba(247,248,249,.75);bottom:0;cursor:default;display:block;left:0;position:absolute;right:0;top:0}.modal.active .modal-container,.modal:target .modal-container{animation:slide-down .2s ease 1;z-index:1}.modal.modal-sm .modal-container{max-width:320px;padding:0 .4rem}.modal.modal-lg .modal-overlay{background:#fff}.modal.modal-lg .modal-container{box-shadow:none;max-width:960px}.modal-container{background:#fff;border-radius:.1rem;box-shadow:0 .2rem .5rem rgba(48,55,66,.3);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;max-height:75vh;max-width:640px;padding:0 .8rem;width:100%}.modal-container.modal-fullheight{max-height:100vh}.modal-container .modal-header{color:#303742;padding:.8rem}.modal-container .modal-body{overflow-y:auto;padding:.8rem;position:relative}.modal-container .modal-footer{padding:.8rem;text-align:right}.nav{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;list-style:none;margin:.2rem 0}.nav .nav-item a{color:#66758c;padding:.2rem .4rem;text-decoration:none}.nav .nav-item a:focus,.nav .nav-item a:hover{color:#5755d9}.nav .nav-item.active>a{color:#505c6e;font-weight:700}.nav .nav-item.active>a:focus,.nav .nav-item.active>a:hover{color:#5755d9}.nav .nav{margin-bottom:.4rem;margin-left:.8rem}.pagination{display:-ms-flexbox;display:flex;list-style:none;margin:.2rem 0;padding:.2rem 0}.pagination .page-item{margin:.2rem .05rem}.pagination .page-item span{display:inline-block;padding:.2rem .2rem}.pagination .page-item a{border-radius:.1rem;display:inline-block;padding:.2rem .4rem;text-decoration:none}.pagination .page-item a:focus,.pagination .page-item a:hover{color:#5755d9}.pagination .page-item.disabled a{cursor:default;opacity:.5;pointer-events:none}.pagination .page-item.active a{background:#5755d9;color:#fff}.pagination .page-item.page-next,.pagination .page-item.page-prev{-ms-flex:1 0 50%;flex:1 0 50%}.pagination .page-item.page-next{text-align:right}.pagination .page-item .page-item-title{margin:0}.pagination .page-item .page-item-subtitle{margin:0;opacity:.5}.panel{border:.05rem solid #dadee4;border-radius:.1rem;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.panel .panel-footer,.panel .panel-header{-ms-flex:0 0 auto;flex:0 0 auto;padding:.8rem}.panel .panel-nav{-ms-flex:0 0 auto;flex:0 0 auto}.panel .panel-body{-ms-flex:1 1 auto;flex:1 1 auto;overflow-y:auto;padding:0 .8rem}.popover{display:inline-block;position:relative}.popover .popover-container{left:50%;opacity:0;padding:.4rem;position:absolute;top:0;transform:translate(-50%,-50%) scale(0);transition:transform .2s;width:320px;z-index:300}.popover :focus+.popover-container,.popover:hover .popover-container{display:block;opacity:1;transform:translate(-50%,-100%) scale(1)}.popover.popover-right .popover-container{left:100%;top:50%}.popover.popover-right :focus+.popover-container,.popover.popover-right:hover .popover-container{transform:translate(0,-50%) scale(1)}.popover.popover-bottom .popover-container{left:50%;top:100%}.popover.popover-bottom :focus+.popover-container,.popover.popover-bottom:hover .popover-container{transform:translate(-50%,0) scale(1)}.popover.popover-left .popover-container{left:0;top:50%}.popover.popover-left :focus+.popover-container,.popover.popover-left:hover .popover-container{transform:translate(-100%,-50%) scale(1)}.popover .card{border:0;box-shadow:0 .2rem .5rem rgba(48,55,66,.3)}.step{display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap;list-style:none;margin:.2rem 0;width:100%}.step .step-item{-ms-flex:1 1 0;flex:1 1 0;margin-top:0;min-height:1rem;position:relative;text-align:center}.step .step-item:not(:first-child)::before{background:#5755d9;content:"";height:2px;left:-50%;position:absolute;top:9px;width:100%}.step .step-item a{color:#5755d9;display:inline-block;padding:20px 10px 0;text-decoration:none}.step .step-item a::before{background:#5755d9;border:.1rem solid #fff;border-radius:50%;content:"";display:block;height:.6rem;left:50%;position:absolute;top:.2rem;transform:translateX(-50%);width:.6rem;z-index:1}.step .step-item.active a::before{background:#fff;border:.1rem solid #5755d9}.step .step-item.active~.step-item::before{background:#dadee4}.step .step-item.active~.step-item a{color:#bcc3ce}.step .step-item.active~.step-item a::before{background:#dadee4}.tab{align-items:center;border-bottom:.05rem solid #dadee4;display:-ms-flexbox;display:flex;-ms-flex-align:center;-ms-flex-wrap:wrap;flex-wrap:wrap;list-style:none;margin:.2rem 0 .15rem 0}.tab .tab-item{margin-top:0}.tab .tab-item a{border-bottom:.1rem solid transparent;color:inherit;display:block;margin:0 .4rem 0 0;padding:.4rem .2rem .3rem .2rem;text-decoration:none}.tab .tab-item a:focus,.tab .tab-item a:hover{color:#5755d9}.tab .tab-item a.active,.tab .tab-item.active a{border-bottom-color:#5755d9;color:#5755d9}.tab .tab-item.tab-action{-ms-flex:1 0 auto;flex:1 0 auto;text-align:right}.tab .tab-item .btn-clear{margin-top:-.2rem}.tab.tab-block .tab-item{-ms-flex:1 0 0;flex:1 0 0;text-align:center}.tab.tab-block .tab-item a{margin:0}.tab.tab-block .tab-item .badge[data-badge]::after{position:absolute;right:.1rem;top:.1rem;transform:translate(0,0)}.tab:not(.tab-block) .badge{padding-right:0}.tile{align-content:space-between;align-items:flex-start;display:-ms-flexbox;display:flex;-ms-flex-align:start;-ms-flex-line-pack:justify}.tile .tile-action,.tile .tile-icon{-ms-flex:0 0 auto;flex:0 0 auto}.tile .tile-content{-ms-flex:1 1 auto;flex:1 1 auto}.tile .tile-content:not(:first-child){padding-left:.4rem}.tile .tile-content:not(:last-child){padding-right:.4rem}.tile .tile-subtitle,.tile .tile-title{line-height:1.2rem}.tile.tile-centered{align-items:center;-ms-flex-align:center}.tile.tile-centered .tile-content{overflow:hidden}.tile.tile-centered .tile-subtitle,.tile.tile-centered .tile-title{margin-bottom:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.toast{background:rgba(48,55,66,.95);border:.05rem solid #303742;border-color:#303742;border-radius:.1rem;color:#fff;display:block;padding:.4rem;width:100%}.toast.toast-primary{background:rgba(87,85,217,.95);border-color:#5755d9}.toast.toast-success{background:rgba(50,182,67,.95);border-color:#32b643}.toast.toast-warning{background:rgba(255,183,0,.95);border-color:#ffb700}.toast.toast-error{background:rgba(232,86,0,.95);border-color:#e85600}.toast a{color:#fff;text-decoration:underline}.toast a.active,.toast a:active,.toast a:focus,.toast a:hover{opacity:.75}.toast .btn-clear{margin:.1rem}.toast p:last-child{margin-bottom:0}.tooltip{position:relative}.tooltip::after{background:rgba(48,55,66,.95);border-radius:.1rem;bottom:100%;color:#fff;content:attr(data-tooltip);display:block;font-size:.7rem;left:50%;max-width:320px;opacity:0;overflow:hidden;padding:.2rem .4rem;pointer-events:none;position:absolute;text-overflow:ellipsis;transform:translate(-50%,.4rem);transition:opacity .2s,transform .2s;white-space:pre;z-index:300}.tooltip:focus::after,.tooltip:hover::after{opacity:1;transform:translate(-50%,-.2rem)}.tooltip.disabled,.tooltip[disabled]{pointer-events:auto}.tooltip.tooltip-right::after{bottom:50%;left:100%;transform:translate(-.2rem,50%)}.tooltip.tooltip-right:focus::after,.tooltip.tooltip-right:hover::after{transform:translate(.2rem,50%)}.tooltip.tooltip-bottom::after{bottom:auto;top:100%;transform:translate(-50%,-.4rem)}.tooltip.tooltip-bottom:focus::after,.tooltip.tooltip-bottom:hover::after{transform:translate(-50%,.2rem)}.tooltip.tooltip-left::after{bottom:50%;left:auto;right:100%;transform:translate(.4rem,50%)}.tooltip.tooltip-left:focus::after,.tooltip.tooltip-left:hover::after{transform:translate(-.2rem,50%)}@keyframes loading{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes slide-down{0%{opacity:0;transform:translateY(-1.6rem)}100%{opacity:1;transform:translateY(0)}}.text-primary{color:#5755d9!important}a.text-primary:focus,a.text-primary:hover{color:#4240d4}a.text-primary:visited{color:#6c6ade}.text-secondary{color:#e5e5f9!important}a.text-secondary:focus,a.text-secondary:hover{color:#d1d0f4}a.text-secondary:visited{color:#fafafe}.text-gray{color:#bcc3ce!important}a.text-gray:focus,a.text-gray:hover{color:#adb6c4}a.text-gray:visited{color:#cbd0d9}.text-light{color:#fff!important}a.text-light:focus,a.text-light:hover{color:#f2f2f2}a.text-light:visited{color:#fff}.text-dark{color:#3b4351!important}a.text-dark:focus,a.text-dark:hover{color:#303742}a.text-dark:visited{color:#455060}.text-success{color:#32b643!important}a.text-success:focus,a.text-success:hover{color:#2da23c}a.text-success:visited{color:#39c94b}.text-warning{color:#ffb700!important}a.text-warning:focus,a.text-warning:hover{color:#e6a500}a.text-warning:visited{color:#ffbe1a}.text-error{color:#e85600!important}a.text-error:focus,a.text-error:hover{color:#cf4d00}a.text-error:visited{color:#ff6003}.bg-primary{background:#5755d9!important;color:#fff}.bg-secondary{background:#f1f1fc!important}.bg-dark{background:#303742!important;color:#fff}.bg-gray{background:#f7f8f9!important}.bg-success{background:#32b643!important;color:#fff}.bg-warning{background:#ffb700!important;color:#fff}.bg-error{background:#e85600!important;color:#fff}.c-hand{cursor:pointer}.c-move{cursor:move}.c-zoom-in{cursor:zoom-in}.c-zoom-out{cursor:zoom-out}.c-not-allowed{cursor:not-allowed}.c-auto{cursor:auto}.d-block{display:block}.d-inline{display:inline}.d-inline-block{display:inline-block}.d-flex{display:-ms-flexbox;display:flex}.d-inline-flex{display:-ms-inline-flexbox;display:inline-flex}.d-hide,.d-none{display:none!important}.d-visible{visibility:visible}.d-invisible{visibility:hidden}.text-hide{background:0 0;border:0;color:transparent;font-size:0;line-height:0;text-shadow:none}.text-assistive{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.divider,.divider-vert{display:block;position:relative}.divider-vert[data-content]::after,.divider[data-content]::after{background:#fff;color:#bcc3ce;content:attr(data-content);display:inline-block;font-size:.7rem;padding:0 .4rem;transform:translateY(-.65rem)}.divider{border-top:.05rem solid #f1f3f5;height:.05rem;margin:.4rem 0}.divider[data-content]{margin:.8rem 0}.divider-vert{display:block;padding:.8rem}.divider-vert::before{border-left:.05rem solid #dadee4;bottom:.4rem;content:"";display:block;left:50%;position:absolute;top:.4rem;transform:translateX(-50%)}.divider-vert[data-content]::after{left:50%;padding:.2rem 0;position:absolute;top:50%;transform:translate(-50%,-50%)}.loading{color:transparent!important;min-height:.8rem;pointer-events:none;position:relative}.loading::after{animation:loading .5s infinite linear;background:0 0;border:.1rem solid #5755d9;border-radius:50%;border-right-color:transparent;border-top-color:transparent;content:"";display:block;height:.8rem;left:50%;margin-left:-.4rem;margin-top:-.4rem;opacity:1;padding:0;position:absolute;top:50%;width:.8rem;z-index:1}.loading.loading-lg{min-height:2rem}.loading.loading-lg::after{height:1.6rem;margin-left:-.8rem;margin-top:-.8rem;width:1.6rem}.clearfix::after{clear:both;content:"";display:table}.float-left{float:left!important}.float-right{float:right!important}.p-relative{position:relative!important}.p-absolute{position:absolute!important}.p-fixed{position:fixed!important}.p-sticky{position:-webkit-sticky!important;position:sticky!important}.p-centered{display:block;float:none;margin-left:auto;margin-right:auto}.flex-centered{align-items:center;display:-ms-flexbox;display:flex;-ms-flex-align:center;-ms-flex-pack:center;justify-content:center}.m-0{margin:0!important}.mb-0{margin-bottom:0!important}.ml-0{margin-left:0!important}.mr-0{margin-right:0!important}.mt-0{margin-top:0!important}.mx-0{margin-left:0!important;margin-right:0!important}.my-0{margin-bottom:0!important;margin-top:0!important}.m-1{margin:.2rem!important}.mb-1{margin-bottom:.2rem!important}.ml-1{margin-left:.2rem!important}.mr-1{margin-right:.2rem!important}.mt-1{margin-top:.2rem!important}.mx-1{margin-left:.2rem!important;margin-right:.2rem!important}.my-1{margin-bottom:.2rem!important;margin-top:.2rem!important}.m-2{margin:.4rem!important}.mb-2{margin-bottom:.4rem!important}.ml-2{margin-left:.4rem!important}.mr-2{margin-right:.4rem!important}.mt-2{margin-top:.4rem!important}.mx-2{margin-left:.4rem!important;margin-right:.4rem!important}.my-2{margin-bottom:.4rem!important;margin-top:.4rem!important}.p-0{padding:0!important}.pb-0{padding-bottom:0!important}.pl-0{padding-left:0!important}.pr-0{padding-right:0!important}.pt-0{padding-top:0!important}.px-0{padding-left:0!important;padding-right:0!important}.py-0{padding-bottom:0!important;padding-top:0!important}.p-1{padding:.2rem!important}.pb-1{padding-bottom:.2rem!important}.pl-1{padding-left:.2rem!important}.pr-1{padding-right:.2rem!important}.pt-1{padding-top:.2rem!important}.px-1{padding-left:.2rem!important;padding-right:.2rem!important}.py-1{padding-bottom:.2rem!important;padding-top:.2rem!important}.p-2{padding:.4rem!important}.pb-2{padding-bottom:.4rem!important}.pl-2{padding-left:.4rem!important}.pr-2{padding-right:.4rem!important}.pt-2{padding-top:.4rem!important}.px-2{padding-left:.4rem!important;padding-right:.4rem!important}.py-2{padding-bottom:.4rem!important;padding-top:.4rem!important}.s-rounded{border-radius:.1rem}.s-circle{border-radius:50%}.text-left{text-align:left}.text-right{text-align:right}.text-center{text-align:center}.text-justify{text-align:justify}.text-lowercase{text-transform:lowercase}.text-uppercase{text-transform:uppercase}.text-capitalize{text-transform:capitalize}.text-normal{font-weight:400}.text-bold{font-weight:700}.text-italic{font-style:italic}.text-large{font-size:1.2em}.text-small{font-size:.9em}.text-tiny{font-size:.8em}.text-muted{opacity:.8}.text-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.text-clip{overflow:hidden;text-overflow:clip;white-space:nowrap}.text-break{-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;word-break:break-word;word-wrap:break-word}
\ No newline at end of file
diff --git a/defaultapps.json b/defaultapps_banglejs1.json
similarity index 100%
rename from defaultapps.json
rename to defaultapps_banglejs1.json
diff --git a/defaultapps_banglejs2.json b/defaultapps_banglejs2.json
new file mode 100644
index 000000000..04bd44504
--- /dev/null
+++ b/defaultapps_banglejs2.json
@@ -0,0 +1 @@
+["boot","launch","antonclk","health","setting","about","widbat","widbt","widlock","widid"]
diff --git a/index.html b/index.html
index a5ae7bff0..e22a1f9e7 100644
--- a/index.html
+++ b/index.html
@@ -21,8 +21,9 @@
   
   
     

-      

-        Bangle.js  App Loader
+      

+        Bangle.js
+        
App Loader

         
       

       

@@ -59,7 +60,18 @@
     
 
     

-      

+      

+        

+          
+            All apps
+          
+          
+          
+        

         

           
           
@@ -125,6 +137,10 @@
             
              Pretokenise apps before upload (smaller, faster apps)
           
+          
           
         

       

diff --git a/loader.js b/loader.js
index e0e1399b1..680cd0f94 100644
--- a/loader.js
+++ b/loader.js
@@ -11,9 +11,13 @@ if (window.location.host=="banglejs.com") {
     'This is not the official Bangle.js App Loader - you can try the Official Version here.';
 }
 
-var RECOMMENDED_VERSION = "2v09";
+var RECOMMENDED_VERSION = "2v10";
 // could check http://www.espruino.com/json/BANGLEJS.json for this
 
+// We're only interested in Bangles
+DEVICEINFO = DEVICEINFO.filter(x=>x.id.startsWith("BANGLEJS"));
+
+// Set up source code URL
 (function() {
   let username = "espruino";
   let githubMatch = window.location.href.match(/\/(\w+)\.github\.io/);
@@ -21,16 +25,171 @@ var RECOMMENDED_VERSION = "2v09";
   Const.APP_SOURCECODE_URL = `https://github.com/${username}/BangleApps/tree/master/apps`;
 })();
 
+// When a device is found, filter the apps accordingly
 function onFoundDeviceInfo(deviceId, deviceVersion) {
-  if (deviceId != "BANGLEJS" && deviceId != "BANGLEJS2") {
-    showToast(`You're using ${deviceId}, not a Bangle.js. Did you want espruino.com/apps instead?` ,"warning", 20000);
-  } else if (versionLess(deviceVersion, RECOMMENDED_VERSION)) {
-    showToast(`You're using an old Bangle.js firmware (${deviceVersion}). You can update with the instructions here` ,"warning", 20000);
-  }
+  var fwURL = "#";
   if (deviceId == "BANGLEJS") {
+    fwURL = "https://www.espruino.com/Bangle.js#firmware-updates";
     Const.MESSAGE_RELOAD = 'Hold BTN3\nto reload';
   }
   if (deviceId == "BANGLEJS2") {
+    fwURL = "https://www.espruino.com/Bangle.js2#firmware-updates";
     Const.MESSAGE_RELOAD = 'Hold button\nto reload';
   }
+
+  if (deviceId != "BANGLEJS" && deviceId != "BANGLEJS2") {
+    showToast(`You're using ${deviceId}, not a Bangle.js. Did you want espruino.com/apps instead?` ,"warning", 20000);
+  } else if (versionLess(deviceVersion, RECOMMENDED_VERSION)) {
+    showToast(`You're using an old Bangle.js firmware (${deviceVersion}). You can update with the instructions here` ,"warning", 20000);
+  }
+
+
+  // check against features shown?
+  filterAppsForDevice(deviceId);
+  /* if we'd saved a device ID but this device is different, ensure
+  we ask again next time */
+  var savedDeviceId = getSavedDeviceId();
+  if (savedDeviceId!==undefined && savedDeviceId!=deviceId)
+    setSavedDeviceId(undefined);
+}
+
+var originalAppJSON = undefined;
+function filterAppsForDevice(deviceId) {
+  if (originalAppJSON===undefined && appJSON.length)
+    originalAppJSON = appJSON;
+
+  var device = DEVICEINFO.find(d=>d.id==deviceId);
+  // set the device dropdown
+  document.querySelector(".devicetype-nav span").innerText = device ? device.name : "All apps";
+
+  if (!device) {
+    if (deviceId!==undefined)
+      showToast(`Device ID ${deviceId} not recognised. Some apps may not work`, "warning");
+    appJSON = originalAppJSON;
+  } else {
+    // Now filter apps
+    appJSON = originalAppJSON.filter(app => {
+      var supported = ["BANGLEJS"];
+      if (!app.supports) {
+        console.log(`App ${app.id} doesn't include a 'supports' field - ignoring`);
+        return false;
+      }
+      if (app.supports.includes(deviceId)) return true;
+      //console.log(`Dropping ${app.id} because ${deviceId} is not in supported list ${app.supports.join(",")}`);
+      return false;
+    });
+  }
+  refreshLibrary();
+}
+
+// If 'remember' was checked in the window below, this is the device
+function getSavedDeviceId() {
+  let deviceId = localStorage.getItem("deviceId");
+  if (("string"==typeof deviceId) && DEVICEINFO.find(d=>d.id == deviceId))
+    return deviceId;
+  return undefined;
+}
+
+function setSavedDeviceId(deviceId) {
+  localStorage.setItem("deviceId", deviceId);
+}
+
+// At boot, show a window to choose which type of device you have...
+window.addEventListener('load', (event) => {
+  let deviceId = getSavedDeviceId()
+  if (deviceId !== undefined) return; // already chosen
+
+  var html = `

+    ${DEVICEINFO.map(d=>`
+    

+      

+        

+          
${d.name}

+          
+        

+        

+          ${d.name}
+        

+      

+    
`).join("\n")}
+  

+    

+    

+      
+    

+    

+  
`;
+  showPrompt("Which Bangle.js?",html,{},false);
+  htmlToArray(document.querySelectorAll(".devicechooser")).forEach(button => {
+    button.addEventListener("click",event => {
+      let rememberDevice = document.getElementById("remember_device").checked;
+
+      let button = event.currentTarget;
+      let deviceId = button.getAttribute("deviceid");
+      hidePrompt();
+      console.log("Chosen device", deviceId);
+      setSavedDeviceId(rememberDevice ? deviceId : undefined);
+      filterAppsForDevice(deviceId);
+    });
+  });
+});
+
+window.addEventListener('load', (event) => {
+  // Hook onto device chooser dropdown
+  htmlToArray(document.querySelectorAll(".devicetype-nav .menu-item")).forEach(button => {
+    button.addEventListener("click", event => {
+      var a = event.target;
+      var deviceId = a.getAttribute("dt")||undefined;
+      filterAppsForDevice(deviceId); // also sets the device dropdown
+      setSavedDeviceId(undefined); // ask at startup next time
+      document.querySelector(".devicetype-nav span").innerText = a.innerText;
+    });
+  });
+
+  // Button to install all default apps in one go
+  document.getElementById("installdefault").addEventListener("click",event=>{
+    getInstalledApps().then(() => {
+      if (device.id == "BANGLEJS")
+        return httpGet("defaultapps_banglejs1.json");
+      if (device.id == "BANGLEJS2")
+        return httpGet("defaultapps_banglejs2.json");
+      throw new Error("Unknown device "+device.id);
+    }).then(json=>{
+      return installMultipleApps(JSON.parse(json), "default");
+    }).catch(err=>{
+      Progress.hide({sticky:true});
+      showToast("App Install failed, "+err,"error");
+    });
+  });
+});
+
+function onAppJSONLoaded() {
+  let deviceId = getSavedDeviceId()
+  if (deviceId !== undefined)
+    filterAppsForDevice(deviceId);
+
+  /* Disable external screenshot loading - seems we probably have enough
+  screenshots added manually in apps.json */
+  /*return new Promise(resolve => {
+    httpGet("screenshots.json").then(screenshotJSON=>{
+      var screenshots = [];
+      try {
+        screenshots = JSON.parse(screenshotJSON);
+      } catch(e) {
+        console.error("Screenshot JSON Corrupted", e);
+      }
+      screenshots.forEach(s => {
+        var app = appJSON.find(a=>a.id==s.id);
+        if (!app) return;
+        if (!app.screenshots) app.screenshots = [];
+        app.screenshots.push({url:s.url});
+      })
+    }).catch(err=>{
+      console.log("No screenshots.json found");
+      resolve();
+    });
+  });*/
 }
diff --git a/modules/Layout.js b/modules/Layout.js
index a45b17107..6dc4b6368 100644
--- a/modules/Layout.js
+++ b/modules/Layout.js
@@ -1,11 +1,10 @@
-
 /*
 
 Usage:
 
 ```
 var Layout = require("Layout");
-var layout = new Layout( layoutObject, btns )
+var layout = new Layout( layoutObject, options )
 layout.render(optionalObject);
 ```
 
@@ -30,27 +29,36 @@ layoutObject has:
   * `undefined` - blank, can be used for padding
   * `"txt"` - a text label, with value `label` and `r` for text rotation. 'font' is required
   * `"btn"` - a button, with value `label` and callback `cb`
-  * `"img"` - an image where the function `src` is called to return an image to draw
+       optional `src` specifies an image (like img) in which case label is ignored
+  * `"img"` - an image where `src` is an image, or a function which is called to return an image to draw.
+       optional `scale` specifies if image should be scaled up or not
   * `"custom"` - a custom block where `render(layoutObj)` is called to render
   * `"h"` - Horizontal layout, `c` is an array of more `layoutObject`
   * `"v"` - Veritical layout, `c` is an array of more `layoutObject`
 * A `id` field. If specified the object is added with this name to the
   returned `layout` object, so can be referenced as `layout.foo`
 * A `font` field, eg `6x8` or `30%` to use a percentage of screen height
+* A `wrap` field to enable line wrapping. Requires some combination of `width`/`height`
+  and `fillx`/`filly` to be set. Not compatible with text rotation.
 * A `col` field, eg `#f00` for red
 * A `bgCol` field for background color (will automatically fill on render)
 * A `halign` field to set horizontal alignment. `-1`=left, `1`=right, `0`=center
 * A `valign` field to set vertical alignment. `-1`=top, `1`=bottom, `0`=center
 * A `pad` integer field to set pixels padding
-* A `fillx` boolean to choose if the object should fill available space in x
-* A `filly` boolean to choose if the object should fill available space in y
+* A `fillx` int to choose if the object should fill available space in x. 0=no, 1=yes, 2=2x more space
+* A `filly` int to choose if the object should fill available space in y. 0=no, 1=yes, 2=2x more space
 * `width` and `height` fields to optionally specify minimum size
 
-btns is an array of objects containing:
+options is an object containing:
 
-* `label` - the text on the button
-* `cb` - a callback function
-* `cbl` - a callback function for long presses
+* `lazy` - a boolean specifying whether to enable automatic lazy rendering
+* `btns` - array of objects containing:
+  * `label` - the text on the button
+  * `cb` - a callback function
+  * `cbl` - a callback function for long presses
+
+If automatic lazy rendering is enabled, calls to `layout.render()` will attempt to automatically
+determine what objects have changed or moved, clear their previous locations, and re-render just those objects.
 
 Once `layout.update()` is called, the following fields are added
 to each object:
@@ -65,21 +73,65 @@ Other functions:
 * `layout.update()` - update positions of everything if contents have changed
 * `layout.debug(obj)` - draw outlines for objects on screen
 * `layout.clear(obj)` - clear the given object (you can also just specify `bgCol` to clear before each render)
+* `layout.forgetLazyState()` - if lazy rendering is enabled, makes the next call to `render()` perform a full re-render
 
 */
 
 
-function Layout(layout, buttons) {
+function Layout(layout, options) {
   this._l = this.l = layout;
-  this.b = buttons;
   // Do we have >1 physical buttons?
   this.physBtns = (process.env.HWVERSION==2) ? 1 : 3;
-  this.yOffset = Object.keys(global.WIDGETS).length ? 24 : 0;
 
-  if (buttons) {    
+  options = options || {};
+  this.lazy = options.lazy || false;
+
+  var btnList;
+  Bangle.setUI(); // remove all existing input handlers
+  if (process.env.HWVERSION!=2) {
+    // no touchscreen, find any buttons in 'layout'
+    btnList = [];
+    function btnRecurser(l) {
+      if (l.type=="btn") btnList.push(l);
+      if (l.c) l.c.forEach(btnRecurser);
+    }
+    btnRecurser(layout);
+    if (btnList.length) { // there are buttons in 'layout'
+      // disable physical buttons - use them for back/next/select
+      this.physBtns = 0;
+      this.buttons = btnList;
+      this.selectedButton = -1;
+      Bangle.setUI("updown", dir=>{
+        var s = this.selectedButton, l=this.buttons.length;
+        if (dir===undefined && this.buttons[s])
+          return this.buttons[s].cb();
+        if (this.buttons[s]) {
+          delete this.buttons[s].selected;
+          this.render(this.buttons[s]);
+        }
+        s = (s+l+dir) % l;
+        if (this.buttons[s]) {
+          this.buttons[s].selected = 1;
+          this.render(this.buttons[s]);
+        }
+        this.selectedButton = s;
+      });
+    }
+  }
+
+  if (options.btns) {
+    var buttons = options.btns;
+    this.b = buttons;
     if (this.physBtns >= buttons.length) {
+      // Handler for button watch events
+      function pressHandler(btn,e) {
+        if (e.time-e.lastTime > 0.75 && this.b[btn].cbl)
+          this.b[btn].cbl(e);
+        else
+          if (this.b[btn].cb) this.b[btn].cb(e);
+      }
       // enough physical buttons
-      var btnHeight = Math.floor((g.getHeight()-this.yOffset) / this.physBtns);
+      let btnHeight = Math.floor(Bangle.appRect.h / this.physBtns);
       if (Bangle.btnWatch) Bangle.btnWatch.forEach(clearWatch);
       Bangle.btnWatch = [];
       if (this.physBtns > 2 && buttons.length==1)
@@ -95,27 +147,47 @@ function Layout(layout, buttons) {
         {type:"v", pad:1, filly:1, c: buttons.map(b=>(b.type="txt",b.font="6x8",b.height=btnHeight,b.r=1,b))}
       ]};
     } else {
-      var btnHeight = Math.floor((g.getHeight()-this.yOffset) / buttons.length);
-      this._l.width = g.getWidth()-20; // button width
+      // add 'soft' buttons
+      this._l.width = g.getWidth()-32; // button width
       this._l = {type:"h", c: [
         this._l,
-        {type:"v", c: buttons.map(b=>(b.type="btn",b.h=btnHeight,b.w=32,b.r=1,b))}
+        {type:"v", c: buttons.map(b=>(b.type="btn",b.filly=1,b.width=32,b.r=1,b))}
       ]};
+      // if we're selecting with physical buttons, add these to the list
+      if (btnList) btnList.push.apply(btnList, this._l.c[1].c);
     }
   }
   if (process.env.HWVERSION==2) {
-    Bangle.touchHandler = (_,e) => touchHandler(layout,e);
-    Bangle.on('touch',Bangle.touchHandler);    
+
+    // Handler for touch events
+    function touchHandler(l,e) {
+      if (l.type=="btn" && l.cb && e.x>=l.x && e.y>=l.y && e.x<=l.x+l.w && e.y<=l.y+l.h) {
+        if (e.type==2 && l.cbl) l.cbl(e); else if (l.cb) l.cb(e);
+      }
+      if (l.c) l.c.forEach(n => touchHandler(n,e));
+    }
+    Bangle.touchHandler = (_,e)=>touchHandler(this._l,e);
+    Bangle.on('touch',Bangle.touchHandler);
   }
-  
-  // add IDs
+
+  // recurse over layout doing some fixing up if needed
   var ll = this;
-  function idRecurser(l) {
+  function recurser(l) {
+    // add IDs
     if (l.id) ll[l.id] = l;
-    if (l.c) l.c.forEach(idRecurser);
+    // fix type up
+    if (!l.type) l.type="";
+    // FIXME ':'/fsz not needed in new firmwares - Font:12 is handled internally
+    // fix fonts for pre-2v11 firmware
+    if (l.font && l.font.includes(":")) {
+      var f = l.font.split(":");
+      l.font = f[0];
+      l.fsz = f[1];
+    }
+    if (l.c) l.c.forEach(recurser);
   }
-  idRecurser(layout);
-  this.update();
+  recurser(this._l);
+  this.updateNeeded = true;
 }
 
 Layout.prototype.remove = function (l) {
@@ -129,156 +201,133 @@ Layout.prototype.remove = function (l) {
   }
 };
 
-// Handler for button watch events
-function pressHandler(btn,e) {
-  if (e.time-e.lastTime > 0.75 && this.b[btn].cbl)
-    this.b[btn].cbl(e);
-  else
-    if (this.b[btn].cb) this.b[btn].cb(e);
-}
+function prepareLazyRender(l, rectsToClear, drawList, rects, parentBg) {
+  var bgCol = l.bgCol == null ? parentBg : g.toColor(l.bgCol);
+  if (bgCol != parentBg || l.type == "txt" || l.type == "btn" || l.type == "img" || l.type == "custom") {
+    // Hash the layoutObject without including its children
+    var c = l.c;
+    delete l.c;
+    var hash = "H"+E.CRC32(E.toJS(l)); // String keys maintain insertion order
+    if (c) l.c = c;
 
-// Handler for touch events
-function touchHandler(l,e) {
-  if (l.type=="btn" && l.cb && e.x>=l.x && e.y>=l.y && e.x<=l.x+l.w && e.y<=l.y+l.h)
-    l.cb(e);
-  if (l.c) l.c.forEach(n => touchHandler(n,e));
-}
-
-
-function updateMin(l) {
-  switch (l.type) {
-    case "txt": {
-      if (l.font.endsWith("%"))
-        l.font = "Vector"+Math.round(g.getHeight()*l.font.slice(0,-1)/100);
-      // FIXME ':'/fsz not needed in new firmwares - it's handled internally
-      if (l.font.includes(":")) {
-        var f = l.font.split(":");
-        l.font = f[0];
-        l.fsz = f[1];
+    if (!delete rectsToClear[hash]) {
+      var r = rects[hash] = [l.x,l.y,l.x+l.w-1,l.y+l.h-1];
+      r.bg = parentBg == null ? g.theme.bg : parentBg;
+      if (drawList) {
+        drawList.push(l);
+        drawList = null; // Prevent children from being redundantly added to the drawList
       }
-      g.setFont(l.font,l.fsz);
-      l._h = g.getFontHeight();
-      l._w = g.stringWidth(l.label);
-      break;
     }
-    case "btn": {
-      l._h = 24;
-      l._w = 14 + l.label.length*8;
-      break;
-    }
-    case "img": {
-      var im = E.toString(l.src());
-      l._h = im.charCodeAt(0);
-      l._w = im.charCodeAt(1);
-      break;
-    }
-    case undefined:
-    case "custom": {
-      // size should already be set up in width/height
-      l._w = 0;
-      l._h = 0;
-      break;
-    }
-    case "h": {
-      l.c.forEach(updateMin);
-      l._h = l.c.reduce((a,b)=>Math.max(a,b._h+(b.pad<<1)),0);
-      l._w = l.c.reduce((a,b)=>a+b._w+(b.pad<<1),0);
-      l.fillx |= l.c.some(c=>c.fillx);
-      break;
-    }
-    case "v": {
-      l.c.forEach(updateMin);
-      l._h = l.c.reduce((a,b)=>a+b._h+(b.pad<<1),0);
-      l._w = l.c.reduce((a,b)=>Math.max(a,b._w+(b.pad<<1)),0);
-      l.filly |= l.c.some(c=>c.filly);
-      break;
-    }
-    default: throw "Unknown item type "+l.type;
   }
-  if (l.r&1) { // rotation
-    var t = l._w;l._w=l._h;l._h=t;
-  }
-  l._w = Math.max(l._w, 0|l.width);
-  l._h = Math.max(l._h, 0|l.height);
-}
-function render(l) {
-  if (!l) l = this.l;
-  g.reset();
-  if (l.col) g.setColor(l.col);
-  if (l.bgCol!==undefined) g.setBgColor(l.bgCol).clearRect(l.x,l.y,l.x+l.w,l.y+l.h);
-  switch (l.type) {
-    case "txt":
-      g.setFont(l.font,l.fsz).setFontAlign(0,0,l.r).drawString(l.label, l.x+(l.w>>1), l.y+(l.h>>1), true/*solid bg*/);
-      break;
-    case "btn":
-      var poly = [
-        l.x,l.y+4,
-        l.x+4,l.y,
-        l.x+l.w-5,l.y,
-        l.x+l.w-1,l.y+4,
-        l.x+l.w-1,l.y+l.h-5,
-        l.x+l.w-5,l.y+l.h-1,
-        l.x+4,l.y+l.h-1,
-        l.x,l.y+l.h-5,
-        l.x,l.y+4
-      ];
-    g.setColor(g.theme.bgH).fillPoly(poly).setColor(l.selected ? g.theme.fgH : g.theme.fg).drawPoly(poly).setFont("4x6",2).setFontAlign(0,0,l.r).drawString(l.label,l.x+l.w/2,l.y+l.h/2);
-      break;
-  case "img":
-    g.drawImage(l.src(), l.x, l.y);
-    break;
-  case "custom":
-    l.render(l);
-    break;
-  }
-  if (l.c) l.c.forEach(render);
+
+  if (l.c) for (var ch of l.c) prepareLazyRender(ch, rectsToClear, drawList, rects, bgCol);
 }
 
 Layout.prototype.render = function (l) {
   if (!l) l = this._l;
-  render(l);
+  if (this.updateNeeded) this.update();
+
+  function render(l) {"ram"
+    g.reset();
+    if (l.col) g.setColor(l.col);
+    if (l.bgCol!==undefined) g.setBgColor(l.bgCol).clearRect(l.x,l.y,l.x+l.w-1,l.y+l.h-1);
+    cb[l.type](l);
+  }
+
+  var cb = {
+    "":function(){},
+    "txt":function(l){
+      if (l.wrap) {
+        g.setFont(l.font,l.fsz).setFontAlign(0,-1);
+        var lines = g.wrapString(l.label, l.w);
+        var y = l.y+((l.h-g.getFontHeight()*lines.length)>>1);
+        //  TODO: on 2v11 we can just render in a single drawString call
+        lines.forEach((line, i) => g.drawString(line, l.x+(l.w>>1), y+g.getFontHeight()*i));
+      } else {
+        g.setFont(l.font,l.fsz).setFontAlign(0,0,l.r).drawString(l.label, l.x+(l.w>>1), l.y+(l.h>>1));
+      }
+    }, "btn":function(l){
+      var x = l.x+(0|l.pad), y = l.y+(0|l.pad),
+          w = l.w-(l.pad<<1), h = l.h-(l.pad<<1);
+      var poly = [
+        x,y+4,
+        x+4,y,
+        x+w-5,y,
+        x+w-1,y+4,
+        x+w-1,y+h-5,
+        x+w-5,y+h-1,
+        x+4,y+h-1,
+        x,y+h-5,
+        x,y+4
+      ], bg = l.selected?g.theme.bgH:g.theme.bg2;
+    g.setColor(bg).fillPoly(poly).setColor(l.selected ? g.theme.fgH : g.theme.fg2).drawPoly(poly);
+    if (l.src) g.setBgColor(bg).drawImage("function"==typeof l.src?l.src():l.src, l.x + 10 + (0|l.pad), l.y + 8 + (0|l.pad));
+    else g.setFont("6x8",2).setFontAlign(0,0,l.r).drawString(l.label,l.x+l.w/2,l.y+l.h/2);
+  }, "img":function(l){
+    g.drawImage("function"==typeof l.src?l.src():l.src, l.x + (0|l.pad), l.y + (0|l.pad), l.scale?{scale:l.scale}:undefined);
+  }, "custom":function(l){
+    l.render(l);
+  },"h":function(l) { l.c.forEach(render); },
+    "v":function(l) { l.c.forEach(render); }
+  };
+
+  if (this.lazy) {
+    // we have to use 'var' here not 'let', otherwise the minifier
+    // renames vars to the same name, which causes problems as Espruino
+    // doesn't yet honour the scoping of 'let'
+    if (!this.rects) this.rects = {};
+    var rectsToClear = this.rects.clone();
+    var drawList = [];
+    prepareLazyRender(l, rectsToClear, drawList, this.rects, null);
+    for (var h in rectsToClear) delete this.rects[h];
+    var clearList = Object.keys(rectsToClear).map(k=>rectsToClear[k]).reverse(); // Rects are cleared in reverse order so that the original bg color is restored
+    for (var r of clearList) g.setBgColor(r.bg).clearRect.apply(g, r);
+    drawList.forEach(render);
+  } else { // non-lazy
+    render(l);
+  }
 };
 
+Layout.prototype.forgetLazyState = function () {
+  this.rects = {};
+}
+
 Layout.prototype.layout = function (l) {
   // l = current layout element
   // exw,exh = extra width/height available
-  var fillx = l.c && l.c.reduce((a,l)=>a+(0|l.fillx),0);
-  var filly = l.c && l.c.reduce((a,l)=>a+(0|l.filly),0);
   switch (l.type) {
     case "h": {
-      let x = l.x + (l.w-l._w)/2;
-      if (fillx) { x = l.x; }
+      var acc_w = l.x + (0|l.pad);
+      var accfillx = 0;
+      var fillx = l.c && l.c.reduce((a,l)=>a+(0|l.fillx),0);
+      if (!fillx) { acc_w += (l.w-l._w)>>1; fillx=1; }
+      var x = acc_w;
       l.c.forEach(c => {
-        c.w = c._w + (c.fillx?(l.w-l._w)/fillx:0);
-        c.h = c.filly ? l.h : c._h;
-        c.x = x;
-        c.y = l.y + (1+(0|c.valign))*(l.h-c.h)/2;
-        x += c.w;
-        if (c.pad) {
-          x += c.pad*2;
-          c.w += c.pad*2;
-          c.h += c.pad*2;
-        }
-        if (c.c) {
-          this.layout(c);
-        }
+        c.x = 0|x;
+        acc_w += c._w;
+        accfillx += 0|c.fillx;
+        x = acc_w + Math.floor(accfillx*(l.w-l._w)/fillx);
+        c.w = 0|(x - c.x);
+        c.h = 0|(c.filly ? l.h - (l.pad<<1) : c._h);
+        c.y = 0|(l.y + (0|l.pad) + ((1+(0|c.valign))*(l.h-(l.pad<<1)-c.h)>>1));
+        if (c.c) this.layout(c);
       });
       break;
     }
     case "v": {
-      let y = l.y + (l.h-l._h)/2;
-      if (filly) { y = l.y; }
+      var acc_h = l.y + (0|l.pad);
+      var accfilly = 0;
+      var filly = l.c && l.c.reduce((a,l)=>a+(0|l.filly),0);
+      if (!filly) { acc_h += (l.h-l._h)>>1; filly=1; }
+      var y = acc_h;
       l.c.forEach(c => {
-        c.w = c.fillx ? l.w : c._w;
-        c.h = c._h + (c.filly?(l.h-l._h)/filly:0);
-        c.x = l.x + (1+(0|c.halign))*(l.w-c.w)/2;
-        c.y = y;
-        y += c.h;
-        if (c.pad) {
-          y += c.pad*2;
-          c.w += c.pad*2;
-          c.h += c.pad*2;
-        }
+        c.y = 0|y;
+        acc_h += c._h;
+        accfilly += 0|c.filly;
+        y = acc_h + Math.floor(accfilly*(l.h-l._h)/filly);
+        c.h = 0|(y - c.y);
+        c.w = 0|(c.fillx ? l.w - (l.pad<<1) : c._w);
+        c.x = 0|(l.x + (0|l.pad) + ((1+(0|c.halign))*(l.w-(l.pad<<1)-c.w)>>1));
         if (c.c) this.layout(c);
       });
       break;
@@ -289,27 +338,75 @@ Layout.prototype.debug = function(l,c) {
   if (!l) l = this._l;
   c=c||1;
   g.setColor(c&1,c&2,c&4).drawRect(l.x+c-1, l.y+c-1, l.x+l.w-c, l.y+l.h-c);
+  if (l.pad)
+    g.drawRect(l.x+l.pad-1, l.y+l.pad-1, l.x+l.w-l.pad, l.y+l.h-l.pad);
   c++;
   if (l.c) l.c.forEach(n => this.debug(n,c));
 };
 Layout.prototype.update = function() {
-  var l = this._l;
-  var w = g.getWidth();
-  var y = this.yOffset;
-  var h = g.getHeight()-y;
+  delete this.updateNeeded;
   // update sizes
+  function updateMin(l) {"ram"
+    cb[l.type](l);
+    if (l.r&1) { // rotation
+      var t = l._w;l._w=l._h;l._h=t;
+    }
+    l._w = 0|Math.max(l._w + (l.pad<<1), 0|l.width);
+    l._h = 0|Math.max(l._h + (l.pad<<1), 0|l.height);
+  }
+  var cb = {
+    "txt" : function(l) {
+      if (l.font.endsWith("%"))
+        l.font = "Vector"+Math.round(g.getHeight()*l.font.slice(0,-1)/100);
+      if (l.wrap) {
+        l._h = l._w = 0;
+      } else {
+        var m = g.setFont(l.font,l.fsz).stringMetrics(l.label);
+        l._w = m.width; l._h = m.height;
+      }
+    }, "btn": function(l) {
+      var m = l.src?g.imageMetrics("function"==typeof l.src?l.src():l.src):g.setFont("6x8",2).stringMetrics(l.label);
+      l._h = 16 + m.height;
+      l._w = 20 + m.width;
+    }, "img": function(l) {
+      var m = g.imageMetrics("function"==typeof l.src?l.src():l.src), s=l.scale||1; // get width and height out of image
+      l._w = m.width*s;
+      l._h = m.height*s;
+    }, "": function(l) {
+      // size should already be set up in width/height
+      l._w = 0;
+      l._h = 0;
+    }, "custom": function(l) {
+      // size should already be set up in width/height
+      l._w = 0;
+      l._h = 0;
+    }, "h": function(l) {
+      l.c.forEach(updateMin);
+      l._h = l.c.reduce((a,b)=>Math.max(a,b._h),0);
+      l._w = l.c.reduce((a,b)=>a+b._w,0);
+      if (l.fillx == null && l.c.some(c=>c.fillx)) l.fillx = 1;
+      if (l.filly == null && l.c.some(c=>c.filly)) l.filly = 1;
+    }, "v": function(l) {
+      l.c.forEach(updateMin);
+      l._h = l.c.reduce((a,b)=>a+b._h,0);
+      l._w = l.c.reduce((a,b)=>Math.max(a,b._w),0);
+      if (l.fillx == null && l.c.some(c=>c.fillx)) l.fillx = 1;
+      if (l.filly == null && l.c.some(c=>c.filly)) l.filly = 1;
+    }
+  };
+
+  var l = this._l;
   updateMin(l);
-  // center
-  if (l.fillx || l.filly) {
-    l.w = w;
-    l.h = h;
-    l.x = 0;
-    l.y = y;
-  } else {
+  if (l.fillx || l.filly) { // fill all
+    l.w = Bangle.appRect.w;
+    l.h = Bangle.appRect.h;
+    l.x = Bangle.appRect.x;
+    l.y = Bangle.appRect.y;
+  } else { // or center
     l.w = l._w;
     l.h = l._h;
-    l.x = (w-l.w)/2;
-    l.y = y+(h-l.h)/2;
+    l.x = (Bangle.appRect.w-l.w)>>1;
+    l.y = Bangle.appRect.y+((Bangle.appRect.h-l.h)>>1);
   }
   // layout children
   this.layout(l);
diff --git a/modules/Layout.min.js b/modules/Layout.min.js
deleted file mode 100644
index a45b17107..000000000
--- a/modules/Layout.min.js
+++ /dev/null
@@ -1,325 +0,0 @@
-
-/*
-
-Usage:
-
-```
-var Layout = require("Layout");
-var layout = new Layout( layoutObject, btns )
-layout.render(optionalObject);
-```
-
-For example:
-
-```
-var Layout = require("Layout");
-var layout = new Layout( {
-  type:"v", c: [
-    {type:"txt", font:"20%", label:"12:00" },
-    {type:"txt", font:"6x8", label:"The Date" }
-  ]
-});
-g.clear();
-layout.render();
-```
-
-
-layoutObject has:
-
-* A `type` field of:
-  * `undefined` - blank, can be used for padding
-  * `"txt"` - a text label, with value `label` and `r` for text rotation. 'font' is required
-  * `"btn"` - a button, with value `label` and callback `cb`
-  * `"img"` - an image where the function `src` is called to return an image to draw
-  * `"custom"` - a custom block where `render(layoutObj)` is called to render
-  * `"h"` - Horizontal layout, `c` is an array of more `layoutObject`
-  * `"v"` - Veritical layout, `c` is an array of more `layoutObject`
-* A `id` field. If specified the object is added with this name to the
-  returned `layout` object, so can be referenced as `layout.foo`
-* A `font` field, eg `6x8` or `30%` to use a percentage of screen height
-* A `col` field, eg `#f00` for red
-* A `bgCol` field for background color (will automatically fill on render)
-* A `halign` field to set horizontal alignment. `-1`=left, `1`=right, `0`=center
-* A `valign` field to set vertical alignment. `-1`=top, `1`=bottom, `0`=center
-* A `pad` integer field to set pixels padding
-* A `fillx` boolean to choose if the object should fill available space in x
-* A `filly` boolean to choose if the object should fill available space in y
-* `width` and `height` fields to optionally specify minimum size
-
-btns is an array of objects containing:
-
-* `label` - the text on the button
-* `cb` - a callback function
-* `cbl` - a callback function for long presses
-
-Once `layout.update()` is called, the following fields are added
-to each object:
-
-* `x` and `y` for the top left position
-* `w` and `h` for the width and height
-* `_w` and `_h` for the **minimum** width and height
-
-
-Other functions:
-
-* `layout.update()` - update positions of everything if contents have changed
-* `layout.debug(obj)` - draw outlines for objects on screen
-* `layout.clear(obj)` - clear the given object (you can also just specify `bgCol` to clear before each render)
-
-*/
-
-
-function Layout(layout, buttons) {
-  this._l = this.l = layout;
-  this.b = buttons;
-  // Do we have >1 physical buttons?
-  this.physBtns = (process.env.HWVERSION==2) ? 1 : 3;
-  this.yOffset = Object.keys(global.WIDGETS).length ? 24 : 0;
-
-  if (buttons) {    
-    if (this.physBtns >= buttons.length) {
-      // enough physical buttons
-      var btnHeight = Math.floor((g.getHeight()-this.yOffset) / this.physBtns);
-      if (Bangle.btnWatch) Bangle.btnWatch.forEach(clearWatch);
-      Bangle.btnWatch = [];
-      if (this.physBtns > 2 && buttons.length==1)
-        buttons.unshift({label:""}); // pad so if we have a button in the middle
-      while (this.physBtns > buttons.length)
-        buttons.push({label:""});
-      if (buttons[0]) Bangle.btnWatch.push(setWatch(pressHandler.bind(this,0), BTN1, {repeat:true,edge:-1}));
-      if (buttons[1]) Bangle.btnWatch.push(setWatch(pressHandler.bind(this,1), BTN2, {repeat:true,edge:-1}));
-      if (buttons[2]) Bangle.btnWatch.push(setWatch(pressHandler.bind(this,2), BTN3, {repeat:true,edge:-1}));
-      this._l.width = g.getWidth()-8; // text width
-      this._l = {type:"h", filly:1, c: [
-        this._l,
-        {type:"v", pad:1, filly:1, c: buttons.map(b=>(b.type="txt",b.font="6x8",b.height=btnHeight,b.r=1,b))}
-      ]};
-    } else {
-      var btnHeight = Math.floor((g.getHeight()-this.yOffset) / buttons.length);
-      this._l.width = g.getWidth()-20; // button width
-      this._l = {type:"h", c: [
-        this._l,
-        {type:"v", c: buttons.map(b=>(b.type="btn",b.h=btnHeight,b.w=32,b.r=1,b))}
-      ]};
-    }
-  }
-  if (process.env.HWVERSION==2) {
-    Bangle.touchHandler = (_,e) => touchHandler(layout,e);
-    Bangle.on('touch',Bangle.touchHandler);    
-  }
-  
-  // add IDs
-  var ll = this;
-  function idRecurser(l) {
-    if (l.id) ll[l.id] = l;
-    if (l.c) l.c.forEach(idRecurser);
-  }
-  idRecurser(layout);
-  this.update();
-}
-
-Layout.prototype.remove = function (l) {
-  if (Bangle.btnWatch) {
-    Bangle.btnWatch.forEach(clearWatch);
-    delete Bangle.btnWatch;
-  }
-  if (Bangle.touchHandler) {
-    Bangle.removeListener("touch",Bangle.touchHandler);
-    delete Bangle.touchHandler;
-  }
-};
-
-// Handler for button watch events
-function pressHandler(btn,e) {
-  if (e.time-e.lastTime > 0.75 && this.b[btn].cbl)
-    this.b[btn].cbl(e);
-  else
-    if (this.b[btn].cb) this.b[btn].cb(e);
-}
-
-// Handler for touch events
-function touchHandler(l,e) {
-  if (l.type=="btn" && l.cb && e.x>=l.x && e.y>=l.y && e.x<=l.x+l.w && e.y<=l.y+l.h)
-    l.cb(e);
-  if (l.c) l.c.forEach(n => touchHandler(n,e));
-}
-
-
-function updateMin(l) {
-  switch (l.type) {
-    case "txt": {
-      if (l.font.endsWith("%"))
-        l.font = "Vector"+Math.round(g.getHeight()*l.font.slice(0,-1)/100);
-      // FIXME ':'/fsz not needed in new firmwares - it's handled internally
-      if (l.font.includes(":")) {
-        var f = l.font.split(":");
-        l.font = f[0];
-        l.fsz = f[1];
-      }
-      g.setFont(l.font,l.fsz);
-      l._h = g.getFontHeight();
-      l._w = g.stringWidth(l.label);
-      break;
-    }
-    case "btn": {
-      l._h = 24;
-      l._w = 14 + l.label.length*8;
-      break;
-    }
-    case "img": {
-      var im = E.toString(l.src());
-      l._h = im.charCodeAt(0);
-      l._w = im.charCodeAt(1);
-      break;
-    }
-    case undefined:
-    case "custom": {
-      // size should already be set up in width/height
-      l._w = 0;
-      l._h = 0;
-      break;
-    }
-    case "h": {
-      l.c.forEach(updateMin);
-      l._h = l.c.reduce((a,b)=>Math.max(a,b._h+(b.pad<<1)),0);
-      l._w = l.c.reduce((a,b)=>a+b._w+(b.pad<<1),0);
-      l.fillx |= l.c.some(c=>c.fillx);
-      break;
-    }
-    case "v": {
-      l.c.forEach(updateMin);
-      l._h = l.c.reduce((a,b)=>a+b._h+(b.pad<<1),0);
-      l._w = l.c.reduce((a,b)=>Math.max(a,b._w+(b.pad<<1)),0);
-      l.filly |= l.c.some(c=>c.filly);
-      break;
-    }
-    default: throw "Unknown item type "+l.type;
-  }
-  if (l.r&1) { // rotation
-    var t = l._w;l._w=l._h;l._h=t;
-  }
-  l._w = Math.max(l._w, 0|l.width);
-  l._h = Math.max(l._h, 0|l.height);
-}
-function render(l) {
-  if (!l) l = this.l;
-  g.reset();
-  if (l.col) g.setColor(l.col);
-  if (l.bgCol!==undefined) g.setBgColor(l.bgCol).clearRect(l.x,l.y,l.x+l.w,l.y+l.h);
-  switch (l.type) {
-    case "txt":
-      g.setFont(l.font,l.fsz).setFontAlign(0,0,l.r).drawString(l.label, l.x+(l.w>>1), l.y+(l.h>>1), true/*solid bg*/);
-      break;
-    case "btn":
-      var poly = [
-        l.x,l.y+4,
-        l.x+4,l.y,
-        l.x+l.w-5,l.y,
-        l.x+l.w-1,l.y+4,
-        l.x+l.w-1,l.y+l.h-5,
-        l.x+l.w-5,l.y+l.h-1,
-        l.x+4,l.y+l.h-1,
-        l.x,l.y+l.h-5,
-        l.x,l.y+4
-      ];
-    g.setColor(g.theme.bgH).fillPoly(poly).setColor(l.selected ? g.theme.fgH : g.theme.fg).drawPoly(poly).setFont("4x6",2).setFontAlign(0,0,l.r).drawString(l.label,l.x+l.w/2,l.y+l.h/2);
-      break;
-  case "img":
-    g.drawImage(l.src(), l.x, l.y);
-    break;
-  case "custom":
-    l.render(l);
-    break;
-  }
-  if (l.c) l.c.forEach(render);
-}
-
-Layout.prototype.render = function (l) {
-  if (!l) l = this._l;
-  render(l);
-};
-
-Layout.prototype.layout = function (l) {
-  // l = current layout element
-  // exw,exh = extra width/height available
-  var fillx = l.c && l.c.reduce((a,l)=>a+(0|l.fillx),0);
-  var filly = l.c && l.c.reduce((a,l)=>a+(0|l.filly),0);
-  switch (l.type) {
-    case "h": {
-      let x = l.x + (l.w-l._w)/2;
-      if (fillx) { x = l.x; }
-      l.c.forEach(c => {
-        c.w = c._w + (c.fillx?(l.w-l._w)/fillx:0);
-        c.h = c.filly ? l.h : c._h;
-        c.x = x;
-        c.y = l.y + (1+(0|c.valign))*(l.h-c.h)/2;
-        x += c.w;
-        if (c.pad) {
-          x += c.pad*2;
-          c.w += c.pad*2;
-          c.h += c.pad*2;
-        }
-        if (c.c) {
-          this.layout(c);
-        }
-      });
-      break;
-    }
-    case "v": {
-      let y = l.y + (l.h-l._h)/2;
-      if (filly) { y = l.y; }
-      l.c.forEach(c => {
-        c.w = c.fillx ? l.w : c._w;
-        c.h = c._h + (c.filly?(l.h-l._h)/filly:0);
-        c.x = l.x + (1+(0|c.halign))*(l.w-c.w)/2;
-        c.y = y;
-        y += c.h;
-        if (c.pad) {
-          y += c.pad*2;
-          c.w += c.pad*2;
-          c.h += c.pad*2;
-        }
-        if (c.c) this.layout(c);
-      });
-      break;
-    }
-  }
-};
-Layout.prototype.debug = function(l,c) {
-  if (!l) l = this._l;
-  c=c||1;
-  g.setColor(c&1,c&2,c&4).drawRect(l.x+c-1, l.y+c-1, l.x+l.w-c, l.y+l.h-c);
-  c++;
-  if (l.c) l.c.forEach(n => this.debug(n,c));
-};
-Layout.prototype.update = function() {
-  var l = this._l;
-  var w = g.getWidth();
-  var y = this.yOffset;
-  var h = g.getHeight()-y;
-  // update sizes
-  updateMin(l);
-  // center
-  if (l.fillx || l.filly) {
-    l.w = w;
-    l.h = h;
-    l.x = 0;
-    l.y = y;
-  } else {
-    l.w = l._w;
-    l.h = l._h;
-    l.x = (w-l.w)/2;
-    l.y = y+(h-l.h)/2;
-  }
-  // layout children
-  this.layout(l);
-};
-
-Layout.prototype.clear = function(l) {
-  if (!l) l = this._l;
-  g.reset();
-  if (l.bgCol!==undefined) g.setBgColor(l.bgCol);
-  g.clearRect(l.x,l.y,l.x+l.w-1,l.y+l.h-1);
-};
-
-exports = Layout;
diff --git a/modules/Settings.js b/modules/Settings.js
new file mode 100644
index 000000000..0828b4655
--- /dev/null
+++ b/modules/Settings.js
@@ -0,0 +1,101 @@
+/*
+- Read/write app settings, stored in .json
+- Read/write global settings (stored in setting.json)
+
+Usage:
+```
+// read a single app setting
+value = require('Settings').get(appid, key, default);
+// omit key to read all app settings
+value = require('Settings').get(appid);
+// write a single app setting
+require('Settings').set(appid, key, value)
+// omit key and pass an object as values to overwrite all settings
+require('Settings').set(appid, values)
+
+// read Bangle settings by passing the Bangle object instead of an app name
+value = require('Settings').get(Bangle, key, default);
+// read all global settings
+values = require('Settings').get(Bangle);
+// write a global setting
+require('Settings').set(Bangle, key, value)
+```
+
+For example:
+```
+require('Settings').set('test', 'foo', 123);        // writes to 'test.json'
+require('Settings').set('test', 'bar', 456);        // updates 'test.json'
+// 'test.json' now contains  {baz:123,bam:456}
+baz = require('Settings').get('test', 'foo');       // baz = 123
+def = require('Settings').get('test', 'jkl', 789);  // def = 789
+all = require('Settings').get('test');              // all = {foo: 123, bar: 456}
+baz = require('Settings').get('test', 'baz');       // baz = undefined
+
+// read global setting
+vibrate = require('Settings').get(Bangle, 'vibrate', true);
+
+// Hint: if your app reads multiple settings, you can create a helper function:
+function s(key, def) { return require('Settings').get('myapp', key, def); }
+var foo = s('foo setting', 'default value'), bar = s('bar setting');
+```
+
+*/
+
+/**
+ * Read setting value from file
+ *
+ * @param {string} file Settings file
+ * @param {string} key  Setting to get, omit to get all settings as object
+ * @param {*}      def  Default value
+ * @return {*} Setting value (or default if not found)
+ */
+function get(file, key, def) {
+  var s = require("Storage").readJSON(file);
+  if (def===undefined && ["object", "undefined"].includes(typeof key)) {
+    // get(file) or get(file, def): get all settings
+    return (s!==undefined) ? s : key;
+  }
+  return ((typeof s==="object") && (key in s)) ? s[key] : def;
+}
+
+/**
+ * Write setting value to file
+ *
+ * @param {string} file  Settings file
+ * @param {string} key   Setting to change, omit to replace all settings
+ * @param {*}      value Value to store
+ */
+function set(file, key, value) {
+  if (value===undefined && typeof key==="object") {
+    // set(file, value): overwrite settings completely
+    require("Storage").writeJSON(file, key);
+    return;
+  }
+  var s = require("Storage").readJSON(file, 1);
+  if (typeof s!=="object") s = {};
+  s[key] = value;
+  require("Storage").write(file, s);
+}
+
+/**
+ * Read setting value
+ *
+ * @param {string|object} app App name or Bangle
+ * @param {string}        key Setting to get, omit to get all settings as object
+ * @param {*}             def Default value
+ * @return {*} Setting value (or default if not found)
+ */
+exports.get = function(app, key, def) {
+  return get((app===Bangle) ? 'setting.json' : app+".json", key, def);
+};
+
+/**
+ * Write setting value
+ *
+ * @param {string|object} app App name or Bangle
+ * @param {string}        key Setting to change, omit to replace all settings
+ * @param {*}             val Value to store
+ */
+exports.set = function(app, key, val) {
+  set((app===Bangle) ? 'setting.json' : app+".json", key, val);
+};
diff --git a/tests/Layout/bin/espruino b/tests/Layout/bin/espruino
new file mode 100755
index 000000000..8f9c1d878
Binary files /dev/null and b/tests/Layout/bin/espruino differ
diff --git a/tests/Layout/bin/runalltests.sh b/tests/Layout/bin/runalltests.sh
new file mode 100755
index 000000000..3a7aac50b
--- /dev/null
+++ b/tests/Layout/bin/runalltests.sh
@@ -0,0 +1,4 @@
+#!/bin/bash
+
+cd `dirname $0`/..
+ls tests/*.js | xargs -I{} bin/runtest.sh {}
diff --git a/tests/Layout/bin/runtest.sh b/tests/Layout/bin/runtest.sh
new file mode 100755
index 000000000..c85b3fe6c
--- /dev/null
+++ b/tests/Layout/bin/runtest.sh
@@ -0,0 +1,41 @@
+#!/bin/bash
+# Requires Linux x64 (for ./espruino)
+# Also imagemagick for display
+
+cd `dirname $0`/..
+if [ "$#" -ne 1 ]; then
+    echo "USAGE:"
+    echo "  bin/runtest.sh tests/testxyz.js"
+    exit 1
+fi
+
+# temporary test files
+TESTJS=bin/tmp.js
+TESTBMP=bin/tmp.bmp
+# actual source files
+SRCDIR=tests
+SRCJS=$1
+SRCBMP=$SRCDIR/`basename $SRCJS .js`.bmp
+echo "TEST $SRCJS ($SRCBMP)"
+
+cat  ../../modules/Layout.js > $TESTJS
+echo 'Bangle = { setUI : function(){} };BTN1=0;process.env = process.env;process.env.HWVERSION=2;' >> $TESTJS
+echo 'g = Graphics.createArrayBuffer(176,176,4);' >> $TESTJS
+cat $SRCJS >> $TESTJS  || exit 1
+echo 'layout.render()' >> $TESTJS
+#echo 'layout.debug()' >> $TESTJS
+echo 'require("fs").writeFileSync("'$TESTBMP'",g.asBMP())' >> $TESTJS
+
+bin/espruino $TESTJS || exit 1
+if ! cmp $TESTBMP $SRCBMP >/dev/null 2>&1
+then
+  echo =============================================
+  echo $TESTBMP $SRCBMP differ
+  echo ==============================================
+  convert "+append" $TESTBMP $SRCBMP testresult.bmp
+  display testresult.bmp
+  exit 1
+else
+  echo Files are the same
+  exit 0
+fi
diff --git a/tests/Layout/tests/accellog.bmp b/tests/Layout/tests/accellog.bmp
new file mode 100644
index 000000000..c0bbaf4fc
Binary files /dev/null and b/tests/Layout/tests/accellog.bmp differ
diff --git a/tests/Layout/tests/accellog.js b/tests/Layout/tests/accellog.js
new file mode 100644
index 000000000..63b2ab410
--- /dev/null
+++ b/tests/Layout/tests/accellog.js
@@ -0,0 +1,13 @@
+// Based on accellog usage
+var layout = new Layout({ type: "v", c: [
+    {type:"txt", font:"6x8", label:"Samples", pad:2},
+    {type:"txt", id:"samples", font:"6x8:2", label:"  -  ", pad:5},
+    {type:"txt", font:"6x8", label:"Time", pad:2},
+    {type:"txt", id:"time", font:"6x8:2", label:"  -  ", pad:5},
+    {type:"txt", font:"6x8:2", label:"RECORDING", bgCol:"#f00", pad:5, fillx:1},
+  ]
+}{btns:[ // Buttons...
+  {label:"STOP", cb:()=>{}}
+]});
+layout.samples.label = "123";
+layout.time.label = "123s";
diff --git a/tests/Layout/tests/buttons_1_bangle1.bmp b/tests/Layout/tests/buttons_1_bangle1.bmp
new file mode 100644
index 000000000..8da6d1e8a
Binary files /dev/null and b/tests/Layout/tests/buttons_1_bangle1.bmp differ
diff --git a/tests/Layout/tests/buttons_1_bangle1.js b/tests/Layout/tests/buttons_1_bangle1.js
new file mode 100644
index 000000000..fb6fb29fa
--- /dev/null
+++ b/tests/Layout/tests/buttons_1_bangle1.js
@@ -0,0 +1,9 @@
+var BTN2 = 1, BTN3=2;
+process.env = process.env;process.env.HWVERSION=1;
+g = Graphics.createArrayBuffer(240,240,4);
+
+var layout = new Layout({ type: "v", c: [
+  {type:"txt", font:"6x8", label:"A test"},
+]},{btns:[ // Buttons...
+  {label:"STOP", cb:()=>{}},
+]});
diff --git a/tests/Layout/tests/buttons_1_bangle2.bmp b/tests/Layout/tests/buttons_1_bangle2.bmp
new file mode 100644
index 000000000..2e4d1a256
Binary files /dev/null and b/tests/Layout/tests/buttons_1_bangle2.bmp differ
diff --git a/tests/Layout/tests/buttons_1_bangle2.js b/tests/Layout/tests/buttons_1_bangle2.js
new file mode 100644
index 000000000..74b6c96af
--- /dev/null
+++ b/tests/Layout/tests/buttons_1_bangle2.js
@@ -0,0 +1,6 @@
+
+var layout = new Layout({ type: "v", c: [
+  {type:"txt", font:"6x8", label:"A test"},
+]},{btns:[ // Buttons...
+  {label:"STOP", cb:()=>{}},
+]});
diff --git a/tests/Layout/tests/buttons_3_bangle1.bmp b/tests/Layout/tests/buttons_3_bangle1.bmp
new file mode 100644
index 000000000..4edc88d08
Binary files /dev/null and b/tests/Layout/tests/buttons_3_bangle1.bmp differ
diff --git a/tests/Layout/tests/buttons_3_bangle1.js b/tests/Layout/tests/buttons_3_bangle1.js
new file mode 100644
index 000000000..c8346f449
--- /dev/null
+++ b/tests/Layout/tests/buttons_3_bangle1.js
@@ -0,0 +1,11 @@
+var BTN2 = 1, BTN3=2;
+process.env = process.env;process.env.HWVERSION=1;
+g = Graphics.createArrayBuffer(240,240,4);
+
+var layout = new Layout({ type: "v", c: [
+  {type:"txt", font:"6x8", label:"A test"},
+]},{btns:[ // Buttons...
+  {label:"A", cb:()=>{}},
+  {label:"STOP", cb:()=>{}},
+  {label:"B", cb:()=>{}},
+]});
diff --git a/tests/Layout/tests/buttons_3_bangle2.bmp b/tests/Layout/tests/buttons_3_bangle2.bmp
new file mode 100644
index 000000000..4b9fa5b42
Binary files /dev/null and b/tests/Layout/tests/buttons_3_bangle2.bmp differ
diff --git a/tests/Layout/tests/buttons_3_bangle2.js b/tests/Layout/tests/buttons_3_bangle2.js
new file mode 100644
index 000000000..bf70fcb38
--- /dev/null
+++ b/tests/Layout/tests/buttons_3_bangle2.js
@@ -0,0 +1,8 @@
+
+var layout = new Layout({ type: "v", c: [
+  {type:"txt", font:"6x8", label:"A test"},
+]},{btns:[ // Buttons...
+  {label:"A", cb:()=>{}},
+  {label:"STOP", cb:()=>{}},
+  {label:"B", cb:()=>{}},
+]});
diff --git a/tests/Layout/tests/buttons_osd_bangle1.bmp b/tests/Layout/tests/buttons_osd_bangle1.bmp
new file mode 100644
index 000000000..723075385
Binary files /dev/null and b/tests/Layout/tests/buttons_osd_bangle1.bmp differ
diff --git a/tests/Layout/tests/buttons_osd_bangle1.js b/tests/Layout/tests/buttons_osd_bangle1.js
new file mode 100644
index 000000000..108cb62b0
--- /dev/null
+++ b/tests/Layout/tests/buttons_osd_bangle1.js
@@ -0,0 +1,17 @@
+var BTN2 = 1, BTN3=2;
+process.env = process.env;process.env.HWVERSION=1;
+g = Graphics.createArrayBuffer(240,240,4);
+
+/* When displaying OSD buttons on Bangle.js 1 we should turn
+the side buttons into 'soft' buttons and then use the physical
+buttons for up/down selection */
+
+var layout = new Layout({ type: "v", c: [
+  {type:"txt", font:"6x8", label:"A test"},
+  {type:"btn", label:"Button 1"},
+  {type:"btn", label:"Button 2"}
+]},{btns:[ // Buttons...
+  {label:"A", cb:()=>{}},
+  {label:"STOP", cb:()=>{}},
+  {label:"B", cb:()=>{}},
+]});
diff --git a/tests/Layout/tests/buttons_osd_bangle2.bmp b/tests/Layout/tests/buttons_osd_bangle2.bmp
new file mode 100644
index 000000000..397c9e871
Binary files /dev/null and b/tests/Layout/tests/buttons_osd_bangle2.bmp differ
diff --git a/tests/Layout/tests/buttons_osd_bangle2.js b/tests/Layout/tests/buttons_osd_bangle2.js
new file mode 100644
index 000000000..8733eb691
--- /dev/null
+++ b/tests/Layout/tests/buttons_osd_bangle2.js
@@ -0,0 +1,10 @@
+
+var layout = new Layout({ type: "v", c: [
+  {type:"txt", font:"6x8", label:"A test"},
+  {type:"btn", label:"Button 1"},
+  {type:"btn", label:"Button 2"}
+]},{btns:[ // Buttons...
+  {label:"A", cb:()=>{}},
+  {label:"STOP", cb:()=>{}},
+  {label:"B", cb:()=>{}},
+]});
diff --git a/tests/Layout/tests/filly_issue820.bmp b/tests/Layout/tests/filly_issue820.bmp
new file mode 100644
index 000000000..adfe9164e
Binary files /dev/null and b/tests/Layout/tests/filly_issue820.bmp differ
diff --git a/tests/Layout/tests/filly_issue820.js b/tests/Layout/tests/filly_issue820.js
new file mode 100644
index 000000000..4b813fadf
--- /dev/null
+++ b/tests/Layout/tests/filly_issue820.js
@@ -0,0 +1,9 @@
+g.clear();
+var layout = new Layout({type:"h", filly: 0, c: [
+  {type: "txt", font: "50%", label: "A"},
+  {type:"v", c: [
+    {type: "txt", font: "10%", label: "B"},
+    {filly: 1},
+    {type: "txt", font: "10%", label: "C"},
+  ]},
+]});
diff --git a/tests/Layout/tests/padding.bmp b/tests/Layout/tests/padding.bmp
new file mode 100644
index 000000000..84ae4dc1b
Binary files /dev/null and b/tests/Layout/tests/padding.bmp differ
diff --git a/tests/Layout/tests/padding.js b/tests/Layout/tests/padding.js
new file mode 100644
index 000000000..355dfd90f
--- /dev/null
+++ b/tests/Layout/tests/padding.js
@@ -0,0 +1,26 @@
+var img = () => ({
+  width : 8, height : 8, bpp : 4,
+  transparent : 1,
+  buffer : E.toArrayBuffer(atob("Ee7uER7u7uHuDuDu7u7u7u7u7u7g7u4OHgAA4RHu7hE="))
+});
+
+var layout = new Layout({type: "v", c: [
+  {type: "txt", font: "6x8", bgCol: "#F00", pad: 5, label: "TEXT"},
+  {type: "img", font: "6x8", bgCol: "#0F0", pad: 5, src: img},
+  {type: "btn", font: "6x8", bgCol: "#00F", pad: 5, label: "BTN"},
+  {type: "v", bgCol: "#F0F", pad: 2, c: [
+    {type: "txt", font: "6x8", bgCol: "#F00", label: "v with children"},
+    {type: "txt", font: "6x8", bgCol: "#0F0", halign: -1, label: "halign -1"},
+    {type: "txt", font: "6x8", bgCol: "#00F", halign: 1, label: "halign 1"},
+  ]},
+  {type: "h", bgCol: "#0FF", pad: 2, c: [
+    {type: "txt", font: "6x8:2", bgCol: "#F00", label: "h"},
+    {type: "txt", font: "6x8", bgCol: "#0F0", valign: -1, label: "valign -1"},
+    {type: "txt", font: "6x8", bgCol: "#00F", valign: 1, label: "valign 1"},
+  ]},
+  {type: "h", bgCol: "#FF0", pad: 2, c: [
+    {type: "v", bgCol: "#0F0", pad: 2, c: [
+      {type: "txt", font: "6x8", bgCol: "#F00", pad: 2, label: "nested"},
+    ]},
+  ]},
+]});
diff --git a/tests/Layout/tests/padding_issue819.bmp b/tests/Layout/tests/padding_issue819.bmp
new file mode 100644
index 000000000..22d59c5ec
Binary files /dev/null and b/tests/Layout/tests/padding_issue819.bmp differ
diff --git a/tests/Layout/tests/padding_issue819.js b/tests/Layout/tests/padding_issue819.js
new file mode 100644
index 000000000..54641d3f9
--- /dev/null
+++ b/tests/Layout/tests/padding_issue819.js
@@ -0,0 +1,3 @@
+var layout = new Layout({type:"v", fillx: true, c: [
+  {type: "txt", font: "10%", halign:1, pad: 20, label: "0123456789"},
+]});
diff --git a/tests/Layout/tests/padding_issue819_2.bmp b/tests/Layout/tests/padding_issue819_2.bmp
new file mode 100644
index 000000000..549736065
Binary files /dev/null and b/tests/Layout/tests/padding_issue819_2.bmp differ
diff --git a/tests/Layout/tests/padding_issue819_2.js b/tests/Layout/tests/padding_issue819_2.js
new file mode 100644
index 000000000..874d28867
--- /dev/null
+++ b/tests/Layout/tests/padding_issue819_2.js
@@ -0,0 +1,7 @@
+var layout = new Layout({type: "v", c: [
+  {type: "h", pad: 20, c: [
+    {type: "txt", font: "10%", label: "abcd"},
+    {fillx: 1},
+    {type: "txt", font: "10%", label: "1234"},
+  ]},
+]});
diff --git a/tests/Layout/tests/padding_with_fill.bmp b/tests/Layout/tests/padding_with_fill.bmp
new file mode 100644
index 000000000..9f82ed09f
Binary files /dev/null and b/tests/Layout/tests/padding_with_fill.bmp differ
diff --git a/tests/Layout/tests/padding_with_fill.js b/tests/Layout/tests/padding_with_fill.js
new file mode 100644
index 000000000..dede39722
--- /dev/null
+++ b/tests/Layout/tests/padding_with_fill.js
@@ -0,0 +1,26 @@
+var img = () => ({
+  width : 8, height : 8, bpp : 4,
+  transparent : 1,
+  buffer : E.toArrayBuffer(atob("Ee7uER7u7uHuDuDu7u7u7u7u7u7g7u4OHgAA4RHu7hE="))
+});
+
+var layout = new Layout({type: "v", c: [
+  {type: "txt", font: "6x8", bgCol: "#F00", fillx: 1, pad: 5, label: "TEXT"},
+  {type: "img", font: "6x8", bgCol: "#0F0", filly: 1, fillx: 1,pad: 5, src: img},
+  {type: "btn", font: "6x8", bgCol: "#00F", fillx: 1, pad: 5, label: "BTN"},
+  {type: "v", bgCol: "#F0F", pad: 2, c: [
+    {type: "txt", font: "6x8", bgCol: "#F00", fillx: 1, filly: 1, label: "v with children"},
+    {type: "txt", font: "6x8", bgCol: "#0F0", halign: -1, label: "halign -1"},
+    {type: "txt", font: "6x8", bgCol: "#00F", halign: 1, label: "halign 1"},
+  ]},
+  {type: "h", bgCol: "#0FF", pad: 2, c: [
+    {type: "txt", font: "6x8:2", bgCol: "#F00", fillx: 1, filly: 1, label: "h"},
+    {type: "txt", font: "6x8", bgCol: "#0F0", valign: -1, label: "valign -1"},
+    {type: "txt", font: "6x8", bgCol: "#00F", valign: 1, label: "valign 1"},
+  ]},
+  {type: "h", bgCol: "#FF0", pad: 2, c: [
+    {type: "v", bgCol: "#0F0", pad: 2, c: [
+      {type: "txt", font: "6x8", bgCol: "#F00", fillx: 1, filly: 1, pad: 2, label: "nested"},
+    ]},
+  ]},
+]});
diff --git a/tests/Layout/tests/wrapping.bmp b/tests/Layout/tests/wrapping.bmp
new file mode 100644
index 000000000..a0d80cc5b
Binary files /dev/null and b/tests/Layout/tests/wrapping.bmp differ
diff --git a/tests/Layout/tests/wrapping.js b/tests/Layout/tests/wrapping.js
new file mode 100644
index 000000000..652530f9c
--- /dev/null
+++ b/tests/Layout/tests/wrapping.js
@@ -0,0 +1,7 @@
+var layout = new Layout({type:"v", c: [
+  {type:"h", c: [
+    {type:"txt", font:"10%", wrap: true, fillx: true, filly: true, label:"This is wrapping text that fills remaining space"},
+    {type:"txt", font:"6x8", wrap: true, width: 60, filly: true, label:"This is wrapping text in a narrow column"},
+  ]},
+  {type:"txt", font:"6x8", wrap: true, fillx: true, height: 20, label:"This doesn't need to wrap"},
+]});
\ No newline at end of file



/ elements with colspans.
+        SOLUTION: making individual 
 

+            _this.frameElRefs = new RefMap(); // the fc-daygrid-day-frame
+            _this.fgElRefs = new RefMap(); // the fc-daygrid-day-events
+            _this.segHarnessRefs = new RefMap(); // indexed by "instanceId:firstCol"
+            _this.rootElRef = createRef();
+            _this.state = {
+                framePositions: null,
+                maxContentHeight: null,
+                eventInstanceHeights: {},
+            };
+            return _this;
+        }
+        TableRow.prototype.render = function () {
+            var _this = this;
+            var _a = this, props = _a.props, state = _a.state, context = _a.context;
+            var options = context.options;
+            var colCnt = props.cells.length;
+            var businessHoursByCol = splitSegsByFirstCol(props.businessHourSegs, colCnt);
+            var bgEventSegsByCol = splitSegsByFirstCol(props.bgEventSegs, colCnt);
+            var highlightSegsByCol = splitSegsByFirstCol(this.getHighlightSegs(), colCnt);
+            var mirrorSegsByCol = splitSegsByFirstCol(this.getMirrorSegs(), colCnt);
+            var _b = computeFgSegPlacement(sortEventSegs(props.fgEventSegs, options.eventOrder), props.dayMaxEvents, props.dayMaxEventRows, options.eventOrderStrict, state.eventInstanceHeights, state.maxContentHeight, props.cells), singleColPlacements = _b.singleColPlacements, multiColPlacements = _b.multiColPlacements, moreCnts = _b.moreCnts, moreMarginTops = _b.moreMarginTops;
+            var isForcedInvisible = // TODO: messy way to compute this
+             (props.eventDrag && props.eventDrag.affectedInstances) ||
+                (props.eventResize && props.eventResize.affectedInstances) ||
+                {};
+            return (createElement("tr", { ref: this.rootElRef },
+                props.renderIntro && props.renderIntro(),
+                props.cells.map(function (cell, col) {
+                    var normalFgNodes = _this.renderFgSegs(col, props.forPrint ? singleColPlacements[col] : multiColPlacements[col], props.todayRange, isForcedInvisible);
+                    var mirrorFgNodes = _this.renderFgSegs(col, buildMirrorPlacements(mirrorSegsByCol[col], multiColPlacements), props.todayRange, {}, Boolean(props.eventDrag), Boolean(props.eventResize), false);
+                    return (createElement(TableCell, { key: cell.key, elRef: _this.cellElRefs.createRef(cell.key), innerElRef: _this.frameElRefs.createRef(cell.key) /* FF  problem, but okay to use for left/right. TODO: rename prop */, dateProfile: props.dateProfile, date: cell.date, showDayNumber: props.showDayNumbers, showWeekNumber: props.showWeekNumbers && col === 0, forceDayTop: props.showWeekNumbers /* even displaying weeknum for row, not necessarily day */, todayRange: props.todayRange, eventSelection: props.eventSelection, eventDrag: props.eventDrag, eventResize: props.eventResize, extraHookProps: cell.extraHookProps, extraDataAttrs: cell.extraDataAttrs, extraClassNames: cell.extraClassNames, extraDateSpan: cell.extraDateSpan, moreCnt: moreCnts[col], moreMarginTop: moreMarginTops[col], singlePlacements: singleColPlacements[col], fgContentElRef: _this.fgElRefs.createRef(cell.key), fgContent: ( // Fragment scopes the keys
+                        createElement(Fragment, null,
+                            createElement(Fragment, null, normalFgNodes),
+                            createElement(Fragment, null, mirrorFgNodes))), bgContent: ( // Fragment scopes the keys
+                        createElement(Fragment, null,
+                            _this.renderFillSegs(highlightSegsByCol[col], 'highlight'),
+                            _this.renderFillSegs(businessHoursByCol[col], 'non-business'),
+                            _this.renderFillSegs(bgEventSegsByCol[col], 'bg-event'))) }));
+                })));
+        };
+        TableRow.prototype.componentDidMount = function () {
+            this.updateSizing(true);
+        };
+        TableRow.prototype.componentDidUpdate = function (prevProps, prevState) {
+            var currentProps = this.props;
+            this.updateSizing(!isPropsEqual(prevProps, currentProps));
+        };
+        TableRow.prototype.getHighlightSegs = function () {
+            var props = this.props;
+            if (props.eventDrag && props.eventDrag.segs.length) { // messy check
+                return props.eventDrag.segs;
+            }
+            if (props.eventResize && props.eventResize.segs.length) { // messy check
+                return props.eventResize.segs;
+            }
+            return props.dateSelectionSegs;
+        };
+        TableRow.prototype.getMirrorSegs = function () {
+            var props = this.props;
+            if (props.eventResize && props.eventResize.segs.length) { // messy check
+                return props.eventResize.segs;
+            }
+            return [];
+        };
+        TableRow.prototype.renderFgSegs = function (col, segPlacements, todayRange, isForcedInvisible, isDragging, isResizing, isDateSelecting) {
+            var context = this.context;
+            var eventSelection = this.props.eventSelection;
+            var framePositions = this.state.framePositions;
+            var defaultDisplayEventEnd = this.props.cells.length === 1; // colCnt === 1
+            var isMirror = isDragging || isResizing || isDateSelecting;
+            var nodes = [];
+            if (framePositions) {
+                for (var _i = 0, segPlacements_1 = segPlacements; _i < segPlacements_1.length; _i++) {
+                    var placement = segPlacements_1[_i];
+                    var seg = placement.seg;
+                    var instanceId = seg.eventRange.instance.instanceId;
+                    var key = instanceId + ':' + col;
+                    var isVisible = placement.isVisible && !isForcedInvisible[instanceId];
+                    var isAbsolute = placement.isAbsolute;
+                    var left = '';
+                    var right = '';
+                    if (isAbsolute) {
+                        if (context.isRtl) {
+                            right = 0;
+                            left = framePositions.lefts[seg.lastCol] - framePositions.lefts[seg.firstCol];
+                        }
+                        else {
+                            left = 0;
+                            right = framePositions.rights[seg.firstCol] - framePositions.rights[seg.lastCol];
+                        }
+                    }
+                    /*
+                    known bug: events that are force to be list-item but span multiple days still take up space in later columns
+                    todo: in print view, for multi-day events, don't display title within non-start/end segs
+                    */
+                    nodes.push(createElement("div", { className: 'fc-daygrid-event-harness' + (isAbsolute ? ' fc-daygrid-event-harness-abs' : ''), key: key, ref: isMirror ? null : this.segHarnessRefs.createRef(key), style: {
+                            visibility: isVisible ? '' : 'hidden',
+                            marginTop: isAbsolute ? '' : placement.marginTop,
+                            top: isAbsolute ? placement.absoluteTop : '',
+                            left: left,
+                            right: right,
+                        } }, hasListItemDisplay(seg) ? (createElement(TableListItemEvent, __assign({ seg: seg, isDragging: isDragging, isSelected: instanceId === eventSelection, defaultDisplayEventEnd: defaultDisplayEventEnd }, getSegMeta(seg, todayRange)))) : (createElement(TableBlockEvent, __assign({ seg: seg, isDragging: isDragging, isResizing: isResizing, isDateSelecting: isDateSelecting, isSelected: instanceId === eventSelection, defaultDisplayEventEnd: defaultDisplayEventEnd }, getSegMeta(seg, todayRange))))));
+                }
+            }
+            return nodes;
+        };
+        TableRow.prototype.renderFillSegs = function (segs, fillType) {
+            var isRtl = this.context.isRtl;
+            var todayRange = this.props.todayRange;
+            var framePositions = this.state.framePositions;
+            var nodes = [];
+            if (framePositions) {
+                for (var _i = 0, segs_1 = segs; _i < segs_1.length; _i++) {
+                    var seg = segs_1[_i];
+                    var leftRightCss = isRtl ? {
+                        right: 0,
+                        left: framePositions.lefts[seg.lastCol] - framePositions.lefts[seg.firstCol],
+                    } : {
+                        left: 0,
+                        right: framePositions.rights[seg.firstCol] - framePositions.rights[seg.lastCol],
+                    };
+                    nodes.push(createElement("div", { key: buildEventRangeKey(seg.eventRange), className: "fc-daygrid-bg-harness", style: leftRightCss }, fillType === 'bg-event' ?
+                        createElement(BgEvent, __assign({ seg: seg }, getSegMeta(seg, todayRange))) :
+                        renderFill(fillType)));
+                }
+            }
+            return createElement.apply(void 0, __spreadArray([Fragment, {}], nodes));
+        };
+        TableRow.prototype.updateSizing = function (isExternalSizingChange) {
+            var _a = this, props = _a.props, frameElRefs = _a.frameElRefs;
+            if (!props.forPrint &&
+                props.clientWidth !== null // positioning ready?
+            ) {
+                if (isExternalSizingChange) {
+                    var frameEls = props.cells.map(function (cell) { return frameElRefs.currentMap[cell.key]; });
+                    if (frameEls.length) {
+                        var originEl = this.rootElRef.current;
+                        this.setState({
+                            framePositions: new PositionCache(originEl, frameEls, true, // isHorizontal
+                            false),
+                        });
+                    }
+                }
+                var limitByContentHeight = props.dayMaxEvents === true || props.dayMaxEventRows === true;
+                this.setState({
+                    eventInstanceHeights: this.queryEventInstanceHeights(),
+                    maxContentHeight: limitByContentHeight ? this.computeMaxContentHeight() : null,
+                });
+            }
+        };
+        TableRow.prototype.queryEventInstanceHeights = function () {
+            var segElMap = this.segHarnessRefs.currentMap;
+            var eventInstanceHeights = {};
+            // get the max height amongst instance segs
+            for (var key in segElMap) {
+                var height = Math.round(segElMap[key].getBoundingClientRect().height);
+                var instanceId = key.split(':')[0]; // deconstruct how renderFgSegs makes the key
+                eventInstanceHeights[instanceId] = Math.max(eventInstanceHeights[instanceId] || 0, height);
+            }
+            return eventInstanceHeights;
+        };
+        TableRow.prototype.computeMaxContentHeight = function () {
+            var firstKey = this.props.cells[0].key;
+            var cellEl = this.cellElRefs.currentMap[firstKey];
+            var fcContainerEl = this.fgElRefs.currentMap[firstKey];
+            return cellEl.getBoundingClientRect().bottom - fcContainerEl.getBoundingClientRect().top;
+        };
+        TableRow.prototype.getCellEls = function () {
+            var elMap = this.cellElRefs.currentMap;
+            return this.props.cells.map(function (cell) { return elMap[cell.key]; });
+        };
+        return TableRow;
+    }(DateComponent));
+    TableRow.addStateEquality({
+        eventInstanceHeights: isPropsEqual,
+    });
+    function buildMirrorPlacements(mirrorSegs, colPlacements) {
+        if (!mirrorSegs.length) {
+            return [];
+        }
+        var topsByInstanceId = buildAbsoluteTopHash(colPlacements); // TODO: cache this at first render?
+        return mirrorSegs.map(function (seg) { return ({
+            seg: seg,
+            isVisible: true,
+            isAbsolute: true,
+            absoluteTop: topsByInstanceId[seg.eventRange.instance.instanceId],
+            marginTop: 0,
+        }); });
+    }
+    function buildAbsoluteTopHash(colPlacements) {
+        var topsByInstanceId = {};
+        for (var _i = 0, colPlacements_1 = colPlacements; _i < colPlacements_1.length; _i++) {
+            var placements = colPlacements_1[_i];
+            for (var _a = 0, placements_1 = placements; _a < placements_1.length; _a++) {
+                var placement = placements_1[_a];
+                topsByInstanceId[placement.seg.eventRange.instance.instanceId] = placement.absoluteTop;
+            }
+        }
+        return topsByInstanceId;
+    }
+
+    var Table = /** @class */ (function (_super) {
+        __extends(Table, _super);
+        function Table() {
+            var _this = _super !== null && _super.apply(this, arguments) || this;
+            _this.splitBusinessHourSegs = memoize(splitSegsByRow);
+            _this.splitBgEventSegs = memoize(splitSegsByRow);
+            _this.splitFgEventSegs = memoize(splitSegsByRow);
+            _this.splitDateSelectionSegs = memoize(splitSegsByRow);
+            _this.splitEventDrag = memoize(splitInteractionByRow);
+            _this.splitEventResize = memoize(splitInteractionByRow);
+            _this.rowRefs = new RefMap();
+            _this.handleRootEl = function (rootEl) {
+                _this.rootEl = rootEl;
+                if (rootEl) {
+                    _this.context.registerInteractiveComponent(_this, {
+                        el: rootEl,
+                        isHitComboAllowed: _this.props.isHitComboAllowed,
+                    });
+                }
+                else {
+                    _this.context.unregisterInteractiveComponent(_this);
+                }
+            };
+            return _this;
+        }
+        Table.prototype.render = function () {
+            var _this = this;
+            var props = this.props;
+            var dateProfile = props.dateProfile, dayMaxEventRows = props.dayMaxEventRows, dayMaxEvents = props.dayMaxEvents, expandRows = props.expandRows;
+            var rowCnt = props.cells.length;
+            var businessHourSegsByRow = this.splitBusinessHourSegs(props.businessHourSegs, rowCnt);
+            var bgEventSegsByRow = this.splitBgEventSegs(props.bgEventSegs, rowCnt);
+            var fgEventSegsByRow = this.splitFgEventSegs(props.fgEventSegs, rowCnt);
+            var dateSelectionSegsByRow = this.splitDateSelectionSegs(props.dateSelectionSegs, rowCnt);
+            var eventDragByRow = this.splitEventDrag(props.eventDrag, rowCnt);
+            var eventResizeByRow = this.splitEventResize(props.eventResize, rowCnt);
+            var limitViaBalanced = dayMaxEvents === true || dayMaxEventRows === true;
+            // if rows can't expand to fill fixed height, can't do balanced-height event limit
+            // TODO: best place to normalize these options?
+            if (limitViaBalanced && !expandRows) {
+                limitViaBalanced = false;
+                dayMaxEventRows = null;
+                dayMaxEvents = null;
+            }
+            var classNames = [
+                'fc-daygrid-body',
+                limitViaBalanced ? 'fc-daygrid-body-balanced' : 'fc-daygrid-body-unbalanced',
+                expandRows ? '' : 'fc-daygrid-body-natural', // will height of one row depend on the others?
+            ];
+            return (createElement("div", { className: classNames.join(' '), ref: this.handleRootEl, style: {
+                    // these props are important to give this wrapper correct dimensions for interactions
+                    // TODO: if we set it here, can we avoid giving to inner tables?
+                    width: props.clientWidth,
+                    minWidth: props.tableMinWidth,
+                } },
+                createElement(NowTimer, { unit: "day" }, function (nowDate, todayRange) { return (createElement(Fragment, null,
+                    createElement("table", { className: "fc-scrollgrid-sync-table", style: {
+                            width: props.clientWidth,
+                            minWidth: props.tableMinWidth,
+                            height: expandRows ? props.clientHeight : '',
+                        } },
+                        props.colGroupNode,
+                        createElement("tbody", null, props.cells.map(function (cells, row) { return (createElement(TableRow, { ref: _this.rowRefs.createRef(row), key: cells.length
+                                ? cells[0].date.toISOString() /* best? or put key on cell? or use diff formatter? */
+                                : row // in case there are no cells (like when resource view is loading)
+                            , showDayNumbers: rowCnt > 1, showWeekNumbers: props.showWeekNumbers, todayRange: todayRange, dateProfile: dateProfile, cells: cells, renderIntro: props.renderRowIntro, businessHourSegs: businessHourSegsByRow[row], eventSelection: props.eventSelection, bgEventSegs: bgEventSegsByRow[row].filter(isSegAllDay) /* hack */, fgEventSegs: fgEventSegsByRow[row], dateSelectionSegs: dateSelectionSegsByRow[row], eventDrag: eventDragByRow[row], eventResize: eventResizeByRow[row], dayMaxEvents: dayMaxEvents, dayMaxEventRows: dayMaxEventRows, clientWidth: props.clientWidth, clientHeight: props.clientHeight, forPrint: props.forPrint })); }))))); })));
+        };
+        // Hit System
+        // ----------------------------------------------------------------------------------------------------
+        Table.prototype.prepareHits = function () {
+            this.rowPositions = new PositionCache(this.rootEl, this.rowRefs.collect().map(function (rowObj) { return rowObj.getCellEls()[0]; }), // first cell el in each row. TODO: not optimal
+            false, true);
+            this.colPositions = new PositionCache(this.rootEl, this.rowRefs.currentMap[0].getCellEls(), // cell els in first row
+            true, // horizontal
+            false);
+        };
+        Table.prototype.queryHit = function (positionLeft, positionTop) {
+            var _a = this, colPositions = _a.colPositions, rowPositions = _a.rowPositions;
+            var col = colPositions.leftToIndex(positionLeft);
+            var row = rowPositions.topToIndex(positionTop);
+            if (row != null && col != null) {
+                var cell = this.props.cells[row][col];
+                return {
+                    dateProfile: this.props.dateProfile,
+                    dateSpan: __assign({ range: this.getCellRange(row, col), allDay: true }, cell.extraDateSpan),
+                    dayEl: this.getCellEl(row, col),
+                    rect: {
+                        left: colPositions.lefts[col],
+                        right: colPositions.rights[col],
+                        top: rowPositions.tops[row],
+                        bottom: rowPositions.bottoms[row],
+                    },
+                    layer: 0,
+                };
+            }
+            return null;
+        };
+        Table.prototype.getCellEl = function (row, col) {
+            return this.rowRefs.currentMap[row].getCellEls()[col]; // TODO: not optimal
+        };
+        Table.prototype.getCellRange = function (row, col) {
+            var start = this.props.cells[row][col].date;
+            var end = addDays(start, 1);
+            return { start: start, end: end };
+        };
+        return Table;
+    }(DateComponent));
+    function isSegAllDay(seg) {
+        return seg.eventRange.def.allDay;
+    }
+
+    var DayTableSlicer = /** @class */ (function (_super) {
+        __extends(DayTableSlicer, _super);
+        function DayTableSlicer() {
+            var _this = _super !== null && _super.apply(this, arguments) || this;
+            _this.forceDayIfListItem = true;
+            return _this;
+        }
+        DayTableSlicer.prototype.sliceRange = function (dateRange, dayTableModel) {
+            return dayTableModel.sliceRange(dateRange);
+        };
+        return DayTableSlicer;
+    }(Slicer));
+
+    var DayTable = /** @class */ (function (_super) {
+        __extends(DayTable, _super);
+        function DayTable() {
+            var _this = _super !== null && _super.apply(this, arguments) || this;
+            _this.slicer = new DayTableSlicer();
+            _this.tableRef = createRef();
+            return _this;
+        }
+        DayTable.prototype.render = function () {
+            var _a = this, props = _a.props, context = _a.context;
+            return (createElement(Table, __assign({ ref: this.tableRef }, this.slicer.sliceProps(props, props.dateProfile, props.nextDayThreshold, context, props.dayTableModel), { dateProfile: props.dateProfile, cells: props.dayTableModel.cells, colGroupNode: props.colGroupNode, tableMinWidth: props.tableMinWidth, renderRowIntro: props.renderRowIntro, dayMaxEvents: props.dayMaxEvents, dayMaxEventRows: props.dayMaxEventRows, showWeekNumbers: props.showWeekNumbers, expandRows: props.expandRows, headerAlignElRef: props.headerAlignElRef, clientWidth: props.clientWidth, clientHeight: props.clientHeight, forPrint: props.forPrint })));
+        };
+        return DayTable;
+    }(DateComponent));
+
+    var DayTableView = /** @class */ (function (_super) {
+        __extends(DayTableView, _super);
+        function DayTableView() {
+            var _this = _super !== null && _super.apply(this, arguments) || this;
+            _this.buildDayTableModel = memoize(buildDayTableModel);
+            _this.headerRef = createRef();
+            _this.tableRef = createRef();
+            return _this;
+        }
+        DayTableView.prototype.render = function () {
+            var _this = this;
+            var _a = this.context, options = _a.options, dateProfileGenerator = _a.dateProfileGenerator;
+            var props = this.props;
+            var dayTableModel = this.buildDayTableModel(props.dateProfile, dateProfileGenerator);
+            var headerContent = options.dayHeaders && (createElement(DayHeader, { ref: this.headerRef, dateProfile: props.dateProfile, dates: dayTableModel.headerDates, datesRepDistinctDays: dayTableModel.rowCnt === 1 }));
+            var bodyContent = function (contentArg) { return (createElement(DayTable, { ref: _this.tableRef, dateProfile: props.dateProfile, dayTableModel: dayTableModel, businessHours: props.businessHours, dateSelection: props.dateSelection, eventStore: props.eventStore, eventUiBases: props.eventUiBases, eventSelection: props.eventSelection, eventDrag: props.eventDrag, eventResize: props.eventResize, nextDayThreshold: options.nextDayThreshold, colGroupNode: contentArg.tableColGroupNode, tableMinWidth: contentArg.tableMinWidth, dayMaxEvents: options.dayMaxEvents, dayMaxEventRows: options.dayMaxEventRows, showWeekNumbers: options.weekNumbers, expandRows: !props.isHeightAuto, headerAlignElRef: _this.headerElRef, clientWidth: contentArg.clientWidth, clientHeight: contentArg.clientHeight, forPrint: props.forPrint })); };
+            return options.dayMinWidth
+                ? this.renderHScrollLayout(headerContent, bodyContent, dayTableModel.colCnt, options.dayMinWidth)
+                : this.renderSimpleLayout(headerContent, bodyContent);
+        };
+        return DayTableView;
+    }(TableView));
+    function buildDayTableModel(dateProfile, dateProfileGenerator) {
+        var daySeries = new DaySeriesModel(dateProfile.renderRange, dateProfileGenerator);
+        return new DayTableModel(daySeries, /year|month|week/.test(dateProfile.currentRangeUnit));
+    }
+
+    var TableDateProfileGenerator = /** @class */ (function (_super) {
+        __extends(TableDateProfileGenerator, _super);
+        function TableDateProfileGenerator() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        // Computes the date range that will be rendered.
+        TableDateProfileGenerator.prototype.buildRenderRange = function (currentRange, currentRangeUnit, isRangeAllDay) {
+            var dateEnv = this.props.dateEnv;
+            var renderRange = _super.prototype.buildRenderRange.call(this, currentRange, currentRangeUnit, isRangeAllDay);
+            var start = renderRange.start;
+            var end = renderRange.end;
+            var endOfWeek;
+            // year and month views should be aligned with weeks. this is already done for week
+            if (/^(year|month)$/.test(currentRangeUnit)) {
+                start = dateEnv.startOfWeek(start);
+                // make end-of-week if not already
+                endOfWeek = dateEnv.startOfWeek(end);
+                if (endOfWeek.valueOf() !== end.valueOf()) {
+                    end = addWeeks(endOfWeek, 1);
+                }
+            }
+            // ensure 6 weeks
+            if (this.props.monthMode &&
+                this.props.fixedWeekCount) {
+                var rowCnt = Math.ceil(// could be partial weeks due to hiddenDays
+                diffWeeks(start, end));
+                end = addWeeks(end, 6 - rowCnt);
+            }
+            return { start: start, end: end };
+        };
+        return TableDateProfileGenerator;
+    }(DateProfileGenerator));
+
+    var dayGridPlugin = createPlugin({
+        initialView: 'dayGridMonth',
+        views: {
+            dayGrid: {
+                component: DayTableView,
+                dateProfileGeneratorClass: TableDateProfileGenerator,
+            },
+            dayGridDay: {
+                type: 'dayGrid',
+                duration: { days: 1 },
+            },
+            dayGridWeek: {
+                type: 'dayGrid',
+                duration: { weeks: 1 },
+            },
+            dayGridMonth: {
+                type: 'dayGrid',
+                duration: { months: 1 },
+                monthMode: true,
+                fixedWeekCount: true,
+            },
+        },
+    });
+
+    var AllDaySplitter = /** @class */ (function (_super) {
+        __extends(AllDaySplitter, _super);
+        function AllDaySplitter() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        AllDaySplitter.prototype.getKeyInfo = function () {
+            return {
+                allDay: {},
+                timed: {},
+            };
+        };
+        AllDaySplitter.prototype.getKeysForDateSpan = function (dateSpan) {
+            if (dateSpan.allDay) {
+                return ['allDay'];
+            }
+            return ['timed'];
+        };
+        AllDaySplitter.prototype.getKeysForEventDef = function (eventDef) {
+            if (!eventDef.allDay) {
+                return ['timed'];
+            }
+            if (hasBgRendering(eventDef)) {
+                return ['timed', 'allDay'];
+            }
+            return ['allDay'];
+        };
+        return AllDaySplitter;
+    }(Splitter));
+
+    var DEFAULT_SLAT_LABEL_FORMAT = createFormatter({
+        hour: 'numeric',
+        minute: '2-digit',
+        omitZeroMinute: true,
+        meridiem: 'short',
+    });
+    function TimeColsAxisCell(props) {
+        var classNames = [
+            'fc-timegrid-slot',
+            'fc-timegrid-slot-label',
+            props.isLabeled ? 'fc-scrollgrid-shrink' : 'fc-timegrid-slot-minor',
+        ];
+        return (createElement(ViewContextType.Consumer, null, function (context) {
+            if (!props.isLabeled) {
+                return (createElement("td", { className: classNames.join(' '), "data-time": props.isoTimeStr }));
+            }
+            var dateEnv = context.dateEnv, options = context.options, viewApi = context.viewApi;
+            var labelFormat = // TODO: fully pre-parse
+             options.slotLabelFormat == null ? DEFAULT_SLAT_LABEL_FORMAT :
+                Array.isArray(options.slotLabelFormat) ? createFormatter(options.slotLabelFormat[0]) :
+                    createFormatter(options.slotLabelFormat);
+            var hookProps = {
+                level: 0,
+                time: props.time,
+                date: dateEnv.toDate(props.date),
+                view: viewApi,
+                text: dateEnv.format(props.date, labelFormat),
+            };
+            return (createElement(RenderHook, { hookProps: hookProps, classNames: options.slotLabelClassNames, content: options.slotLabelContent, defaultContent: renderInnerContent$1, didMount: options.slotLabelDidMount, willUnmount: options.slotLabelWillUnmount }, function (rootElRef, customClassNames, innerElRef, innerContent) { return (createElement("td", { ref: rootElRef, className: classNames.concat(customClassNames).join(' '), "data-time": props.isoTimeStr },
+                createElement("div", { className: "fc-timegrid-slot-label-frame fc-scrollgrid-shrink-frame" },
+                    createElement("div", { className: "fc-timegrid-slot-label-cushion fc-scrollgrid-shrink-cushion", ref: innerElRef }, innerContent)))); }));
+        }));
+    }
+    function renderInnerContent$1(props) {
+        return props.text;
+    }
+
+    var TimeBodyAxis = /** @class */ (function (_super) {
+        __extends(TimeBodyAxis, _super);
+        function TimeBodyAxis() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        TimeBodyAxis.prototype.render = function () {
+            return this.props.slatMetas.map(function (slatMeta) { return (createElement("tr", { key: slatMeta.key },
+                createElement(TimeColsAxisCell, __assign({}, slatMeta)))); });
+        };
+        return TimeBodyAxis;
+    }(BaseComponent));
+
+    var DEFAULT_WEEK_NUM_FORMAT = createFormatter({ week: 'short' });
+    var AUTO_ALL_DAY_MAX_EVENT_ROWS = 5;
+    var TimeColsView = /** @class */ (function (_super) {
+        __extends(TimeColsView, _super);
+        function TimeColsView() {
+            var _this = _super !== null && _super.apply(this, arguments) || this;
+            _this.allDaySplitter = new AllDaySplitter(); // for use by subclasses
+            _this.headerElRef = createRef();
+            _this.rootElRef = createRef();
+            _this.scrollerElRef = createRef();
+            _this.state = {
+                slatCoords: null,
+            };
+            _this.handleScrollTopRequest = function (scrollTop) {
+                var scrollerEl = _this.scrollerElRef.current;
+                if (scrollerEl) { // TODO: not sure how this could ever be null. weirdness with the reducer
+                    scrollerEl.scrollTop = scrollTop;
+                }
+            };
+            /* Header Render Methods
+            ------------------------------------------------------------------------------------------------------------------*/
+            _this.renderHeadAxis = function (rowKey, frameHeight) {
+                if (frameHeight === void 0) { frameHeight = ''; }
+                var options = _this.context.options;
+                var dateProfile = _this.props.dateProfile;
+                var range = dateProfile.renderRange;
+                var dayCnt = diffDays(range.start, range.end);
+                var navLinkAttrs = (options.navLinks && dayCnt === 1) // only do in day views (to avoid doing in week views that dont need it)
+                    ? { 'data-navlink': buildNavLinkData(range.start, 'week'), tabIndex: 0 }
+                    : {};
+                if (options.weekNumbers && rowKey === 'day') {
+                    return (createElement(WeekNumberRoot, { date: range.start, defaultFormat: DEFAULT_WEEK_NUM_FORMAT }, function (rootElRef, classNames, innerElRef, innerContent) { return (createElement("th", { ref: rootElRef, className: [
+                            'fc-timegrid-axis',
+                            'fc-scrollgrid-shrink',
+                        ].concat(classNames).join(' ') },
+                        createElement("div", { className: "fc-timegrid-axis-frame fc-scrollgrid-shrink-frame fc-timegrid-axis-frame-liquid", style: { height: frameHeight } },
+                            createElement("a", __assign({ ref: innerElRef, className: "fc-timegrid-axis-cushion fc-scrollgrid-shrink-cushion fc-scrollgrid-sync-inner" }, navLinkAttrs), innerContent)))); }));
+                }
+                return (createElement("th", { className: "fc-timegrid-axis" },
+                    createElement("div", { className: "fc-timegrid-axis-frame", style: { height: frameHeight } })));
+            };
+            /* Table Component Render Methods
+            ------------------------------------------------------------------------------------------------------------------*/
+            // only a one-way height sync. we don't send the axis inner-content height to the DayGrid,
+            // but DayGrid still needs to have classNames on inner elements in order to measure.
+            _this.renderTableRowAxis = function (rowHeight) {
+                var _a = _this.context, options = _a.options, viewApi = _a.viewApi;
+                var hookProps = {
+                    text: options.allDayText,
+                    view: viewApi,
+                };
+                return (
+                // TODO: make reusable hook. used in list view too
+                createElement(RenderHook, { hookProps: hookProps, classNames: options.allDayClassNames, content: options.allDayContent, defaultContent: renderAllDayInner$1, didMount: options.allDayDidMount, willUnmount: options.allDayWillUnmount }, function (rootElRef, classNames, innerElRef, innerContent) { return (createElement("td", { ref: rootElRef, className: [
+                        'fc-timegrid-axis',
+                        'fc-scrollgrid-shrink',
+                    ].concat(classNames).join(' ') },
+                    createElement("div", { className: 'fc-timegrid-axis-frame fc-scrollgrid-shrink-frame' + (rowHeight == null ? ' fc-timegrid-axis-frame-liquid' : ''), style: { height: rowHeight } },
+                        createElement("span", { className: "fc-timegrid-axis-cushion fc-scrollgrid-shrink-cushion fc-scrollgrid-sync-inner", ref: innerElRef }, innerContent)))); }));
+            };
+            _this.handleSlatCoords = function (slatCoords) {
+                _this.setState({ slatCoords: slatCoords });
+            };
+            return _this;
+        }
+        // rendering
+        // ----------------------------------------------------------------------------------------------------
+        TimeColsView.prototype.renderSimpleLayout = function (headerRowContent, allDayContent, timeContent) {
+            var _a = this, context = _a.context, props = _a.props;
+            var sections = [];
+            var stickyHeaderDates = getStickyHeaderDates(context.options);
+            if (headerRowContent) {
+                sections.push({
+                    type: 'header',
+                    key: 'header',
+                    isSticky: stickyHeaderDates,
+                    chunk: {
+                        elRef: this.headerElRef,
+                        tableClassName: 'fc-col-header',
+                        rowContent: headerRowContent,
+                    },
+                });
+            }
+            if (allDayContent) {
+                sections.push({
+                    type: 'body',
+                    key: 'all-day',
+                    chunk: { content: allDayContent },
+                });
+                sections.push({
+                    type: 'body',
+                    key: 'all-day-divider',
+                    outerContent: ( // TODO: rename to cellContent so don't need to define