neo.mjs 6.9.10 → 6.9.11

package/resources/data/deck/training/p/2023-10-01T18-29-19-158Z.md

@@ -0,0 +1,76 @@
+Neo.mjs is a framework used to create browser-based applications.
+
+Some key features and benefits of Neo.mjs are:
+
+<div type="expander" caption="Multi-Threaded">
+<p>
+When a Neo.mjs application starts, the framework spawns three web-workers. 
+Web-workers are each run in their own thread. As a result, a typical Neo.mjs application
+has four threads:
+<ol>
+<li>The _main_ thread, where DOM updates are applied
+<li>An _application_ web-worker where normal application locic is run
+    <li>A _data_ web-worker were HTTP and socket calls are run
+<li>A _view_ web-worker that manages delta updates
+</ol>
+</div>
+
+<div type="expander" caption="Extreme Speed">
+<p>
+The Neo.mjs web-worker proccesses are automatically run in parallel, on separate CPU cores.
+</p>
+<p>
+By contrast, other JavaScript frameworks run in a single thread. That means 
+in a typical framework all business logic, data handling, and DOM rendering compete for 
+CPU reasources.
+</p>
+<p>
+This means Neo.mjs applications run and render faster. This is 
+particularly beneficial for processor- and data-intensive applications, 
+and applications that need to rapidly update what's viewed. In testing, Neo.mjs applications 
+easily apply over 20,000 DOM updates per second. 
+</p>
+<p>
+If the default four threads aren't enough, you're free to launch additional web-worker threads 
+to run other specialized logic. 
+</p>
+</div>
+
+<div type="expander" caption="Quick Application Development">
+<p>
+Neo.js classes let you specify properties in a way that allows code to detect "before" and "after"
+changes. This makes it easy to handle value validation and transformation, and react to changes. 
+</p>
+<p>
+Neo.mjs also has elegant yet powerful state management features that make it easy to create shared,
+bindable data. For example, if two components are bound to the same propery, a change to the 
+property will automatically be applied to both components.
+</p>
+</div>
+
+<div type="expander" caption="Multi-Window Applications">
+<p>
+Neo.mjs applications can also launch as _shared web workers_, which allows you to have a single 
+application run in multiple browser windows; those windows could be moved to multiple monitors.
+</p>
+<p>
+For example, you can have a data analysis application with a control panel on one monitor, 
+tabular data in another, and charts on another &mdash; all sharing the same data, handling events
+across windows, running seamlessly as a single application. 
+</p>
+</div>
+
+<div type="expander" caption="Open-Source and Standards-Based">
+<p>
+Neo.mjs is an open-source library. Features needed for the community can be added to the
+library via pull-requests. And since Neo.mjs uses the standard JavaScript class system, 
+all Neo.mjs classes can be extended.
+</p>
+<p>
+Neo.mjs uses standard modular JavaScript, so developers don't need to learn non-standard language
+syntax, and there's no need for special pre-compilers or WebPack modules.
+That means fewer dependencies and easier configuration. Furthermore, the use of
+standard JavaScript makes debugging easier: any statement you write while developing your
+applcation can also be run in the debugging console.
+</p>
+</div>

package/resources/data/deck/training/p/2023-10-07T19-18-28-517Z.md

@@ -0,0 +1,102 @@
+Neo.mjs classes are standard JavaSript classes. Every source file
+you write will be a class definition, extending some Neo.mjs
+class.
+
+<pre class="neo">
+import Base from '../../../node_modules/neo.mjs/src/core/Base.mjs';
+
+class Mammal extends Base {
+    static config = {
+        className: 'Simple.example.Mammal'
+    }
+}
+
+const myMammal = Neo.create(Mammal);
+
+Neo.applyClassConfig(Mammal); // Where Neo.mjs initialializes the class config. 
+export default Mammal;        // Makes the class available elsewhere.
+</pre>
+
+In the example above, we're extending the Neo.mjs base class. The static
+config block describes the class we're defining. 
+
+All classes specify the `className`; you'll add other config properties to describe the class.
+
+The `const myMammal = Neo.create(Mammal);` statement creates an instance of
+our class. For the sake of our discussion we're putting that statement in the same source
+file where the class is defined, but normally your code would import the class elsewhere, 
+and create instances as needed.
+
+Let's add a `name` propery to the class.
+
+<pre class="neo" style="color:gray">
+import Base from '../../../node_modules/neo.mjs/src/core/Base.mjs';
+
+class Mammal extends Base {
+    static config = {
+        className: 'Simple.example.Mammal',
+
+        <span style="color:#b91010">name: 'Anonymous'</span>
+    }
+}
+
+const myMammal = Neo.create(Mammal);
+console.log(<span style="color:#b91010">myMammal.name</span>);           // Logs "Anonymous"
+<span style="color:#b91010">myMammal.name</span> = 'Herbert';
+console.log(<span style="color:#b91010">myMammal.name</span>);           // Logs "Herbert"
+
+Neo.applyClassConfig(Mammal);
+
+export default Mammal;
+</pre>
+
+In Neo.mjs, instance properties are usually added in the `static config` block.
+The `static config` block does two things: 
+- It formally describes the properties API for your class.
+- It lets Neo.mjs manage the initialization and lifecycle of those properties.
+
+Think of the `static config` block as "these are the properties
+that can be set as instances are created." Config properties can be introduced 
+anywhere in the class hierarchy. 
+
+Since our class defines a `name` property, we can specify that when creating
+the instance, using the second argument to the `create` method. 
+
+<pre class="neo" style="color:gray">
+const myMammal = Neo.create(Mammal, <span style="color:#b91010">{
+    name: 'Creature'
+}</span>);
+console.log(myMammal.name);           // Logs "Creature"
+</pre>
+
+
+Since _you_ define those properties, you can
+look for them in class methods and use them as needed.
+Let's add a `speak()` method that uses the `name` property.
+
+<pre class="neo" style="color:gray">
+import Base from '../../../node_modules/neo.mjs/src/core/Base.mjs';
+
+class Mammal extends Base {
+    static config = {
+        className: 'Simple.example.Mammal',
+
+        name: 'Anonymous'
+    }
+    <span style="color:#b91010">speak(){
+        console.log(`${this.name} is grunting`);
+    }</span>
+}
+
+const myMammal = Neo.create(Mammal, {
+    name: 'Creature'
+});
+<span style="color:#b91010">myMammal.speak();</span>        // Logs "Creature is grunting."
+
+Neo.applyClassConfig(Mammal);
+
+export default Mammal;
+</pre>
+
+
+

package/resources/data/deck/training/p/2023-10-08T20-20-07-934Z.md

@@ -0,0 +1,75 @@
+In Neo.mjs you sub-class and override methods in the usual way. 
+
+Here, we'll extend `Mammal` and override the `speak()` method. 
+(For brevity, we'll exclude `export` and `import` statements.)
+
+<pre class="neo">
+class Mammal extends Base {
+    static config = {
+        className: 'Simple.example.Mammal',
+
+        name: 'Anonymous'
+    }
+    speak(){
+        console.log(`(${this.name} is grunting)`);
+    }
+}
+Neo.applyClassConfig(Mammal);
+</pre>
+<pre class="neo">
+class Human extends Mammal {
+    static config = {
+        className: 'Simple.example.Human',
+    }
+    speak(){
+        console.log(`Hello! My name is ${this.name}. I am ${this.married?'':'not'} married.`);
+    }
+}
+
+const myMammal = Neo.create(Human, {
+    name: 'Herbert'
+});
+myMammal.speak();        // Logs "Hello! My name is Herbert. I am not married."
+
+Neo.applyClassConfig(Mammal);
+</pre>
+
+Any class in the hierarchy is free to add new properties and methods. Let's add
+a property and behavior (method) to the Human class.
+
+<pre class="neo">
+import Base from '../../../node_modules/neo.mjs/src/core/Base.mjs';
+
+class Mammal extends Base {
+    static config = {
+        className: 'Simple.example.Mammal',
+
+        name: 'Anonymous'
+    }
+    speak(){
+        console.log(`(${this.name} is grunting)`);
+    }
+}
+</pre>
+<pre class="neo">
+class Human extends Mammal {
+    static config = {
+        className: 'Simple.example.Human',
+        name: 'J. Doe',
+        married: false
+    }
+    speak(){
+        console.log(`Hello! My name is ${this.name}. I am ${this.married?'':'not'} married.`);
+    },
+    yodel(){
+        console.log('Yodelay hee hoo!');
+    }}
+
+const myPerson = Neo.create(Human, {
+    name: 'Herbert'
+});
+myPerson.speak();        // Logs "Hello! My name is Herbert. I am not married."
+myPerson.yodel();        // Logs "Yedelay hee hoo!"
+
+Neo.applyClassConfig(Human);
+</pre>

package/resources/data/deck/training/p/2023-10-08T20-20-37-336Z.md

@@ -0,0 +1,29 @@
+Neo.mjs uses standard modular JavaScript, so you're free to use other class 
+features, like private members.
+<pre class="neo">
+class Human extends Mammal {
+    static config = {
+        className: 'Simple.example.Human',
+        name: 'J. Doe',
+        married: false,
+    }
+    static #privateStaticField = 'foo'
+    #privateInstanceField = 'bar'
+    #privateInstanceMethod(){
+        console.log(`Psst. Don't tell anyone, but ${this.#privateInstanceField} and ${Human.#privateStaticField}`);
+    }
+    speak(tellSecret){
+        console.log(`Hello! My name is ${this.name}. I am ${this.married?'':'not'} married.`);
+        if (tellSecret) this.#privateInstanceMethod();
+    }
+    yodel(){
+        console.log('Yodelay hee hoo!');
+    }}
+
+const myPerson = Neo.create(Human, {
+    name: 'Herbert'
+});
+myPerson.speak(true);
+
+Neo.applyClassConfig(Human);
+</pre>

package/resources/data/deck/training/p/2023-10-08T21-58-25-809Z.md

@@ -0,0 +1,68 @@
+To call a super-class method use the `super` keyword.
+
+<pre class="neo" style="color:gray">
+class Mammal extends Base {
+    static config = {
+        className: 'Simple.example.Mammal',
+
+        name: 'Anonymous'
+    }
+    doSomething(){
+        console.log(`${this.name} is doing something mammals do`)
+    }
+}
+Neo.applyClassConfig(Mammal);
+</pre>
+<pre class="neo" style="color:gray">
+class Human extends Mammal {
+    static config = {
+        className: 'Simple.example.Human',
+    }
+    doSomething(){
+        <span style="color:#b91010">super.doSomething();</span>
+        console.log(`${this.name} is doing something humans do`)
+    }
+}
+
+const myPerson = Neo.create(Human, {
+    name: 'Herbert'
+});
+myPerson.doSomething();
+
+Neo.applyClassConfig(Mammal);
+</pre>
+
+Sometimes you aren't sure if a super class has a method. In that case use the
+conditional chaining operator &mdash; `?.`
+
+<pre class="neo" style="color:gray">
+class Mammal extends Base {
+    static config = {
+        className: 'Simple.example.Mammal',
+
+        name: 'Anonymous'
+    }
+    doSomething(){
+        console.log(`${this.name} is doing something mammals do`)
+    }
+}
+Neo.applyClassConfig(Mammal);
+</pre>
+<pre class="neo" style="color:gray">
+class Human extends Mammal {
+    static config = {
+        className: 'Simple.example.Human',
+    }
+    doSomething(){
+        <span style="color:#b91010">super?.doSomething();</span>
+        console.log(`${this.name} is doing something humans do`)
+    }
+}
+
+const myPerson = Neo.create(Human, {
+    name: 'Herbert'
+});
+myPerson.doSomething();
+
+Neo.applyClassConfig(Mammal);
+</pre>

package/resources/data/deck/training/p/2023-10-14T19-25-08-153Z.md

@@ -0,0 +1,119 @@
+If you haven't already done it, run `npx neo-app` to create a Neo.mjs workspace.
+
+<img src="resources/images/learn/NeoWorkspace.png" style="height: 400px;">
+
+As you can see, a Neo.mjs workspace is a conventional npm workspace. If you run 
+the script `npm run server-start` from the workspace, Neo.mjs launches a web
+serve whose doc root is the workspace. 
+
+<img src="resources/images/learn/ServerRoot.png" style="height: 400px;">
+
+If you drill down into the `src` directory you'll see your applications.
+The `docs` directory holds the Neo.mjs API docs. Examples are in the `examples` directory.
+
+In order to discuss the structure of an app, we'll create a simple starter 
+app. To do that, run this command from the workspace.
+
+`npm run create-app-empty`
+
+At the first prompt, name the app `Foo`, and accept the default for everything else.
+The script creates an application structured as follows.
+
+<img src="resources/images/learn/FooFolder.png" style="height: 400px;">
+
+These files are part of the typical structure of a Neo.mjs application. The files `index.html`, `app.mjs`, `neo-config.json`, `view/Viewport.mjs` are rarely modified.
+You will, however, edit the main container, and its associated "controller" and "model",
+as well as create new views, new controllers, etc. 
+
+Now let's look at a source file. This is the contents of `MainView.mjs`.
+
+<pre class="neo">
+import Base from '../../../node_modules/neo.mjs/src/container/Base.mjs';
+import Controller from './MainViewController.mjs';
+import ViewModel from './MainViewModel.mjs';
+
+class MainView extends Base {
+    static config = {
+        className: 'Foo.view.MainView',
+        
+        controller: {module: Controller},
+        model: {module: ViewModel},
+
+        layout: {ntype: 'fit'},
+        items: [],
+    }
+}
+
+Neo.applyClassConfig(MainView);
+
+export default MainView;
+</pre>
+
+Neo.mjs views are composed of components. A component can be a "container", which means it
+visually holds or groups other components, or a regular component, like a button. 
+
+The main view is a container because it extends `Base`, which is a reference to the 
+container base class imported in the first statement. The items in a container are configured 
+in `items:[]`, which is empty in this starter code.
+
+This view also has a _controller_ and _model_. We'll talk about those later, but in a nutshell,
+a controller is where event handling and app logic goes, and a model is where you set up shared
+bindable data.
+
+We'll go into a lot more depth about view, controllers, and models in other topics, but to let
+you see how a component is configured let's put a button in the container. 
+
+First, we need to import the class that defines buttons. Then we'll describe the new button in the
+`items:[].`
+
+<pre class="neo">
+
+import Base        from '../../../node_modules/neo.mjs/src/container/Base.mjs';
+import Controller  from './MainViewController.mjs';
+import ViewModel   from './MainViewModel.mjs';
+import Button      from '../../../node_modules/neo.mjs/src/button/Base.mjs';
+
+class MainView extends Base {
+    static config = {
+        className: 'Foo.view.MainView',
+        
+        controller: {module: Controller},
+        model: {module: ViewModel},
+
+        layout: {ntype: 'fit'},
+        items: [{
+            module: Button,
+            text: 'Button'
+        }],
+    }
+}
+
+Neo.applyClassConfig(MainView);
+
+export default MainView;
+</pre>
+
+Note the entry in +items:[]+. That's a description of the button that'll be created as the single
+item in our container. In Neo.mjs terms we're _configuring_ the button. Neo.mjs is _declarative_,
+which components and objects are _described_. It's an abstraction. In other words we're saying 
+what we want, but not how it's done. We want a button with some text &mdash; how that's done
+isn't important here in the container. A non-declarative approach would be more focused on _how_,
+where you might way "I want a &lt;button> HTML element with its innerHTML set to some value." 
+
+In another topic you'll learn about the Neo.mjs config system and declaratively describing
+views, controllers, and other things.
+
+If you run the +foo+ app you'll see one huge button. That's because the container is configured to 
+use the "fit" layout, which means the container is designed to hold one and only one component,
+and that component will take up all available space. We could get a more normal looking button
+by changing the layout.
+
+`layout: {type:'vbox', align:'start},`
+
+Change that line and look at the running application. 
+
+Neo.mjs has scores of component classes.
+You can extend them to create your own reusable components and sets of components.
+
+Other topics discuss coding applications, how the config system works, controllers,
+and bindable data. However, as long as we're here

package/resources/data/deck/training/t.json

@@ -0,0 +1 @@
+{"data":[{"id":"2022-12-29T19-31-05-548Z","parentId":null,"isLeaf":false,"name":"The Neo Philosophy"},{"id":"2022-12-29T19-31-30-507Z","parentId":"2022-12-29T19-31-05-548Z","isLeaf":true,"name":"What is Neo"},{"id":"2023-01-10T02-21-54-303Z","parentId":"2022-12-29T19-31-05-548Z","isLeaf":true,"name":"Exampless"},{"id":"2023-09-20T15-56-52-693Z","parentId":"2022-12-29T19-31-05-548Z","isLeaf":false,"name":"Coding Style"},{"id":"2023-01-10T01-29-38-148Z","parentId":"2023-09-20T15-56-52-693Z","isLeaf":true,"name":"Introduction"},{"id":"2022-12-29T19-31-55-091Z","parentId":"2023-09-20T15-56-52-693Z","isLeaf":true,"name":"History"},{"id":"2022-12-29T20-03-42-628Z","parentId":"2023-09-20T15-56-52-693Z","isLeaf":true,"name":"Browser-Based Runtime"},{"id":"2022-12-30T19-04-30-990Z","parentId":"2023-09-20T15-56-52-693Z","isLeaf":true,"name":"Neo's Approach"},{"id":"2022-12-29T20-21-20-669Z","parentId":"2023-09-20T15-56-52-693Z","isLeaf":true,"name":"Browser-Based Runtime (continued)"},{"id":"2022-12-27T21-54-09-743Z","parentId":null,"isLeaf":false,"name":"Earthquakes"},{"id":"2023-01-10T01-43-12-166Z","parentId":"2022-12-27T21-54-09-743Z","isLeaf":true,"name":"Lab: Create a Workspace"},{"id":"2022-12-27T21-54-52-300Z","parentId":"2022-12-27T21-54-09-743Z","isLeaf":true,"name":"Useful Scripts"},{"id":"2022-12-29T20-36-54-785Z","parentId":"2022-12-27T21-54-09-743Z","isLeaf":false,"name":"Anatomy"},{"id":"2022-12-27T21-55-23-144Z","parentId":"2022-12-29T20-36-54-785Z","isLeaf":true,"name":".msj"},{"id":"2022-12-29T20-37-08-919Z","parentId":"2022-12-29T20-36-54-785Z","isLeaf":true,"name":"Class-based"},{"id":"2022-12-29T20-37-20-344Z","parentId":"2022-12-29T20-36-54-785Z","isLeaf":true,"name":"Declarative"},{"id":"2022-12-27T21-55-30-948Z","parentId":"2022-12-27T21-54-09-743Z","isLeaf":true,"name":"Order of Execution"},{"id":"2022-12-29T18-36-56-893Z","parentId":"2022-12-27T21-54-09-743Z","isLeaf":true,"name":"Lab: Generate an App "},{"id":"2022-12-29T15-49-59-475Z","parentId":"2022-12-27T21-54-09-743Z","isLeaf":false,"name":"Chrome Devtools"},{"id":"2022-12-29T15-56-54-485Z","parentId":"2022-12-29T15-49-59-475Z","isLeaf":true,"name":"Neo Workers"},{"id":"2022-12-29T18-34-25-826Z","parentId":"2022-12-29T15-49-59-475Z","isLeaf":true,"name":"DevTools JavaScript Context"},{"id":"2022-12-29T15-57-11-499Z","parentId":"2022-12-29T15-49-59-475Z","isLeaf":true,"name":"Getting a Reference to a Component"},{"id":"2023-07-01T21-54-31-329Z","parentId":"2022-12-29T15-49-59-475Z","isLeaf":true,"name":"Don't Use these in App Logic"},{"id":"2023-06-28T21-15-43-718Z","parentId":"2022-12-29T15-49-59-475Z","isLeaf":false,"name":"A Handy Way to Select Components"},{"id":"2023-06-28T18-03-14-313Z","parentId":"2023-06-28T21-15-43-718Z","isLeaf":true,"name":"Introduction"},{"id":"2023-06-28T21-28-28-379Z","parentId":"2023-06-28T21-15-43-718Z","isLeaf":true,"name":"What We Need to Code"},{"id":"2023-06-28T21-16-24-034Z","parentId":"2023-06-28T21-15-43-718Z","isLeaf":true,"name":"Main Thread Code"},{"id":"2023-06-28T21-16-34-972Z","parentId":"2023-06-28T21-15-43-718Z","isLeaf":true,"name":"The Neo.mjs Code to Detect the Event"},{"id":"2023-06-28T18-26-17-290Z","parentId":"2023-06-28T21-15-43-718Z","isLeaf":true,"name":"Demo"},{"id":"2022-12-29T16-00-13-223Z","parentId":"2022-12-29T15-49-59-475Z","isLeaf":true,"name":"Changing Properties"},{"id":"2022-12-31T18-43-56-338Z","parentId":"2022-12-29T15-49-59-475Z","isLeaf":true,"name":"Changing Properties (Continued)"},{"id":"2022-12-31T18-51-50-682Z","parentId":"2022-12-29T15-49-59-475Z","isLeaf":true,"name":"Changing Properties (Continued)"},{"id":"2022-12-31T18-54-04-176Z","parentId":"2022-12-29T15-49-59-475Z","isLeaf":true,"name":"Running Methods"},{"id":"2022-12-29T18-36-08-226Z","parentId":"2022-12-29T15-49-59-475Z","isLeaf":true,"name":"Lab: Introduction to Debugging"},{"id":"2022-12-27T22-13-00-809Z","parentId":"2022-12-27T21-54-09-743Z","isLeaf":false,"name":"Let's Do Something More Interesting"},{"id":"2023-01-08T02-30-13-460Z","parentId":"2022-12-27T22-13-00-809Z","isLeaf":false,"name":"Introduction"},{"id":"2022-12-31T23-00-41-222Z","parentId":"2023-01-08T02-30-13-460Z","isLeaf":true,"name":"Introduction"},{"id":"2023-01-08T01-25-12-557Z","parentId":"2023-01-08T02-30-13-460Z","isLeaf":true,"name":"Goals"},{"id":"2023-06-29T23-15-10-411Z","parentId":"2023-01-08T02-30-13-460Z","isLeaf":true,"name":"Key Concepts"},{"id":"2023-01-08T02-11-26-333Z","parentId":"2023-01-08T02-30-13-460Z","isLeaf":true,"name":"The Forest and the Trees"},{"id":"2022-12-27T21-55-43-542Z","parentId":"2022-12-27T22-13-00-809Z","isLeaf":true,"name":"Let's Add a Table to the App"},{"id":"2022-12-27T22-23-55-083Z","parentId":"2022-12-27T22-13-00-809Z","isLeaf":true,"name":"It Does a Lot!"},{"id":"2022-12-27T22-24-07-886Z","parentId":"2022-12-27T22-13-00-809Z","isLeaf":true,"name":"Key Features"},{"id":"2023-01-01T17-49-18-429Z","parentId":"2022-12-27T22-13-00-809Z","isLeaf":true,"name":"Inspect the Store"},{"id":"2022-12-27T22-26-59-121Z","parentId":"2022-12-27T22-13-00-809Z","isLeaf":false,"name":"Let's Take a Closer Look at the Store"},{"id":"2022-12-27T22-24-52-295Z","parentId":"2022-12-27T22-26-59-121Z","isLeaf":true,"name":"Declarative"},{"id":"2022-12-27T22-25-03-853Z","parentId":"2022-12-27T22-26-59-121Z","isLeaf":true,"name":"Class Based"},{"id":"2022-12-27T22-44-41-791Z","parentId":"2022-12-27T22-26-59-121Z","isLeaf":true,"name":"Neo.data.Store"},{"id":"2022-12-27T22-44-28-881Z","parentId":"2022-12-27T22-26-59-121Z","isLeaf":true,"name":"Neo.data.Model"},{"id":"2023-07-01T15-42-45-193Z","parentId":"2022-12-27T22-13-00-809Z","isLeaf":true,"name":"Lab: Create a new buildScript"},{"id":"2022-12-31T22-11-55-555Z","parentId":"2022-12-27T22-13-00-809Z","isLeaf":true,"name":"Lab: Earthquakes \u2014 Create the App"},{"id":"2022-12-27T22-43-58-924Z","parentId":"2022-12-27T22-13-00-809Z","isLeaf":true,"name":"<b>Refactor the Table into a Class</b>"},{"id":"2023-01-01T18-44-07-034Z","parentId":"2022-12-27T22-13-00-809Z","isLeaf":true,"name":"Earthquakes Table"},{"id":"2022-12-31T23-18-55-655Z","parentId":"2022-12-27T22-13-00-809Z","isLeaf":true,"name":"Lab: Earthquakes \u2014 Refactor"},{"id":"2022-12-27T22-45-21-032Z","parentId":"2022-12-27T22-13-00-809Z","isLeaf":true,"name":"The Earthquakes Table is  Reusable"},{"id":"2023-01-01T19-04-22-830Z","parentId":"2022-12-27T22-13-00-809Z","isLeaf":true,"name":"Sharing the Store"},{"id":"2022-12-27T22-49-22-078Z","parentId":"2022-12-27T22-13-00-809Z","isLeaf":true,"name":"<b>Component (View) Models</b>"},{"id":"2022-12-27T22-50-20-626Z","parentId":"2022-12-27T22-13-00-809Z","isLeaf":true,"name":"Example"},{"id":"2023-01-04T01-52-23-454Z","parentId":"2022-12-27T22-13-00-809Z","isLeaf":true,"name":"Adding a Component Model to Hold the Store"},{"id":"2023-01-08T00-45-11-144Z","parentId":"2022-12-27T22-13-00-809Z","isLeaf":true,"name":"Refactor the model"},{"id":"2023-01-03T02-07-19-014Z","parentId":"2022-12-27T22-13-00-809Z","isLeaf":true,"name":"Lab: Earthquakes \u2014 Use a Component Model"},{"id":"2022-12-31T23-25-40-735Z","parentId":"2022-12-27T22-13-00-809Z","isLeaf":true,"name":"Neo.component.wrapper.GoogleMaps"},{"id":"2023-01-01T18-47-39-766Z","parentId":"2022-12-27T22-13-00-809Z","isLeaf":true,"name":"Earthquakes Map"},{"id":"2023-01-12T01-50-54-617Z","parentId":"2022-12-27T22-13-00-809Z","isLeaf":true,"name":"Lab: Earthquakes \u2014 Add a map"},{"id":"2022-12-31T23-25-51-014Z","parentId":"2022-12-27T22-13-00-809Z","isLeaf":true,"name":"<b>Events</b>"},{"id":"2023-01-08T01-06-31-267Z","parentId":"2022-12-27T22-13-00-809Z","isLeaf":true,"name":"Lab: Earthquakes \u2014 Listen to Events"},{"id":"2023-01-01T21-26-53-748Z","parentId":"2022-12-27T22-13-00-809Z","isLeaf":true,"name":"<b>Controllers</b>"},{"id":"2023-01-08T01-46-50-723Z","parentId":"2022-12-27T22-13-00-809Z","isLeaf":true,"name":"Controllers are Simple"},{"id":"2023-01-08T01-24-21-088Z","parentId":"2022-12-27T22-13-00-809Z","isLeaf":true,"name":"Lab: Earthquakes \u2014 Put the Listeners in the Controller "},{"id":"2023-07-31T00-26-03-842Z","parentId":"2022-12-27T22-13-00-809Z","isLeaf":true,"name":"<b>Multi-Window</b>"},{"id":"2023-07-31T00-31-51-933Z","parentId":"2022-12-27T22-13-00-809Z","isLeaf":true,"name":"SharedWorker"},{"id":"2023-07-31T00-37-21-927Z","parentId":"2022-12-27T22-13-00-809Z","isLeaf":true,"name":"Lab: Earthquakes &mdash; Make the Application Multi-Window"},{"id":"2023-01-08T01-21-48-916Z","parentId":"2022-12-27T21-54-09-743Z","isLeaf":false,"name":"Review"},{"id":"2023-01-08T02-09-19-678Z","parentId":"2023-01-08T01-21-48-916Z","isLeaf":true,"name":"Review"},{"id":"2023-01-08T02-09-07-802Z","parentId":"2023-01-08T01-21-48-916Z","isLeaf":true,"name":"What's Difficult"},{"id":"2023-01-06T23-44-18-920Z","parentId":null,"isLeaf":false,"name":"Yelp"},{"id":"2023-01-06T23-44-02-340Z","parentId":"2023-01-06T23-44-18-920Z","isLeaf":true,"name":"What We'll be Coding"},{"id":"2023-01-06T23-46-36-687Z","parentId":"2023-01-06T23-44-18-920Z","isLeaf":true,"name":"What We'll be Coding"},{"id":"2023-01-06T23-46-45-783Z","parentId":"2023-01-06T23-44-18-920Z","isLeaf":true,"name":"The Feed"},{"id":"2023-01-01T21-14-45-740Z","parentId":"2023-01-06T23-44-18-920Z","isLeaf":true,"name":"Lab: Yelp \u2014 Create the App"},{"id":"2023-01-14T13-47-50-821Z","parentId":"2023-01-06T23-44-18-920Z","isLeaf":false,"name":"Neo.component.Base"},{"id":"2023-01-13T21-05-57-708Z","parentId":"2023-01-14T13-47-50-821Z","isLeaf":true,"name":"Neo.component.Base"},{"id":"2023-01-14T13-50-28-199Z","parentId":"2023-01-14T13-47-50-821Z","isLeaf":true,"name":"Properties"},{"id":"2023-01-14T19-29-15-291Z","parentId":"2023-01-14T13-47-50-821Z","isLeaf":true,"name":"Style"},{"id":"2023-01-14T13-59-20-275Z","parentId":"2023-01-14T13-47-50-821Z","isLeaf":true,"name":"Events"},{"id":"2023-01-14T14-03-29-456Z","parentId":"2023-01-14T13-47-50-821Z","isLeaf":true,"name":"Methods"},{"id":"2023-01-15T20-03-30-073Z","parentId":"2023-01-14T13-47-50-821Z","isLeaf":true,"name":"reference"},{"id":"2023-01-06T23-34-13-897Z","parentId":"2023-01-06T23-44-18-920Z","isLeaf":true,"name":"Lab: Yelp \u2014 Create the Banner"},{"id":"2023-01-01T21-11-08-828Z","parentId":"2023-01-06T23-44-18-920Z","isLeaf":false,"name":"<b>Config</b>"},{"id":"2023-01-13T23-01-50-449Z","parentId":"2023-01-01T21-11-08-828Z","isLeaf":true,"name":"Introduction"},{"id":"2023-07-02T16-14-06-970Z","parentId":"2023-01-01T21-11-08-828Z","isLeaf":true,"name":"The config:{} Block"},{"id":"2023-01-01T21-11-58-025Z","parentId":"2023-01-01T21-11-08-828Z","isLeaf":true,"name":"Normal Properties"},{"id":"2023-01-01T21-12-37-340Z","parentId":"2023-01-01T21-11-08-828Z","isLeaf":true,"name":"property_"},{"id":"2023-01-16T16-03-40-770Z","parentId":"2023-01-01T21-11-08-828Z","isLeaf":true,"name":"Assigning Values"},{"id":"2023-01-01T21-13-13-880Z","parentId":"2023-01-01T21-11-08-828Z","isLeaf":true,"name":"Lifecycle Methods"},{"id":"2023-01-13T19-55-24-735Z","parentId":"2023-01-01T21-11-08-828Z","isLeaf":true,"name":"User beforeSet to Validate"},{"id":"2023-01-13T20-08-27-068Z","parentId":"2023-01-01T21-11-08-828Z","isLeaf":true,"name":"Use beforeSet to Transform"},{"id":"2023-01-13T22-05-05-799Z","parentId":"2023-01-01T21-11-08-828Z","isLeaf":true,"name":"Use beforeSet to Create a Defensive Copy"},{"id":"2023-01-13T20-23-38-411Z","parentId":"2023-01-01T21-11-08-828Z","isLeaf":true,"name":"Use afterSet for Side Effects or Firing Events"},{"id":"2023-01-13T20-37-06-267Z","parentId":"2023-01-01T21-11-08-828Z","isLeaf":true,"name":"Use beforeGet to Control  What the Get Returns"},{"id":"2023-01-13T22-08-30-863Z","parentId":"2023-01-01T21-11-08-828Z","isLeaf":true,"name":"Use beforeGet to Return a Defensive Copy"},{"id":"2023-01-14T14-27-57-678Z","parentId":"2023-01-01T21-11-08-828Z","isLeaf":true,"name":"Component Property Lifecycle Methods"},{"id":"2023-01-14T17-30-18-228Z","parentId":"2023-01-01T21-11-08-828Z","isLeaf":true,"name":"Calling Super Class Methods"},{"id":"2023-01-01T21-16-22-773Z","parentId":"2023-01-06T23-44-18-920Z","isLeaf":false,"name":"Containers"},{"id":"2023-01-01T21-18-23-886Z","parentId":"2023-01-01T21-16-22-773Z","isLeaf":true,"name":"items:[]"},{"id":"2023-01-14T17-48-39-137Z","parentId":"2023-01-01T21-16-22-773Z","isLeaf":false,"name":"layout:{}"},{"id":"2023-01-01T21-18-42-290Z","parentId":"2023-01-14T17-48-39-137Z","isLeaf":true,"name":"Introduction"},{"id":"2023-01-14T18-28-39-316Z","parentId":"2023-01-14T17-48-39-137Z","isLeaf":true,"name":"fit"},{"id":"2023-01-14T18-28-44-115Z","parentId":"2023-01-14T17-48-39-137Z","isLeaf":true,"name":"card"},{"id":"2023-01-14T18-28-49-548Z","parentId":"2023-01-14T17-48-39-137Z","isLeaf":true,"name":"vbox, hbox"},{"id":"2023-01-14T18-40-13-758Z","parentId":"2023-01-14T17-48-39-137Z","isLeaf":true,"name":"flexbox"},{"id":"2023-01-01T21-18-31-316Z","parentId":"2023-01-01T21-16-22-773Z","isLeaf":true,"name":"itemDefaults"},{"id":"2023-01-01T21-19-57-020Z","parentId":"2023-01-01T21-16-22-773Z","isLeaf":true,"name":"add()"},{"id":"2023-01-15T22-22-13-517Z","parentId":"2023-01-06T23-44-18-920Z","isLeaf":true,"name":"Warning!"},{"id":"2023-01-20T12-51-22-646Z","parentId":"2023-01-06T23-44-18-920Z","isLeaf":true,"name":"Goals"},{"id":"2023-01-06T23-21-12-009Z","parentId":"2023-01-06T23-44-18-920Z","isLeaf":true,"name":"Lab: Yelp \u2014 Create the Filter Container"},{"id":"2023-01-15T18-51-52-134Z","parentId":"2023-01-06T23-44-18-920Z","isLeaf":true,"name":"Lab: Yelp \u2014 Create get/set Properties for City and Category"},{"id":"2023-01-15T22-28-57-508Z","parentId":"2023-01-06T23-44-18-920Z","isLeaf":true,"name":"Lab: Yelp \u2014 Update the UI as the Properties Change"},{"id":"2023-01-15T22-36-30-913Z","parentId":"2023-01-06T23-44-18-920Z","isLeaf":true,"name":"Lab: Yelp \u2014 Update the Properties as the UI Changes"},{"id":"2023-01-15T22-07-52-073Z","parentId":"2023-01-06T23-44-18-920Z","isLeaf":true,"name":"Those Labs Were Lengthy!"},{"id":"2023-01-01T21-21-02-577Z","parentId":"2023-01-06T23-44-18-920Z","isLeaf":false,"name":"Events"},{"id":"2023-01-01T21-22-31-184Z","parentId":"2023-01-01T21-21-02-577Z","isLeaf":true,"name":"Terminology"},{"id":"2023-01-01T21-22-38-317Z","parentId":"2023-01-01T21-21-02-577Z","isLeaf":true,"name":"Declarative"},{"id":"2023-01-01T21-22-47-693Z","parentId":"2023-01-01T21-21-02-577Z","isLeaf":true,"name":"Procedural"},{"id":"2023-01-08T17-22-48-841Z","parentId":"2023-01-01T21-21-02-577Z","isLeaf":true,"name":"Buttons"},{"id":"2023-01-01T21-23-17-716Z","parentId":"2023-01-01T21-21-02-577Z","isLeaf":true,"name":"How it Works"},{"id":"2023-01-01T21-23-28-532Z","parentId":"2023-01-01T21-21-02-577Z","isLeaf":true,"name":"Firing Your Own Events"},{"id":"2023-01-06T23-21-31-685Z","parentId":"2023-01-06T23-44-18-920Z","isLeaf":true,"name":"Lab: Yelp \u2014 Fire cityChange Event"},{"id":"2023-01-01T21-24-25-230Z","parentId":"2023-01-06T23-44-18-920Z","isLeaf":false,"name":"Panels"},{"id":"2023-01-01T23-38-42-863Z","parentId":"2023-01-01T21-24-25-230Z","isLeaf":true,"name":"Introduction"},{"id":"2023-01-16T20-21-56-859Z","parentId":"2023-01-01T21-24-25-230Z","isLeaf":true,"name":"headers:[]"},{"id":"2023-01-08T20-57-36-333Z","parentId":"2023-01-01T21-24-25-230Z","isLeaf":true,"name":"Toolbars"},{"id":"2023-01-08T20-57-51-136Z","parentId":"2023-01-01T21-24-25-230Z","isLeaf":true,"name":"Buttons"},{"id":"2023-01-14T00-17-55-115Z","parentId":"2023-01-06T23-44-18-920Z","isLeaf":false,"name":"Tab Panels"},{"id":"2023-01-16T20-24-09-690Z","parentId":"2023-01-14T00-17-55-115Z","isLeaf":true,"name":"Neo.tab.Container"},{"id":"2022-12-28T17-11-34-653Z","parentId":"2023-01-06T23-44-18-920Z","isLeaf":true,"name":"Lab: Yelp \u2014 Create the Tab Panel and Map"},{"id":"2022-12-28T16-58-00-245Z","parentId":"2023-01-06T23-44-18-920Z","isLeaf":false,"name":"Component (View) Models"},{"id":"2022-12-28T17-13-09-994Z","parentId":"2022-12-28T16-58-00-245Z","isLeaf":true,"name":"Introduction"},{"id":"2022-12-28T16-58-47-786Z","parentId":"2022-12-28T16-58-00-245Z","isLeaf":true,"name":"Structure"},{"id":"2022-12-28T21-31-39-670Z","parentId":"2022-12-28T16-58-00-245Z","isLeaf":false,"name":"Exploring Component Models"},{"id":"2022-12-28T17-10-18-058Z","parentId":"2022-12-28T21-31-39-670Z","isLeaf":true,"name":"The Bound Property Must Have a Setter"},{"id":"2022-12-29T01-43-32-431Z","parentId":"2022-12-28T21-31-39-670Z","isLeaf":true,"name":"One-Way Binding"},{"id":"2022-12-28T17-10-42-296Z","parentId":"2022-12-28T21-31-39-670Z","isLeaf":true,"name":"Your Own Setter Versus a Config"},{"id":"2022-12-28T21-32-14-420Z","parentId":"2022-12-28T21-31-39-670Z","isLeaf":true,"name":"Syncing Properties without Component Models"},{"id":"2022-12-28T16-58-55-192Z","parentId":"2022-12-28T21-31-39-670Z","isLeaf":true,"name":"Component Model \u2014 Inline vs Class"},{"id":"2023-01-20T13-06-46-614Z","parentId":"2023-01-06T23-44-18-920Z","isLeaf":true,"name":"Neo.controller.Component Review"},{"id":"2023-01-20T13-08-51-600Z","parentId":"2023-01-06T23-44-18-920Z","isLeaf":true,"name":"Neo.controller.Component Review"},{"id":"2023-01-14T00-33-05-958Z","parentId":"2023-01-06T23-44-18-920Z","isLeaf":true,"name":"Lab: Yelp \u2014 Bind the Map Center"},{"id":"2023-01-20T15-20-13-363Z","parentId":"2023-01-06T23-44-18-920Z","isLeaf":true,"name":"Lab: Yelp \u2014 Create View Mode and Conroller Classes"},{"id":"2023-01-06T23-21-59-596Z","parentId":"2023-01-06T23-44-18-920Z","isLeaf":true,"name":"Lab: Yelp \u2014 Bind City and Category"},{"id":"2023-01-20T15-34-58-813Z","parentId":"2023-01-06T23-44-18-920Z","isLeaf":true,"name":"Lab: Yelp \u2014 Detect Changes to View Model Properties"},{"id":"2023-01-01T21-27-44-418Z","parentId":"2023-01-06T23-44-18-920Z","isLeaf":false,"name":"Sending and Receiving Data"},{"id":"2023-01-08T20-17-25-083Z","parentId":"2023-01-01T21-27-44-418Z","isLeaf":false,"name":"Neo.data.*"},{"id":"2023-01-08T20-18-07-668Z","parentId":"2023-01-08T20-17-25-083Z","isLeaf":false,"name":"Introduction"},{"id":"2023-01-08T20-44-13-323Z","parentId":"2023-01-08T20-17-25-083Z","isLeaf":false,"name":"Neo.data.Store"},{"id":"2023-01-08T20-47-23-682Z","parentId":"2023-01-08T20-44-13-323Z","isLeaf":true,"name":"Introduction"},{"id":"2023-01-21T20-57-32-927Z","parentId":"2023-01-08T20-44-13-323Z","isLeaf":true,"name":"Commonly Used Configs"},{"id":"2023-01-21T16-33-14-852Z","parentId":"2023-01-08T20-44-13-323Z","isLeaf":false,"name":"Creating"},{"id":"2023-01-21T16-33-20-458Z","parentId":"2023-01-21T16-33-14-852Z","isLeaf":true,"name":"In-line \"store\" Config"},{"id":"2023-01-21T16-45-28-263Z","parentId":"2023-01-21T16-33-14-852Z","isLeaf":true,"name":"Creating a Store in the View Model"},{"id":"2023-01-21T16-56-25-452Z","parentId":"2023-01-21T16-33-14-852Z","isLeaf":true,"name":"Create and Use a Store Class"},{"id":"2023-01-21T17-28-31-493Z","parentId":"2023-01-21T16-33-14-852Z","isLeaf":true,"name":"Neo.create()"},{"id":"2023-01-08T20-47-32-064Z","parentId":"2023-01-08T20-44-13-323Z","isLeaf":true,"name":"Fetching Data"},{"id":"2023-01-21T20-56-28-184Z","parentId":"2023-01-08T20-44-13-323Z","isLeaf":true,"name":"responseRoot"},{"id":"2023-01-08T20-48-32-466Z","parentId":"2023-01-08T20-44-13-323Z","isLeaf":true,"name":"Selecting Records"},{"id":"2023-01-09T00-19-42-024Z","parentId":"2023-01-08T20-44-13-323Z","isLeaf":false,"name":"Sorting"},{"id":"2023-01-08T20-48-03-791Z","parentId":"2023-01-09T00-19-42-024Z","isLeaf":true,"name":"Sorting"},{"id":"2023-01-09T00-35-40-671Z","parentId":"2023-01-09T00-19-42-024Z","isLeaf":true,"name":"Methods"},{"id":"2023-01-08T20-47-57-045Z","parentId":"2023-01-08T20-44-13-323Z","isLeaf":true,"name":"Filtering"},{"id":"2023-01-09T00-07-37-951Z","parentId":"2023-01-08T20-44-13-323Z","isLeaf":true,"name":"Grouping"},{"id":"2023-01-08T20-18-54-411Z","parentId":"2023-01-08T20-17-25-083Z","isLeaf":false,"name":"Neo.data.Model"},{"id":"2023-01-08T20-46-11-806Z","parentId":"2023-01-08T20-18-54-411Z","isLeaf":true,"name":"Neo.data.Model"},{"id":"2023-01-21T20-08-24-452Z","parentId":"2023-01-08T20-18-54-411Z","isLeaf":true,"name":"fields[]"},{"id":"2023-01-21T19-49-51-918Z","parentId":"2023-01-08T20-18-54-411Z","isLeaf":true,"name":"Field#calculate()"},{"id":"2023-01-21T20-35-54-947Z","parentId":"2023-01-08T20-18-54-411Z","isLeaf":true,"name":"Example"},{"id":"2023-01-08T20-48-51-322Z","parentId":"2023-01-08T20-18-54-411Z","isLeaf":true,"name":"Neo.data.RecordFactory"},{"id":"2023-01-08T20-49-52-741Z","parentId":"2023-01-01T21-27-44-418Z","isLeaf":true,"name":"Neo.data.connection.Xhr"},{"id":"2023-01-08T20-52-03-556Z","parentId":"2023-01-01T21-27-44-418Z","isLeaf":true,"name":"Neo.data.connection.WebSocket"},{"id":"2023-01-21T20-54-47-603Z","parentId":"2023-01-06T23-44-18-920Z","isLeaf":true,"name":"The Data Feed"},{"id":"2023-01-14T00-40-27-784Z","parentId":"2023-01-06T23-44-18-920Z","isLeaf":true,"name":"Lab: Yelp \u2014 Fetch Yelp Data"},{"id":"2023-01-21T23-13-33-394Z","parentId":"2023-01-06T23-44-18-920Z","isLeaf":true,"name":"Contemplate the Moment"},{"id":"2023-01-01T21-29-09-942Z","parentId":"2023-01-06T23-44-18-920Z","isLeaf":false,"name":"Tables"},{"id":"2023-01-28T19-11-37-464Z","parentId":"2023-01-01T21-29-09-942Z","isLeaf":true,"name":"Introduction"},{"id":"2023-01-28T20-53-56-476Z","parentId":"2023-01-01T21-29-09-942Z","isLeaf":true,"name":"columns:[]"},{"id":"2023-01-28T20-58-43-776Z","parentId":"2023-01-01T21-29-09-942Z","isLeaf":true,"name":"renderer"},{"id":"2023-01-28T22-24-34-808Z","parentId":"2023-01-01T21-29-09-942Z","isLeaf":true,"name":"Example"},{"id":"2023-01-28T22-18-41-259Z","parentId":"2023-01-01T21-29-09-942Z","isLeaf":true,"name":"Example"},{"id":"2023-01-28T20-43-41-188Z","parentId":"2023-01-01T21-29-09-942Z","isLeaf":true,"name":"Anatomy"},{"id":"2023-01-29T16-25-24-528Z","parentId":"2023-01-01T21-29-09-942Z","isLeaf":true,"name":"Selection"},{"id":"2023-01-29T21-14-32-588Z","parentId":"2023-01-01T21-29-09-942Z","isLeaf":true,"name":"What's Selected"},{"id":"2023-01-14T00-41-59-081Z","parentId":"2023-01-06T23-44-18-920Z","isLeaf":true,"name":"Lab: Yelp \u2014 Add a Table"},{"id":"2023-01-01T21-28-12-759Z","parentId":"2023-01-06T23-44-18-920Z","isLeaf":false,"name":"Forms and Fields"},{"id":"2023-01-31T20-34-30-261Z","parentId":"2023-01-01T21-28-12-759Z","isLeaf":true,"name":"Introduction"},{"id":"2023-02-04T20-09-50-169Z","parentId":"2023-01-01T21-28-12-759Z","isLeaf":true,"name":"Hierarchy"},{"id":"2023-01-31T20-33-55-855Z","parentId":"2023-01-01T21-28-12-759Z","isLeaf":true,"name":"Fields are Name/Value Pairs"},{"id":"2023-02-04T20-19-42-740Z","parentId":"2023-01-01T21-28-12-759Z","isLeaf":true,"name":"Neo.form.field.Base"},{"id":"2023-02-04T20-23-56-013Z","parentId":"2023-01-01T21-28-12-759Z","isLeaf":true,"name":"Neo.form.field.Text"},{"id":"2023-01-31T20-52-53-367Z","parentId":"2023-01-01T21-28-12-759Z","isLeaf":true,"name":"Neo.form.field.Text"},{"id":"2023-02-04T15-49-47-597Z","parentId":"2023-01-01T21-28-12-759Z","isLeaf":true,"name":"Neo.form.field.Text Validation"},{"id":"2023-02-04T20-28-12-391Z","parentId":"2023-01-01T21-28-12-759Z","isLeaf":true,"name":"Neo.form.field.Text validator()"},{"id":"2023-02-06T00-14-54-457Z","parentId":"2023-01-01T21-28-12-759Z","isLeaf":true,"name":"Neo.form.field.Number"},{"id":"2023-02-05T00-20-32-554Z","parentId":"2023-01-01T21-28-12-759Z","isLeaf":true,"name":"Neo.form.field.Picker Components"},{"id":"2023-02-04T15-18-35-682Z","parentId":"2023-01-01T21-28-12-759Z","isLeaf":true,"name":"triggers"},{"id":"2023-02-05T00-35-56-282Z","parentId":"2023-01-01T21-28-12-759Z","isLeaf":true,"name":"Neo.form.field.Select"},{"id":"2023-02-05T15-36-57-182Z","parentId":"2023-01-01T21-28-12-759Z","isLeaf":true,"name":"Neo.form.field.Select"},{"id":"2023-01-31T19-24-53-504Z","parentId":"2023-01-01T21-28-12-759Z","isLeaf":true,"name":"Neo.form.Container"},{"id":"2023-02-05T17-39-51-712Z","parentId":"2023-01-06T23-44-18-920Z","isLeaf":true,"name":"Lab: Yelp \u2014 Encapsulate the Tab Panel View"},{"id":"2023-02-05T18-12-14-489Z","parentId":"2023-01-06T23-44-18-920Z","isLeaf":true,"name":"Lab: Yelp \u2014 Create the Detail Panel"},{"id":"2023-02-05T17-44-53-815Z","parentId":"2023-01-06T23-44-18-920Z","isLeaf":true,"name":"Lab: Yelp \u2014 Show Business Details"},{"id":"2023-02-05T17-45-40-114Z","parentId":"2023-01-06T23-44-18-920Z","isLeaf":true,"name":"Lab: Yelp \u2014  Add a Form"},{"id":"2023-01-21T16-21-16-292Z","parentId":"2023-01-06T23-44-18-920Z","isLeaf":false,"name":"Styling"},{"id":"2023-01-10T01-09-10-911Z","parentId":null,"isLeaf":false,"name":"iTunes"}]}

package/resources/scss/src/apps/learnneo/home/{ContentComponent.scss → ContentView.scss}

@@ -1,26 +1,20 @@
 .learn-content {
-    font-family   : 'Open Sans';
-    font-size     : 13pt;
+    font-family: 'Open Sans';
+    font-size: 13pt;
     letter-spacing: 1px;
-    overflow      : scroll;
-    padding       : 1em;
+    overflow: scroll;
+    padding: 1em;
 
     em,
     i {
         font-family: Palatino, "Times New Roman", serif;
-        font-size  : 1.07em;
+        font-size: 1.07em;
     }
 
     p {
         margin: 0.5em 0em 0.7em 0em;
     }
 
-    mark {
-        background-color: #B8FCE3;
-        color           : black;
-        padding         : 0.1em 0.2em;
-    }
-
     details summary {
         cursor: pointer;
         transition: margin 300ms ease-out;
@@ -48,14 +42,14 @@
     }
 
     details summary::before {
-        color      : #c4c4c4;
+        color: #c4c4c4;
         font-family: var(--fa-style-family, "Font Awesome 6 Free");
-        font-size  : 1.3em;
+        font-size: 1.3em;
         font-weight: var(--fa-style, 900);
-        margin     : 0.4em 0.4em 0.4em 0;
+        margin: 0.4em 0.4em 0.4em 0;
     }
 
     summary::-webkit-details-marker {
         display: none;
     }
-}
+}

package/resources/scss/theme-neo-light/Global.scss

@@ -5,3 +5,49 @@
     --neo-font-family     : "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif;
     --neo-font-smoothing  : antialiased;
 }
+
+@import "../../../resources/scss/theme-neo-light/design-tokens/_all.scss";
+
+h1 {
+    color           : var(--semantic-color-fg-contrast);
+    font-family     : var(--core-fontfamily-sans);
+    font-size       : var(--core-fontsize-h1);
+    font-weight     : var(--core-fontweight-semibold);
+    letter-spacing  : -0.02em;
+    line-height     : var(--core-lineheight-headline);
+}
+
+
+h2 {
+    color           : var(--semantic-color-fg-contrast);
+    font-family     : var(--core-fontfamily-sans);
+    font-size       : var(--core-fontsize-h2);
+    font-weight     : var(--core-fontweight-semibold);
+    letter-spacing  : -0.02em;
+    line-height     : var(--core-lineheight-headline);
+}
+
+p {
+    color           : var(--semantic-color-fg-default);
+    font-family     : var(--core-fontfamily-sans);
+    font-size       : var(--core-fontsize-body);
+    font-weight     : var(--core-fontweight-regular);
+    line-height     : var(--core-lineheight-paragraph);
+}
+
+// code {
+//     background-color: #ededed;
+//     border-radius   : 2px;
+//     color           : var(--semantic-color-fg-contrast);
+//     font-family     : var(--core-fontfamily-mono);
+//     font-size       : var(--core-fontsize-body);
+//     font-weight     : var(--core-fontweight-regular);
+//     line-height     : var(--core-lineheight-headline);
+//     padding         : 2px 0.3em;
+// }
+
+mark {
+    background-color: #B8FCE3;
+    color           : black;
+    padding         : 0.1em 0.2em;
+}