Add a dynamic preview before updating palette

package.json

@@ -66,8 +66,9 @@
     "webpack-cli": "^4.9.1"
   },
   "dependencies": {
-    "@a_ng_d/figmug-ui": "^0.112.2",
+    "@a_ng_d/figmug-ui": "^0.113.6",
     "@a_ng_d/figmug-utils": "^0.1.2",
+    "@nanostores/preact": "^0.5.2",
     "@sentry/react": "^8.8.0",
     "@sentry/webpack-plugin": "^2.22.6",
     "@supabase/supabase-js": "^2.44.2",

src/bridges/checks/checkUserPreferences.ts

@@ -0,0 +1,43 @@
+const checkUserPreferences = async () => {
+  const isWCAGDisplayed =
+    await figma.clientStorage.getAsync('is_wcag_displayed')
+  const isAPCADisplayed =
+    await figma.clientStorage.getAsync('is_apca_displayed')
+  const canDeepSyncPalette = await figma.clientStorage.getAsync(
+    'can_deep_sync_palette'
+  )
+  const canDeepSyncVariables = await figma.clientStorage.getAsync(
+    'can_deep_sync_variables'
+  )
+  const canDeepSyncStyles = await figma.clientStorage.getAsync(
+    'can_deep_sync_styles'
+  )
+
+  if (isWCAGDisplayed === undefined)
+    await figma.clientStorage.setAsync('is_wcag_displayed', true)
+  if (isAPCADisplayed === undefined)
+    await figma.clientStorage.setAsync('is_apca_displayed', true)
+  if (canDeepSyncPalette === undefined)
+    await figma.clientStorage.setAsync('can_deep_sync_palette', false)
+
+  if (canDeepSyncVariables === undefined)
+    await figma.clientStorage.setAsync('can_deep_sync_variables', false)
+
+  if (canDeepSyncStyles === undefined)
+    await figma.clientStorage.setAsync('can_deep_sync_styles', false)
+
+  figma.ui.postMessage({
+    type: 'CHECK_USER_PREFERENCES',
+    data: {
+      isWCAGDisplayed: isWCAGDisplayed ?? true,
+      isAPCADisplayed: isAPCADisplayed ?? true,
+      canDeepSyncPalette: canDeepSyncPalette ?? false,
+      canDeepSyncVariables: canDeepSyncVariables ?? false,
+      canDeepSyncStyles: canDeepSyncStyles ?? false,
+    },
+  })
+
+  return true
+}
+
+export default checkUserPreferences

src/bridges/loadUI.ts

@@ -5,6 +5,7 @@ import checkEditorType from './checks/checkEditorType'
 import checkHighlightStatus from './checks/checkHighlightStatus'
 import checkPlanStatus from './checks/checkPlanStatus'
 import checkUserConsent from './checks/checkUserConsent'
+import checkUserPreferences from './checks/checkUserPreferences'
 import createLocalStyles from './creations/createLocalStyles'
 import createLocalVariables from './creations/createLocalVariables'
 import createPalette from './creations/createPalette'
@@ -48,6 +49,7 @@ const loadUI = async () => {
   checkUserConsent()
     .then(() => checkEditorType())
     .then(() => checkPlanStatus())
+    .then(() => checkUserPreferences())
     .then(() => processSelection())
 
   // Canvas > UI