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

package/cjs/layout-reducer/wrap-layout-element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wrap-layout-element.js","sources":["../../../../packages/vuu-layout/src/layout-reducer/wrap-layout-element.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport {\n  getLayoutComponent,\n  LayoutModel,\n  rectTuple,\n  uuid,\n} from \"@vuu-ui/vuu-utils\";\nimport React, { ReactElement } from \"react\";\nimport { DropPos } from \"../drag-drop/dragDropTypes\";\nimport { DropTarget } from \"../drag-drop/DropTarget\";\nimport { getProp, getProps, nextStep, resetPath, typeOf } from \"../utils\";\nimport {\n  createFlexbox,\n  createPlaceHolder,\n  flexDirection,\n  getFlexStyle,\n  getIntrinsicSize,\n  wrapIntrinsicSizeComponentWithFlexbox,\n} from \"./flexUtils\";\nimport { applyLayoutProps, LayoutProps } from \"./layoutUtils\";\n\nexport interface LayoutSpec {\n  type: \"Stack\" | \"Flexbox\";\n  flexDirection: \"column\" | \"row\";\n  showTabs?: boolean;\n}\n\nconst isHtmlElement = (component: LayoutModel) => {\n  const [firstLetter] = typeOf(component) as string;\n  return firstLetter === firstLetter.toLowerCase();\n};\n\nexport function wrap(\n  container: ReactElement,\n  existingComponent: ReactElement,\n  newComponent: any,\n  pos: DropPos,\n  clientRect?: DropTarget[\"clientRect\"],\n  dropRect?: DropTarget[\"dropRect\"],\n): ReactElement {\n  const { children: containerChildren, path: containerPath } =\n    getProps(container);\n\n  const existingComponentPath = getProp(existingComponent, \"path\");\n  const { idx, finalStep } = nextStep(containerPath, existingComponentPath);\n  const children = finalStep\n    ? updateChildren(\n        container,\n        containerChildren,\n        existingComponent,\n        newComponent,\n        pos,\n        clientRect,\n        dropRect,\n      )\n    : containerChildren.map((child: ReactElement, index: number) =>\n        index === idx\n          ? wrap(\n              child,\n              existingComponent,\n              newComponent,\n              pos,\n              clientRect,\n              dropRect,\n            )\n          : child,\n      );\n\n  return React.cloneElement(container, undefined, children);\n}\n\nfunction updateChildren(\n  container: LayoutModel,\n  containerChildren: ReactElement[],\n  existingComponent: ReactElement,\n  newComponent: ReactElement,\n  pos: DropPos,\n  clientRect?: DropTarget[\"clientRect\"],\n  dropRect?: rectTuple,\n) {\n  const intrinsicSize = getIntrinsicSize(newComponent);\n\n  if (intrinsicSize?.width && intrinsicSize?.height) {\n    if (clientRect === undefined || dropRect === undefined) {\n      throw Error(\n        \"wrap-layout-element, updateChildren clientRect and dropRect must both be available\",\n      );\n    }\n    return wrapIntrinsicSizedComponent(\n      containerChildren,\n      existingComponent,\n      newComponent,\n      pos,\n      clientRect,\n      dropRect,\n    );\n  }\n  return wrapFlexComponent(\n    container,\n    containerChildren,\n    existingComponent,\n    newComponent,\n    pos,\n  );\n}\n\nfunction wrapFlexComponent(\n  container: LayoutModel,\n  containerChildren: ReactElement[],\n  existingComponent: ReactElement,\n  newComponent: ReactElement,\n  pos: DropPos,\n) {\n  const { version = 0 } = getProps(newComponent);\n  const { path: existingComponentPath, title } = getProps(existingComponent);\n  const {\n    type,\n    flexDirection,\n    showTabs: showTabsProp,\n  } = getLayoutSpecForWrapper(pos);\n  const [style, existingComponentStyle, newComponentStyle] =\n    getWrappedFlexStyles(\n      type,\n      existingComponent,\n      newComponent,\n      flexDirection,\n      pos,\n    );\n  const targetFirst = isTargetFirst(pos);\n  const active = targetFirst ? 1 : 0;\n\n  const newComponentProps = {\n    resizeable: true,\n    style: newComponentStyle,\n    version: version + 1,\n  };\n  const resizeProp = isHtmlElement(existingComponent)\n    ? \"data-resizeable\"\n    : \"resizeable\";\n\n  const existingComponentProps = {\n    [resizeProp]: true,\n    style: existingComponentStyle,\n  };\n\n  const showTabs = type === \"Stack\" ? { showTabs: showTabsProp } : undefined;\n  const splitterSize =\n    type === \"Flexbox\"\n      ? {\n          splitterSize:\n            (typeOf(container) === \"Flexbox\" &&\n              (container.props as any).splitterSize) ??\n            undefined,\n        }\n      : undefined;\n\n  const id = uuid();\n  const wrapper = React.createElement(\n    getLayoutComponent(type),\n    {\n      active,\n      id,\n      key: id,\n      path: getProp(existingComponent, \"path\"),\n      flexFill: getProp(existingComponent, \"flexFill\"),\n      ...splitterSize,\n      ...showTabs,\n      style,\n      title,\n      resizeable: getProp(existingComponent, \"resizeable\"),\n    } as LayoutProps,\n    targetFirst\n      ? [\n          resetPath(\n            existingComponent,\n            `${existingComponentPath}.0`,\n            existingComponentProps,\n          ),\n          applyLayoutProps(\n            React.cloneElement(newComponent, newComponentProps),\n            `${existingComponentPath}.1`,\n          ),\n        ]\n      : [\n          applyLayoutProps(\n            React.cloneElement(newComponent, newComponentProps),\n            `${existingComponentPath}.0`,\n          ),\n          resetPath(\n            existingComponent,\n            `${existingComponentPath}.1`,\n            existingComponentProps,\n          ),\n        ],\n  );\n  return containerChildren.map((child: ReactElement) =>\n    child === existingComponent ? wrapper : child,\n  );\n}\n\nfunction wrapIntrinsicSizedComponent(\n  containerChildren: ReactElement[],\n  existingComponent: ReactElement,\n  newComponent: ReactElement,\n  pos: DropPos,\n  clientRect: DropTarget[\"clientRect\"],\n  dropRect: rectTuple,\n) {\n  const { flexDirection } = getLayoutSpecForWrapper(pos);\n  const contraDirection = flexDirection === \"column\" ? \"row\" : \"column\";\n  const targetFirst = isTargetFirst(pos);\n\n  const [dropLeft, dropTop, dropRight, dropBottom] = dropRect;\n  const [startPlaceholder, endPlaceholder] =\n    flexDirection === \"column\"\n      ? [dropTop - clientRect.top, clientRect.bottom - dropBottom]\n      : [dropLeft - clientRect.left, clientRect.right - dropRight];\n  const pathRoot = getProp(existingComponent, \"path\");\n  let pathIndex = 0;\n\n  const resizeProp = isHtmlElement(existingComponent)\n    ? \"data-resizeable\"\n    : \"resizeable\";\n\n  const wrappedChildren = [];\n  if (startPlaceholder) {\n    wrappedChildren.push(\n      targetFirst\n        ? resetPath(existingComponent, `${pathRoot}.${pathIndex++}`, {\n            [resizeProp]: true,\n            style: { flexBasis: startPlaceholder, flexGrow: 1, flexShrink: 1 },\n          })\n        : createPlaceHolder(`${pathRoot}.${pathIndex++}`, startPlaceholder, {\n            flexGrow: 0,\n            flexShrink: 0,\n          }),\n    );\n  }\n  wrappedChildren.push(\n    wrapIntrinsicSizeComponentWithFlexbox(\n      newComponent,\n      contraDirection,\n      `${pathRoot}.${pathIndex++}`,\n      clientRect,\n      dropRect,\n    ),\n  );\n  if (endPlaceholder) {\n    wrappedChildren.push(\n      targetFirst\n        ? createPlaceHolder(`${pathRoot}.${pathIndex++}`, 0)\n        : resetPath(existingComponent, `${pathRoot}.${pathIndex++}`, {\n            [resizeProp]: true,\n            style: { flexBasis: 0, flexGrow: 1, flexShrink: 1 },\n          }),\n    );\n  }\n\n  const wrapper = createFlexbox(\n    flexDirection,\n    existingComponent.props,\n    wrappedChildren,\n    pathRoot,\n  );\n  return containerChildren.map((child) =>\n    child === existingComponent ? wrapper : child,\n  );\n}\n\nfunction getWrappedFlexStyles(\n  type: string,\n  existingComponent: ReactElement,\n  newComponent: ReactElement,\n  flexDirection: flexDirection,\n  pos: DropPos,\n) {\n  const style = {\n    ...(existingComponent.props as any).style,\n    flexDirection,\n  };\n\n  const dimension =\n    type === \"Flexbox\" && flexDirection === \"column\" ? \"height\" : \"width\";\n  const newComponentStyle = getFlexStyle(newComponent, dimension, pos);\n  const existingComponentStyle = getFlexStyle(existingComponent, dimension);\n\n  return [style, existingComponentStyle, newComponentStyle];\n}\n\nconst isTargetFirst = (pos: DropPos) =>\n  pos.position.SouthOrEast\n    ? true\n    : pos?.tab?.positionRelativeToTab === \"before\"\n      ? false\n      : pos.position.Header\n        ? true\n        : false;\n\nfunction getLayoutSpecForWrapper(pos: DropPos): LayoutSpec {\n  if (pos.position.Header) {\n    return {\n      type: \"Stack\",\n      flexDirection: \"column\",\n      showTabs: true,\n    };\n  } else {\n    return {\n      type: \"Flexbox\",\n      flexDirection: pos.position.EastOrWest ? \"row\" : \"column\",\n    };\n  }\n}\n"],"names":["typeOf","getProps","getProp","nextStep","getIntrinsicSize","flexDirection","uuid","getLayoutComponent","resetPath","applyLayoutProps","createPlaceHolder","wrapIntrinsicSizeComponentWithFlexbox","createFlexbox","getFlexStyle"],"mappings":"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"}

package/cjs/layout-view/View.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var viewCss = ".vuuView {\n  --vuuToolbarProxy-height: var(--salt-size-base);\n  border-color: var(--vuuView-borderColor, transparent);\n  border-width: var(--vuuView-borderWidth, 1px);\n  border-style: var(--vuuView-borderStyle, solid);\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  transition: flex-basis .3s ease-in-out;\n\n  &.vuuHighlighted {\n    --vuuView-borderStyle: dashed;\n    --vuuView-borderColor: var(--salt-container-primary-borderColor);\n  }\n}\n\n.vuuSplitterResizing .vuuView {\n  transition: none;\n\n}\n\n.vuuView:has(> .vuuHeader){\n  min-height: var(--vuuToolbarProxy-height);\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  justify-content: var(--vuuView-justify, flex-start);\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 {\n  flex: 0 0 0 !important;\n}\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";
+
+module.exports = viewCss;
+//# sourceMappingURL=View.css.js.map

package/cjs/layout-view/View.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"View.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/cjs/layout-view/View.js

@@ -0,0 +1,160 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var vuuUtils = require('@vuu-ui/vuu-utils');
+var core = require('@salt-ds/core');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var cx = require('clsx');
+var React = require('react');
+var Header = require('../layout-header/Header.js');
+var useView = require('./useView.js');
+var useViewResize = require('./useViewResize.js');
+var ViewContext = require('../layout-view-actions/ViewContext.js');
+var View$1 = require('./View.css.js');
+
+const classBase = "vuuView";
+const getProps = (state, props) => {
+  if (state && props) {
+    return {
+      ...state,
+      ...props
+    };
+  } else return state || props;
+};
+const View = React.forwardRef(function View2(props, forwardedRef) {
+  const {
+    Header: Header$1 = Header.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 = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "vuu-view",
+    css: View$1,
+    window: targetWindow
+  });
+  const id = vuuUtils.useId(idProp);
+  const rootRef = React.useRef(null);
+  const mainRef = React.useRef(null);
+  const [componentProps, _setComponentProps] = React.useState();
+  const {
+    contributions,
+    dispatchViewAction,
+    load,
+    onConfigChange,
+    onEditTitle,
+    purge,
+    restoredState,
+    save,
+    title
+  } = useView.useView({
+    id,
+    rootRef,
+    path,
+    dropTargets,
+    title: titleProp
+  });
+  useViewResize.useViewResize({ mainRef, resize, rootRef });
+  const setComponentProps = React.useCallback((props2) => {
+    _setComponentProps(props2);
+  }, []);
+  const getContent = () => {
+    if (React.isValidElement(children) && (restoredState || componentProps)) {
+      return React.cloneElement(
+        children,
+        getProps(restoredState, componentProps)
+      );
+    }
+    return children;
+  };
+  const viewContextValue = React.useMemo(
+    () => ({
+      dispatch: dispatchViewAction,
+      id,
+      path,
+      title,
+      load,
+      onConfigChange,
+      purge,
+      save,
+      setComponentProps
+    }),
+    [
+      dispatchViewAction,
+      id,
+      load,
+      onConfigChange,
+      path,
+      purge,
+      save,
+      setComponentProps,
+      title
+    ]
+  );
+  const headerProps = typeof header === "object" ? header : {};
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ...restProps,
+      className: cx(classBase, className, {
+        [`${classBase}-collapsed`]: collapsed,
+        [`${classBase}-expanded`]: expanded,
+        [`${classBase}-resize-defer`]: resize === "defer"
+      }),
+      "data-resizeable": resizeable,
+      id,
+      ref: core.useForkRef(forwardedRef, rootRef),
+      style,
+      tabIndex: -1,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(ViewContext.ViewContext.Provider, { value: viewContextValue, children: [
+        header ? /* @__PURE__ */ jsxRuntime.jsx(
+          Header$1,
+          {
+            ...headerProps,
+            allowRename,
+            collapsed,
+            contributions,
+            expanded,
+            closeable,
+            onCollapse,
+            onEditTitle,
+            onExpand,
+            orientation,
+            tearOut,
+            title
+          }
+        ) : null,
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase}-main`, ref: mainRef, children: getContent() })
+      ] })
+    }
+  );
+});
+View.displayName = "View";
+const MemoView = React.memo(View);
+MemoView.displayName = "View";
+vuuUtils.registerComponent("View", MemoView, "view");
+
+exports.View = MemoView;
+//# sourceMappingURL=View.js.map

package/cjs/layout-view/View.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"View.js","sources":["../../../../packages/vuu-layout/src/layout-view/View.tsx"],"sourcesContent":["import { registerComponent, useId } from \"@vuu-ui/vuu-utils\";\nimport { useForkRef } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport React, {\n  ForwardedRef,\n  forwardRef,\n  ReactElement,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { Header as VuuHeader } from \"../layout-header/Header\";\nimport { useView } from \"./useView\";\nimport { useViewResize } from \"./useViewResize\";\nimport {\n  ViewContext,\n  ViewContextAPI,\n} from \"../layout-view-actions/ViewContext\";\nimport { ViewProps } from \"./viewTypes\";\n\nimport viewCss from \"./View.css\";\n\nconst classBase = \"vuuView\";\n\ntype Props = { [key: string]: unknown };\n\nconst getProps = (state?: Props, props?: Props) => {\n  if (state && props) {\n    return {\n      ...state,\n      ...props,\n    };\n  } else return state || props;\n};\n\n/**\n * View is the leaf-level entity managed by the Vuu layout system. It may represent a component\n * or a group of components. It also offers an API (via useViewContext) for persistence.\n */\nconst View = forwardRef(function View(\n  props: ViewProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>,\n) {\n  const {\n    Header = VuuHeader,\n    allowRename,\n    children,\n    className,\n    collapsed,\n    closeable,\n    \"data-path\": dataPath,\n    \"data-resizeable\": dataResizeable,\n    dropTargets,\n    expanded,\n    flexFill,\n    id: idProp,\n    header,\n    onCollapse,\n    onExpand,\n    orientation = \"horizontal\",\n    path = dataPath,\n    resize = \"responsive\",\n    resizeable = dataResizeable,\n    restoreStyle,\n    tearOut,\n    style = {},\n    title: titleProp,\n    ...restProps\n  } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-view\",\n    css: viewCss,\n    window: targetWindow,\n  });\n\n  const id = useId(idProp);\n\n  const rootRef = useRef<HTMLDivElement>(null);\n  const mainRef = useRef<HTMLDivElement>(null);\n  const [componentProps, _setComponentProps] = useState<Props>();\n  const {\n    contributions,\n    dispatchViewAction,\n    load,\n    onConfigChange,\n    onEditTitle,\n    purge,\n    restoredState,\n    save,\n    title,\n  } = useView({\n    id,\n    rootRef,\n    path,\n    dropTargets,\n    title: titleProp,\n  });\n\n  useViewResize({ mainRef, resize, rootRef });\n\n  const setComponentProps = useCallback((props?: Props) => {\n    _setComponentProps(props);\n  }, []);\n\n  const getContent = () => {\n    if (React.isValidElement(children) && (restoredState || componentProps)) {\n      return React.cloneElement(\n        children,\n        getProps(restoredState, componentProps),\n      );\n    }\n    return children;\n  };\n\n  const viewContextValue: ViewContextAPI = useMemo(\n    () => ({\n      dispatch: dispatchViewAction,\n      id,\n      path,\n      title,\n      load,\n      onConfigChange,\n      purge,\n      save,\n      setComponentProps,\n    }),\n    [\n      dispatchViewAction,\n      id,\n      load,\n      onConfigChange,\n      path,\n      purge,\n      save,\n      setComponentProps,\n      title,\n    ],\n  );\n\n  const headerProps = typeof header === \"object\" ? header : {};\n\n  return (\n    <div\n      {...restProps}\n      className={cx(classBase, className, {\n        [`${classBase}-collapsed`]: collapsed,\n        [`${classBase}-expanded`]: expanded,\n        [`${classBase}-resize-defer`]: resize === \"defer\",\n      })}\n      data-resizeable={resizeable}\n      id={id}\n      ref={useForkRef(forwardedRef, rootRef)}\n      style={style}\n      tabIndex={-1}\n    >\n      <ViewContext.Provider value={viewContextValue}>\n        {header ? (\n          <Header\n            {...headerProps}\n            allowRename={allowRename}\n            collapsed={collapsed}\n            contributions={contributions}\n            expanded={expanded}\n            closeable={closeable}\n            onCollapse={onCollapse}\n            onEditTitle={onEditTitle}\n            onExpand={onExpand}\n            orientation={orientation}\n            tearOut={tearOut}\n            title={title}\n          />\n        ) : null}\n        <div className={`${classBase}-main`} ref={mainRef}>\n          {getContent()}\n        </div>\n      </ViewContext.Provider>\n    </div>\n  );\n});\nView.displayName = \"View\";\n\ninterface ViewComponentType {\n  (\n    props: ViewProps & {\n      ref?: ForwardedRef<HTMLDivElement>;\n    },\n  ): ReactElement<ViewProps>;\n  displayName?: string;\n}\n\nconst MemoView = React.memo(View) as ViewComponentType;\n\nMemoView.displayName = \"View\";\n\nregisterComponent(\"View\", MemoView, \"view\");\n\nexport { MemoView as View };\n"],"names":["forwardRef","View","Header","VuuHeader","useWindow","useComponentCssInjection","viewCss","useId","useRef","useState","useView","useViewResize","useCallback","props","useMemo","jsx","useForkRef","jsxs","ViewContext","registerComponent"],"mappings":"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"}

package/cjs/layout-view/useView.js

@@ -0,0 +1,75 @@
+'use strict';
+
+var React = require('react');
+var LayoutProvider = require('../layout-provider/LayoutProvider.js');
+var usePersistentState = require('../use-persistent-state.js');
+var useViewActionDispatcher = require('../layout-view-actions/useViewActionDispatcher.js');
+
+const useView = ({
+  id,
+  rootRef,
+  path,
+  dropTargets,
+  title: titleProp
+}) => {
+  const layoutDispatch = LayoutProvider.useLayoutProviderDispatch();
+  const { loadState, purgeState, saveState } = usePersistentState.usePersistentState();
+  const [dispatchViewAction, contributions] = useViewActionDispatcher.useViewActionDispatcher(
+    id,
+    rootRef,
+    path,
+    dropTargets
+  );
+  const title = React.useMemo(
+    () => loadState("view-title") ?? titleProp,
+    [loadState, titleProp]
+  );
+  const onEditTitle = React.useCallback(
+    (title2) => {
+      if (path) {
+        layoutDispatch({ type: "set-title", path, title: title2 });
+      }
+    },
+    [layoutDispatch, path]
+  );
+  const restoredState = React.useMemo(() => loadState(id), [id, loadState]);
+  const load = React.useCallback(
+    (key) => loadState(id, key),
+    [id, loadState]
+  );
+  const purge = React.useCallback(
+    (key) => {
+      purgeState(id, key);
+      layoutDispatch({ type: "save" });
+    },
+    [id, layoutDispatch, purgeState]
+  );
+  const save = React.useCallback(
+    (state, key) => {
+      saveState(id, key, state);
+      layoutDispatch({ type: "save" });
+    },
+    [id, layoutDispatch, saveState]
+  );
+  const onConfigChange = React.useCallback(
+    ({ type: key, ...config }) => {
+      const { [key]: data } = config;
+      save(data, key);
+    },
+    [save]
+  );
+  return {
+    contributions,
+    dispatchViewAction,
+    load,
+    onConfigChange,
+    onEditTitle,
+    purge,
+    restoredState,
+    save,
+    title
+  };
+};
+
+exports.useView = useView;
+//# sourceMappingURL=useView.js.map

package/cjs/layout-view/useView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useView.js","sources":["../../../../packages/vuu-layout/src/layout-view/useView.tsx"],"sourcesContent":["import { RefObject, useCallback, useMemo } from \"react\";\nimport { useLayoutProviderDispatch } from \"../layout-provider/LayoutProvider\";\nimport { usePersistentState } from \"../use-persistent-state\";\nimport { useViewActionDispatcher } from \"../layout-view-actions/useViewActionDispatcher\";\nimport { ConfigChangeHandler } from \"../layout-view-actions/ViewContext\";\n\nexport interface ViewHookProps {\n  id: string;\n  rootRef: RefObject<HTMLDivElement | null>;\n  path?: string;\n  dropTargets?: string[];\n  title?: string;\n}\n\nexport const useView = ({\n  id,\n  rootRef,\n  path,\n  dropTargets,\n  title: titleProp,\n}: ViewHookProps) => {\n  const layoutDispatch = useLayoutProviderDispatch();\n\n  const { loadState, purgeState, saveState } = usePersistentState();\n\n  const [dispatchViewAction, contributions] = useViewActionDispatcher(\n    id,\n    rootRef,\n    path,\n    dropTargets,\n  );\n\n  const title = useMemo(\n    () => loadState(\"view-title\") ?? titleProp,\n    [loadState, titleProp],\n  );\n\n  const onEditTitle = useCallback(\n    (title: string) => {\n      if (path) {\n        layoutDispatch({ type: \"set-title\", path, title });\n      }\n    },\n    [layoutDispatch, path],\n  );\n\n  const restoredState = useMemo(() => loadState(id), [id, loadState]);\n\n  const load = useCallback(\n    (key?: string) => loadState(id, key),\n    [id, loadState],\n  );\n\n  const purge = useCallback(\n    (key: string) => {\n      purgeState(id, key);\n      layoutDispatch({ type: \"save\" });\n    },\n    [id, layoutDispatch, purgeState],\n  );\n\n  const save = useCallback(\n    (state: unknown, key: string) => {\n      saveState(id, key, state);\n      layoutDispatch({ type: \"save\" });\n    },\n    [id, layoutDispatch, saveState],\n  );\n\n  const onConfigChange = useCallback<ConfigChangeHandler>(\n    ({ type: key, ...config }) => {\n      const { [key]: data } = config;\n      save(data, key);\n    },\n    [save],\n  );\n\n  return {\n    contributions,\n    dispatchViewAction,\n    load,\n    onConfigChange,\n    onEditTitle,\n    purge,\n    restoredState,\n    save,\n    title,\n  };\n};\n"],"names":["useLayoutProviderDispatch","usePersistentState","useViewActionDispatcher","useMemo","useCallback","title"],"mappings":";;;;;;;AAcO,MAAM,UAAU,CAAC;AAAA,EACtB,EAAA;AAAA,EACA,OAAA;AAAA,EACA,IAAA;AAAA,EACA,WAAA;AAAA,EACA,KAAO,EAAA;AACT,CAAqB,KAAA;AACnB,EAAA,MAAM,iBAAiBA,wCAA0B,EAAA;AAEjD,EAAA,MAAM,EAAE,SAAA,EAAW,UAAY,EAAA,SAAA,KAAcC,qCAAmB,EAAA;AAEhE,EAAM,MAAA,CAAC,kBAAoB,EAAA,aAAa,CAAI,GAAAC,+CAAA;AAAA,IAC1C,EAAA;AAAA,IACA,OAAA;AAAA,IACA,IAAA;AAAA,IACA;AAAA,GACF;AAEA,EAAA,MAAM,KAAQ,GAAAC,aAAA;AAAA,IACZ,MAAM,SAAU,CAAA,YAAY,CAAK,IAAA,SAAA;AAAA,IACjC,CAAC,WAAW,SAAS;AAAA,GACvB;AAEA,EAAA,MAAM,WAAc,GAAAC,iBAAA;AAAA,IAClB,CAACC,MAAkB,KAAA;AACjB,MAAA,IAAI,IAAM,EAAA;AACR,QAAA,cAAA,CAAe,EAAE,IAAM,EAAA,WAAA,EAAa,IAAM,EAAA,KAAA,EAAAA,QAAO,CAAA;AAAA;AACnD,KACF;AAAA,IACA,CAAC,gBAAgB,IAAI;AAAA,GACvB;AAEA,EAAM,MAAA,aAAA,GAAgBF,cAAQ,MAAM,SAAA,CAAU,EAAE,CAAG,EAAA,CAAC,EAAI,EAAA,SAAS,CAAC,CAAA;AAElE,EAAA,MAAM,IAAO,GAAAC,iBAAA;AAAA,IACX,CAAC,GAAA,KAAiB,SAAU,CAAA,EAAA,EAAI,GAAG,CAAA;AAAA,IACnC,CAAC,IAAI,SAAS;AAAA,GAChB;AAEA,EAAA,MAAM,KAAQ,GAAAA,iBAAA;AAAA,IACZ,CAAC,GAAgB,KAAA;AACf,MAAA,UAAA,CAAW,IAAI,GAAG,CAAA;AAClB,MAAe,cAAA,CAAA,EAAE,IAAM,EAAA,MAAA,EAAQ,CAAA;AAAA,KACjC;AAAA,IACA,CAAC,EAAI,EAAA,cAAA,EAAgB,UAAU;AAAA,GACjC;AAEA,EAAA,MAAM,IAAO,GAAAA,iBAAA;AAAA,IACX,CAAC,OAAgB,GAAgB,KAAA;AAC/B,MAAU,SAAA,CAAA,EAAA,EAAI,KAAK,KAAK,CAAA;AACxB,MAAe,cAAA,CAAA,EAAE,IAAM,EAAA,MAAA,EAAQ,CAAA;AAAA,KACjC;AAAA,IACA,CAAC,EAAI,EAAA,cAAA,EAAgB,SAAS;AAAA,GAChC;AAEA,EAAA,MAAM,cAAiB,GAAAA,iBAAA;AAAA,IACrB,CAAC,EAAE,IAAA,EAAM,GAAK,EAAA,GAAG,QAAa,KAAA;AAC5B,MAAA,MAAM,EAAE,CAAC,GAAG,GAAG,MAAS,GAAA,MAAA;AACxB,MAAA,IAAA,CAAK,MAAM,GAAG,CAAA;AAAA,KAChB;AAAA,IACA,CAAC,IAAI;AAAA,GACP;AAEA,EAAO,OAAA;AAAA,IACL,aAAA;AAAA,IACA,kBAAA;AAAA,IACA,IAAA;AAAA,IACA,cAAA;AAAA,IACA,WAAA;AAAA,IACA,KAAA;AAAA,IACA,aAAA;AAAA,IACA,IAAA;AAAA,IACA;AAAA,GACF;AACF;;;;"}

package/cjs/layout-view/useViewBroadcastChannel.js

@@ -0,0 +1,35 @@
+'use strict';
+
+var React = require('react');
+
+const isMessageForSelf = (message, id, path) => {
+  if (id && message.targetId === id) {
+    return true;
+  } else if (message.path && path?.startsWith(message.path)) {
+    return true;
+  }
+  return false;
+};
+const useViewBroadcastChannel = (id, path, onMessageReceived) => {
+  const broadcastChannelRef = React.useRef(void 0);
+  React.useEffect(() => {
+    const broadcastChannel = new BroadcastChannel("vuu");
+    broadcastChannel.onmessage = (evt) => {
+      if (isMessageForSelf(evt.data, id, path)) {
+        onMessageReceived?.(evt.data);
+      }
+    };
+    broadcastChannelRef.current = broadcastChannel;
+    return () => {
+      broadcastChannel.close();
+      broadcastChannelRef.current = void 0;
+    };
+  }, [id, onMessageReceived, path]);
+  const sendMessage = React.useCallback((message) => {
+    broadcastChannelRef.current?.postMessage(message);
+  }, []);
+  return sendMessage;
+};
+
+exports.useViewBroadcastChannel = useViewBroadcastChannel;
+//# sourceMappingURL=useViewBroadcastChannel.js.map

package/cjs/layout-view/useViewBroadcastChannel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useViewBroadcastChannel.js","sources":["../../../../packages/vuu-layout/src/layout-view/useViewBroadcastChannel.ts"],"sourcesContent":["import { VuuBroadcastChannel } from \"@vuu-ui/vuu-utils\";\nimport { useCallback, useEffect, useRef } from \"react\";\n\nexport interface ViewBroadcastMessage {\n  path?: string;\n  targetId?: string;\n  type: \"highlight-on\" | \"highlight-off\" | \"layout-closed\";\n}\n\nexport type BroadcastMessageHandler = (message: ViewBroadcastMessage) => void;\n\nconst isMessageForSelf = (\n  message: ViewBroadcastMessage,\n  id?: string,\n  path?: string,\n) => {\n  if (id && message.targetId === id) {\n    return true;\n  } else if (message.path && path?.startsWith(message.path)) {\n    return true;\n  }\n  return false;\n};\n\nexport const useViewBroadcastChannel = (\n  id?: string,\n  path?: string,\n  onMessageReceived?: BroadcastMessageHandler,\n) => {\n  const broadcastChannelRef =\n    useRef<VuuBroadcastChannel<ViewBroadcastMessage>>(undefined);\n\n  useEffect(() => {\n    const broadcastChannel: VuuBroadcastChannel<ViewBroadcastMessage> =\n      new BroadcastChannel(\"vuu\");\n    broadcastChannel.onmessage = (evt) => {\n      if (isMessageForSelf(evt.data, id, path)) {\n        onMessageReceived?.(evt.data);\n      }\n    };\n    broadcastChannelRef.current = broadcastChannel;\n    return () => {\n      broadcastChannel.close();\n      broadcastChannelRef.current = undefined;\n    };\n  }, [id, onMessageReceived, path]);\n\n  const sendMessage = useCallback((message: ViewBroadcastMessage) => {\n    broadcastChannelRef.current?.postMessage(message);\n  }, []);\n\n  return sendMessage;\n};\n"],"names":["useRef","useEffect","useCallback"],"mappings":";;;;AAWA,MAAM,gBAAmB,GAAA,CACvB,OACA,EAAA,EAAA,EACA,IACG,KAAA;AACH,EAAI,IAAA,EAAA,IAAM,OAAQ,CAAA,QAAA,KAAa,EAAI,EAAA;AACjC,IAAO,OAAA,IAAA;AAAA,aACE,OAAQ,CAAA,IAAA,IAAQ,MAAM,UAAW,CAAA,OAAA,CAAQ,IAAI,CAAG,EAAA;AACzD,IAAO,OAAA,IAAA;AAAA;AAET,EAAO,OAAA,KAAA;AACT,CAAA;AAEO,MAAM,uBAA0B,GAAA,CACrC,EACA,EAAA,IAAA,EACA,iBACG,KAAA;AACH,EAAM,MAAA,mBAAA,GACJA,aAAkD,KAAS,CAAA,CAAA;AAE7D,EAAAC,eAAA,CAAU,MAAM;AACd,IAAM,MAAA,gBAAA,GACJ,IAAI,gBAAA,CAAiB,KAAK,CAAA;AAC5B,IAAiB,gBAAA,CAAA,SAAA,GAAY,CAAC,GAAQ,KAAA;AACpC,MAAA,IAAI,gBAAiB,CAAA,GAAA,CAAI,IAAM,EAAA,EAAA,EAAI,IAAI,CAAG,EAAA;AACxC,QAAA,iBAAA,GAAoB,IAAI,IAAI,CAAA;AAAA;AAC9B,KACF;AACA,IAAA,mBAAA,CAAoB,OAAU,GAAA,gBAAA;AAC9B,IAAA,OAAO,MAAM;AACX,MAAA,gBAAA,CAAiB,KAAM,EAAA;AACvB,MAAA,mBAAA,CAAoB,OAAU,GAAA,KAAA,CAAA;AAAA,KAChC;AAAA,GACC,EAAA,CAAC,EAAI,EAAA,iBAAA,EAAmB,IAAI,CAAC,CAAA;AAEhC,EAAM,MAAA,WAAA,GAAcC,iBAAY,CAAA,CAAC,OAAkC,KAAA;AACjE,IAAoB,mBAAA,CAAA,OAAA,EAAS,YAAY,OAAO,CAAA;AAAA,GAClD,EAAG,EAAE,CAAA;AAEL,EAAO,OAAA,WAAA;AACT;;;;"}

package/cjs/layout-view/useViewResize.js

@@ -0,0 +1,42 @@
+'use strict';
+
+var useResizeObserver = require('../responsive/useResizeObserver.js');
+var React = require('react');
+
+const NO_MEASUREMENT = [];
+const useViewResize = ({
+  mainRef,
+  resize = "responsive",
+  rootRef
+}) => {
+  const deferResize = resize === "defer";
+  const mainSize = React.useRef({});
+  const resizeHandle = React.useRef(void 0);
+  const setMainSize = React.useCallback(() => {
+    if (mainRef.current) {
+      mainRef.current.style.height = mainSize.current.height + "px";
+      mainRef.current.style.width = mainSize.current.width + "px";
+    }
+    resizeHandle.current = void 0;
+  }, [mainRef]);
+  const onResize = React.useCallback(
+    ({ height, width }) => {
+      mainSize.current.height = height;
+      mainSize.current.width = width;
+      if (resizeHandle.current !== null) {
+        clearTimeout(resizeHandle.current);
+      }
+      resizeHandle.current = window.setTimeout(setMainSize, 40);
+    },
+    [setMainSize]
+  );
+  useResizeObserver.useResizeObserver(
+    rootRef,
+    deferResize ? useResizeObserver.WidthHeight : NO_MEASUREMENT,
+    onResize,
+    deferResize
+  );
+};
+
+exports.useViewResize = useViewResize;
+//# sourceMappingURL=useViewResize.js.map

package/cjs/layout-view/useViewResize.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useViewResize.js","sources":["../../../../packages/vuu-layout/src/layout-view/useViewResize.ts"],"sourcesContent":["import { ResizeHandler } from \"@vuu-ui/vuu-ui-controls\";\nimport { useResizeObserver, WidthHeight } from \"../responsive\";\nimport { RefObject, useCallback, useRef } from \"react\";\n\nconst NO_MEASUREMENT: string[] = [];\n\ntype size = {\n  height?: number;\n  width?: number;\n};\n\nexport interface ViewResizeHookProps {\n  mainRef: RefObject<HTMLDivElement | null>;\n  resize?: \"defer\" | \"responsive\";\n  rootRef: RefObject<HTMLDivElement | null>;\n}\n\nexport const useViewResize = ({\n  mainRef,\n  resize = \"responsive\",\n  rootRef,\n}: ViewResizeHookProps) => {\n  const deferResize = resize === \"defer\";\n\n  const mainSize = useRef<size>({});\n  const resizeHandle = useRef<number>(undefined);\n\n  const setMainSize = useCallback(() => {\n    if (mainRef.current) {\n      mainRef.current.style.height = mainSize.current.height + \"px\";\n      mainRef.current.style.width = mainSize.current.width + \"px\";\n    }\n    resizeHandle.current = undefined;\n  }, [mainRef]);\n\n  const onResize = useCallback<ResizeHandler>(\n    ({ height, width }) => {\n      mainSize.current.height = height;\n      mainSize.current.width = width;\n      if (resizeHandle.current !== null) {\n        clearTimeout(resizeHandle.current);\n      }\n      resizeHandle.current = window.setTimeout(setMainSize, 40);\n    },\n    [setMainSize],\n  );\n\n  useResizeObserver(\n    rootRef,\n    deferResize ? WidthHeight : NO_MEASUREMENT,\n    onResize,\n    deferResize,\n  );\n};\n"],"names":["useRef","useCallback","useResizeObserver","WidthHeight"],"mappings":";;;;;AAIA,MAAM,iBAA2B,EAAC;AAa3B,MAAM,gBAAgB,CAAC;AAAA,EAC5B,OAAA;AAAA,EACA,MAAS,GAAA,YAAA;AAAA,EACT;AACF,CAA2B,KAAA;AACzB,EAAA,MAAM,cAAc,MAAW,KAAA,OAAA;AAE/B,EAAM,MAAA,QAAA,GAAWA,YAAa,CAAA,EAAE,CAAA;AAChC,EAAM,MAAA,YAAA,GAAeA,aAAe,KAAS,CAAA,CAAA;AAE7C,EAAM,MAAA,WAAA,GAAcC,kBAAY,MAAM;AACpC,IAAA,IAAI,QAAQ,OAAS,EAAA;AACnB,MAAA,OAAA,CAAQ,OAAQ,CAAA,KAAA,CAAM,MAAS,GAAA,QAAA,CAAS,QAAQ,MAAS,GAAA,IAAA;AACzD,MAAA,OAAA,CAAQ,OAAQ,CAAA,KAAA,CAAM,KAAQ,GAAA,QAAA,CAAS,QAAQ,KAAQ,GAAA,IAAA;AAAA;AAEzD,IAAA,YAAA,CAAa,OAAU,GAAA,KAAA,CAAA;AAAA,GACzB,EAAG,CAAC,OAAO,CAAC,CAAA;AAEZ,EAAA,MAAM,QAAW,GAAAA,iBAAA;AAAA,IACf,CAAC,EAAE,MAAQ,EAAA,KAAA,EAAY,KAAA;AACrB,MAAA,QAAA,CAAS,QAAQ,MAAS,GAAA,MAAA;AAC1B,MAAA,QAAA,CAAS,QAAQ,KAAQ,GAAA,KAAA;AACzB,MAAI,IAAA,YAAA,CAAa,YAAY,IAAM,EAAA;AACjC,QAAA,YAAA,CAAa,aAAa,OAAO,CAAA;AAAA;AAEnC,MAAA,YAAA,CAAa,OAAU,GAAA,MAAA,CAAO,UAAW,CAAA,WAAA,EAAa,EAAE,CAAA;AAAA,KAC1D;AAAA,IACA,CAAC,WAAW;AAAA,GACd;AAEA,EAAAC,mCAAA;AAAA,IACE,OAAA;AAAA,IACA,cAAcC,6BAAc,GAAA,cAAA;AAAA,IAC5B,QAAA;AAAA,IACA;AAAA,GACF;AACF;;;;"}

package/cjs/layout-view-actions/ViewContext.js

@@ -0,0 +1,16 @@
+'use strict';
+
+var React = require('react');
+
+const NO_CONTEXT = { dispatch: null };
+const ViewContext = React.createContext(NO_CONTEXT);
+const useViewDispatch = () => {
+  const context = React.useContext(ViewContext);
+  return context?.dispatch ?? null;
+};
+const useViewContext = () => React.useContext(ViewContext);
+
+exports.ViewContext = ViewContext;
+exports.useViewContext = useViewContext;
+exports.useViewDispatch = useViewDispatch;
+//# sourceMappingURL=ViewContext.js.map

package/cjs/layout-view-actions/ViewContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViewContext.js","sources":["../../../../packages/vuu-layout/src/layout-view-actions/ViewContext.ts"],"sourcesContent":["import React, { SyntheticEvent, useContext } from \"react\";\nimport { ViewAction } from \"../layout-view/viewTypes\";\n\nexport type QueryResponse = { [key: string]: unknown };\n\nexport type ConfigChangeHandler = (config: {\n  [key: string]: unknown;\n  type: string;\n}) => void;\n\nexport type ViewDispatch = <Action extends ViewAction = ViewAction>(\n  action: Action,\n  evt?: SyntheticEvent,\n) => Promise<boolean | QueryResponse | void>;\n\n/**\n * This API is available to any Feature hosted within Vuu (as all Features are wrapped\n * with View component). It offers metadata about the View as well as access to the\n * Vuu persistencew API;\n */\nexport interface ViewContextAPI {\n  /**\n   * dispatcher for View actions. These are a subset of LayoutActions, specifically for\n   * View manipulation\n   */\n  dispatch?: ViewDispatch | null;\n  id?: string;\n  load?: <T = unknown>(key?: string) => T;\n  onConfigChange?: ConfigChangeHandler;\n  path?: string;\n  purge?: (key: string) => void;\n  save?: (state: unknown, key: string) => void;\n  setComponentProps: (props: { [key: string]: unknown }) => void;\n  title?: string;\n}\n\nconst NO_CONTEXT = { dispatch: null } as ViewContextAPI;\nexport const ViewContext = React.createContext<ViewContextAPI>(NO_CONTEXT);\n\nexport const useViewDispatch = () => {\n  const context = useContext(ViewContext);\n  return context?.dispatch ?? null;\n};\n\nexport const useViewContext = () => useContext(ViewContext);\n"],"names":["useContext"],"mappings":";;;;AAoCA,MAAM,UAAA,GAAa,EAAE,QAAA,EAAU,IAAK,EAAA;AACvB,MAAA,WAAA,GAAc,KAAM,CAAA,aAAA,CAA8B,UAAU;AAElE,MAAM,kBAAkB,MAAM;AACnC,EAAM,MAAA,OAAA,GAAUA,iBAAW,WAAW,CAAA;AACtC,EAAA,OAAO,SAAS,QAAY,IAAA,IAAA;AAC9B;AAEa,MAAA,cAAA,GAAiB,MAAMA,gBAAA,CAAW,WAAW;;;;;;"}

package/cjs/layout-view-actions/useViewActionDispatcher.js

@@ -0,0 +1,112 @@
+'use strict';
+
+var vuuDataReact = require('@vuu-ui/vuu-data-react');
+var React = require('react');
+var LayoutProvider = require('../layout-provider/LayoutProvider.js');
+var useViewBroadcastChannel = require('../layout-view/useViewBroadcastChannel.js');
+var usePersistentState = require('../use-persistent-state.js');
+var useViewContributions = require('./useViewContributions.js');
+
+const useViewActionDispatcher = (id, rootRef, viewPath, dropTargets) => {
+  const { purgeState } = usePersistentState.usePersistentState();
+  const { clearDataSource: clearDataSourceFromSessionState } = vuuDataReact.useSessionDataSource();
+  const { clearContributions, contributions, updateContributions } = useViewContributions.useViewContributions({ sessionKey: id });
+  const dispatchLayoutAction = LayoutProvider.useLayoutProviderDispatch();
+  const unsubscribeAndClearState = React.useCallback(() => {
+    clearDataSourceFromSessionState(id, true);
+    purgeState(id);
+  }, [clearDataSourceFromSessionState, id, purgeState]);
+  const handleRemove = React.useCallback(() => {
+    unsubscribeAndClearState();
+    dispatchLayoutAction({ type: "remove", path: viewPath });
+  }, [unsubscribeAndClearState, dispatchLayoutAction, viewPath]);
+  const handleMouseDown = React.useCallback(
+    async (evt, index, preDragActivity) => {
+      evt.stopPropagation();
+      const dragRect = rootRef.current?.getBoundingClientRect();
+      return new Promise((resolve, reject) => {
+        dispatchLayoutAction({
+          type: "drag-start",
+          evt,
+          path: index === void 0 ? viewPath : `${viewPath}.${index}`,
+          dragRect,
+          preDragActivity,
+          dropTargets,
+          resolveDragStart: resolve,
+          rejectDragStart: reject
+        });
+      });
+    },
+    [rootRef, dispatchLayoutAction, viewPath, dropTargets]
+  );
+  const handleMessageReceived = React.useCallback(
+    (message) => {
+      switch (message.type) {
+        case "highlight-on":
+          rootRef?.current?.classList.add("vuuHighlighted");
+          break;
+        case "highlight-off":
+          rootRef?.current?.classList.remove("vuuHighlighted");
+          break;
+        case "layout-closed":
+          unsubscribeAndClearState();
+          break;
+        default:
+          console.log(`received ${message.type} message`);
+      }
+    },
+    [rootRef, unsubscribeAndClearState]
+  );
+  const sendMessage = useViewBroadcastChannel.useViewBroadcastChannel(
+    id,
+    viewPath,
+    handleMessageReceived
+  );
+  const dispatchAction = React.useCallback(
+    async (action, evt) => {
+      const { type } = action;
+      switch (type) {
+        case "collapse":
+        case "expand":
+          return dispatchLayoutAction({ type, path: action.path ?? viewPath });
+        case "remove":
+          return handleRemove();
+        case "mousedown":
+          return handleMouseDown(
+            evt,
+            action.index,
+            action.preDragActivity
+          );
+        case "add-toolbar-contribution":
+          return updateContributions(action.location, action.content);
+        case "remove-toolbar-contribution":
+          return clearContributions();
+        case "query":
+          return dispatchLayoutAction({
+            type,
+            path: action.path,
+            query: action.query
+          });
+        case "broadcast-message":
+          sendMessage(action.message);
+          break;
+        default: {
+          return void 0;
+        }
+      }
+    },
+    [
+      dispatchLayoutAction,
+      viewPath,
+      handleRemove,
+      handleMouseDown,
+      updateContributions,
+      clearContributions,
+      sendMessage
+    ]
+  );
+  return [dispatchAction, contributions];
+};
+
+exports.useViewActionDispatcher = useViewActionDispatcher;
+//# sourceMappingURL=useViewActionDispatcher.js.map

package/cjs/layout-view-actions/useViewActionDispatcher.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useViewActionDispatcher.js","sources":["../../../../packages/vuu-layout/src/layout-view-actions/useViewActionDispatcher.ts"],"sourcesContent":["import { useSessionDataSource } from \"@vuu-ui/vuu-data-react\";\nimport { RefObject, SyntheticEvent, useCallback } from \"react\";\nimport { useLayoutProviderDispatch } from \"../layout-provider/LayoutProvider\";\nimport { DragStartAction } from \"../layout-reducer\";\nimport {\n  BroadcastMessageHandler,\n  useViewBroadcastChannel,\n} from \"../layout-view/useViewBroadcastChannel\";\nimport { usePersistentState } from \"../use-persistent-state\";\nimport { useViewContributions } from \"./useViewContributions\";\nimport { QueryResponse, ViewDispatch } from \"./ViewContext\";\nimport { Contribution, ViewAction } from \"../layout-view/viewTypes\";\n\nexport const useViewActionDispatcher = (\n  id: string,\n  rootRef: RefObject<HTMLDivElement | null>,\n  viewPath?: string,\n  dropTargets?: string[],\n): [ViewDispatch, Contribution[] | undefined] => {\n  const { purgeState } = usePersistentState();\n\n  const { clearDataSource: clearDataSourceFromSessionState } =\n    useSessionDataSource();\n\n  const { clearContributions, contributions, updateContributions } =\n    useViewContributions({ sessionKey: id });\n\n  const dispatchLayoutAction = useLayoutProviderDispatch();\n\n  // This assumes datasource has been stored in session state\n  // we should extend to accommodate multiple dataSources\n  const unsubscribeAndClearState = useCallback(() => {\n    clearDataSourceFromSessionState(id, true);\n    purgeState(id);\n  }, [clearDataSourceFromSessionState, id, purgeState]);\n\n  const handleRemove = useCallback(() => {\n    unsubscribeAndClearState();\n    dispatchLayoutAction({ type: \"remove\", path: viewPath });\n  }, [unsubscribeAndClearState, dispatchLayoutAction, viewPath]);\n\n  const handleMouseDown = useCallback(\n    async (\n      evt: MouseEvent,\n      index: number,\n      preDragActivity: unknown,\n    ): Promise<boolean> => {\n      evt.stopPropagation();\n      const dragRect = rootRef.current?.getBoundingClientRect();\n      return new Promise((resolve, reject) => {\n        dispatchLayoutAction({\n          type: \"drag-start\",\n          evt,\n          path: index === undefined ? viewPath : `${viewPath}.${index}`,\n          dragRect,\n          preDragActivity,\n          dropTargets,\n          resolveDragStart: resolve,\n          rejectDragStart: reject,\n        } as DragStartAction);\n      });\n    },\n    [rootRef, dispatchLayoutAction, viewPath, dropTargets],\n  );\n\n  const handleMessageReceived = useCallback<BroadcastMessageHandler>(\n    (message) => {\n      switch (message.type) {\n        case \"highlight-on\":\n          rootRef?.current?.classList.add(\"vuuHighlighted\");\n          break;\n        case \"highlight-off\":\n          rootRef?.current?.classList.remove(\"vuuHighlighted\");\n          break;\n        case \"layout-closed\":\n          unsubscribeAndClearState();\n          break;\n        default:\n          console.log(`received ${message.type} message`);\n      }\n    },\n    [rootRef, unsubscribeAndClearState],\n  );\n\n  const sendMessage = useViewBroadcastChannel(\n    id,\n    viewPath,\n    handleMessageReceived,\n  );\n\n  const dispatchAction = useCallback(\n    async <A extends ViewAction = ViewAction>(\n      action: A,\n      evt?: MouseEvent | SyntheticEvent,\n    ): Promise<boolean | QueryResponse | void> => {\n      const { type } = action;\n      switch (type) {\n        case \"collapse\":\n        case \"expand\":\n          return dispatchLayoutAction({ type, path: action.path ?? viewPath });\n        case \"remove\":\n          return handleRemove();\n        case \"mousedown\":\n          // TODO fix types\n          return handleMouseDown(\n            evt as MouseEvent,\n            action.index as number,\n            action.preDragActivity,\n          );\n        case \"add-toolbar-contribution\":\n          return updateContributions(action.location, action.content);\n        case \"remove-toolbar-contribution\":\n          return clearContributions();\n        case \"query\":\n          return dispatchLayoutAction({\n            type,\n            path: action.path,\n            query: action.query,\n          });\n        case \"broadcast-message\":\n          sendMessage(action.message);\n          break;\n\n        default: {\n          return undefined;\n        }\n      }\n    },\n    [\n      dispatchLayoutAction,\n      viewPath,\n      handleRemove,\n      handleMouseDown,\n      updateContributions,\n      clearContributions,\n      sendMessage,\n    ],\n  );\n\n  return [dispatchAction, contributions];\n};\n"],"names":["usePersistentState","useSessionDataSource","useViewContributions","useLayoutProviderDispatch","useCallback","useViewBroadcastChannel"],"mappings":"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"}

package/cjs/layout-view-actions/useViewContributions.js

@@ -0,0 +1,33 @@
+'use strict';
+
+var React = require('react');
+
+const sessionState = /* @__PURE__ */ new Map();
+const EMPTY_ARRAY = [];
+const useViewContributions = ({
+  sessionKey
+}) => {
+  const [contributions, setContributions] = React.useState(EMPTY_ARRAY);
+  const updateContributions = React.useCallback(
+    (location, content) => {
+      const updatedContributions = contributions.concat([
+        { location, content }
+      ]);
+      sessionState.set(sessionKey, updatedContributions);
+      setContributions(updatedContributions);
+    },
+    [contributions, sessionKey]
+  );
+  const clearContributions = React.useCallback(() => {
+    sessionState.delete(sessionKey);
+    setContributions([]);
+  }, [sessionKey]);
+  return {
+    clearContributions,
+    contributions,
+    updateContributions
+  };
+};
+
+exports.useViewContributions = useViewContributions;
+//# sourceMappingURL=useViewContributions.js.map

package/cjs/layout-view-actions/useViewContributions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useViewContributions.js","sources":["../../../../packages/vuu-layout/src/layout-view-actions/useViewContributions.ts"],"sourcesContent":["import { ReactElement, useCallback, useState } from \"react\";\nimport type {\n  Contribution,\n  ContributionLocation,\n} from \"../layout-view/viewTypes\";\n\nconst sessionState = new Map<string, Contribution[]>();\n\nconst EMPTY_ARRAY: Contribution[] = [];\n\nexport const useViewContributions = ({\n  sessionKey,\n}: {\n  sessionKey: string;\n}) => {\n  const [contributions, setContributions] =\n    useState<Contribution[]>(EMPTY_ARRAY);\n\n  const updateContributions = useCallback(\n    (location: ContributionLocation, content: ReactElement) => {\n      const updatedContributions = contributions.concat([\n        { location, content },\n      ]);\n      sessionState.set(sessionKey, updatedContributions);\n      setContributions(updatedContributions);\n    },\n    [contributions, sessionKey],\n  );\n\n  const clearContributions = useCallback(() => {\n    sessionState.delete(sessionKey);\n    setContributions([]);\n  }, [sessionKey]);\n\n  return {\n    clearContributions,\n    contributions,\n    updateContributions,\n  };\n};\n"],"names":["useState","useCallback"],"mappings":";;;;AAMA,MAAM,YAAA,uBAAmB,GAA4B,EAAA;AAErD,MAAM,cAA8B,EAAC;AAE9B,MAAM,uBAAuB,CAAC;AAAA,EACnC;AACF,CAEM,KAAA;AACJ,EAAA,MAAM,CAAC,aAAA,EAAe,gBAAgB,CAAA,GACpCA,eAAyB,WAAW,CAAA;AAEtC,EAAA,MAAM,mBAAsB,GAAAC,iBAAA;AAAA,IAC1B,CAAC,UAAgC,OAA0B,KAAA;AACzD,MAAM,MAAA,oBAAA,GAAuB,cAAc,MAAO,CAAA;AAAA,QAChD,EAAE,UAAU,OAAQ;AAAA,OACrB,CAAA;AACD,MAAa,YAAA,CAAA,GAAA,CAAI,YAAY,oBAAoB,CAAA;AACjD,MAAA,gBAAA,CAAiB,oBAAoB,CAAA;AAAA,KACvC;AAAA,IACA,CAAC,eAAe,UAAU;AAAA,GAC5B;AAEA,EAAM,MAAA,kBAAA,GAAqBA,kBAAY,MAAM;AAC3C,IAAA,YAAA,CAAa,OAAO,UAAU,CAAA;AAC9B,IAAA,gBAAA,CAAiB,EAAE,CAAA;AAAA,GACrB,EAAG,CAAC,UAAU,CAAC,CAAA;AAEf,EAAO,OAAA;AAAA,IACL,kBAAA;AAAA,IACA,aAAA;AAAA,IACA;AAAA,GACF;AACF;;;;"}

package/cjs/palette/Palette.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var paletteCss = ".vuuPalette {\n  --vuuList-borderStyle: none;\n}\n\n.vuuPalette-horizontal {\n  align-items: center;\n  display: flex;\n}\n\n.vuuPaletteItem {\n  --vuu-icon-color: var(--salt-content-secondary-foreground);\n  --list-item-text-padding: 0 0 0 calc(var(--salt-size-unit) * 3);\n  font-size: 12px;\n  font-weight: 600;\n  gap: var(--salt-spacing-200);\n  padding-left: 12px;\n}\n\n.vuuSimpleDraggableWrapper > .vuuPaletteItem {\n  --vuu-icon-color: var(--salt-selectable-foreground);\n}\n\n.salt-theme .vuuPaletteItem {\n  font-size: 11px;\n  font-weight: normal;\n}\n";
+
+module.exports = paletteCss;
+//# sourceMappingURL=Palette.css.js.map

package/cjs/palette/Palette.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Palette.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}