@vuu-ui/vuu-layout 4.0.0-alpha.9 → 4.0.0-beta.1

package/README.md

@@ -1 +1,18 @@
-This is a regular package
+# @vuu-ui/vuu-layout
+
+> **Deprecated:** this package is deprecated and will be removed in a future release.
+>
+> If you are using `Flexbox` with `resizeable` children to create a pair of panes
+> separated by a draggable splitter, use `SplitPane` from `@vuu-ui/vuu-ui-controls`
+> instead. `SplitPane` follows the API of the Salt `FlexLayout` component, with Salt
+> `FlexItem` components as children:
+>
+> ```tsx
+> import { FlexItem } from "@salt-ds/core";
+> import { SplitPane } from "@vuu-ui/vuu-ui-controls";
+>
+> <SplitPane direction="row" onSplitterMoved={([size1, size2]) => {}}>
+>   <FlexItem basis="200px">Left</FlexItem>
+>   <FlexItem grow={1}>Right</FlexItem>
+> </SplitPane>;
+> ```

package/package.json

@@ -1,8 +1,7 @@
 {
-  "version": "4.0.0-alpha.9",
+  "version": "4.0.0-beta.1",
   "description": "VUU Layout Components",
   "main": "./src/index.js",
-  "type": "module",
   "author": "heswell",
   "license": "Apache-2.0",
   "scripts": {
@@ -12,20 +11,20 @@
   },
   "types": "types/index.d.ts",
   "devDependencies": {
-    "@vuu-ui/vuu-data-types": "4.0.0-alpha.9",
-    "@vuu-ui/vuu-filter-types": "4.0.0-alpha.9"
+    "@vuu-ui/vuu-data-types": "4.0.0-beta.1",
+    "@vuu-ui/vuu-filter-types": "4.0.0-beta.1"
   },
   "dependencies": {
-    "@salt-ds/core": "1.67.0",
-    "@salt-ds/styles": "0.2.1",
-    "@salt-ds/window": "0.1.1",
-    "@vuu-ui/vuu-data-react": "4.0.0-alpha.9",
-    "@vuu-ui/vuu-datatable": "4.0.0-alpha.9",
-    "@vuu-ui/vuu-filters": "4.0.0-alpha.9",
-    "@vuu-ui/vuu-popups": "4.0.0-alpha.9",
-    "@vuu-ui/vuu-table": "4.0.0-alpha.9",
-    "@vuu-ui/vuu-ui-controls": "4.0.0-alpha.9",
-    "@vuu-ui/vuu-utils": "4.0.0-alpha.9"
+    "@salt-ds/core": "1.72.0",
+    "@salt-ds/styles": "0.4.1",
+    "@salt-ds/window": "0.1.2",
+    "@vuu-ui/vuu-data-react": "4.0.0-beta.1",
+    "@vuu-ui/vuu-datatable": "4.0.0-beta.1",
+    "@vuu-ui/vuu-filters": "4.0.0-beta.1",
+    "@vuu-ui/vuu-popups": "4.0.0-beta.1",
+    "@vuu-ui/vuu-table": "4.0.0-beta.1",
+    "@vuu-ui/vuu-ui-controls": "4.0.0-beta.1",
+    "@vuu-ui/vuu-utils": "4.0.0-beta.1"
   },
   "peerDependencies": {
     "clsx": "^2.0.0",
@@ -41,9 +40,11 @@
   "exports": {
     ".": {
       "import": "./src/index.js",
+      "default": "./src/index.js",
       "types": "./types/index.d.ts"
     }
   },
   "module": "./src/index.js",
-  "name": "@vuu-ui/vuu-layout"
+  "name": "@vuu-ui/vuu-layout",
+  "type": "module"
 }

package/src/placeholder/LayoutStartPanel.css.js

@@ -9,7 +9,7 @@ const css = `
 }
 
 .vuuLayoutStartPanel-title {
-  color: var(--vuu-color-gray-80);
+  color: var(--salt-color-gray-800);
   text-align: center;
   font-size: 28px;
   line-height: 1.5;

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

@@ -1,7 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import react, { useState } from "react";
-import { LayoutConfigurator } from "../devtools-box/layout-configurator.js";
-import { LayoutTreeViewer } from "../devtools-tree/layout-tree-viewer.js";
+import { LayoutConfigurator, LayoutTreeViewer } from "../index.js";
 import { followPathToComponent } from "../../index.js";
 const ConfigWrapper = ({ children })=>{
     const designMode = false;

package/types/dock-layout/DockLayout.d.ts

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from "react";
 export type DockLayoutProps = HTMLAttributes<HTMLDivElement>;
-declare function DockLayout(props: DockLayoutProps): import("react").JSX.Element;
+declare function DockLayout(props: DockLayoutProps): import("react/jsx-runtime").JSX.Element;
 declare namespace DockLayout {
     var displayName: string;
 }

package/types/dock-layout/Drawer.d.ts

@@ -10,7 +10,7 @@ export interface DrawerProps extends HTMLAttributes<HTMLDivElement> {
     sizeClosed?: number;
     toggleButton?: "start" | "end";
 }
-declare function Drawer({ children, className: classNameProp, clickToOpen, defaultOpen, sizeOpen, sizeClosed, style: styleProp, open: openProp, position, inline, onClick, peekaboo, toggleButton, ...props }: DrawerProps): import("react").JSX.Element;
+declare function Drawer({ children, className: classNameProp, clickToOpen, defaultOpen, sizeOpen, sizeClosed, style: styleProp, open: openProp, position, inline, onClick, peekaboo, toggleButton, ...props }: DrawerProps): import("react/jsx-runtime").JSX.Element;
 declare namespace Drawer {
     var displayName: string;
 }

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

@@ -1,6 +1,6 @@
-import type { ReactElement } from "react";
-import { type LayoutModel } from "@vuu-ui/vuu-utils";
-import type { DragDropRect, DropPos, RelativePosition } from "./dragDropTypes";
+import { ReactElement } from "react";
+import { LayoutModel } from "@vuu-ui/vuu-utils";
+import { DragDropRect, DropPos, RelativePosition } from "./dragDropTypes";
 export declare const positionValues: {
     north: number;
     east: number;

package/types/flexbox/Flexbox.d.ts

@@ -1,3 +1,7 @@
 import { FlexboxProps } from "./flexboxTypes";
+/**
+ * @deprecated vuu-layout is deprecated. For two panes separated by a
+ * draggable splitter, use `SplitPane` from `@vuu-ui/vuu-ui-controls`.
+ */
 declare const Flexbox: import("react").ForwardRefExoticComponent<FlexboxProps & import("react").RefAttributes<HTMLDivElement>>;
 export default Flexbox;

package/types/flexbox/FlexboxLayout.d.ts

@@ -1,5 +1,5 @@
 import { FlexboxLayoutProps } from "./flexboxTypes";
-export declare function FlexboxLayout(props: FlexboxLayoutProps): import("react").JSX.Element;
+export declare function FlexboxLayout(props: FlexboxLayoutProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace FlexboxLayout {
     var displayName: string;
 }

package/types/flexbox/Splitter.d.ts

@@ -9,4 +9,4 @@ export interface SplitterProps extends Omit<HTMLAttributes<HTMLDivElement>, "onD
     onDrag: SplitterDragHandler;
     onDragEnd: SplitterDragEndHandler;
 }
-export declare const Splitter: React.MemoExoticComponent<({ column, index, onDrag, onDragEnd, onDragStart, style, }: SplitterProps) => React.JSX.Element>;
+export declare const Splitter: React.MemoExoticComponent<({ column, index, onDrag, onDragEnd, onDragStart, style, }: SplitterProps) => import("react/jsx-runtime").JSX.Element>;

package/types/layout-header/ActionButton.d.ts

@@ -4,5 +4,5 @@ export interface ActionButtonProps extends Omit<HTMLAttributes<HTMLButtonElement
     iconName?: string;
     onClick: (evt: MouseEvent, actionId: "maximize" | "minimize" | "restore" | "tearout") => void;
 }
-declare const ActionButton: ({ actionId, className, iconName, onClick, ...props }: ActionButtonProps) => import("react").JSX.Element;
+declare const ActionButton: ({ actionId, className, iconName, onClick, ...props }: ActionButtonProps) => import("react/jsx-runtime").JSX.Element;
 export default ActionButton;

package/types/layout-header/Header.d.ts

@@ -12,4 +12,4 @@ export interface HeaderProps extends HTMLAttributes<HTMLDivElement> {
     orientation?: "horizontal" | "vertical";
     tearOut?: boolean;
 }
-export declare const Header: ({ allowRename, className: classNameProp, contributions, collapsed, closeable, onCollapse, onEditTitle, onExpand, orientation: orientationProp, style, title, }: HeaderProps) => import("react").JSX.Element;
+export declare const Header: ({ allowRename, className: classNameProp, contributions, collapsed, closeable, onCollapse, onEditTitle, onExpand, orientation: orientationProp, style, title, }: HeaderProps) => import("react/jsx-runtime").JSX.Element;

package/types/layout-provider/LayoutProvider.d.ts

@@ -8,7 +8,7 @@ export interface LayoutProviderProps {
     workspaceJSON?: LayoutJSON | LayoutJSON[];
     onLayoutChange?: LayoutChangeHandler;
 }
-export declare const LayoutProviderVersion: () => import("react").JSX.Element;
+export declare const LayoutProviderVersion: () => import("react/jsx-runtime").JSX.Element;
 export declare const LayoutProvider: (props: LayoutProviderProps) => ReactElement;
 export declare const useLayoutProviderDispatch: () => LayoutProviderDispatch;
 export declare const useLayoutOperation: () => {

package/types/palette/Palette.d.ts

@@ -10,7 +10,7 @@ export interface PaletteItemProps extends OptionProps {
     component: ReactElement;
     idx?: number;
 }
-export declare const PaletteItem: import("react").MemoExoticComponent<({ className, component, idx, key, value, ViewProps, ...props }: PaletteItemProps) => import("react").JSX.Element>;
+export declare const PaletteItem: import("react").MemoExoticComponent<({ className, component, idx, key, value, ViewProps, ...props }: PaletteItemProps) => import("react/jsx-runtime").JSX.Element>;
 export interface PaletteProps extends Omit<HTMLAttributes<HTMLDivElement>, "onDragStart" | "onDrop" | "onSelect"> {
     ListBoxProps?: Partial<ListBoxProps>;
     ViewProps?: Partial<ViewProps>;
@@ -18,4 +18,4 @@ export interface PaletteProps extends Omit<HTMLAttributes<HTMLDivElement>, "onDr
     orientation: "horizontal" | "vertical";
     selection?: string;
 }
-export declare const Palette: ({ ListBoxProps, ViewProps, children, className, orientation, ...props }: PaletteProps) => import("react").JSX.Element;
+export declare const Palette: ({ ListBoxProps, ViewProps, children, className, orientation, ...props }: PaletteProps) => import("react/jsx-runtime").JSX.Element;

package/types/placeholder/LayoutStartPanel.d.ts

@@ -2,4 +2,4 @@ import { HTMLAttributes } from "react";
 export interface LayoutStartPanelProps extends HTMLAttributes<HTMLDivElement> {
     label?: string;
 }
-export declare const LayoutStartPanel: (htmlAttributes: LayoutStartPanelProps) => import("react").JSX.Element | null;
+export declare const LayoutStartPanel: (htmlAttributes: LayoutStartPanelProps) => import("react/jsx-runtime").JSX.Element | null;

package/types/placeholder/Placeholder.d.ts

@@ -10,7 +10,7 @@ export interface PlaceholderProps extends ViewProps {
      */
     shim?: boolean;
 }
-export declare function Placeholder({ className: classNameProp, showStartMenu, ...viewProps }: PlaceholderProps): import("react").JSX.Element;
+export declare function Placeholder({ className: classNameProp, showStartMenu, ...viewProps }: PlaceholderProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace Placeholder {
     var displayName: string;
 }

package/types/responsive/overflowUtils.d.ts

@@ -1,2 +1,2 @@
-export function getOverflowedItems(containerRef: any, height?: number): any[][];
-export function findFirstOverflow(elements: any, height: any): number;
+export declare const getOverflowedItems: (containerRef: any, height?: number) => any[][];
+export declare const findFirstOverflow: (elements: any, height: any) => number;

package/types/stack/StackLayout.d.ts

@@ -1,6 +1,5 @@
-import React from "react";
 import { StackProps } from "./stackTypes";
-export declare function StackLayout(props: StackProps): React.JSX.Element;
+export declare function StackLayout(props: StackProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace StackLayout {
     var displayName: string;
 }

package/types/tabs/TabPanel.d.ts

@@ -3,5 +3,5 @@ import './TabPanel.css';
 export interface TabPanelProps extends HTMLAttributes<HTMLDivElement> {
     ariaLabelledBy: string;
 }
-declare const TabPanel: ({ ariaLabelledBy, children, id }: TabPanelProps) => import("react").JSX.Element;
+declare const TabPanel: ({ ariaLabelledBy, children, id }: TabPanelProps) => import("react/jsx-runtime").JSX.Element;
 export default TabPanel;

package/types/tools/config-wrapper/ConfigWrapper.d.ts

@@ -1,2 +1 @@
-import React from "react";
-export declare const ConfigWrapper: ({ children }: any) => React.JSX.Element;
+export declare const ConfigWrapper: ({ children }: any) => import("react/jsx-runtime").JSX.Element;

package/types/tools/devtools-box/layout-configurator.d.ts

@@ -27,5 +27,5 @@ export declare const LayoutConfigurator: ({ height, managedStyle, onChange, styl
     onChange: any;
     style: any;
     width: any;
-}) => import("react").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export declare function XXXnormalizeStyles(layoutStyle?: {}, visualStyle?: {}): {};

package/types/tools/devtools-tree/layout-tree-viewer.d.ts

@@ -1,6 +1,5 @@
-import React from "react";
 export declare const LayoutTreeViewer: ({ layout, onSelect: _, style }: {
     layout: any;
     onSelect: any;
     style: any;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;

package/src/tools/devtools-box/layout-configurator.js

@@ -1,293 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { FormField, Input } from "@salt-ds/core";
-import { useComponentCssInjection } from "@salt-ds/styles";
-import { useWindow } from "@salt-ds/window";
-import layout_configurator from "./layout-configurator.css";
-const NO_STYLE = {};
-const DIMENSIONS = {
-    margin: {
-        top: "marginTop",
-        right: "marginRight",
-        bottom: "marginBottom",
-        left: "marginLeft"
-    },
-    border: {
-        top: "borderTopWidth",
-        right: "borderRightWidth",
-        bottom: "borderBottomWidth",
-        left: "borderLeftWidth"
-    },
-    padding: {
-        top: "paddingTop",
-        right: "paddingRight",
-        bottom: "paddingBottom",
-        left: "paddingLeft"
-    }
-};
-const LayoutBox = ({ feature, children, style, onChange })=>/*#__PURE__*/ jsxs("div", {
-        className: `LayoutBox layout-${feature} layout-outer`,
-        children: [
-            /*#__PURE__*/ jsxs("div", {
-                className: "layout-top",
-                children: [
-                    /*#__PURE__*/ jsx("span", {
-                        className: "layout-title",
-                        children: feature
-                    }),
-                    /*#__PURE__*/ jsx(FormField, {
-                        className: "layout-input",
-                        style: {
-                            width: 30
-                        },
-                        children: /*#__PURE__*/ jsx(Input, {
-                            value: style.top,
-                            onChange: (evt, value)=>onChange(feature, "top", value)
-                        })
-                    })
-                ]
-            }),
-            /*#__PURE__*/ jsxs("div", {
-                className: "layout-inner",
-                children: [
-                    /*#__PURE__*/ jsx("div", {
-                        className: "layout-left",
-                        children: /*#__PURE__*/ jsx(FormField, {
-                            className: "layout-input",
-                            style: {
-                                width: 30
-                            },
-                            children: /*#__PURE__*/ jsx(Input, {
-                                value: style.left,
-                                onChange: (evt, value)=>onChange(feature, "left", value)
-                            })
-                        })
-                    }),
-                    children,
-                    /*#__PURE__*/ jsx("div", {
-                        className: "layout-right",
-                        children: /*#__PURE__*/ jsx(FormField, {
-                            className: "layout-input",
-                            style: {
-                                width: 30
-                            },
-                            children: /*#__PURE__*/ jsx(Input, {
-                                value: style.right,
-                                onChange: (evt, value)=>onChange(feature, "right", value)
-                            })
-                        })
-                    })
-                ]
-            }),
-            /*#__PURE__*/ jsx("div", {
-                className: "layout-bottom",
-                children: /*#__PURE__*/ jsx(FormField, {
-                    className: "layout-input",
-                    style: {
-                        width: 30
-                    },
-                    children: /*#__PURE__*/ jsx(Input, {
-                        value: style.bottom,
-                        onChange: (evt, value)=>onChange(feature, "bottom", value)
-                    })
-                })
-            })
-        ]
-    });
-const MARGIN_STYLES = {
-    margin: true,
-    marginTop: true,
-    marginRight: true,
-    marginBottom: true,
-    marginLeft: true
-};
-const PADDING_STYLES = {
-    padding: true,
-    paddingTop: true,
-    paddingRight: true,
-    paddingBottom: true,
-    paddingLeft: true
-};
-const BORDER_STYLES = {
-    border: true,
-    borderColor: true,
-    borderWidth: true,
-    borderTopWidth: true,
-    borderRightWidth: true,
-    borderBottomWidth: true,
-    borderLeftWidth: true
-};
-const CSS_DIGIT = "(\\d+)(?:px)?";
-const CSS_MEASURE = `^(?:${CSS_DIGIT}(?:\\s${CSS_DIGIT}(?:\\s${CSS_DIGIT}(?:\\s${CSS_DIGIT})?)?)?)$`;
-const CSS_REX = new RegExp(CSS_MEASURE);
-const BORDER_REX = /^(?:(\d+)(?:px)\ssolid\s([a-zA-Z,0-9().]+))$/;
-const LayoutConfigurator = ({ height, managedStyle, onChange, style, width })=>{
-    const targetWindow = useWindow();
-    useComponentCssInjection({
-        testId: "vuu-layout-configurator",
-        css: layout_configurator,
-        window: targetWindow
-    });
-    const state = normalizeStyle(managedStyle);
-    const handleChange = (feature, dimension, strValue)=>{
-        const value = parseInt(strValue || "0", 10);
-        const property = DIMENSIONS[feature][dimension];
-        onChange(property, value);
-    };
-    const { marginTop: mt = 0, marginRight: mr = 0, marginBottom: mb = 0, marginLeft: ml = 0 } = state;
-    const { borderTopWidth: bt = 0, borderRightWidth: br = 0, borderBottomWidth: bb = 0, borderLeftWidth: bl = 0 } = state;
-    const { paddingTop: pt = 0, paddingRight: pr = 0, paddingBottom: pb = 0, paddingLeft: pl = 0 } = state;
-    return /*#__PURE__*/ jsx("div", {
-        className: "LayoutConfigurator",
-        style: {
-            width,
-            height,
-            ...style
-        },
-        children: /*#__PURE__*/ jsx(LayoutBox, {
-            feature: "margin",
-            style: {
-                top: mt,
-                right: mr,
-                bottom: mb,
-                left: ml
-            },
-            onChange: handleChange,
-            children: /*#__PURE__*/ jsx(LayoutBox, {
-                feature: "border",
-                style: {
-                    top: bt,
-                    right: br,
-                    bottom: bb,
-                    left: bl
-                },
-                onChange: handleChange,
-                children: /*#__PURE__*/ jsx(LayoutBox, {
-                    feature: "padding",
-                    style: {
-                        top: pt,
-                        right: pr,
-                        bottom: pb,
-                        left: pl
-                    },
-                    onChange: handleChange,
-                    children: /*#__PURE__*/ jsx("div", {
-                        className: "layout-content"
-                    })
-                })
-            })
-        })
-    });
-};
-function XXXnormalizeStyles(layoutStyle = NO_STYLE, visualStyle = NO_STYLE) {
-    const { margin, marginTop, marginRight, marginBottom, marginLeft, padding, paddingTop, paddingRight, paddingBottom, paddingLeft, ...style } = layoutStyle;
-    if ("number" == typeof margin) style.marginTop = style.marginRight = style.marginBottom = style.marginLeft = margin;
-    else if ("string" == typeof margin) {
-        const match = CSS_REX.exec(margin);
-        if (null === match) console.error(`Invalid css value for margin '${margin}'`);
-        else {
-            const [, pos1, pos2, pos3, pos4] = match;
-            const pos123 = pos1 && pos2 && pos3;
-            if (pos123 && pos4) {
-                style.marginTop = parseInt(pos1, 10);
-                style.marginRight = parseInt(pos2, 10);
-                style.marginBottom = parseInt(pos3, 10);
-                style.marginLeft = parseInt(pos4, 10);
-            } else if (pos123) {
-                style.marginTop = parseInt(pos1, 10);
-                style.marginRight = style.marginLeft = parseInt(pos2, 10);
-                style.marginBottom = parseInt(pos3, 10);
-            } else if (pos1 && pos2) {
-                style.marginTop = style.marginBottom = parseInt(pos1, 10);
-                style.marginRight = style.marginLeft = parseInt(pos2, 10);
-            } else style.marginTop = style.marginRight = style.marginBottom = style.marginLeft = parseInt(pos1, 10);
-        }
-    }
-    if ("number" == typeof marginTop) style.marginTop = marginTop;
-    if ("number" == typeof marginRight) style.marginRight = marginRight;
-    if ("number" == typeof marginBottom) style.marginBottom = marginBottom;
-    if ("number" == typeof marginLeft) style.marginLeft = marginLeft;
-    if ("number" == typeof padding) style.paddingTop = style.paddingRight = style.paddingBottom = style.paddingLeft = padding;
-    else if ("string" == typeof padding) {
-        const match = CSS_REX.exec(padding);
-        if (null === match) console.error(`Invalid css value for padding '${padding}'`);
-        else {
-            const [, pos1, pos2, pos3, pos4] = match;
-            const pos123 = pos1 && pos2 && pos3;
-            if (pos123 && pos4) {
-                style.paddingTop = parseInt(pos1, 10);
-                style.paddingRight = parseInt(pos2, 10);
-                style.paddingBottom = parseInt(pos3, 10);
-                style.paddingLeft = parseInt(pos4, 10);
-            } else if (pos123) {
-                style.paddingTop = parseInt(pos1, 10);
-                style.paddingRight = style.paddingLeft = parseInt(pos2, 10);
-                style.paddingBottom = parseInt(pos3, 10);
-            } else if (pos1 && pos2) {
-                style.paddingTop = style.paddingBottom = parseInt(pos1, 10);
-                style.paddingRight = style.paddingLeft = parseInt(pos2, 10);
-            } else style.paddingTop = style.paddingRight = style.paddingBottom = style.paddinggLeft = parseInt(pos1, 10);
-        }
-    }
-    if ("number" == typeof paddingTop) style.paddingTop = paddingTop;
-    if ("number" == typeof paddingRight) style.paddingRight = paddingRight;
-    if ("number" == typeof paddingBottom) style.paddingBottom = paddingBottom;
-    if ("number" == typeof paddingLeft) style.paddingLeft = paddingLeft;
-    return normalizeStyle(style);
-}
-function normalizeStyle(managedStyle = NO_STYLE) {
-    const style = {
-        ...managedStyle
-    };
-    let match;
-    let { border, borderWidth, borderTopWidth, borderRightWidth, borderBottomWidth, borderLeftWidth, borderColor, margin, marginTop, marginRight, marginBottom, marginLeft, padding, paddingTop, paddingRight, paddingBottom, paddingLeft, ...rest } = style;
-    let marginStyles = {};
-    let paddingStyles = {};
-    if ("number" == typeof margin) {
-        style.marginTop = style.marginRight = style.marginBottom = style.marginLeft = margin;
-        marginStyles = {
-            marginTop: margin,
-            marginRight: margin,
-            marginBottom: margin,
-            marginLeft: margin
-        };
-    }
-    if ("number" == typeof padding) {
-        style.paddingTop = style.paddingRight = style.paddingBottom = style.paddingLeft = padding;
-        paddingStyles = {
-            paddingTop: padding,
-            paddingRight: padding,
-            paddingBottom: padding,
-            paddingLeft: padding
-        };
-    }
-    if (!border && !borderWidth && !borderTopWidth && !borderRightWidth && !borderBottomWidth && !borderLeftWidth) return style;
-    {
-        if ("string" == typeof border && (match = BORDER_REX.exec(border))) {
-            [, borderWidth, borderColor] = match;
-            borderWidth = parseInt(borderWidth, 10);
-        }
-        if (borderWidth) {
-            borderTopWidth = void 0 === borderTopWidth ? borderWidth : borderTopWidth;
-            borderRightWidth = void 0 === borderRightWidth ? borderWidth : borderRightWidth;
-            borderBottomWidth = void 0 === borderBottomWidth ? borderWidth : borderBottomWidth;
-            borderLeftWidth = void 0 === borderLeftWidth ? borderWidth : borderLeftWidth;
-        }
-        borderColor = borderColor || "black";
-        const boxShadow = `
-                ${borderColor} ${borderLeftWidth || 0}px ${borderTopWidth || 0}px 0 0 inset,
-                ${borderColor} ${-borderRightWidth || 0}px ${-borderBottomWidth || 0}px 0 0 inset`;
-        return {
-            ...rest,
-            ...marginStyles,
-            ...paddingStyles,
-            borderTopWidth,
-            borderRightWidth,
-            borderBottomWidth,
-            borderLeftWidth,
-            borderColor,
-            borderStyle: "solid",
-            boxShadow
-        };
-    }
-}
-export { BORDER_STYLES, LayoutConfigurator, MARGIN_STYLES, PADDING_STYLES, XXXnormalizeStyles };

package/src/tools/devtools-tree/layout-tree-viewer.js

@@ -1,40 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import react from "react";
-import clsx from "clsx";
-import { useComponentCssInjection } from "@salt-ds/styles";
-import { useWindow } from "@salt-ds/window";
-import { typeOf } from "../../utils/index.js";
-import layout_tree_viewer from "./layout-tree-viewer.css";
-import { TreeTable } from "@vuu-ui/vuu-datatable";
-const classBaseTree = "hwLayoutTreeViewer";
-const toTreeJson = (component, path = "0")=>({
-        label: typeOf(component),
-        path,
-        childNodes: react.Children.map(component.props.children, (child, i)=>toTreeJson(child, path ? `${path}.${i}` : `${i}`))
-    });
-const LayoutTreeViewer = ({ layout, onSelect: _, style })=>{
-    const targetWindow = useWindow();
-    useComponentCssInjection({
-        testId: "vuu-layout-tree-viewer",
-        css: layout_tree_viewer,
-        window: targetWindow
-    });
-    const treeJson = [
-        toTreeJson(layout)
-    ];
-    const handleSelection = (row)=>{
-        console.log({
-            row
-        });
-    };
-    return /*#__PURE__*/ jsx("div", {
-        className: clsx(classBaseTree),
-        style: style,
-        children: /*#__PURE__*/ jsx(TreeTable, {
-            source: treeJson,
-            selectionModel: "single",
-            onSelect: handleSelection
-        })
-    });
-};
-export { LayoutTreeViewer };

package/types/src/Component.d.ts

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

package/types/src/LayoutContainer.d.ts

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

package/types/src/debug.d.ts

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

package/types/src/dock-layout/DockLayout.d.ts

@@ -1,7 +0,0 @@
-import { HTMLAttributes } from "react";
-export type DockLayoutProps = HTMLAttributes<HTMLDivElement>;
-declare function DockLayout(props: DockLayoutProps): import("react").JSX.Element;
-declare namespace DockLayout {
-    var displayName: string;
-}
-export default DockLayout;

package/types/src/dock-layout/Drawer.d.ts

@@ -1,17 +0,0 @@
-import { HTMLAttributes } from "react";
-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 function Drawer({ children, className: classNameProp, clickToOpen, defaultOpen, sizeOpen, sizeClosed, style: styleProp, open: openProp, position, inline, onClick, peekaboo, toggleButton, ...props }: DrawerProps): import("react").JSX.Element;
-declare namespace Drawer {
-    var displayName: string;
-}
-export default Drawer;

package/types/src/dock-layout/index.d.ts

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