@vuu-ui/vuu-layout 0.8.64 → 0.8.66

package/cjs/layout-action.js

@@ -17,10 +17,7 @@ const Action = {
   REPLACE: "replace",
   RESTORE: "restore",
   SAVE: "save",
-  SET_TITLE: "set-title",
-  SPLITTER_RESIZE: "splitter-resize",
-  SWITCH_TAB: "switch-tab",
-  TEAR_OUT: "tear-out"
+  SPLITTER_RESIZE: "splitter-resize"
 };
 
 exports.Action = Action;

package/cjs/layout-action.js.map

@@ -1 +1 @@
-{"version":3,"file":"layout-action.js","sources":["../src/layout-action.ts"],"sourcesContent":["export const Action = {\n  ADD: \"add\",\n  BLUR: \"blur\",\n  BLUR_SPLITTER: \"blur-splitter\",\n  DRAG_START: \"drag-start\",\n  DRAG_STARTED: \"drag-started\",\n  DRAG_DROP: \"drag-drop\",\n  FOCUS: \"focus\",\n  FOCUS_SPLITTER: \"focus-splitter\",\n  INITIALIZE: \"initialize\",\n  LAYOUT_RESIZE: \"layout-resize\",\n  MAXIMIZE: \"maximize\",\n  MINIMIZE: \"minimize\",\n  REMOVE: \"remove\",\n  REPLACE: \"replace\",\n  RESTORE: \"restore\",\n  SAVE: \"save\",\n  SET_TITLE: \"set-title\",\n  SPLITTER_RESIZE: \"splitter-resize\",\n  SWITCH_TAB: \"switch-tab\",\n  TEAR_OUT: \"tear-out\",\n};\n"],"names":[],"mappings":";;AAAO,MAAM,MAAS,GAAA;AAAA,EACpB,GAAK,EAAA,KAAA;AAAA,EACL,IAAM,EAAA,MAAA;AAAA,EACN,aAAe,EAAA,eAAA;AAAA,EACf,UAAY,EAAA,YAAA;AAAA,EACZ,YAAc,EAAA,cAAA;AAAA,EACd,SAAW,EAAA,WAAA;AAAA,EACX,KAAO,EAAA,OAAA;AAAA,EACP,cAAgB,EAAA,gBAAA;AAAA,EAChB,UAAY,EAAA,YAAA;AAAA,EACZ,aAAe,EAAA,eAAA;AAAA,EACf,QAAU,EAAA,UAAA;AAAA,EACV,QAAU,EAAA,UAAA;AAAA,EACV,MAAQ,EAAA,QAAA;AAAA,EACR,OAAS,EAAA,SAAA;AAAA,EACT,OAAS,EAAA,SAAA;AAAA,EACT,IAAM,EAAA,MAAA;AAAA,EACN,SAAW,EAAA,WAAA;AAAA,EACX,eAAiB,EAAA,iBAAA;AAAA,EACjB,UAAY,EAAA,YAAA;AAAA,EACZ,QAAU,EAAA,UAAA;AACZ;;;;"}
+{"version":3,"file":"layout-action.js","sources":["../src/layout-action.ts"],"sourcesContent":["export const Action = {\n  ADD: \"add\",\n  BLUR: \"blur\",\n  BLUR_SPLITTER: \"blur-splitter\",\n  DRAG_START: \"drag-start\",\n  DRAG_STARTED: \"drag-started\",\n  DRAG_DROP: \"drag-drop\",\n  FOCUS: \"focus\",\n  FOCUS_SPLITTER: \"focus-splitter\",\n  INITIALIZE: \"initialize\",\n  LAYOUT_RESIZE: \"layout-resize\",\n  MAXIMIZE: \"maximize\",\n  MINIMIZE: \"minimize\",\n  REMOVE: \"remove\",\n  REPLACE: \"replace\",\n  RESTORE: \"restore\",\n  SAVE: \"save\",\n  SPLITTER_RESIZE: \"splitter-resize\",\n};\n"],"names":[],"mappings":";;AAAO,MAAM,MAAS,GAAA;AAAA,EACpB,GAAK,EAAA,KAAA;AAAA,EACL,IAAM,EAAA,MAAA;AAAA,EACN,aAAe,EAAA,eAAA;AAAA,EACf,UAAY,EAAA,YAAA;AAAA,EACZ,YAAc,EAAA,cAAA;AAAA,EACd,SAAW,EAAA,WAAA;AAAA,EACX,KAAO,EAAA,OAAA;AAAA,EACP,cAAgB,EAAA,gBAAA;AAAA,EAChB,UAAY,EAAA,YAAA;AAAA,EACZ,aAAe,EAAA,eAAA;AAAA,EACf,QAAU,EAAA,UAAA;AAAA,EACV,QAAU,EAAA,UAAA;AAAA,EACV,MAAQ,EAAA,QAAA;AAAA,EACR,OAAS,EAAA,SAAA;AAAA,EACT,OAAS,EAAA,SAAA;AAAA,EACT,IAAM,EAAA,MAAA;AAAA,EACN,eAAiB,EAAA,iBAAA;AACnB;;;;"}

package/cjs/layout-header/Header.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var headerCss = ".vuuHeader {\n  --saltButton-height: 24px;\n  --saltButton-width: 24px;\n}\n\n.salt-density-high .vuuHeader {\n--saltToolbarField-marginTop: 0;\n}\n\n";
+var headerCss = ".vuuHeader {\n  --saltButton-height: 24px;\n  --saltButton-width: 24px;\n\n  padding: 0 var(--salt-spacing-100);\n\n  [data-align=\"end\"] {\n    margin-left: auto;\n  }\n  [data-align=\"end\"] ~ [data-align=\"end\"] {\n    margin-left: 0;\n  }\n\n  &:hover {\n    .vuuHeader-edit {\n      visibility: visible;\n    }\n  }\n}\n\n.vuuHeader-edit {\n  visibility: hidden;\n}\n\n.salt-density-high .vuuHeader {\n  --saltToolbarField-marginTop: 0;\n}\n";
 
 module.exports = headerCss;
 //# sourceMappingURL=Header.css.js.map

package/cjs/layout-header/Header.js

@@ -15,6 +15,7 @@ var Header$1 = require('./Header.css.js');
 
 const classBase = "vuuHeader";
 const Header = ({
+  allowRename = false,
   className: classNameProp,
   contributions,
   collapsed,
@@ -35,17 +36,18 @@ const Header = ({
   const [editing, setEditing] = React.useState(false);
   const viewDispatch = ViewContext.useViewDispatch();
   const handleClose = (evt) => viewDispatch?.({ type: "remove" }, evt);
-  const handleTitleMouseDown = () => {
+  const focusTitle = React.useCallback(() => {
     labelFieldRef.current?.focus();
-  };
+  }, []);
+  const handleClickEdit = React.useCallback(() => {
+    focusTitle();
+    setEditing((isEditing) => !isEditing);
+  }, [focusTitle]);
   const handleButtonMouseDown = (evt) => {
     evt.stopPropagation();
   };
   const orientation = collapsed || orientationProp;
   const className = cx(classBase, classNameProp, `${classBase}-${orientation}`);
-  const handleEnterEditMode = () => {
-    setEditing(true);
-  };
   const handleTitleKeyDown = (evt) => {
     if (evt.key === "Enter") {
       setEditing(true);
@@ -88,8 +90,7 @@ const Header = ({
         editing,
         value,
         onChange: setValue,
-        onMouseDownCapture: handleTitleMouseDown,
-        onEnterEditMode: handleEnterEditMode,
+        onMouseDownCapture: focusTitle,
         onExitEditMode: handleExitEditMode,
         onKeyDown: handleTitleKeyDown,
         ref: labelFieldRef,
@@ -98,6 +99,19 @@ const Header = ({
       "title"
     )
   );
+  allowRename && toolbarItems.push(
+    /* @__PURE__ */ jsxRuntime.jsx(
+      vuuUiControls.IconButton,
+      {
+        className: `${classBase}-edit`,
+        icon: "edit",
+        onClick: handleClickEdit,
+        onMouseDown: handleButtonMouseDown,
+        variant: "secondary"
+      },
+      "edit-button"
+    )
+  );
   closeable && actionButtons.push(
     /* @__PURE__ */ jsxRuntime.jsx(
       vuuUiControls.IconButton,
@@ -112,10 +126,10 @@ const Header = ({
     )
   );
   postTitleContributedItems.length > 0 && toolbarItems.push(
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "vuuTooltrayProxy", "data-align": "end", children: postTitleContributedItems }, "contributions")
+    /* @__PURE__ */ jsxRuntime.jsx("div", { "data-align": "end", children: postTitleContributedItems }, "contributions")
   );
   actionButtons.length > 0 && toolbarItems.push(
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "vuuTooltrayProxy", "data-align": "end", children: actionButtons }, "actions")
+    /* @__PURE__ */ jsxRuntime.jsx("div", { "data-align": "end", children: actionButtons }, "actions")
   );
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",

package/cjs/layout-header/Header.js.map

@@ -1 +1 @@
-{"version":3,"file":"Header.js","sources":["../../src/layout-header/Header.tsx"],"sourcesContent":["import { EditableLabel, IconButton } from \"@vuu-ui/vuu-ui-controls\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n  cloneElement,\n  HTMLAttributes,\n  KeyboardEvent,\n  MouseEvent,\n  ReactElement,\n  useRef,\n  useState,\n} from \"react\";\nimport { Contribution, useViewDispatch } from \"../layout-view-actions\";\n\nimport headerCss from \"./Header.css\";\n\nexport interface HeaderProps extends HTMLAttributes<HTMLDivElement> {\n  collapsed?: boolean;\n  contributions?: Contribution[];\n  expanded?: boolean;\n  closeable?: boolean;\n  onEditTitle: (value: string) => void;\n  orientation?: \"horizontal\" | \"vertical\";\n  tearOut?: boolean;\n}\n\nconst classBase = \"vuuHeader\";\n\nexport const Header = ({\n  className: classNameProp,\n  contributions,\n  collapsed,\n  closeable,\n  onEditTitle,\n  orientation: orientationProp = \"horizontal\",\n  style,\n  title = \"Untitled\",\n}: HeaderProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-header\",\n    css: headerCss,\n    window: targetWindow,\n  });\n\n  const labelFieldRef = useRef<HTMLDivElement>(null);\n  const [value, setValue] = useState<string>(title);\n  const [editing, setEditing] = useState<boolean>(false);\n\n  const viewDispatch = useViewDispatch();\n  const handleClose = (evt: MouseEvent) =>\n    viewDispatch?.({ type: \"remove\" }, evt);\n\n  const handleTitleMouseDown = () => {\n    labelFieldRef.current?.focus();\n  };\n\n  const handleButtonMouseDown = (evt: MouseEvent) => {\n    // do not allow drag to be initiated\n    evt.stopPropagation();\n  };\n\n  const orientation = collapsed || orientationProp;\n\n  const className = cx(classBase, classNameProp, `${classBase}-${orientation}`);\n\n  const handleEnterEditMode = () => {\n    setEditing(true);\n  };\n\n  const handleTitleKeyDown = (evt: KeyboardEvent<HTMLDivElement>) => {\n    if (evt.key === \"Enter\") {\n      setEditing(true);\n    }\n  };\n\n  const handleExitEditMode = (\n    originalValue = \"\",\n    finalValue = \"\",\n    allowDeactivation = true,\n    editCancelled = false\n  ) => {\n    setEditing(false);\n    if (editCancelled) {\n      setValue(originalValue);\n    } else if (finalValue !== originalValue) {\n      setValue(finalValue);\n      onEditTitle?.(finalValue);\n    }\n    if (allowDeactivation === false) {\n      labelFieldRef.current?.focus();\n    }\n  };\n\n  const handleMouseDown = (e: MouseEvent) => {\n    viewDispatch?.({ type: \"mousedown\" }, e);\n  };\n\n  const toolbarItems: ReactElement[] = [];\n  const postTitleContributedItems: ReactElement[] = [];\n  const actionButtons: ReactElement[] = [];\n\n  contributions?.forEach((contribution, i) => {\n    switch (contribution.location) {\n      case \"pre-title\":\n        toolbarItems.push(cloneElement(contribution.content, { key: i }));\n        break;\n      default:\n        postTitleContributedItems.push(\n          cloneElement(contribution.content, { key: i })\n        );\n    }\n  });\n\n  title &&\n    toolbarItems.push(\n      <EditableLabel\n        className={`${classBase}-title`}\n        editing={editing}\n        key=\"title\"\n        value={value}\n        onChange={setValue}\n        onMouseDownCapture={handleTitleMouseDown}\n        onEnterEditMode={handleEnterEditMode}\n        onExitEditMode={handleExitEditMode}\n        onKeyDown={handleTitleKeyDown}\n        ref={labelFieldRef}\n        tabIndex={0}\n      />\n    );\n\n  closeable &&\n    actionButtons.push(\n      <IconButton\n        data-embedded\n        icon=\"close\"\n        key=\"close\"\n        onClick={handleClose}\n        onMouseDown={handleButtonMouseDown}\n        variant=\"secondary\"\n      />\n    );\n\n  postTitleContributedItems.length > 0 &&\n    toolbarItems.push(\n      <div className=\"vuuTooltrayProxy\" data-align=\"end\" key=\"contributions\">\n        {postTitleContributedItems}\n      </div>\n    );\n\n  actionButtons.length > 0 &&\n    toolbarItems.push(\n      <div className=\"vuuTooltrayProxy\" data-align=\"end\" key=\"actions\">\n        {actionButtons}\n      </div>\n    );\n\n  return (\n    <div\n      className={cx(\"vuuToolbarProxy\", className)}\n      style={style}\n      onMouseDown={handleMouseDown}\n    >\n      {toolbarItems}\n      {/* \n      {collapsed === false ? (\n        <ActionButton\n          aria-label=\"Minimize View\"\n          actionId=\"minimize\"\n          iconName=\"minimize\"\n          onClick={handleAction}\n          onMouseDown={handleButtonMouseDown}\n        />\n      ) : null}\n      {collapsed ? (\n        <ActionButton\n          aria-label=\"Restore View\"\n          actionId=\"restore\"\n          iconName=\"double-chevron-right\"\n          onClick={handleAction}\n          onMouseDown={handleButtonMouseDown}\n        />\n      ) : null}\n      {expanded === false ? (\n        <ActionButton\n          aria-label=\"Maximize View\"\n          actionId=\"maximize\"\n          iconName=\"maximize\"\n          onClick={handleAction}\n          onMouseDown={handleButtonMouseDown}\n        />\n      ) : null}\n      {expanded ? (\n        <ActionButton\n          aria-label=\"Restore View\"\n          actionId=\"restore\"\n          iconName=\"restore\"\n          onClick={handleAction}\n          onMouseDown={handleButtonMouseDown}\n        />\n      ) : null}\n      {tearOut ? (\n        <ActionButton\n          aria-label=\"Tear out View\"\n          actionId=\"tearout\"\n          iconName=\"tear-out\"\n          onClick={handleAction}\n          onMouseDown={handleButtonMouseDown}\n        />\n      ) : null}\n      {closeable ? (\n        <Button\n          aria-label=\"close\"\n          data-icon\n          onClick={handleClose}\n          onMouseDown={handleButtonMouseDown}\n        />\n      ) : null} */}\n    </div>\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","headerCss","useRef","useState","useViewDispatch","cloneElement","jsx","EditableLabel","IconButton"],"mappings":"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"}
+{"version":3,"file":"Header.js","sources":["../../src/layout-header/Header.tsx"],"sourcesContent":["import { EditableLabel, IconButton } from \"@vuu-ui/vuu-ui-controls\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n  cloneElement,\n  HTMLAttributes,\n  KeyboardEvent,\n  MouseEvent,\n  ReactElement,\n  useCallback,\n  useRef,\n  useState,\n} from \"react\";\nimport { useViewDispatch } from \"../layout-view-actions\";\n\nimport headerCss from \"./Header.css\";\nimport { Contribution } from \"../layout-view\";\n\nexport interface HeaderProps extends HTMLAttributes<HTMLDivElement> {\n  allowRename?: boolean;\n  collapsed?: boolean;\n  contributions?: Contribution[];\n  expanded?: boolean;\n  closeable?: boolean;\n  onEditTitle: (value: string) => void;\n  orientation?: \"horizontal\" | \"vertical\";\n  tearOut?: boolean;\n}\n\nconst classBase = \"vuuHeader\";\n\nexport const Header = ({\n  allowRename = false,\n  className: classNameProp,\n  contributions,\n  collapsed,\n  closeable,\n  onEditTitle,\n  orientation: orientationProp = \"horizontal\",\n  style,\n  title = \"Untitled\",\n}: HeaderProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-header\",\n    css: headerCss,\n    window: targetWindow,\n  });\n\n  const labelFieldRef = useRef<HTMLDivElement>(null);\n  const [value, setValue] = useState<string>(title);\n  const [editing, setEditing] = useState<boolean>(false);\n\n  const viewDispatch = useViewDispatch();\n  const handleClose = (evt: MouseEvent) =>\n    viewDispatch?.({ type: \"remove\" }, evt);\n\n  const focusTitle = useCallback(() => {\n    labelFieldRef.current?.focus();\n  }, []);\n\n  const handleClickEdit = useCallback(() => {\n    focusTitle();\n    setEditing((isEditing) => !isEditing);\n  }, [focusTitle]);\n\n  const handleButtonMouseDown = (evt: MouseEvent) => {\n    // do not allow drag to be initiated\n    evt.stopPropagation();\n  };\n\n  const orientation = collapsed || orientationProp;\n\n  const className = cx(classBase, classNameProp, `${classBase}-${orientation}`);\n\n  const handleTitleKeyDown = (evt: KeyboardEvent<HTMLDivElement>) => {\n    if (evt.key === \"Enter\") {\n      setEditing(true);\n    }\n  };\n\n  const handleExitEditMode = (\n    originalValue = \"\",\n    finalValue = \"\",\n    allowDeactivation = true,\n    editCancelled = false\n  ) => {\n    setEditing(false);\n    if (editCancelled) {\n      setValue(originalValue);\n    } else if (finalValue !== originalValue) {\n      setValue(finalValue);\n      onEditTitle?.(finalValue);\n    }\n    if (allowDeactivation === false) {\n      labelFieldRef.current?.focus();\n    }\n  };\n\n  const handleMouseDown = (e: MouseEvent) => {\n    viewDispatch?.({ type: \"mousedown\" }, e);\n  };\n\n  const toolbarItems: ReactElement[] = [];\n  const postTitleContributedItems: ReactElement[] = [];\n  const actionButtons: ReactElement[] = [];\n\n  contributions?.forEach((contribution, i) => {\n    switch (contribution.location) {\n      case \"pre-title\":\n        toolbarItems.push(cloneElement(contribution.content, { key: i }));\n        break;\n      default:\n        postTitleContributedItems.push(\n          cloneElement(contribution.content, { key: i })\n        );\n    }\n  });\n\n  title &&\n    toolbarItems.push(\n      <EditableLabel\n        className={`${classBase}-title`}\n        editing={editing}\n        key=\"title\"\n        value={value}\n        onChange={setValue}\n        onMouseDownCapture={focusTitle}\n        onExitEditMode={handleExitEditMode}\n        onKeyDown={handleTitleKeyDown}\n        ref={labelFieldRef}\n        tabIndex={0}\n      />\n    );\n\n  allowRename &&\n    toolbarItems.push(\n      <IconButton\n        className={`${classBase}-edit`}\n        icon=\"edit\"\n        key=\"edit-button\"\n        onClick={handleClickEdit}\n        onMouseDown={handleButtonMouseDown}\n        variant=\"secondary\"\n      />\n    );\n\n  closeable &&\n    actionButtons.push(\n      <IconButton\n        data-embedded\n        icon=\"close\"\n        key=\"close\"\n        onClick={handleClose}\n        onMouseDown={handleButtonMouseDown}\n        variant=\"secondary\"\n      />\n    );\n\n  postTitleContributedItems.length > 0 &&\n    toolbarItems.push(\n      <div data-align=\"end\" key=\"contributions\">\n        {postTitleContributedItems}\n      </div>\n    );\n\n  actionButtons.length > 0 &&\n    toolbarItems.push(\n      <div data-align=\"end\" key=\"actions\">\n        {actionButtons}\n      </div>\n    );\n\n  return (\n    <div\n      className={cx(\"vuuToolbarProxy\", className)}\n      style={style}\n      onMouseDown={handleMouseDown}\n    >\n      {toolbarItems}\n      {/* \n      {collapsed === false ? (\n        <ActionButton\n          aria-label=\"Minimize View\"\n          actionId=\"minimize\"\n          iconName=\"minimize\"\n          onClick={handleAction}\n          onMouseDown={handleButtonMouseDown}\n        />\n      ) : null}\n      {collapsed ? (\n        <ActionButton\n          aria-label=\"Restore View\"\n          actionId=\"restore\"\n          iconName=\"double-chevron-right\"\n          onClick={handleAction}\n          onMouseDown={handleButtonMouseDown}\n        />\n      ) : null}\n      {expanded === false ? (\n        <ActionButton\n          aria-label=\"Maximize View\"\n          actionId=\"maximize\"\n          iconName=\"maximize\"\n          onClick={handleAction}\n          onMouseDown={handleButtonMouseDown}\n        />\n      ) : null}\n      {expanded ? (\n        <ActionButton\n          aria-label=\"Restore View\"\n          actionId=\"restore\"\n          iconName=\"restore\"\n          onClick={handleAction}\n          onMouseDown={handleButtonMouseDown}\n        />\n      ) : null}\n      {tearOut ? (\n        <ActionButton\n          aria-label=\"Tear out View\"\n          actionId=\"tearout\"\n          iconName=\"tear-out\"\n          onClick={handleAction}\n          onMouseDown={handleButtonMouseDown}\n        />\n      ) : null}\n      {closeable ? (\n        <Button\n          aria-label=\"close\"\n          data-icon\n          onClick={handleClose}\n          onMouseDown={handleButtonMouseDown}\n        />\n      ) : null} */}\n    </div>\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","headerCss","useRef","useState","useViewDispatch","useCallback","cloneElement","jsx","EditableLabel","IconButton"],"mappings":"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"}

package/cjs/layout-provider/LayoutProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"LayoutProvider.js","sources":["../../src/layout-provider/LayoutProvider.tsx"],"sourcesContent":["import {\n  MutableRefObject,\n  ReactElement,\n  useCallback,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport {\n  LayoutActionType,\n  layoutFromJson,\n  layoutQuery,\n  layoutReducer,\n  layoutToJSON,\n  processLayoutElement,\n  type LayoutChangeHandler,\n  type LayoutChangeReason,\n  type LayoutJSON,\n  type LayoutReducerAction,\n  type SaveAction,\n} from \"../layout-reducer\";\nimport { findTarget, getChildProp, getProp, getProps, typeOf } from \"../utils\";\nimport {\n  LayoutProviderContext,\n  LayoutProviderDispatch,\n} from \"./LayoutProviderContext\";\nimport { useLayoutDragDrop } from \"./useLayoutDragDrop\";\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst withDropTarget = (props: any) => props.dropTarget;\nconst shouldSave = (action: LayoutReducerAction) =>\n  [\n    \"drag-drop\",\n    \"remove\",\n    \"set-title\",\n    \"splitter-resize\",\n    \"switch-tab\",\n  ].includes(action.type);\n\nconst getLayoutChangeReason = (\n  action: LayoutReducerAction | SaveAction\n): LayoutChangeReason => {\n  switch (action.type) {\n    case \"switch-tab\":\n      // TODO how can we make this more robust, shouldn't rely on 'main-tabs'\n      if (action.id === \"main-tabs\") {\n        return \"switch-active-layout\";\n      } else {\n        return \"switch-active-tab\";\n      }\n    case \"save\":\n      return \"save-feature-props\";\n    case \"drag-drop\":\n      return \"drag-drop-operation\";\n    case \"remove\":\n      return \"remove-component\";\n    case \"splitter-resize\":\n      return \"resize-component\";\n    case \"set-title\":\n      return \"edit-feature-title\";\n    default:\n      throw Error(\"unknown layout action\");\n  }\n};\n\nexport interface LayoutProviderProps {\n  children: ReactElement;\n  createNewChild?: (index?: number) => ReactElement;\n  pathToDropTarget?: string;\n  layout?: LayoutJSON;\n  onLayoutChange?: LayoutChangeHandler;\n}\n\nexport const LayoutProviderVersion = () => {\n  const version = useLayoutProviderVersion();\n  return <div>{`Context: ${version} `}</div>;\n};\n\nexport const LayoutProvider = (props: LayoutProviderProps): ReactElement => {\n  const { children, createNewChild, pathToDropTarget, layout, onLayoutChange } =\n    props;\n  const state = useRef<ReactElement | undefined>(undefined);\n  const childrenRef = useRef<ReactElement>(children);\n\n  const [, forceRefresh] = useState<unknown>(null);\n\n  const serializeState = useCallback(\n    (source, layoutChangeReason: LayoutChangeReason) => {\n      if (onLayoutChange) {\n        const targetContainer =\n          findTarget(source, withDropTarget) || state.current;\n        const isDraggableLayout = typeOf(targetContainer) === \"DraggableLayout\";\n        const target = isDraggableLayout\n          ? getProps(targetContainer).children[0]\n          : targetContainer;\n        const serializedModel = layoutToJSON(target);\n        onLayoutChange(serializedModel, layoutChangeReason);\n      }\n    },\n    [onLayoutChange]\n  );\n\n  const dispatchLayoutAction = useCallback(\n    (action: LayoutReducerAction, suppressSave = false) => {\n      const nextState = layoutReducer(state.current as ReactElement, action);\n      if (nextState !== state.current) {\n        state.current = nextState;\n        forceRefresh({});\n        if (!suppressSave && shouldSave(action)) {\n          serializeState(nextState, getLayoutChangeReason(action));\n        }\n      }\n    },\n    [forceRefresh, serializeState]\n  );\n\n  const layoutActionDispatcher = useCallback<LayoutProviderDispatch>(\n    (action) => {\n      switch (action.type) {\n        case \"drag-start\": {\n          prepareToDragLayout(action);\n          break;\n        }\n        case \"save\": {\n          serializeState(state.current, getLayoutChangeReason(action));\n          break;\n        }\n        case \"query\":\n          if (action.query === \"PARENT_CONTAINER\") {\n            return layoutQuery(action.query, action.path, state.current);\n          }\n          break;\n\n        default: {\n          dispatchLayoutAction(action);\n          break;\n        }\n      }\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [dispatchLayoutAction, serializeState]\n  );\n\n  const prepareToDragLayout = useLayoutDragDrop(\n    state as MutableRefObject<ReactElement>,\n    layoutActionDispatcher,\n    pathToDropTarget\n  );\n\n  useEffect(() => {\n    if (layout) {\n      const targetContainer = findTarget(\n        state.current as never,\n        withDropTarget\n      ) as ReactElement;\n      if (targetContainer) {\n        const target = getChildProp(targetContainer);\n        const newLayout = layoutFromJson(\n          layout,\n          `${targetContainer.props.path}.0`\n        );\n        const action = target\n          ? {\n              type: LayoutActionType.REPLACE,\n              target,\n              replacement: newLayout,\n            }\n          : {\n              type: LayoutActionType.ADD,\n              path: targetContainer.props.path,\n              component: newLayout,\n            };\n        dispatchLayoutAction(action, true);\n      } else if (layout.id === getProp(state.current, \"id\")) {\n        const newLayout = layoutFromJson(layout, \"0\");\n        const action = {\n          type: LayoutActionType.REPLACE,\n          target: state.current,\n          replacement: newLayout,\n        };\n        dispatchLayoutAction(action, true);\n      }\n    }\n  }, [dispatchLayoutAction, layout]);\n\n  if (state.current === undefined) {\n    state.current = processLayoutElement(children);\n  } else if (children !== childrenRef.current) {\n    state.current = processLayoutElement(children, state.current);\n    childrenRef.current = children;\n  }\n\n  return (\n    <LayoutProviderContext.Provider\n      value={{\n        createNewChild,\n        dispatchLayoutProvider: layoutActionDispatcher,\n        version: 0,\n      }}\n    >\n      {state.current}\n    </LayoutProviderContext.Provider>\n  );\n};\n\nexport const useLayoutProviderDispatch = () => {\n  const { dispatchLayoutProvider } = useContext(LayoutProviderContext);\n  return dispatchLayoutProvider;\n};\n\nexport const useLayoutCreateNewChild = () => {\n  const { createNewChild } = useContext(LayoutProviderContext);\n  return createNewChild;\n};\n\nexport const useLayoutProviderVersion = () => {\n  const { version } = useContext(LayoutProviderContext);\n  return version;\n};\n"],"names":["jsx","useRef","useState","useCallback","findTarget","typeOf","getProps","layoutToJSON","layoutReducer","layoutQuery","useLayoutDragDrop","useEffect","getChildProp","layoutFromJson","LayoutActionType","getProp","processLayoutElement","LayoutProviderContext","useContext"],"mappings":"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"}
+{"version":3,"file":"LayoutProvider.js","sources":["../../src/layout-provider/LayoutProvider.tsx"],"sourcesContent":["import {\n  MutableRefObject,\n  ReactElement,\n  useCallback,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport {\n  LayoutActionType,\n  layoutFromJson,\n  layoutQuery,\n  layoutReducer,\n  layoutToJSON,\n  processLayoutElement,\n  type LayoutChangeHandler,\n  type LayoutChangeReason,\n  type LayoutJSON,\n  type LayoutReducerAction,\n} from \"../layout-reducer\";\nimport type { SaveAction } from \"../layout-view\";\nimport { findTarget, getChildProp, getProp, getProps, typeOf } from \"../utils\";\nimport {\n  LayoutProviderContext,\n  LayoutProviderDispatch,\n} from \"./LayoutProviderContext\";\nimport { useLayoutDragDrop } from \"./useLayoutDragDrop\";\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst withDropTarget = (props: any) => props.dropTarget;\nconst shouldSave = (action: LayoutReducerAction) =>\n  [\n    \"drag-drop\",\n    \"remove\",\n    \"set-title\",\n    \"splitter-resize\",\n    \"switch-tab\",\n  ].includes(action.type);\n\nconst getLayoutChangeReason = (\n  action: LayoutReducerAction | SaveAction\n): LayoutChangeReason => {\n  switch (action.type) {\n    case \"switch-tab\":\n      // TODO how can we make this more robust, shouldn't rely on 'main-tabs'\n      if (action.id === \"main-tabs\") {\n        return \"switch-active-layout\";\n      } else {\n        return \"switch-active-tab\";\n      }\n    case \"save\":\n      return \"save-feature-props\";\n    case \"drag-drop\":\n      return \"drag-drop-operation\";\n    case \"remove\":\n      return \"remove-component\";\n    case \"splitter-resize\":\n      return \"resize-component\";\n    case \"set-title\":\n      return \"edit-feature-title\";\n    default:\n      throw Error(\"unknown layout action\");\n  }\n};\n\nexport interface LayoutProviderProps {\n  children: ReactElement;\n  createNewChild?: (index?: number) => ReactElement;\n  pathToDropTarget?: string;\n  layout?: LayoutJSON;\n  onLayoutChange?: LayoutChangeHandler;\n}\n\nexport const LayoutProviderVersion = () => {\n  const version = useLayoutProviderVersion();\n  return <div>{`Context: ${version} `}</div>;\n};\n\nexport const LayoutProvider = (props: LayoutProviderProps): ReactElement => {\n  const { children, createNewChild, pathToDropTarget, layout, onLayoutChange } =\n    props;\n  const state = useRef<ReactElement | undefined>(undefined);\n  const childrenRef = useRef<ReactElement>(children);\n\n  const [, forceRefresh] = useState<unknown>(null);\n\n  const serializeState = useCallback(\n    (source, layoutChangeReason: LayoutChangeReason) => {\n      if (onLayoutChange) {\n        const targetContainer =\n          findTarget(source, withDropTarget) || state.current;\n        const isDraggableLayout = typeOf(targetContainer) === \"DraggableLayout\";\n        const target = isDraggableLayout\n          ? getProps(targetContainer).children[0]\n          : targetContainer;\n        const serializedModel = layoutToJSON(target);\n        onLayoutChange(serializedModel, layoutChangeReason);\n      }\n    },\n    [onLayoutChange]\n  );\n\n  const dispatchLayoutAction = useCallback(\n    (action: LayoutReducerAction, suppressSave = false) => {\n      const nextState = layoutReducer(state.current as ReactElement, action);\n      if (nextState !== state.current) {\n        state.current = nextState;\n        forceRefresh({});\n        if (!suppressSave && shouldSave(action)) {\n          serializeState(nextState, getLayoutChangeReason(action));\n        }\n      }\n    },\n    [forceRefresh, serializeState]\n  );\n\n  const layoutActionDispatcher = useCallback<LayoutProviderDispatch>(\n    (action) => {\n      switch (action.type) {\n        case \"drag-start\": {\n          prepareToDragLayout(action);\n          break;\n        }\n        case \"save\": {\n          serializeState(state.current, getLayoutChangeReason(action));\n          break;\n        }\n        case \"query\":\n          if (action.query === \"PARENT_CONTAINER\") {\n            return layoutQuery(action.query, action.path, state.current);\n          }\n          break;\n\n        default: {\n          dispatchLayoutAction(action);\n          break;\n        }\n      }\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [dispatchLayoutAction, serializeState]\n  );\n\n  const prepareToDragLayout = useLayoutDragDrop(\n    state as MutableRefObject<ReactElement>,\n    layoutActionDispatcher,\n    pathToDropTarget\n  );\n\n  useEffect(() => {\n    if (layout) {\n      const targetContainer = findTarget(\n        state.current as never,\n        withDropTarget\n      ) as ReactElement;\n      if (targetContainer) {\n        const target = getChildProp(targetContainer);\n        const newLayout = layoutFromJson(\n          layout,\n          `${targetContainer.props.path}.0`\n        );\n        const action = target\n          ? {\n              type: LayoutActionType.REPLACE,\n              target,\n              replacement: newLayout,\n            }\n          : {\n              type: LayoutActionType.ADD,\n              path: targetContainer.props.path,\n              component: newLayout,\n            };\n        dispatchLayoutAction(action, true);\n      } else if (layout.id === getProp(state.current, \"id\")) {\n        const newLayout = layoutFromJson(layout, \"0\");\n        const action = {\n          type: LayoutActionType.REPLACE,\n          target: state.current,\n          replacement: newLayout,\n        };\n        dispatchLayoutAction(action, true);\n      }\n    }\n  }, [dispatchLayoutAction, layout]);\n\n  if (state.current === undefined) {\n    state.current = processLayoutElement(children);\n  } else if (children !== childrenRef.current) {\n    state.current = processLayoutElement(children, state.current);\n    childrenRef.current = children;\n  }\n\n  return (\n    <LayoutProviderContext.Provider\n      value={{\n        createNewChild,\n        dispatchLayoutProvider: layoutActionDispatcher,\n        version: 0,\n      }}\n    >\n      {state.current}\n    </LayoutProviderContext.Provider>\n  );\n};\n\nexport const useLayoutProviderDispatch = () => {\n  const { dispatchLayoutProvider } = useContext(LayoutProviderContext);\n  return dispatchLayoutProvider;\n};\n\nexport const useLayoutCreateNewChild = () => {\n  const { createNewChild } = useContext(LayoutProviderContext);\n  return createNewChild;\n};\n\nexport const useLayoutProviderVersion = () => {\n  const { version } = useContext(LayoutProviderContext);\n  return version;\n};\n"],"names":["jsx","useRef","useState","useCallback","findTarget","typeOf","getProps","layoutToJSON","layoutReducer","layoutQuery","useLayoutDragDrop","useEffect","getChildProp","layoutFromJson","LayoutActionType","getProp","processLayoutElement","LayoutProviderContext","useContext"],"mappings":"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"}

package/cjs/layout-provider/LayoutProviderContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"LayoutProviderContext.js","sources":["../../src/layout-provider/LayoutProviderContext.ts"],"sourcesContent":["import { createContext, Dispatch, ReactElement } from \"react\";\nimport {\n  DragStartAction,\n  LayoutReducerAction,\n  QueryAction,\n  SaveAction,\n} from \"../layout-reducer\";\n\nconst unconfiguredLayoutProviderDispatch: LayoutProviderDispatch = (action) =>\n  console.log(\n    `dispatch ${action.type}, have you forgotten to provide a LayoutProvider ?`\n  );\n\nexport type LayoutProviderDispatch = Dispatch<\n  LayoutReducerAction | SaveAction | DragStartAction | QueryAction\n>;\n\nexport interface LayoutProviderContextProps {\n  createNewChild?: (index?: number) => ReactElement;\n  dispatchLayoutProvider: LayoutProviderDispatch;\n  version: number;\n}\n\nexport const LayoutProviderContext = createContext<LayoutProviderContextProps>({\n  dispatchLayoutProvider: unconfiguredLayoutProviderDispatch,\n  version: -1,\n});\n"],"names":["createContext"],"mappings":";;;;AAQA,MAAM,kCAAA,GAA6D,CAAC,MAAA,KAClE,OAAQ,CAAA,GAAA;AAAA,EACN,CAAA,SAAA,EAAY,OAAO,IAAI,CAAA,kDAAA,CAAA;AACzB,CAAA,CAAA;AAYK,MAAM,wBAAwBA,mBAA0C,CAAA;AAAA,EAC7E,sBAAwB,EAAA,kCAAA;AAAA,EACxB,OAAS,EAAA,CAAA,CAAA;AACX,CAAC;;;;"}
+{"version":3,"file":"LayoutProviderContext.js","sources":["../../src/layout-provider/LayoutProviderContext.ts"],"sourcesContent":["import { createContext, Dispatch, ReactElement } from \"react\";\nimport {\n  DragStartAction,\n  LayoutReducerAction,\n  QueryAction,\n} from \"../layout-reducer\";\nimport { SaveAction } from \"../layout-view\";\n\nconst unconfiguredLayoutProviderDispatch: LayoutProviderDispatch = (action) =>\n  console.log(\n    `dispatch ${action.type}, have you forgotten to provide a LayoutProvider ?`\n  );\n\nexport type LayoutProviderDispatch = Dispatch<\n  LayoutReducerAction | SaveAction | DragStartAction | QueryAction\n>;\n\nexport interface LayoutProviderContextProps {\n  createNewChild?: (index?: number) => ReactElement;\n  dispatchLayoutProvider: LayoutProviderDispatch;\n  version: number;\n}\n\nexport const LayoutProviderContext = createContext<LayoutProviderContextProps>({\n  dispatchLayoutProvider: unconfiguredLayoutProviderDispatch,\n  version: -1,\n});\n"],"names":["createContext"],"mappings":";;;;AAQA,MAAM,kCAAA,GAA6D,CAAC,MAAA,KAClE,OAAQ,CAAA,GAAA;AAAA,EACN,CAAA,SAAA,EAAY,OAAO,IAAI,CAAA,kDAAA,CAAA;AACzB,CAAA,CAAA;AAYK,MAAM,wBAAwBA,mBAA0C,CAAA;AAAA,EAC7E,sBAAwB,EAAA,kCAAA;AAAA,EACxB,OAAS,EAAA,CAAA,CAAA;AACX,CAAC;;;;"}

package/cjs/layout-reducer/layoutTypes.js

@@ -12,7 +12,6 @@ const LayoutActionType = {
   REMOVE: "remove",
   REPLACE: "replace",
   RESTORE: "restore",
-  SAVE: "save",
   SET_PROP: "set-prop",
   SET_PROPS: "set-props",
   SET_TITLE: "set-title",

package/cjs/layout-reducer/layoutTypes.js.map

@@ -1 +1 @@
-{"version":3,"file":"layoutTypes.js","sources":["../../src/layout-reducer/layoutTypes.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { NamedFilter } from \"@vuu-ui/vuu-filter-types\";\nimport { CSSProperties, ReactElement } from \"react\";\nimport { DragDropRect, DragInstructions } from \"../drag-drop\";\nimport { DropTarget } from \"../drag-drop/DropTarget\";\nimport { ContributionLocation } from \"../layout-view-actions\";\n\nexport interface WithProps {\n  props?: { [key: string]: any };\n}\n\nexport interface WithType {\n  props?: any;\n  title?: string;\n  type: string;\n}\n\nexport interface LayoutRoot extends WithProps {\n  active?: number;\n  children?: ReactElement[];\n  type: string;\n}\n\nexport type ValueOf<T> = T[keyof T];\nexport interface ApplicationSettings {\n  leftNav?: {\n    activeTabIndex: number;\n    expanded: boolean;\n  };\n  /**\n   * filters are keyed by MODULE:tablename\n   */\n  filters?: { [key: string]: NamedFilter[] };\n}\nexport type ApplicationSetting = ValueOf<ApplicationSettings>;\n\nexport interface ApplicationJSON {\n  layout: LayoutJSON;\n  settings?: ApplicationSettings;\n}\n\nexport interface LayoutJSON extends WithType {\n  active?: number;\n  children?: LayoutJSON[];\n  id?: string;\n  props?: { [key: string]: any };\n  state?: any;\n  type: string;\n  style?: CSSProperties;\n}\n\nexport interface WithActive {\n  active?: number;\n}\n\nexport type LayoutModel = LayoutRoot | ReactElement | WithType;\n\nexport type layoutType = \"Flexbox\" | \"View\" | \"DraggableLayout\" | \"Stack\";\n\n// TODO duplicated in layout-action\nexport const LayoutActionType = {\n  ADD: \"add\",\n  DRAG_START: \"drag-start\",\n  DRAG_DROP: \"drag-drop\",\n  LAYOUT_RESIZE: \"layout-resize\",\n  MAXIMIZE: \"maximize\",\n  MINIMIZE: \"minimize\",\n  MOVE_CHILD: \"move-child\",\n  QUERY: \"query\",\n  REMOVE: \"remove\",\n  REPLACE: \"replace\",\n  RESTORE: \"restore\",\n  SAVE: \"save\",\n  SET_PROP: \"set-prop\",\n  SET_PROPS: \"set-props\",\n  SET_TITLE: \"set-title\",\n  SPLITTER_RESIZE: \"splitter-resize\",\n  SWITCH_TAB: \"switch-tab\",\n  TEAROUT: \"tearout\",\n} as const;\n\nexport type AddAction = {\n  component: any;\n  path: string;\n  type: typeof LayoutActionType.ADD;\n};\n\nexport type DragDropAction = {\n  draggedReactElement: ReactElement;\n  dragInstructions: any;\n  dropTarget: Partial<DropTarget>;\n  type: typeof LayoutActionType.DRAG_DROP;\n};\n\nexport type MaximizeAction = {\n  path?: string;\n  type: typeof LayoutActionType.MAXIMIZE;\n};\n\nexport type MinimizeAction = {\n  path?: string;\n  type: typeof LayoutActionType.MINIMIZE;\n};\n\nexport type MoveChildAction = {\n  fromIndex: number;\n  toIndex: number;\n  path: string;\n  type: typeof LayoutActionType.MOVE_CHILD;\n};\n\nexport type QueryAction = {\n  path?: string;\n  query: string;\n  type: typeof LayoutActionType.QUERY;\n};\n\nexport type RemoveAction = {\n  path?: string;\n  type: typeof LayoutActionType.REMOVE;\n};\n\nexport type ReplaceAction = {\n  replacement: any;\n  target: any;\n  type: typeof LayoutActionType.REPLACE;\n};\n\nexport type RestoreAction = {\n  path?: string;\n  type: typeof LayoutActionType.RESTORE;\n};\n\nexport type SetPropAction = {\n  path: string;\n  propName: string;\n  propValue: string | number | boolean;\n  type: typeof LayoutActionType.SET_PROP;\n};\n\nexport type SetPropsAction = {\n  path: string;\n  props: { [key: string]: unknown };\n  type: typeof LayoutActionType.SET_PROPS;\n};\n\nexport type SetTitleAction = {\n  path: string;\n  title: string;\n  type: typeof LayoutActionType.SET_TITLE;\n};\n\nexport type SplitterResizeAction = {\n  path: string;\n  sizes: { currentSize: number; flexBasis: number }[];\n  type: typeof LayoutActionType.SPLITTER_RESIZE;\n};\n\nexport type LayoutResizeAction = {\n  path: string;\n  size: number;\n  type: typeof LayoutActionType.LAYOUT_RESIZE;\n};\n\nexport type SwitchTabAction = {\n  id?: string;\n  nextIdx: number;\n  path: string;\n  type: typeof LayoutActionType.SWITCH_TAB;\n};\n\nexport type TearoutAction = {\n  path?: string;\n  type: typeof LayoutActionType.TEAROUT;\n};\n\nexport type LayoutReducerAction =\n  | AddAction\n  | DragDropAction\n  | LayoutResizeAction\n  | MaximizeAction\n  | MinimizeAction\n  | MoveChildAction\n  | RemoveAction\n  | ReplaceAction\n  | RestoreAction\n  | SetPropAction\n  | SetPropsAction\n  | SetTitleAction\n  | SplitterResizeAction\n  | SwitchTabAction;\n\nexport type SaveAction = {\n  type: typeof LayoutActionType.SAVE;\n};\n\nexport type AddToolbarContributionViewAction = {\n  content: ReactElement;\n  location: ContributionLocation;\n  type: \"add-toolbar-contribution\";\n};\n\nexport type RemoveToolbarContributionViewAction = {\n  location: ContributionLocation;\n  type: \"remove-toolbar-contribution\";\n};\n\nexport type MousedownViewAction = {\n  preDragActivity?: any;\n  index?: number;\n  type: \"mousedown\";\n};\n\nexport type DragStartAction = {\n  payload?: ReactElement;\n  dragContainerPath?: string;\n  dragElement?: HTMLElement;\n  dragRect: DragDropRect;\n  dropTargets?: string[];\n  evt: MouseEvent;\n  instructions?: DragInstructions;\n  path: string;\n  type: typeof LayoutActionType.DRAG_START;\n};\n\nexport type LayoutLevelChange =\n  | \"switch-active-tab\"\n  | \"edit-feature-title\"\n  | \"save-feature-props\"\n  | \"resize-component\"\n  | \"remove-component\"\n  | \"drag-drop-operation\";\n\nexport type ApplicationLevelChange =\n  | \"switch-active-layout\"\n  | \"open-layout\"\n  | \"close-layout\"\n  | \"rename-layout\"\n  | \"resize-application-chrome\";\n\nexport type LayoutChangeReason = LayoutLevelChange | ApplicationLevelChange;\n\nexport type LayoutChangeHandler = (\n  layout: LayoutJSON,\n  layoutChangeReason: LayoutChangeReason\n) => void;\n\nexport const isApplicationLevelChange = (\n  layoutChangeReason: LayoutChangeReason\n): layoutChangeReason is ApplicationLevelChange =>\n  [\n    \"switch-active-layout\",\n    \"open-layout\",\n    \"close-layout\",\n    \"rename-layout\",\n  ].includes(layoutChangeReason);\n\nexport const isLayoutLevelChange = (\n  layoutChangeReason: LayoutChangeReason\n): layoutChangeReason is LayoutLevelChange =>\n  [\n    \"switch-active-tab\",\n    \"edit-feature-title\",\n    \"save-feature-props\",\n    \"remove-component\",\n    \"resize-component\",\n    \"drag-drop-operation\",\n  ].includes(layoutChangeReason);\n"],"names":[],"mappings":";;AA4DO,MAAM,gBAAmB,GAAA;AAAA,EAC9B,GAAK,EAAA,KAAA;AAAA,EACL,UAAY,EAAA,YAAA;AAAA,EACZ,SAAW,EAAA,WAAA;AAAA,EACX,aAAe,EAAA,eAAA;AAAA,EACf,QAAU,EAAA,UAAA;AAAA,EACV,QAAU,EAAA,UAAA;AAAA,EACV,UAAY,EAAA,YAAA;AAAA,EACZ,KAAO,EAAA,OAAA;AAAA,EACP,MAAQ,EAAA,QAAA;AAAA,EACR,OAAS,EAAA,SAAA;AAAA,EACT,OAAS,EAAA,SAAA;AAAA,EACT,IAAM,EAAA,MAAA;AAAA,EACN,QAAU,EAAA,UAAA;AAAA,EACV,SAAW,EAAA,WAAA;AAAA,EACX,SAAW,EAAA,WAAA;AAAA,EACX,eAAiB,EAAA,iBAAA;AAAA,EACjB,UAAY,EAAA,YAAA;AAAA,EACZ,OAAS,EAAA,SAAA;AACX,EAAA;AAwKa,MAAA,wBAAA,GAA2B,CACtC,kBAEA,KAAA;AAAA,EACE,sBAAA;AAAA,EACA,aAAA;AAAA,EACA,cAAA;AAAA,EACA,eAAA;AACF,CAAA,CAAE,SAAS,kBAAkB,EAAA;AAElB,MAAA,mBAAA,GAAsB,CACjC,kBAEA,KAAA;AAAA,EACE,mBAAA;AAAA,EACA,oBAAA;AAAA,EACA,oBAAA;AAAA,EACA,kBAAA;AAAA,EACA,kBAAA;AAAA,EACA,qBAAA;AACF,CAAA,CAAE,SAAS,kBAAkB;;;;;;"}
+{"version":3,"file":"layoutTypes.js","sources":["../../src/layout-reducer/layoutTypes.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { NamedFilter } from \"@vuu-ui/vuu-filter-types\";\nimport { CSSProperties, ReactElement } from \"react\";\nimport { DragDropRect, DragInstructions } from \"../drag-drop\";\nimport { DropTarget } from \"../drag-drop/DropTarget\";\n\nexport interface WithProps {\n  props?: { [key: string]: any };\n}\n\nexport interface WithType {\n  props?: any;\n  title?: string;\n  type: string;\n}\n\nexport interface LayoutRoot extends WithProps {\n  active?: number;\n  children?: ReactElement[];\n  type: string;\n}\n\nexport type ValueOf<T> = T[keyof T];\nexport interface ApplicationSettings {\n  leftNav?: {\n    activeTabIndex: number;\n    expanded: boolean;\n  };\n  /**\n   * filters are keyed by MODULE:tablename\n   */\n  filters?: { [key: string]: NamedFilter[] };\n}\nexport type ApplicationSetting = ValueOf<ApplicationSettings>;\n\nexport interface ApplicationJSON {\n  layout: LayoutJSON;\n  settings?: ApplicationSettings;\n}\n\nexport interface LayoutJSON extends WithType {\n  active?: number;\n  children?: LayoutJSON[];\n  id?: string;\n  props?: { [key: string]: any };\n  state?: any;\n  type: string;\n  style?: CSSProperties;\n}\n\nexport interface WithActive {\n  active?: number;\n}\n\nexport type LayoutModel = LayoutRoot | ReactElement | WithType;\n\nexport type layoutType = \"Flexbox\" | \"View\" | \"DraggableLayout\" | \"Stack\";\n\n// TODO duplicated in layout-action\nexport const LayoutActionType = {\n  ADD: \"add\",\n  DRAG_START: \"drag-start\",\n  DRAG_DROP: \"drag-drop\",\n  LAYOUT_RESIZE: \"layout-resize\",\n  MAXIMIZE: \"maximize\",\n  MINIMIZE: \"minimize\",\n  MOVE_CHILD: \"move-child\",\n  QUERY: \"query\",\n  REMOVE: \"remove\",\n  REPLACE: \"replace\",\n  RESTORE: \"restore\",\n  SET_PROP: \"set-prop\",\n  SET_PROPS: \"set-props\",\n  SET_TITLE: \"set-title\",\n  SPLITTER_RESIZE: \"splitter-resize\",\n  SWITCH_TAB: \"switch-tab\",\n  TEAROUT: \"tearout\",\n} as const;\n\nexport type AddAction = {\n  component: any;\n  path: string;\n  type: typeof LayoutActionType.ADD;\n};\n\nexport type DragDropAction = {\n  draggedReactElement: ReactElement;\n  dragInstructions: any;\n  dropTarget: Partial<DropTarget>;\n  type: typeof LayoutActionType.DRAG_DROP;\n};\n\nexport type MaximizeAction = {\n  path?: string;\n  type: typeof LayoutActionType.MAXIMIZE;\n};\n\nexport type MinimizeAction = {\n  path?: string;\n  type: typeof LayoutActionType.MINIMIZE;\n};\n\nexport type MoveChildAction = {\n  fromIndex: number;\n  toIndex: number;\n  path: string;\n  type: typeof LayoutActionType.MOVE_CHILD;\n};\n\nexport type QueryAction = {\n  path?: string;\n  query: string;\n  type: typeof LayoutActionType.QUERY;\n};\n\nexport type RemoveAction = {\n  path?: string;\n  type: typeof LayoutActionType.REMOVE;\n};\n\nexport type ReplaceAction = {\n  replacement: any;\n  target: any;\n  type: typeof LayoutActionType.REPLACE;\n};\n\nexport type RestoreAction = {\n  path?: string;\n  type: typeof LayoutActionType.RESTORE;\n};\n\nexport type SetPropAction = {\n  path: string;\n  propName: string;\n  propValue: string | number | boolean;\n  type: typeof LayoutActionType.SET_PROP;\n};\n\nexport type SetPropsAction = {\n  path: string;\n  props: { [key: string]: unknown };\n  type: typeof LayoutActionType.SET_PROPS;\n};\n\nexport type SetTitleAction = {\n  path: string;\n  title: string;\n  type: typeof LayoutActionType.SET_TITLE;\n};\n\nexport type SplitterResizeAction = {\n  path: string;\n  sizes: { currentSize: number; flexBasis: number }[];\n  type: typeof LayoutActionType.SPLITTER_RESIZE;\n};\n\nexport type LayoutResizeAction = {\n  path: string;\n  size: number;\n  type: typeof LayoutActionType.LAYOUT_RESIZE;\n};\n\nexport type SwitchTabAction = {\n  id?: string;\n  nextIdx: number;\n  path: string;\n  type: typeof LayoutActionType.SWITCH_TAB;\n};\n\nexport type TearoutAction = {\n  path?: string;\n  type: typeof LayoutActionType.TEAROUT;\n};\n\nexport type LayoutReducerAction =\n  | AddAction\n  | DragDropAction\n  | LayoutResizeAction\n  | MaximizeAction\n  | MinimizeAction\n  | MoveChildAction\n  | RemoveAction\n  | ReplaceAction\n  | RestoreAction\n  | SetPropAction\n  | SetPropsAction\n  | SetTitleAction\n  | SplitterResizeAction\n  | SwitchTabAction;\n\nexport type MousedownViewAction = {\n  preDragActivity?: any;\n  index?: number;\n  type: \"mousedown\";\n};\n\nexport type DragStartAction = {\n  payload?: ReactElement;\n  dragContainerPath?: string;\n  dragElement?: HTMLElement;\n  dragRect: DragDropRect;\n  dropTargets?: string[];\n  evt: MouseEvent;\n  instructions?: DragInstructions;\n  path: string;\n  type: typeof LayoutActionType.DRAG_START;\n};\n\nexport type LayoutLevelChange =\n  | \"switch-active-tab\"\n  | \"edit-feature-title\"\n  | \"save-feature-props\"\n  | \"resize-component\"\n  | \"remove-component\"\n  | \"drag-drop-operation\";\n\nexport type ApplicationLevelChange =\n  | \"switch-active-layout\"\n  | \"open-layout\"\n  | \"close-layout\"\n  | \"rename-layout\"\n  | \"resize-application-chrome\";\n\nexport type LayoutChangeReason = LayoutLevelChange | ApplicationLevelChange;\n\nexport type LayoutChangeHandler = (\n  layout: LayoutJSON,\n  layoutChangeReason: LayoutChangeReason\n) => void;\n\nexport const isApplicationLevelChange = (\n  layoutChangeReason: LayoutChangeReason\n): layoutChangeReason is ApplicationLevelChange =>\n  [\n    \"switch-active-layout\",\n    \"open-layout\",\n    \"close-layout\",\n    \"rename-layout\",\n  ].includes(layoutChangeReason);\n\nexport const isLayoutLevelChange = (\n  layoutChangeReason: LayoutChangeReason\n): layoutChangeReason is LayoutLevelChange =>\n  [\n    \"switch-active-tab\",\n    \"edit-feature-title\",\n    \"save-feature-props\",\n    \"remove-component\",\n    \"resize-component\",\n    \"drag-drop-operation\",\n  ].includes(layoutChangeReason);\n"],"names":[],"mappings":";;AA2DO,MAAM,gBAAmB,GAAA;AAAA,EAC9B,GAAK,EAAA,KAAA;AAAA,EACL,UAAY,EAAA,YAAA;AAAA,EACZ,SAAW,EAAA,WAAA;AAAA,EACX,aAAe,EAAA,eAAA;AAAA,EACf,QAAU,EAAA,UAAA;AAAA,EACV,QAAU,EAAA,UAAA;AAAA,EACV,UAAY,EAAA,YAAA;AAAA,EACZ,KAAO,EAAA,OAAA;AAAA,EACP,MAAQ,EAAA,QAAA;AAAA,EACR,OAAS,EAAA,SAAA;AAAA,EACT,OAAS,EAAA,SAAA;AAAA,EACT,QAAU,EAAA,UAAA;AAAA,EACV,SAAW,EAAA,WAAA;AAAA,EACX,SAAW,EAAA,WAAA;AAAA,EACX,eAAiB,EAAA,iBAAA;AAAA,EACjB,UAAY,EAAA,YAAA;AAAA,EACZ,OAAS,EAAA,SAAA;AACX,EAAA;AAyJa,MAAA,wBAAA,GAA2B,CACtC,kBAEA,KAAA;AAAA,EACE,sBAAA;AAAA,EACA,aAAA;AAAA,EACA,cAAA;AAAA,EACA,eAAA;AACF,CAAA,CAAE,SAAS,kBAAkB,EAAA;AAElB,MAAA,mBAAA,GAAsB,CACjC,kBAEA,KAAA;AAAA,EACE,mBAAA;AAAA,EACA,oBAAA;AAAA,EACA,oBAAA;AAAA,EACA,kBAAA;AAAA,EACA,kBAAA;AAAA,EACA,qBAAA;AACF,CAAA,CAAE,SAAS,kBAAkB;;;;;;"}

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var viewCss = ".vuuView {\n  border-color: var(--vuuView-borderColor, var(--salt-container-primary-borderColor));\n  border-width: var(--vuuView-borderWidth, 1px);\n  border-style: var(--vuuView-borderStyle, none);\n\n  display: flex;\n  flex-direction: column;\n  margin: var(--vuuView-margin, 0px);\n  min-height: 50px;\n  min-width: 50px;\n  outline: none;\n  overflow: hidden;\n  position: relative;\n}\n\n.vuuView.focus-visible:after {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: dotted cornflowerblue 2px;\n}\n\n.vuuView.dragging {\n  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);\n}\n\n.vuuView-main {\n  /* height: var(--view-content-height);\n  width: var(--view-content-width); */\n  display: flex;\n  flex-direction: var(--vuuView-flexDirection, column);\n  flex-wrap: var(--vuuView-flex-wrap, nowrap);\n  flex: 1;\n  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 + .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";
+var viewCss = ".vuuView {\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\n  &.vuuHighlighted {\n    --vuuView-borderStyle: dashed;\n    --vuuView-borderColor: var(--salt-container-primary-borderColor);\n  }\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 + .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.js

@@ -29,6 +29,7 @@ const getProps = (state, props) => {
 const View = React.forwardRef(function View2(props, forwardedRef) {
   const {
     Header: Header$1 = Header.Header,
+    allowRename,
     children,
     className,
     collapsed,
@@ -139,6 +140,7 @@ const View = React.forwardRef(function View2(props, forwardedRef) {
           Header$1,
           {
             ...headerProps,
+            allowRename,
             collapsed,
             contributions,
             expanded,

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

@@ -1 +1 @@
-{"version":3,"file":"View.js","sources":["../../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 { ViewContext, ViewContextAPI } from \"../layout-view-actions\";\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    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    orientation = \"horizontal\",\n    path = dataPath,\n    resize = \"responsive\",\n    resizeable = dataResizeable,\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  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    loadSession,\n    onConfigChange,\n    onEditTitle,\n    purge,\n    restoredState,\n    save,\n    saveSession,\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      loadSession,\n      onConfigChange,\n      purge,\n      save,\n      saveSession,\n      setComponentProps,\n    }),\n    [\n      dispatchViewAction,\n      id,\n      load,\n      loadSession,\n      onConfigChange,\n      path,\n      purge,\n      save,\n      saveSession,\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            collapsed={collapsed}\n            contributions={contributions}\n            expanded={expanded}\n            closeable={closeable}\n            onEditTitle={onEditTitle}\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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"}
+{"version":3,"file":"View.js","sources":["../../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 { ViewContext, ViewContextAPI } from \"../layout-view-actions\";\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    orientation = \"horizontal\",\n    path = dataPath,\n    resize = \"responsive\",\n    resizeable = dataResizeable,\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  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    loadSession,\n    onConfigChange,\n    onEditTitle,\n    purge,\n    restoredState,\n    save,\n    saveSession,\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      loadSession,\n      onConfigChange,\n      purge,\n      save,\n      saveSession,\n      setComponentProps,\n    }),\n    [\n      dispatchViewAction,\n      id,\n      load,\n      loadSession,\n      onConfigChange,\n      path,\n      purge,\n      save,\n      saveSession,\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            onEditTitle={onEditTitle}\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/useViewBroadcastChannel.js

@@ -0,0 +1,35 @@
+'use strict';
+
+var React = require('react');
+
+const useViewBroadcastChannel = (id, rootRef) => {
+  const broadcastChannelRef = React.useRef();
+  React.useEffect(() => {
+    console.log(`useViewActionChannnel create Channel ${id}`);
+    const broadcastChannel = new BroadcastChannel("vuu");
+    broadcastChannel.onmessage = (evt) => {
+      if (evt.data.targetId === id) {
+        switch (evt.data.type) {
+          case "highlight-on":
+            rootRef.current?.classList.add("vuuHighlighted");
+            break;
+          case "highlight-off":
+            rootRef.current?.classList.remove("vuuHighlighted");
+            break;
+        }
+      }
+    };
+    broadcastChannelRef.current = broadcastChannel;
+    return () => {
+      broadcastChannel.close();
+      broadcastChannelRef.current = void 0;
+    };
+  }, [id]);
+  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":["../../src/layout-view/useViewBroadcastChannel.ts"],"sourcesContent":["import { VuuBroadcastChannel } from \"packages/vuu-utils/src\";\nimport { RefObject, useCallback, useEffect, useRef } from \"react\";\n\nexport interface ViewBroadcastMessage {\n  targetId: string;\n  type: \"highlight-on\" | \"highlight-off\";\n}\n\nexport const useViewBroadcastChannel = (\n  id: string,\n  rootRef: RefObject<HTMLDivElement>\n) => {\n  const broadcastChannelRef =\n    useRef<VuuBroadcastChannel<ViewBroadcastMessage>>();\n\n  useEffect(() => {\n    console.log(`useViewActionChannnel create Channel ${id}`);\n    const broadcastChannel: VuuBroadcastChannel<ViewBroadcastMessage> =\n      new BroadcastChannel(\"vuu\");\n    broadcastChannel.onmessage = (evt) => {\n      if (evt.data.targetId === id) {\n        switch (evt.data.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        }\n      }\n    };\n    broadcastChannelRef.current = broadcastChannel;\n    return () => {\n      broadcastChannel.close();\n      broadcastChannelRef.current = undefined;\n    };\n  }, [id]);\n\n  const sendMessage = useCallback((message: ViewBroadcastMessage) => {\n    broadcastChannelRef.current?.postMessage(message);\n  }, []);\n\n  return sendMessage;\n};\n"],"names":["useRef","useEffect","useCallback"],"mappings":";;;;AAQa,MAAA,uBAAA,GAA0B,CACrC,EAAA,EACA,OACG,KAAA;AACH,EAAA,MAAM,sBACJA,YAAkD,EAAA,CAAA;AAEpD,EAAAC,eAAA,CAAU,MAAM;AACd,IAAQ,OAAA,CAAA,GAAA,CAAI,CAAwC,qCAAA,EAAA,EAAE,CAAE,CAAA,CAAA,CAAA;AACxD,IAAM,MAAA,gBAAA,GACJ,IAAI,gBAAA,CAAiB,KAAK,CAAA,CAAA;AAC5B,IAAiB,gBAAA,CAAA,SAAA,GAAY,CAAC,GAAQ,KAAA;AACpC,MAAI,IAAA,GAAA,CAAI,IAAK,CAAA,QAAA,KAAa,EAAI,EAAA;AAC5B,QAAQ,QAAA,GAAA,CAAI,KAAK,IAAM;AAAA,UACrB,KAAK,cAAA;AACH,YAAQ,OAAA,CAAA,OAAA,EAAS,SAAU,CAAA,GAAA,CAAI,gBAAgB,CAAA,CAAA;AAC/C,YAAA,MAAA;AAAA,UACF,KAAK,eAAA;AACH,YAAQ,OAAA,CAAA,OAAA,EAAS,SAAU,CAAA,MAAA,CAAO,gBAAgB,CAAA,CAAA;AAClD,YAAA,MAAA;AAAA,SACJ;AAAA,OACF;AAAA,KACF,CAAA;AACA,IAAA,mBAAA,CAAoB,OAAU,GAAA,gBAAA,CAAA;AAC9B,IAAA,OAAO,MAAM;AACX,MAAA,gBAAA,CAAiB,KAAM,EAAA,CAAA;AACvB,MAAA,mBAAA,CAAoB,OAAU,GAAA,KAAA,CAAA,CAAA;AAAA,KAChC,CAAA;AAAA,GACF,EAAG,CAAC,EAAE,CAAC,CAAA,CAAA;AAEP,EAAM,MAAA,WAAA,GAAcC,iBAAY,CAAA,CAAC,OAAkC,KAAA;AACjE,IAAoB,mBAAA,CAAA,OAAA,EAAS,YAAY,OAAO,CAAA,CAAA;AAAA,GAClD,EAAG,EAAE,CAAA,CAAA;AAEL,EAAO,OAAA,WAAA,CAAA;AACT;;;;"}

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

@@ -4,6 +4,7 @@ var React = require('react');
 var LayoutProvider = require('../layout-provider/LayoutProvider.js');
 require('../layout-provider/LayoutProviderContext.js');
 var usePersistentState = require('../use-persistent-state.js');
+var useViewBroadcastChannel = require('../layout-view/useViewBroadcastChannel.js');
 
 const useViewActionDispatcher = (id, root, viewPath, dropTargets) => {
   const { loadSessionState, purgeSessionState, purgeState, saveSessionState } = usePersistentState.usePersistentState();
@@ -11,6 +12,7 @@ const useViewActionDispatcher = (id, root, viewPath, dropTargets) => {
     loadSessionState(id, "contributions") ?? []
   );
   const dispatchLayoutAction = LayoutProvider.useLayoutProviderDispatch();
+  const sendMessage = useViewBroadcastChannel.useViewBroadcastChannel(id, root);
   const updateContributions = React.useCallback(
     (location, content) => {
       const updatedContributions = contributions.concat([
@@ -82,6 +84,9 @@ const useViewActionDispatcher = (id, root, viewPath, dropTargets) => {
             path: action.path,
             query: action.query
           });
+        case "broadcast-message":
+          sendMessage(action.message);
+          break;
         default: {
           return void 0;
         }
@@ -93,7 +98,8 @@ const useViewActionDispatcher = (id, root, viewPath, dropTargets) => {
       handleRemove,
       handleMouseDown,
       updateContributions,
-      clearContributions
+      clearContributions,
+      sendMessage
     ]
   );
   return [dispatchAction, contributions];

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

@@ -1 +1 @@
-{"version":3,"file":"useViewActionDispatcher.js","sources":["../../src/layout-view-actions/useViewActionDispatcher.ts"],"sourcesContent":["import { DataSource } from \"@vuu-ui/vuu-data-types\";\nimport {\n  ReactElement,\n  RefObject,\n  SyntheticEvent,\n  useCallback,\n  useState,\n} from \"react\";\nimport { useLayoutProviderDispatch } from \"../layout-provider\";\nimport { DragStartAction } from \"../layout-reducer\";\nimport { usePersistentState } from \"../use-persistent-state\";\nimport { QueryReponse, ViewDispatch } from \"./ViewContext\";\nimport type { ViewAction } from \"../layout-view\";\n\nexport type ContributionLocation = \"post-title\" | \"pre-title\";\n\nexport type Contribution = {\n  index?: number;\n  location?: ContributionLocation;\n  content: ReactElement;\n};\n\nexport const useViewActionDispatcher = (\n  id: string,\n  root: RefObject<HTMLDivElement>,\n  viewPath?: string,\n  dropTargets?: string[]\n): [ViewDispatch, Contribution[] | undefined] => {\n  const { loadSessionState, purgeSessionState, purgeState, saveSessionState } =\n    usePersistentState();\n\n  const [contributions, setContributions] = useState<Contribution[]>(\n    loadSessionState(id, \"contributions\") ?? []\n  );\n  const dispatchLayoutAction = useLayoutProviderDispatch();\n  const updateContributions = useCallback(\n    (location: ContributionLocation, content: ReactElement) => {\n      const updatedContributions = contributions.concat([\n        { location, content },\n      ]);\n      saveSessionState(id, \"contributions\", updatedContributions);\n      setContributions(updatedContributions);\n    },\n    [contributions, id, saveSessionState]\n  );\n\n  const clearContributions = useCallback(() => {\n    purgeSessionState(id, \"contributions\");\n    setContributions([]);\n  }, [id, purgeSessionState]);\n\n  const handleRemove = useCallback(() => {\n    const ds = loadSessionState(id, \"data-source\") as DataSource;\n    if (ds) {\n      ds.unsubscribe();\n    }\n    purgeSessionState(id);\n    purgeState(id);\n    dispatchLayoutAction({ type: \"remove\", path: viewPath });\n  }, [\n    dispatchLayoutAction,\n    id,\n    loadSessionState,\n    purgeSessionState,\n    purgeState,\n    viewPath,\n  ]);\n\n  const handleMouseDown = useCallback(\n    async (evt, index, preDragActivity): Promise<boolean> => {\n      evt.stopPropagation();\n      const dragRect = root.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    [root, dispatchLayoutAction, viewPath, dropTargets]\n  );\n\n  const dispatchAction = useCallback(\n    async <A extends ViewAction = ViewAction>(\n      action: A,\n      evt?: SyntheticEvent\n    ): Promise<boolean | QueryReponse | void> => {\n      const { type } = action;\n      switch (type) {\n        case \"maximize\":\n        case \"minimize\":\n        case \"restore\":\n          return dispatchLayoutAction({ type, path: action.path ?? viewPath });\n        case \"remove\":\n          return handleRemove();\n        case \"mousedown\":\n          return handleMouseDown(evt, action.index, action.preDragActivity);\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          return;\n        default: {\n          return undefined;\n        }\n      }\n    },\n    [\n      dispatchLayoutAction,\n      viewPath,\n      handleRemove,\n      handleMouseDown,\n      updateContributions,\n      clearContributions,\n    ]\n  );\n\n  return [dispatchAction, contributions];\n};\n"],"names":["usePersistentState","useState","useLayoutProviderDispatch","useCallback"],"mappings":"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"}
+{"version":3,"file":"useViewActionDispatcher.js","sources":["../../src/layout-view-actions/useViewActionDispatcher.ts"],"sourcesContent":["import { DataSource } from \"@vuu-ui/vuu-data-types\";\nimport {\n  ReactElement,\n  RefObject,\n  SyntheticEvent,\n  useCallback,\n  useState,\n} from \"react\";\nimport { useLayoutProviderDispatch } from \"../layout-provider\";\nimport { DragStartAction } from \"../layout-reducer\";\nimport { usePersistentState } from \"../use-persistent-state\";\nimport { QueryReponse, ViewDispatch } from \"./ViewContext\";\nimport type {\n  Contribution,\n  ContributionLocation,\n  ViewAction,\n} from \"../layout-view\";\nimport { useViewBroadcastChannel } from \"../layout-view/useViewBroadcastChannel\";\n\nexport const useViewActionDispatcher = (\n  id: string,\n  root: RefObject<HTMLDivElement>,\n  viewPath?: string,\n  dropTargets?: string[]\n): [ViewDispatch, Contribution[] | undefined] => {\n  const { loadSessionState, purgeSessionState, purgeState, saveSessionState } =\n    usePersistentState();\n\n  const [contributions, setContributions] = useState<Contribution[]>(\n    loadSessionState(id, \"contributions\") ?? []\n  );\n  const dispatchLayoutAction = useLayoutProviderDispatch();\n  const sendMessage = useViewBroadcastChannel(id, root);\n  const updateContributions = useCallback(\n    (location: ContributionLocation, content: ReactElement) => {\n      const updatedContributions = contributions.concat([\n        { location, content },\n      ]);\n      saveSessionState(id, \"contributions\", updatedContributions);\n      setContributions(updatedContributions);\n    },\n    [contributions, id, saveSessionState]\n  );\n\n  const clearContributions = useCallback(() => {\n    purgeSessionState(id, \"contributions\");\n    setContributions([]);\n  }, [id, purgeSessionState]);\n\n  const handleRemove = useCallback(() => {\n    const ds = loadSessionState(id, \"data-source\") as DataSource;\n    if (ds) {\n      ds.unsubscribe();\n    }\n    purgeSessionState(id);\n    purgeState(id);\n    dispatchLayoutAction({ type: \"remove\", path: viewPath });\n  }, [\n    dispatchLayoutAction,\n    id,\n    loadSessionState,\n    purgeSessionState,\n    purgeState,\n    viewPath,\n  ]);\n\n  const handleMouseDown = useCallback(\n    async (evt, index, preDragActivity): Promise<boolean> => {\n      evt.stopPropagation();\n      const dragRect = root.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    [root, dispatchLayoutAction, viewPath, dropTargets]\n  );\n\n  const dispatchAction = useCallback(\n    async <A extends ViewAction = ViewAction>(\n      action: A,\n      evt?: SyntheticEvent\n    ): Promise<boolean | QueryReponse | void> => {\n      const { type } = action;\n      switch (type) {\n        case \"maximize\":\n        case \"minimize\":\n        case \"restore\":\n          return dispatchLayoutAction({ type, path: action.path ?? viewPath });\n        case \"remove\":\n          return handleRemove();\n        case \"mousedown\":\n          return handleMouseDown(evt, action.index, action.preDragActivity);\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","useState","useLayoutProviderDispatch","useViewBroadcastChannel","useCallback"],"mappings":"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"}

package/cjs/palette/Palette.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var paletteCss = ".vuuPalette {\n  --vuu-svg-draggable: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 17\"><path d=\"M12.6666 6.5H3.33329C2.96663 6.5 2.66663 6.8 2.66663 7.16667C2.66663 7.53333 2.96663 7.83333 3.33329 7.83333H12.6666C13.0333 7.83333 13.3333 7.53333 13.3333 7.16667C13.3333 6.8 13.0333 6.5 12.6666 6.5ZM3.33329 10.5H12.6666C13.0333 10.5 13.3333 10.2 13.3333 9.83333C13.3333 9.46667 13.0333 9.16667 12.6666 9.16667H3.33329C2.96663 9.16667 2.66663 9.46667 2.66663 9.83333C2.66663 10.2 2.96663 10.5 3.33329 10.5Z\" /></svg>');\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  padding-left: 12px;\n  font-size: 12px;\n  font-weight: 600;\n  gap: var(--salt-spacing-200);\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";
+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/esm/layout-action.js

@@ -15,10 +15,7 @@ const Action = {
   REPLACE: "replace",
   RESTORE: "restore",
   SAVE: "save",
-  SET_TITLE: "set-title",
-  SPLITTER_RESIZE: "splitter-resize",
-  SWITCH_TAB: "switch-tab",
-  TEAR_OUT: "tear-out"
+  SPLITTER_RESIZE: "splitter-resize"
 };
 
 export { Action };

package/esm/layout-action.js.map

@@ -1 +1 @@
-{"version":3,"file":"layout-action.js","sources":["../src/layout-action.ts"],"sourcesContent":["export const Action = {\n  ADD: \"add\",\n  BLUR: \"blur\",\n  BLUR_SPLITTER: \"blur-splitter\",\n  DRAG_START: \"drag-start\",\n  DRAG_STARTED: \"drag-started\",\n  DRAG_DROP: \"drag-drop\",\n  FOCUS: \"focus\",\n  FOCUS_SPLITTER: \"focus-splitter\",\n  INITIALIZE: \"initialize\",\n  LAYOUT_RESIZE: \"layout-resize\",\n  MAXIMIZE: \"maximize\",\n  MINIMIZE: \"minimize\",\n  REMOVE: \"remove\",\n  REPLACE: \"replace\",\n  RESTORE: \"restore\",\n  SAVE: \"save\",\n  SET_TITLE: \"set-title\",\n  SPLITTER_RESIZE: \"splitter-resize\",\n  SWITCH_TAB: \"switch-tab\",\n  TEAR_OUT: \"tear-out\",\n};\n"],"names":[],"mappings":"AAAO,MAAM,MAAS,GAAA;AAAA,EACpB,GAAK,EAAA,KAAA;AAAA,EACL,IAAM,EAAA,MAAA;AAAA,EACN,aAAe,EAAA,eAAA;AAAA,EACf,UAAY,EAAA,YAAA;AAAA,EACZ,YAAc,EAAA,cAAA;AAAA,EACd,SAAW,EAAA,WAAA;AAAA,EACX,KAAO,EAAA,OAAA;AAAA,EACP,cAAgB,EAAA,gBAAA;AAAA,EAChB,UAAY,EAAA,YAAA;AAAA,EACZ,aAAe,EAAA,eAAA;AAAA,EACf,QAAU,EAAA,UAAA;AAAA,EACV,QAAU,EAAA,UAAA;AAAA,EACV,MAAQ,EAAA,QAAA;AAAA,EACR,OAAS,EAAA,SAAA;AAAA,EACT,OAAS,EAAA,SAAA;AAAA,EACT,IAAM,EAAA,MAAA;AAAA,EACN,SAAW,EAAA,WAAA;AAAA,EACX,eAAiB,EAAA,iBAAA;AAAA,EACjB,UAAY,EAAA,YAAA;AAAA,EACZ,QAAU,EAAA,UAAA;AACZ;;;;"}
+{"version":3,"file":"layout-action.js","sources":["../src/layout-action.ts"],"sourcesContent":["export const Action = {\n  ADD: \"add\",\n  BLUR: \"blur\",\n  BLUR_SPLITTER: \"blur-splitter\",\n  DRAG_START: \"drag-start\",\n  DRAG_STARTED: \"drag-started\",\n  DRAG_DROP: \"drag-drop\",\n  FOCUS: \"focus\",\n  FOCUS_SPLITTER: \"focus-splitter\",\n  INITIALIZE: \"initialize\",\n  LAYOUT_RESIZE: \"layout-resize\",\n  MAXIMIZE: \"maximize\",\n  MINIMIZE: \"minimize\",\n  REMOVE: \"remove\",\n  REPLACE: \"replace\",\n  RESTORE: \"restore\",\n  SAVE: \"save\",\n  SPLITTER_RESIZE: \"splitter-resize\",\n};\n"],"names":[],"mappings":"AAAO,MAAM,MAAS,GAAA;AAAA,EACpB,GAAK,EAAA,KAAA;AAAA,EACL,IAAM,EAAA,MAAA;AAAA,EACN,aAAe,EAAA,eAAA;AAAA,EACf,UAAY,EAAA,YAAA;AAAA,EACZ,YAAc,EAAA,cAAA;AAAA,EACd,SAAW,EAAA,WAAA;AAAA,EACX,KAAO,EAAA,OAAA;AAAA,EACP,cAAgB,EAAA,gBAAA;AAAA,EAChB,UAAY,EAAA,YAAA;AAAA,EACZ,aAAe,EAAA,eAAA;AAAA,EACf,QAAU,EAAA,UAAA;AAAA,EACV,QAAU,EAAA,UAAA;AAAA,EACV,MAAQ,EAAA,QAAA;AAAA,EACR,OAAS,EAAA,SAAA;AAAA,EACT,OAAS,EAAA,SAAA;AAAA,EACT,IAAM,EAAA,MAAA;AAAA,EACN,eAAiB,EAAA,iBAAA;AACnB;;;;"}

package/esm/layout-header/Header.css.js

@@ -1,4 +1,4 @@
-var headerCss = ".vuuHeader {\n  --saltButton-height: 24px;\n  --saltButton-width: 24px;\n}\n\n.salt-density-high .vuuHeader {\n--saltToolbarField-marginTop: 0;\n}\n\n";
+var headerCss = ".vuuHeader {\n  --saltButton-height: 24px;\n  --saltButton-width: 24px;\n\n  padding: 0 var(--salt-spacing-100);\n\n  [data-align=\"end\"] {\n    margin-left: auto;\n  }\n  [data-align=\"end\"] ~ [data-align=\"end\"] {\n    margin-left: 0;\n  }\n\n  &:hover {\n    .vuuHeader-edit {\n      visibility: visible;\n    }\n  }\n}\n\n.vuuHeader-edit {\n  visibility: hidden;\n}\n\n.salt-density-high .vuuHeader {\n  --saltToolbarField-marginTop: 0;\n}\n";
 
 export { headerCss as default };
 //# sourceMappingURL=Header.css.js.map

package/esm/layout-header/Header.js

@@ -3,7 +3,7 @@ import { EditableLabel, IconButton } from '@vuu-ui/vuu-ui-controls';
 import cx from 'clsx';
 import { useComponentCssInjection } from '@salt-ds/styles';
 import { useWindow } from '@salt-ds/window';
-import { useRef, useState, cloneElement } from 'react';
+import { useRef, useState, useCallback, cloneElement } from 'react';
 import '@vuu-ui/vuu-utils';
 import '../layout-provider/LayoutProviderContext.js';
 import '../drag-drop/Draggable.js';
@@ -13,6 +13,7 @@ import headerCss from './Header.css.js';
 
 const classBase = "vuuHeader";
 const Header = ({
+  allowRename = false,
   className: classNameProp,
   contributions,
   collapsed,
@@ -33,17 +34,18 @@ const Header = ({
   const [editing, setEditing] = useState(false);
   const viewDispatch = useViewDispatch();
   const handleClose = (evt) => viewDispatch?.({ type: "remove" }, evt);
-  const handleTitleMouseDown = () => {
+  const focusTitle = useCallback(() => {
     labelFieldRef.current?.focus();
-  };
+  }, []);
+  const handleClickEdit = useCallback(() => {
+    focusTitle();
+    setEditing((isEditing) => !isEditing);
+  }, [focusTitle]);
   const handleButtonMouseDown = (evt) => {
     evt.stopPropagation();
   };
   const orientation = collapsed || orientationProp;
   const className = cx(classBase, classNameProp, `${classBase}-${orientation}`);
-  const handleEnterEditMode = () => {
-    setEditing(true);
-  };
   const handleTitleKeyDown = (evt) => {
     if (evt.key === "Enter") {
       setEditing(true);
@@ -86,8 +88,7 @@ const Header = ({
         editing,
         value,
         onChange: setValue,
-        onMouseDownCapture: handleTitleMouseDown,
-        onEnterEditMode: handleEnterEditMode,
+        onMouseDownCapture: focusTitle,
         onExitEditMode: handleExitEditMode,
         onKeyDown: handleTitleKeyDown,
         ref: labelFieldRef,
@@ -96,6 +97,19 @@ const Header = ({
       "title"
     )
   );
+  allowRename && toolbarItems.push(
+    /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        className: `${classBase}-edit`,
+        icon: "edit",
+        onClick: handleClickEdit,
+        onMouseDown: handleButtonMouseDown,
+        variant: "secondary"
+      },
+      "edit-button"
+    )
+  );
   closeable && actionButtons.push(
     /* @__PURE__ */ jsx(
       IconButton,
@@ -110,10 +124,10 @@ const Header = ({
     )
   );
   postTitleContributedItems.length > 0 && toolbarItems.push(
-    /* @__PURE__ */ jsx("div", { className: "vuuTooltrayProxy", "data-align": "end", children: postTitleContributedItems }, "contributions")
+    /* @__PURE__ */ jsx("div", { "data-align": "end", children: postTitleContributedItems }, "contributions")
   );
   actionButtons.length > 0 && toolbarItems.push(
-    /* @__PURE__ */ jsx("div", { className: "vuuTooltrayProxy", "data-align": "end", children: actionButtons }, "actions")
+    /* @__PURE__ */ jsx("div", { "data-align": "end", children: actionButtons }, "actions")
   );
   return /* @__PURE__ */ jsx(
     "div",