> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://documentation.celestory.io/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# L'Interface et les Menus du Creator

# 🖥️ Tutoriel Détaillé : L'Interface et les Menus du Creator
Bienvenue dans le cœur de Celestory : le Creator. C'est l'application web que vous ouvrez dans votre navigateur pour concevoir, tester et publier vos expériences interactives. Ce guide vous fait visiter chaque recoin de son interface pour que vous vous y sentiez chez vous dès la première session. 🏡
---
${frame}[Vidéo : l'interface et les menus du Creator](https://celestory-docs-videos.netlify.app/fr/panorama-ia/interface-et-menus-du-creator.html)

## 1. 🗺️ Vue d'Ensemble de l'Interface
L'écran du Creator tient en trois zones : une barre supérieure, un panneau à gauche, et le canevas qui occupe tout le reste. Les réglages, eux, s'ouvrent dans des **fenêtres flottantes** que vous pouvez déplacer et empiler par-dessus le canevas.
```plain text
┌──────────────────────────────────────────────────────────────┐
│  🔝 BARRE SUPÉRIEURE                                         │
│  Menu du projet · Annuler/Rétablir · Ajouter · Sauvegarder   │
│  Publier · Partager · ▶ Jouer le module courant · Profil     │
├────────────┬─────────────────────────────────────────────────┤
│            │                                                 │
│  📚       │     🗺️  CANEVAS CENTRAL                        │
│  PANNEAU  │     (Le Graphe de Nœuds)                        │
│  MODULES  │                                                 │
│            │     ┌───────────────────────────┐              │
│  Graphes  │     │ 🪟 Fenêtre flottante       │              │
│  Person-  │     │ (édition d'un bloc,        │              │
│  nages    │     │  fichiers, variables…)     │              │
│  Scènes   │     └───────────────────────────┘              │
│  Contexte │                                    🔍 Zoom ↘    │
└────────────┴─────────────────────────────────────────────────┘
```
🔺 Il n'y a **pas** de panneau de propriétés fixé à droite, ni de barre de console en bas : tout ce qui se configure s'ouvre dans une fenêtre flottante.
---
## 2. 🔝 La Barre Supérieure
C'est le ruban permanent situé tout en haut de l'écran. Il rassemble les commandes globales de votre projet.
### 🏠 Le Menu du Projet
-   En haut à gauche, le bouton bleu porte le nom de votre projet. **Le survol de ce bouton ouvre le menu du projet**, d'où s'ouvrent toutes les fenêtres outils (Fichiers, Variables, Menus, Styles…). C'est votre point d'entrée principal : prenez le réflexe d'y aller quand vous cherchez quelque chose.
-   Pour **renommer** votre projet ou revenir à la liste de vos projets, passez par *Projet* dans ce même menu.
### 💾 Sauvegarde
-   **Sauvegarde manuelle** : le bouton disquette, ou le raccourci `Cmd+S` (`Ctrl+S` sous Windows), enregistre votre graphe dans le cloud. 🔺 **Prenez l'habitude de sauvegarder avant toute manipulation délicate** : l'interface n'affiche pas de témoin permanent « enregistré ».
-   **Annuler / Rétablir** : les deux flèches, ou `Cmd+Z` et `Cmd+Shift+Z`.
### ➕ Ajouter un bloc
-   Le bouton `+` ouvre la liste des blocs disponibles, avec un champ de recherche. (Voir §5.)
### ▶️ Prévisualisation & Test
-   **Jouer le module courant** : lance votre module tel que le vivra l'utilisateur final, sans compiler ni publier. 🧪
### 📤 Publication & Export
-   **Publier** : compile votre projet en application web autonome, prête à être partagée ou hébergée.
-   **Partager** : donne accès au projet à d'autres membres de l'équipe.
-   **Import / Export** : depuis le menu du projet, pour archiver un projet ou le transférer vers un autre environnement.
### 👤 Profil
-   À droite, votre avatar donne accès à votre compte et à votre abonnement.
---
## 3. 📚 Le Panneau Modules (à gauche)
Ce panneau affiche l'**architecture de votre projet**, et rien d'autre. Vous pouvez le rendre semi-transparent ou le masquer avec les deux petits boutons de son en-tête.
Un projet Celestory n'est pas un seul graphe monolithique. Il se découpe en **Modules** (sous-graphes indépendants), chacun contenant :
-   **Graphe de départ** : le point d'entrée du module. 🔱
-   **Personnages** : qui parle dans vos dialogues (nom, image, apparence, effet d'entrée).
-   **Scènes** : les arrière-plans disponibles.
-   **Contexte** : ouvre la fenêtre « Variables du projet » (les variables appartiennent au projet entier, pas au module).
-   **Réglages du module** : Personnages, Scènes, Style de l'app, Style des blocs (90 réglages au total, hors CSS).
-   **Graphes globaux** : partagés entre tous les modules.
Le bouton **+ Ajouter** en bas crée un nouveau module. Le bloc *Ouvrir un module* permet d'appeler un module depuis un autre, comme une « fonction » réutilisable. 🌳
### 🪟 Les fenêtres outils
Tout le reste — fichiers, variables, menus… — vit dans des fenêtres ouvertes **depuis le menu du projet** (le bouton bleu en haut à gauche), et non dans ce panneau :
| Fenêtre | À quoi elle sert | Raccourci |
|---|---|---|
| Projet | Renommer, revenir à la liste | |
| Rechercher des blocs | Retrouver un bloc dans un gros graphe | `Cmd+Shift+F` |
| Historique | Les versions précédentes du projet | `Cmd+Shift+H` |
| Labels | Organiser vos blocs par étiquettes | `Cmd+Shift+L` |
| Fichiers | Votre médiathèque (images, sons, vidéos, polices…) | `Cmd+Shift+E` |
| Variables | Le registre des variables du projet | `Cmd+Shift+V` |
| Menus | Les pages de menu de votre app | `Cmd+Shift+U` |
| Générer | Texte, image, vidéo, audio, et connecteurs | `Cmd+Shift+G` |
| Style | Le thème de votre application | `Cmd+Shift+X` |
| Analytiques | L'usage réel de votre app | `Cmd+Shift+A` |
| Intégrations | Vos connexions externes | |
| Traduire | Les langues de votre app | `Cmd+Shift+K` |
| Réglages du projet | | `Cmd+Shift+,` |
---
## 4. 🪟 La Fenêtre d'Édition d'un Bloc
C'est ici que se règle le détail de chaque nœud, et c'est le geste le plus fréquent de tout l'outil.
### 👉 Double-cliquez sur un bloc
Un **clic simple** ne fait que **sélectionner** le bloc (il se borde de bleu) — utile pour le déplacer ou le supprimer. Pour ouvrir ses réglages, il faut **double-cliquer**. Une fenêtre flottante s'ouvre, intitulée « Édition du bloc <nom> ». 🎛️
### Ce que vous y trouvez :
-   **Titre personnalisé** : renommez le bloc pour vous repérer dans un graphe complexe (ex : « Dialogue — Intro niveau 2 »).
-   **Les entrées et leurs liens** : chaque point d'entrée est listé, avec un bouton *Déconnecter* si un lien y arrive déjà.
-   **Les champs propres au bloc** : ils changent d'un bloc à l'autre. Un bloc Dialogue propose un personnage et un éditeur de texte ; un bloc Image, un sélecteur de fichier ; un bloc Condition, une règle logique.
-   **Éditer le style du bloc**, quand le lien est présent : ⚠️ malgré son nom, il ouvre l'apparence **du module entier**, pas celle de ce bloc-là. Le lien n'apparaît que sur les familles de blocs qui ont une section d'apparence, et seulement dans un module Chatbot.
🔺 La fenêtre reste ouverte pendant que vous travaillez sur le canevas ; vous pouvez la déplacer par son en-tête, la redimensionner, et en ouvrir plusieurs à la fois. Les blocs CSS, HTML5 et *Exécuter Javascript* y ouvrent un véritable éditeur de code.
🔺 Deux pièges : un double-clic sur un **lien** (et non sur un bloc) insère un bloc Connecteur ; et **changer de module ferme toutes les fenêtres d'édition ouvertes**.
---
## 5. 🗺️ Le Canevas Central (Le Graphe)
C'est la zone la plus grande et la plus importante — l'espace infini dans lequel vous construisez votre création. (Voir le tutoriel dédié : L'Interface du Graphe.)
### Les gestes essentiels :
-   🤚 **Se déplacer** : clic gauche sur le vide + glisser.
-   🔍 **Zoomer** : molette de la souris, ou les boutons en bas à droite (dont un bouton « tout afficher »).
-   🧱 **Ajouter un bloc** : bouton `+` de la barre supérieure, ou **clic droit → Ajouter un bloc**. Une liste s'ouvre, avec en haut un **champ de recherche**, puis deux sections : **Blocs les plus utilisés** et **Autres blocs** (par ordre alphabétique). Tapez les premières lettres — c'est de loin le plus rapide. Un clic sur le nom ajoute le bloc. Une ⭐ signale un bloc réservé à l'abonnement Business, avec l'étiquette « ENTREPRISE » (HTML5, Requête HTTP, MCP, Caméra… pas seulement les blocs IA).
-   🔗 **Relier deux blocs** : cliquez sur un point et tirez le fil jusqu'au point cible.
-   ⚙️ **Configurer un bloc** : **double-clic** (voir §4).
-   🗑️ **Supprimer** : sélectionnez, puis `Suppr` ou `Retour arrière`.
🔺 Un bloc que vous venez d'ajouter se place à un endroit par défaut du canevas : il peut **recouvrir un bloc existant**. Si votre nouveau bloc semble ne pas être apparu, déplacez-le — l'ancien est probablement dessous.
### 📋 Le Menu Contextuel (Clic Droit)
Un clic droit, sur le canevas comme sur un bloc, ouvre un menu court :
-   💬 **Commentaire** : pose une note libre sur le canevas, pour vous ou votre équipe.
-   ➕ **Ajouter un bloc**.
-   📋 **Coller**, quand quelque chose a été copié auparavant.
Les autres actions (copier, supprimer) passent par les raccourcis clavier du §7.
---
## 6. 🎮 La Prévisualisation (Le Mode Test)
Un des atouts majeurs de Celestory : vous pouvez tester votre expérience en temps réel sans jamais quitter le Creator. 🧪
### Comment ça marche :
1. ▶️ Cliquez sur **Jouer le module courant** dans la barre supérieure.
1. 🖥️ Votre module s'ouvre tel qu'il apparaîtra pour l'utilisateur final.
1. 🎯 Jouez, cliquez, répondez — exactement comme un vrai utilisateur.
1. 🔄 Revenez à l'éditeur, modifiez un bloc, relancez : le cycle est instantané.
🔺 Pensez à sauvegarder (`Cmd+S`) avant de lancer un test, pour être sûr de jouer la dernière version.
---
## 7. ⌨️ Les Raccourcis Essentiels
Sous Windows et Linux, remplacez `Cmd` par `Ctrl`. La liste complète, canevas compris, est dans
l'article dédié **Les Raccourcis Clavier du Creator**.

| Action | Raccourci |
|---|---|
| Sauvegarder | `Cmd+S` |
| Annuler / Rétablir | `Cmd+Z` / `Cmd+Shift+Z` |
| Tout sélectionner · Copier · Coller | `Cmd+A` · `Cmd+C` · `Cmd+V` |
| Grouper les blocs sélectionnés | `Cmd+G` |
| Supprimer (blocs, liens, groupes) | `Suppr` ou `Retour arrière` |
| Zoomer / dézoomer · Ajuster · Recentrer | `+` / `-` · `F` · `C` |
| Rechercher un bloc | `Cmd+Shift+F` |
| Fichiers · Variables · Menus | `Cmd+Shift+E` · `Cmd+Shift+V` · `Cmd+Shift+U` |
| Générer (Génération IA) | `Cmd+Shift+G` |
| Historique · Style · Labels | `Cmd+Shift+H` · `Cmd+Shift+X` · `Cmd+Shift+L` |
| Traduire · Analytiques | `Cmd+Shift+K` · `Cmd+Shift+A` |
| Réglages du projet | `Cmd+Shift+,` |

🔺 Quelques combinaisons apparaissent dans les infobulles ou les menus sans être actives au clavier :
`Maj+P` (Jouer), `Maj+S` (Partager), `Maj+B` (Publier), `Cmd+Shift+I` (Intégrations) et `F1`.
Utilisez les boutons de la barre supérieure pour ces quatre-là.

---

→ Prochaine étape : maintenant que vous savez où tout se trouve, plongez dans le canevas avec le tutoriel **L'Interface du Graphe**. 🚀