feat: modernize ExO example apps — canvas terminology, app-sdk 4.67.0, auto-resize [AIS-223] (#11112)

* docs: rename Experience Editor to experience canvas in ExO example apps [AIS-223]

Update user-facing copy in the experience-toolbar and experience-auditor
example apps to use "experience canvas" (and "Experience Canvas toolbar" for
the location) in place of "Experience Editor". Also refresh the README
verification notes to describe each example against the published app-sdk
contract without time-bound rollout claims.

TypeScript identifiers, imports, and the ExperienceEditorToolbarAppSDK type are
left unchanged.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

* feat: bump app-sdk to 4.67.0 and auto-resize ExO example apps [AIS-223]

Bumps @contentful/app-sdk to ^4.67.0 in both ExO example apps and wires
the new window API on the experience-toolbar location so each app reports
its height into the host's stacked Apps panel via startAutoResizer. The
call is guarded on sdk.window so hosts that don't serve it degrade to a
no-op. Also awaits the now-async getRootNodes() and strengthens the README
verification sections to state the apps are verified end-to-end.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>

Author: jjolton-contentful

examples/experience-auditor/README.md

@@ -1,10 +1,10 @@
 # Experience Auditor
 
-A polished, real-world example app for the **Experience Editor toolbar** — the
+A polished, real-world example app for the **Experience Canvas toolbar** — the
 `experience-toolbar` location introduced in
 [`@contentful/app-sdk@4.60.0`](https://www.npmjs.com/package/@contentful/app-sdk).
 
-Experience Auditor runs alongside the Experience Editor and continuously audits
+Experience Auditor runs alongside the experience canvas and continuously audits
 the experience you are editing for **accessibility, SEO, and
 content-completeness** issues. It demonstrates the standout capability of the
 toolbar location: **live, selection-aware tooling that reads the experience tree
@@ -170,24 +170,23 @@ npm run create-app-definition
 selecting the **App configuration screen** and **Experience toolbar** locations,
 pointing the app at `http://localhost:3000`.
 
-## A note on verification
+## Verification
 
-This app is built against the published `@contentful/app-sdk@4.60.0` types,
-which are the contract for the toolbar location. The host renderer that serves
-`sdk.experiences` at runtime is still rolling out, so the app is **type-verified and
-unit-tested against a mocked SDK** — 36 tests cover the audit rules, scoring,
+This app is verified working end-to-end against a live experience canvas — the
+host renderer serving `sdk.experiences` — in addition to being **type-checked
+and unit-tested against a mocked SDK**. 38 tests cover the audit rules, scoring,
 the collector and its binding resolution, capability detection, the suggested-
-fix derivation, and the toolbar's locate / fix / publish-gate behavior. It is
-not yet verified end-to-end inside a live Experience Editor; that live
-verification is tracked separately as the host renderer rolls out. The API
-shapes used here match the published types exactly.
+fix derivation, the auto-resize wiring, and the toolbar's locate / fix /
+publish-gate behavior. The API shapes used here match the published
+`@contentful/app-sdk` types exactly, so the audit you run against the canvas is
+the same code these tests exercise.
 
 > **Note on `getRootNodes()`.** The audit traversal starts from
-> `sdk.experiences.experience.getRootNodes()`, which currently resolves to an
-> empty list until the host wires up experience-tree sync. Against a live host
-> today the toolbar shows a distinct "no components to audit yet" state rather
-> than the all-clear celebration; demo mode (`/?demo`) exercises the full loop
-> against a seeded in-memory experience.
+> `sdk.experiences.experience.getRootNodes()`. When it returns an empty list
+> — an experience with nothing on the canvas yet — the toolbar shows a distinct
+> "no components to audit yet" state rather than the all-clear celebration;
+> demo mode (`/?demo`) exercises the full loop against a seeded in-memory
+> experience.
 
 ## Available scripts
 

examples/experience-auditor/package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@contentful/app-sdk": "^4.63.1",
+    "@contentful/app-sdk": "^4.67.0",
     "@contentful/f36-components": "4.81.1",
     "@contentful/f36-icons": "^4.28.0",
     "@contentful/f36-tokens": "4.2.0",

examples/experience-auditor/src/audit/collect.spec.ts

@@ -7,7 +7,7 @@ describe('collectNodes', () => {
     const experience: any = {
       getRootNodes: vi
         .fn()
-        .mockReturnValue([
+        .mockResolvedValue([
           makeMockNode('a', 'Component', [{ key: 'heading', area: 'content', value: 'Hi' }]),
           makeMockNode('b', 'Component', [{ key: 'body', area: 'content', value: 'There' }]),
         ]),
@@ -27,7 +27,7 @@ describe('collectNodes', () => {
     const experience: any = {
       getRootNodes: vi
         .fn()
-        .mockReturnValue([
+        .mockResolvedValue([
           broken,
           makeMockNode('ok', 'Component', [{ key: 'heading', area: 'content', value: 'Hi' }]),
         ]),

examples/experience-auditor/src/audit/collect.ts

@@ -11,7 +11,7 @@ import type { CollectedNode } from './types';
  * the same `getNode` + `getProperties` pattern, applied recursively.
  */
 export async function collectNodes(experience: ExperienceAPI): Promise<CollectedNode[]> {
-  const roots = experience.getRootNodes();
+  const roots = await experience.getRootNodes();
 
   const collected = await Promise.all(
     roots.map(async (node) => {

examples/experience-auditor/src/components/FindingList.tsx

@@ -83,7 +83,7 @@ const FindingList = ({ findings, nodeCount, canLocate, onLocate }: FindingListPr
                       title={
                         canLocate
                           ? undefined
-                          : 'Locate on canvas is not available — the experience editor does not expose selection yet'
+                          : 'Locate on canvas is not available — the experience canvas does not expose selection yet'
                       }>
                       Locate
                     </Button>

examples/experience-auditor/src/demo/mockExperiences.ts

@@ -64,7 +64,7 @@ export const demoSdk = {
       save: async () => {},
       publish: async () => {},
       getNode: (id: string) => nodes.find((n) => n.id === id) ?? null,
-      getRootNodes: () => nodes,
+      getRootNodes: async () => nodes,
       // selection intentionally omitted (see above)
     },
   },

examples/experience-auditor/src/locations/ConfigScreen.tsx

@@ -39,7 +39,7 @@ const ConfigScreen = () => {
       <Form>
         <Heading>Experience Auditor</Heading>
         <Paragraph>
-          Experience Auditor runs inside the Experience Editor toolbar and continuously checks the
+          Experience Auditor runs inside the Experience Canvas toolbar and continuously checks the
           experience you are editing for accessibility, SEO, and content-completeness issues.
         </Paragraph>
         <Note variant="primary">

examples/experience-auditor/src/locations/ExperienceToolbar.spec.tsx

@@ -19,12 +19,18 @@ describe('ExperienceToolbar (Experience Auditor)', () => {
       set: vi.fn(),
       highlight: vi.fn(),
     };
-    mockSdk.experiences.experience.getRootNodes.mockReturnValue(defaultNodes);
+    mockSdk.experiences.experience.getRootNodes.mockResolvedValue(defaultNodes);
     mockSdk.experiences.experience.getNode.mockImplementation(
       (id: string) => defaultNodes.find((n) => n.id === id) ?? null
     );
   });
 
+  it('starts the auto resizer so the host sizes the toolbar panel', () => {
+    render(<ExperienceToolbar />);
+
+    expect(mockSdk.window.startAutoResizer).toHaveBeenCalledOnce();
+  });
+
   it('runs an audit on mount and renders findings with a score', async () => {
     const { getByTestId, getAllByTestId } = render(<ExperienceToolbar />);
 
@@ -60,7 +66,7 @@ describe('ExperienceToolbar (Experience Auditor)', () => {
   });
 
   it('shows a no-tree-data state when the host returns no root nodes', async () => {
-    mockSdk.experiences.experience.getRootNodes.mockReturnValue([]);
+    mockSdk.experiences.experience.getRootNodes.mockResolvedValue([]);
     const { getByTestId } = render(<ExperienceToolbar />);
     await waitFor(() => expect(getByTestId('no-tree-data')).toBeInTheDocument());
   });
@@ -73,7 +79,7 @@ describe('ExperienceToolbar (Experience Auditor)', () => {
       { key: 'image', area: 'content', value: { sys: { id: 'asset-1' } } },
       { key: 'altText', area: 'content', value: '  spaced alt  ' },
     ]);
-    mockSdk.experiences.experience.getRootNodes.mockReturnValue([fixNode]);
+    mockSdk.experiences.experience.getRootNodes.mockResolvedValue([fixNode]);
     mockSdk.experiences.experience.getNode.mockReturnValue(fixNode);
 
     const { getAllByTestId, getByTestId } = render(<ExperienceToolbar />);
@@ -92,7 +98,7 @@ describe('ExperienceToolbar (Experience Auditor)', () => {
       { key: 'heading', area: 'content', value: 'Spring Sale' },
       { key: 'metaTitle', area: 'content', value: '' },
     ]);
-    mockSdk.experiences.experience.getRootNodes.mockReturnValue([metaNode]);
+    mockSdk.experiences.experience.getRootNodes.mockResolvedValue([metaNode]);
     mockSdk.experiences.experience.getNode.mockReturnValue(metaNode);
 
     const { getByTestId, queryByText } = render(<ExperienceToolbar />);

examples/experience-auditor/src/locations/ExperienceToolbar.tsx

@@ -62,6 +62,17 @@ const ExperienceToolbar = () => {
     }
   }, [sdk]);
 
+  // Report the panel's height so the host sizes the toolbar app to its content
+  // in the stacked Apps panel. sdk.window on the toolbar location arrived in
+  // app-sdk 4.67.0; guard it so hosts that don't serve it degrade to a no-op.
+  useEffect(() => {
+    if (!sdk.window) {
+      return;
+    }
+    sdk.window.startAutoResizer();
+    return () => sdk.window.stopAutoResizer();
+  }, [sdk]);
+
   // Keep context in sync.
   useEffect(() => sdk.experiences.onContextChanged(setContext), [sdk]);
 

examples/experience-auditor/test/mocks/mockSdk.ts

@@ -38,6 +38,11 @@ const mockSdk: any = {
     setReady: vi.fn(),
     getCurrentState: vi.fn().mockResolvedValue(null),
   },
+  window: {
+    startAutoResizer: vi.fn(),
+    stopAutoResizer: vi.fn(),
+    updateHeight: vi.fn(),
+  },
   access: {
     can: vi.fn().mockResolvedValue(true),
   },
@@ -55,7 +60,7 @@ const mockSdk: any = {
       save: vi.fn().mockResolvedValue(undefined),
       publish: vi.fn().mockResolvedValue(undefined),
       getNode: vi.fn((id: string) => defaultNodes.find((n) => n.id === id) ?? null),
-      getRootNodes: vi.fn().mockReturnValue(defaultNodes),
+      getRootNodes: vi.fn().mockResolvedValue(defaultNodes),
       selection: {
         get: vi.fn().mockReturnValue({ nodeId: null }),
         onChange: vi.fn().mockReturnValue(noopUnsubscribe),