@vuu-ui/vuu-layout 0.6.10-debug → 0.6.11-debug-debug

package/index.css.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../packages/vuu-layout/src/chest-of-drawers/Drawer.css", "../../../packages/vuu-layout/src/chest-of-drawers/Chest.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": [".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", ".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,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,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",
+  "mappings": ";AAAA;AACE;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAOF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAAA;AAGF;AAAA;AAEE;AACA;AAAA;AAGF;AAAA;AAEE;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGF;AAAA;AAEE;AAAA;AAGF;AAAA;AAEE;AAAA;AAGF;AAAA;AAEE;AAAA;AAGF;AAAA;AAEE;AAAA;AAGF;AAAA;AAEE;AAAA;AAGF;AAAA;AAEE;AAAA;AAGF;AAAA;AAEE;AAAA;AAGF;AACE;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;;;AC5JF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AACA;AAEA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;;;;;AClCF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AAAA;AAEE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AAAA;AAEF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;;;ACrEF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AAAA;;;ACtCF;AACE;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAEF;AACE;AACA;AAAA;;;AChBF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACA;AAAA;;;ACRF;AACE;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAEF;AACE;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAiBF;AACE;AAAA;AAiBF;AACE;AAAA;AAiBF;AACE;AACA;AACA;AAAA;;;AC5HF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;;;AC3CF;AACE;AACA;AAAA;AAGF;AACE;AAEA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACE;AAAA;AAEF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAAA;AAAA;AAMJ;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;;;AC9HF;AACE;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AAGE;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;;;AC3DF;AACE;AAAA;AAGF;AACA;AAAA;;;ACLA;AACE;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AAEA;AAAA;AAAA;AAAA;AAAA;AAKA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAIF;AACE;AAAA;;;AC9BF;AACE;AACA;AACA;AACA;AACA;AACA;AAAA;;;ACNF;AACE;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGF;AAAA;AAEE;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AAAA;;;ACrCF;AACE;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AAEA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AAAA;AAGF;AAAA;AAEE;AACA;AACA;AACA;AACA;AAAA;AAGF;AAAA;AAEE;AAAA;AAGF;AAAA;AAEE;AAAA;AAGF;AACE;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AAAA;;;AC9GF;AAAA;AAGA;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AAAA;",
   "names": []
 }

package/package.json

@@ -7,8 +7,8 @@
     "@salt-ds/core": "1.0.0",
     "@salt-ds/icons": "1.0.0",
     "@heswell/salt-lab": "1.0.0-alpha.0-vuu.1",
-    "@vuu-ui/vuu-popups": "0.6.10-debug",
-    "@vuu-ui/vuu-utils": "0.6.10-debug",
+    "@vuu-ui/vuu-popups": "0.6.11-debug",
+    "@vuu-ui/vuu-utils": "0.6.11-debug",
     "classnames": "^2.2.6",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
@@ -18,9 +18,11 @@
     "esm",
     "index.css",
     "index.css.map",
-    "README.md"
+    "README.md",
+    "/types"
   ],
   "module": "esm/index.js",
   "main": "cjs/index.js",
-  "version": "0.6.10-debug"
+  "version": "0.6.11-debug-debug",
+  "types": "types/index.d.ts"
 }

package/types/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/DraggableLayout.d.ts

@@ -0,0 +1,6 @@
+import { HTMLAttributes } from "react";
+import "./DraggableLayout.css";
+export interface DraggableLayoutProps extends HTMLAttributes<HTMLDivElement> {
+    dropTarget?: boolean;
+}
+export declare const DraggableLayout: import("react").ForwardRefExoticComponent<DraggableLayoutProps & import("react").RefAttributes<HTMLDivElement>>;

package/types/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/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/chest-of-drawers/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Chest } from './Chest';
+export { default as Drawer } from './Drawer';

package/types/common-types.d.ts

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

package/types/debug.d.ts

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

package/types/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/drag-drop/DragState.d.ts

@@ -0,0 +1,46 @@
+import { DragDropRect } from './dragDropTypes';
+export type IntrinsicSizes = {
+    height?: number;
+    width?: number;
+};
+interface ZoneRange {
+    hi: number;
+    lo: number;
+}
+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/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 type DragStartCallback = (e: MouseEvent, x: number, y: number) => void;
+export type DragMoveCallback = (x: number | undefined, y: number | undefined) => void;
+export type DragEndCallback = (droppedTarget: Partial<DropTarget>) => void;
+export 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/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/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 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/drag-drop/DropTargetRenderer.d.ts

@@ -0,0 +1,18 @@
+import { DragDropRect } from "./dragDropTypes";
+import { DragState } from "./DragState";
+import { DropTarget } from "./DropTarget";
+import "./DropTargetRenderer.css";
+type Point = [number, number];
+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/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 type RelativePosition = 'after' | 'before';
+export 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/types/drag-drop/index.d.ts

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

package/types/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/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/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/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/flexbox/Splitter.d.ts

@@ -0,0 +1,13 @@
+import React, { HTMLAttributes } from 'react';
+import './Splitter.css';
+export type SplitterDragStartHandler = (index: number) => void;
+export type SplitterDragHandler = (index: number, distance: number) => void;
+export 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/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)[];

package/types/flexbox/flexboxTypes.d.ts

@@ -0,0 +1,51 @@
+import { CSSProperties, HTMLAttributes, MutableRefObject, ReactElement, ReactNode } from "react";
+import { SplitterProps } from "./Splitter";
+export interface LayoutContainerProps {
+    resizeable?: boolean;
+}
+export interface FlexboxProps extends LayoutContainerProps, HTMLAttributes<HTMLDivElement> {
+    breakPoints?: BreakPointsProp;
+    children: ReactElement[];
+    cols?: number;
+    column?: true;
+    fullPage?: number;
+    flexFill?: boolean;
+    gap?: number;
+    onSplitterMoved?: (content: ContentMeta[]) => void;
+    row?: true;
+    spacing?: number;
+    splitterSize?: number;
+}
+export interface FlexboxLayoutProps extends FlexboxProps {
+    path: string;
+}
+export interface SplitterHookProps {
+    children: ReactNode;
+    onSplitterMoved?: (content: ContentMeta[]) => void;
+    style?: CSSProperties;
+}
+export interface SplitterHookResult {
+    content: ReactElement[];
+    rootRef: MutableRefObject<HTMLDivElement | null>;
+}
+export type SplitterFactory = (index: number) => ReactElement<SplitterProps>;
+export type ContentMeta = {
+    currentSize?: number;
+    flexOpen?: boolean;
+    flexBasis?: number;
+    intrinsicSize?: number;
+    minSize?: number;
+    placeholder?: boolean;
+    resizeable?: boolean;
+    shim?: boolean;
+    splitter?: boolean;
+};
+export type FlexSize = {
+    size: number;
+    minSize: number;
+};
+export type BreakPoint = "xs" | "sm" | "md" | "lg" | "xl";
+export type BreakPoints = BreakPoint[];
+export type BreakPointsProp = {
+    [keys in BreakPoint]?: number;
+};

package/types/flexbox/index.d.ts

@@ -0,0 +1,4 @@
+export { default as Flexbox } from './Flexbox';
+export * from './FlexboxLayout';
+export * from './FluidGrid';
+export * from './FluidGridLayout';

package/types/flexbox/useResponsiveSizing.d.ts

@@ -0,0 +1,10 @@
+import { CSSProperties, ReactElement } from "react";
+export declare const useResponsiveSizing: ({ children: childrenProp, cols: colsProp, style, }: {
+    children: ReactElement[];
+    cols?: number | undefined;
+    style?: CSSProperties | undefined;
+}) => {
+    cols: number;
+    content: ReactElement<any, string | import("react").JSXElementConstructor<any>>[] | undefined;
+    rootRef: import("react").MutableRefObject<null>;
+};

package/types/flexbox/useSplitterResizing.d.ts

@@ -0,0 +1,2 @@
+import { SplitterHookProps, SplitterHookResult } from "./flexboxTypes";
+export declare const useSplitterResizing: ({ children: childrenProp, onSplitterMoved, style, }: SplitterHookProps) => SplitterHookResult;