feat: Experience field swap extension

genstudio-mlr-claims-app/package.json

@@ -3,7 +3,7 @@
   "version": "0.2.0",
   "private": true,
   "dependencies": {
-    "@adobe/genstudio-extensibility-sdk": "^4.4.0",
+    "@adobe/genstudio-extensibility-sdk": "^4.5.0",
     "@adobe/uix-guest": "^1.0.0",
     "@adobe/aio-sdk": "^6.0.0",
     "@react-spectrum/s2": "^0.9.0",

genstudio-mlr-claims-app/src/genstudiopem/web-src/src/Constants.ts

@@ -17,6 +17,7 @@ export const ICON_DATA_URI: string =
 
 export const VALIDATION_PANEL_ROUTE: string = "/validation-panel";
 export const PROMPT_DIALOG_ROUTE: string = "/prompt-dialog";
+export const FRAGMENT_SWAP_DIALOG_ROUTE: string = "/fragment-swap-dialog";
 
 /**
  * App metadata object

genstudio-mlr-claims-app/src/genstudiopem/web-src/src/app/App.tsx

@@ -18,7 +18,12 @@ import { style } from "@react-spectrum/s2/style" with {type: 'macro'};
 import ExtensionRegistration from "./ExtensionRegistration";
 import ValidationPanel from "../components/ValidationPanel";
 import PromptDialog from "../components/PromptDialog";
-import { PROMPT_DIALOG_ROUTE, VALIDATION_PANEL_ROUTE } from "../Constants";
+import FragmentSwapDialog from "../components/FragmentSwapDialog";
+import {
+  FRAGMENT_SWAP_DIALOG_ROUTE,
+  PROMPT_DIALOG_ROUTE,
+  VALIDATION_PANEL_ROUTE,
+} from "../Constants";
 
 const ErrorFallback = () => <Heading>Something went wrong!</Heading>;
 
@@ -35,6 +40,10 @@ const App = (): React.JSX.Element => {
             <Route path="/" element={<ExtensionRegistration />} />
             <Route path={VALIDATION_PANEL_ROUTE} element={<ValidationPanel />} />
             <Route path={PROMPT_DIALOG_ROUTE} element={<PromptDialog />} />
+            <Route
+              path={FRAGMENT_SWAP_DIALOG_ROUTE}
+              element={<FragmentSwapDialog />}
+            />
           </Routes>
         </Router>
       </S2Provider>

genstudio-mlr-claims-app/src/genstudiopem/web-src/src/app/ExtensionRegistration.tsx

@@ -21,10 +21,12 @@ import {
   APP_METADATA,
   VALIDATION_PANEL_ROUTE,
   PROMPT_DIALOG_ROUTE,
+  FRAGMENT_SWAP_DIALOG_ROUTE,
 } from "../Constants";
 import {
   App,
   AppMetadata,
+  FragmentSwapExtensionService,
   PromptExtensionService,
   ValidationExtensionService,
   Toggle,
@@ -88,6 +90,26 @@ const ExtensionRegistration = (): React.JSX.Element => {
             ];
           },
         },
+        fragmentSwapExtension: {
+          getToggles: async (id: string): Promise<Toggle[]> => {
+            return [
+              {
+                metadata: getAppMetadata(id),
+                onClick: async () => {
+                  FragmentSwapExtensionService.open(guestConnection as any, id);
+                },
+              },
+            ];
+          },
+          getApps(id: string): App[] {
+            return [
+              {
+                metadata: getAppMetadata(id),
+                url: `#${FRAGMENT_SWAP_DIALOG_ROUTE}`,
+              },
+            ];
+          },
+        },
       },
     });
   };

genstudio-mlr-claims-app/src/genstudiopem/web-src/src/components/FragmentSwapDialog/index.tsx

@@ -0,0 +1,110 @@
+/*
+ * Copyright 2026 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import { FragmentSwapExtensionService } from "@adobe/genstudio-extensibility-sdk";
+import { Heading, ProgressCircle, Text } from "@react-spectrum/s2";
+import { style } from "@react-spectrum/s2/style" with { type: "macro" };
+import React, { useMemo, useState } from "react";
+import { EXTENSION_ID } from "../../Constants";
+import { useAuth, useClaimActions, useGuestConnection } from "../../hooks";
+
+const listStyle = style({
+  display: "flex",
+  flexDirection: "column",
+  gap: 8,
+  marginTop: 12,
+});
+
+const itemStyle = style({
+  padding: 12,
+  borderRadius: "default",
+  borderWidth: 2,
+  borderStyle: "solid",
+  cursor: "pointer",
+  textAlign: "start",
+});
+
+export default function FragmentSwapDialog(): React.JSX.Element {
+  const guestConnection = useGuestConnection(EXTENSION_ID);
+  const auth = useAuth(guestConnection);
+  const { claimLibraries, isLoadingClaims, error } = useClaimActions(auth);
+  const [selectedClaimId, setSelectedClaimId] = useState<string | null>(null);
+
+  const flatClaims = useMemo(() => {
+    return (claimLibraries ?? []).flatMap((lib) =>
+      lib.claims.map((claim) => ({
+        libraryName: lib.name,
+        claim,
+      })),
+    );
+  }, [claimLibraries]);
+
+  const handleClaimSelect = (claimId: string, description: string): void => {
+    setSelectedClaimId(claimId);
+    if (guestConnection) {
+      FragmentSwapExtensionService.setSwapValue(guestConnection, description);
+    }
+  };
+
+  if (isLoadingClaims) {
+    return (
+      <div
+        style={{
+          height: "100vh",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+        }}
+      >
+        <ProgressCircle aria-label="Loading claims" isIndeterminate />
+      </div>
+    );
+  }
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: 12,
+        padding: 16,
+      }}
+    >
+      <Heading>Pick a claim to swap in</Heading>
+      {error && <Text>{error}</Text>}
+      <div className={listStyle}>
+        {flatClaims.length === 0 && <Text>No claims available.</Text>}
+        {flatClaims.map(({ libraryName, claim }) => {
+          const isSelected = claim.id === selectedClaimId;
+          return (
+            <button
+              key={claim.id}
+              type="button"
+              onClick={() => handleClaimSelect(claim.id, claim.description)}
+              className={itemStyle}
+              style={{
+                borderColor: isSelected ? "#1473e6" : "#d0d0d0",
+                backgroundColor: isSelected ? "#e8f0fe" : "white",
+                fontWeight: isSelected ? 600 : 400,
+              }}
+            >
+              <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
+                <Text>{libraryName}</Text>
+                <Text>{claim.description}</Text>
+              </div>
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}