@hitachivantara/uikit-react-lab 5.35.12 → 5.36.1

package/dist/cjs/Canvas/Panel/Panel.cjs

@@ -0,0 +1,79 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const uikitReactCore = require("@hitachivantara/uikit-react-core");
+const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
+const Panel_styles = require("./Panel.styles.cjs");
+const Tabs = require("../Tabs/Tabs.cjs");
+const DEFAULT_LABELS = {
+  open: "Open",
+  close: "Close"
+};
+const HvCanvasPanel = (props) => {
+  const {
+    open: openProp,
+    defaultOpened = false,
+    tabs,
+    onToggle,
+    onTabChange,
+    labels: labelsProp,
+    className,
+    children,
+    classes: classesProp,
+    ...others
+  } = uikitReactCore.useDefaultProps("HvCanvasPanel", props);
+  const { classes, cx } = Panel_styles.useClasses(classesProp);
+  const labels = uikitReactCore.useLabels(DEFAULT_LABELS, labelsProp);
+  const [open, setOpen] = uikitReactCore.useControlled(openProp, Boolean(defaultOpened));
+  const handleTogglePanel = (event) => {
+    setOpen((prev) => !prev);
+    onToggle?.(event, !open);
+  };
+  const handleTabChange = (event, tabId) => {
+    onTabChange?.(event, tabId);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cx(classes.root, className, {
+          [classes.open]: open,
+          [classes.close]: !open
+        }),
+        ...others,
+        children: [
+          tabs && /* @__PURE__ */ jsxRuntime.jsx(
+            Tabs.HvCanvasTabs,
+            {
+              className: classes.tabs,
+              tabs,
+              onChange: handleTabChange
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.content, children })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cx(classes.handle, {
+          [classes.handleOpen]: open,
+          [classes.handleClose]: !open
+        }),
+        onClick: handleTogglePanel,
+        role: "button",
+        tabIndex: 0,
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            handleTogglePanel(e);
+          }
+        },
+        "aria-label": open ? labels.close : labels.open,
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.handleButton, children: open ? /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Start, { color: ["primary"] }) : /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.End, { color: ["primary"] }) })
+      }
+    )
+  ] });
+};
+exports.canvasPanelClasses = Panel_styles.staticClasses;
+exports.HvCanvasPanel = HvCanvasPanel;

package/dist/cjs/Canvas/Panel/Panel.styles.cjs

@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const uikitReactCore = require("@hitachivantara/uikit-react-core");
+const uikitStyles = require("@hitachivantara/uikit-styles");
+const { staticClasses, useClasses } = uikitReactCore.createClasses("HvCanvasPanel", {
+  root: {
+    height: "100%",
+    position: "absolute",
+    top: 0,
+    left: 0,
+    boxShadow: "4px 0px 8px -4px color-mix(in srgb, #414141 12%, transparent)",
+    zIndex: uikitStyles.theme.zIndices.overlay,
+    backgroundColor: "transparent",
+    transition: "visibility 0.3s ease, width 0.3s ease",
+    overflow: "hidden",
+    "&$open": {
+      width: 320,
+      visibility: "visible"
+    },
+    "&$close": {
+      width: 0,
+      visibility: "hidden"
+    }
+  },
+  tabs: {},
+  content: {
+    backgroundColor: uikitStyles.theme.colors.atmo1,
+    height: "100%",
+    padding: uikitStyles.theme.space.md
+  },
+  handle: {
+    height: 172,
+    width: 35,
+    display: "flex",
+    justifyContent: "center",
+    zIndex: uikitStyles.theme.zIndices.overlay,
+    boxShadow: "4px 0px 8px -4px color-mix(in srgb, #414141 12%, transparent)",
+    backgroundColor: uikitStyles.theme.colors.atmo1,
+    borderRadius: `0 ${uikitStyles.theme.radii.round} ${uikitStyles.theme.radii.round} 0`,
+    position: "absolute",
+    transition: "left 0.3s ease",
+    top: "calc(50% - 86px)",
+    "&$handleOpen": {
+      left: 320
+    },
+    "&$handleClose": {
+      left: 0
+    },
+    "&:hover": {
+      cursor: "pointer"
+    },
+    "&:focus-visible": {
+      ...uikitReactCore.outlineStyles
+    }
+  },
+  handleButton: {
+    top: "calc(50% - 16px)",
+    position: "absolute"
+  },
+  open: {},
+  close: {},
+  handleOpen: {},
+  handleClose: {}
+});
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;

package/dist/cjs/Canvas/Tabs/Tabs.cjs

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const React = require("react");
+const Tab = require("@mui/base/Tab");
+const Tabs = require("@mui/base/Tabs");
+const TabsList = require("@mui/base/TabsList");
+const uikitReactCore = require("@hitachivantara/uikit-react-core");
+const Tabs_styles = require("./Tabs.styles.cjs");
+const HvCanvasTabs = (props) => {
+  const {
+    tabs,
+    onChange,
+    className,
+    classes: classesProp,
+    ...others
+  } = uikitReactCore.useDefaultProps("HvCanvasTabs", props);
+  const { classes, cx } = Tabs_styles.useClasses(classesProp);
+  const [selectedTab, setSelectedTab] = React.useState(tabs?.[0]?.id || "none");
+  const handleTabChange = (event, value) => {
+    onChange?.(event, value);
+    setSelectedTab(value);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Tabs.Tabs,
+    {
+      value: selectedTab,
+      onChange: handleTabChange,
+      className: cx(classes.root, className),
+      selectionFollowsFocus: true,
+      ...others,
+      children: /* @__PURE__ */ jsxRuntime.jsx(TabsList.TabsList, { className: classes.list, children: tabs?.map((tab) => /* @__PURE__ */ jsxRuntime.jsx(
+        Tab.Tab,
+        {
+          value: tab.id,
+          className: cx(classes.tab, {
+            [classes.selected]: tab.id === selectedTab
+          }),
+          tabIndex: 0,
+          children: tab.content
+        },
+        tab.id
+      )) })
+    }
+  );
+};
+exports.canvasTabsClasses = Tabs_styles.staticClasses;
+exports.HvCanvasTabs = HvCanvasTabs;

package/dist/cjs/Canvas/Tabs/Tabs.styles.cjs

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const uikitReactCore = require("@hitachivantara/uikit-react-core");
+const { staticClasses, useClasses } = uikitReactCore.createClasses("HvCanvasTabs", {
+  root: {
+    height: 48,
+    display: "flex"
+  },
+  list: {
+    display: "flex",
+    width: "100%"
+  },
+  tab: {
+    height: "100%",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flex: 1,
+    borderRadius: "16px 16px 0 0",
+    backgroundColor: uikitReactCore.theme.colors.atmo2,
+    color: uikitReactCore.theme.colors.secondary_60,
+    overflow: "hidden",
+    width: "100%",
+    "& svg .color0": {
+      fill: "currentcolor"
+    },
+    "&:hover": {
+      cursor: "pointer"
+    },
+    "&:focus": {
+      backgroundColor: uikitReactCore.theme.colors.atmo1
+    },
+    "&$selected": {
+      backgroundColor: uikitReactCore.theme.colors.atmo1,
+      ...uikitReactCore.theme.typography.label
+    },
+    "&:focus-visible": {
+      ...uikitReactCore.outlineStyles
+    }
+  },
+  selected: {}
+});
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;

package/dist/cjs/Canvas/Toolbar/Toolbar.cjs

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const uikitReactCore = require("@hitachivantara/uikit-react-core");
+const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
+const Toolbar_styles = require("./Toolbar.styles.cjs");
+const DEFAULT_LABELS = {
+  back: "Back"
+};
+const HvCanvasToolbar = (props) => {
+  const {
+    title: titleProp,
+    backButton,
+    labels: labelsProp,
+    className,
+    children,
+    backButtonProps,
+    classes: classesProp,
+    ...others
+  } = uikitReactCore.useDefaultProps("HvCanvasToolbar", props);
+  const { classes, cx } = Toolbar_styles.useClasses(classesProp);
+  const labels = uikitReactCore.useLabels(DEFAULT_LABELS, labelsProp);
+  const title = typeof titleProp === "string" ? /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, { variant: "title4", children: titleProp }) : titleProp;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx(classes.root, className), ...others, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.back, children: backButton ?? /* @__PURE__ */ jsxRuntime.jsx(
+      uikitReactCore.HvIconButton,
+      {
+        title: labels.back,
+        variant: "primaryGhost",
+        ...backButtonProps,
+        children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Previous, {})
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.title, children: title }),
+    children && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.actions, children })
+  ] });
+};
+exports.canvasToolbarClasses = Toolbar_styles.staticClasses;
+exports.HvCanvasToolbar = HvCanvasToolbar;

package/dist/cjs/Canvas/Toolbar/Toolbar.styles.cjs

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const uikitReactCore = require("@hitachivantara/uikit-react-core");
+const uikitStyles = require("@hitachivantara/uikit-styles");
+const { staticClasses, useClasses } = uikitReactCore.createClasses("HvCanvasToolbar", {
+  root: {
+    width: "100%",
+    height: 54,
+    display: "flex",
+    alignItems: "center",
+    borderRadius: uikitStyles.theme.radii.full,
+    backgroundColor: uikitStyles.theme.colors.atmo1,
+    position: "absolute",
+    right: 0,
+    top: 0,
+    transition: "width 0.3s ease"
+  },
+  back: {
+    borderRadius: `${uikitStyles.theme.radii.full} 0 0 ${uikitStyles.theme.radii.full}`,
+    minWidth: 68,
+    backgroundColor: uikitStyles.theme.colors.containerBackgroundHover,
+    height: "100%",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  title: {
+    display: "flex",
+    alignItems: "center",
+    padding: uikitStyles.theme.spacing(0, "md"),
+    height: "100%",
+    flexGrow: 1
+  },
+  actions: {
+    display: "flex",
+    flexWrap: "nowrap",
+    overflow: "scroll",
+    paddingRight: uikitStyles.theme.space.md
+  }
+});
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;

package/dist/cjs/Flow/Flow.styles.cjs

@@ -3,11 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitReactCore = require("@hitachivantara/uikit-react-core");
 const BaseNode_styles = require("./Node/BaseNode.styles.cjs");
 require("@emotion/react/jsx-runtime");
-require("react");
 require("reactflow");
-require("uid");
-require("@hitachivantara/uikit-react-icons");
-require("@hitachivantara/uikit-styles");
 const { staticClasses, useClasses } = uikitReactCore.createClasses("HvFlow", {
   root: {
     height: "100%",

package/dist/cjs/Flow/Node/BaseNode.cjs

@@ -1,17 +1,11 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("@emotion/react/jsx-runtime");
-const React = require("react");
 const ReactFlow = require("reactflow");
-const uid = require("uid");
 const uikitReactCore = require("@hitachivantara/uikit-react-core");
-const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
-const uikitStyles = require("@hitachivantara/uikit-styles");
-const NodeMetaContext = require("../FlowContext/NodeMetaContext.cjs");
-const useFlowNode = require("../hooks/useFlowNode.cjs");
 const BaseNode_styles = require("./BaseNode.styles.cjs");
 const utils = require("./utils.cjs");
-const useFlowInstance = require("../hooks/useFlowInstance.cjs");
+const useNode = require("../hooks/useNode.cjs");
 const DEFAULT_LABELS = {
   outputsTitle: "Outputs",
   inputsTitle: "Inputs",
@@ -20,78 +14,45 @@ const DEFAULT_LABELS = {
 };
 const HvFlowBaseNode = ({
   id,
-  title,
+  title: titleProp,
   headerItems,
-  icon,
+  icon: iconProp,
   color: colorProp,
   inputs: inputsProp,
   outputs: outputsProp,
   nodeActions: nodeActionsProp,
   footer,
   classes: classesProp,
-  labels: labelsProps,
+  labels: labelsProp,
   className,
   children
 }) => {
-  const { registerNode, unregisterNode } = NodeMetaContext.useNodeMetaRegistry();
-  const labels = uikitReactCore.useLabels(DEFAULT_LABELS, labelsProps);
-  const inputs = React.useMemo(() => utils.identifyHandles(inputsProp), [inputsProp]);
-  const outputs = React.useMemo(() => utils.identifyHandles(outputsProp), [outputsProp]);
-  const nodeActions = React.useMemo(
-    () => nodeActionsProp || [
-      { id: "delete", label: labels?.deleteActionLabel, icon: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Delete, {}) },
-      {
-        id: "duplicate",
-        label: labels?.duplicateActionLabel,
-        icon: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Duplicate, {})
-      }
-    ],
-    [labels?.deleteActionLabel, labels?.duplicateActionLabel, nodeActionsProp]
-  );
-  React.useEffect(() => {
-    registerNode(id, {
-      label: title || "",
-      inputs,
-      outputs
-    });
-    return () => unregisterNode(id);
-  }, [id, title, inputs, outputs, registerNode, unregisterNode]);
-  const [showActions, setShowActions] = React.useState(false);
-  const reactFlowInstance = useFlowInstance.useFlowInstance();
+  const {
+    toggleShowActions,
+    getNodeToolbarProps,
+    handleDefaultAction,
+    nodeActions,
+    title,
+    icon,
+    color,
+    iconColor,
+    inputEdges,
+    inputs,
+    outputEdges,
+    outputs,
+    node
+  } = useNode.useHvNode({
+    id,
+    title: titleProp,
+    inputs: inputsProp,
+    outputs: outputsProp,
+    icon: iconProp,
+    color: colorProp,
+    labels: labelsProp,
+    nodeActions: nodeActionsProp
+  });
+  const labels = uikitReactCore.useLabels(DEFAULT_LABELS, labelsProp);
   const { classes, cx, css } = BaseNode_styles.useClasses(classesProp);
-  const node = useFlowNode.useFlowNode();
-  const inputEdges = useFlowNode.useFlowNodeInputEdges();
-  const outputEdges = useFlowNode.useFlowNodeOutputEdges();
-  const handleDefaultAction = React.useCallback(
-    (action) => {
-      if (!node)
-        return;
-      if (action.callback) {
-        action.callback(node);
-        return;
-      }
-      switch (action.id) {
-        case "delete":
-          reactFlowInstance.deleteElements({ nodes: [node] });
-          break;
-        case "duplicate":
-          reactFlowInstance.addNodes([
-            {
-              ...node,
-              id: uid.uid(),
-              position: {
-                x: node.position.x,
-                y: node.position.y + (node.height || 0) + 20
-              },
-              selected: false,
-              zIndex: Number(uikitStyles.theme.zIndices.overlay)
-            }
-          ]);
-          break;
-      }
-    },
-    [node, reactFlowInstance]
-  );
   const renderOutput = (output) => {
     const edgeConnected = utils.isConnected(id, "source", output.id, outputEdges);
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.outputContainer, children: [
@@ -132,8 +93,6 @@ const HvFlowBaseNode = ({
   };
   if (!node)
     return null;
-  const color = uikitStyles.getColor(colorProp);
-  const iconColor = React.isValidElement(icon) ? uikitStyles.getColor(icon.props.color || "base_dark") : uikitStyles.getColor("base_dark");
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -144,10 +103,10 @@ const HvFlowBaseNode = ({
         classes.root,
         className
       ),
-      onMouseEnter: () => setShowActions(true),
-      onMouseLeave: () => setShowActions(false),
+      onMouseEnter: toggleShowActions,
+      onMouseLeave: toggleShowActions,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ReactFlow.NodeToolbar, { isVisible: showActions, offset: 0, children: nodeActions?.map((action) => /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx(ReactFlow.NodeToolbar, { ...getNodeToolbarProps(), children: nodeActions?.map((action) => /* @__PURE__ */ jsxRuntime.jsx(
           uikitReactCore.HvIconButton,
           {
             title: action.label,

package/dist/cjs/Flow/hooks/useNode.cjs

@@ -0,0 +1,150 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const React = require("react");
+const uid = require("uid");
+const uikitReactCore = require("@hitachivantara/uikit-react-core");
+const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
+const uikitStyles = require("@hitachivantara/uikit-styles");
+const NodeMetaContext = require("../FlowContext/NodeMetaContext.cjs");
+const utils = require("../Node/utils.cjs");
+const useFlowContext = require("./useFlowContext.cjs");
+const useFlowInstance = require("./useFlowInstance.cjs");
+const useFlowNode = require("./useFlowNode.cjs");
+const DEFAULT_LABELS = {
+  deleteActionLabel: "Delete",
+  duplicateActionLabel: "Duplicate"
+};
+function useHvNode(props) {
+  const {
+    id,
+    title: titleProp,
+    icon: iconProp,
+    color: colorProp,
+    subtitle: subtitleProp,
+    nodeActions: nodeActionsProp,
+    inputs: inputsProp,
+    outputs: outputsProp,
+    groupId,
+    labels: labelsProps,
+    nodeToolbarProps
+  } = props;
+  const { registerNode, unregisterNode } = NodeMetaContext.useNodeMetaRegistry();
+  const labels = uikitReactCore.useLabels(DEFAULT_LABELS, labelsProps);
+  const inputs = React.useMemo(() => utils.identifyHandles(inputsProp), [inputsProp]);
+  const inputEdges = useFlowNode.useFlowNodeInputEdges();
+  const outputs = React.useMemo(() => utils.identifyHandles(outputsProp), [outputsProp]);
+  const outputEdges = useFlowNode.useFlowNodeOutputEdges();
+  const { nodeGroups } = useFlowContext.useFlowContext();
+  const node = useFlowNode.useFlowNode();
+  const reactFlowInstance = useFlowInstance.useFlowInstance();
+  const nodeGroup = groupId && nodeGroups && nodeGroups[groupId] || void 0;
+  const title = titleProp || nodeGroup?.label;
+  const icon = iconProp || nodeGroup?.icon;
+  const color = uikitStyles.getColor(colorProp || nodeGroup?.color);
+  const iconColor = React.isValidElement(icon) ? uikitStyles.getColor(icon.props.color || "base_dark") : uikitStyles.getColor("base_dark");
+  const subtitle = subtitleProp || node?.data.nodeLabel;
+  const [showActions, setShowActions] = React.useState(false);
+  const toggleShowActions = React.useCallback(() => {
+    setShowActions(!showActions);
+  }, [showActions]);
+  const getNodeToolbarProps = React.useCallback(
+    () => ({
+      offset: 0,
+      isVisible: showActions,
+      ...nodeToolbarProps
+    }),
+    [nodeToolbarProps, showActions]
+  );
+  const nodeActions = React.useMemo(
+    () => nodeActionsProp || [
+      { id: "delete", label: labels?.deleteActionLabel, icon: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Delete, {}) },
+      {
+        id: "duplicate",
+        label: labels?.duplicateActionLabel,
+        icon: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Duplicate, {})
+      }
+    ],
+    [labels?.deleteActionLabel, labels?.duplicateActionLabel, nodeActionsProp]
+  );
+  React.useEffect(() => {
+    registerNode(id, {
+      label: title || "",
+      inputs,
+      outputs
+    });
+    return () => unregisterNode(id);
+  }, [id, title, inputs, outputs, registerNode, unregisterNode]);
+  const handleDefaultAction = React.useCallback(
+    (action) => {
+      if (!node)
+        return;
+      if (action.callback) {
+        action.callback(node);
+        return;
+      }
+      switch (action.id) {
+        case "delete":
+          reactFlowInstance.deleteElements({ nodes: [node] });
+          break;
+        case "duplicate":
+          reactFlowInstance.addNodes([
+            {
+              ...node,
+              id: uid.uid(),
+              position: {
+                x: node.position.x,
+                y: node.position.y + (node.height || 0) + 20
+              },
+              selected: false,
+              zIndex: Number(uikitStyles.theme.zIndices.overlay)
+            }
+          ]);
+          break;
+      }
+    },
+    [node, reactFlowInstance]
+  );
+  return React.useMemo(
+    () => ({
+      // state
+      id,
+      title,
+      icon,
+      color,
+      iconColor,
+      subtitle,
+      inputs,
+      inputEdges,
+      outputs,
+      outputEdges,
+      node,
+      nodeActions,
+      showActions,
+      // prop getters
+      getNodeToolbarProps,
+      // actions
+      toggleShowActions,
+      handleDefaultAction
+    }),
+    [
+      id,
+      title,
+      icon,
+      color,
+      iconColor,
+      subtitle,
+      inputs,
+      inputEdges,
+      outputs,
+      outputEdges,
+      node,
+      nodeActions,
+      showActions,
+      getNodeToolbarProps,
+      toggleShowActions,
+      handleDefaultAction
+    ]
+  );
+}
+exports.useHvNode = useHvNode;

package/dist/cjs/index.cjs

@@ -4,6 +4,12 @@ const Blade_styles = require("./Blade/Blade.styles.cjs");
 const Blade = require("./Blade/Blade.cjs");
 const Blades_styles = require("./Blades/Blades.styles.cjs");
 const Blades = require("./Blades/Blades.cjs");
+const Toolbar_styles = require("./Canvas/Toolbar/Toolbar.styles.cjs");
+const Toolbar = require("./Canvas/Toolbar/Toolbar.cjs");
+const Panel_styles = require("./Canvas/Panel/Panel.styles.cjs");
+const Panel = require("./Canvas/Panel/Panel.cjs");
+const Tabs_styles = require("./Canvas/Tabs/Tabs.styles.cjs");
+const Tabs = require("./Canvas/Tabs/Tabs.cjs");
 const Dashboard_styles = require("./Dashboard/Dashboard.styles.cjs");
 const Dashboard = require("./Dashboard/Dashboard.cjs");
 const Flow_styles = require("./Flow/Flow.styles.cjs");
@@ -26,6 +32,7 @@ const useFlowNode = require("./Flow/hooks/useFlowNode.cjs");
 const useFlowContext = require("./Flow/hooks/useFlowContext.cjs");
 const useFlowNodeMeta = require("./Flow/hooks/useFlowNodeMeta.cjs");
 const useFlowInstance = require("./Flow/hooks/useFlowInstance.cjs");
+const useNode = require("./Flow/hooks/useNode.cjs");
 const StepNavigation_styles = require("./StepNavigation/StepNavigation.styles.cjs");
 const StepNavigation = require("./StepNavigation/StepNavigation.cjs");
 const Wizard_styles = require("./Wizard/Wizard.styles.cjs");
@@ -43,6 +50,12 @@ exports.bladeClasses = Blade_styles.staticClasses;
 exports.HvBlade = Blade.HvBlade;
 exports.bladesClasses = Blades_styles.staticClasses;
 exports.HvBlades = Blades.HvBlades;
+exports.canvasToolbarClasses = Toolbar_styles.staticClasses;
+exports.HvCanvasToolbar = Toolbar.HvCanvasToolbar;
+exports.canvasPanelClasses = Panel_styles.staticClasses;
+exports.HvCanvasPanel = Panel.HvCanvasPanel;
+exports.canvasTabsClasses = Tabs_styles.staticClasses;
+exports.HvCanvasTabs = Tabs.HvCanvasTabs;
 exports.dashboardClasses = Dashboard_styles.staticClasses;
 exports.HvDashboard = Dashboard.HvDashboard;
 exports.flowClasses = Flow_styles.staticClasses;
@@ -73,6 +86,7 @@ exports.useFlowOutputNodes = useFlowNode.useFlowOutputNodes;
 exports.useFlowContext = useFlowContext.useFlowContext;
 exports.useFlowNodeMeta = useFlowNodeMeta.useFlowNodeMeta;
 exports.useFlowInstance = useFlowInstance.useFlowInstance;
+exports.useHvNode = useNode.useHvNode;
 exports.stepNavigationClasses = StepNavigation_styles.staticClasses;
 exports.HvStepNavigation = StepNavigation.HvStepNavigation;
 exports.wizardClasses = Wizard_styles.staticClasses;