@vuu-ui/vuu-layout 0.8.43 → 0.8.45

package/esm/stack/StackLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"StackLayout.js","sources":["../../src/stack/StackLayout.tsx"],"sourcesContent":["import { useId } from \"@vuu-ui/vuu-utils\";\nimport React, { useCallback, useRef } from \"react\";\nimport {\n  useLayoutCreateNewChild,\n  useLayoutProviderDispatch,\n} from \"../layout-provider\";\nimport { useViewActionDispatcher } from \"../layout-view-actions\";\nimport { registerComponent } from \"../registry/ComponentRegistry\";\nimport { usePersistentState } from \"../use-persistent-state\";\nimport { Stack } from \"./Stack\";\nimport { StackProps, TabLabelFactory } from \"./stackTypes\";\nimport { getDefaultTabLabel } from \"../layout-reducer\";\nimport { Placeholder } from \"../placeholder\";\n\nimport \"./Stack.css\";\n\nconst defaultCreateNewChild = () => (\n  <Placeholder\n    resizeable\n    style={{ flexGrow: 1, flexShrink: 0, flexBasis: 0 }}\n  />\n);\n\nexport const StackLayout = (props: StackProps) => {\n  const ref = useRef<HTMLDivElement>(null);\n  const dispatch = useLayoutProviderDispatch();\n  const { loadState } = usePersistentState();\n\n  const {\n    createNewChild: createNewChildProp,\n    id: idProp,\n    onTabSelectionChanged,\n    path,\n    ...restProps\n  } = props;\n\n  const { children } = props;\n\n  const id = useId(idProp);\n\n  const [dispatchViewAction] = useViewActionDispatcher(id, ref, path);\n  const createNewChildFromContext = useLayoutCreateNewChild();\n  const createNewChild =\n    createNewChildProp ?? createNewChildFromContext ?? defaultCreateNewChild;\n\n  const handleTabSelection = (nextIdx: number) => {\n    if (path) {\n      dispatch({ type: \"switch-tab\", id, path, nextIdx });\n      onTabSelectionChanged?.(nextIdx);\n    }\n  };\n\n  const handleTabClose = useCallback(\n    (tabIndex: number) => {\n      if (Array.isArray(children)) {\n        const {\n          props: { \"data-path\": dataPath, path = dataPath },\n        } = children[tabIndex];\n        dispatch({ type: \"remove\", path });\n      }\n    },\n    [children, dispatch]\n  );\n\n  const handleTabAdd = useCallback(() => {\n    if (path) {\n      const tabIndex = React.Children.count(children);\n      const component = createNewChild(tabIndex);\n      dispatch({\n        type: \"add\",\n        path,\n        component,\n      });\n    }\n  }, [children, createNewChild, dispatch, path]);\n\n  const handleMoveTab = useCallback(\n    (fromIndex: number, toIndex: number) => {\n      if (path) {\n        dispatch({\n          fromIndex,\n          toIndex,\n          path,\n          type: \"move-child\",\n        });\n      }\n    },\n    [dispatch, path]\n  );\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const handleMouseDown = async (e: any, index: number) => {\n    let readyToDrag: undefined | ((value: unknown) => void);\n\n    const preDragActivity = async () =>\n      new Promise((resolve) => {\n        console.log(\"preDragActivity: Ok, gonna release the drag\");\n        readyToDrag = resolve;\n      });\n\n    const dragging = await dispatchViewAction(\n      { type: \"mousedown\", index, preDragActivity },\n      e\n    );\n\n    if (dragging) {\n      readyToDrag?.(undefined);\n    }\n  };\n\n  const handleTabEdit = (tabIndex: number, text: string) => {\n    dispatch({ type: \"set-title\", path: `${path}.${tabIndex}`, title: text });\n  };\n\n  const getTabLabel: TabLabelFactory = (component, idx, existingLabels) => {\n    const { id, title } = component.props;\n    return (\n      loadState(id, \"view-title\") ||\n      title ||\n      // This will normally never be called as title is always assigned in layout model\n      getDefaultTabLabel(component, idx, existingLabels)\n    );\n  };\n\n  return (\n    <Stack\n      {...restProps}\n      id={id}\n      getTabLabel={getTabLabel}\n      onMouseDown={handleMouseDown}\n      onMoveTab={handleMoveTab}\n      onAddTab={handleTabAdd}\n      onTabClose={handleTabClose}\n      onTabEdit={handleTabEdit}\n      onTabSelectionChanged={handleTabSelection}\n      ref={ref}\n    />\n  );\n};\nStackLayout.displayName = \"Stack\";\n\nregisterComponent(\"Stack\", StackLayout, \"container\");\n"],"names":["path","id"],"mappings":"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"}
+{"version":3,"file":"StackLayout.js","sources":["../../src/stack/StackLayout.tsx"],"sourcesContent":["import { useId } from \"@vuu-ui/vuu-utils\";\nimport React, { useCallback, useRef } from \"react\";\nimport {\n  useLayoutCreateNewChild,\n  useLayoutProviderDispatch,\n} from \"../layout-provider\";\nimport { useViewActionDispatcher } from \"../layout-view-actions\";\nimport { registerComponent } from \"../registry/ComponentRegistry\";\nimport { usePersistentState } from \"../use-persistent-state\";\nimport { Stack } from \"./Stack\";\nimport { StackProps, TabLabelFactory } from \"./stackTypes\";\nimport { getDefaultTabLabel } from \"../layout-reducer\";\nimport { Placeholder } from \"../placeholder\";\n\nconst defaultCreateNewChild = () => (\n  <Placeholder\n    resizeable\n    style={{ flexGrow: 1, flexShrink: 0, flexBasis: 0 }}\n  />\n);\n\nexport const StackLayout = (props: StackProps) => {\n  const ref = useRef<HTMLDivElement>(null);\n  const dispatch = useLayoutProviderDispatch();\n  const { loadState } = usePersistentState();\n\n  const {\n    createNewChild: createNewChildProp,\n    id: idProp,\n    onTabSelectionChanged,\n    path,\n    ...restProps\n  } = props;\n\n  const { children } = props;\n\n  const id = useId(idProp);\n\n  const [dispatchViewAction] = useViewActionDispatcher(id, ref, path);\n  const createNewChildFromContext = useLayoutCreateNewChild();\n  const createNewChild =\n    createNewChildProp ?? createNewChildFromContext ?? defaultCreateNewChild;\n\n  const handleTabSelection = (nextIdx: number) => {\n    if (path) {\n      dispatch({ type: \"switch-tab\", id, path, nextIdx });\n      onTabSelectionChanged?.(nextIdx);\n    }\n  };\n\n  const handleTabClose = useCallback(\n    (tabIndex: number) => {\n      if (Array.isArray(children)) {\n        const {\n          props: { \"data-path\": dataPath, path = dataPath },\n        } = children[tabIndex];\n        dispatch({ type: \"remove\", path });\n      }\n    },\n    [children, dispatch]\n  );\n\n  const handleTabAdd = useCallback(() => {\n    if (path) {\n      const tabIndex = React.Children.count(children);\n      const component = createNewChild(tabIndex);\n      dispatch({\n        type: \"add\",\n        path,\n        component,\n      });\n    }\n  }, [children, createNewChild, dispatch, path]);\n\n  const handleMoveTab = useCallback(\n    (fromIndex: number, toIndex: number) => {\n      if (path) {\n        dispatch({\n          fromIndex,\n          toIndex,\n          path,\n          type: \"move-child\",\n        });\n      }\n    },\n    [dispatch, path]\n  );\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const handleMouseDown = async (e: any, index: number) => {\n    let readyToDrag: undefined | ((value: unknown) => void);\n\n    const preDragActivity = async () =>\n      new Promise((resolve) => {\n        console.log(\"preDragActivity: Ok, gonna release the drag\");\n        readyToDrag = resolve;\n      });\n\n    const dragging = await dispatchViewAction(\n      { type: \"mousedown\", index, preDragActivity },\n      e\n    );\n\n    if (dragging) {\n      readyToDrag?.(undefined);\n    }\n  };\n\n  const handleTabEdit = (tabIndex: number, text: string) => {\n    dispatch({ type: \"set-title\", path: `${path}.${tabIndex}`, title: text });\n  };\n\n  const getTabLabel: TabLabelFactory = (component, idx, existingLabels) => {\n    const { id, title } = component.props;\n    return (\n      loadState(id, \"view-title\") ||\n      title ||\n      // This will normally never be called as title is always assigned in layout model\n      getDefaultTabLabel(component, idx, existingLabels)\n    );\n  };\n\n  return (\n    <Stack\n      {...restProps}\n      id={id}\n      getTabLabel={getTabLabel}\n      onMouseDown={handleMouseDown}\n      onMoveTab={handleMoveTab}\n      onAddTab={handleTabAdd}\n      onTabClose={handleTabClose}\n      onTabEdit={handleTabEdit}\n      onTabSelectionChanged={handleTabSelection}\n      ref={ref}\n    />\n  );\n};\nStackLayout.displayName = \"Stack\";\n\nregisterComponent(\"Stack\", StackLayout, \"container\");\n"],"names":["path","id"],"mappings":"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"}

package/package.json

@@ -1,21 +1,21 @@
 {
-  "version": "0.8.43",
+  "version": "0.8.45",
   "description": "VUU Layout Components",
   "author": "heswell",
   "license": "Apache-2.0",
   "types": "types/index.d.ts",
   "devDependencies": {
-    "@vuu-ui/vuu-data-types": "0.8.43",
-    "@vuu-ui/vuu-filter-types": "0.8.43"
+    "@vuu-ui/vuu-data-types": "0.8.45",
+    "@vuu-ui/vuu-filter-types": "0.8.45"
   },
   "dependencies": {
     "@salt-ds/core": "1.17.0",
     "@salt-ds/styles": "0.2.1",
     "@salt-ds/window": "0.1.1",
-    "@vuu-ui/vuu-popups": "0.8.43",
-    "@vuu-ui/vuu-table": "0.8.43",
-    "@vuu-ui/vuu-ui-controls": "0.8.43",
-    "@vuu-ui/vuu-utils": "0.8.43"
+    "@vuu-ui/vuu-popups": "0.8.45",
+    "@vuu-ui/vuu-table": "0.8.45",
+    "@vuu-ui/vuu-ui-controls": "0.8.45",
+    "@vuu-ui/vuu-utils": "0.8.45"
   },
   "peerDependencies": {
     "clsx": "^2.0.0",
@@ -29,7 +29,12 @@
     "cjs",
     "/types"
   ],
+  "exports": {
+    "require": "./cjs/index.js",
+    "import": "./esm/index.js"
+  },
   "main": "cjs/index.js",
   "module": "esm/index.js",
-  "name": "@vuu-ui/vuu-layout"
+  "name": "@vuu-ui/vuu-layout",
+  "type": "module"
 }

package/types/DraggableLayout.d.ts

@@ -1,5 +1,4 @@
 import { HTMLAttributes } from "react";
-import "./DraggableLayout.css";
 export interface DraggableLayoutProps extends HTMLAttributes<HTMLDivElement> {
     dropTarget?: boolean;
     resizeable?: boolean;

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

@@ -1,5 +1,4 @@
 import { HTMLAttributes, ReactElement } from "react";
-import "./DockLayout.css";
 export interface DockLayoutProps extends HTMLAttributes<HTMLDivElement> {
     children: ReactElement[];
 }

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

@@ -1,5 +1,4 @@
 import { HTMLAttributes } from "react";
-import "./Drawer.css";
 export interface DrawerProps extends HTMLAttributes<HTMLDivElement> {
     clickToOpen?: boolean;
     defaultOpen?: boolean;

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

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

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

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

package/types/flexbox/FluidGrid.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="react" />
 import { FlexboxProps } from "./flexboxTypes";
-import "./FluidGrid.css";
 export interface FluidGridProps extends FlexboxProps {
     showGrid?: boolean;
 }

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

@@ -1,6 +1,5 @@
 import { HTMLAttributes } from "react";
 import { Contribution } from "../layout-view-actions";
-import "./Header.css";
 export interface HeaderProps extends HTMLAttributes<HTMLDivElement> {
     collapsed?: boolean;
     contributions?: Contribution[];

package/types/palette/Palette.d.ts

@@ -1,7 +1,6 @@
 import { ListItemProps, ListProps } from "@vuu-ui/vuu-ui-controls";
 import { HTMLAttributes, ReactElement } from "react";
 import { ViewProps } from "../layout-view";
-import "./Palette.css";
 export interface PaletteItemProps extends ListItemProps {
     children: ReactElement;
     closeable?: boolean;

package/types/placeholder/LayoutStartPanel.d.ts

@@ -1,5 +1,4 @@
 import { HTMLAttributes } from "react";
-import "./LayoutStartPanel.css";
 export interface LayoutStartPanelProps extends HTMLAttributes<HTMLDivElement> {
     label?: string;
 }

package/types/placeholder/Placeholder.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="react" />
 import { ViewProps } from "../layout-view";
-import "./Placeholder.css";
 export interface PlaceholderProps extends ViewProps {
     closeable?: boolean;
     flexFill?: boolean;

package/types/stack/Stack.d.ts

@@ -1,4 +1,3 @@
 import React from "react";
 import { StackProps } from "./stackTypes";
-import "./Stack.css";
 export declare const Stack: React.ForwardRefExoticComponent<StackProps & React.RefAttributes<HTMLDivElement>>;

package/types/stack/StackLayout.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="react" />
 import { StackProps } from "./stackTypes";
-import "./Stack.css";
 export declare const StackLayout: {
     (props: StackProps): JSX.Element;
     displayName: string;

package/cjs/DraggableLayout.css

@@ -1,18 +0,0 @@
-.DraggableLayout {
-  display: inline-block;
-  outline: none;
-}
-
-[data-dragging='true'] {
-  position: absolute !important;
-  z-index: 100;
-}
-
-.vuuSimpleDraggableWrapper {
-  background-color: white;
-  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.2);
-}
-.vuuSimpleDraggableWrapper > * {
-  height: 100%;
-  width: 100%;
-}

package/cjs/dock-layout/DockLayout.css

@@ -1,36 +0,0 @@
-.vuuDockLayout {
-  --chest-bg: var(--hw-chest-bg, inherit);
-  --drawer-bg: var(--hw-drawer-bg, inherit);
-  --drawer-size: var(--hw-drawer-size, 200px);
-  --drawer-peek-size: var(--hw-drawer-peek-size, 32px);
-  --drawer-transition-duration: var(--hw-drawer-transition-duration, 0.4s);
-  background-color: var(--chest-bg);
-  display: flex;
-}
-
-.vuuDockLayout-horizontal {
-  flex-direction: row;
-}
-
-.vuuDockLayout-vertical {
-  flex-direction: column;
-}
-
-.vuuDockLayout-content {
-  background-color: var(--chest-bg);
-  flex-grow: 1;
-  flex-shrink: 1;
-  overflow: hidden;
-  /* position: relative; */
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.vuuDockLayout-horizontal .vuuDockLayout-content {
-  flex-basis: 100%;
-}
-
-.vuuDockLayout-vertical .vuuDockLayout-content {
-  flex-basis: 100%;
-}

package/cjs/dock-layout/Drawer.css

@@ -1,159 +0,0 @@
-.vuuDrawer {
-  --drawer-leading-edge-border: solid 1px var(--salt-container-primary-borderColor, none);
-  --vuu-close-icon-svg: var(--svg-chevron-double-right);
-
-  transition: flex-basis;
-  transition-duration: var(--drawer-transition-duration);
-  position: relative;
-  z-index: 1;
-  flex-basis: 0;
-  flex-grow: 1;
-  flex-shrink: 1;
-  min-width: 0;
-  min-height: 0;
-  display: flex;
-}
-
-.vuuDrawer-peekaboo {
-  flex-basis: var(--drawer-peek-size);
-  flex-grow: 0;
-  flex-shrink: 0;
-}
-
-.vuuDrawer-inline.vuuDrawer-open {
-  flex-basis: var(--drawer-size);
-  flex-grow: 0;
-  flex-shrink: 0;
-}
-
-.vuuDrawer-liner {
-  background-color: var(--drawer-bg);
-  overflow: hidden;
-  position: relative;
-}
-
-.vuuDrawer-content {
-  height: 100%;
-  overflow: hidden;
-  position: absolute;
-  top: 0;
-  right: var(--drawer-peek-size);
-  transition: right;
-  transition-duration: var(--drawer-transition-duration);
-  width: 100%;
-  flex: 1 1 100%;
-}
-
-.vuuDrawer-open .vuuDrawer-content {
-  right: 0;
-}
-
-/* .vuuDrawer:not(.vuuDrawer-open) .vuuDrawer-liner > * {
-  display: none;
-} */
-
-.vuuDrawer-left {
-  border-right: var(--drawer-leading-edge-border);
-}
-.vuuDrawer-right {
-  border-left: var(--drawer-leading-edge-border);
-}
-.vuuDrawer-top {
-  border-bottom: var(--drawer-leading-edge-border);
-}
-.vuuDrawer-bottom {
-  border-top: var(--drawer-leading-edge-border);
-}
-
-.vuuDrawer-left .vuuDrawer-liner,
-.vuuDrawer-right .vuuDrawer-liner {
-  height: 100%;
-  transition: width;
-}
-
-.vuuDrawer-top .vuuDrawer-liner,
-.vuuDrawer-bottom .vuuDrawer-liner {
-  width: 100%;
-  transition: height;
-}
-
-.vuuDrawer-inline .vuuDrawer-liner {
-  width: 100%;
-  height: 100%;
-}
-
-.vuuDrawer-over .vuuDrawer-liner {
-  position: absolute;
-  transition-duration: 0.4s;
-}
-
-.vuuDrawer-over.vuuDrawer-left .vuuDrawer-liner {
-  top: 0;
-  left: 0;
-  width: 0;
-}
-
-.vuuDrawer-over.vuuDrawer-right .vuuDrawer-liner {
-  top: 0;
-  right: 0;
-  width: 0;
-}
-
-.vuuDrawer-over.vuuDrawer-top .vuuDrawer-liner {
-  height: 0;
-  top: 0;
-  left: 0;
-}
-
-.vuuDrawer-over.vuuDrawer-bottom .vuuDrawer-liner {
-  bottom: 0;
-  height: 0;
-  left: 0;
-}
-
-.vuuDrawer-left.vuuDrawer-over.vuuDrawer-peekaboo .vuuDrawer-liner,
-.vuuDrawer-right.vuuDrawer-over.vuuDrawer-peekaboo .vuuDrawer-liner {
-  width: var(--drawer-peek-size);
-}
-
-.vuuDrawer-top.vuuDrawer-over.vuuDrawer-peekaboo .vuuDrawer-liner,
-.vuuDrawer-bottom.vuuDrawer-over.vuuDrawer-peekaboo .vuuDrawer-liner {
-  height: var(--drawer-peek-size);
-}
-
-.vuuDrawer-left.vuuDrawer-over.vuuDrawer-open .vuuDrawer-liner,
-.vuuDrawer-right.vuuDrawer-over.vuuDrawer-open .vuuDrawer-liner {
-  width: var(--drawer-size);
-}
-
-.vuuDrawer-top.vuuDrawer-over.vuuDrawer-open .vuuDrawer-liner,
-.vuuDrawer-bottom.vuuDrawer-over.vuuDrawer-open .vuuDrawer-liner {
-  height: var(--drawer-size);
-}
-
-.vuuDrawer-top,
-.vuuDrawer-left {
-  order: 0;
-}
-
-.vuuDrawer-bottom,
-.vuuDrawer-right {
-  order: 99;
-}
-
-.vuuDrawer-left,
-.vuuDrawer-right {
-  flex-direction: column;
-}
-
-.vuuToggleButton-container {
-  --saltButton-height: 28px;
-  --saltButton-width: 28px;
-  --vuu-icon-size: 12px;
-  flex: 0 0 28px;
-}
-
-.vuuDrawer-open {
-  --vuu-close-icon-svg: var(--svg-chevron-double-left);
-
-}

package/cjs/drag-drop/DropMenu.css

@@ -1,71 +0,0 @@
-.vuuDropMenu {
-  margin-left: -50%;
-  margin-bottom: -50%;
-  background-color: white;
-  border: solid 1px var(--grey40);
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  padding: 3px;
-  border-radius: 3px;
-}
-
-.vuuDropMenu-left,
-.vuuDropMenu-right {
-  flex-direction: column;
-}
-
-.vuuDropMenu-bottom {
-  transform: translate(0, -30px);
-}
-
-.vuuDropMenu-right {
-  transform: translate(-20px, 0);
-}
-
-.vuuDropMenu-item {
-  --vuu-icon-size: 20px;
-  width: 32px;
-  height: 32px;
-  background-color: var(--grey20);
-  border-bottom: solid 1px var(--grey40);
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.vuuDropMenu-item .Icon {
-  transform: scale(1.25);
-  transform-origin: center center;
-}
-
-.vuuDropMenu-left .vuuDropMenu-item .hwIcon {
-  transform: scale(1.25) rotate(180deg);
-  transform-origin: center center;
-}
-
-.vuuDropMenu-top .vuuDropMenu-item .hwIcon {
-  transform: scale(1.25) rotate(270deg);
-  transform-origin: center center;
-}
-
-.vuuDropMenu-bottom .vuuDropMenu-item .hwIcon {
-  transform: scale(1.25) rotate(90deg);
-  transform-origin: center center;
-}
-
-.vuuDropMenu-item .hwIcon-path {
-  fill: grey;
-}
-.vuuDropMenu-item:hover {
-  background-color: rgba(200, 200, 200, 0.5);
-}
-
-.vuuDropMenu-item:hover .hwIcon-path-2 {
-  fill: blue;
-}
-
-.vuuDropMenu-item:last-child {
-  border-bottom: none;
-}

package/cjs/drag-drop/DropTargetRenderer.css

@@ -1,40 +0,0 @@
-#hw-drag-canvas {
-  visibility: hidden;
-  z-index: 10;
-  position: absolute;
-  top: 0px;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: transparent;
-}
-
-#hw-drag-canvas > svg {
-  position: absolute;
-}
-
-.drawing #hw-drag-canvas {
-  visibility: visible;
-}
-
-path.drop-target {
-  stroke: blue;
-  stroke-width: 4px;
-  fill: transparent;
-}
-
-path.drop-target.centre {
-  stroke: red;
-}
-
-#vuu-drop-outline {
-  fill: rgba(0,0,255,.3);
-  stroke: none;
-  stroke-dasharray: 4 2;
-}
-
-#hw-drop-guides {
-  fill: none;
-  stroke: rgba(0, 0, 0, 0.3);
-  stroke-dasharray: 2 3;
-}

package/cjs/flexbox/FluidGrid.css

@@ -1,134 +0,0 @@
-:root {
-  --hw-space-unit: 4px;
-  --hw-fluid-grid-col-bg: rgba(252, 209, 232, 0.7);
-}
-
-.hwFluidGrid {
-  --gap: var(--gutter-width);
-
-  display: flex;
-  gap: calc(var(--grid-gap) * var(--hw-space-unit));
-  flex-wrap: wrap;
-  padding: 0;
-}
-
-.hwFluidGrid > * {
-  --gutter-width: calc(var(--hw-flex-gap) * var(--hw-space-unit));
-  --gutter-count: calc(var(--parent-col-count) - 1);
-  --total-gutter-width: calc(var(--gutter-count) * var(--gutter-width));
-  --available-width: calc(100% - var(--total-gutter-width));
-
-  flex-basis: 0;
-  flex-grow: 1;
-  flex-shrink: 1;
-  position: relative;
-}
-
-.hwFluidGrid > *:after {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  border: dashed 2px blue;
-}
-
-.hwFluidGrid > [data-xs] {
-  --internal-gutter-count: calc(var(--col-span) - 1);
-  --percent-width: calc(var(--col-span) / var(--parent-col-count));
-  --internal-gutter-width: calc(var(--internal-gutter-count) * var(--gutter-width));
-  flex-basis: calc(var(--available-width) * var(--percent-width) + var(--internal-gutter-width));
-  flex-grow: 0;
-}
-
-.hwFluidGrid > [data-xs='1'] {
-  --col-span: 1;
-}
-.hwFluidGrid > [data-xs='2'] {
-  --col-span: 2;
-}
-.hwFluidGrid > [data-xs='3'] {
-  --col-span: 3;
-}
-
-.hwFluidGrid > [data-xs='4'] {
-  --col-span: 4;
-}
-
-.hwFluidGrid > [data-xs='6'] {
-  --col-span: 6;
-}
-
-.hwFluidGrid > [data-xs='8'] {
-  --col-span: 8;
-}
-
-.hwFluidGrid > [data-xs='9'] {
-  --col-span: 9;
-}
-.hwFluidGrid > [data-xs='10'] {
-  --col-span: 10;
-}
-.hwFluidGrid > [data-xs='11'] {
-  --col-span: 11;
-}
-
-.hwFluidGrid > [data-xs='12'] {
-  --col-span: 12;
-}
-
-@media (min-width: 600px) {
-  .hwFluidGrid > [data-sm='1'] {
-    --col-span: 1;
-  }
-  .hwFluidGrid > [data-sm='2'] {
-    --col-span: 2;
-  }
-
-  .hwFluidGrid > [data-sm='3'] {
-    --col-span: 3;
-  }
-
-  .hwFluidGrid > [data-sm='4'] {
-    --col-span: 4;
-  }
-
-  .hwFluidGrid > [data-sm='6'] {
-    --col-span: 6;
-  }
-
-  .hwFluidGrid > [data-sm='8'] {
-    --col-span: 8;
-  }
-  .hwFluidGrid > [data-sm='9'] {
-    --col-span: 9;
-  }
-  .hwFluidGrid > [data-sm='10'] {
-    --col-span: 10;
-  }
-  .hwFluidGrid > [data-sm='11'] {
-    --col-span: 11;
-  }
-  .hwFluidGrid > [data-sm='12'] {
-    --col-span: 12;
-  }
-}
-
-/* Display the grid background */
-
-.hwFluidGrid-show-grid {
-  --gutter-width: calc(var(--hw-flex-gap) * var(--hw-space-unit));
-  --grid-gutter-count: calc(var(--grid-col-count, var(--parent-col-count)) - 1);
-  --grid-total-gutter-width: calc(var(--grid-gutter-count) * var(--gutter-width));
-  --grid-available-width: calc(100% - var(--grid-total-gutter-width));
-  --grid-percent-width: calc(1 / var(--grid-col-count, var(--parent-col-count)));
-  --column-width: calc(var(--grid-available-width) * var(--grid-percent-width));
-  background: repeating-linear-gradient(
-    to right,
-    var(--hw-fluid-grid-col-bg) 0,
-    var(--hw-fluid-grid-col-bg) var(--column-width),
-    white var(--column-width),
-    white calc(var(--column-width) + var(--gutter-width))
-  );
-}

package/cjs/layout-header/Header.css

@@ -1,9 +0,0 @@
-.vuuHeader {
-  --saltButton-height: 24px;
-  --saltButton-width: 24px;
-}
-
-.salt-density-high .vuuHeader {
---saltToolbarField-marginTop: 0;
-}
-

package/cjs/palette/Palette.css

@@ -1,33 +0,0 @@
-.vuuPalette {
-  --vuuList-borderStyle: none;
-}
-
-.vuuPalette-horizontal {
-  align-items: center;
-  display: flex;
-}
-
-.vuuPaletteItem {
-  --vuu-icon-color: var(--salt-content-primary-foreground);
-  --vuu-icon-left: 0;
-  --vuu-icon-size: 16px;
-  --vuu-icon-top: 11px;
-  --list-item-text-padding: 0 0 0 calc(var(--salt-size-unit) * 3);
-  border-bottom: solid 1px var(--salt-separable-tertiary-borderColor);
-  padding-left: 12px;
-  font-size: 12px;
-  font-weight: 600;
-}
-
-.vuuSimpleDraggableWrapper > .vuuPaletteItem {
-  --vuu-icon-color: var(--salt-selectable-foreground);
-
-}
-
-.salt-theme .vuuPaletteItem {
-  font-size: 11px;
-  font-weight: normal;
-
-}
-
-