docs(editor): consolidate instructions for selecting and navigating

docs.json

@@ -49,13 +49,14 @@
                 "group": "Interface Overview",
                 "pages": [
                   "editor/interface-overview/overview",
+                  "editor/interface-overview/selection-and-navigation",
                   "editor/interface-overview/toolbar",
                   "editor/interface-overview/hierarchy",
                   "editor/tagging",
                   "editor/interface-overview/inspector",
                   "editor/interface-overview/stage",
-                  "editor/keyboard-shortcuts",
-                  "editor/fundamentals/design-vs-animate-mode"
+                  "editor/fundamentals/design-vs-animate-mode",
+                  "editor/keyboard-shortcuts"
                 ]
               }
             ]
@@ -94,7 +95,6 @@
                     "group": "Hierarchical Relationships",
                     "pages": [
                       "editor/fundamentals/groups",
-                      "editor/fundamentals/selecting-and-navigating-groups",
                       "editor/manipulating-shapes/solos",
                       "editor/fundamentals/transform-spaces",
                       "editor/fundamentals/freeze-and-origin",
@@ -1225,6 +1225,10 @@
       "source": "/account-admin/workspaces/workspace-faqs",
       "destination": "/account-admin/workspaces/managing-workspaces#faqs"
     },
+    {
+      "source": "/editor/fundamentals/selecting-and-navigating-groups",
+      "destination": "/editor/interface-overview/selection-and-navigation"
+    },
     {
       "source": "/home/account-admin/workspaces/workspace-status",
       "destination": "/account-admin/workspaces/managing-workspaces"

editor/fundamentals/edit-vertices.mdx

@@ -15,11 +15,9 @@ To enter Edit Vertices mode, either select the shape and hit enter twice or sele
 
 After activating Edit Vertices mode, you can select any vertex, reposition it, and edit the bezier handles.
 
-### Deep Selection
-
-You may want to select and edit a specific path when dealing with a group of shapes. You can either find that path in the Hierarchy or you can use Deep Selection to select it directly on the Stage.
-
-To select a path within a group on the stage, hold `⌘` (Mac) or `ctrl` (Windows) and click the target path. Alternatively, you can double-click on the path you want to select.
+<Tip>
+  Use [Deep Selection](/editor/interface-overview/selection-and-navigation#deep-select) to select a specific path within a shape.
+</Tip>
 
 ### Path Options
 

editor/fundamentals/groups.mdx

@@ -19,11 +19,13 @@ The Style property of a group can be set to Group or Target.
 
 ### Group
 
-Group is the default behavior, which behaves as described in the [Selecting and Navigating Groups](/editor/fundamentals/selecting-and-navigating-groups).
+Group is the default behavior, which behaves as described in the [Selecting and Navigating Groups](/editor/interface-overview/selection-and-navigation).
 
 ### Target
 
-The Target option draws a different icon on the Stage that is always visible, regardless of whether the group has children (usually a group only displays an icon if it is empty). When a group displays as a Target, it also disables the functionality described in [Selecting and Navigating Groups](/editor/fundamentals/selecting-and-navigating-groups) section. This means you can immediately click through to any child of the group (no need to double-click, enter/esc, or Deep Select).
+The Target option draws a different icon on the Stage that is always visible, regardless of whether the group has children (usually a group only displays an icon if it is empty).
+
+Targets are directly selectable on the stage. You don't need to use [Deep Select](/editor/interface-overview/selection-and-navigation#deep-select) to select them.
 
 ![Groups change Target](/images/editor/fundamentals/groups-targets.gif)
 

editor/interface-overview/selection-and-navigation.mdx

@@ -0,0 +1,90 @@
+---
+title: "Selection and Navigation"
+description: "Select objects, move through nested groups, and navigate the stage."
+---
+
+import { YouTube } from '/snippets/youtube.mdx'
+
+Use selection and navigation controls to choose objects, move through nested groups, and move around the stage.
+
+<Tip>
+  For a complete list of shortcuts, see [Keyboard Shortcuts](/editor/keyboard-shortcuts).
+</Tip>
+
+## Selecting Objects
+
+<YouTube id="xQK498Y1J8M" />
+
+Click an object to select it. To select multiple objects, drag over them to create a marquee selection.
+
+Hold `Shift` while clicking or dragging to add objects to the current selection or remove selected objects.
+
+### Select Objects Inside Groups
+
+To select an object inside a group, double-click the object. This moves you one level down in the hierarchy, so you can select objects inside that group.
+
+![Double Click](/images/editor/fundamentals/DoubleClick2.gif)
+
+### Deep Select
+
+To select an object inside nested groups, hold `⌘` on macOS or `Ctrl` on Windows, then click the object.
+
+Deep select lets you select an object directly, even when it is inside multiple groups.
+
+<Note>
+  [Targets](/editor/fundamentals/groups#target) are directly selectable on the stage. You don't need to use **Deep Select** to select them.
+</Note>
+
+![Deep Select](/images/editor/fundamentals/DeepSelect.gif)
+
+### Select Behind
+
+When you hover over an object on the stage, Rive outlines the object that will be selected if you click.
+
+If multiple objects overlap, press `Alt` to cycle through objects under the cursor. When the object you want is outlined, click to select it.
+
+![Select behind](/images/editor/interface-overview/select-behind.gif)
+
+### Moving Up and Down the Hierarchy
+
+Use `Enter` and `Esc` to move through nested objects in the hierarchy.
+
+* Press `Enter` to move down into the selected group and select its first child.
+* Press `Esc` to move up and select the parent of the current selection.
+
+![Enter And Escape](/images/editor/fundamentals/EnterAndEscape.gif)
+
+## Navigating the Stage
+
+### Pan
+
+To pan the stage, right-click and drag.
+
+You can also hold `Spacebar` to temporarily switch to the Pan tool, then click and drag to move around the stage.
+
+If you're using a trackpad, scroll left or right to pan horizontally.
+
+![Select behind](/images/editor/interface-overview/pan.gif)
+
+### Zoom
+
+To zoom in or out, place your cursor over the stage, then hold `⌘` on macOS or `Ctrl` on Windows and scroll.
+![Zooming the ](/images/editor/interface-overview/zoom.gif)
+
+You can also use keyboard shortcuts:
+
+* Press `+` to zoom in.
+* Press `-` to zoom out.
+* Press `⌘` + `0` on macOS or `Ctrl` + `0` on Windows to return to 100%.
+
+### Fit Selection
+
+Press `F` to fit the current selection in the viewable stage area.
+
+![Fitting the selected object in view](/images/editor/interface-overview/fit-selection.gif)
+
+If an object is selected, Rive fits that object in view. If an artboard is selected, Rive fits the artboard in view.
+
+<Tip>
+  If you lose track of an artboard or object on the stage, select it in the hierarchy and press `F` to fit it in view.
+</Tip>

editor/interface-overview/stage.mdx

@@ -5,54 +5,25 @@ description: "The Stage is an infinite canvas where you can place artboards cont
 
 import { YouTube } from '/snippets/youtube.mdx'
 
-<YouTube id="xQK498Y1J8M" />
+![Stage](/images/interface/stage.png)
 
-## Selection
+[Artboards](/editor/fundamentals/artboards) live on the stage. You can pan and zoom around the stage, select objects, and use guides or rulers to help position elements.
 
-Select an object by simply clicking on it, or click and drag over a number of shapes to perform a marquee selection. Hold the `Shift` modifier key to add or remove from an existing selection (by either single clicking or marqueeing).
+<Tip>
+  To learn how to navigate and select items on the stage, see [Keyboard Shortcuts](/editor/keyboard-shortcuts).
+</Tip>
 
-### Double-click
+### View Options menu
 
-To select an object in a group, double-click on the object you want to select. This takes you down one level in the hierarchy and allows you to select any object on that level.
+![View options](/images/interface/stage-view-options.png)
 
-### Deep select
-
-In order to select an object within a group, hold `⌘` (macOS) or `Ctrl` (Windows) and click directly on it. This is a quick way to cut through multiple layers of nested groups and directly select a shape. This can be a very fast way to navigate a complex file, especially when used together with the Select behind technique and the Enter and Esc shortcuts described below.
-
-### Select behind
-
-When you hover over an object on the stage, Rive draws an outline around it. This is a hint to let you know that if you click, this object will be selected. Sometimes multiple objects can overlap one another, making it difficult to select the exact one you want. In this case, press `Alt` to cycle to the next object under your cursor. You can continue to press `Alt` until the object you want is outlined. Now click to select it.
-
-### Enter and Esc shortcuts
-
-Use the `Enter` key to quickly navigate down the Hierarchy. If you have a group selected, this allows you to quickly select the first child.
-
-Use the `Esc` key to quickly navigate up the Hierarchy. This allows you to quickly select the parent of your current selection.
-
-## Navigating
-
-<YouTube id="osp_et6q7o8" />
-
-### Panning
-
-![Image](https://ucarecdn.com/e1605c44-d098-4a7e-940d-a4278ef53be8/)
-
-To pan the Stage, right-click and drag your mouse. If you have a trackpad, scroll left and right. Alternatively, hold `Spacebar` to trigger the Pan Tool. With the Pan Tool enabled, click and drag to move to your desired point on the Stage.
-
-### Zooming
-
-![Image](https://ucarecdn.com/c9384609-023a-42a0-bab3-5ff6043598b2/)
-
-With your cursor positioned over the Stage, hold `⌘` / `Ctrl` and scroll your mouse or trackpad to zoom in and out. Alternatively, use the `+` / `-` keys to zoom between preset points. You can quickly revert back to 100% with `⌘` / `Ctrl` and `0`.
-
-### Fit
-
-![Image](https://ucarecdn.com/7b03a9e1-2577-46a8-9cc8-7c6661f91a8e/)
-
-Tap `F` to simultaneously zoom and position your active artboard to fit within the viewable Stage area. Note that if you have an object within the Hierarchy selected this action will be performed on the object as opposed to the artboard.
-
-> There are a few scenarios where you may have "lost" an artboard, while still seeing the hierarchy. This typically happens when the position of an artboard is accidentally keyed or the zoom level is too far out. Using the `F` shortcut will help you fix the issue by Filling the stage with the selected object or artboard.
+The View Options menu controls what appears on the stage while you work. Use it to adjust zoom, snapping, guides, and visual overlays for animation and interaction tools.
 
+- **Zoom and snapping:** adjust the stage zoom level, enable snapping, or snap objects to pixels
+- **User Cursors:** show or hide other users' cursors
+- **Tool overlays:** show or hide gizmos, bones, targets, motion paths, joysticks, events, layouts, and text modifier ranges
+- **Show Final Playback:** show the final playback state while editing
+- **Rulers and guides:** show rulers, lock guides, or clear guides from the stag
 
 
 ## Rulers and Guides