🖥️ 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. 🏡

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.

┌──────────────────────────────────────────────────────────────┐
│  🔝 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 :

---

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 ». 🎛️

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.
2. 🖥️ Votre module s'ouvre tel qu'il apparaîtra pour l'utilisateur final.
3. 🎯 Jouez, cliquez, répondez — exactement comme un vrai utilisateur.
4. 🔄 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.

🔺 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. 🚀