@vuu-ui/vuu-layout 3.1.0-beta.1 → 3.1.0-beta.3

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.1.0-beta.1",
+  "version": "3.1.0-beta.3",
   "description": "VUU Layout Components",
   "main": "src/index.ts",
   "author": "heswell",
@@ -11,20 +11,20 @@
   },
   "types": "types/index.d.ts",
   "devDependencies": {
-    "@vuu-ui/vuu-data-types": "3.1.0-beta.1",
-    "@vuu-ui/vuu-filter-types": "3.1.0-beta.1"
+    "@vuu-ui/vuu-data-types": "3.1.0-beta.3",
+    "@vuu-ui/vuu-filter-types": "3.1.0-beta.3"
   },
   "dependencies": {
     "@salt-ds/core": "1.54.1",
     "@salt-ds/styles": "0.2.1",
     "@salt-ds/window": "0.1.1",
-    "@vuu-ui/vuu-data-react": "3.1.0-beta.1",
-    "@vuu-ui/vuu-datatable": "3.1.0-beta.1",
-    "@vuu-ui/vuu-filters": "3.1.0-beta.1",
-    "@vuu-ui/vuu-popups": "3.1.0-beta.1",
-    "@vuu-ui/vuu-table": "3.1.0-beta.1",
-    "@vuu-ui/vuu-ui-controls": "3.1.0-beta.1",
-    "@vuu-ui/vuu-utils": "3.1.0-beta.1"
+    "@vuu-ui/vuu-data-react": "3.1.0-beta.3",
+    "@vuu-ui/vuu-datatable": "3.1.0-beta.3",
+    "@vuu-ui/vuu-filters": "3.1.0-beta.3",
+    "@vuu-ui/vuu-popups": "3.1.0-beta.3",
+    "@vuu-ui/vuu-table": "3.1.0-beta.3",
+    "@vuu-ui/vuu-ui-controls": "3.1.0-beta.3",
+    "@vuu-ui/vuu-utils": "3.1.0-beta.3"
   },
   "peerDependencies": {
     "clsx": "^2.0.0",

package/src/{debug.mjs → debug.js}

@@ -1,4 +1,4 @@
-import { typeOf } from "./utils/index.mjs";
+import { typeOf } from "./utils/index.js";
 const tree = (el, depth = 0)=>{
     const type = typeOf(el);
     const spaces = "          ";

package/src/dock-layout/{DockLayout.mjs → DockLayout.js}

@@ -4,7 +4,7 @@ import clsx from "clsx";
 import { useComponentCssInjection } from "@salt-ds/styles";
 import { useWindow } from "@salt-ds/window";
 import { useMemo } from "react";
-import Drawer from "./Drawer.mjs";
+import Drawer from "./Drawer.js";
 import DockLayout from "./DockLayout.css";
 const isDrawer = (component)=>component.type === Drawer;
 const isVertical = (element)=>element.props.position && element.props.position.match(/top|bottom/);

package/src/dock-layout/index.js

@@ -0,0 +1,2 @@
+export { default as DockLayout } from "./DockLayout.js";
+export { default as Drawer } from "./Drawer.js";

package/src/drag-drop/{BoxModel.mjs → BoxModel.js}

@@ -1,5 +1,5 @@
 import { boxContainsPoint, isContainer } from "@vuu-ui/vuu-utils";
-import { getProps, typeOf } from "../utils/index.mjs";
+import { getProps, typeOf } from "../utils/index.js";
 const positionValues = {
     north: 1,
     east: 2,

package/src/drag-drop/{DragState.mjs → DragState.js}

@@ -1,4 +1,4 @@
-import { pointPositionWithinRect } from "./BoxModel.mjs";
+import { pointPositionWithinRect } from "./BoxModel.js";
 const SCALE_FACTOR = 0.4;
 class DragState {
     constraint;

package/src/drag-drop/{Draggable.mjs → Draggable.js}

@@ -1,8 +1,8 @@
-import { findTarget, followPath, getProps } from "../utils/index.mjs";
-import { BoxModel } from "./BoxModel.mjs";
-import { DragState } from "./DragState.mjs";
-import { DropTarget, identifyDropTarget } from "./DropTarget.mjs";
-import DropTargetRenderer from "./DropTargetRenderer.mjs";
+import { findTarget, followPath, getProps } from "../utils/index.js";
+import { BoxModel } from "./BoxModel.js";
+import { DragState } from "./DragState.js";
+import { DropTarget, identifyDropTarget } from "./DropTarget.js";
+import DropTargetRenderer from "./DropTargetRenderer.js";
 let _dragStartCallback;
 let _dragMoveCallback;
 let _dragEndCallback;

package/src/drag-drop/{DropTarget.mjs → DropTarget.js}

@@ -1,5 +1,5 @@
-import { getProps, typeOf } from "../utils/index.mjs";
-import { BoxModel, Position, RelativeDropPosition, getPosition, positionValues } from "./BoxModel.mjs";
+import { getProps, typeOf } from "../utils/index.js";
+import { BoxModel, Position, RelativeDropPosition, getPosition, positionValues } from "./BoxModel.js";
 const isTabstrip = (dropTarget)=>dropTarget.pos.tab && "Stack" === typeOf(dropTarget.component) && dropTarget.pos.position.Header;
 const { north: north, south: south, east: east, west: west } = positionValues;
 const eastwest = east + west;

package/src/drag-drop/{DropTargetRenderer.mjs → DropTargetRenderer.js}

@@ -1,4 +1,4 @@
-import { RelativeDropPosition } from "./BoxModel.mjs";
+import { RelativeDropPosition } from "./BoxModel.js";
 let _hoverDropTarget = null;
 let _shiftedTab = null;
 const start = ([x, y])=>`M${x},${y}`;

package/src/drag-drop/index.js

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

package/src/flexbox/{Flexbox.mjs → Flexbox.js}

@@ -4,7 +4,7 @@ import { useComponentCssInjection } from "@salt-ds/styles";
 import { useWindow } from "@salt-ds/window";
 import clsx from "clsx";
 import { forwardRef } from "react";
-import { useSplitterResizing } from "./useSplitterResizing.mjs";
+import { useSplitterResizing } from "./useSplitterResizing.js";
 import Flexbox_0 from "./Flexbox.css";
 const classBase = "hwFlexbox";
 const Flexbox_Flexbox = /*#__PURE__*/ forwardRef(function(props, ref) {

package/src/flexbox/{FlexboxLayout.mjs → FlexboxLayout.js}

@@ -1,9 +1,9 @@
 import { jsx } from "react/jsx-runtime";
 import { useCallback } from "react";
-import { Action } from "../layout-action.mjs";
-import { useLayoutProviderDispatch } from "../layout-provider/index.mjs";
+import { Action } from "../layout-action.js";
+import { useLayoutProviderDispatch } from "../layout-provider/index.js";
 import { registerComponent } from "@vuu-ui/vuu-utils";
-import Flexbox from "./Flexbox.mjs";
+import Flexbox from "./Flexbox.js";
 const FlexboxLayout_FlexboxLayout = function(props) {
     const { path } = props;
     const dispatch = useLayoutProviderDispatch();

package/src/flexbox/{flexbox-utils.mjs → flexbox-utils.js}

@@ -1,5 +1,5 @@
-import { getIntrinsicSize, hasUnboundedFlexStyle } from "../layout-reducer/flexUtils.mjs";
-import { getProp } from "../utils/index.mjs";
+import { getIntrinsicSize, hasUnboundedFlexStyle } from "../layout-reducer/flexUtils.js";
+import { getProp } from "../utils/index.js";
 const NO_INTRINSIC_SIZE = {};
 const SPLITTER = 1;
 const PLACEHOLDER = 2;

package/src/flexbox/index.js

@@ -0,0 +1,2 @@
+export * from "./FlexboxLayout.js";
+export { default as Flexbox } from "./Flexbox.js";

package/src/flexbox/{useSplitterResizing.mjs → useSplitterResizing.js}

@@ -1,8 +1,8 @@
 import { getUniqueId } from "@vuu-ui/vuu-utils";
 import react, { useCallback, useMemo, useRef } from "react";
-import { Placeholder } from "../placeholder/index.mjs";
-import { Splitter } from "./Splitter.mjs";
-import { PLACEHOLDER, SPLITTER, findSplitterAndPlaceholderPositions, gatherChildMeta, identifyResizeParties } from "./flexbox-utils.mjs";
+import { Placeholder } from "../placeholder/index.js";
+import { Splitter } from "./Splitter.js";
+import { PLACEHOLDER, SPLITTER, findSplitterAndPlaceholderPositions, gatherChildMeta, identifyResizeParties } from "./flexbox-utils.js";
 const originalContentOnly = (meta)=>!meta.splitter && !meta.placeholder;
 const useSplitterResizing = ({ children: childrenProp, onSplitterMoved, style })=>{
     const rootRef = useRef(null);

package/src/index.js

@@ -0,0 +1,20 @@
+export * from "./dock-layout/index.js";
+export * from "./drag-drop/index.js";
+export * from "./flexbox/index.js";
+export * from "./layout-header/index.js";
+export * from "./layout-provider/index.js";
+export * from "./layout-reducer/index.js";
+export * from "./LayoutContainer.js";
+export * from "./palette/index.js";
+export * from "./placeholder/index.js";
+export * from "./responsive/index.js";
+export * from "./stack/index.js";
+export * from "./use-persistent-state.js";
+export * from "./utils/index.js";
+export * from "./layout-view/viewTypes.js";
+export * from "./layout-view/View.js";
+export * from "./layout-view/useViewBroadcastChannel.js";
+export { default as Component } from "./Component.js";
+export { Action } from "./layout-action.js";
+export { useViewActionDispatcher } from "./layout-view-actions/useViewActionDispatcher.js";
+export { ViewContext, useViewContext, useViewDispatch } from "./layout-view-actions/ViewContext.js";

package/src/layout-header/{Header.mjs → Header.js}

@@ -4,7 +4,7 @@ import { useWindow } from "@salt-ds/window";
 import { EditableLabel, IconButton } from "@vuu-ui/vuu-ui-controls";
 import clsx from "clsx";
 import { cloneElement } from "react";
-import { useHeader } from "./useHeader.mjs";
+import { useHeader } from "./useHeader.js";
 import Header from "./Header.css";
 const classBase = "vuuHeader";
 const Header_Header = ({ allowRename = false, className: classNameProp, contributions, collapsed, closeable, onCollapse, onEditTitle, onExpand, orientation: orientationProp = "horizontal", style, title = "Untitled" })=>{

package/src/layout-header/index.js

@@ -0,0 +1 @@
+export * from "./Header.js";

package/src/layout-header/{useHeader.mjs → useHeader.js}

@@ -1,5 +1,5 @@
 import { useCallback, useRef, useState } from "react";
-import { useViewDispatch } from "../layout-view-actions/ViewContext.mjs";
+import { useViewDispatch } from "../layout-view-actions/ViewContext.js";
 import { queryClosest } from "@vuu-ui/vuu-utils";
 const useHeader = ({ onCollapse, onEditTitle, onExpand, title })=>{
     const [editing, setEditing] = useState(false);

package/src/layout-provider/{LayoutProvider.mjs → LayoutProvider.js}

@@ -1,10 +1,10 @@
 import { jsx } from "react/jsx-runtime";
 import { VuuShellLocation, usePlaceholderJSON } from "@vuu-ui/vuu-utils";
 import { useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
-import { LayoutActionType, cloneElementAddLayoutProps, layoutFromJson, layoutQuery, layoutReducer, layoutToJSON } from "../layout-reducer/index.mjs";
-import { findTarget, getChildProp, getProp, getProps, typeOf } from "../utils/index.mjs";
-import { LayoutProviderContext } from "./LayoutProviderContext.mjs";
-import { useLayoutDragDrop } from "./useLayoutDragDrop.mjs";
+import { LayoutActionType, cloneElementAddLayoutProps, layoutFromJson, layoutQuery, layoutReducer, layoutToJSON } from "../layout-reducer/index.js";
+import { findTarget, getChildProp, getProp, getProps, typeOf } from "../utils/index.js";
+import { LayoutProviderContext } from "./LayoutProviderContext.js";
+import { useLayoutDragDrop } from "./useLayoutDragDrop.js";
 const isWorkspaceContainer = (props)=>props.id === VuuShellLocation.WorkspaceContainer;
 const isMultiWorkspaceContainer = (props)=>props.id === VuuShellLocation.MultiWorkspaceContainer;
 const shouldSave = (action)=>[

package/src/layout-provider/index.js

@@ -0,0 +1,2 @@
+export * from "./LayoutProvider.js";
+export * from "./LayoutProviderContext.js";

package/src/layout-provider/{useLayoutDragDrop.mjs → useLayoutDragDrop.js}

@@ -1,7 +1,7 @@
 import { useCallback, useRef } from "react";
-import { Draggable } from "../drag-drop/index.mjs";
-import { getIntrinsicSize } from "../layout-reducer/flexUtils.mjs";
-import { followPath, resolvePath } from "../utils/index.mjs";
+import { Draggable } from "../drag-drop/index.js";
+import { getIntrinsicSize } from "../layout-reducer/flexUtils.js";
+import { followPath, resolvePath } from "../utils/index.js";
 const NO_INSTRUCTIONS = {};
 const NO_OFFSETS = [
     0,

package/src/layout-reducer/{flexUtils.mjs → flexUtils.js}

@@ -1,6 +1,6 @@
 import { getLayoutComponent, uuid } from "@vuu-ui/vuu-utils";
 import react from "react";
-import { getProps, resetPath } from "../utils/index.mjs";
+import { getProps, resetPath } from "../utils/index.js";
 const placeHolderProps = {
     "data-placeholder": true,
     "data-resizeable": true

package/src/layout-reducer/index.js

@@ -0,0 +1,4 @@
+export * from "./flexUtils.js";
+export * from "./layout-reducer.js";
+export * from "./layoutTypes.js";
+export * from "./layoutUtils.js";

package/src/layout-reducer/{insert-layout-element.mjs → insert-layout-element.js}

@@ -1,8 +1,8 @@
 import { uuid } from "@vuu-ui/vuu-utils";
 import react from "react";
-import { getProp, getProps, nextStep, resetPath, typeOf } from "../utils/index.mjs";
-import { createPlaceHolder, getFlexDimensions, getFlexOrIntrinsicStyle, getIntrinsicSize, wrapIntrinsicSizeComponentWithFlexbox } from "./flexUtils.mjs";
-import { getDefaultTabLabel, getManagedDimension } from "./layoutUtils.mjs";
+import { getProp, getProps, nextStep, resetPath, typeOf } from "../utils/index.js";
+import { createPlaceHolder, getFlexDimensions, getFlexOrIntrinsicStyle, getIntrinsicSize, wrapIntrinsicSizeComponentWithFlexbox } from "./flexUtils.js";
+import { getDefaultTabLabel, getManagedDimension } from "./layoutUtils.js";
 function getInsertTabBeforeAfter(stack, pos) {
     const { children: tabs } = stack.props;
     const tabCount = tabs.length;

package/src/layout-reducer/{layout-reducer.mjs → layout-reducer.js}

@@ -1,14 +1,14 @@
 import { isContainer } from "@vuu-ui/vuu-utils";
 import react from "react";
-import { findTarget, followPath, followPathToParent, getProp, getProps, typeOf } from "../utils/index.mjs";
-import { getIntrinsicSize } from "./flexUtils.mjs";
-import { getInsertTabBeforeAfter, insertBesideChild, insertIntoContainer } from "./insert-layout-element.mjs";
-import { moveChild } from "./move-layout-element.mjs";
-import { LayoutActionType } from "./layoutTypes.mjs";
-import { removeChild } from "./remove-layout-element.mjs";
-import { _replaceChild, replaceChild, swapChild } from "./replace-layout-element.mjs";
-import { resizeFlexChild, resizeFlexChildren } from "./resize-flex-children.mjs";
-import { wrap } from "./wrap-layout-element.mjs";
+import { findTarget, followPath, followPathToParent, getProp, getProps, typeOf } from "../utils/index.js";
+import { getIntrinsicSize } from "./flexUtils.js";
+import { getInsertTabBeforeAfter, insertBesideChild, insertIntoContainer } from "./insert-layout-element.js";
+import { moveChild } from "./move-layout-element.js";
+import { LayoutActionType } from "./layoutTypes.js";
+import { removeChild } from "./remove-layout-element.js";
+import { _replaceChild, replaceChild, swapChild } from "./replace-layout-element.js";
+import { resizeFlexChild, resizeFlexChildren } from "./resize-flex-children.js";
+import { wrap } from "./wrap-layout-element.js";
 const layoutReducer = (state, action)=>{
     switch(action.type){
         case LayoutActionType.ADD:

package/src/layout-reducer/{layoutUtils.mjs → layoutUtils.js}

@@ -1,7 +1,7 @@
 import { getLayoutComponent, isContainer, isLayoutComponent, uuid } from "@vuu-ui/vuu-utils";
 import react, { cloneElement } from "react";
-import { getPersistentState, hasPersistentState, setPersistentState } from "../use-persistent-state.mjs";
-import { expandFlex, followPathToParent, getProps, typeOf } from "../utils/index.mjs";
+import { getPersistentState, hasPersistentState, setPersistentState } from "../use-persistent-state.js";
+import { expandFlex, followPathToParent, getProps, typeOf } from "../utils/index.js";
 const getManagedDimension = (style)=>"column" === style.flexDirection ? [
         "height",
         "width"

package/src/layout-reducer/{move-layout-element.mjs → move-layout-element.js}

@@ -1,6 +1,6 @@
 import { cloneElement } from "react";
-import { followPath, getProps } from "../utils/index.mjs";
-import { swapChild } from "./replace-layout-element.mjs";
+import { followPath, getProps } from "../utils/index.js";
+import { swapChild } from "./replace-layout-element.js";
 function moveChild(layoutRoot, { fromIndex, path, toIndex }) {
     const target = followPath(layoutRoot, path, true);
     const { children } = getProps(target);

package/src/layout-reducer/{remove-layout-element.mjs → remove-layout-element.js}

@@ -1,9 +1,9 @@
 import { VuuShellLocation } from "@vuu-ui/vuu-utils";
 import react from "react";
-import { followPath, followPathToParent, getProp, getProps, nextStep, resetPath, typeOf } from "../utils/index.mjs";
-import { createPlaceHolder } from "./flexUtils.mjs";
-import { layoutFromJson } from "./layoutUtils.mjs";
-import { swapChild } from "./replace-layout-element.mjs";
+import { followPath, followPathToParent, getProp, getProps, nextStep, resetPath, typeOf } from "../utils/index.js";
+import { createPlaceHolder } from "./flexUtils.js";
+import { layoutFromJson } from "./layoutUtils.js";
+import { swapChild } from "./replace-layout-element.js";
 function removeChild(layoutRoot, { path }) {
     const target = followPath(layoutRoot, path);
     let targetParent = followPathToParent(layoutRoot, path);

package/src/layout-reducer/{replace-layout-element.mjs → replace-layout-element.js}

@@ -1,6 +1,6 @@
 import react from "react";
-import { getProp, getProps, nextStep } from "../utils/index.mjs";
-import { applyLayoutProps } from "./layoutUtils.mjs";
+import { getProp, getProps, nextStep } from "../utils/index.js";
+import { applyLayoutProps } from "./layoutUtils.js";
 function replaceChild(model, { target, replacement }) {
     return _replaceChild(model, target, replacement);
 }

package/src/layout-reducer/{resize-flex-children.mjs → resize-flex-children.js}

@@ -1,6 +1,6 @@
 import react from "react";
-import { followPath, getProps } from "../utils/index.mjs";
-import { swapChild } from "./replace-layout-element.mjs";
+import { followPath, getProps } from "../utils/index.js";
+import { swapChild } from "./replace-layout-element.js";
 function resizeFlexChild(layoutRoot, { path, size }) {
     const target = followPath(layoutRoot, path, true);
     const { style } = getProps(target);

package/src/layout-reducer/{wrap-layout-element.mjs → wrap-layout-element.js}

@@ -1,8 +1,8 @@
 import { getLayoutComponent, uuid } from "@vuu-ui/vuu-utils";
 import react from "react";
-import { getProp, getProps, nextStep, resetPath, typeOf } from "../utils/index.mjs";
-import { createFlexbox, createPlaceHolder, getFlexStyle, getIntrinsicSize, wrapIntrinsicSizeComponentWithFlexbox } from "./flexUtils.mjs";
-import { applyLayoutProps } from "./layoutUtils.mjs";
+import { getProp, getProps, nextStep, resetPath, typeOf } from "../utils/index.js";
+import { createFlexbox, createPlaceHolder, getFlexStyle, getIntrinsicSize, wrapIntrinsicSizeComponentWithFlexbox } from "./flexUtils.js";
+import { applyLayoutProps } from "./layoutUtils.js";
 const isHtmlElement = (component)=>{
     const [firstLetter] = typeOf(component);
     return firstLetter === firstLetter.toLowerCase();

package/src/layout-view/{View.mjs → View.js}

@@ -5,10 +5,10 @@ import { useComponentCssInjection } from "@salt-ds/styles";
 import { useWindow } from "@salt-ds/window";
 import clsx from "clsx";
 import react, { forwardRef, useCallback, useMemo, useRef, useState } from "react";
-import { Header as Header_mjs_Header } from "../layout-header/Header.mjs";
-import { useView } from "./useView.mjs";
-import { useViewResize } from "./useViewResize.mjs";
-import { ViewContext } from "../layout-view-actions/ViewContext.mjs";
+import { Header as Header_js_Header } from "../layout-header/Header.js";
+import { useView } from "./useView.js";
+import { useViewResize } from "./useViewResize.js";
+import { ViewContext } from "../layout-view-actions/ViewContext.js";
 import View_0 from "./View.css";
 const classBase = "vuuView";
 const getProps = (state, props)=>{
@@ -19,7 +19,7 @@ const getProps = (state, props)=>{
     return state || props;
 };
 const View_View = /*#__PURE__*/ forwardRef(function(props, forwardedRef) {
-    const { Header = Header_mjs_Header, allowRename, children, className, collapsed, closeable, "data-path": dataPath, "data-resizeable": dataResizeable, dropTargets, expanded, flexFill, id: idProp, header, onCollapse, onExpand, orientation = "horizontal", path = dataPath, resize = "responsive", resizeable = dataResizeable, restoreStyle, tearOut, style = {}, title: titleProp, ...restProps } = props;
+    const { Header = Header_js_Header, allowRename, children, className, collapsed, closeable, "data-path": dataPath, "data-resizeable": dataResizeable, dropTargets, expanded, flexFill, id: idProp, header, onCollapse, onExpand, orientation = "horizontal", path = dataPath, resize = "responsive", resizeable = dataResizeable, restoreStyle, tearOut, style = {}, title: titleProp, ...restProps } = props;
     const targetWindow = useWindow();
     useComponentCssInjection({
         testId: "vuu-view",

package/src/layout-view/{useView.mjs → useView.js}

@@ -1,7 +1,7 @@
 import { useCallback, useMemo } from "react";
-import { useLayoutProviderDispatch } from "../layout-provider/LayoutProvider.mjs";
-import { usePersistentState } from "../use-persistent-state.mjs";
-import { useViewActionDispatcher } from "../layout-view-actions/useViewActionDispatcher.mjs";
+import { useLayoutProviderDispatch } from "../layout-provider/LayoutProvider.js";
+import { usePersistentState } from "../use-persistent-state.js";
+import { useViewActionDispatcher } from "../layout-view-actions/useViewActionDispatcher.js";
 const useView = ({ id, rootRef, path, dropTargets, title: titleProp })=>{
     const layoutDispatch = useLayoutProviderDispatch();
     const { loadState, purgeState, saveState } = usePersistentState();

package/src/layout-view/{useViewResize.mjs → useViewResize.js}

@@ -1,4 +1,4 @@
-import { WidthHeight, useResizeObserver } from "../responsive/index.mjs";
+import { WidthHeight, useResizeObserver } from "../responsive/index.js";
 import { useCallback, useRef } from "react";
 const NO_MEASUREMENT = [];
 const useViewResize = ({ mainRef, resize = "responsive", rootRef })=>{

package/src/layout-view-actions/{useViewActionDispatcher.mjs → useViewActionDispatcher.js}

@@ -1,9 +1,9 @@
 import { useSessionDataSource } from "@vuu-ui/vuu-data-react";
 import { useCallback } from "react";
-import { useLayoutProviderDispatch } from "../layout-provider/LayoutProvider.mjs";
-import { useViewBroadcastChannel } from "../layout-view/useViewBroadcastChannel.mjs";
-import { usePersistentState } from "../use-persistent-state.mjs";
-import { useViewContributions } from "./useViewContributions.mjs";
+import { useLayoutProviderDispatch } from "../layout-provider/LayoutProvider.js";
+import { useViewBroadcastChannel } from "../layout-view/useViewBroadcastChannel.js";
+import { usePersistentState } from "../use-persistent-state.js";
+import { useViewContributions } from "./useViewContributions.js";
 const useViewActionDispatcher = (id, rootRef, viewPath, dropTargets)=>{
     const { purgeState } = usePersistentState();
     const { clearDataSource: clearDataSourceFromSessionState } = useSessionDataSource();

package/src/palette/{Palette.mjs → Palette.js}

@@ -5,8 +5,8 @@ import { useComponentCssInjection } from "@salt-ds/styles";
 import { useWindow } from "@salt-ds/window";
 import clsx from "clsx";
 import { cloneElement, memo, useCallback } from "react";
-import { useLayoutProviderDispatch } from "../layout-provider/index.mjs";
-import { View } from "../layout-view/View.mjs";
+import { useLayoutProviderDispatch } from "../layout-provider/index.js";
+import { View } from "../layout-view/View.js";
 import Palette from "./Palette.css";
 const classBase = "vuuPalette";
 const clonePaletteItem = (paletteItem)=>{

package/src/palette/index.js

@@ -0,0 +1 @@
+export * from "./Palette.js";

package/src/placeholder/{LayoutStartPanel.mjs → LayoutStartPanel.js}

@@ -4,7 +4,7 @@ import { VuuShellLocation } from "@vuu-ui/vuu-utils";
 import { useComponentCssInjection } from "@salt-ds/styles";
 import { useWindow } from "@salt-ds/window";
 import { useMemo, useState } from "react";
-import { useViewContext } from "../layout-view-actions/ViewContext.mjs";
+import { useViewContext } from "../layout-view-actions/ViewContext.js";
 import LayoutStartPanel from "./LayoutStartPanel.css";
 const classBase = "vuuLayoutStartPanel";
 const LayoutStartPanel_LayoutStartPanel = (htmlAttributes)=>{

package/src/placeholder/{Placeholder.mjs → Placeholder.js}

@@ -3,8 +3,8 @@ import clsx from "clsx";
 import { useComponentCssInjection } from "@salt-ds/styles";
 import { useWindow } from "@salt-ds/window";
 import { registerComponent } from "@vuu-ui/vuu-utils";
-import { LayoutStartPanel } from "./LayoutStartPanel.mjs";
-import { View } from "../layout-view/View.mjs";
+import { LayoutStartPanel } from "./LayoutStartPanel.js";
+import { View } from "../layout-view/View.js";
 import Placeholder from "./Placeholder.css";
 const classBase = "vuuPlaceholder";
 const PlaceholderCore = ({ showStartMenu = true })=>/*#__PURE__*/ jsx(Fragment, {

package/src/placeholder/index.js

@@ -0,0 +1 @@
+export * from "./Placeholder.js";

package/src/responsive/index.js

@@ -0,0 +1,2 @@
+export * from "./useResizeObserver.js";
+export * from "./utils.js";

package/src/stack/{Stack.mjs → Stack.js}

@@ -5,7 +5,7 @@ import clsx from "clsx";
 import { useComponentCssInjection } from "@salt-ds/styles";
 import { useWindow } from "@salt-ds/window";
 import react, { forwardRef, useCallback, useRef } from "react";
-import { getDefaultTabLabel } from "../layout-reducer/index.mjs";
+import { getDefaultTabLabel } from "../layout-reducer/index.js";
 import Stack_0 from "./Stack.css";
 const classBase = "vuuTabs";
 const getDefaultTabIcon = ()=>void 0;

package/src/stack/{StackLayout.mjs → StackLayout.js}

@@ -1,12 +1,12 @@
 import { jsx } from "react/jsx-runtime";
 import { registerComponent, useId } from "@vuu-ui/vuu-utils";
 import react, { useCallback, useRef } from "react";
-import { useLayoutCreateNewChild, useLayoutProviderDispatch } from "../layout-provider/index.mjs";
-import { getDefaultTabLabel } from "../layout-reducer/index.mjs";
-import { useViewActionDispatcher } from "../layout-view-actions/useViewActionDispatcher.mjs";
-import { useViewBroadcastChannel } from "../layout-view/useViewBroadcastChannel.mjs";
-import { usePersistentState } from "../use-persistent-state.mjs";
-import { Stack } from "./Stack.mjs";
+import { useLayoutCreateNewChild, useLayoutProviderDispatch } from "../layout-provider/index.js";
+import { getDefaultTabLabel } from "../layout-reducer/index.js";
+import { useViewActionDispatcher } from "../layout-view-actions/useViewActionDispatcher.js";
+import { useViewBroadcastChannel } from "../layout-view/useViewBroadcastChannel.js";
+import { usePersistentState } from "../use-persistent-state.js";
+import { Stack } from "./Stack.js";
 const StackLayout = (props)=>{
     const rootRef = useRef(null);
     const dispatch = useLayoutProviderDispatch();

package/src/stack/index.js

@@ -0,0 +1,3 @@
+export * from "./Stack.js";
+export * from "./StackLayout.js";
+export * from "./stackTypes.js";

package/src/tabs/index.js

@@ -0,0 +1 @@
+export { default as TabPanel } from "./TabPanel.js";

package/src/tools/config-wrapper/{ConfigWrapper.mjs → ConfigWrapper.js}

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import react, { useState } from "react";
-import { LayoutConfigurator, LayoutTreeViewer } from "../index.mjs";
-import { followPathToComponent } from "../../index.mjs";
+import { LayoutConfigurator, LayoutTreeViewer } from "../index.js";
+import { followPathToComponent } from "../../index.js";
 const ConfigWrapper = ({ children })=>{
     const designMode = false;
     const [layout, setLayout] = useState(children);

package/src/tools/config-wrapper/index.js

@@ -0,0 +1 @@
+export * from "./ConfigWrapper.js";

package/src/tools/index.js

@@ -0,0 +1,3 @@
+export * from "./config-wrapper/index.js";
+export * from "./devtools-box/layout-configurator.js";
+export * from "./devtools-tree/layout-tree-viewer.js";

package/src/utils/index.js

@@ -0,0 +1,5 @@
+export * from "./pathUtils.js";
+export * from "./propUtils.js";
+export * from "./refUtils.js";
+export * from "./styleUtils.js";
+export * from "./typeOf.js";

package/src/utils/{pathUtils.mjs → pathUtils.js}

@@ -1,7 +1,7 @@
 import { isContainer } from "@vuu-ui/vuu-utils";
 import react, { isValidElement } from "react";
-import { getProp, getProps } from "./propUtils.mjs";
-import { typeOf } from "./typeOf.mjs";
+import { getProp, getProps } from "./propUtils.js";
+import { typeOf } from "./typeOf.js";
 const removeFinalPathSegment = (path)=>{
     const pos = path.lastIndexOf(".");
     if (-1 === pos) return path;

package/src/dock-layout/index.mjs

@@ -1,2 +0,0 @@
-export { default as DockLayout } from "./DockLayout.mjs";
-export { default as Drawer } from "./Drawer.mjs";

package/src/drag-drop/index.mjs

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

package/src/flexbox/index.mjs

@@ -1,2 +0,0 @@
-export * from "./FlexboxLayout.mjs";
-export { default as Flexbox } from "./Flexbox.mjs";

package/src/index.mjs

@@ -1,20 +0,0 @@
-export * from "./dock-layout/index.mjs";
-export * from "./drag-drop/index.mjs";
-export * from "./flexbox/index.mjs";
-export * from "./layout-header/index.mjs";
-export * from "./layout-provider/index.mjs";
-export * from "./layout-reducer/index.mjs";
-export * from "./LayoutContainer.mjs";
-export * from "./palette/index.mjs";
-export * from "./placeholder/index.mjs";
-export * from "./responsive/index.mjs";
-export * from "./stack/index.mjs";
-export * from "./use-persistent-state.mjs";
-export * from "./utils/index.mjs";
-export * from "./layout-view/viewTypes.mjs";
-export * from "./layout-view/View.mjs";
-export * from "./layout-view/useViewBroadcastChannel.mjs";
-export { default as Component } from "./Component.mjs";
-export { Action } from "./layout-action.mjs";
-export { useViewActionDispatcher } from "./layout-view-actions/useViewActionDispatcher.mjs";
-export { ViewContext, useViewContext, useViewDispatch } from "./layout-view-actions/ViewContext.mjs";

package/src/layout-header/index.mjs

@@ -1 +0,0 @@
-export * from "./Header.mjs";

package/src/layout-provider/index.mjs

@@ -1,2 +0,0 @@
-export * from "./LayoutProvider.mjs";
-export * from "./LayoutProviderContext.mjs";

package/src/layout-reducer/index.mjs

@@ -1,4 +0,0 @@
-export * from "./flexUtils.mjs";
-export * from "./layout-reducer.mjs";
-export * from "./layoutTypes.mjs";
-export * from "./layoutUtils.mjs";

package/src/palette/index.mjs

@@ -1 +0,0 @@
-export * from "./Palette.mjs";

package/src/placeholder/index.mjs

@@ -1 +0,0 @@
-export * from "./Placeholder.mjs";

package/src/responsive/index.mjs

@@ -1,2 +0,0 @@
-export * from "./useResizeObserver.mjs";
-export * from "./utils.mjs";

package/src/stack/index.mjs

@@ -1,3 +0,0 @@
-export * from "./Stack.mjs";
-export * from "./StackLayout.mjs";
-export * from "./stackTypes.mjs";

package/src/tabs/index.mjs

@@ -1 +0,0 @@
-export { default as TabPanel } from "./TabPanel.mjs";

package/src/tools/config-wrapper/index.mjs

@@ -1 +0,0 @@
-export * from "./ConfigWrapper.mjs";

package/src/tools/index.mjs

@@ -1,3 +0,0 @@
-export * from "./config-wrapper/index.mjs";
-export * from "./devtools-box/layout-configurator.mjs";
-export * from "./devtools-tree/layout-tree-viewer.mjs";

package/src/utils/index.mjs

@@ -1,5 +0,0 @@
-export * from "./pathUtils.mjs";
-export * from "./propUtils.mjs";
-export * from "./refUtils.mjs";
-export * from "./styleUtils.mjs";
-export * from "./typeOf.mjs";