From 7bde0b8349f77aaac6b530df04c9185af5749198 Mon Sep 17 00:00:00 2001
From: zhadn <5179225+AndrewDiMola@users.noreply.github.com>
Date: Wed, 15 Apr 2026 17:46:35 -0400
Subject: [PATCH] Add examples for getCurrentMode, isMode, and enriched
 subscribe

Covers the extended app modes work on the docs side (openapi-internal
PR #790):

- getCurrentMode: reads the current Designer mode and logs a
  mode-specific message.
- isMode: checks whether the Designer is in Design mode and notifies
  the user when it is not.
- subscribeAppModesEnriched: subscribes to currentappmode using the new
  event argument, demonstrating how the callback can read event.mode
  and event.appModes without a separate canForAppMode() call.

Leaves the existing checkAppMode and subscribeAppModes methods intact
to preserve the legacy pattern for reference.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/examples/utilities.ts | 58 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 58 insertions(+)

diff --git a/src/examples/utilities.ts b/src/examples/utilities.ts
index 5b639bf..e9a3c74 100644
--- a/src/examples/utilities.ts
+++ b/src/examples/utilities.ts
@@ -73,6 +73,46 @@ export const Utilities = {
     console.log(capabilities)
   },
 
+  getCurrentMode: async () => {
+    // Read the Designer mode the user is currently in
+    const mode = await webflow.getCurrentMode()
+    console.log('Current Designer mode:', mode)
+
+    switch (mode) {
+      case 'design':
+        console.log('The user is in Design mode.')
+        break
+      case 'build':
+        console.log('The user is editing CMS content on the canvas.')
+        break
+      case 'preview':
+        console.log('The user is viewing a read-only site preview.')
+        break
+      case 'edit':
+        console.log('The user is in the Editor outside the canvas.')
+        break
+      case 'comment':
+        console.log('The user is annotating and commenting.')
+        break
+      case null:
+        console.log('The Designer is not in a public mode.')
+        break
+    }
+  },
+
+  isMode: async () => {
+    // Check whether the Designer is in a single specific mode
+    const isDesign = await webflow.isMode('design')
+    console.log(`Designer is in Design mode: ${isDesign}`)
+
+    if (!isDesign) {
+      await webflow.notify({
+        type: 'Info',
+        message: 'Switch to Design mode to run layout-editing actions.',
+      })
+    }
+  },
+
   checkAppConnection: async () => {
     // Check for current app connection
     const appConnection = await webflow.getCurrentAppConnection()
@@ -193,6 +233,24 @@ export const Utilities = {
     )
   },
 
+  subscribeAppModesEnriched: async () => {
+    // The enriched callback receives the new mode and a full snapshot of
+    // the user's capability booleans, so no extra canForAppMode() call is needed.
+    const unsubscribe = webflow.subscribe('currentappmode', (event) => {
+      console.log('New mode:', event.mode)
+      console.log('Capabilities:', event.appModes)
+
+      if (event.appModes.canDesign) {
+        console.log('Design tools are available.')
+      } else {
+        console.log('Design tools are not available in this mode.')
+      }
+    })
+
+    // Stop listening after 30 seconds
+    setTimeout(unsubscribe, 30000)
+  },
+
   subscribePseudoMode: async () => {
     // Subscribe to changes in the pseudo mode
     const pseudoModeCallback = (pseudoMode: PseudoStateKey | null) => {