@vuu-ui/vuu-layout 0.5.15 → 0.5.16

package/index.css

@@ -0,0 +1,2 @@
+.vuuDialog{background:var(--salt-container-primary-background);border:var(--vuuDialog-border, solid 1px #ccc);border-radius:5px;padding:var(--vuuDialog-padding, 0);box-shadow:var(--salt-overlayable-shadow, none);height:var(--vuuDialog-height, fit-content);width:var(--vuuDialog-width, fit-content)}.vuuDialog-header{--saltButton-height: 28px;--saltButton-width: 28px;--saltToolbar-background: transparent;--saltToolbar-height: calc(var(--salt-size-base) + 5px);border-bottom:solid 1px var(--salt-container-primary-borderColor)}.vuuDialog-header>.Responsive-inner{align-items:center}.vuuDialog-header>.Responsive-inner>:last-child{right:2px}.vuuDrawer{--drawer-leading-edge-border: solid 1px var(--salt-container-primary-borderColor, none);--vuu-close-icon-svg: var(--svg-chevron-double-right);transition:flex-basis;transition-duration:var(--drawer-transition-duration);position:relative;z-index:1;flex-basis:0;flex-grow:1;flex-shrink:1;min-width:0;min-height:0;display:flex}.vuuDrawer-peekaboo{flex-basis:var(--drawer-peek-size);flex-grow:0;flex-shrink:0}.vuuDrawer-inline.vuuDrawer-open{flex-basis:var(--drawer-size);flex-grow:0;flex-shrink:0}.vuuDrawer-liner{background-color:var(--drawer-bg);overflow:hidden;position:relative}.vuuDrawer-content{height:100%;overflow:hidden;position:absolute;top:0;right:var(--drawer-peek-size);transition:right;transition-duration:var(--drawer-transition-duration);width:100%;flex:1 1 100%}.vuuDrawer-open .vuuDrawer-content{right:0}.vuuDrawer-left{border-right:var(--drawer-leading-edge-border)}.vuuDrawer-right{border-left:var(--drawer-leading-edge-border)}.vuuDrawer-top{border-bottom:var(--drawer-leading-edge-border)}.vuuDrawer-bottom{border-top:var(--drawer-leading-edge-border)}.vuuDrawer-left .vuuDrawer-liner,.vuuDrawer-right .vuuDrawer-liner{height:100%;transition:width}.vuuDrawer-top .vuuDrawer-liner,.vuuDrawer-bottom .vuuDrawer-liner{width:100%;transition:height}.vuuDrawer-inline .vuuDrawer-liner{width:100%;height:100%}.vuuDrawer-over .vuuDrawer-liner{position:absolute;transition-duration:.4s}.vuuDrawer-over.vuuDrawer-left .vuuDrawer-liner{top:0;left:0;width:0}.vuuDrawer-over.vuuDrawer-right .vuuDrawer-liner{top:0;right:0;width:0}.vuuDrawer-over.vuuDrawer-top .vuuDrawer-liner{height:0;top:0;left:0}.vuuDrawer-over.vuuDrawer-bottom .vuuDrawer-liner{bottom:0;height:0;left:0}.vuuDrawer-left.vuuDrawer-over.vuuDrawer-peekaboo .vuuDrawer-liner,.vuuDrawer-right.vuuDrawer-over.vuuDrawer-peekaboo .vuuDrawer-liner{width:var(--drawer-peek-size)}.vuuDrawer-top.vuuDrawer-over.vuuDrawer-peekaboo .vuuDrawer-liner,.vuuDrawer-bottom.vuuDrawer-over.vuuDrawer-peekaboo .vuuDrawer-liner{height:var(--drawer-peek-size)}.vuuDrawer-left.vuuDrawer-over.vuuDrawer-open .vuuDrawer-liner,.vuuDrawer-right.vuuDrawer-over.vuuDrawer-open .vuuDrawer-liner{width:var(--drawer-size)}.vuuDrawer-top.vuuDrawer-over.vuuDrawer-open .vuuDrawer-liner,.vuuDrawer-bottom.vuuDrawer-over.vuuDrawer-open .vuuDrawer-liner{height:var(--drawer-size)}.vuuDrawer-top,.vuuDrawer-left{order:0}.vuuDrawer-bottom,.vuuDrawer-right{order:99}.vuuDrawer-left,.vuuDrawer-right{flex-direction:column}.vuuToggleButton-container{--saltButton-height: 28px;--saltButton-width: 28px;--vuu-icon-size: 12px;flex:0 0 28px}.vuuDrawer-open{--vuu-close-icon-svg: var(--svg-chevron-double-left)}.hwChest{--chest-bg: var(--hw-chest-bg, inherit);--drawer-bg: var(--hw-drawer-bg, inherit);--drawer-size: var(--hw-drawer-size, 200px);--drawer-peek-size: var(--hw-drawer-peek-size, 32px);--drawer-transition-duration: var(--hw-drawer-transition-duration, .4s);background-color:var(--chest-bg);display:flex}.hwChest-horizontal{flex-direction:row}.hwChest-vertical{flex-direction:column}.hwChest-content{background-color:var(--chest-bg);flex-grow:1;flex-shrink:1;overflow:hidden;display:flex;align-items:center;justify-content:center}.hwChest-horizontal .hwChest-content,.hwChest-vertical .hwChest-content{flex-basis:100%}.vuuPopup{box-shadow:0 6px 12px #0000002d;position:absolute;top:0;left:0;width:0;height:0;overflow:visible;z-index:1000}.vuuPopup{position:absolute}.vuuDropMenu{margin-left:-50%;margin-bottom:-50%;background-color:#fff;border:solid 1px var(--grey40);display:inline-flex;justify-content:center;align-items:center;padding:3px;border-radius:3px}.vuuDropMenu-left,.vuuDropMenu-right{flex-direction:column}.vuuDropMenu-bottom{transform:translateY(-30px)}.vuuDropMenu-right{transform:translate(-20px)}.vuuDropMenu-item{--vuu-icon-size: 20px;width:32px;height:32px;background-color:var(--grey20);border-bottom:solid 1px var(--grey40);cursor:pointer;display:flex;align-items:center;justify-content:center}.vuuDropMenu-item .Icon{transform:scale(1.25);transform-origin:center center}.vuuDropMenu-left .vuuDropMenu-item .hwIcon{transform:scale(1.25) rotate(180deg);transform-origin:center center}.vuuDropMenu-top .vuuDropMenu-item .hwIcon{transform:scale(1.25) rotate(270deg);transform-origin:center center}.vuuDropMenu-bottom .vuuDropMenu-item .hwIcon{transform:scale(1.25) rotate(90deg);transform-origin:center center}.vuuDropMenu-item .hwIcon-path{fill:gray}.vuuDropMenu-item:hover{background-color:#c8c8c880}.vuuDropMenu-item:hover .hwIcon-path-2{fill:#00f}.vuuDropMenu-item:last-child{border-bottom:none}#hw-drag-canvas{visibility:hidden;z-index:1;position:absolute;top:0px;left:0;right:0;bottom:0;background-color:transparent}#hw-drag-canvas>svg{position:absolute}.drawing #hw-drag-canvas{visibility:visible}path.drop-target{stroke:#00f;stroke-width:4px;fill:transparent}path.drop-target.centre{stroke:red}#vuu-drop-outline{fill:#0000ff4d;stroke:none;stroke-dasharray:4 2}#hw-drop-guides{fill:none;stroke:#0000004d;stroke-dasharray:2 3}.DraggableLayout{display:inline-block;outline:none}[data-dragging=true]{position:absolute!important;z-index:100}.vuuSimpleDraggableWrapper{background-color:#fff;box-shadow:0 6px 10px #0003}.vuuSimpleDraggableWrapper>*{height:100%;width:100%}.vuuPlaceholder{flex-basis:0;flex-grow:1;flex-shrink:1}.vuuPlaceholder-shim{flex-grow:0;flex-shrink:0}.Splitter{--splitter-size: 3px;--splitter-border-width: 4px;--splitter-border-style: none;--splitter-border-color: white;align-items:center;background-color:var(--grey60);border-color:var(--splitter-border-color);border-style:var(--splitter-border-style);box-sizing:border-box;display:flex;justify-content:center;position:relative;outline:none;z-index:1}.Splitter:hover{background-color:var(--grey40)}.active.Splitter{background-color:var(--blue500)}.Splitter.column{cursor:ns-resize;height:var(--splitter-size);border-width:var(--splitter-border-width) 0}.Splitter:not(.column){cursor:ew-resize;width:var(--splitter-size);border-width:0 var(--splitter-border-width)}.Splitter:before{border:none;border-radius:0;content:"";display:block;padding:0}.Splitter .grab-zone{position:absolute;background-color:#ff000003;cursor:inherit}.Splitter.column .grab-zone{left:0;right:0;top:-5px;bottom:-5px}.Splitter:not(column) .grab-zone{left:-5px;right:-5px;top:0;bottom:0}.Splitter:not(.column):before{width:1px;height:10px;background:linear-gradient(to bottom,var(--grey900) 10%,transparent 10%,transparent 30%,var(--grey900) 30%,var(--grey900) 40%,transparent 40%,transparent 60%,var(--grey900) 60%,var(--grey900) 70%,transparent 70%,transparent 90%,var(--grey900) 90%)}.active.Splitter.column:before{background:linear-gradient(to right,#ffffff 10%,transparent 10%,transparent 30%,#ffffff 30%,#ffffff 40%,transparent 40%,transparent 60%,#ffffff 60%,#ffffff 70%,transparent 70%,transparent 90%,#ffffff 90%)}.active.Splitter:not(.column):before{background:linear-gradient(to bottom,#ffffff 10%,transparent 10%,transparent 30%,#ffffff 30%,#ffffff 40%,transparent 40%,transparent 60%,#ffffff 60%,#ffffff 70%,transparent 70%,transparent 90%,#ffffff 90%)}.Splitter.column:before{width:10px;height:1px;background:linear-gradient(to right,var(--grey900) 10%,transparent 10%,transparent 30%,var(--grey900) 30%,var(--grey900) 40%,transparent 40%,transparent 60%,var(--grey900) 60%,var(--grey900) 70%,transparent 70%,transparent 90%,var(--grey900) 90%)}:root{--hw-space-unit: 4px;--hw-flex-gap: 3;--hw-fluid-grid-col-bg: rgba(200, 200, 200, .3)}.hwFlexbox{background-color:var(--container1-background);box-sizing:border-box;display:flex;gap:calc(var(--spacing) * var(--space));min-height:0;min-width:0;overflow:hidden}.hwFlexbox-column{flex-direction:column}.hwFlexbox-row{flex-direction:row}.hwFlexbox>.Splitter{flex-basis:auto;flex-grow:0;flex-shrink:0}.hwFlexbox.full-page{height:100vh;width:100vw}.flex-fill{border-color:red;flex:0;flex-grow:1;flex-shrink:1}.vuuView.flex-fill{border-color:red}:root{--hw-space-unit: 4px;--hw-fluid-grid-col-bg: rgba(252, 209, 232, .7)}.hwFluidGrid{--gap: var(--gutter-width);display:flex;gap:calc(var(--grid-gap) * var(--hw-space-unit));flex-wrap:wrap;padding:0}.hwFluidGrid>*{--gutter-width: calc(var(--hw-flex-gap) * var(--hw-space-unit));--gutter-count: calc(var(--parent-col-count) - 1);--total-gutter-width: calc(var(--gutter-count) * var(--gutter-width));--available-width: calc(100% - var(--total-gutter-width));flex-basis:0;flex-grow:1;flex-shrink:1;position:relative}.hwFluidGrid>*:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border:dashed 2px blue}.hwFluidGrid>[data-xs]{--internal-gutter-count: calc(var(--col-span) - 1);--percent-width: calc(var(--col-span) / var(--parent-col-count));--internal-gutter-width: calc(var(--internal-gutter-count) * var(--gutter-width));flex-basis:calc(var(--available-width) * var(--percent-width) + var(--internal-gutter-width));flex-grow:0}.hwFluidGrid>[data-xs="1"]{--col-span: 1}.hwFluidGrid>[data-xs="2"]{--col-span: 2}.hwFluidGrid>[data-xs="3"]{--col-span: 3}.hwFluidGrid>[data-xs="4"]{--col-span: 4}.hwFluidGrid>[data-xs="6"]{--col-span: 6}.hwFluidGrid>[data-xs="8"]{--col-span: 8}.hwFluidGrid>[data-xs="9"]{--col-span: 9}.hwFluidGrid>[data-xs="10"]{--col-span: 10}.hwFluidGrid>[data-xs="11"]{--col-span: 11}.hwFluidGrid>[data-xs="12"]{--col-span: 12}@media (min-width: 600px){.hwFluidGrid>[data-sm="1"]{--col-span: 1}.hwFluidGrid>[data-sm="2"]{--col-span: 2}.hwFluidGrid>[data-sm="3"]{--col-span: 3}.hwFluidGrid>[data-sm="4"]{--col-span: 4}.hwFluidGrid>[data-sm="6"]{--col-span: 6}.hwFluidGrid>[data-sm="8"]{--col-span: 8}.hwFluidGrid>[data-sm="9"]{--col-span: 9}.hwFluidGrid>[data-sm="10"]{--col-span: 10}.hwFluidGrid>[data-sm="11"]{--col-span: 11}.hwFluidGrid>[data-sm="12"]{--col-span: 12}}.hwFluidGrid-show-grid{--gutter-width: calc(var(--hw-flex-gap) * var(--hw-space-unit));--grid-gutter-count: calc(var(--grid-col-count, var(--parent-col-count)) - 1);--grid-total-gutter-width: calc(var(--grid-gutter-count) * var(--gutter-width));--grid-available-width: calc(100% - var(--grid-total-gutter-width));--grid-percent-width: calc(1 / var(--grid-col-count, var(--parent-col-count)));--column-width: calc(var(--grid-available-width) * var(--grid-percent-width));background:repeating-linear-gradient(to right,var(--hw-fluid-grid-col-bg) 0,var(--hw-fluid-grid-col-bg) var(--column-width),white var(--column-width),white calc(var(--column-width) + var(--gutter-width)))}.vuuView{border-color:var(--vuuView-borderColor, var(--salt-container-primary-borderColor));border-width:var(--vuuView-borderWidth, 1px);border-style:var(--vuuView-borderStyle, none);display:flex;flex-direction:column;margin:var(--vuuView-margin, 0px);min-height:50px;min-width:50px;outline:none;overflow:hidden;position:relative}.vuuView.focus-visible:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border:dotted cornflowerblue 2px}.vuuView.dragging{box-shadow:0 6px 12px #0000002d}.vuuView-main{display:flex;flex-direction:var(--vuuView-flexDirection, column);flex-wrap:var(--vuuView-flex-wrap, nowrap);flex:1;overflow:hidden;position:relative}.vuuView-main>*{flex-basis:auto;flex-grow:var(--vuuView-flex-grow, 1);flex-shrink:var(--vuuView-flex-shrink, 1)}.vuuView-collapsed .vuuView-main{display:none}.vuuView-collapsed+.Splitter{display:none}.vuuView-collapsed .Toolbar-vertical{border-right:solid 1px var(--grey40)}.vuuView-collapsed .Toolbar-vertical .toolbar-title{display:none}.vuuHeader{--saltToolbar-background: var(--salt-container-tertiary-background)}.salt-density-high .vuuHeader{--saltToolbarField-marginTop: 0}.vuuPalette-horizontal{align-items:center;display:flex}.vuuPaletteItem{--vuu-icon-color: var(--salt-separable-primary-borderColor);--vuu-icon-inset:calc(50% - 12px) auto auto -3px;--vuu-icon-height: 24px;--vuu-icon-width: 24px;--list-item-text-padding: 0 0 0 calc(var(--salt-size-unit) * 3)}.vuuPaletteItem[data-draggable]:after{height:22px;width:6px;content:"";position:absolute;background-image:linear-gradient(45deg,rgb(180,183,190) 25%,transparent 25%),linear-gradient(-45deg,rgb(180,183,190) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgb(180,183,190) 25%),linear-gradient(-45deg,transparent 75%,rgb(180,183,190) 25%);background-size:4px 4px;background-position:0 0,2px 0,2px -2px,0 2px}.vuuSimpleDraggableWrapper>.vuuPaletteItem{--vuu-icon-color: var(--salt-selectable-foreground)}.vuuPalette{--list-item-header-bg: inherit;--list-item-header-color: inherit;--list-item-padding: 0 6px 0 24px;--list-item-header-twisty-color: black;--list-item-header-twisty-left: 3px;--list-item-header-twisty-right: auto}.Tabs{display:flex;box-sizing:border-box;flex-direction:column}.Tabs-horizontal{flex-direction:row}.Tabs .Toolbar:before{left:0;width:100%;bottom:0;height:1px;content:"";position:absolute;background:var(--grey60)}.vuuTabHeader{--saltTabs-activationIndicator-background: transparent;--saltToolbarField-marginTop: calc(var(--salt-size-unit) - 1px);border-bottom:solid 1px var(--salt-container-primary-borderColor)}.vuuTabHeader+.hwFlexbox,.vuuTabHeader+*{flex:1}.vuuTabHeader+.vuuView>.vuuHeader{height:0;overflow:hidden}.Layout-svg-button{--spacing-medium: 5px}[data-design-mode=true] .Component{filter:grayscale(100%);opacity:.4}[data-design-mode=true] .Component:after{color:#000;content:"Component";height:12px;background-color:#ff0}.LayoutConfigurator{--margin-color: #f3cea5;--border-color: #fddda0;--padding-color: #c6d092;--content-color: #8cb6c0;display:flex;flex-direction:column;align-items:stretch;background-color:var(--margin-color)}.LayoutConfigurator .layout-outer{flex:1 1 auto;display:flex;flex-direction:column;align-items:stretch}.LayoutBox{--hw-control-font-size: 13px;--hw-text-input-bg: rgba(255, 255, 255, .3);--hwTextInput-padding: 3px;--hw-text-input-position: absolute;--hwTextInput-width: 30px;flex:1 1 auto}.LayoutBox>.layout-top{flex:0 0 40px;padding-left:12px;display:flex;flex-direction:row;align-items:center;position:relative}.LayoutBox>.layout-bottom{flex:0 0 40px;position:relative;display:flex;flex-direction:row;align-items:center}.LayoutBox>.layout-inner>.layout-right,.LayoutBox>.layout-inner>.layout-left{flex:0 0 40px;display:flex;flex-direction:column;justify-content:center;align-items:center}.layout-top,.layout-bottom{--hw-text-input-margin: 0 0 0 -15px}.layout-top>.layout-input,.layout-bottom>.layout-input{left:50%}.LayoutBox>.layout-inner{flex:1 1 auto;display:flex;flex-direction:row;align-items:stretch}.LayoutBox.layout-margin{background-color:var(--margin-color);border:dashed 2px black}.LayoutBox.layout-border{background-color:var(--border-color);border:solid 2px black}.LayoutBox.layout-padding{background-color:var(--padding-color);border:dashed 2px black}.LayoutBox .layout-content{flex:1 1 auto;background-color:var(--content-color);border:solid 2px #808080}.LayoutBox .layout-title{color:#161616;font-size:11px;left:4px;line-height:15px;position:absolute;top:1px}.hwLayoutTreeNode{cursor:default}.hwLayoutTreeNode:hover{background-color:#fff3}.hwLayoutTreeNode[aria-selected=true]{background-color:#6495ed;color:#fff}
+/*# sourceMappingURL=index.css.map */

package/index.css.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../packages/vuu-popups/src/dialog/Dialog.css", "../../../packages/vuu-layout/src/chest-of-drawers/Drawer.css", "../../../packages/vuu-layout/src/chest-of-drawers/Chest.css", "../../../packages/vuu-popups/src/popup/popup-service.css", "../../../packages/vuu-layout/src/drag-drop/DropMenu.css", "../../../packages/vuu-layout/src/drag-drop/DropTargetRenderer.css", "../../../packages/vuu-layout/src/DraggableLayout.css", "../../../packages/vuu-layout/src/placeholder/Placeholder.css", "../../../packages/vuu-layout/src/flexbox/Splitter.css", "../../../packages/vuu-layout/src/flexbox/Flexbox.css", "../../../packages/vuu-layout/src/flexbox/FluidGrid.css", "../../../packages/vuu-layout/src/layout-view/View.css", "../../../packages/vuu-layout/src/layout-header/Header.css", "../../../packages/vuu-layout/src/palette/Palette.css", "../../../packages/vuu-layout/src/palette/PaletteSalt.css", "../../../packages/vuu-layout/src/stack/Stack.css", "../../../packages/vuu-layout/src/tools/devtools-box/layout-configurator.css", "../../../packages/vuu-layout/src/tools/devtools-tree/layout-tree-viewer.css"],
+  "sourcesContent": [".vuuDialog {\n  background: var(--salt-container-primary-background);\n  border: var(--vuuDialog-border, solid 1px #ccc);\n  border-radius: 5px;\n  padding: var(--vuuDialog-padding, 0);\n  box-shadow: var(--salt-overlayable-shadow, none);\n  height: var(--vuuDialog-height, fit-content);\n  width: var(--vuuDialog-width, fit-content);\n}\n\n.vuuDialog-header {\n  --saltButton-height: 28px;\n  --saltButton-width: 28px;\n\n  --saltToolbar-background: transparent;\n  --saltToolbar-height: calc(var(--salt-size-base) + 5px);\n  border-bottom: solid 1px var(--salt-container-primary-borderColor);\n}\n\n.vuuDialog-header > .Responsive-inner {\n  align-items: center;\n}\n\n.vuuDialog-header > .Responsive-inner > :last-child{\n  right: 2px;\n}\n\n\n", ".vuuDrawer {\n  --drawer-leading-edge-border: solid 1px var(--salt-container-primary-borderColor, none);\n  --vuu-close-icon-svg: var(--svg-chevron-double-right);\n\n  transition: flex-basis;\n  transition-duration: var(--drawer-transition-duration);\n  position: relative;\n  z-index: 1;\n  flex-basis: 0;\n  flex-grow: 1;\n  flex-shrink: 1;\n  min-width: 0;\n  min-height: 0;\n  display: flex;\n}\n\n.vuuDrawer-peekaboo {\n  flex-basis: var(--drawer-peek-size);\n  flex-grow: 0;\n  flex-shrink: 0;\n}\n\n.vuuDrawer-inline.vuuDrawer-open {\n  flex-basis: var(--drawer-size);\n  flex-grow: 0;\n  flex-shrink: 0;\n}\n\n.vuuDrawer-liner {\n  background-color: var(--drawer-bg);\n  overflow: hidden;\n  position: relative;\n}\n\n.vuuDrawer-content {\n  height: 100%;\n  overflow: hidden;\n  position: absolute;\n  top: 0;\n  right: var(--drawer-peek-size);\n  transition: right;\n  transition-duration: var(--drawer-transition-duration);\n  width: 100%;\n  flex: 1 1 100%;\n}\n\n.vuuDrawer-open .vuuDrawer-content {\n  right: 0;\n}\n\n/* .vuuDrawer:not(.vuuDrawer-open) .vuuDrawer-liner > * {\n  display: none;\n} */\n\n.vuuDrawer-left {\n  border-right: var(--drawer-leading-edge-border);\n}\n.vuuDrawer-right {\n  border-left: var(--drawer-leading-edge-border);\n}\n.vuuDrawer-top {\n  border-bottom: var(--drawer-leading-edge-border);\n}\n.vuuDrawer-bottom {\n  border-top: var(--drawer-leading-edge-border);\n}\n\n.vuuDrawer-left .vuuDrawer-liner,\n.vuuDrawer-right .vuuDrawer-liner {\n  height: 100%;\n  transition: width;\n}\n\n.vuuDrawer-top .vuuDrawer-liner,\n.vuuDrawer-bottom .vuuDrawer-liner {\n  width: 100%;\n  transition: height;\n}\n\n.vuuDrawer-inline .vuuDrawer-liner {\n  width: 100%;\n  height: 100%;\n}\n\n.vuuDrawer-over .vuuDrawer-liner {\n  position: absolute;\n  transition-duration: 0.4s;\n}\n\n.vuuDrawer-over.vuuDrawer-left .vuuDrawer-liner {\n  top: 0;\n  left: 0;\n  width: 0;\n}\n\n.vuuDrawer-over.vuuDrawer-right .vuuDrawer-liner {\n  top: 0;\n  right: 0;\n  width: 0;\n}\n\n.vuuDrawer-over.vuuDrawer-top .vuuDrawer-liner {\n  height: 0;\n  top: 0;\n  left: 0;\n}\n\n.vuuDrawer-over.vuuDrawer-bottom .vuuDrawer-liner {\n  bottom: 0;\n  height: 0;\n  left: 0;\n}\n\n.vuuDrawer-left.vuuDrawer-over.vuuDrawer-peekaboo .vuuDrawer-liner,\n.vuuDrawer-right.vuuDrawer-over.vuuDrawer-peekaboo .vuuDrawer-liner {\n  width: var(--drawer-peek-size);\n}\n\n.vuuDrawer-top.vuuDrawer-over.vuuDrawer-peekaboo .vuuDrawer-liner,\n.vuuDrawer-bottom.vuuDrawer-over.vuuDrawer-peekaboo .vuuDrawer-liner {\n  height: var(--drawer-peek-size);\n}\n\n.vuuDrawer-left.vuuDrawer-over.vuuDrawer-open .vuuDrawer-liner,\n.vuuDrawer-right.vuuDrawer-over.vuuDrawer-open .vuuDrawer-liner {\n  width: var(--drawer-size);\n}\n\n.vuuDrawer-top.vuuDrawer-over.vuuDrawer-open .vuuDrawer-liner,\n.vuuDrawer-bottom.vuuDrawer-over.vuuDrawer-open .vuuDrawer-liner {\n  height: var(--drawer-size);\n}\n\n.vuuDrawer-top,\n.vuuDrawer-left {\n  order: 0;\n}\n\n.vuuDrawer-bottom,\n.vuuDrawer-right {\n  order: 99;\n}\n\n.vuuDrawer-left,\n.vuuDrawer-right {\n  flex-direction: column;\n}\n\n.vuuToggleButton-container {\n  --saltButton-height: 28px;\n  --saltButton-width: 28px;\n  --vuu-icon-size: 12px;\n  flex: 0 0 28px;\n}\n\n.vuuDrawer-open {\n  --vuu-close-icon-svg: var(--svg-chevron-double-left);\n\n}\n", ".hwChest {\n  --chest-bg: var(--hw-chest-bg, inherit);\n  --drawer-bg: var(--hw-drawer-bg, inherit);\n  --drawer-size: var(--hw-drawer-size, 200px);\n  --drawer-peek-size: var(--hw-drawer-peek-size, 32px);\n  --drawer-transition-duration: var(--hw-drawer-transition-duration, 0.4s);\n  background-color: var(--chest-bg);\n  display: flex;\n}\n\n.hwChest-horizontal {\n  flex-direction: row;\n}\n\n.hwChest-vertical {\n  flex-direction: column;\n}\n\n.hwChest-content {\n  background-color: var(--chest-bg);\n  flex-grow: 1;\n  flex-shrink: 1;\n  overflow: hidden;\n  /* position: relative; */\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.hwChest-horizontal .hwChest-content {\n  flex-basis: 100%;\n}\n\n.hwChest-vertical .hwChest-content {\n  flex-basis: 100%;\n}\n", ".vuuPopup {\n  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 0;\n  height: 0;\n  overflow: visible;\n  z-index: 1000;\n}\n\n.vuuPopup {\n  position: absolute;\n}\n", ".vuuDropMenu {\n  margin-left: -50%;\n  margin-bottom: -50%;\n  background-color: white;\n  border: solid 1px var(--grey40);\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  padding: 3px;\n  border-radius: 3px;\n}\n\n.vuuDropMenu-left,\n.vuuDropMenu-right {\n  flex-direction: column;\n}\n\n.vuuDropMenu-bottom {\n  transform: translate(0, -30px);\n}\n\n.vuuDropMenu-right {\n  transform: translate(-20px, 0);\n}\n\n.vuuDropMenu-item {\n  --vuu-icon-size: 20px;\n  width: 32px;\n  height: 32px;\n  background-color: var(--grey20);\n  border-bottom: solid 1px var(--grey40);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.vuuDropMenu-item .Icon {\n  transform: scale(1.25);\n  transform-origin: center center;\n}\n\n.vuuDropMenu-left .vuuDropMenu-item .hwIcon {\n  transform: scale(1.25) rotate(180deg);\n  transform-origin: center center;\n}\n\n.vuuDropMenu-top .vuuDropMenu-item .hwIcon {\n  transform: scale(1.25) rotate(270deg);\n  transform-origin: center center;\n}\n\n.vuuDropMenu-bottom .vuuDropMenu-item .hwIcon {\n  transform: scale(1.25) rotate(90deg);\n  transform-origin: center center;\n}\n\n.vuuDropMenu-item .hwIcon-path {\n  fill: grey;\n}\n.vuuDropMenu-item:hover {\n  background-color: rgba(200, 200, 200, 0.5);\n}\n\n.vuuDropMenu-item:hover .hwIcon-path-2 {\n  fill: blue;\n}\n\n.vuuDropMenu-item:last-child {\n  border-bottom: none;\n}\n", "#hw-drag-canvas {\n  visibility: hidden;\n  z-index: 1;\n  position: absolute;\n  top: 0px;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: transparent;\n}\n\n#hw-drag-canvas > svg {\n  position: absolute;\n}\n\n.drawing #hw-drag-canvas {\n  visibility: visible;\n}\n\npath.drop-target {\n  stroke: blue;\n  stroke-width: 4px;\n  fill: transparent;\n}\n\npath.drop-target.centre {\n  stroke: red;\n}\n\n#vuu-drop-outline {\n  fill: rgba(0,0,255,.3);\n  stroke: none;\n  stroke-dasharray: 4 2;\n}\n\n#hw-drop-guides {\n  fill: none;\n  stroke: rgba(0, 0, 0, 0.3);\n  stroke-dasharray: 2 3;\n}\n", ".DraggableLayout {\n  display: inline-block;\n  outline: none;\n}\n\n[data-dragging='true'] {\n  position: absolute !important;\n  z-index: 100;\n}\n\n.vuuSimpleDraggableWrapper {\n  background-color: white;\n  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.2);\n}\n.vuuSimpleDraggableWrapper > * {\n  height: 100%;\n  width: 100%;\n}\n", ".vuuPlaceholder {\n  flex-basis: 0;\n  flex-grow: 1;\n  flex-shrink: 1;\n}\n\n.vuuPlaceholder-shim {\n  flex-grow: 0;\n  flex-shrink: 0;\n}\n", ".Splitter {\n  --splitter-size: 3px;\n  --splitter-border-width: 4px;\n  --splitter-border-style: none;\n  --splitter-border-color: white;\n\n  align-items: center;\n  background-color: var(--grey60);\n  border-color: var(--splitter-border-color);\n  border-style: var(--splitter-border-style);\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n  position: relative;\n  outline: none;\n  z-index: 1;\n}\n\n.Splitter:hover {\n  background-color: var(--grey40);\n}\n.active.Splitter {\n  background-color: var(--blue500);\n}\n\n.Splitter.column {\n  cursor: ns-resize;\n  height: var(--splitter-size);\n  border-width: var(--splitter-border-width) 0;\n}\n\n.Splitter:not(.column) {\n  cursor: ew-resize;\n  width: var(--splitter-size);\n  border-width: 0 var(--splitter-border-width);\n}\n\n.Splitter:before {\n  border: none;\n  border-radius: 0;\n  content: '';\n  display: block;\n  padding: 0;\n}\n\n.Splitter .grab-zone {\n  position: absolute;\n  background-color: rgba(255, 0, 0, 0.01);\n  cursor: inherit;\n}\n\n.Splitter.column .grab-zone {\n  left: 0;\n  right: 0;\n  top: -5px;\n  bottom: -5px;\n}\n\n.Splitter:not(column) .grab-zone {\n  left: -5px;\n  right: -5px;\n  top: 0;\n  bottom: 0;\n}\n\n.Splitter:not(.column):before {\n  width: 1px;\n  height: 10px;\n  background: linear-gradient(\n    to bottom,\n    var(--grey900) 10%,\n    transparent 10%,\n    transparent 30%,\n    var(--grey900) 30%,\n    var(--grey900) 40%,\n    transparent 40%,\n    transparent 60%,\n    var(--grey900) 60%,\n    var(--grey900) 70%,\n    transparent 70%,\n    transparent 90%,\n    var(--grey900) 90%\n  );\n}\n\n.active.Splitter.column:before {\n  background: linear-gradient(\n    to right,\n    #ffffff 10%,\n    transparent 10%,\n    transparent 30%,\n    #ffffff 30%,\n    #ffffff 40%,\n    transparent 40%,\n    transparent 60%,\n    #ffffff 60%,\n    #ffffff 70%,\n    transparent 70%,\n    transparent 90%,\n    #ffffff 90%\n  );\n}\n\n.active.Splitter:not(.column):before {\n  background: linear-gradient(\n    to bottom,\n    #ffffff 10%,\n    transparent 10%,\n    transparent 30%,\n    #ffffff 30%,\n    #ffffff 40%,\n    transparent 40%,\n    transparent 60%,\n    #ffffff 60%,\n    #ffffff 70%,\n    transparent 70%,\n    transparent 90%,\n    #ffffff 90%\n  );\n}\n\n.Splitter.column:before {\n  width: 10px;\n  height: 1px;\n  background: linear-gradient(\n    to right,\n    var(--grey900) 10%,\n    transparent 10%,\n    transparent 30%,\n    var(--grey900) 30%,\n    var(--grey900) 40%,\n    transparent 40%,\n    transparent 60%,\n    var(--grey900) 60%,\n    var(--grey900) 70%,\n    transparent 70%,\n    transparent 90%,\n    var(--grey900) 90%\n  );\n}\n", ":root {\n  --hw-space-unit: 4px;\n  --hw-flex-gap: 3;\n  --hw-fluid-grid-col-bg: rgba(200, 200, 200, 0.3);\n}\n\n.hwFlexbox {\n  background-color: var(--container1-background);\n  box-sizing: border-box;\n  display: flex;\n  gap: calc(var(--spacing) * var(--space));\n  min-height: 0;\n  min-width: 0;\n  overflow: hidden;\n}\n\n.hwFlexbox-column {\n  flex-direction: column;\n}\n\n.hwFlexbox-row {\n  flex-direction: row;\n}\n\n.hwFlexbox > .Splitter {\n  flex-basis: auto;\n  flex-grow: 0;\n  flex-shrink: 0;\n}\n\n.hwFlexbox.full-page {\n  height: 100vh;\n  width: 100vw;\n}\n\n.flex-fill {\n  border-color: red;\n  flex: 0;\n  flex-grow: 1;\n  flex-shrink: 1;\n}\n\n.vuuView.flex-fill {\n  border-color: red;\n}\n", ":root {\n  --hw-space-unit: 4px;\n  --hw-fluid-grid-col-bg: rgba(252, 209, 232, 0.7);\n}\n\n.hwFluidGrid {\n  --gap: var(--gutter-width);\n\n  display: flex;\n  gap: calc(var(--grid-gap) * var(--hw-space-unit));\n  flex-wrap: wrap;\n  padding: 0;\n}\n\n.hwFluidGrid > * {\n  --gutter-width: calc(var(--hw-flex-gap) * var(--hw-space-unit));\n  --gutter-count: calc(var(--parent-col-count) - 1);\n  --total-gutter-width: calc(var(--gutter-count) * var(--gutter-width));\n  --available-width: calc(100% - var(--total-gutter-width));\n\n  flex-basis: 0;\n  flex-grow: 1;\n  flex-shrink: 1;\n  position: relative;\n}\n\n.hwFluidGrid > *:after {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: dashed 2px blue;\n}\n\n.hwFluidGrid > [data-xs] {\n  --internal-gutter-count: calc(var(--col-span) - 1);\n  --percent-width: calc(var(--col-span) / var(--parent-col-count));\n  --internal-gutter-width: calc(var(--internal-gutter-count) * var(--gutter-width));\n  flex-basis: calc(var(--available-width) * var(--percent-width) + var(--internal-gutter-width));\n  flex-grow: 0;\n}\n\n.hwFluidGrid > [data-xs='1'] {\n  --col-span: 1;\n}\n.hwFluidGrid > [data-xs='2'] {\n  --col-span: 2;\n}\n.hwFluidGrid > [data-xs='3'] {\n  --col-span: 3;\n}\n\n.hwFluidGrid > [data-xs='4'] {\n  --col-span: 4;\n}\n\n.hwFluidGrid > [data-xs='6'] {\n  --col-span: 6;\n}\n\n.hwFluidGrid > [data-xs='8'] {\n  --col-span: 8;\n}\n\n.hwFluidGrid > [data-xs='9'] {\n  --col-span: 9;\n}\n.hwFluidGrid > [data-xs='10'] {\n  --col-span: 10;\n}\n.hwFluidGrid > [data-xs='11'] {\n  --col-span: 11;\n}\n\n.hwFluidGrid > [data-xs='12'] {\n  --col-span: 12;\n}\n\n@media (min-width: 600px) {\n  .hwFluidGrid > [data-sm='1'] {\n    --col-span: 1;\n  }\n  .hwFluidGrid > [data-sm='2'] {\n    --col-span: 2;\n  }\n\n  .hwFluidGrid > [data-sm='3'] {\n    --col-span: 3;\n  }\n\n  .hwFluidGrid > [data-sm='4'] {\n    --col-span: 4;\n  }\n\n  .hwFluidGrid > [data-sm='6'] {\n    --col-span: 6;\n  }\n\n  .hwFluidGrid > [data-sm='8'] {\n    --col-span: 8;\n  }\n  .hwFluidGrid > [data-sm='9'] {\n    --col-span: 9;\n  }\n  .hwFluidGrid > [data-sm='10'] {\n    --col-span: 10;\n  }\n  .hwFluidGrid > [data-sm='11'] {\n    --col-span: 11;\n  }\n  .hwFluidGrid > [data-sm='12'] {\n    --col-span: 12;\n  }\n}\n\n/* Display the grid background */\n\n.hwFluidGrid-show-grid {\n  --gutter-width: calc(var(--hw-flex-gap) * var(--hw-space-unit));\n  --grid-gutter-count: calc(var(--grid-col-count, var(--parent-col-count)) - 1);\n  --grid-total-gutter-width: calc(var(--grid-gutter-count) * var(--gutter-width));\n  --grid-available-width: calc(100% - var(--grid-total-gutter-width));\n  --grid-percent-width: calc(1 / var(--grid-col-count, var(--parent-col-count)));\n  --column-width: calc(var(--grid-available-width) * var(--grid-percent-width));\n  background: repeating-linear-gradient(\n    to right,\n    var(--hw-fluid-grid-col-bg) 0,\n    var(--hw-fluid-grid-col-bg) var(--column-width),\n    white var(--column-width),\n    white calc(var(--column-width) + var(--gutter-width))\n  );\n}\n", ".vuuView {\n  border-color: var(--vuuView-borderColor, var(--salt-container-primary-borderColor));\n  border-width: var(--vuuView-borderWidth, 1px);\n  border-style: var(--vuuView-borderStyle, none);\n\n  display: flex;\n  flex-direction: column;\n  margin: var(--vuuView-margin, 0px);\n  min-height: 50px;\n  min-width: 50px;\n  outline: none;\n  overflow: hidden;\n  position: relative;\n}\n\n.vuuView.focus-visible:after {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: dotted cornflowerblue 2px;\n}\n\n.vuuView.dragging {\n  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);\n}\n\n.vuuView-main {\n  /* height: var(--view-content-height);\n  width: var(--view-content-width); */\n  display: flex;\n  flex-direction: var(--vuuView-flexDirection, column);\n  flex-wrap: var(--vuuView-flex-wrap, nowrap);\n  flex: 1;\n  overflow: hidden;\n  position: relative;\n}\n\n.vuuView-main > * {\n  flex-basis: auto;\n  flex-grow: var(--vuuView-flex-grow, 1);\n  flex-shrink: var(--vuuView-flex-shrink, 1);\n}\n\n.vuuView-collapsed .vuuView-main {\n  display: none;\n}\n\n.vuuView-collapsed + .Splitter {\n  display: none;\n}\n\n.vuuView-collapsed .Toolbar-vertical {\n  border-right: solid 1px var(--grey40);\n}\n\n.vuuView-collapsed .Toolbar-vertical .toolbar-title {\n  display: none;\n}\n", ".vuuHeader {\n  --saltToolbar-background: var(--salt-container-tertiary-background);\n}\n\n.salt-density-high .vuuHeader {\n--saltToolbarField-marginTop: 0;\n}\n\n", ".vuuPalette-horizontal {\n  align-items: center;\n  display: flex;\n}\n\n.vuuPaletteItem {\n  --vuu-icon-color: var(--salt-separable-primary-borderColor);\n  --vuu-icon-inset: calc(50% - 12px) auto auto -3px;\n  --vuu-icon-height: 24px;\n  --vuu-icon-width: 24px;\n  --list-item-text-padding: 0 0 0 calc(var(--salt-size-unit) * 3);\n}\n\n.vuuPaletteItem[data-draggable]:after {\n  height: 22px;\n  width: 6px;\n  content: \"\";\n  position: absolute;\n\n  background-image: \n  linear-gradient(45deg, rgb(180, 183, 190) 25%, transparent 25%),\n  linear-gradient(-45deg, rgb(180, 183, 190) 25%, transparent 25%),\n  linear-gradient(45deg, transparent 75%, rgb(180, 183, 190) 25%),\n  linear-gradient(-45deg, transparent 75%, rgb(180, 183, 190) 25%);\n  background-size: 4px 4px;\n  background-position: 0 0, 2px 0, 2px -2px, 0 2px;  \n\n}\n\n.vuuSimpleDraggableWrapper > .vuuPaletteItem {\n  --vuu-icon-color: var(--salt-selectable-foreground);\n\n}", ".vuuPalette {\n  --list-item-header-bg: inherit;\n  --list-item-header-color: inherit;\n  --list-item-padding: 0 6px 0 24px;\n  --list-item-header-twisty-color: black;\n  --list-item-header-twisty-left: 3px;\n  --list-item-header-twisty-right: auto;\n}\n\n", ".Tabs {\n  display: flex;\n  box-sizing: border-box;\n  flex-direction: column;\n}\n\n.Tabs-horizontal {\n  flex-direction: row;\n}\n\n.Tabs .Toolbar:before {\n  left: 0;\n  width: 100%;\n  bottom: 0;\n  height: 1px;\n  content: '';\n  position: absolute;\n  background: var(--grey60);\n}\n\n.vuuTabHeader {\n  --saltTabs-activationIndicator-background: transparent;\n  --saltToolbarField-marginTop: calc(var(--salt-size-unit) - 1px);\n  border-bottom: solid 1px var(--salt-container-primary-borderColor);\n}\n\n.vuuTabHeader + .hwFlexbox,\n.vuuTabHeader + * {\n  flex: 1;\n}\n\n.vuuTabHeader + .vuuView > .vuuHeader {\n  height: 0;\n  overflow: hidden;\n}\n\n.Layout-svg-button {\n  --spacing-medium: 5px;\n}\n", "[data-design-mode='true'] .Component {\n  filter: grayscale(100%);\n  opacity: 0.4;\n}\n\n[data-design-mode='true'] .Component:after {\n  color: black;\n  content: 'Component';\n  height: 12px;\n  background-color: yellow;\n}\n\n.LayoutConfigurator {\n  --margin-color: #f3cea5;\n  --border-color: #fddda0;\n  --padding-color: #c6d092;\n  --content-color: #8cb6c0;\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  background-color: var(--margin-color);\n}\n\n.LayoutConfigurator .layout-outer {\n  flex: 1 1 auto;\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n}\n\n.LayoutBox {\n  --hw-control-font-size: 13px;\n  --hw-text-input-bg: rgba(255, 255, 255, 0.3);\n  --hwTextInput-padding: 3px;\n  --hw-text-input-position: absolute;\n  --hwTextInput-width: 30px;\n\n  flex: 1 1 auto;\n}\n\n.LayoutBox > .layout-top {\n  flex: 0 0 40px;\n  padding-left: 12px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  position: relative;\n}\n\n.LayoutBox > .layout-bottom {\n  flex: 0 0 40px;\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n\n.LayoutBox > .layout-inner > .layout-right,\n.LayoutBox > .layout-inner > .layout-left {\n  flex: 0 0 40px;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n}\n\n.layout-top,\n.layout-bottom {\n  --hw-text-input-margin: 0 0 0 -15px;\n}\n\n.layout-top > .layout-input,\n.layout-bottom > .layout-input {\n  left: 50%;\n}\n\n.LayoutBox > .layout-inner {\n  flex: 1 1 auto;\n  display: flex;\n  flex-direction: row;\n  align-items: stretch;\n}\n\n.LayoutBox.layout-margin {\n  background-color: var(--margin-color);\n  border: dashed 2px black;\n}\n\n.LayoutBox.layout-border {\n  background-color: var(--border-color);\n  border: solid 2px black;\n}\n\n.LayoutBox.layout-padding {\n  background-color: var(--padding-color);\n  border: dashed 2px black;\n}\n\n.LayoutBox .layout-content {\n  flex: 1 1 auto;\n  background-color: var(--content-color);\n  border: solid 2px #808080;\n}\n\n.LayoutBox .layout-title {\n  color: #161616;\n  font-size: 11px;\n  left: 4px;\n  line-height: 15px;\n  position: absolute;\n  top: 1px;\n}\n", ".hwLayoutTreeViewer {\n}\n\n.hwLayoutTreeNode {\n  cursor: default;\n}\n\n.hwLayoutTreeNode:hover {\n  background-color: rgba(255, 255, 255, 0.2);\n}\n\n.hwLayoutTreeNode[aria-selected='true'] {\n  background-color: cornflowerblue;\n  color: white;\n}\n"],
+  "mappings": "AAAA,WACE,oDACA,+CAFF,kBAIE,oCACA,gDACA,4CACA,0CAGF,kBACE,0BACA,yBAEA,sCACA,wDACA,kEAGF,oCACE,mBAGF,gDACE,UCxBF,WACE,wFACA,sDAEA,sBACA,sDACA,kBACA,UACA,aACA,YACA,cACA,YACA,aACA,aAGF,oBACE,mCACA,YACA,cAGF,iCACE,8BACA,YACA,cAGF,iBACE,kCACA,gBACA,kBAGF,mBACE,YACA,gBACA,kBACA,MACA,8BACA,iBACA,sDACA,WACA,cAGF,mCACE,QAOF,gBACE,+CAEF,iBACE,8CAEF,eACE,gDAEF,kBACE,6CAGF,mEAEE,YACA,iBAGF,mEAEE,WACA,kBAGF,mCACE,WACA,YAGF,iCACE,kBACA,wBAGF,gDACE,MACA,OACA,QAGF,iDACE,MACA,QACA,QAGF,+CACE,SACA,MACA,OAGF,kDACE,SACA,SACA,OAGF,uIAEE,8BAGF,uIAEE,+BAGF,+HAEE,yBAGF,+HAEE,0BAGF,+BAEE,QAGF,mCAEE,SAGF,iCAEE,sBAGF,2BACE,0BACA,yBACA,sBACA,cAGF,gBACE,qDC5JF,SACE,wCACA,0CACA,4CACA,qDACA,wEACA,iCACA,aAGF,oBACE,mBAGF,kBACE,sBAGF,iBACE,iCACA,YACA,cACA,gBAEA,aACA,mBACA,uBAGF,wEACE,gBC9BF,UACE,gCACA,kBACA,MACA,OACA,QACA,SACA,iBACA,aAGF,UACE,kBCZF,aACE,iBACA,mBACA,sBACA,+BACA,oBACA,uBACA,mBAPF,8BAYA,qCAEE,sBAGF,oBACE,4BAGF,mBACE,2BAGF,kBACE,sBACA,WACA,YACA,+BACA,sCACA,eACA,aACA,mBACA,uBAGF,wBACE,sBACA,+BAGF,4CACE,qCACA,+BAGF,2CACE,qCACA,+BAGF,8CACE,oCACA,+BAGF,+BACE,UAEF,wBACE,2BAGF,uCACE,UAGF,6BACE,mBCrEF,gBACE,kBACA,UACA,kBACA,QACA,OACA,QACA,SACA,6BAGF,oBACE,kBAGF,yBACE,mBAGF,iBACE,YACA,iBACA,iBAGF,wBACE,WAGF,kBACE,eACA,YACA,qBAGF,gBACE,UACA,iBACA,qBCtCF,iBACE,qBACA,aAGF,qBACE,4BACA,YAGF,2BACE,sBACA,4BAEF,6BACE,YACA,WChBF,gBACE,aACA,YACA,cAGF,qBACE,YACA,cCRF,UACE,qBACA,6BACA,8BACA,+BAEA,mBACA,+BACA,0CACA,0CACA,sBACA,aACA,uBACA,kBACA,aACA,UAGF,gBACE,+BAEF,iBACE,gCAGF,iBACE,iBACA,4BACA,4CAGF,uBACE,iBACA,2BACA,4CAGF,iBACE,YAtCF,gBAwCE,WACA,cAzCF,UA6CA,qBACE,kBACA,2BACA,eAGF,4BACE,OACA,QACA,SACA,YAGF,iCACE,UACA,WACA,MACA,SAGF,8BACE,UACA,YACA,wPAiBF,+BACE,6MAiBF,qCACE,8MAiBF,wBACE,WACA,WACA,uPC5HF,MACE,qBACA,iBACA,gDAGF,WACE,8CACA,sBACA,aACA,wCACA,aACA,YACA,gBAGF,kBACE,sBAGF,eACE,mBAGF,qBACE,gBACA,YACA,cAGF,qBACE,aACA,YAGF,WACE,iBACA,OACA,YACA,cAGF,mBACE,iBC3CF,MACE,qBACA,gDAGF,aACE,2BAEA,aACA,iDACA,eAVF,UAcA,eACE,gEACA,kDACA,sEACA,0DAEA,aACA,YACA,cACA,kBAGF,qBACE,WACA,kBACA,MACA,OACA,QACA,SACA,uBAGF,uBACE,mDACA,iEACA,kFACA,8FACA,YAGF,2BACE,cAEF,2BACE,cAEF,2BACE,cAGF,2BACE,cAGF,2BACE,cAGF,2BACE,cAGF,2BACE,cAEF,4BACE,eAEF,4BACE,eAGF,4BACE,eAGF,0BACE,2BACE,cAEF,2BACE,cAGF,2BACE,cAGF,2BACE,cAGF,2BACE,cAGF,2BACE,cAEF,2BACE,cAEF,4BACE,eAEF,4BACE,eAEF,4BACE,gBAMJ,uBACE,gEACA,8EACA,gFACA,oEACA,+EACA,8EACA,6MC9HF,SACE,mFACA,6CACA,8CAEA,aACA,sBACA,kCACA,gBACA,eACA,aACA,gBACA,kBAGF,6BACE,WACA,kBACA,MACA,OACA,QACA,SACA,iCAGF,kBACE,gCAGF,cAGE,aACA,oDACA,2CACA,OACA,gBACA,kBAGF,gBACE,gBACA,sCACA,0CAGF,iCACE,aAGF,6BACE,aAGF,qCACE,qCAGF,oDACE,aC3DF,WACE,oEAGF,8BACA,gCCLA,uBACE,mBACA,aAGF,gBACE,4DACA,iDACA,wBACA,uBACA,gEAGF,sCACE,YACA,UACA,WACA,kBAEA,mQAKA,wBACA,6CAIF,2CACE,oDC9BF,YACE,+BACA,kCACA,kCACA,uCACA,oCACA,sCCNF,MACE,aACA,sBACA,sBAGF,iBACE,mBAGF,sBACE,OACA,WACA,SACA,WACA,WACA,kBACA,yBAGF,cACE,uDACA,gEACA,kEAGF,yCAEE,OAGF,kCACE,SACA,gBAGF,mBACE,sBCrCF,mCACE,uBACA,WAGF,yCACE,WACA,oBACA,YACA,sBAGF,oBACE,wBACA,wBACA,yBACA,yBACA,aACA,sBACA,oBACA,qCAGF,kCACE,cACA,aACA,sBACA,oBAGF,WACE,6BACA,4CACA,2BACA,mCACA,0BAEA,cAGF,uBACE,cACA,kBACA,aACA,mBACA,mBACA,kBAGF,0BACE,cACA,kBACA,aACA,mBACA,mBAGF,6EAEE,cACA,aACA,sBACA,uBACA,mBAGF,2BAEE,oCAGF,uDAEE,SAGF,yBACE,cACA,aACA,mBACA,oBAGF,yBACE,qCACA,wBAGF,yBACE,qCACA,uBAGF,0BACE,sCACA,wBAGF,2BACE,cACA,sCACA,yBAGF,yBACE,cACA,eACA,SACA,iBACA,kBACA,QC3GF,kBACE,eAGF,wBACE,uBAGF,sCACE,yBACA",
+  "names": []
+}

package/package.json

@@ -1,22 +1,27 @@
 {
   "name": "@vuu-ui/vuu-layout",
-  "version": "0.5.15",
+  "version": "0.5.16",
   "description": "VUU Layout Components",
-  "main": "src/index.ts",
   "author": "heswell",
   "license": "Apache-2.0",
-  "scripts": {
-    "build": "node ../../scripts/run-build.mjs",
-    "type-defs": "node ../../scripts/build-type-defs.mjs"
-  },
-  "types": "src/index.ts",
   "peerDependencies": {
     "@salt-ds/core": "1.0.0",
     "@salt-ds/icons": "1.0.0",
     "@heswell/salt-lab": "1.0.0-alpha.0",
-    "@vuu-ui/vuu-utils": "0.5.15",
+    "@vuu-ui/vuu-utils": "0.5.16",
     "classnames": "^2.2.6",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
-  }
-}
+  },
+  "files": [
+    "cjs",
+    "esm",
+    "index.css",
+    "index.css.map",
+    "README.md",
+    "/types"
+  ],
+  "module": "esm/index.js",
+  "main": "cjs/index.js",
+  "types": "types/index.d.ts"
+}

package/types/vuu-layout/src/Component.d.ts

@@ -0,0 +1,7 @@
+import React, { HTMLAttributes } from 'react';
+import './Component.css';
+export interface ComponentProps extends HTMLAttributes<HTMLDivElement> {
+    resizeable?: boolean;
+}
+declare const Component: React.FunctionComponent<ComponentProps>;
+export default Component;

package/types/vuu-layout/src/DraggableLayout.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import './DraggableLayout.css';
+export declare const DraggableLayout: {
+    (props: any): JSX.Element;
+    displayName: string;
+};

package/types/vuu-layout/src/chest-of-drawers/Chest.d.ts

@@ -0,0 +1,10 @@
+import { HTMLAttributes, ReactElement } from "react";
+import "./Chest.css";
+export interface ChestProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactElement[];
+}
+declare const Chest: {
+    (props: ChestProps): JSX.Element;
+    displayName: string;
+};
+export default Chest;

package/types/vuu-layout/src/chest-of-drawers/Drawer.d.ts

@@ -0,0 +1,18 @@
+import { HTMLAttributes } from "react";
+import "./Drawer.css";
+export interface DrawerProps extends HTMLAttributes<HTMLDivElement> {
+    clickToOpen?: boolean;
+    defaultOpen: boolean;
+    inline?: boolean;
+    open?: boolean;
+    peekaboo?: boolean;
+    position?: "left" | "right" | "top" | "bottom";
+    sizeOpen?: number;
+    sizeClosed?: number;
+    toggleButton?: "start" | "end";
+}
+declare const Drawer: {
+    ({ children, className: classNameProp, clickToOpen, defaultOpen, sizeOpen, sizeClosed, style: styleProp, open: openProp, position, inline, onClick, peekaboo, toggleButton, ...props }: DrawerProps): JSX.Element;
+    displayName: string;
+};
+export default Drawer;

package/types/vuu-layout/src/common-types.d.ts

@@ -0,0 +1,8 @@
+export interface rect {
+    bottom: number;
+    left: number;
+    right: number;
+    top: number;
+}
+export declare type rectTuple = [number, number, number, number];
+export declare type dimension = 'width' | 'height';

package/types/vuu-layout/src/debug.d.ts

@@ -0,0 +1,2 @@
+import { ReactElement } from 'react';
+export declare const tree: (el: ReactElement, depth?: number) => string;

package/types/vuu-layout/src/drag-drop/BoxModel.d.ts

@@ -0,0 +1,143 @@
+import { ReactElement } from "react";
+import { LayoutModel } from "../layout-reducer";
+import { DragDropRect, DropPos, RelativePosition } from "./dragDropTypes";
+export declare const positionValues: {
+    north: number;
+    east: number;
+    south: number;
+    west: number;
+    header: number;
+    centre: number;
+    absolute: number;
+};
+export declare const RelativeDropPosition: {
+    AFTER: RelativePosition;
+    BEFORE: RelativePosition;
+};
+export declare const Position: Readonly<{
+    North: Readonly<{
+        offset: number;
+        valueOf: () => number;
+        toString: () => "header" | "absolute" | "north" | "east" | "south" | "west" | "centre";
+        North: boolean;
+        South: boolean;
+        East: boolean;
+        West: boolean;
+        Header: boolean;
+        Centre: boolean;
+        NorthOrSouth: boolean;
+        EastOrWest: boolean;
+        NorthOrWest: boolean;
+        SouthOrEast: boolean;
+        Absolute: boolean;
+    }>;
+    East: Readonly<{
+        offset: number;
+        valueOf: () => number;
+        toString: () => "header" | "absolute" | "north" | "east" | "south" | "west" | "centre";
+        North: boolean;
+        South: boolean;
+        East: boolean;
+        West: boolean;
+        Header: boolean;
+        Centre: boolean;
+        NorthOrSouth: boolean;
+        EastOrWest: boolean;
+        NorthOrWest: boolean;
+        SouthOrEast: boolean;
+        Absolute: boolean;
+    }>;
+    South: Readonly<{
+        offset: number;
+        valueOf: () => number;
+        toString: () => "header" | "absolute" | "north" | "east" | "south" | "west" | "centre";
+        North: boolean;
+        South: boolean;
+        East: boolean;
+        West: boolean;
+        Header: boolean;
+        Centre: boolean;
+        NorthOrSouth: boolean;
+        EastOrWest: boolean;
+        NorthOrWest: boolean;
+        SouthOrEast: boolean;
+        Absolute: boolean;
+    }>;
+    West: Readonly<{
+        offset: number;
+        valueOf: () => number;
+        toString: () => "header" | "absolute" | "north" | "east" | "south" | "west" | "centre";
+        North: boolean;
+        South: boolean;
+        East: boolean;
+        West: boolean;
+        Header: boolean;
+        Centre: boolean;
+        NorthOrSouth: boolean;
+        EastOrWest: boolean;
+        NorthOrWest: boolean;
+        SouthOrEast: boolean;
+        Absolute: boolean;
+    }>;
+    Header: Readonly<{
+        offset: number;
+        valueOf: () => number;
+        toString: () => "header" | "absolute" | "north" | "east" | "south" | "west" | "centre";
+        North: boolean;
+        South: boolean;
+        East: boolean;
+        West: boolean;
+        Header: boolean;
+        Centre: boolean;
+        NorthOrSouth: boolean;
+        EastOrWest: boolean;
+        NorthOrWest: boolean;
+        SouthOrEast: boolean;
+        Absolute: boolean;
+    }>;
+    Centre: Readonly<{
+        offset: number;
+        valueOf: () => number;
+        toString: () => "header" | "absolute" | "north" | "east" | "south" | "west" | "centre";
+        North: boolean;
+        South: boolean;
+        East: boolean;
+        West: boolean;
+        Header: boolean;
+        Centre: boolean;
+        NorthOrSouth: boolean;
+        EastOrWest: boolean;
+        NorthOrWest: boolean;
+        SouthOrEast: boolean;
+        Absolute: boolean;
+    }>;
+    Absolute: Readonly<{
+        offset: number;
+        valueOf: () => number;
+        toString: () => "header" | "absolute" | "north" | "east" | "south" | "west" | "centre";
+        North: boolean;
+        South: boolean;
+        East: boolean;
+        West: boolean;
+        Header: boolean;
+        Centre: boolean;
+        NorthOrSouth: boolean;
+        EastOrWest: boolean;
+        NorthOrWest: boolean;
+        SouthOrEast: boolean;
+        Absolute: boolean;
+    }>;
+}>;
+export interface Measurements {
+    [key: string]: DragDropRect;
+}
+export declare class BoxModel {
+    static measure(model: ReactElement, dropTargetPaths?: string[]): Measurements;
+    static allBoxesContainingPoint(layout: LayoutModel, measurements: Measurements, x: number, y: number, validDropTargets?: string[]): LayoutModel[];
+}
+export declare function pointPositionWithinRect(x: number, y: number, rect: DragDropRect, borderZone?: number): {
+    pctX: number;
+    pctY: number;
+    closeToTheEdge: number;
+};
+export declare function getPosition(x: number, y: number, rect: DragDropRect, targetOrientation?: "row" | "column"): DropPos;

package/types/vuu-layout/src/drag-drop/DragState.d.ts

@@ -0,0 +1,46 @@
+import { DragDropRect } from './dragDropTypes';
+export declare type IntrinsicSizes = {
+    height?: number;
+    width?: number;
+};
+interface ZoneRange {
+    hi: number;
+    lo: number;
+}
+declare type DragConstraint = {
+    zone: {
+        x: ZoneRange;
+        y: ZoneRange;
+    };
+    pos: {
+        x: ZoneRange;
+        y: ZoneRange;
+    };
+    mouse: {
+        x: ZoneRange;
+        y: ZoneRange;
+    };
+};
+interface ExtendedZoneRange {
+    lo: boolean;
+    hi: boolean;
+    mousePct: number;
+    mousePos: number;
+    pos: number;
+}
+export declare class DragState {
+    constraint: DragConstraint;
+    x: ExtendedZoneRange;
+    y: ExtendedZoneRange;
+    intrinsicSize: IntrinsicSizes | undefined;
+    constructor(zone: DragDropRect, mouseX: number, mouseY: number, measurements: DragDropRect, intrinsicSize?: IntrinsicSizes);
+    init(zone: DragDropRect, mouseX: number, mouseY: number, rect: DragDropRect, intrinsicSize?: IntrinsicSizes): void;
+    outOfBounds(): boolean;
+    inBounds(): boolean;
+    dropX(): number;
+    dropY(): number;
+    hasIntrinsicSize(): number | undefined;
+    update(xy: 'x' | 'y', mousePos: number): boolean;
+    private dropXY;
+}
+export {};

package/types/vuu-layout/src/drag-drop/Draggable.d.ts

@@ -0,0 +1,23 @@
+import { ReactElement } from "react";
+import { rect } from "../common-types";
+import { IntrinsicSizes } from "./DragState";
+import { DropTarget } from "./DropTarget";
+export declare type DragStartCallback = (e: MouseEvent, x: number, y: number) => void;
+export declare type DragMoveCallback = (x: number | undefined, y: number | undefined) => void;
+export declare type DragEndCallback = (droppedTarget: Partial<DropTarget>) => void;
+export declare type DragInstructions = {
+    DoNotRemove?: boolean;
+    DoNotTransform?: boolean;
+    dragThreshold?: number;
+    RemoveDraggableOnDragEnd?: boolean;
+};
+export declare const Draggable: {
+    handleMousedown(e: MouseEvent, dragStartCallback: DragStartCallback, dragInstructions?: DragInstructions): void;
+    initDrag(rootContainer: ReactElement, dragContainerPath: string, { top, left, right, bottom }: rect, dragPos: {
+        x: number;
+        y: number;
+    }, dragHandler: {
+        drag: DragMoveCallback;
+        drop: DragEndCallback;
+    }, intrinsicSize?: IntrinsicSizes, dropTargets?: string[]): string;
+};

package/types/vuu-layout/src/drag-drop/DropMenu.d.ts

@@ -0,0 +1,10 @@
+import { HTMLAttributes } from "react";
+import { DropTarget } from "./DropTarget";
+import "./DropMenu.css";
+export declare function computeMenuPosition(dropTarget: DropTarget, offsetTop?: number, offsetLeft?: number): [number, number, "left" | "bottom" | "right" | "top"];
+export interface DropMenuProps extends HTMLAttributes<HTMLDivElement> {
+    dropTarget: DropTarget;
+    onHover: (target: DropTarget | null) => void;
+    orientation?: "left" | "top" | "right" | "bottom";
+}
+export declare const DropMenu: ({ className, dropTarget, onHover, orientation, }: DropMenuProps) => JSX.Element;

package/types/vuu-layout/src/drag-drop/DropTarget.d.ts

@@ -0,0 +1,61 @@
+import { rectTuple } from "../common-types";
+import { LayoutModel } from "../layout-reducer";
+import { Measurements } from "./BoxModel";
+import { DragDropRect, DropPos, DropPosTab } from "./dragDropTypes";
+import { DragState } from "./DragState";
+export declare const isTabstrip: (dropTarget: DropTarget) => boolean | undefined;
+export interface DropTargetProps {
+    component: LayoutModel;
+    pos: DropPos;
+    clientRect: DragDropRect;
+    nextDropTarget: DropTarget | null;
+}
+export declare type GuideLine = [
+    number,
+    number,
+    number,
+    number,
+    number,
+    number,
+    number,
+    number
+];
+export interface TargetDropOutline {
+    l: number;
+    r: number;
+    t: number;
+    b: number;
+    tabLeft?: number;
+    tabWidth?: number;
+    tabHeight?: number;
+    guideLines?: GuideLine;
+}
+export declare class DropTarget {
+    private active;
+    box: unknown;
+    clientRect: DragDropRect;
+    component: LayoutModel;
+    dropRect: rectTuple | undefined;
+    nextDropTarget: DropTarget | null;
+    pos: DropPos;
+    constructor({ component, pos, clientRect, nextDropTarget, }: DropTargetProps);
+    targetTabPos(tab: DropPosTab): number;
+    /**
+     * Determine what will be rendered by the dropTargetRenderer
+     *
+     * @param {*} lineWidth
+     * @param {*} dragState
+     * @returns {l, t, r, b, tabLeft, tabWidth, tabHeight}
+     */
+    getTargetDropOutline(lineWidth: number, dragState?: DragState): TargetDropOutline;
+    getDropTabOutline(lineWidth: number, tab: DropPosTab): TargetDropOutline;
+    getIntrinsicDropRect(dragState: DragState): TargetDropOutline;
+    /**
+     * @returns  [left, top, right, bottom]
+     */
+    getDropRectOutline(lineWidth: number, dragState?: DragState): number[] | null;
+    activate(): this;
+    toArray(this: DropTarget): DropTarget[];
+    static getActiveDropTarget(dropTarget: DropTarget | null): DropTarget | null;
+}
+export declare function identifyDropTarget(x: number, y: number, rootLayout: LayoutModel, measurements: Measurements, intrinsicSize?: number, validDropTargets?: string[]): DropTarget | null;

package/types/vuu-layout/src/drag-drop/DropTargetRenderer.d.ts

@@ -0,0 +1,18 @@
+import { DragDropRect } from "./dragDropTypes";
+import { DragState } from "./DragState";
+import { DropTarget } from "./DropTarget";
+import "./DropTargetRenderer.css";
+declare type Point = [number, number];
+declare type TabMode = "full-view" | "tab-only";
+export default class DropTargetCanvas {
+    private currentPath;
+    private tabMode;
+    constructor();
+    prepare(dragRect: DragDropRect, tabMode?: TabMode): void;
+    clear(): void;
+    get hoverDropTarget(): DropTarget | null;
+    getPoints(x: number, y: number, width: number, height: number, tabLeft?: number, tabWidth?: number, tabHeight?: number): Point[];
+    draw(dropTarget: DropTarget, dragState: DragState): void;
+    drawTarget(dropTarget: DropTarget, dragState?: DragState): void;
+}
+export {};

package/types/vuu-layout/src/drag-drop/dragDropTypes.d.ts

@@ -0,0 +1,51 @@
+import type { rect } from '../common-types';
+export interface DragDropRect extends rect {
+    children?: DragDropRect[];
+    header?: {
+        top: number;
+        left: number;
+        right: number;
+        bottom: number;
+        titleWidth?: number;
+    };
+    height: number;
+    scrolling?: {
+        id: string;
+        scrollTop: number;
+        scrollHeight: number;
+    };
+    Stack?: {
+        left: number;
+        right: number;
+    }[];
+    width: number;
+}
+export interface DropPosition {
+    Absolute: boolean;
+    Centre: boolean;
+    East: boolean;
+    EastOrWest: boolean;
+    Header: boolean;
+    North: boolean;
+    NorthOrSouth: boolean;
+    offset: number;
+    South: boolean;
+    SouthOrEast: boolean;
+    West: boolean;
+}
+export declare type RelativePosition = 'after' | 'before';
+export declare type DropPosTab = {
+    index: number;
+    left: number;
+    positionRelativeToTab: RelativePosition;
+    width: number;
+};
+export interface DropPos {
+    closeToTheEdge: number;
+    height?: number;
+    position: DropPosition;
+    tab?: DropPosTab;
+    width?: number;
+    x: number;
+    y: number;
+}

package/{src/drag-drop/index.ts → types/vuu-layout/src/drag-drop/index.d.ts}

@@ -2,4 +2,3 @@ export * from "./dragDropTypes";
 export * from "./Draggable";
 export * from "./DropMenu";
 export * from "./DropTarget";
-

package/types/vuu-layout/src/editable-label/EditableLabel.d.ts

@@ -0,0 +1,9 @@
+import { FocusEvent, HTMLAttributes, KeyboardEvent, MouseEvent } from 'react';
+import './EditableLabel.css';
+export interface EditableLabelProps extends HTMLAttributes<HTMLDivElement> {
+    onEnterEditMode?: (evt: MouseEvent) => void;
+    onExitEditMode?: (evt: FocusEvent | KeyboardEvent, value: string) => void;
+    value: string;
+}
+declare const EditableLabel: ({ className: classNameProp, onEnterEditMode, onExitEditMode, value: valueProp }: EditableLabelProps) => JSX.Element;
+export default EditableLabel;

package/types/vuu-layout/src/flexbox/Flexbox.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { FlexboxProps } from "./flexboxTypes";
+import "./Flexbox.css";
+declare const Flexbox: import("react").ForwardRefExoticComponent<FlexboxProps & import("react").RefAttributes<HTMLDivElement>>;
+export default Flexbox;

package/types/vuu-layout/src/flexbox/FlexboxLayout.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { FlexboxLayoutProps } from "./flexboxTypes";
+export declare const FlexboxLayout: {
+    (props: FlexboxLayoutProps): JSX.Element;
+    displayName: string;
+};

package/types/vuu-layout/src/flexbox/FluidGrid.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { FlexboxProps } from "./flexboxTypes";
+import "./FluidGrid.css";
+export interface FluidGridProps extends FlexboxProps {
+    showGrid?: boolean;
+}
+export declare const FluidGrid: import("react").ForwardRefExoticComponent<FluidGridProps & import("react").RefAttributes<HTMLDivElement>>;

package/types/vuu-layout/src/flexbox/FluidGridLayout.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { FluidGridProps } from './FluidGrid';
+export declare const FluidGridLayout: {
+    (props: FluidGridProps): JSX.Element;
+    displayName: string;
+};

package/types/vuu-layout/src/flexbox/Splitter.d.ts

@@ -0,0 +1,13 @@
+import React, { HTMLAttributes } from 'react';
+import './Splitter.css';
+export declare type SplitterDragStartHandler = (index: number) => void;
+export declare type SplitterDragHandler = (index: number, distance: number) => void;
+export declare type SplitterDragEndHandler = () => void;
+export interface SplitterProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onDrag' | 'onDragStart'> {
+    column: boolean;
+    index: number;
+    onDragStart: SplitterDragStartHandler;
+    onDrag: SplitterDragHandler;
+    onDragEnd: SplitterDragEndHandler;
+}
+export declare const Splitter: React.NamedExoticComponent<SplitterProps>;

package/types/vuu-layout/src/flexbox/flexbox-utils.d.ts

@@ -0,0 +1,12 @@
+import { ReactElement } from 'react';
+import type { BreakPoint, ContentMeta } from './flexboxTypes';
+export declare const SPLITTER = 1;
+export declare const PLACEHOLDER = 2;
+export declare const gatherChildMeta: (children: ReactElement[], dimension: 'width' | 'height', breakPoints?: BreakPoint[]) => {
+    index: number;
+    flexOpen: boolean;
+    intrinsicSize: number | undefined;
+    resizeable: any;
+}[];
+export declare const findSplitterAndPlaceholderPositions: (childMeta: ContentMeta[]) => any[];
+export declare const identifyResizeParties: (contentMeta: ContentMeta[], idx: number) => (number[] | undefined)[];