@vuu-ui/vuu-layout 0.6.9-debug → 0.6.10-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;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;",
+  "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",
   "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.9",
-    "@vuu-ui/vuu-utils": "0.6.9",
+    "@vuu-ui/vuu-popups": "0.6.10-debug",
+    "@vuu-ui/vuu-utils": "0.6.10-debug",
     "classnames": "^2.2.6",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
@@ -18,11 +18,9 @@
     "esm",
     "index.css",
     "index.css.map",
-    "README.md",
-    "/types"
+    "README.md"
   ],
   "module": "esm/index.js",
   "main": "cjs/index.js",
-  "version": "0.6.9-debug",
-  "types": "types/index.d.ts"
+  "version": "0.6.10-debug"
 }

package/types/Component.d.ts

@@ -1,7 +0,0 @@
-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

@@ -1,6 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

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

package/types/common-types.d.ts

@@ -1,8 +0,0 @@
-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

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

package/types/drag-drop/BoxModel.d.ts

@@ -1,143 +0,0 @@
-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

@@ -1,46 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

@@ -1,61 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,51 +0,0 @@
-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

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

package/types/flexbox/Flexbox.d.ts

@@ -1,5 +0,0 @@
-/// <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

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

package/types/flexbox/FluidGrid.d.ts

@@ -1,7 +0,0 @@
-/// <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

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

package/types/flexbox/Splitter.d.ts

@@ -1,13 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,51 +0,0 @@
-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

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

package/types/flexbox/useResponsiveSizing.d.ts

@@ -1,10 +0,0 @@
-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

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