docs: panel docs and gif

docs/latest/extensions/modules/panel.md

@@ -1,6 +1,19 @@
 # Module: Panel
 
-...
+The panel module provides the ability to define `menuOptions` and `components`
+that can be used by the consuming application. `components` are React Components
+that can be displayed in the consuming application's "Panel" Component.
+
+![Panel Extension](../assets/img/extensions-panel.gif)
+
+<center><i>A panel extension example</i></center>
+
+The `menuOptions`'s `target` key points to a registered `components`'s `id`. A
+`defaultContext` is applied to all `menuOption`s; however, each `menuOption` can
+optional provide it's own `context` value.
+
+The `getPanelModule` receives an object containing the `ExtensionManager`'s
+associated `ServicesManager` and `CommandsManager`.
 
 ```js
 import MyComponent from './MyComponent.js';
@@ -10,15 +23,24 @@ export default {
 
   /**
    * @param {object} params
-   * @param {object} params.servicesManager
+   * @param {ServicesManager} params.servicesManager
+   * @param {CommandsManager} params.commandsManager
    */
-  getPanelModule({ servicesManager }) {
+  getPanelModule({ servicesManager, commandsManager }) {
     return {
       menuOptions: [
         {
+          // A suggested icon
+          // Available icons determined by consuming app
           icon: 'list',
+          // A suggested label
           label: 'Magic',
+          // 'right' or 'left'
+          from: 'right',
+          // The target component to toggle open/close
           target: 'target-component-id',
+          // Overrides `defaultContext`, if specified
+          context: ['ACTIVE_VIEWPORT:MAGIC'],
         },
       ],
       components: [
@@ -27,7 +49,7 @@ export default {
           component: MyComponent,
         },
       ],
-      defaultContext: ['VIEWER'],
+      defaultContext: ['ROUTE:VIEWER'],
     };
   },
 };