diff --git a/BoxLayout.js b/BoxLayout.js
index 224cadb..5cdf829 100644
--- a/BoxLayout.js
+++ b/BoxLayout.js
@@ -7,6 +7,7 @@ customElements.define(
         }
 
         render() {
+            // prettier-ignore
             this.shadowRoot.innerHTML = `
                 <style>
                     :host {
@@ -18,11 +19,12 @@ customElements.define(
                     }
 
                     ::slotted(*) {
-                        color: inherit;
+                        background-color: inherit;
                     }
                 </style>
                 <slot></slot>
             `
+            console.log('box:', this.shadowRoot.innerHTML)
         }
 
         connectedCallback() {
@@ -36,7 +38,7 @@ customElements.define(
             return ['padding', 'borderWidth']
         }
         get padding() {
-            return this.getAttribute('padding') || '1rem'
+            return this.getAttribute('padding') || 'var(--s1)'
         }
         set padding(val) {
             return this.setAttribute('padding', val)
@@ -44,7 +46,6 @@ customElements.define(
         get borderWidth() {
             return this.getAttribute('borderWidth') || 'var(--border-thin)'
         }
-
         set borderWidth(val) {
             return this.setAttribute('borderWidth', val)
         }
diff --git a/CenterLayout.js b/CenterLayout.js
index d80fad3..de7211d 100644
--- a/CenterLayout.js
+++ b/CenterLayout.js
@@ -7,38 +7,35 @@ customElements.define(
         }
 
         render() {
+            // prettier-ignore
             this.shadowRoot.innerHTML = `
                 <style>
                     :host {
-                        display: block;
+                        ${ this.intrinsic ? `
+                        display: flex;
+                        flex-direction: column;
+                        align-items: center;`  : `display: block;`
+                        }
+
                         box-sizing: content-box;
                         margin-inline: auto;
                         max-inline-size: var(--measure);
-                    }
 
-                    ::slotted(*) {
                         max-width: ${this.max};
-                        ${
-                            this.gutters
-                                ? `
+
+                        ${ this.gutters ? `
                         padding-inline-start: ${this.gutters};
-                        padding-inline-end: ${this.gutters};`
-                                : ''
+                        padding-inline-end: ${this.gutters};` : ''
                         }
+
                         ${this.andText ? `text-align: center;` : ''}
-                        ${
-                            this.intrinsic
-                                ? `
-                        display: flex;
-                        flex-direction: column;
-                        align-items: center;`
-                                : ''
-                        }
                     }
+
+
                 </style>
                 <slot></slot>
             `
-            console.log(this.shadowRoot.innerHTML)
+            console.log('center', this.shadowRoot.innerHTML)
         }
 
         connectedCallback() {
@@ -85,3 +82,26 @@ customElements.define(
         }
     }
 )
+
+/*
+
+                    ::slotted(*) {
+                        max-width: ${this.max};
+                        ${
+                            this.gutters
+                                ? `
+                        padding-inline-start: ${this.gutters};
+                        padding-inline-end: ${this.gutters};`
+                                : ''
+                        }
+                        ${this.andText ? `text-align: center;` : ''}
+                        ${
+                            this.intrinsic
+                                ? `
+                        display: flex;
+                        flex-direction: column;
+                        align-items: center;`
+                                : ''
+                        }
+
+*/
diff --git a/ClusterLayout.js b/ClusterLayout.js
new file mode 100644
index 0000000..f3dd834
--- /dev/null
+++ b/ClusterLayout.js
@@ -0,0 +1,56 @@
+customElements.define(
+    'cluster-layout',
+    class extends HTMLElement {
+        constructor() {
+            super()
+            this.attachShadow({ mode: 'open' })
+        }
+
+        render() {
+            // prettier-ignore
+            this.shadowRoot.innerHTML = `
+                <style>
+                    :host {
+                        display: flex;
+                        flex-wrap: wrap;
+
+                        justify-content: ${this.justify};
+                        align-items: ${this.align};
+                        gap: ${this.space};
+                    }
+                </style>
+                <slot></slot>
+            `
+            console.log('box:', this.shadowRoot.innerHTML)
+        }
+
+        connectedCallback() {
+            this.render()
+        }
+        attributeChangedCallback() {
+            this.render()
+        }
+
+        static get observedAttributes() {
+            return ['justify', 'align', 'space']
+        }
+        get justify() {
+            return this.getAttribute('justify') || 'flex-start'
+        }
+        set justify(val) {
+            return this.setAttribute('justify', val)
+        }
+        get align() {
+            return this.getAttribute('align') || 'flex-start'
+        }
+        set align(val) {
+            return this.setAttribute('align', val)
+        }
+        get space() {
+            return this.getAttribute('space') || 'var(--s1)'
+        }
+        set space(val) {
+            return this.setAttribute('space', val)
+        }
+    }
+)
diff --git a/CoverLayout.js b/CoverLayout.js
new file mode 100644
index 0000000..303c664
--- /dev/null
+++ b/CoverLayout.js
@@ -0,0 +1,153 @@
+customElements.define(
+    'cover-layout',
+    class extends HTMLElement {
+        constructor() {
+            super()
+            this.attachShadow({ mode: 'open' })
+        }
+
+        render() {
+            // prettier-ignore
+            this.shadowRoot.innerHTML = `
+                <style>
+                    :host {
+                        display: flex;
+                        flex-direction: column;
+                        min-block-size: ${this.minHeight};
+
+                        min-height: ${this.minHeight};
+                        padding: ${this.noPad ? '0' : this.space };
+                    }
+
+                    ::slotted(:firstChild) {
+                        margin-block-start: 0;
+                    }
+
+                    ::slotted(:lastChild) {
+                        margin-block-end: 0;
+                    }
+
+                    ::slotted(:nth-Child(2)) {
+                        margin-block: auto;
+                    }
+
+                </style>
+                <slot></slot>
+            `
+            console.log('cover:', this.shadowRoot.innerHTML)
+            console.log('children:', this.childElementCount)
+        }
+
+        connectedCallback() {
+            this.render()
+        }
+        attributeChangedCallback() {
+            this.render()
+        }
+
+        static get observedAttributes() {
+            return ['centered', 'space', 'minHeight', 'noPad']
+        }
+        get centered() {
+            return this.getAttribute('centered') || 'h1'
+        }
+        set centered(val) {
+            return this.setAttribute('centered', val)
+        }
+        get space() {
+            return this.getAttribute('space') || 'var(--s1)'
+        }
+        set space(val) {
+            return this.setAttribute('space', val)
+        }
+        get minHeight() {
+            return this.getAttribute('minHeight') || '100vh'
+        }
+        set minHeight(val) {
+            return this.setAttribute('minHeight', val)
+        }
+        get noPad() {
+            return this.hasAttribute('noPad')
+        }
+        set noPad(val) {
+            if (val) {
+                return this.setAttribute('noPad', '')
+            } else {
+                return this.removeAttribute('noPad')
+            }
+        }
+    }
+)
+
+/*
+
+                    ::slotted(*) {
+                        margin-block: ${this.space};
+                    }
+
+
+cover-l {
+    display: flex;
+    flex-direction: column;
+    min-block-size: 100vh;
+    padding: var(--s1);
+}
+
+        styleEl.innerHTML = `
+          [data-i="${this.i}"] {
+            min-height: ${this.minHeight};
+            padding: ${!this.noPad ? this.space : '0'};
+          }
+
+          [data-i="${this.i}"] > * {
+            margin-block: ${this.space};
+          }
+
+          [data-i="${this.i}"] > :first-child:not(${this.centered}) {
+            margin-block-start: 0;
+          }
+
+          [data-i="${this.i}"] > :last-child:not(${this.centered}) {
+            margin-block-end: 0;
+          }
+
+          [data-i="${this.i}"] > ${this.centered} {
+            margin-block: auto;
+          }
+          `
+
+
+
+                <style>
+                    :host {
+                        display: flex;
+                        flex-direction: column;
+                        min-block-size: 100vh;
+
+                        min-height: ${this.minHeight};
+                        padding: ${!this.noPad ? this.space : '0'};
+                    }
+
+                    ::slotted(*) {
+                        margin-block: ${this.space};
+                    }
+
+                    ::slotted(:firstChild:not(${this.centered}) ) {
+                        margin-block-start: 0;
+                    }
+
+                    ::slotted(:lastChild:not(${this.centered}) ) {
+                        margin-block-end: 0;
+                    }
+
+                    ::slotted((${this.centered}) ) {
+                        margin-block-end: auto;
+                    }
+
+                </style>
+                <slot></slot>
+            `
+
+
+
+*/
diff --git a/FrameLayout.js b/FrameLayout.js
new file mode 100644
index 0000000..d537bcb
--- /dev/null
+++ b/FrameLayout.js
@@ -0,0 +1,56 @@
+customElements.define(
+    'frame-layout',
+    class extends HTMLElement {
+        constructor() {
+            super()
+            this.attachShadow({ mode: 'open' })
+        }
+
+        render() {
+            if (this.children.length !== 1) {
+                console.warn('<frame-layout> can have just one child element')
+            }
+
+            let ratio = this.ratio.split(':')
+            // prettier-ignore
+            this.shadowRoot.innerHTML = `
+                <style>
+                    :host {
+                        aspect-ratio: ${ratio[0]} / ${ratio[1]};
+                        overflow: hidden;
+                        display: flex;
+                        justify-content: center;
+                        align-items: center;
+
+                    }
+                    ::slotted(img),
+                    ::slotted(video){
+                        inline-size: 100%;
+                        block-size: 100%;
+                        object-fit: cover;
+                    }
+
+                </style>
+                <slot></slot>
+            `
+            console.log('frame:', this.shadowRoot.innerHTML)
+        }
+
+        connectedCallback() {
+            this.render()
+        }
+        attributeChangedCallback() {
+            this.render()
+        }
+
+        static get observedAttributes() {
+            return ['ratio']
+        }
+        get ratio() {
+            return this.getAttribute('ratio') || '16:9'
+        }
+        set ratio(val) {
+            return this.setAttribute('ratio', val)
+        }
+    }
+)
diff --git a/GridLayout.js b/GridLayout.js
new file mode 100644
index 0000000..b8790c9
--- /dev/null
+++ b/GridLayout.js
@@ -0,0 +1,72 @@
+customElements.define(
+    'grid-layout',
+    class extends HTMLElement {
+        constructor() {
+            super()
+            this.attachShadow({ mode: 'open' })
+        }
+
+        render() {
+            // prettier-ignore
+            this.shadowRoot.innerHTML = `
+                <style>
+                    :host {
+                        display: grid;
+                        align-content: start;
+
+                        grid-gap: ${this.space};
+                        grid-template-columns: repeat(auto-fill, minmax(min(${this.min}, 100%), 1fr));
+                    }
+                </style>
+                <slot></slot>
+            `
+            console.log('grid:', this.shadowRoot.innerHTML)
+        }
+
+        connectedCallback() {
+            this.render()
+        }
+        attributeChangedCallback() {
+            this.render()
+        }
+
+        static get observedAttributes() {
+            return ['min', 'space']
+        }
+        get min() {
+            return this.getAttribute('min') || '250px'
+        }
+        set min(val) {
+            return this.setAttribute('min', val)
+        }
+        get space() {
+            return this.getAttribute('space') || 'var(--s1)'
+        }
+        set space(val) {
+            return this.setAttribute('space', val)
+        }
+    }
+)
+
+/*
+
+grid-l {
+    display: grid;
+    grid-gap: var(--s1);
+    align-content: start;
+    grid-template-columns: 100%;
+}
+
+
+                        grid-template-columns: 100%;
+
+                @supports (width: min(${this.min}, 100%)) {
+                    :host {
+                        grid-template-columns: repeat(auto-fill, minmax(min(${this.min}, 100%), 1fr));
+                    }
+                }
+
+
+
+
+*/
diff --git a/ReelLayout.js b/ReelLayout.js
new file mode 100644
index 0000000..e954c35
--- /dev/null
+++ b/ReelLayout.js
@@ -0,0 +1,266 @@
+customElements.define(
+    'reel-layout',
+    class extends HTMLElement {
+        constructor() {
+            super()
+            this.attachShadow({ mode: 'open' })
+        }
+
+        render() {
+            // prettier-ignore
+            this.shadowRoot.innerHTML = `
+                <style>
+                    :host {
+                        display: flex;
+                        overflow: auto scroll;
+                        scrollbar-color: var(--color-light) var(--color-dark);
+
+                        block-size: auto;
+
+                        height: ${this.height};
+
+                    }
+
+                    ::slotted(*) {
+                        flex: 0 0 ${this.itemWidth};
+                    }
+
+                    ::slotted(img) {
+                        /* flex: 0 0 var(--item-width); */
+                        height: 100%;
+                        flex-basis: auto;
+                        width: auto;
+                    }
+
+                    ::slotted(:not(:first-child)) {
+                        margin-inline-start: ${this.space};
+                        background-color: red;
+                    }
+                </style>
+                <slot></slot>
+            `
+            // ::slotted(overflowing) {
+            //     block-size: 1rem;
+            // }
+
+            console.log('stack:', this.shadowRoot.innerHTML)
+        }
+
+        connectedCallback() {
+            this.render()
+            // this.toggleOverflowClass is undefined
+
+            // if ('ResizeObserver' in window) {
+            //     new ResizeObserver(entries => {
+            //         this.toggleOverflowClass(entries[0].target)
+            //     }).observe(this)
+            // }
+
+            // if ('MutationObserver' in window) {
+            //     new MutationObserver(entries => {
+            //         this.toggleOverflowClass(entries[0].target)
+            //     }).observe(this, { childList: true })
+            // }
+        }
+        attributeChangedCallback() {
+            this.render()
+        }
+
+        static get observedAttributes() {
+            return ['itemWidth', 'height', 'space', 'noBar']
+        }
+        get itemWidth() {
+            return this.getAttribute('itemWidth') || 'auto'
+        }
+        set itemWidth(val) {
+            return this.setAttribute('itemWidth', val)
+        }
+        get height() {
+            return this.getAttribute('height') || 'auto'
+        }
+        set height(val) {
+            return this.setAttribute('height', val)
+        }
+        get space() {
+            return this.getAttribute('space') || 'var(--s0)'
+        }
+        set space(val) {
+            return this.setAttribute('space', val)
+        }
+        get noBar() {
+            return this.hasAttribute('noBar')
+        }
+        set noBar(val) {
+            if (val) {
+                this.setAttribute('noBar', '')
+            } else {
+                this.removeAttribute('noBar')
+            }
+        }
+    }
+)
+
+// overflow-x: auto;
+// overflow-y: scroll;
+
+// ::slotted(:nth-child(n + 2) {
+
+/*
+                    :host::-webkit-scrollbar {
+                        block-size: 1rem;
+                    };
+                    :host::-webkit-scrollbar-track {
+                        background-color: red;
+                    };
+                    :host::-webkit-scrollbar-thumb {
+                        background-color: var(--color-dark);
+                        background-image: linear-gradient(var(--color-dark) 0,
+                                var(--color-dark) 0.25rem,
+                                var(--color-light) 0.25rem,
+                                var(--color-light) 0.75rem,
+                                var(--color-dark) 0.75rem);
+                    };
+*/
+
+/*
+
+                        ::-webkit-scrollbar {
+                            block-size: 1rem;
+                        };
+                        ::-webkit-scrollbar-track {
+                            background-color: red;
+                        };
+                        ::-webkit-scrollbar-thumb {
+                            background-color: var(--color-dark);
+                            background-image: linear-gradient(var(--color-dark) 0,
+                                    var(--color-dark) 0.25rem,
+                                    var(--color-light) 0.25rem,
+                                    var(--color-light) 0.75rem,
+                                    var(--color-dark) 0.75rem);
+                        };
+
+
+                        :host(::-webkit-scrollboar) {
+                            block-size: 1rem;
+                        };
+                        :host(::-webkit-scrollbar-track) {
+                            background-color: red;
+                        };
+                        :host(::-webkit-scrollbar-thumb) {
+                            background-color: var(--color-dark);
+                            background-image: linear-gradient(var(--color-dark) 0,
+                                    var(--color-dark) 0.25rem,
+                                    var(--color-light) 0.25rem,
+                                    var(--color-light) 0.75rem,
+                                    var(--color-dark) 0.75rem);
+                        };
+
+
+
+
+
+        reel-layout::-webkit-scrollbar {
+            block-size: 1rem;
+        }
+
+        reel-layout::-webkit-scrollbar-track {
+            background-color: var(--color-dark);
+        }
+
+        reel-layout::-webkit-scrollbar-thumb {
+            background-color: var(--color-dark);
+            background-image: linear-gradient(var(--color-dark) 0,
+                    var(--color-dark) 0.25rem,
+                    var(--color-light) 0.25rem,
+                    var(--color-light) 0.75rem,
+                    var(--color-dark) 0.75rem);
+        }
+*/
+
+/*
+
+reel-l {
+    display: flex;
+    overflow-x: auto;
+    overflow-y: hidden;
+    scrollbar-color: var(--color-light) var(--color-dark);
+}
+reel-l > * {
+    flex: 0 0 var(--item-width);
+}
+reel-l > img {
+    block-size: 100%;
+    flex-basis: auto;
+    inline-size: auto;
+}
+reel-l::-webkit-scrollbar {
+    block-size: 1rem;
+}
+reel-l::-webkit-scrollbar-track {
+    background-color: var(--color-dark);
+}
+reel-l::-webkit-scrollbar-thumb {
+    background-color: var(--color-dark);
+    background-image: linear-gradient(
+        var(--color-dark) 0,
+        var(--color-dark) 0.25rem,
+        var(--color-light) 0.25rem,
+        var(--color-light) 0.75rem,
+        var(--color-dark) 0.75rem
+    );
+}
+
+                        ::-webkit-scrollbar {
+                            block-size: 1rem;
+                        };
+                        ::-webkit-scrollbar-track {
+                            background-color: var(--color-dark);
+                        };
+                        ::-webkit-scrollbar-thumb {
+                            background-color: var(--color-dark);
+                            background-image: linear-gradient(var(--color-dark) 0,
+                                    var(--color-dark) 0.25rem,
+                                    var(--color-light) 0.25rem,
+                                    var(--color-light) 0.75rem,
+                                    var(--color-dark) 0.75rem);
+                        };
+
+
+
+
+                    ::slotted(::-webkit-scrollbar) {
+                        block-size: 1rem;
+                    }
+                    ::slotted(::-webkit-scrollbar-track) {
+                        background-color: var(--color-dark);
+                    }
+                    ::slotted::-webkit-scrollbar-thumb {
+                        background-color: var(--color-dark);
+                        background-image: linear-gradient(
+                            var(--color-dark) 0,
+                            var(--color-dark) 0.25rem,
+                            var(--color-light) 0.25rem,
+                            var(--color-light) 0.75rem,
+                            var(--color-dark) 0.75rem
+                        );
+                    }
+
+
+
+                    ::slotted(:last-child) {
+                        margin-bottom: 0;
+                    }
+
+                    ::slotted(:not(:first-child)) {
+                        margin-block-start: ${this.space};
+                    }
+
+                    ::slotted(:only-child) {
+                        block-size: 100%;
+                    }
+
+                    ::slotted(:nth-child(${this.splitAfter})) {
+                        margin-block-end: auto;
+                    }
+
+*/
diff --git a/SidebarLayout.js b/SidebarLayout.js
new file mode 100644
index 0000000..e9b2a90
--- /dev/null
+++ b/SidebarLayout.js
@@ -0,0 +1,76 @@
+customElements.define(
+    'sidebar-layout',
+    class extends HTMLElement {
+        constructor() {
+            super()
+            this.attachShadow({ mode: 'open' })
+        }
+
+        render() {
+            // prettier-ignore
+            this.shadowRoot.innerHTML = `
+                <style>
+                    :host {
+                        display: flex;
+                        flex-wrap: wrap;
+                        gap: ${this.space};
+                        ${this.noStretch ? 'align-items: flex-start;' : ''}
+                    }
+
+                    ::slotted(*) {
+                        flex-grow: 1;
+                        ${this.sideWidth ? `flex-basis: ${this.sideWidth};` : ''}
+                    }
+
+                    ::slotted(
+                        ${this.side !== 'left' ? `*:first-child` : `*:last-child`}
+                    ) {
+                        flex-basis: 0;
+                        flex-grow: 999;
+                        min-inline-size: ${this.contentMin};
+                    }
+                </style>
+                <slot></slot>
+            `
+            console.log('stack:', this.shadowRoot.innerHTML)
+        }
+
+        connectedCallback() {
+            this.render()
+        }
+        attributeChangedCallback() {
+            this.render()
+        }
+
+        static get observedAttributes() {
+            return ['side', 'sideWidth', 'contentMin', 'space', 'noStretch']
+        }
+        get side() {
+            return this.getAttribute('side') || 'left'
+        }
+        set side(val) {
+            return this.setAttribute('side', val)
+        }
+        get sideWidth() {
+            return this.getAttribute('sideWidth') || null
+        }
+        set sideWidth(val) {
+            return this.setAttribute('sideWidth', val)
+        }
+        get contentMin() {
+            return this.getAttribute('contentMin') || '50%'
+        }
+        set contentMin(val) {
+            return this.setAttribute('contentMin', val)
+        }
+        get space() {
+            return this.getAttribute('space') || 'var(--s1)'
+        }
+        set space(val) {
+            return this.setAttribute('space', val)
+        }
+        get noStretch() {
+            return this.hasAttribute('noStretch')
+        }
+    }
+)
diff --git a/StackLayout.js b/StackLayout.js
index 189df45..7ed2180 100644
--- a/StackLayout.js
+++ b/StackLayout.js
@@ -7,29 +7,34 @@ customElements.define(
         }
 
         render() {
+            // prettier-ignore
             this.shadowRoot.innerHTML = `
                 <style>
                     :host {
                         display: flex;
                         flex-direction: column;
-                        justify-content: flex-start;
+                        justify-content: space-between;
                     }
 
                     ::slotted(*) {
-                        margin-block-start: 0;
+                        margin-block: 0;
                     }
 
                     ::slotted(:not(:first-child)) {
                         margin-block-start: ${this.space};
                     }
 
+                    ::slotted(:only-child) {
+                        block-size: 100%;
+                    }
+
                     ::slotted(:nth-child(${this.splitAfter})) {
                         margin-block-end: auto;
-                        /* fix last child to have no bottom margin */
                     }
                 </style>
                 <slot></slot>
             `
+            console.log('stack:', this.shadowRoot.innerHTML)
         }
 
         connectedCallback() {
@@ -40,20 +45,14 @@ customElements.define(
         }
 
         static get observedAttributes() {
-            return ['space', 'recursive', 'splitAfter']
+            return ['space', 'splitAfter']
         }
         get space() {
-            return this.getAttribute('space') || '1rem'
+            return this.getAttribute('space') || 'var(--s1);'
         }
         set space(val) {
             return this.setAttribute('space', val)
         }
-        get recursive() {
-            return this.hasAttribute('recursive')
-        }
-        set recursive(val) {
-            return this.setAttribute(val ? 'recursive' : '')
-        }
         get splitAfter() {
             return this.getAttribute('splitAfter') || 1000
         }
@@ -62,3 +61,33 @@ customElements.define(
         }
     }
 )
+
+/*
+
+stack-l {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+}
+stack-l > * + * {
+    margin-block-start: var(--s1);
+}
+
+          [data-id="${id}"] ${this.recursive ? '' : ' > '} * + * {
+            margin-block-start: ${this.space};
+          }
+
+          ${
+              this.splitAfter
+                  ? `
+            [data-id="${id}"] :only-child {
+              block-size: 100%;
+            }
+
+            [data-id="${id}"] > :nth-child(${this.splitAfter}) {
+              margin-block-end: auto;
+            }`
+                  : ''
+          }
+
+*/
diff --git a/SwitcherLayout.js b/SwitcherLayout.js
new file mode 100644
index 0000000..3be197e
--- /dev/null
+++ b/SwitcherLayout.js
@@ -0,0 +1,83 @@
+customElements.define(
+    'switcher-layout',
+    class extends HTMLElement {
+        constructor() {
+            super()
+            this.attachShadow({ mode: 'open' })
+        }
+
+        render() {
+            // prettier-ignore
+            this.shadowRoot.innerHTML = `
+                <style>
+                    :host {
+                        display: flex;
+                        flex-wrap: wrap;
+
+                        gap: ${this.space};
+                    }
+
+                    ::slotted(*) {
+                        flex-basis: calc(${this.threshold} - 100%) * 999);
+                        flex-grow: 1;
+                    }
+
+                    ${ this.switchToVertical ? `
+                    ::slotted(*) {
+                          flex-basis: 100%;
+                    }` : ''
+                    }
+                </style>
+                <slot></slot>
+            `
+            console.log('switcher:', this.shadowRoot.innerHTML)
+        }
+
+        connectedCallback() {
+            this.render()
+        }
+        attributeChangedCallback() {
+            this.render()
+        }
+
+        get switchToVertical() {
+            const limit = parseInt(this.limit)
+            const children = this.childElementCount
+            const result = limit + 1 < children
+            console.log('switch, limit, children', result, limit, children)
+            return result
+        }
+
+        static get observedAttributes() {
+            return ['threshold', 'space', 'limit']
+        }
+        get threshold() {
+            return this.getAttribute('threshold') || 'var(--measure)'
+        }
+        set threshold(val) {
+            return this.setAttribute('threshold', val)
+        }
+        get space() {
+            return this.getAttribute('space') || 'var(--s1)'
+        }
+        set space(val) {
+            return this.setAttribute('space', val)
+        }
+        get limit() {
+            return this.getAttribute('limit') || '4'
+        }
+        set limit(val) {
+            return this.setAttribute('limit', val)
+        }
+    }
+)
+
+//   flex-basis: calc(( 30rem - 100%) * 999);
+/*
+                    ${ this.switchToVertical ? `
+                    ::slotted(:nth-child(n + 2) {
+                          flex-basis: 100%;
+                    }` : ''
+                    }
+
+*/
diff --git a/box.html b/box.html
index 92076e2..c0183f1 100644
--- a/box.html
+++ b/box.html
@@ -26,26 +26,30 @@
 
 <body>
 
-    <stack-layout space="1rem">
-        <h2> We present boxes!</h2>
 
+    <h3>A stack wrapping sever box demos</h3>
+    <stack-layout space="1rem">
+        <h3>Two boxes nested within another</h3>
         <box-layout>
             <box-layout>head</box-layout>
             <box-layout>body</box-layout>
         </box-layout>
 
-
-        <box-layout padding="0">
-            <box-layout borderWidth="1px">head</box-layout>
-            <box-layout borderWidth="1px">body</box-layout>
+        <h3>Two boxes nested in a stack within another box</h3>
+        <box-layout>
+            <stack-layout>
+                <box-layout>head</box-layout>
+                <box-layout>body</box-layout>
+            </stack-layout>
         </box-layout>
 
+        <h3>Two boxes w/ no border nested in a another 0 padding</h3>
         <box-layout padding="0">
-            <box-layout borderWidth="0" invert="true">head</box-layout>
+            <box-layout borderWidth="0">head</box-layout>
             <box-layout borderWidth="0">body</box-layout>
         </box-layout>
 
-
+        <h3>The above with styling to create a card</h3>
         <box-layout padding="0">
             <box-layout borderWidth="0" class="head width text-align:center">Head</box-layout>
             <box-layout borderWidth="0" class="width">
diff --git a/center.html b/center.html
index ece06b5..4610ec5 100644
--- a/center.html
+++ b/center.html
@@ -14,6 +14,10 @@
         center-layout {
             border: 4px solid green;
         }
+
+        box-layout {
+            border: 4px solid gray;
+        }
     </style>
 
 </head>
@@ -33,14 +37,17 @@ <h3>Simplest layout: box > center > stack </h3>
 
     <h3>Complex boxes layout: center > stack > boxes</h3>
     <center-layout max="40ch">
-        <!-- stacks handle vertical recursion nicely -->
+        <!-- stacks handle vertical recursion nicely but alas, recursive fails-->
         <stack-layout recursive="true">
             <box-layout></box-layout>
             <box-layout></box-layout>
             <box-layout>
-                <!-- boxes nest nicely  -->
-                <box-layout></box-layout>
-                <box-layout></box-layout>
+                <stack-layout>
+                    <!-- boxes nest nicely  -->
+                    <box-layout></box-layout>
+                    <box-layout></box-layout>
+                </stack-layout>
+
             </box-layout>
             <box-layout></box-layout>
         </stack-layout>
diff --git a/cluster.html b/cluster.html
new file mode 100644
index 0000000..66472e4
--- /dev/null
+++ b/cluster.html
@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Cluster</title>
+    <link rel="stylesheet" type="text/css" href="./root.css">
+    <script type="module" src="./layouts.js"></script>
+
+    <style>
+        p {
+            padding: 2px;
+        }
+    </style>
+</head>
+
+<body>
+
+    <h3>stack wrapper</h3>
+
+    <stack-layout space="1ch">
+        <h3>cluster > 4 p's</h3>
+        <cluster-layout>
+            <p>Item</p>
+            <p>Item</p>
+            <p>Item</p>
+            <p>Item</p>
+        </cluster-layout>
+
+        <h3>cluster > 6 box's</h3>
+        <cluster-layout>
+            <box-layout padding="0.5rem">One</box-layout>
+            <box-layout padding="0.5rem">Two</box-layout>
+            <box-layout padding="0.5rem">Three</box-layout>
+            <box-layout padding="0.5rem">One</box-layout>
+            <box-layout padding="0.5rem">Two</box-layout>
+            <box-layout padding="0.5rem">Three</box-layout>
+            <box-layout padding="0.5rem">One</box-layout>
+            <box-layout padding="0.5rem">Two</box-layout>
+            <box-layout padding="0.5rem">Three</box-layout>
+        </cluster-layout>
+
+        <h3>box > cluster > box & cluster< of 6 a's /h3>
+                <box-layout padding="1ch">
+                    <cluster-layout justify="space-between" align="center">
+                        <box-layout padding="1ch">My Website</box-layout>
+                        <cluster-layout justify="flex-start">
+                            <a href="#">Item</a>
+                            <a href="#">Item</a>
+                            <a href="#">Item</a>
+                            <a href="#">Item</a>
+                            <a href="#">Item</a>
+                            <a href="#">Item</a>
+                        </cluster-layout>
+                    </cluster-layout>
+                </box-layout>
+
+    </stack-layout>
+
+</body>
+
+</html>
+
+
+
+
+
+<!--
+
+    <box-layout>
+        <center-layout>
+            <stack-layout>
+            <h2>My page</h2>
+            <p>
+                Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident illo qui temporibus, accusamus nostrum perspiciatis architecto nihil quisquam quaerat illum, rem assumenda eaque doloribus quod fugit quam modi non unde.
+            </p>
+            </stack-layout>
+        <center-layout>
+    </box-layout>
+
+    <cluster-layout>
+        <div>
+            <p>Item</p>
+        </div>
+        <div>
+            <p>Item</p>
+        </div>
+        <div>
+            <p>Item</p>
+        </div>
+        <div>
+            <p>Item</p>
+        </div>
+    </cluster-layout>
+-->
+
+<!-- max-inline-size: min-content; -->
+<!-- <box-layout> -->
+<!-- <cluster-layout> -->
+<!-- <box-layout padding="var(--s0)">One</box-layout> -->
+<!-- </cluster-layout> -->
\ No newline at end of file
diff --git a/cover.html b/cover.html
new file mode 100644
index 0000000..450330d
--- /dev/null
+++ b/cover.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+
+    <title>Cover</title>
+    <link rel="stylesheet" type="text/css" href="./root.css">
+    <script type="module" src="./layouts.js"></script>
+
+    <style>
+        cover-layout {
+            border: 2px solid red;
+        }
+
+        cluster-layout {
+            border: 2px solid black;
+        }
+
+        h1 {
+            border: 2px solid green;
+        }
+
+        div p {
+            border: 2px solid blue;
+        }
+    </style>
+
+</head>
+
+<body>
+
+    <cover-layout>
+        <cluster-layout justify="space-between" align="center">
+            <box-layout>X</box-layout>
+            <cluster-layout>
+                <div><a href="#">About</a></div>
+                <div><a href="#">Blog</a></div>
+                <div><a href="#">Shop</a></div>
+                <div><a href="#">News</a></div>
+                <div><a href="#">Contact</a></div>
+            </cluster-layout>
+        </cluster-layout>
+
+        <h1 class="text-align:center">Welcome To My Site, Visitor!</h1>
+
+        <div class="font-size:smallish text-align:center">
+            <p>What I do. <span>⬇</span></p>
+        </div>
+    </cover-layout>
+
+</body>
+
+</html>
+
+
+
+
+<!-- <style>
+        /* box-layout {
+                max-inline-size: min-content;
+            } */
+    </style> -->
+
+
+<!-- <center-layout andText="true"> -->
+<!-- <h1>Welcome To My Site, Visitor!</h1> -->
+<!-- </center-layout>
+
+
+
+-->
\ No newline at end of file
diff --git a/frame.html b/frame.html
new file mode 100644
index 0000000..a3fe967
--- /dev/null
+++ b/frame.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+
+    <title>Frame</title>
+    <link rel="stylesheet" type="text/css" href="./root.css">
+    <script type="module" src="./layouts.js"></script>
+
+    <style>
+        frame-layout {
+            border: 4px solid red;
+        }
+    </style>
+
+</head>
+
+<body>
+
+    <h3>Simple frame</h3>
+    <frame-layout ratio="4:3">
+        <img src="https://picsum.photos/640/480?random=1" alt="description of the image here" />
+    </frame-layout>
+
+    <h3>Boxed frame</h3>
+
+    <grid-layout space="var(--s1)">
+        <box-layout padding="0">
+            <frame-layout ratio="16:9">
+                <img src="https://picsum.photos/640/480?random=2" alt="A random image from unsplash">
+            </frame-layout>
+            <box-layout borderwidth="0">
+                <stack-layout>
+                    <h4>Luctus At In</h4>
+                    <div>
+                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla sapiente a, ratione impedit debitis cumque itaque. Minima pariatur quaerat possimus illo quos in numquam, ad distinctio, ea tempore sunt adipisci!
+                    </div>
+                </stack-layout>
+            </box-layout>
+        </box-layout>
+
+        <box-layout padding="0">
+            <frame-layout ratio="16:9">
+                <img src="https://picsum.photos/640/480?random=3" alt="Another random image from unsplash">
+            </frame-layout>
+            <box-layout borderwidth="0">
+                <stack-layout>
+                    <h4>Cubilia Iaculis Ante</h4>
+                    <div>
+                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa dignissimos delectus eaque laborum quod deleniti, illum dolores fugiat. At quia dolores harum ratione praesentium delectus alias sint unde tenetur voluptatibus!
+                    </div>
+                </stack-layout>
+            </box-layout>
+        </box-layout>
+
+        <box-layout padding="0">
+            <frame-layout ratio="16:9">
+                <img src="https://picsum.photos/640/480?random=4" alt="Another random image from unsplash">
+            </frame-layout>
+            <box-layout borderwidth="0">
+                <stack-layout>
+                    <h4>Nullam Ac Fusce</h4>
+                    <div>
+                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Non accusantium cupiditate reprehenderit ipsam ullam, aliquid ipsa earum, optio, aut est quae esse vel blanditiis! Voluptate voluptatum laborum deleniti quia dolorum.
+                    </div>
+                </stack-layout>
+            </box-layout>
+        </box-layout>
+    </grid-layout>
+
+
+</body>
+
+</html>
+
+
+
+
+<!--
+
+
+ -->
\ No newline at end of file
diff --git a/grid.html b/grid.html
new file mode 100644
index 0000000..173a92d
--- /dev/null
+++ b/grid.html
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Grid</title>
+    <link rel="stylesheet" type="text/css" href="./root.css">
+    <script type="module" src="./layouts.js"></script>
+
+    <style>
+        /* box-layout {
+            max-inline-size: min-content;
+        } */
+        grid-layout {
+            /* min-inline-size: min-content; */
+            max-inline-size: 80ch;
+        }
+    </style>
+</head>
+
+<body>
+
+    <!-- <grid-layout min="calc(var(--measure) / 4)" space="2ch"> -->
+    <!-- <grid-layout min="calc( (var(--measure) - 3ch ) / 3)" space="2ch"> -->
+    <grid-layout min="calc( (var(--measure) / 3) )">
+        <box-layout>
+            <stack-layout>
+                <!-- card content -->
+                <box-layout class="text-align:center">
+                    <h2>One</h2>
+                </box-layout>
+                <h4>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h4>
+                <p>Ipsam, itaque pariatur perferendis provident blanditiis veniam molestiae natus optio doloribus id inventore adipisci at laborum debitis neque reiciendis est illum repudiandae!</p>
+            </stack-layout>
+        </box-layout>
+        <box-layout>
+            <stack-layout>
+                <box-layout class="text-align:center">
+                    <h2>Two</h2>
+                </box-layout>
+                <h4>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h4>
+                <p>Ipsam, itaque pariatur perferendis provident blanditiis veniam molestiae natus optio doloribus id inventore adipisci at laborum debitis neque reiciendis est illum repudiandae!</p>
+            </stack-layout>
+        </box-layout>
+        <box-layout>
+            <stack-layout>
+                <box-layout class="text-align:center">
+                    <h2>Three</h2>
+                </box-layout>
+                <h4>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h4>
+                <p>Ipsam, itaque pariatur perferendis provident blanditiis veniam molestiae natus optio doloribus id inventore adipisci at laborum debitis neque reiciendis est illum repudiandae!</p>
+            </stack-layout>
+        </box-layout>
+        <box-layout>
+            <stack-layout>
+                <box-layout class="text-align:center">
+                    <h2>Four</h2>
+                </box-layout>
+                <h4>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h4>
+                <p>Ipsam, itaque pariatur perferendis provident blanditiis veniam molestiae natus optio doloribus id inventore adipisci at laborum debitis neque reiciendis est illum repudiandae!</p>
+            </stack-layout>
+        </box-layout>
+        <box-layout>
+            <stack-layout>
+                <box-layout class="text-align:center">
+                    <h2>Five</h2>
+                </box-layout>
+                <h4>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h4>
+                <p>Ipsam, itaque pariatur perferendis provident blanditiis veniam molestiae natus optio doloribus id inventore adipisci at laborum debitis neque reiciendis est illum repudiandae!</p>
+            </stack-layout>
+        </box-layout>
+        <box-layout>
+            <stack-layout>
+                <box-layout class="text-align:center">
+                    <h2>Six</h2>
+                </box-layout>
+                <h4>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h4>
+                <p>Ipsam, itaque pariatur perferendis provident blanditiis veniam molestiae natus optio doloribus id inventore adipisci at laborum debitis neque reiciendis est illum repudiandae!</p>
+            </stack-layout>
+        </box-layout>
+        <!-- etc -->
+    </grid-layout>
+
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/layouts.js b/layouts.js
index 1ae8dba..0e31175 100644
--- a/layouts.js
+++ b/layouts.js
@@ -2,3 +2,10 @@
 import './StackLayout.js'
 import './BoxLayout.js'
 import './CenterLayout.js'
+import './ClusterLayout.js'
+import './SidebarLayout.js'
+import './SwitcherLayout.js'
+import './CoverLayout.js'
+import './GridLayout.js'
+import './FrameLayout.js'
+import './ReelLayout.js'
diff --git a/notes.txt b/notes.txt
new file mode 100644
index 0000000..5a1d8c3
--- /dev/null
+++ b/notes.txt
@@ -0,0 +1,40 @@
+--------------------------------------
+
+New layout:
+- cp an existing layout to FooLayout.js
+    cp StackLayout.js FooLayout.js
+    foo.html: either make one out of every-layout or edit an existing:
+        cp ../htmlcss/every-layout3/n-Foo/foo.html .
+    edit foo.html
+        <title>Foo</title>
+        <link rel="stylesheet" type="text/css" href="./root.css">
+        <script type="module" src="./layouts.js"></script>
+    &
+        -l => -layout
+
+- Find the every-layout dir for that layout inside every-layout3
+    - copy FooLayout's css from layouts.css
+    - copy FooLayout's JS variables to new Foo.js file
+
+- Go to https://every-layout.dev/layouts/
+    - copy the rest of the css into Foo.js
+
+
+
+
+
+Logical properties: Writing mode and direction
+- margin-block is shorthand for margin-block-start and margin-block-end
+    - writing mode horiz: top & bottom; vert: left/right
+- block-size is horiz/vert size depending on writing mode
+    - writing mode is vertically oriented: width; otherwise height
+    https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values
+- inline-size is like block-size but in the writing direction.
+- margin-inline-start/end ditto
+- max-block-size: maximum size of an element in the direction opposite of the writing direction
+    vertical: width, horizontal: height
+- max-inline-size: The other dimension's maximum length, vert: height, horiz: width
+- min-block-size the min of the above
+
+
+
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..4fd9af5
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,699 @@
+{
+    "name": "layouts",
+    "version": "1.0.0",
+    "lockfileVersion": 2,
+    "requires": true,
+    "packages": {
+        "": {
+            "version": "1.0.0",
+            "license": "ISC",
+            "dependencies": {
+                "http-server": "^14.1.1"
+            }
+        },
+        "node_modules/ansi-styles": {
+            "version": "4.3.0",
+            "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+            "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+            "dependencies": {
+                "color-convert": "^2.0.1"
+            },
+            "engines": {
+                "node": ">=8"
+            },
+            "funding": {
+                "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+            }
+        },
+        "node_modules/async": {
+            "version": "2.6.4",
+            "resolved": "https://registry.npmjs.org/async/-/async-2.6.4.tgz",
+            "integrity": "sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==",
+            "dependencies": {
+                "lodash": "^4.17.14"
+            }
+        },
+        "node_modules/basic-auth": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/basic-auth/-/basic-auth-2.0.1.tgz",
+            "integrity": "sha512-NF+epuEdnUYVlGuhaxbbq+dvJttwLnGY+YixlXlME5KpQ5W3CnXA5cVTneY3SPbPDRkcjMbifrwmFYcClgOZeg==",
+            "dependencies": {
+                "safe-buffer": "5.1.2"
+            },
+            "engines": {
+                "node": ">= 0.8"
+            }
+        },
+        "node_modules/call-bind": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
+            "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
+            "dependencies": {
+                "function-bind": "^1.1.1",
+                "get-intrinsic": "^1.0.2"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/chalk": {
+            "version": "4.1.2",
+            "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+            "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+            "dependencies": {
+                "ansi-styles": "^4.1.0",
+                "supports-color": "^7.1.0"
+            },
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/chalk/chalk?sponsor=1"
+            }
+        },
+        "node_modules/color-convert": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+            "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+            "dependencies": {
+                "color-name": "~1.1.4"
+            },
+            "engines": {
+                "node": ">=7.0.0"
+            }
+        },
+        "node_modules/color-name": {
+            "version": "1.1.4",
+            "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+            "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+        },
+        "node_modules/corser": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/corser/-/corser-2.0.1.tgz",
+            "integrity": "sha512-utCYNzRSQIZNPIcGZdQc92UVJYAhtGAteCFg0yRaFm8f0P+CPtyGyHXJcGXnffjCybUCEx3FQ2G7U3/o9eIkVQ==",
+            "engines": {
+                "node": ">= 0.4.0"
+            }
+        },
+        "node_modules/debug": {
+            "version": "3.2.7",
+            "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+            "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+            "dependencies": {
+                "ms": "^2.1.1"
+            }
+        },
+        "node_modules/eventemitter3": {
+            "version": "4.0.7",
+            "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
+            "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw=="
+        },
+        "node_modules/follow-redirects": {
+            "version": "1.15.2",
+            "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
+            "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==",
+            "funding": [
+                {
+                    "type": "individual",
+                    "url": "https://github.com/sponsors/RubenVerborgh"
+                }
+            ],
+            "engines": {
+                "node": ">=4.0"
+            },
+            "peerDependenciesMeta": {
+                "debug": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/function-bind": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
+            "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
+        },
+        "node_modules/get-intrinsic": {
+            "version": "1.2.1",
+            "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.1.tgz",
+            "integrity": "sha512-2DcsyfABl+gVHEfCOaTrWgyt+tb6MSEGmKq+kI5HwLbIYgjgmMcV8KQ41uaKz1xxUcn9tJtgFbQUEVcEbd0FYw==",
+            "dependencies": {
+                "function-bind": "^1.1.1",
+                "has": "^1.0.3",
+                "has-proto": "^1.0.1",
+                "has-symbols": "^1.0.3"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/has": {
+            "version": "1.0.3",
+            "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
+            "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
+            "dependencies": {
+                "function-bind": "^1.1.1"
+            },
+            "engines": {
+                "node": ">= 0.4.0"
+            }
+        },
+        "node_modules/has-flag": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+            "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/has-proto": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.1.tgz",
+            "integrity": "sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg==",
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/has-symbols": {
+            "version": "1.0.3",
+            "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
+            "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/he": {
+            "version": "1.2.0",
+            "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
+            "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
+            "bin": {
+                "he": "bin/he"
+            }
+        },
+        "node_modules/html-encoding-sniffer": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz",
+            "integrity": "sha512-oWv4T4yJ52iKrufjnyZPkrN0CH3QnrUqdB6In1g5Fe1mia8GmF36gnfNySxoZtxD5+NmYw1EElVXiBk93UeskA==",
+            "dependencies": {
+                "whatwg-encoding": "^2.0.0"
+            },
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/http-proxy": {
+            "version": "1.18.1",
+            "resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.1.tgz",
+            "integrity": "sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==",
+            "dependencies": {
+                "eventemitter3": "^4.0.0",
+                "follow-redirects": "^1.0.0",
+                "requires-port": "^1.0.0"
+            },
+            "engines": {
+                "node": ">=8.0.0"
+            }
+        },
+        "node_modules/http-server": {
+            "version": "14.1.1",
+            "resolved": "https://registry.npmjs.org/http-server/-/http-server-14.1.1.tgz",
+            "integrity": "sha512-+cbxadF40UXd9T01zUHgA+rlo2Bg1Srer4+B4NwIHdaGxAGGv59nYRnGGDJ9LBk7alpS0US+J+bLLdQOOkJq4A==",
+            "dependencies": {
+                "basic-auth": "^2.0.1",
+                "chalk": "^4.1.2",
+                "corser": "^2.0.1",
+                "he": "^1.2.0",
+                "html-encoding-sniffer": "^3.0.0",
+                "http-proxy": "^1.18.1",
+                "mime": "^1.6.0",
+                "minimist": "^1.2.6",
+                "opener": "^1.5.1",
+                "portfinder": "^1.0.28",
+                "secure-compare": "3.0.1",
+                "union": "~0.5.0",
+                "url-join": "^4.0.1"
+            },
+            "bin": {
+                "http-server": "bin/http-server"
+            },
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/iconv-lite": {
+            "version": "0.6.3",
+            "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+            "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+            "dependencies": {
+                "safer-buffer": ">= 2.1.2 < 3.0.0"
+            },
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/lodash": {
+            "version": "4.17.21",
+            "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+            "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+        },
+        "node_modules/mime": {
+            "version": "1.6.0",
+            "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
+            "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
+            "bin": {
+                "mime": "cli.js"
+            },
+            "engines": {
+                "node": ">=4"
+            }
+        },
+        "node_modules/minimist": {
+            "version": "1.2.8",
+            "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
+            "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/mkdirp": {
+            "version": "0.5.6",
+            "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
+            "integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
+            "dependencies": {
+                "minimist": "^1.2.6"
+            },
+            "bin": {
+                "mkdirp": "bin/cmd.js"
+            }
+        },
+        "node_modules/ms": {
+            "version": "2.1.3",
+            "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+            "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
+        },
+        "node_modules/object-inspect": {
+            "version": "1.12.3",
+            "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.3.tgz",
+            "integrity": "sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==",
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/opener": {
+            "version": "1.5.2",
+            "resolved": "https://registry.npmjs.org/opener/-/opener-1.5.2.tgz",
+            "integrity": "sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==",
+            "bin": {
+                "opener": "bin/opener-bin.js"
+            }
+        },
+        "node_modules/portfinder": {
+            "version": "1.0.32",
+            "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.32.tgz",
+            "integrity": "sha512-on2ZJVVDXRADWE6jnQaX0ioEylzgBpQk8r55NE4wjXW1ZxO+BgDlY6DXwj20i0V8eB4SenDQ00WEaxfiIQPcxg==",
+            "dependencies": {
+                "async": "^2.6.4",
+                "debug": "^3.2.7",
+                "mkdirp": "^0.5.6"
+            },
+            "engines": {
+                "node": ">= 0.12.0"
+            }
+        },
+        "node_modules/qs": {
+            "version": "6.11.2",
+            "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.2.tgz",
+            "integrity": "sha512-tDNIz22aBzCDxLtVH++VnTfzxlfeK5CbqohpSqpJgj1Wg/cQbStNAz3NuqCs5vV+pjBsK4x4pN9HlVh7rcYRiA==",
+            "dependencies": {
+                "side-channel": "^1.0.4"
+            },
+            "engines": {
+                "node": ">=0.6"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/requires-port": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
+            "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ=="
+        },
+        "node_modules/safe-buffer": {
+            "version": "5.1.2",
+            "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+            "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+        },
+        "node_modules/safer-buffer": {
+            "version": "2.1.2",
+            "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+            "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
+        },
+        "node_modules/secure-compare": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/secure-compare/-/secure-compare-3.0.1.tgz",
+            "integrity": "sha512-AckIIV90rPDcBcglUwXPF3kg0P0qmPsPXAj6BBEENQE1p5yA1xfmDJzfi1Tappj37Pv2mVbKpL3Z1T+Nn7k1Qw=="
+        },
+        "node_modules/side-channel": {
+            "version": "1.0.4",
+            "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
+            "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
+            "dependencies": {
+                "call-bind": "^1.0.0",
+                "get-intrinsic": "^1.0.2",
+                "object-inspect": "^1.9.0"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/supports-color": {
+            "version": "7.2.0",
+            "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+            "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+            "dependencies": {
+                "has-flag": "^4.0.0"
+            },
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/union": {
+            "version": "0.5.0",
+            "resolved": "https://registry.npmjs.org/union/-/union-0.5.0.tgz",
+            "integrity": "sha512-N6uOhuW6zO95P3Mel2I2zMsbsanvvtgn6jVqJv4vbVcz/JN0OkL9suomjQGmWtxJQXOCqUJvquc1sMeNz/IwlA==",
+            "dependencies": {
+                "qs": "^6.4.0"
+            },
+            "engines": {
+                "node": ">= 0.8.0"
+            }
+        },
+        "node_modules/url-join": {
+            "version": "4.0.1",
+            "resolved": "https://registry.npmjs.org/url-join/-/url-join-4.0.1.tgz",
+            "integrity": "sha512-jk1+QP6ZJqyOiuEI9AEWQfju/nB2Pw466kbA0LEZljHwKeMgd9WrAEgEGxjPDD2+TNbbb37rTyhEfrCXfuKXnA=="
+        },
+        "node_modules/whatwg-encoding": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-2.0.0.tgz",
+            "integrity": "sha512-p41ogyeMUrw3jWclHWTQg1k05DSVXPLcVxRTYsXUk+ZooOCZLcoYgPZ/HL/D/N+uQPOtcp1me1WhBEaX02mhWg==",
+            "dependencies": {
+                "iconv-lite": "0.6.3"
+            },
+            "engines": {
+                "node": ">=12"
+            }
+        }
+    },
+    "dependencies": {
+        "ansi-styles": {
+            "version": "4.3.0",
+            "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+            "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+            "requires": {
+                "color-convert": "^2.0.1"
+            }
+        },
+        "async": {
+            "version": "2.6.4",
+            "resolved": "https://registry.npmjs.org/async/-/async-2.6.4.tgz",
+            "integrity": "sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==",
+            "requires": {
+                "lodash": "^4.17.14"
+            }
+        },
+        "basic-auth": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/basic-auth/-/basic-auth-2.0.1.tgz",
+            "integrity": "sha512-NF+epuEdnUYVlGuhaxbbq+dvJttwLnGY+YixlXlME5KpQ5W3CnXA5cVTneY3SPbPDRkcjMbifrwmFYcClgOZeg==",
+            "requires": {
+                "safe-buffer": "5.1.2"
+            }
+        },
+        "call-bind": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
+            "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
+            "requires": {
+                "function-bind": "^1.1.1",
+                "get-intrinsic": "^1.0.2"
+            }
+        },
+        "chalk": {
+            "version": "4.1.2",
+            "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+            "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+            "requires": {
+                "ansi-styles": "^4.1.0",
+                "supports-color": "^7.1.0"
+            }
+        },
+        "color-convert": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+            "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+            "requires": {
+                "color-name": "~1.1.4"
+            }
+        },
+        "color-name": {
+            "version": "1.1.4",
+            "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+            "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+        },
+        "corser": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/corser/-/corser-2.0.1.tgz",
+            "integrity": "sha512-utCYNzRSQIZNPIcGZdQc92UVJYAhtGAteCFg0yRaFm8f0P+CPtyGyHXJcGXnffjCybUCEx3FQ2G7U3/o9eIkVQ=="
+        },
+        "debug": {
+            "version": "3.2.7",
+            "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+            "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+            "requires": {
+                "ms": "^2.1.1"
+            }
+        },
+        "eventemitter3": {
+            "version": "4.0.7",
+            "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
+            "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw=="
+        },
+        "follow-redirects": {
+            "version": "1.15.2",
+            "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
+            "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA=="
+        },
+        "function-bind": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
+            "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
+        },
+        "get-intrinsic": {
+            "version": "1.2.1",
+            "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.1.tgz",
+            "integrity": "sha512-2DcsyfABl+gVHEfCOaTrWgyt+tb6MSEGmKq+kI5HwLbIYgjgmMcV8KQ41uaKz1xxUcn9tJtgFbQUEVcEbd0FYw==",
+            "requires": {
+                "function-bind": "^1.1.1",
+                "has": "^1.0.3",
+                "has-proto": "^1.0.1",
+                "has-symbols": "^1.0.3"
+            }
+        },
+        "has": {
+            "version": "1.0.3",
+            "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
+            "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
+            "requires": {
+                "function-bind": "^1.1.1"
+            }
+        },
+        "has-flag": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+            "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
+        },
+        "has-proto": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.1.tgz",
+            "integrity": "sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg=="
+        },
+        "has-symbols": {
+            "version": "1.0.3",
+            "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
+            "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A=="
+        },
+        "he": {
+            "version": "1.2.0",
+            "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
+            "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw=="
+        },
+        "html-encoding-sniffer": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz",
+            "integrity": "sha512-oWv4T4yJ52iKrufjnyZPkrN0CH3QnrUqdB6In1g5Fe1mia8GmF36gnfNySxoZtxD5+NmYw1EElVXiBk93UeskA==",
+            "requires": {
+                "whatwg-encoding": "^2.0.0"
+            }
+        },
+        "http-proxy": {
+            "version": "1.18.1",
+            "resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.1.tgz",
+            "integrity": "sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==",
+            "requires": {
+                "eventemitter3": "^4.0.0",
+                "follow-redirects": "^1.0.0",
+                "requires-port": "^1.0.0"
+            }
+        },
+        "http-server": {
+            "version": "14.1.1",
+            "resolved": "https://registry.npmjs.org/http-server/-/http-server-14.1.1.tgz",
+            "integrity": "sha512-+cbxadF40UXd9T01zUHgA+rlo2Bg1Srer4+B4NwIHdaGxAGGv59nYRnGGDJ9LBk7alpS0US+J+bLLdQOOkJq4A==",
+            "requires": {
+                "basic-auth": "^2.0.1",
+                "chalk": "^4.1.2",
+                "corser": "^2.0.1",
+                "he": "^1.2.0",
+                "html-encoding-sniffer": "^3.0.0",
+                "http-proxy": "^1.18.1",
+                "mime": "^1.6.0",
+                "minimist": "^1.2.6",
+                "opener": "^1.5.1",
+                "portfinder": "^1.0.28",
+                "secure-compare": "3.0.1",
+                "union": "~0.5.0",
+                "url-join": "^4.0.1"
+            }
+        },
+        "iconv-lite": {
+            "version": "0.6.3",
+            "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+            "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+            "requires": {
+                "safer-buffer": ">= 2.1.2 < 3.0.0"
+            }
+        },
+        "lodash": {
+            "version": "4.17.21",
+            "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+            "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+        },
+        "mime": {
+            "version": "1.6.0",
+            "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
+            "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg=="
+        },
+        "minimist": {
+            "version": "1.2.8",
+            "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
+            "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA=="
+        },
+        "mkdirp": {
+            "version": "0.5.6",
+            "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
+            "integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
+            "requires": {
+                "minimist": "^1.2.6"
+            }
+        },
+        "ms": {
+            "version": "2.1.3",
+            "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+            "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
+        },
+        "object-inspect": {
+            "version": "1.12.3",
+            "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.3.tgz",
+            "integrity": "sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g=="
+        },
+        "opener": {
+            "version": "1.5.2",
+            "resolved": "https://registry.npmjs.org/opener/-/opener-1.5.2.tgz",
+            "integrity": "sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A=="
+        },
+        "portfinder": {
+            "version": "1.0.32",
+            "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.32.tgz",
+            "integrity": "sha512-on2ZJVVDXRADWE6jnQaX0ioEylzgBpQk8r55NE4wjXW1ZxO+BgDlY6DXwj20i0V8eB4SenDQ00WEaxfiIQPcxg==",
+            "requires": {
+                "async": "^2.6.4",
+                "debug": "^3.2.7",
+                "mkdirp": "^0.5.6"
+            }
+        },
+        "qs": {
+            "version": "6.11.2",
+            "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.2.tgz",
+            "integrity": "sha512-tDNIz22aBzCDxLtVH++VnTfzxlfeK5CbqohpSqpJgj1Wg/cQbStNAz3NuqCs5vV+pjBsK4x4pN9HlVh7rcYRiA==",
+            "requires": {
+                "side-channel": "^1.0.4"
+            }
+        },
+        "requires-port": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
+            "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ=="
+        },
+        "safe-buffer": {
+            "version": "5.1.2",
+            "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+            "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+        },
+        "safer-buffer": {
+            "version": "2.1.2",
+            "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+            "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
+        },
+        "secure-compare": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/secure-compare/-/secure-compare-3.0.1.tgz",
+            "integrity": "sha512-AckIIV90rPDcBcglUwXPF3kg0P0qmPsPXAj6BBEENQE1p5yA1xfmDJzfi1Tappj37Pv2mVbKpL3Z1T+Nn7k1Qw=="
+        },
+        "side-channel": {
+            "version": "1.0.4",
+            "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
+            "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
+            "requires": {
+                "call-bind": "^1.0.0",
+                "get-intrinsic": "^1.0.2",
+                "object-inspect": "^1.9.0"
+            }
+        },
+        "supports-color": {
+            "version": "7.2.0",
+            "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+            "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+            "requires": {
+                "has-flag": "^4.0.0"
+            }
+        },
+        "union": {
+            "version": "0.5.0",
+            "resolved": "https://registry.npmjs.org/union/-/union-0.5.0.tgz",
+            "integrity": "sha512-N6uOhuW6zO95P3Mel2I2zMsbsanvvtgn6jVqJv4vbVcz/JN0OkL9suomjQGmWtxJQXOCqUJvquc1sMeNz/IwlA==",
+            "requires": {
+                "qs": "^6.4.0"
+            }
+        },
+        "url-join": {
+            "version": "4.0.1",
+            "resolved": "https://registry.npmjs.org/url-join/-/url-join-4.0.1.tgz",
+            "integrity": "sha512-jk1+QP6ZJqyOiuEI9AEWQfju/nB2Pw466kbA0LEZljHwKeMgd9WrAEgEGxjPDD2+TNbbb37rTyhEfrCXfuKXnA=="
+        },
+        "whatwg-encoding": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-2.0.0.tgz",
+            "integrity": "sha512-p41ogyeMUrw3jWclHWTQg1k05DSVXPLcVxRTYsXUk+ZooOCZLcoYgPZ/HL/D/N+uQPOtcp1me1WhBEaX02mhWg==",
+            "requires": {
+                "iconv-lite": "0.6.3"
+            }
+        }
+    }
+}
diff --git a/package.json b/package.json
index 96d1880..839a108 100644
--- a/package.json
+++ b/package.json
@@ -4,9 +4,13 @@
     "description": "",
     "main": "index.js",
     "scripts": {
-        "build": "git add --all && git status;"
+        "build": "git add --all && git status",
+        "commit": "git commit --verbose && git push origin main"
     },
     "keywords": [],
     "author": "",
-    "license": "ISC"
+    "license": "ISC",
+    "dependencies": {
+        "http-server": "^14.1.1"
+    }
 }
diff --git a/reel.html b/reel.html
new file mode 100644
index 0000000..4ea86bf
--- /dev/null
+++ b/reel.html
@@ -0,0 +1,166 @@
+<!DOCTYPE html>
+<html lang="en">
+<!-- https://stackoverflow.com/questions/76596285/how-do-i-style-custom-element-children -->
+
+<head>
+    <title>Reel</title>
+    <link rel="stylesheet" type="text/css" href="./root.css">
+    <script type="module" src="./layouts.js"></script>
+
+    <style>
+        real-layout {
+            /* width: 100vw; */
+            border: 4px solid red;
+        }
+
+        box-layout {
+            /* width: 15em; */
+            /* height: 15rem; */
+            border: 1px solid green;
+        }
+    </style>
+
+</head>
+
+<body>
+
+    <reel-layout itemWidth="15rem">
+        <box-layout padding="0">
+            <frame-layout ratio="16:9">
+                <img src="https://picsum.photos/640/480?random=2" alt="A random image from unsplash">
+            </frame-layout>
+            <box-layout borderWidth="0">
+                <stack-layout>
+                    <h4>Luctus At In</h4>
+                    <div>
+                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla sapiente a, ratione impedit debitis cumque itaque. Minima pariatur quaerat possimus illo quos in numquam, ad distinctio, ea tempore sunt adipisci!
+                    </div>
+                </stack-layout>
+            </box-layout>
+        </box-layout>
+        <box-layout padding="0">
+            <frame-layout ratio="16:9">
+                <img src="https://picsum.photos/640/480?random=3" alt="Another random image from unsplash">
+            </frame-layout>
+            <box-layout borderWidth="0">
+                <stack-layout>
+                    <h4>Cubilia Iaculis Ante</h4>
+                    <div>
+                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa dignissimos delectus eaque laborum quod deleniti, illum dolores fugiat. At quia dolores harum ratione praesentium delectus alias sint unde tenetur voluptatibus!
+                    </div>
+                </stack-layout>
+            </box-layout>
+        </box-layout>
+        <box-layout padding="0">
+            <frame-layout ratio="16:9">
+                <img src="https://picsum.photos/640/480?random=4" alt="Another random image from unsplash">
+            </frame-layout>
+            <box-layout borderWidth="0">
+                <stack-layout>
+                    <h4>Nullam Ac Fusce</h4>
+                    <div>
+                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Non accusantium cupiditate reprehenderit ipsam ullam, aliquid ipsa earum, optio, aut est quae esse vel blanditiis! Voluptate voluptatum laborum deleniti quia dolorum.
+                    </div>
+                </stack-layout>
+            </box-layout>
+        </box-layout>
+        <box-layout padding="0">
+            <frame-layout ratio="16:9">
+                <img src="https://picsum.photos/640/480?random=2" alt="A random image from unsplash">
+            </frame-layout>
+            <box-layout borderWidth="0">
+                <stack-layout>
+                    <h4>Luctus At In</h4>
+                    <div>
+                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla sapiente a, ratione impedit debitis cumque itaque. Minima pariatur quaerat possimus illo quos in numquam, ad distinctio, ea tempore sunt adipisci!
+                    </div>
+                </stack-layout>
+            </box-layout>
+        </box-layout>
+        <box-layout padding="0">
+            <frame-layout ratio="16:9">
+                <img src="https://picsum.photos/640/480?random=3" alt="Another random image from unsplash">
+            </frame-layout>
+            <box-layout borderWidth="0">
+                <stack-layout>
+                    <h4>Cubilia Iaculis Ante</h4>
+                    <div>
+                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa dignissimos delectus eaque laborum quod deleniti, illum dolores fugiat. At quia dolores harum ratione praesentium delectus alias sint unde tenetur voluptatibus!
+                    </div>
+                </stack-layout>
+            </box-layout>
+        </box-layout>
+        <box-layout padding="0">
+            <frame-layout ratio="16:9">
+                <img src="https://picsum.photos/640/480?random=4" alt="Another random image from unsplash">
+            </frame-layout>
+            <box-layout borderWidth="0">
+                <stack-layout>
+                    <h4>Nullam Ac Fusce</h4>
+                    <div>
+                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Non accusantium cupiditate reprehenderit ipsam ullam, aliquid ipsa earum, optio, aut est quae esse vel blanditiis! Voluptate voluptatum laborum deleniti quia dolorum.
+                    </div>
+                </stack-layout>
+            </box-layout>
+        </box-layout>
+        <box-layout padding="0">
+            <frame-layout ratio="16:9">
+                <img src="https://picsum.photos/640/480?random=2" alt="A random image from unsplash">
+            </frame-layout>
+            <box-layout borderWidth="0">
+                <stack-layout>
+                    <h4>Luctus At In</h4>
+                    <div>
+                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla sapiente a, ratione impedit debitis cumque itaque. Minima pariatur quaerat possimus illo quos in numquam, ad distinctio, ea tempore sunt adipisci!
+                    </div>
+                </stack-layout>
+            </box-layout>
+        </box-layout>
+        <box-layout padding="0">
+            <frame-layout ratio="16:9">
+                <img src="https://picsum.photos/640/480?random=3" alt="Another random image from unsplash">
+            </frame-layout>
+            <box-layout borderWidth="0">
+                <stack-layout>
+                    <h4>Cubilia Iaculis Ante</h4>
+                    <div>
+                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa dignissimos delectus eaque laborum quod deleniti, illum dolores fugiat. At quia dolores harum ratione praesentium delectus alias sint unde tenetur voluptatibus!
+                    </div>
+                </stack-layout>
+            </box-layout>
+        </box-layout>
+        <box-layout padding="0">
+            <frame-layout ratio="16:9">
+                <img src="https://picsum.photos/640/480?random=4" alt="Another random image from unsplash">
+            </frame-layout>
+            <box-layout borderWidth="0">
+                <stack-layout>
+                    <h4>Nullam Ac Fusce</h4>
+                    <div>
+                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Non accusantium cupiditate reprehenderit ipsam ullam, aliquid ipsa earum, optio, aut est quae esse vel blanditiis! Voluptate voluptatum laborum deleniti quia dolorum.
+                    </div>
+                </stack-layout>
+            </box-layout>
+        </box-layout>
+
+    </reel-layout>
+
+    <!-- <reel-layout itemWidth="10rem">
+            <box-layout> </box-layout>
+            <box-layout> </box-layout>
+            <box-layout> </box-layout>
+            <box-layout> </box-layout>
+            <box-layout> </box-layout>
+            <box-layout> </box-layout>
+            <box-layout> </box-layout>
+            <box-layout> </box-layout>
+            <box-layout> </box-layout>
+            <box-layout> </box-layout>
+            <box-layout> </box-layout>
+            <box-layout> </box-layout>
+            <box-layout> </box-layout>
+        </reel-layout> -->
+
+
+</html>
+</body>
\ No newline at end of file
diff --git a/root.css b/root.css
index 85f0048..43b9275 100644
--- a/root.css
+++ b/root.css
@@ -26,8 +26,6 @@
 
     --color-dark: black;
     --color-light: white;
-    /* --color-light: #eee;
-    --color-dark: #222; */
 
     --item-width: auto; /* flex */
 }
diff --git a/sidebar.html b/sidebar.html
new file mode 100644
index 0000000..a940a04
--- /dev/null
+++ b/sidebar.html
@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>SideBar</title>
+    <link rel="stylesheet" type="text/css" href="./root.css">
+    <script type="module" src="./layouts.js"></script>
+
+    <style>
+        .wide {
+            min-inline-size: 25ch;
+        }
+    </style>
+</head>
+
+<body>
+
+    <h3>Stack around everything!</h3>
+    <stack-layout>
+        <h3>form > sidebar > text & button</h3>
+        <form>
+            <sidebar-layout side="right" space="0" contentMin="66.666%">
+                <input type="text">
+                <button>Search</button>
+            </sidebar-layout>
+        </form>
+
+        <h3>sidebar > box center, h2 | & box stack p & p</h3>
+        <sidebar-layout side="left" sideWidth="20ch" space="1ch">
+            <box-layout>
+                <center-layout andText="true">
+                    <h2>Side</h2>
+                    <!-- <img src="../data/redfish.png" /> -->
+                </center-layout>
+            </box-layout>
+
+            <box-layout>
+                <stack-layout>
+                    <!-- <center-layout max="1000ch"> -->
+                    <p>
+                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa voluptatem optio quod quam beatae. Placeat porro sunt fuga inventore deleniti ipsa, corporis eligendi quam nesciunt odio beatae reprehenderit quo modi!
+                        Lorem ipsum dolor sit amet consectetur
+                    </p>
+                    <p>
+                        Adipisicing elit. Culpa voluptatem optio quod quam beatae. Placeat porro sunt fuga inventore deleniti ipsa, corporis eligendi quam nesciunt odio beatae reprehenderit quo modi!
+                    </p>
+                    <!-- </center-layout> -->
+                </stack-layout>
+            </box-layout>
+        </sidebar-layout>
+
+        <h3>sidebar > box (h3 & p) & box </h3>
+        <sidebar-layout space="1ch" side="left" sideWidth="20ch">
+            <box-layout class="wide">
+                <!-- <img src="../data/redfish.png" /> -->
+                <h3>Side</h3>
+                <p>Some text</p>
+                <p>Non explicabo nostrum in unde totam labore ipsa! Iste tempore accusamus culpa obcaecati commodi.</p>
+            </box-layout>
+            <box-layout>
+                Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odio similique in nisi dolor et. Accusantium sequi vel nostrum praesentium nihil doloribus iure! Hic, quod. Sit numquam maxime qui ratione est?
+            </box-layout>
+        </sidebar-layout>
+
+        <h3>sidebar right (img & p)</h3>
+        <sidebar-layout space="4ch" sideWidth="40ch" side="right" contentMin="25%">
+            <img src="https://unsplash.it/640/480?random" />
+            <p>
+                Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odio similique in nisi dolor et. Accusantium sequi vel nostrum praesentium nihil doloribus iure! Hic, quod. Sit numquam maxime qui ratione est?
+            </p>
+        </sidebar-layout>
+
+
+    </stack-layout>
+</body>
+
+</html>
+
+
+
+
+
+
+
+
+<!--
+        <sidebar-layout space="var(--s0)" side="left" sideWidth="30ch">
+            <box-layout>
+                <img src="../data/redfish.png" />
+            </box-layout>
+            <box-layout>
+                Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odio similique in nisi dolor et. Accusantium sequi vel nostrum praesentium nihil doloribus iure! Hic, quod. Sit numquam maxime qui ratione est?
+            </box-layout>
+        </sidebar-layout>
+
+
+        p {
+        /* width: var(--measure); */
+        /* max-inline-size: var(--measure); */
+        }
+
+        /* box-layout {
+        /* max-inline-size: calc(var(--measure) * 2); */
+        /* max-inline-size: min-content; */
+        /* max-inline-size: fit-content(60em); */
+        } */
+
+    -->
\ No newline at end of file
diff --git a/stack.html b/stack.html
index adf9e3e..46ccc09 100644
--- a/stack.html
+++ b/stack.html
@@ -29,13 +29,18 @@ <h3>Hello World</h3>
         <div>And I'm a div with text</div>
     </stack-layout>
 
-    <stack-layout space="2rem">
+    <stack-layout space="3rem">
         <h3>Hi Again</h3>
         <p>I'm still a paragraph</p>
         <div>And I'm still a div with text</div>
     </stack-layout>
 
-    <h2>Recursion</h2>
+    <h2> Only child</h2>
+    <stack-layout>
+        <h3>Only child</h3>
+    </stack-layout>
+
+    <!-- <h2>Recursion</h2>
     <stack-layout recursive>
         <p> first level child </p>
         <p> first level sibling </p>
@@ -43,10 +48,10 @@ <h2>Recursion</h2>
             <p> second level child </p>
             <p> second level sibling </p>
         </div>
-    </stack-layout>
+    </stack-layout> -->
 
     <h2>Nesting</h2>
-    <stack-layout recursive="true" space="1rem">
+    <stack-layout space="1rem">
         <p> first level child </p>
         <p> first level sibling </p>
         <stack-layout>
@@ -57,34 +62,27 @@ <h2>Nesting</h2>
 
     <h2> Two stacks inside another, different space size </h2>
     <stack-layout space="3rem">
-        <h2>Stack 1</h2>
         <stack-layout space="1.5rem">
             <p>Paragraph </p>
             <p>Paragraph </p>
         </stack-layout>
-        <h2>Stack 2</h2>
         <stack-layout space="1.5rem">
             <p>Paragraph </p>
             <p>Paragraph </p>
         </stack-layout>
     </stack-layout>
 
-    <h2> Two Stacks, first recursive & default space, second 2rem space</h2>
-    <stack-layout recursive>
+    <h2> Two nested Stacks, first default space, second different space</h2>
+    <stack-layout>
         <h3>Hello World</h3>
         <p>I'm a paragraph</p>
         <div>And I'm a div with text</div>
-        <stack-layout>
-            <h3>Hello recursive</h3>
-            <p>I'm a recursive paragraph</p>
-            <div>And I'm a recursive div with text</div>
+        <stack-layout space="3rem">
+            <h3>Hello nested</h3>
+            <p>I'm a nested paragraph</p>
+            <div>And I'm a nested div with text</div>
         </stack-layout>
     </stack-layout>
-    <stack-layout space="2rem">
-        <h3>Hi Again</h3>
-        <p>I'm still a paragraph</p>
-        <div>And I'm still a div with text</div>
-    </stack-layout>
 
     <h2> Split after 3 </h2>
     <stack-layout space="2rem" splitAfter="3" style="height:40rem">
@@ -97,19 +95,5 @@ <h2> Split after 3 </h2>
     </stack-layout>
 
 
-    <!-- <h2> A Center, with a stack of boxes, some nested.</h2>
-    <center-l max="40ch">
-        <stack-layout recursive="true">
-            <box-l></box-l>
-            <box-l></box-l>
-            <box-l>
-                <box-l></box-l>
-                <box-l></box-l>
-            </box-l>
-            <box-l></box-l>
-        </stack-layout>
-    </center-l> -->
-
-
 </html>
 </body>
\ No newline at end of file
diff --git a/switcher.html b/switcher.html
new file mode 100644
index 0000000..aa6a325
--- /dev/null
+++ b/switcher.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Switcher</title>
+    <link rel="stylesheet" type="text/css" href="./root.css">
+    <script type="module" src="./layouts.js"></script>
+
+    <style>
+        box-layout {
+            /* will make the box text centered, due to padding */
+            max-inline-size: min-content;
+        }
+
+        p {
+            /* will make the p text centered, due to padding */
+            max-inline-size: min-content;
+            border: 4px solid black;
+            padding: 2ch;
+        }
+    </style>
+</head>
+
+<body>
+    <hr />
+    <switcher-layout space="10ch">
+        <p>One</p>
+        <p>Two</p>
+        <p>Three</p>
+        <p>Four</p>
+    </switcher-layout>
+
+    <hr />
+    <switcher-layout space="2ch" limit="10">
+        <p>One</p>
+        <p>Two</p>
+        <p>Three</p>
+        <p>Four</p>
+        <p>Five</p>
+    </switcher-layout>
+
+    <hr />
+    <switcher-layout>
+        <box-layout>One</box-layout>
+        <box-layout>Two</box-layout>
+        <box-layout>Three</box-layout>
+        <box-layout>Four</box-layout>
+    </switcher-layout>
+
+    <hr />
+    <switcher-layout limit="3">
+        <box-layout>One</box-layout>
+        <box-layout>Two</box-layout>
+        <box-layout>Three</box-layout>
+        <box-layout>Four</box-layout>
+        <box-layout>Five</box-layout>
+        <box-layout>Six</box-layout>
+    </switcher-layout>
+</body>
+
+</html>
+
+
+<!--
+
+    Doesn't work: treats the center as a sinle object
+    <switcher-layout>
+        <center-layout>
+            <box-layout>One</box-layout>
+            <box-layout>Two</box-layout>
+            <box-layout>Three</box-layout>
+            <box-layout>Four</box-layout>
+        </center-layout>
+    </switcher-layout>
+
+    Demo
+    <switcher-layout threshold="30rem" space="1rem" data-i="Switcher-30rem1rem5">
+        <box-layout border="" data-i="Box-var(--s1)var(--border-thin)false"></box-layout>
+        <box-layout border="" data-i="Box-var(--s1)var(--border-thin)false"></box-layout>
+        <box-layout border="" data-i="Box-var(--s1)var(--border-thin)false"></box-layout>
+    </switcher-layout>
+
+-->
\ No newline at end of file