neo.mjs 6.18.2 → 6.18.3

package/apps/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='6.18.2'
+         * @member {String} version='6.18.3'
          */
-        version: '6.18.2'
+        version: '6.18.3'
     }
 
     /**

package/apps/portal/view/home/MainContainer.mjs

@@ -1,11 +1,10 @@
-import AfterMath  from './parts/AfterMath.mjs';
-import Colors     from './parts/Colors.mjs';
-import Container  from '../../../../src/container/Base.mjs';
-import Features   from './parts/Features.mjs';
-import Helix      from './parts/Helix.mjs';
-import How        from './parts/How.mjs';
-import HelloWorld from './parts/HelloWorld.mjs';
-import MainNeo    from './parts/MainNeo.mjs';
+import AfterMath from './parts/AfterMath.mjs';
+import Colors    from './parts/Colors.mjs';
+import Container from '../../../../src/container/Base.mjs';
+import Features  from './parts/Features.mjs';
+import Helix     from './parts/Helix.mjs';
+import How       from './parts/How.mjs';
+import MainNeo   from './parts/MainNeo.mjs';
 
 /**
  * @class Portal.view.home.MainContainer
@@ -40,7 +39,6 @@ class MainContainer extends Container {
             {ntype: 'component', cls: ['portal-home-progress']},
             MainNeo,
             Features,
-            HelloWorld,
             Helix,
             Colors,
             How,

package/apps/portal/view/home/parts/BaseContainer.mjs

@@ -16,7 +16,14 @@ class BaseContainer extends Container {
         /**
          * @member {String[]} cls=['portal-home-content-view','neo-container']
          */
-        baseCls: ['portal-home-content-view', 'neo-container']
+        baseCls: ['portal-home-content-view', 'neo-container'],
+        /**
+         * @member {Object} responsiveConfig
+         */
+        responsiveConfig: {
+            medium: {maxWidth: 840},
+            large : {minWidth: 841}
+        }
     }
 
     /**

package/apps/portal/view/home/parts/Colors.mjs

@@ -1,5 +1,5 @@
 import BaseContainer from './BaseContainer.mjs';
-import LivePreview   from '../../learn/LivePreview.mjs';
+import LivePreview   from '../../../../../src/code/LivePreview.mjs';
 
 /**
  * @class Portal.view.home.parts.Colors
@@ -69,7 +69,7 @@ class Colors extends BaseContainer {
                 reference: 'live-preview',
 
                 value: [
-                    "import Viewport from '../../../../apps/colors/view/Viewport.mjs';",
+                    "import Viewport from '../../apps/colors/view/Viewport.mjs';",
                     "",
                     "class MainView extends Viewport {",
                     "    static config = {",

package/apps/portal/view/home/parts/Helix.mjs

@@ -1,5 +1,5 @@
 import BaseContainer from './BaseContainer.mjs';
-import LivePreview   from '../../learn/LivePreview.mjs';
+import LivePreview   from '../../../../../src/code/LivePreview.mjs';
 
 /**
  * @class Portal.view.home.parts.Helix
@@ -81,7 +81,7 @@ class Helix extends BaseContainer {
                 reference: 'live-preview',
 
                 value: [
-                    "import Viewport from '../../../../examples/component/multiWindowHelix/Viewport.mjs';",
+                    "import Viewport from '../../examples/component/multiWindowHelix/Viewport.mjs';",
                     "",
                     "class MainView extends Viewport {",
                     "    static config = {",

package/apps/portal/view/learn/ContentView.mjs

@@ -1,5 +1,5 @@
 import Component   from '../../../../src/component/Base.mjs';
-import LivePreview from './LivePreview.mjs';
+import LivePreview from '../../../../src/code/LivePreview.mjs';
 import {marked}    from '../../../../node_modules/marked/lib/marked.esm.js';
 
 const
@@ -124,6 +124,8 @@ class ContentView extends Component {
                 // Create LivePreview for each iteration, set value to neoDivs[key]
                 Neo.create(LivePreview, {
                     appName        : me.appName,
+                    autoMount      : true,
+                    autoRender     : true,
                     parentComponent: me,
                     parentId       : key,
                     value          : neoDivs[key],

package/examples/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='6.18.2'
+         * @member {String} version='6.18.3'
          */
-        version: '6.18.2'
+        version: '6.18.3'
     }
 
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "6.18.2",
+    "version": "6.18.3",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -52,12 +52,12 @@
         "envinfo": "^7.13.0",
         "fs-extra": "^11.2.0",
         "highlightjs-line-numbers.js": "^2.8.0",
-        "inquirer": "^9.2.23",
-        "marked": "^13.0.0",
+        "inquirer": "^9.3.2",
+        "marked": "^13.0.1",
         "monaco-editor": "^0.50.0",
         "neo-jsdoc": "1.0.1",
         "neo-jsdoc-x": "1.0.5",
-        "postcss": "^8.4.38",
+        "postcss": "^8.4.39",
         "sass": "^1.77.6",
         "siesta-lite": "5.5.2",
         "url": "^0.11.3",

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

@@ -121,8 +121,8 @@ actually used in the example, and the import root path is different to reflect t
 Neo.mjs library relative to the examples.
 
 <pre data-neo>
-import Button    from '../../../../src/button/Base.mjs';
-import Container from '../../../../src/container/Base.mjs';
+import Button    from '../button/Base.mjs';
+import Container from '../container/Base.mjs';
 
 class MainView extends Container {
     static config = {

package/resources/data/deck/learnneo/pages/ComponentModels.md

@@ -4,9 +4,9 @@ A _view model_ — `Neo.model.Component` — instance holds properties t
 can be bound to component properties.
 
 <pre data-neo>
-import Container from  '../../../../src/container/Base.mjs';
-import Label     from  '../../../../src/component/Label.mjs';
-import TextField from  '../../../../src/form/field/Text.mjs';
+import Container from  '../container/Base.mjs';
+import Label     from  '../component/Label.mjs';
+import TextField from  '../form/field/Text.mjs';
 
 class MainView extends Container {
     static config = {
@@ -56,9 +56,9 @@ usually coded as separate classes.)
 Below is another example.
 
 <pre data-neo>
-import Container from  '../../../../src/container/Base.mjs';
-import Label     from  '../../../../src/component/Label.mjs';
-import Panel     from  '../../../../src/container/Panel.mjs';
+import Container from  '../container/Base.mjs';
+import Label     from  '../component/Label.mjs';
+import Panel     from  '../container/Panel.mjs';
 
 class MyPanel extends Panel {
     static config = {

package/resources/data/deck/learnneo/pages/ComponentsAndContainers.md

@@ -26,7 +26,7 @@ primitive. Components introduce various properties, such as `width`, `height`, `
 Here's a container, with one child item.
 
 <pre data-neo>
-import Container from '../../../../src/container/Base.mjs';
+import Container from '../container/Base.mjs';
 
 class MainView extends Container {
     static config = {
@@ -48,7 +48,7 @@ Components also have an `html`. The `html` property is rarely used, and goes aga
 sometimes it's handy as a placeholder as you stub out views.
 
 <pre data-neo>
-import Container from '../../../../src/container/Base.mjs';
+import Container from '../container/Base.mjs';
 
 class MainView extends Container {
     static config = {
@@ -78,7 +78,7 @@ some commonly-used layouts.
 Fix is used when there's a single child. The component is sized to fit the container.
 
 <pre data-neo>
-import Container from '../../../../src/container/Base.mjs';
+import Container from '../container/Base.mjs';
 
 class MainView extends Container {
     static config = {
@@ -99,8 +99,8 @@ Neo.setupClass(MainView);
 With `vbox` and `hbox`, items are arranged vertically or horizontally.
 
 <pre data-neo>
-import Button    from '../../../../src/button/Base.mjs';
-import Container from '../../../../src/container/Base.mjs';
+import Button    from '../button/Base.mjs';
+import Container from '../container/Base.mjs';
 
 class MainView extends Container {
     static config = {
@@ -126,10 +126,10 @@ Neo.setupClass(MainView);
 A card container has multiple child items, one of which is visible. 
 
 <pre data-neo>
-import Button    from '../../../../src/button/Base.mjs';
-import Base from '../../../../src/container/Base.mjs';
+import Button    from '../button/Base.mjs';
+import Container from '../container/Base.mjs';
 
-class MainView extends Base {
+class MainView extends Container {
     static config = {
         className: 'Example.view.MainView',
         layout   : 'vbox',
@@ -178,7 +178,7 @@ Neo.mjs is class-based, and thus, any component or container can be defined as i
 other component in the framework.
 
 <pre data-neo>
-import Button    from '../../../../src/button/Base.mjs';
+import Button from '../button/Base.mjs';
 // In practice this would be some handy reusable component
 class MySpecialButton extends Button {
     static config = {
@@ -191,7 +191,7 @@ class MySpecialButton extends Button {
 Neo.setupClass(MySpecialButton);
 
 
-import Container from '../../../../src/container/Base.mjs';
+import Container from '../container/Base.mjs';
 
 class MainView extends Container {
     static config = {

package/resources/data/deck/learnneo/pages/Config.md

@@ -18,8 +18,8 @@ The `Simple` class introduces syntax. It doesn't have any content, so if you run
 see anything. We'll change that in the next example.
 
 <pre data-neo>
-import Component  from '../../../../src/component/Base.mjs';
-import Container  from '../../../../src/container/Base.mjs';
+import Component from '../component/Base.mjs';
+import Container from '../container/Base.mjs';
 
 class Simple extends Component {
     static config = {
@@ -59,8 +59,8 @@ updated or accessed. You're free to implment these methods to provide business r
 values, or have side-effects, such as updating a view or firing an event.
 
 <pre data-neo>
-import Component  from '../../../../src/component/Base.mjs';
-import Container  from '../../../../src/container/Base.mjs';
+import Component from '../component/Base.mjs';
+import Container from '../container/Base.mjs';
 
 class Simple extends Component {
     static config = {
@@ -113,8 +113,8 @@ Typically, the _afterSet_ method is used to update a view or to fire an event.
 Look at this code: `afterSetBar()` fires an event, and the config in the `items[]` is listening to it.
 
 <pre data-neo>
-import Component  from '../../../../src/component/Base.mjs';
-import Container  from '../../../../src/container/Base.mjs';
+import Component from '../component/Base.mjs';
+import Container from '../container/Base.mjs';
 
 class Simple extends Component {
     static config = {

package/resources/data/deck/learnneo/pages/CustomComponents.md

@@ -10,20 +10,20 @@ Neo.mjs is class-based, which means you're free to extend any component (or any
 ## Lifecycle config properties
 
 <pre data-neo>
-import Button    from '../../../../src/button/Base.mjs';
+import Button from '../button/Base.mjs';
 // In practice this would be some handy reusable component
 class MySpecialButton extends Button {
     static config = {
         className: 'Example.view.MySpecialButton',
-        iconCls: 'far fa-face-grin-wide',
-        ui: 'ghost'
+        iconCls  : 'far fa-face-grin-wide',
+        ui       : 'ghost'
     }
 }
 
 Neo.setupClass(MySpecialButton);
 
 
-import Container from '../../../../src/container/Base.mjs';
+import Container from '../container/Base.mjs';
 
 class MainView extends Container {
     static config = {

package/resources/data/deck/learnneo/pages/DescribingTheUI.md

@@ -11,8 +11,8 @@ use to describe the component you're creating> You can also access or set the pr
 ## A view with one component
 
 <pre data-neo>
-import Button    from '../../../../src/button/Base.mjs';
-import Container from '../../../../src/container/Base.mjs';
+import Button    from '../button/Base.mjs';
+import Container from '../container/Base.mjs';
 
 class MainView extends Container {
     static config = {
@@ -47,8 +47,8 @@ Let's put a second button in the container.
 ## A view with two components
 
 <pre data-neo>
-import Button    from '../../../../src/button/Base.mjs';
-import Container from '../../../../src/container/Base.mjs';
+import Button    from '../button/Base.mjs';
+import Container from '../container/Base.mjs';
 
 class MainView extends Container {
     static config = {

package/resources/data/deck/learnneo/pages/Earthquakes.md

@@ -1298,10 +1298,10 @@ If we replace the top table with the map, `view/MainView.mjs` ends up with this
 
 <pre data-javascript>
 
-import Container           from '../../../node_modules/neo.mjs/src/container/Base.mjs';
+import Container           from '../container/Base.mjs';
 import Controller          from './MainViewController.mjs';
 import EarthquakesTable    from './earthquakes/Table.mjs';
-import GoogleMapsComponent from '../../../src/component/wrapper/GoogleMaps.mjs';
+import GoogleMapsComponent from '../component/wrapper/GoogleMaps.mjs';
 import ViewModel           from './MainViewModel.mjs';
 
 class MainView extends Container {

package/resources/data/deck/learnneo/pages/Events.md

@@ -14,8 +14,8 @@ The code below shows two text fields, with `listeners` for `change` and `focusEn
 (The events for any component are documented in the API docs.)
 
 <pre data-neo>
-import Container from '../../../../src/container/Base.mjs';
-import TextField from '../../../../src/form/field/Text.mjs';
+import Container from '../container/Base.mjs';
+import TextField from '../form/field/Text.mjs';
 
 class MainView extends Container {
     static config = {
@@ -53,7 +53,7 @@ A `Neo.controller.Component` is a simple class associated with a component class
 instance of its associated controller is automatically created. 
 
 <pre data-neo>
-import Base from '../../../../src/controller/Component.mjs';
+import Base from '../controller/Component.mjs';
 
 class MainViewController extends Base {
     static config = {
@@ -67,8 +67,8 @@ class MainViewController extends Base {
 Neo.setupClass(MainViewController);
 
 
-import Container from '../../../../src/container/Base.mjs';
-import TextField from '../../../../src/form/field/Text.mjs';
+import Container from '../container/Base.mjs';
+import TextField from '../form/field/Text.mjs';
 
 class MainView extends Container {
     static config = {
@@ -118,8 +118,8 @@ before the value is accessed. We're using the _after_ method to fire a `change`
 
 
 <pre data-neo>
-import Button    from '../../../../src/button/Base.mjs';
-import Container from '../../../../src/container/Base.mjs';
+import Button    from '../button/Base.mjs';
+import Container from '../container/Base.mjs';
 
 class ToggleButton extends Button {
     static config = {

package/resources/data/deck/learnneo/pages/Extending.md

@@ -6,9 +6,9 @@ to test.
 Consider this code. It's a panel with a header and a table. The table has a store. 
 
 <pre data-neo>
-import Button from '../../../../src/button/Base.mjs';
-import Panel  from '../../../../src/container/Panel.mjs';
-import Table  from '../../../../src/table/Container.mjs';
+import Button from '../button/Base.mjs';
+import Panel  from '../container/Panel.mjs';
+import Table  from '../table/Container.mjs';
 
 class MainView extends Panel {
     static config = {
@@ -49,10 +49,10 @@ have been refactored into their own classes, and the main view is using them. Th
 more abstract, and each class can be reused, tested, and maintained independently. 
 
 <pre data-neo>
-import Button from '../../../../src/button/Base.mjs';
-import Panel  from '../../../../src/container/Panel.mjs';
-import Store  from '../../../../src/data/Store.mjs';
-import Table  from '../../../../src/table/Container.mjs';
+import Button from '../button/Base.mjs';
+import Panel  from '../container/Panel.mjs';
+import Store  from '../data/Store.mjs';
+import Table  from '../table/Container.mjs';
 
 class BeatlesButton extends Button {
     static config = {

package/resources/data/deck/learnneo/pages/GuideEvents.md

@@ -2,8 +2,8 @@ As you read in the <a href="#/learn/Events">Getting Started > Events</a> topic,
 
 
 <pre data-neo>
-import Container from '../../../../src/container/Base.mjs';
-import TextField from '../../../../src/form/field/Text.mjs';
+import Container from '../container/Base.mjs';
+import TextField from '../form/field/Text.mjs';
 
 class MainView extends Container {
     static config = {
@@ -36,8 +36,8 @@ The event listener function can be coded in-line. Normally you want event handle
 controller, but for very simple situation it can be convenient to use this syntax.
 
 <pre data-neo>
-import Container from '../../../../src/container/Base.mjs';
-import TextField from '../../../../src/form/field/Text.mjs';
+import Container from '../container/Base.mjs';
+import TextField from '../form/field/Text.mjs';
 
 class MainView extends Container {
     static config = {
@@ -63,8 +63,8 @@ in-line syntax you saw above, using the `up.` syntax might be convenient for sim
 or when you simply haven't gotten around to defining a view's controller.
 
 <pre data-neo>
-import Container from '../../../../src/container/Base.mjs';
-import TextField from '../../../../src/form/field/Text.mjs';
+import Container from '../container/Base.mjs';
+import TextField from '../form/field/Text.mjs';
 
 class MainView extends Container {
     static config = {
@@ -93,7 +93,7 @@ Any view class can specify a controller &mdash; wWhen the view is created a cont
 also created. 
 
 <pre data-neo>
-import Controller from '../../../../src/controller/Component.mjs';
+import Controller from '../controller/Component.mjs';
 
 class MainViewController extends Controller {
     static config = {
@@ -106,8 +106,8 @@ class MainViewController extends Controller {
 Neo.setupClass(MainViewController);
 
 
-import Container from '../../../../src/container/Base.mjs';
-import TextField from '../../../../src/form/field/Text.mjs';
+import Container from '../container/Base.mjs';
+import TextField from '../form/field/Text.mjs';
 
 class MainView extends Container {
     static config = {
@@ -132,12 +132,12 @@ Neo.setupClass(MainView);
 ## Adding listeners procedurally
 
 Event listeners are normally specified declaratively, via the `listeners: {}` config. But occasionally you need to add
-a listener proccedurally.
+a listener procedurally.
 
-Any obversable class has an `addListener` method, along with an easier-to-type version called `on`.
+Any observable class has an `addListener` method, along with an easier-to-type version called `on`.
 
 <pre data-neo>
-import Controller from '../../../../src/controller/Component.mjs';
+import Controller from '../controller/Component.mjs';
 
 class MainViewController extends Controller {
     static config = {
@@ -153,8 +153,8 @@ class MainViewController extends Controller {
 Neo.setupClass(MainViewController);
 
 
-import Container from '../../../../src/container/Base.mjs';
-import TextField from '../../../../src/form/field/Text.mjs';
+import Container from '../container/Base.mjs';
+import TextField from '../form/field/Text.mjs';
 
 class MainView extends Container {
     static config = {
@@ -179,7 +179,7 @@ Neo.setupClass(MainView);
 The method specified in `on()` doesn't have to be an arrow function; you can use a controller function.
 
 <pre data-neo>
-import Controller from '../../../../src/controller/Component.mjs';
+import Controller from '../controller/Component.mjs';
 
 class MainViewController extends Controller {
     static config = {
@@ -198,8 +198,8 @@ class MainViewController extends Controller {
 Neo.setupClass(MainViewController);
 
 
-import Container from '../../../../src/container/Base.mjs';
-import TextField from '../../../../src/form/field/Text.mjs';
+import Container from '../container/Base.mjs';
+import TextField from '../form/field/Text.mjs';
 
 class MainView extends Container {
     static config = {
@@ -220,7 +220,6 @@ Neo.setupClass(MainView);
 </pre>
 
 
-
 ## Events versus binding
 
 Events and binding are similar concepts &mdash; both are a way to detect, and react to, some kind of action or change.

package/resources/data/deck/learnneo/pages/GuideViewModels.md

@@ -16,9 +16,9 @@ Since we also have Data Stores (tabular data), we chose to use the name VM to av
 ## Inline Models
 ### Direct Bindings
 <pre data-neo>
-import Button    from  '../../../../src/button/Base.mjs';
-import Container from  '../../../../src/container/Base.mjs';
-import Label     from  '../../../../src/component/Label.mjs';
+import Button    from '../button/Base.mjs';
+import Container from '../container/Base.mjs';
+import Label     from '../component/Label.mjs';
 
 class MainView extends Container {
     static config = {
@@ -64,9 +64,9 @@ We can easily bind 1:1 to specific data props using the following syntax:</br>
 
 ### Bindings with multiple data props
 <pre data-neo>
-import Button    from  '../../../../src/button/Base.mjs';
-import Container from  '../../../../src/container/Base.mjs';
-import Label     from  '../../../../src/component/Label.mjs';
+import Button    from '../button/Base.mjs';
+import Container from '../container/Base.mjs';
+import Label     from '../component/Label.mjs';
 
 class MainView extends Container {
     static config = {
@@ -131,9 +131,9 @@ data.component equals to the Button instance itself. Since the Button instance d
 
 ### Nested Inline Models
 <pre data-neo>
-import Button    from  '../../../../src/button/Base.mjs';
-import Container from  '../../../../src/container/Base.mjs';
-import Label     from  '../../../../src/component/Label.mjs';
+import Button    from '../button/Base.mjs';
+import Container from '../container/Base.mjs';
+import Label     from '../component/Label.mjs';
 
 class MainView extends Container {
     static config = {
@@ -206,9 +206,9 @@ Hint: Modify the example code (Button handler) to try it out right away!
 
 ### Nested Data Properties
 <pre data-neo>
-import Button    from  '../../../../src/button/Base.mjs';
-import Container from  '../../../../src/container/Base.mjs';
-import Label     from  '../../../../src/component/Label.mjs';
+import Button    from '../button/Base.mjs';
+import Container from '../container/Base.mjs';
+import Label     from '../component/Label.mjs';
 
 class MainView extends Container {
     static config = {
@@ -265,11 +265,11 @@ Hint: This will not override left out nested data props (lastname in this case).
 
 ### Dialog connecting to a Container
 <pre data-neo>
-import Controller from '../../../../src/controller/Component.mjs';
-import Dialog     from '../../../../src/dialog/Base.mjs';
-import Panel      from '../../../../src/container/Panel.mjs';
-import TextField  from '../../../../src/form/field/Text.mjs';
-import Viewport   from '../../../../src/container/Viewport.mjs';
+import Controller from '../controller/Component.mjs';
+import Dialog     from '../dialog/Base.mjs';
+import Panel      from '../container/Panel.mjs';
+import TextField  from '../form/field/Text.mjs';
+import Viewport   from '../container/Viewport.mjs';
 
 class EditUserDialogController extends Controller {
     static config = {
@@ -391,10 +391,10 @@ When your models contain many data props or need custom logic, you can easily mo
 
 ### Direct Bindings
 <pre data-neo>
-import Button    from  '../../../../src/button/Base.mjs';
-import Container from  '../../../../src/container/Base.mjs';
-import Label     from  '../../../../src/component/Label.mjs';
-import ViewModel from  '../../../../src/model/Component.mjs';
+import Button    from '../button/Base.mjs';
+import Container from '../container/Base.mjs';
+import Label     from '../component/Label.mjs';
+import ViewModel from '../model/Component.mjs';
 
 class MainViewModel extends ViewModel {
     static config = {

package/resources/data/deck/learnneo/pages/References.md

@@ -11,9 +11,9 @@ Here's an example with one button. Clicking on the button will disable it.
 As you can see, the handler uses the component reference pass in via `data.component`.
 
 <pre data-neo>
-import Button     from '../../../../src/button/Base.mjs';
-import Container  from '../../../../src/container/Base.mjs';
-import Controller from '../../../../src/controller/Component.mjs';
+import Button     from '../button/Base.mjs';
+import Container  from '../container/Base.mjs';
+import Controller from '../controller/Component.mjs';
 
 class MainViewController extends Controller {
     static config = {
@@ -48,9 +48,9 @@ you tag the component you need with a `reference` config, then use `getReference
 the controller.
 
 <pre data-neo>
-import Button     from '../../../../src/button/Base.mjs';
-import Container  from '../../../../src/container/Base.mjs';
-import Controller from '../../../../src/controller/Component.mjs';
+import Button     from '../button/Base.mjs';
+import Container  from '../container/Base.mjs';
+import Controller from '../controller/Component.mjs';
 
 class MainViewController extends Controller {
     static config = {
@@ -103,8 +103,8 @@ The following example gets a reference to the _Learn_ button at the top of this
 Again &mdash; that use of `Neo.findFirst()` might be handy when debugging, but it should never be used in app logic.
 
 <pre data-neo>
-import Button    from '../../../../src/button/Base.mjs';
-import Container from '../../../../src/container/Base.mjs';
+import Button    from '../button/Base.mjs';
+import Container from '../container/Base.mjs';
 
 class MainView extends Container {
     static config = {