@equinor/fusion-framework-dev-portal 4.0.4 → 5.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/fusion-framework-dev-portal",
-  "version": "4.0.4",
+  "version": "5.0.0",
   "description": "",
   "type": "module",
   "module": "./dist/main.js",
@@ -17,49 +17,65 @@
     "access": "public"
   },
   "devDependencies": {
-    "@equinor/eds-core-react": "^0.49.0",
-    "@equinor/eds-icons": "^0.22.0",
-    "@equinor/eds-tokens": "^0.10.0",
-    "@equinor/fusion-react-context-selector": "^1.0.6",
+    "@equinor/eds-core-react": "^2.3.7",
+    "@equinor/eds-icons": "^1.3.0",
+    "@equinor/eds-tokens": "^2.2.0",
+    "@equinor/fusion-react-context-selector": "^2.0.1",
     "@equinor/fusion-react-progress-indicator": "^0.3.0",
-    "@equinor/fusion-react-side-sheet": "2.0.0",
-    "@equinor/fusion-react-styles": "^0.6.4",
+    "@equinor/fusion-react-side-sheet": "^2.0.0",
+    "@equinor/fusion-react-styles": "^2.0.0",
     "@equinor/fusion-wc-chip": "^1.2.2",
     "@equinor/fusion-wc-person": "^3.4.0",
-    "@material-ui/styles": "^4.11.5",
-    "@types/dotenv": "^8.2.3",
-    "@types/react": "^18.2.50",
-    "@types/react-dom": "^18.2.7",
-    "@vitejs/plugin-react": "^5.0.2",
-    "dotenv": "^17.2.2",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-router-dom": "^6.15.0",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.1",
+    "dotenv": "^17.3.1",
+    "react": "^19.2.1",
+    "react-dom": "^19.2.1",
+    "react-router-dom": "^7.9.5",
     "rxjs": "^7.8.1",
-    "styled-components": "^6.0.7",
+    "styled-components": "^6.3.11",
     "tsx": "^4.19.3",
-    "typescript": "^5.8.2",
-    "vite": "^7.1.12"
+    "typescript": "^5.9.3",
+    "vite": "^8.0.0",
+    "@equinor/fusion-framework": "8.0.0",
+    "@equinor/fusion-framework-app": "11.0.0",
+    "@equinor/fusion-framework-dev-server": "2.0.0",
+    "@equinor/fusion-framework-module-ag-grid": "36.0.0",
+    "@equinor/fusion-framework-module-app": "8.0.0",
+    "@equinor/fusion-framework-module-analytics": "2.0.0",
+    "@equinor/fusion-framework-module-bookmark": "4.0.0",
+    "@equinor/fusion-framework-module-feature-flag": "2.0.0",
+    "@equinor/fusion-framework-module-navigation": "7.0.0",
+    "@equinor/fusion-framework-module-services": "8.0.0",
+    "@equinor/fusion-framework-react": "8.0.0",
+    "@equinor/fusion-framework-module-telemetry": "5.0.0",
+    "@equinor/fusion-framework-react-components-bookmark": "2.0.0",
+    "@equinor/fusion-framework-react-components-people-provider": "2.0.0",
+    "@equinor/fusion-framework-module-context": "8.0.0",
+    "@equinor/fusion-framework-react-module-bookmark": "6.0.0",
+    "@equinor/fusion-observable": "9.0.0",
+    "@equinor/fusion-query": "7.0.0"
   },
   "peerDependencies": {
-    "@equinor/fusion-framework": "7.4.13",
-    "@equinor/fusion-framework-dev-server": "1.1.31",
-    "@equinor/fusion-framework-module-analytics": "1.0.2",
-    "@equinor/fusion-framework-app": "10.4.9",
-    "@equinor/fusion-framework-module-app": "7.4.1",
-    "@equinor/fusion-framework-module-context": "7.0.3",
-    "@equinor/fusion-framework-module-bookmark": "3.0.6",
-    "@equinor/fusion-framework-module-navigation": "6.0.1",
-    "@equinor/fusion-framework-module-feature-flag": "1.1.28",
-    "@equinor/fusion-framework-module-services": "7.2.1",
-    "@equinor/fusion-framework-module-telemetry": "4.6.4",
-    "@equinor/fusion-framework-react": "7.4.20",
-    "@equinor/fusion-framework-react-components-bookmark": "1.1.3",
-    "@equinor/fusion-framework-react-components-people-provider": "1.6.3",
-    "@equinor/fusion-framework-react-module-bookmark": "5.0.2",
-    "@equinor/fusion-observable": "8.5.8",
-    "@equinor/fusion-query": "6.0.4",
-    "@equinor/fusion-framework-module-ag-grid": "35.0.2"
+    "@equinor/fusion-framework-app": "11.0.0",
+    "@equinor/fusion-framework-module-ag-grid": "36.0.0",
+    "@equinor/fusion-framework-module-app": "8.0.0",
+    "@equinor/fusion-framework-module-analytics": "2.0.0",
+    "@equinor/fusion-framework-dev-server": "2.0.0",
+    "@equinor/fusion-framework-module-bookmark": "4.0.0",
+    "@equinor/fusion-framework-module-context": "8.0.0",
+    "@equinor/fusion-framework": "8.0.0",
+    "@equinor/fusion-framework-module-feature-flag": "2.0.0",
+    "@equinor/fusion-framework-module-navigation": "7.0.0",
+    "@equinor/fusion-framework-module-services": "8.0.0",
+    "@equinor/fusion-framework-module-telemetry": "5.0.0",
+    "@equinor/fusion-framework-react-components-bookmark": "2.0.0",
+    "@equinor/fusion-framework-react-components-people-provider": "2.0.0",
+    "@equinor/fusion-framework-react-module-bookmark": "6.0.0",
+    "@equinor/fusion-framework-react": "8.0.0",
+    "@equinor/fusion-query": "7.0.0",
+    "@equinor/fusion-observable": "9.0.0"
   },
   "peerDependenciesMeta": {
     "@equinor/fusion-framework": {

package/src/AppLoader.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useId, useMemo, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 
 import { Subscription } from 'rxjs';
 import { last } from 'rxjs/operators';
@@ -13,11 +13,18 @@ import { ErrorViewer } from './ErrorViewer';
 import type { AppModule } from '@equinor/fusion-framework-module-app';
 import EquinorLoader from './EquinorLoader';
 
+/**
+ * URL search-parameter key used to specify an app version tag.
+ *
+ * When present in the URL as `?$tag=<value>`, the portal loads that
+ * specific version of the application instead of the default.
+ */
 export const TAG = '$tag';
 
 /**
- * Gets the app tag/version from the current URL search parameters
- * @returns The app tag/version if present in URL, otherwise null
+ * Reads the application version tag from the current URL search parameters.
+ *
+ * @returns The tag string if the `$tag` search parameter is present, otherwise `null`.
  */
 export const getAppTagFromUrl = (): string | null => {
   const url = new URL(window.location.href);
@@ -25,11 +32,14 @@ export const getAppTagFromUrl = (): string | null => {
 };
 
 /**
- * React Functional Component for handling current application
+ * Loads, initializes, and mounts a Fusion application by its key.
+ *
+ * Sets the current app on the framework's app module, observes initialization
+ * progress, and renders the app's script output into a private DOM element.
+ * Displays a loading spinner while the app initializes and an error view if
+ * manifest resolution or initialization fails.
  *
- * this component will set the current app by provided appKey.
- * when the appKey changes, this component will try to initialize the referred application
- * and render it.
+ * @param props.appKey - Unique key identifying the Fusion application to load.
  */
 export const AppLoader = (props: { readonly appKey: string }) => {
   const { appKey } = props;
@@ -37,7 +47,6 @@ export const AppLoader = (props: { readonly appKey: string }) => {
 
   /** reference of application section/container */
   const ref = useRef<HTMLElement>(null);
-  const applicationContentId = useId();
 
   const [loading, setLoading] = useState<boolean>(false);
   const [error, setError] = useState<Error | undefined>();
@@ -130,7 +139,7 @@ export const AppLoader = (props: { readonly appKey: string }) => {
   }
 
   return (
-    <section id={applicationContentId} ref={ref} style={{ display: 'contents' }}>
+    <section id="app-section" ref={ref} style={{ display: 'contents' }}>
       {loading && <EquinorLoader text="Loading Application" />}
     </section>
   );

package/src/BookMarkSideSheet.tsx

@@ -3,11 +3,22 @@ import { Bookmark } from '@equinor/fusion-framework-react-components-bookmark';
 import { useBookmarkComponentContext } from '@equinor/fusion-framework-react-components-bookmark';
 import { SideSheet } from '@equinor/fusion-react-side-sheet';
 
+/** Props for the {@link BookmarkSideSheet} component. */
 type BookmarkSideSheetProps = {
+  /** Whether the side sheet is currently visible. */
   readonly isOpen: boolean;
+  /** Callback invoked when the user dismisses the side sheet. */
   readonly onClose: VoidFunction;
 };
 
+/**
+ * Side sheet overlay for browsing and creating application bookmarks.
+ *
+ * Wraps the `Bookmark` component from `@equinor/fusion-framework-react-components-bookmark`
+ * in a dismissible side sheet with an "Add Bookmark" action button.
+ *
+ * @param props - {@link BookmarkSideSheetProps}
+ */
 export const BookmarkSideSheet = ({ isOpen, onClose }: BookmarkSideSheetProps) => {
   const { provider, showCreateBookmark } = useBookmarkComponentContext();
 

package/src/ContextSelector/ContextSelector.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useId, useMemo } from 'react';
+import { useCallback, useEffect, useId, useMemo, type ReactElement } from 'react';
 import {
   ContextProvider,
   ContextSearch,
@@ -9,11 +9,17 @@ import {
 import { useContextResolver } from './useContextResolver';
 
 /**
- * See fusion-react-component storybook for available attributes
- * @link https://equinor.github.io/fusion-react-components/?path=/docs/data-contextselector--component
- * @returns JSX element
+ * Context selector component wired to the current application's context module.
+ *
+ * Renders a search input with dropdown results from the Fusion context service.
+ * When the user selects a context item, it is set as the current context on the
+ * application's context provider. Clearing the selector resets the current context.
+ *
+ * @see {@link https://equinor.github.io/fusion-react-components/?path=/docs/data-contextselector--component | ContextSelector Storybook}
+ * @param props - Passthrough props for the underlying `ContextSearch` component.
+ * @returns The context selector element, or `null` if no context resolver is available.
  */
-export const ContextSelector = (props: ContextSearchProps): JSX.Element | null => {
+export const ContextSelector = (props: ContextSearchProps): ReactElement | null => {
   const contextSelectorId = useId();
   const {
     resolver,

package/src/ContextSelector/useContextResolver.ts

@@ -24,10 +24,22 @@ import type { AppModulesInstance } from '@equinor/fusion-framework-app';
 import type { QueryClientError } from '@equinor/fusion-query/client';
 import type { FusionContextSearchError } from '@equinor/fusion-framework-module-context/errors.js';
 
+/**
+ * Capitalizes the first letter of a string and lowercases the rest.
+ *
+ * @param string - The input string to capitalize.
+ * @returns The capitalized string.
+ */
 function capitalizeFirstLetter(string: string): string {
   return string.charAt(0).toUpperCase() + string.slice(1).toLowerCase();
 }
 
+/**
+ * Converts a {@link ContextItem} graphic field to the shape expected by `ContextResultItem`.
+ *
+ * @param graphic - The graphic value from a context item (string, SVG object, or undefined).
+ * @returns An object with `graphic` and `graphicType` properties, or an empty object.
+ */
 function convertGraphic(
   graphic: ContextItem['graphic'],
 ): Pick<ContextResultItem, 'graphic' | 'graphicType'> {
@@ -57,6 +69,12 @@ function convertGraphic(
   };
 }
 
+/**
+ * Converts a {@link ContextItem} meta field to the shape expected by `ContextResultItem`.
+ *
+ * @param meta - The meta value from a context item (string, SVG object, or undefined).
+ * @returns An object with `meta` and `metaType` properties, or an empty object.
+ */
 function convertMeta(meta: ContextItem['meta']): Pick<ContextResultItem, 'metaType' | 'meta'> {
   if (meta === undefined) {
     return {};
@@ -85,10 +103,13 @@ function convertMeta(meta: ContextItem['meta']): Pick<ContextResultItem, 'metaTy
 }
 
 /**
- * Map context query result to ContextSelectorResult.
- * Add any icons to selected types by using the 'graphic' property
- * @param src context query result
- * @returns src mapped to ContextResult type
+ * Maps an array of context items to `ContextResult` for the context selector dropdown.
+ *
+ * Applies custom rendering for `EquinorTask` (shows inactive state chip) and
+ * `OrgChart` (shows list icon and inactive state chip) context types.
+ *
+ * @param src - Array of context items from the context query.
+ * @returns Mapped array of `ContextResultItem` objects for the selector UI.
  */
 const mapper = (src: ContextItem<{ taskState?: string; state?: string }>[]): ContextResult => {
   return src.map((i) => {
@@ -127,19 +148,28 @@ const mapper = (src: ContextItem<{ taskState?: string; state?: string }>[]): Con
 };
 
 /**
- * Create a single ContextResultItem
- * @param props pops for the item to merge with defaults
- * @returns ContextResultItem
+ * Creates a single `ContextResultItem` with sensible defaults.
+ *
+ * Used to generate placeholder or error entries in the context selector dropdown.
+ *
+ * @param props - Partial properties to merge into the default item shape.
+ * @returns A complete `ContextResultItem` with defaults for `id` and `title`.
  */
 const singleItem = (props: Partial<ContextResultItem>): ContextResultItem => {
   return Object.assign({ id: 'no-such-item', title: 'Change me' }, props);
 };
 
 /**
- * Hook for querying context and setting resolver for ContextSelector component
- * See React Components storybook for info about ContextSelector component and its resolver
- * @link https://equinor.github.io/fusion-react-components/?path=/docs/data-contextselector--component
- * @return Array<ContextResolver, SetContextCallback>
+ * Hook that creates a context resolver, tracks the current context provider,
+ * and provides the currently selected context for the {@link ContextSelector}.
+ *
+ * Observes the current application's module instances. When the app exposes a
+ * context module, the hook wires up a search resolver that queries context items
+ * and maps results to `ContextResultItem`. It also handles error display and
+ * minimum query length enforcement.
+ *
+ * @see {@link https://equinor.github.io/fusion-react-components/?path=/docs/data-contextselector--component | ContextSelector Storybook}
+ * @returns An object containing the `resolver` for the selector, the current `provider`, and `currentContext` items.
  */
 export const useContextResolver = (): {
   resolver: ContextResolver | null;

package/src/EquinorLoader.tsx

@@ -1,10 +1,19 @@
 import type React from 'react';
 import { StarProgress } from '@equinor/fusion-react-progress-indicator';
 
+/**
+ * Full-viewport loading indicator displaying the Equinor star spinner.
+ *
+ * Used as a fallback while the Fusion Framework or an application is initializing.
+ *
+ * @param props.text - Status message displayed below the spinner.
+ * @param props.children - Optional additional content rendered inside the spinner.
+ * @returns A centered full-screen loading overlay.
+ */
 export const EquinorLoader = ({
   children,
   text,
-}: React.PropsWithChildren<{ readonly text: string }>): JSX.Element => {
+}: React.PropsWithChildren<{ readonly text: string }>): React.ReactElement => {
   return (
     <div
       style={{

package/src/ErrorViewer.tsx

@@ -1,5 +1,14 @@
 import { Typography } from '@equinor/eds-core-react';
 
+/**
+ * Recursively renders an error and its causal chain.
+ *
+ * Displays the error message and stack trace for each error in the `cause`
+ * chain, providing full visibility into nested failures during app loading.
+ *
+ * @param props.error - The error to display, including any nested `cause` errors.
+ * @returns A bordered section showing the error message, stack trace, and any nested causes.
+ */
 export const ErrorViewer = ({ error }: { readonly error: Error }) => {
   return (
     <>

package/src/FusionLogo.tsx

@@ -1,10 +1,22 @@
 import { useId } from 'react';
 import type { SVGProps } from 'react';
 
+/** Props for the {@link FusionLogo} component. */
 type FusionLogoProps = Omit<SVGProps<SVGSVGElement>, 'viewBox'> & {
+  /** Uniform scale multiplier applied via CSS transform. Defaults to `1`. */
   readonly scale?: number;
 };
 
+/**
+ * Inline SVG rendering of the Fusion logo.
+ *
+ * Uses unique gradient IDs per instance so multiple logos can coexist on the
+ * same page without gradient collisions.
+ *
+ * @param props.scale - Scale multiplier for the logo size.
+ * @param props.style - Additional inline styles merged with the computed transform.
+ * @returns An inline SVG element sized to `1em` height.
+ */
 export const FusionLogo = ({ scale = 1, style }: FusionLogoProps) => {
   const paint0Id = useId();
   const paint1Id = useId();

package/src/Header.Actions.tsx

@@ -6,12 +6,24 @@ PersonAvatarElement;
 
 import { useBookmarkComponentContext } from '@equinor/fusion-framework-react-components-bookmark';
 
+/** Props for the {@link HeaderActions} component. */
 interface HeaderActionProps {
+  /** Azure AD object ID of the current user, used for the person avatar. */
   readonly userAzureId?: string;
+  /** Toggle callback for the bookmark side sheet open/close state. */
   readonly toggleBookmark: (open: (status: boolean) => boolean) => void;
+  /** Toggle callback for the person settings side sheet open/close state. */
   readonly togglePerson: (open: (status: boolean) => boolean) => void;
 }
 
+/**
+ * Action buttons displayed in the portal top bar header.
+ *
+ * Renders a bookmark toggle button (disabled when no bookmark provider is
+ * available) and a person-avatar button that opens the user settings sheet.
+ *
+ * @param props - {@link HeaderActionProps}
+ */
 export const HeaderActions = (props: HeaderActionProps) => {
   const { toggleBookmark, togglePerson, userAzureId } = props;
 

package/src/Header.tsx

@@ -33,6 +33,13 @@ const Styled = {
     `,
 };
 
+/**
+ * Portal top bar header containing the Fusion logo, context selector, and action buttons.
+ *
+ * Composes the bookmark provider with the current app and user so bookmark
+ * and person side sheets can operate in context. Provides the sticky top bar
+ * layout used across all portal pages.
+ */
 export const Header = () => {
   const currentUser = useCurrentUser();
   const topBarId = useId();

package/src/PersonSideSheet/index.tsx

@@ -7,15 +7,23 @@ import { Divider } from '@equinor/eds-core-react';
 
 import { LandingSheetContent, FeatureSheetContent } from './sheets';
 
+/** Props for the {@link PersonSideSheet} component. */
 type PersonSideSheetProps = {
+  /** Azure AD object ID of the user to display in the side sheet. */
   readonly azureId?: string;
+  /** Whether the side sheet is currently visible. */
   readonly isOpen: boolean;
+  /** Callback invoked when the user dismisses the side sheet. */
   onClose(): void;
 };
 
 /**
- * Add Sidesheet with settings for the current user.
- * @param PersonSideSheetProps
+ * Side sheet overlay that displays user settings and feature toggles.
+ *
+ * Contains a person list item for the current user and navigable sub-sheets
+ * for viewing and toggling application and portal feature flags.
+ *
+ * @param props - {@link PersonSideSheetProps}
  */
 export const PersonSideSheet = ({ azureId, isOpen, onClose }: PersonSideSheetProps) => {
   const [currentSheet, setCurrentSheet] = useState<string>('landing');

package/src/PersonSideSheet/sheets/FeatureSheetContent.tsx

@@ -9,8 +9,12 @@ Icon.add({ arrow_back, category });
 import type { SheetContentProps } from './types';
 
 /**
- * JSX structure for the content of the PersonSidesheet's Features page.
- * @param SheetContentProps
+ * Feature flags sub-sheet for the person settings side sheet.
+ *
+ * Contains tabbed panels for toggling application-level and portal-level
+ * feature flags. Includes a back-navigation button to return to the landing sheet.
+ *
+ * @param props.navigate - Callback to navigate back to the landing sheet.
  */
 export const FeatureSheetContent = ({ navigate }: SheetContentProps) => {
   const [tab, setTab] = useState<number>(0);

package/src/PersonSideSheet/sheets/FeatureTogglerApp.tsx

@@ -5,7 +5,10 @@ import { Typography, Switch } from '@equinor/eds-core-react';
 import { Styled } from './Styled';
 
 /**
- * JSX structure for Feature toggler tab for app features in the PersonSidesheet's Feature page.
+ * Feature toggle list for application-level feature flags.
+ *
+ * Reads feature flags from the current app's feature-flag module and renders
+ * each flag as a labeled switch. Clicking a row toggles the flag.
  */
 export const FeatureTogglerApp = () => {
   const { features, toggleFeature } = useCurrentAppFeatures();

package/src/PersonSideSheet/sheets/FeatureTogglerPortal.tsx

@@ -5,7 +5,10 @@ import { Typography, Switch } from '@equinor/eds-core-react';
 import { Styled } from './Styled';
 
 /**
- * Content for Feature toggler tab for portal features in the PersonSidesheet's Feature page.
+ * Feature toggle list for portal-level feature flags.
+ *
+ * Reads feature flags from the framework's feature-flag module and renders
+ * each flag as a labeled switch. Clicking a row toggles the flag.
  */
 export const FeatureTogglerPortal = () => {
   const { features, toggleFeature } = useFrameworkFeatures();

package/src/PersonSideSheet/sheets/LandingSheetContent.tsx

@@ -15,7 +15,13 @@ const BtnListItem = styled.li`
 `;
 
 /**
- * Content for the main  tab in the PersonSidesheet.
+ * Landing page content for the person settings side sheet.
+ *
+ * Displays navigation buttons for sub-sheets (e.g., feature toggles) and
+ * an external link to the user's Delve profile.
+ *
+ * @param props.azureId - Azure AD object ID used to build the Delve profile link.
+ * @param props.navigate - Callback to navigate to a sub-sheet by key.
  */
 export const LandingSheetContent = ({ azureId, navigate }: SheetContentProps) => {
   return (

package/src/PersonSideSheet/sheets/Styled.tsx

@@ -1,4 +1,8 @@
 import styled from 'styled-components';
+
+/**
+ * Shared styled components used by feature toggle lists in the person side sheet.
+ */
 export const Styled = {
   SwitchList: styled.ul`
         list-style: none;

package/src/PersonSideSheet/sheets/types.ts

@@ -1,5 +1,14 @@
+/**
+ * Shared props for person side sheet sub-pages.
+ *
+ * Each sheet content component receives these props from the parent
+ * {@link PersonSideSheet} to support navigation between sheets.
+ */
 export type SheetContentProps = {
+  /** Azure AD object ID of the current user. */
   readonly azureId?: string;
+  /** Key of the currently active sheet. */
   readonly sheet?: string;
+  /** Navigates to a different sheet by key, or back to the landing sheet when called without arguments. */
   navigate(sheet?: string): void;
 };

package/src/Router.tsx

@@ -31,6 +31,12 @@ const Styled = {
     `,
 };
 
+/**
+ * Root layout component for the dev portal.
+ *
+ * Renders the header and a scrollable main area via `Outlet`. Activates
+ * bookmark-to-navigation linking through `useBookmarkNavigate`.
+ */
 const Root = () => {
   useBookmarkNavigate({ resolveAppPath: (appKey: string) => `/apps/${appKey}` });
   return (
@@ -45,12 +51,16 @@ const Root = () => {
   );
 };
 
+/**
+ * Route component that extracts the `appKey` parameter and delegates to {@link AppLoader}.
+ */
 // eslint-disable-next-line react/no-multi-comp
 const AppRoute = () => {
   const { appKey } = useParams();
   return appKey ? <AppLoader appKey={appKey} /> : null;
 };
 
+/** Route definitions for the dev portal. */
 const routes = [
   {
     path: '/',
@@ -64,6 +74,13 @@ const routes = [
   },
 ];
 
+/**
+ * Top-level router for the Fusion Dev Portal.
+ *
+ * Creates a router instance from the framework navigation module and
+ * renders it via `RouterProvider`. Observes context changes through
+ * {@link useAppContextNavigation} to keep the URL in sync.
+ */
 // eslint-disable-next-line react/no-multi-comp
 export const Router = () => {
   const { navigation } = useFramework<[NavigationModule]>().modules;

package/src/config.ts

@@ -26,16 +26,21 @@ declare global {
 }
 
 /**
- * Configures the Fusion Dev Portal with all required modules and features
+ * Configures the Fusion Dev Portal framework with all required modules.
  *
- * This function sets up the complete framework configuration including:
- * - Telemetry tracking for portal analytics
- * - Core app functionality and navigation
- * - Bookmark management system
- * - Feature flagging for development features
- * - Service integrations
+ * Enables and wires together:
+ * - **Telemetry** — portal-scoped usage analytics with version metadata.
+ * - **App module** — application manifest loading and lifecycle.
+ * - **Navigation** — router integration with optional telemetry.
+ * - **Services** — standard Fusion service integrations.
+ * - **AG Grid** — enterprise license key from `window.FUSION_AG_GRID_KEY`.
+ * - **Analytics** — console adapter gated by the `fusionLogAnalytics` feature flag.
+ * - **Bookmarks** — source-system metadata identifying CLI-created bookmarks.
+ * - **Feature flags** — local-storage and URL-based flag plugins for dev toggles.
  *
- * @param config - The framework configurator instance to extend with portal features
+ * On initialization, exposes all modules on `window.Fusion` for debugging.
+ *
+ * @param config - The framework configurator instance to extend with portal modules.
  */
 export const configure = async (config: FrameworkConfigurator) => {
   // Enable telemetry tracking for portal usage analytics and monitoring
@@ -61,7 +66,15 @@ export const configure = async (config: FrameworkConfigurator) => {
 
   enableAppModule(config);
 
-  enableNavigation(config);
+  enableNavigation(config, {
+    configure: (config) => {
+      config.setTelemetry(async (args) => {
+        if (args.hasModule('telemetry')) {
+          return await args.requireInstance('telemetry');
+        }
+      });
+    },
+  });
 
   enableServices(config);
 
@@ -121,7 +134,7 @@ export const configure = async (config: FrameworkConfigurator) => {
   config.onInitialized(async (modules) => {
     // NOTE: TypeScript ignore needed due to window object extension
     // This provides developer access to all initialized modules via window.Fusion
-    // @ts-ignore
+    // @ts-expect-error
     window.Fusion = { modules };
   });
 };

package/src/main.tsx

@@ -11,8 +11,19 @@ import { Router } from './Router';
 
 import fallbackSvg from './resources/fallback-photo.svg';
 
+/** Fallback avatar image used when a person photo cannot be loaded. */
 const fallbackImage = new Blob([fallbackSvg], { type: 'image/svg+xml' });
 
+/**
+ * Mounts the Fusion Dev Portal into the given DOM element.
+ *
+ * Creates a React root and renders the portal shell with the Equinor theme,
+ * Fusion Framework provider, people-resolver provider, and the portal router.
+ * This is the main entry point consumed by `@equinor/fusion-framework-dev-server`.
+ *
+ * @param target - The DOM element to mount the portal into.
+ * @param args - Render arguments containing a `ref` to the parent Fusion Framework instance.
+ */
 export const render: FusionRenderFn = (target, args) => {
   ReactDOM.createRoot(target).render(
     <ThemeProvider theme={theme}>