Inspector v2: Improved extension details (#17389)

This is addressing an Inspector v2 forum ask:
https://forum.babylonjs.com/t/introducing-inspector-v2/60937/85

It adds more details to extension metadata and displays it in the
extensions dialog. It also makes it more clear at a glance whether an
extension is currently installed. There is also some general style
improvements, like using the Fluent Card component which is made for
this type of use case.

<img width="607" height="513" alt="image"
src="https://github.com/user-attachments/assets/4f955cee-20d9-4045-865e-ded14b64f3df"
/>
<img width="600" height="499" alt="image"
src="https://github.com/user-attachments/assets/e6e3c261-6c78-4814-a33a-7e19092f7f65"
/>
<img width="445" height="315" alt="image"
src="https://github.com/user-attachments/assets/dfdaaf77-e381-41a6-8d63-c7eb05d8c69d"
/>
<img width="404" height="313" alt="image"
src="https://github.com/user-attachments/assets/ccec0448-660d-4ec9-bfbd-54c0fdacb7ba"
/>

Author: ryantrem

packages/dev/inspector-v2/src/extensibility/defaultInspectorExtensionFeed.ts

@@ -1,5 +1,13 @@
+import type { ExtensionMetadata } from "./extensionFeed";
+
 import { BuiltInsExtensionFeed } from "./builtInsExtensionFeed";
 
+const BabylonWebResources = {
+    homepage: "https://www.babylonjs.com",
+    repository: "https://github.com/BabylonJS/Babylon.js",
+    bugs: "https://github.com/BabylonJS/Babylon.js/issues",
+} as const satisfies Partial<ExtensionMetadata>;
+
 /**
  * Well-known default built in extensions for the Inspector.
  */
@@ -14,18 +22,24 @@ export const DefaultInspectorExtensionFeed = new BuiltInsExtensionFeed("Inspecto
         name: "Export Tools",
         description: "Adds new features to enable exporting Babylon assets such as .gltf, .glb, .babylon, and more.",
         keywords: ["export", "gltf", "glb", "babylon", "exporter", "tools"],
+        ...BabylonWebResources,
+        author: { name: "Alex Chuber", forumUserName: "alexchuber" },
         getExtensionModuleAsync: async () => await import("../services/panes/tools/exportService"),
     },
     {
         name: "Capture Tools",
         description: "Adds new features to enable capturing screenshots, GIFs, videos, and more.",
         keywords: ["capture", "screenshot", "gif", "video", "tools"],
+        ...BabylonWebResources,
+        author: { name: "Alex Chuber", forumUserName: "alexchuber" },
         getExtensionModuleAsync: async () => await import("../services/panes/tools/captureService"),
     },
     {
         name: "Import Tools",
         description: "Adds new features related to importing Babylon assets.",
         keywords: ["import", "tools"],
+        ...BabylonWebResources,
+        author: { name: "Alex Chuber", forumUserName: "alexchuber" },
         getExtensionModuleAsync: async () => await import("../services/panes/tools/importService"),
     },
 ]);

packages/dev/inspector-v2/src/extensibility/extensionFeed.ts

@@ -1,11 +1,38 @@
 import type { WeaklyTypedServiceDefinition } from "../modularity/serviceContainer";
 
+export type PersonMetadata = {
+    /**
+     * The name of the person.
+     */
+    readonly name: string;
+
+    /**
+     * The email address of the person.
+     */
+    readonly email?: string;
+
+    /**
+     * The URL to the person's website.
+     */
+    readonly url?: string;
+
+    /**
+     * The Babylon forum username of the person.
+     */
+    readonly forumUserName?: string;
+};
+
 export type ExtensionMetadata = {
     /**
      * The name of the extension.
      */
     readonly name: string;
 
+    /**
+     * The version of the extension (as valid semver).
+     */
+    readonly version?: string;
+
     /**
      * The description of the extension.
      */
@@ -14,7 +41,37 @@ export type ExtensionMetadata = {
     /**
      * The keywords of the extension.
      */
-    readonly keywords: readonly string[];
+    readonly keywords?: readonly string[];
+
+    /**
+     * The URL to the extension homepage.
+     */
+    readonly homepage?: string;
+
+    /**
+     * Specify the place where your code lives. This is helpful for people who want to contribute.
+     */
+    readonly repository?: string;
+
+    /**
+     * The URL to your extension's issue tracker and / or the email address to which issues should be reported. These are helpful for people who encounter issues with your extension.
+     */
+    readonly bugs?: string;
+
+    /**
+     * A license for your package so that people know how they are permitted to use it, and any restrictions you're placing on it.
+     */
+    readonly license?: string;
+
+    /**
+     * The primary author of the extension.
+     */
+    readonly author?: string | PersonMetadata;
+
+    /**
+     * The contributors to the extension.
+     */
+    readonly contributors?: readonly (string | PersonMetadata)[];
 };
 
 export type ExtensionModule = {

packages/dev/inspector-v2/src/modularTool.tsx

@@ -33,7 +33,6 @@ import { ExtensionManagerContext } from "./contexts/extensionManagerContext";
 import { ExtensionManager } from "./extensibility/extensionManager";
 import { SetThemeMode } from "./hooks/themeHooks";
 import { ServiceContainer } from "./modularity/serviceContainer";
-import { ExtensionListServiceDefinition } from "./services/extensionsListService";
 import { MakeShellServiceDefinition, RootComponentServiceIdentity } from "./services/shellService";
 import { ThemeSelectorServiceDefinition } from "./services/themeSelectorService";
 
@@ -134,6 +133,7 @@ export function MakeModularTool(options: ModularToolOptions): IDisposable {
 
                 // Register the extension list service (for browsing/installing extensions) if extension feeds are provided.
                 if (extensionFeeds.length > 0) {
+                    const { ExtensionListServiceDefinition } = await import("./services/extensionsListService");
                     await serviceContainer.addServiceAsync(ExtensionListServiceDefinition);
                 }