silex_ui 0.2.0 → 0.8.0

data/app/views/silex_ui/catalogue/show.html.erb

@@ -1,251 +1,396 @@
 <% content_for :title, "Catalogue — silex_ui #{SilexUi::VERSION}" %>
 
-<div class="mx-auto min-h-screen max-w-6xl px-6 pb-24">
+<div class="min-h-screen bg-surface-50">
   <%= render SilexUi::PageHeaderComponent.new(
         title: "silex_ui",
+        icon: "sparkles",
         subtitle: "Le design system des applications Le Silex — version #{SilexUi::VERSION}.",
         document_title: false) do |header| %>
-    <% header.with_meta do %>
-      <p class="text-xs text-ink-400">
-        Cette page n'existe qu'en développement. Chaque composant y figure dans toutes ses variantes :
-        ce qui manque ici manque au design system.
-      </p>
+    <% header.with_actions do %>
+      <%= render SilexUi::ThemeToggleComponent.new %>
     <% end %>
-  <% end %>
 
-  <%= render SilexUi::SectionComponent.new(title: "Palette", class: "mt-4") do %>
-    <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
-      <% {
-           "sand — le sol" => %w[bg-sand-50 bg-sand-100 bg-sand-200 bg-sand-300],
-           "ink — le texte" => %w[bg-ink-300 bg-ink-400 bg-ink-600 bg-ink-900],
-           "alert — ce qui a lapsé" => %w[bg-alert-50 bg-alert-100 bg-alert-300 bg-alert-700],
-           "warn — ce qui bascule" => %w[bg-warn-50 bg-warn-100 bg-warn-300 bg-warn-700],
-           "ok — ce qui est en règle" => %w[bg-ok-50 bg-ok-100 bg-ok-300 bg-ok-700],
-           "info — sans urgence" => %w[bg-info-50 bg-info-100 bg-info-300 bg-info-700]
-         }.each do |family, swatches| %>
-        <div>
-          <p class="mb-2 text-xs font-light tracking-widest text-ink-400 uppercase"><%= family %></p>
-          <div class="flex overflow-hidden rounded-sm border border-sand-200">
-            <% swatches.each do |swatch| %>
-              <div class="h-12 flex-1 <%= swatch %>" title="<%= swatch %>"></div>
-            <% end %>
-          </div>
-          <p class="mt-1 text-xs font-light text-ink-300"><%= swatches.map { |s| s.split("-").last }.join(" · ") %></p>
-        </div>
-      <% end %>
-    </div>
+    <% header.with_crumb label: "Design system" %>
+    <% header.with_crumb label: "Catalogue" %>
   <% end %>
 
-  <%= render SilexUi::SectionComponent.new(title: "Typographie", class: "mt-12") do %>
-    <div class="space-y-3">
-      <p class="text-lg font-light tracking-[0.2em] text-ink-900 uppercase">Titre de page</p>
-      <p class="text-xs font-light tracking-widest text-ink-400 uppercase">Titre de section</p>
-      <p class="text-sm font-light text-ink-600">Texte courant — la graisse légère est la graisse par défaut.</p>
-      <p class="text-xs font-light text-ink-400">Mention secondaire, pour ce qui accompagne sans appeler.</p>
-    </div>
-  <% end %>
+  <div class="mx-auto max-w-6xl px-6 pb-24">
+    <p class="py-6 text-sm text-ink-500">
+      Cette page n'existe qu'en développement. Chaque composant y figure dans toutes ses variantes :
+      ce qui manque ici manque au design system.
+    </p>
 
-  <%= render SilexUi::SectionComponent.new(title: "Boutons", class: "mt-12") do %>
-    <%= render layout: "silex_ui/catalogue/specimen",
-          locals: { title: "Variantes", code: 'SilexUi::ButtonComponent.new(label: "Ajouter", href: "#", variant: :primary)' } do %>
-      <div class="flex flex-wrap items-center gap-3">
-        <% SilexUi::ButtonComponent::VARIANTS.each_key do |variant| %>
-          <%= render SilexUi::ButtonComponent.new(label: variant.to_s.titleize, href: "#", variant: variant) %>
+    <%= render SilexUi::SectionComponent.new(title: "Palette", icon: "sliders") do %>
+      <div class="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
+        <% {
+             "surface — les fonds" => %w[bg-surface-0 bg-surface-50 bg-surface-100 bg-surface-200 bg-surface-300],
+             "ink — le texte" => %w[bg-ink-300 bg-ink-400 bg-ink-500 bg-ink-700 bg-ink-900],
+             "brand — l'accent" => %w[bg-brand-50 bg-brand-100 bg-brand-300 bg-brand-500 bg-brand-700],
+             "ok — ce qui est en règle" => %w[bg-ok-50 bg-ok-100 bg-ok-300 bg-ok-500 bg-ok-700],
+             "warn — ce qui bascule" => %w[bg-warn-50 bg-warn-100 bg-warn-300 bg-warn-500 bg-warn-700],
+             "alert — ce qui a lapsé" => %w[bg-alert-50 bg-alert-100 bg-alert-300 bg-alert-500 bg-alert-700],
+             "info — sans urgence" => %w[bg-info-50 bg-info-100 bg-info-300 bg-info-500 bg-info-700],
+             "catégories" => %w[bg-purple-500 bg-pink-500 bg-teal-500 bg-cyan-500 bg-ink-400]
+           }.each do |family, swatches| %>
+          <div>
+            <p class="mb-2 text-[13px] font-semibold text-ink-700"><%= family %></p>
+            <div class="flex overflow-hidden rounded-badge border border-surface-200">
+              <% swatches.each do |swatch| %>
+                <div class="h-11 flex-1 <%= swatch %>" title="<%= swatch %>"></div>
+              <% end %>
+            </div>
+          </div>
         <% end %>
       </div>
     <% end %>
 
-    <%= render layout: "silex_ui/catalogue/specimen", locals: { title: "Tailles" } do %>
-      <div class="flex flex-wrap items-center gap-3">
-        <% SilexUi::ButtonComponent::SIZES.each_key do |size| %>
-          <%= render SilexUi::ButtonComponent.new(label: size.to_s, href: "#", size: size) %>
-        <% end %>
+    <%= render SilexUi::SectionComponent.new(title: "Typographie", icon: "document", class: "mt-12") do |section| %>
+      <% section.with_actions do %>
+        <p class="text-xs text-ink-400">Atkinson Hyperlegible — la police du Silex, dessinée pour la lisibilité</p>
+      <% end %>
+
+      <div class="space-y-3 rounded-surface border border-surface-200 bg-surface-0 p-5">
+        <p class="text-2xl font-bold text-ink-900">Titre de page</p>
+        <p class="text-[13px] font-bold tracking-wider text-ink-700 uppercase">Titre de section</p>
+        <p class="text-sm text-ink-900">Texte courant — ce qu'on lit vraiment.</p>
+        <p class="text-[13px] text-ink-500">Libellé secondaire, sous un chiffre ou devant un champ.</p>
+        <p class="text-xs text-ink-400">Mention discrète, pour ce qui accompagne sans appeler.</p>
       </div>
     <% end %>
-  <% end %>
 
-  <%= render SilexUi::SectionComponent.new(title: "Badges et pastilles", class: "mt-12") do %>
-    <%= render layout: "silex_ui/catalogue/specimen",
-          locals: { title: "Tons", note: "Sémantiques, jamais chromatiques",
-                    code: 'SilexUi::BadgeComponent.new(label: "expiré", tone: :alert)' } do %>
-      <div class="flex flex-wrap items-center gap-2">
-        <% SilexUi::BaseComponent::TONES.each do |tone| %>
-          <%= render SilexUi::BadgeComponent.new(label: tone.to_s, tone: tone) %>
+    <%= render SilexUi::SectionComponent.new(title: "Icônes", icon: "grid", class: "mt-12") do |section| %>
+      <% section.with_actions do %>
+        <p class="text-xs text-ink-400">Heroicons 2.2 (MIT), en SVG inline — aucune dépendance externe</p>
+      <% end %>
+
+      <div class="grid grid-cols-4 gap-3 sm:grid-cols-6 lg:grid-cols-8">
+        <% SilexUi::IconComponent::NAMES.each do |name| %>
+          <div class="flex flex-col items-center gap-2 rounded-surface border border-surface-200 bg-surface-0 p-3 text-ink-500">
+            <%= render SilexUi::IconComponent.new(name: name, size: :lg) %>
+            <span class="truncate text-[11px] text-ink-400"><%= name %></span>
+          </div>
         <% end %>
-        <%= render SilexUi::BadgeComponent.new(label: "cliquable", href: "#") %>
       </div>
     <% end %>
 
-    <%= render layout: "silex_ui/catalogue/specimen",
-          locals: { title: "Bouton de copie", note: "Confirme, puis reprend son libellé",
-                    code: 'SilexUi::CopyButtonComponent.new(value: website.domain)' } do %>
-      <%= render SilexUi::CopyButtonComponent.new(value: "bali-surf-camp.fr", label: "Copier le domaine") %>
-    <% end %>
-  <% end %>
+    <%= render SilexUi::SectionComponent.new(title: "Boutons", icon: "bolt", class: "mt-12") do %>
+      <%= render layout: "silex_ui/catalogue/specimen",
+            locals: { title: "Variantes", code: 'SilexUi::ButtonComponent.new(label: "Ajouter", href: "#", icon: "plus")' } do %>
+        <div class="flex flex-wrap items-center gap-3">
+          <% SilexUi::ButtonComponent::VARIANTS.each_key do |variant| %>
+            <%= render SilexUi::ButtonComponent.new(label: variant.to_s.titleize, href: "#", variant: variant, icon: "plus") %>
+          <% end %>
+        </div>
+      <% end %>
 
-  <%= render SilexUi::SectionComponent.new(title: "Compteurs", class: "mt-12") do %>
-    <%= render layout: "silex_ui/catalogue/specimen",
-          locals: { title: "Grille de statistiques",
-                    code: 'grid.with_stat(value: 12, label: "Expirés", tone: :alert, href: "#")' } do %>
-      <%= render SilexUi::StatGridComponent.new do |grid| %>
-        <% grid.with_stat value: number_with_delimiter(1_240), label: "Domaines", href: "#" %>
-        <% grid.with_stat value: 37, label: "Expirent sous 30 j", tone: :warn, href: "#" %>
-        <% grid.with_stat value: 12, label: "Expirés", tone: :alert, href: "#",
-             trend: { value: 3, positive: false } %>
-        <% grid.with_stat value: 96, label: "Sans repo", hint: "sur 1 240" %>
+      <%= render layout: "silex_ui/catalogue/specimen", locals: { title: "Tailles" } do %>
+        <div class="flex flex-wrap items-center gap-3">
+          <% SilexUi::ButtonComponent::SIZES.each_key do |size| %>
+            <%= render SilexUi::ButtonComponent.new(label: size.to_s, href: "#", size: size, icon: "check") %>
+          <% end %>
+        </div>
       <% end %>
     <% end %>
 
-    <%= render layout: "silex_ui/catalogue/specimen",
-          locals: { title: "Répartition", code: 'SilexUi::BreakdownComponent.new(title: "Par registrar", items: [...])' } do %>
-      <div class="max-w-xs">
-        <%= render SilexUi::BreakdownComponent.new(title: "Par registrar", items: [
-              { label: "OVH", count: 612, href: "#" },
-              { label: "Netim", count: 428, href: "#" },
-              { label: "Gandi", count: 200 }
-            ]) %>
-      </div>
+    <%= render SilexUi::SectionComponent.new(title: "Pastilles", icon: "tag", class: "mt-12") do %>
+      <%= render layout: "silex_ui/catalogue/specimen",
+            locals: { title: "Tons", note: "Cinq états, quatre familles",
+                      code: 'SilexUi::BadgeComponent.new(label: "expiré", tone: :alert, icon: "alert")' } do %>
+        <div class="flex flex-wrap items-center gap-2">
+          <% SilexUi::BaseComponent::TONES.each do |tone| %>
+            <%= render SilexUi::BadgeComponent.new(label: tone.to_s, tone: tone) %>
+          <% end %>
+          <%= render SilexUi::BadgeComponent.new(label: "avec icône", tone: :ok, icon: "success") %>
+          <%= render SilexUi::BadgeComponent.new(tone: :alert, icon: "alert", title: "Sans libellé") %>
+          <%= render SilexUi::BadgeComponent.new(label: "cliquable", tone: :brand, href: "#") %>
+        </div>
+      <% end %>
+
+      <%= render layout: "silex_ui/catalogue/specimen",
+            locals: { title: "Bouton de copie", note: "Confirme, puis reprend son libellé",
+                      code: 'SilexUi::CopyButtonComponent.new(value: website.domain, label: "Copier")' } do %>
+        <div class="flex flex-wrap items-center gap-2">
+          <%= render SilexUi::CopyButtonComponent.new(value: "bali-surf-camp.fr", label: "Copier le domaine") %>
+          <%= render SilexUi::CopyButtonComponent.new(value: "bali-surf-camp.fr") %>
+        </div>
+      <% end %>
     <% end %>
-  <% end %>
 
-  <%= render SilexUi::SectionComponent.new(title: "Tableaux", class: "mt-12") do %>
-    <%= render layout: "silex_ui/catalogue/specimen",
-          locals: { title: "Colonnes déclarées, tri, lignes colorées",
-                    code: 'table.with_column(header: "Domaine", sort: url, direction: :asc) { |site| site.domain }' } do %>
-      <%= render SilexUi::TableComponent.new(rows: @sites,
-            row_class: ->(site) { "bg-alert-50" if site.expired }) do |table| %>
-        <% table.with_column(header: "Domaine", sort: "#", direction: :asc) do |site| %>
-          <span class="text-ink-900"><%= site.domain %></span>
-        <% end %>
-        <% table.with_column(header: "Registrar", sort: "#", cell_class: "text-ink-600") do |site| %>
-          <%= site.registrar.titleize %>
+    <%= render SilexUi::SectionComponent.new(title: "Compteurs", icon: "chart", class: "mt-12") do %>
+      <%= render layout: "silex_ui/catalogue/specimen",
+            locals: { title: "Grille de statistiques", note: "Survole une carte",
+                      code: 'grid.with_stat(value: 12, label: "Expirés", tone: :alert, icon: "alert", href: "#")' } do %>
+        <%= render SilexUi::StatGridComponent.new do |grid| %>
+          <% grid.with_stat value: number_with_delimiter(1_240), label: "Domaines", icon: "globe", href: "#" %>
+          <% grid.with_stat value: 37, label: "Expirent sous 30 j", tone: :warn, icon: "clock", href: "#" %>
+          <% grid.with_stat value: 12, label: "Expirés", tone: :alert, icon: "alert", href: "#",
+               alert: true, trend: { value: 3, positive: false } %>
+          <% grid.with_stat value: 96, label: "Sans repo", tone: :info, icon: "code", hint: "sur 1 240" %>
         <% end %>
-        <% table.with_column(header: "État") do |site| %>
-          <%= render SilexUi::BadgeComponent.new(label: site.expired ? "expiré" : "actif",
-                tone: site.expired ? :alert : :ok) %>
+      <% end %>
+
+      <%= render layout: "silex_ui/catalogue/specimen",
+            locals: { title: "Répartition", code: 'SilexUi::BreakdownComponent.new(title: "Par registrar", items: [...])' } do %>
+        <div class="max-w-xs">
+          <%= render SilexUi::BreakdownComponent.new(title: "Par registrar", icon: "database", items: [
+                { label: "OVH", count: 612, href: "#" },
+                { label: "Netim", count: 428, href: "#" },
+                { label: "Gandi", count: 200 }
+              ]) %>
+        </div>
+      <% end %>
+    <% end %>
+
+    <%= render SilexUi::SectionComponent.new(title: "Tableaux", icon: "grid", class: "mt-12") do %>
+      <%= render layout: "silex_ui/catalogue/specimen",
+            locals: { title: "Colonnes déclarées, tri, lignes colorées",
+                      code: 'table.with_column(header: "Domaine", sort: url, direction: :asc) { |site| site.domain }' } do %>
+        <%= render SilexUi::TableComponent.new(rows: @sites,
+              row_class: ->(site) { "bg-alert-50/60" if site.expired }) do |table| %>
+          <% table.with_column(header: "Domaine", sort: "#", direction: :asc) do |site| %>
+            <span class="font-semibold"><%= site.domain %></span>
+          <% end %>
+          <% table.with_column(header: "Registrar", sort: "#", cell_class: "text-ink-500") { |site| site.registrar.titleize } %>
+          <% table.with_column(header: "État") do |site| %>
+            <%= render SilexUi::BadgeComponent.new(label: site.expired ? "expiré" : "actif",
+                  tone: site.expired ? :alert : :ok, icon: site.expired ? "alert" : "success") %>
+          <% end %>
+          <% table.with_column(align: :right) do |site| %>
+            <%= render SilexUi::ButtonComponent.new(label: "Éditer", href: "#", variant: :ghost, size: :sm, icon: "edit") %>
+          <% end %>
         <% end %>
-        <% table.with_column(align: :right) do |site| %>
-          <%= render SilexUi::ButtonComponent.new(label: "Éditer", href: "#", variant: :ghost, size: :sm) %>
+      <% end %>
+
+      <%= render layout: "silex_ui/catalogue/specimen",
+            locals: { title: "Tableau vide", note: "L'état vide remplace le tableau, il ne le décore pas" } do %>
+        <%= render SilexUi::TableComponent.new(rows: [], empty_message: "Aucun domaine ne correspond.") do |table| %>
+          <% table.with_column(header: "Domaine") { |site| site.domain } %>
         <% end %>
       <% end %>
-    <% end %>
 
-    <%= render layout: "silex_ui/catalogue/specimen",
-          locals: { title: "Tableau vide", note: "L'état vide remplace le tableau, il ne le décore pas" } do %>
-      <%= render SilexUi::TableComponent.new(rows: [], empty_message: "Aucun domaine ne correspond.") do |table| %>
-        <% table.with_column(header: "Domaine") { |site| site.domain } %>
+      <%= render layout: "silex_ui/catalogue/specimen",
+            locals: { title: "Pagination",
+                      code: 'SilexUi::PaginationComponent.new(pagination: @pagination, page_url: ->(page) { path(page:) })' } do %>
+        <%= render SilexUi::PaginationComponent.new(pagination: @pagination, page_url: ->(_page) { "#" }) %>
       <% end %>
     <% end %>
 
-    <%= render layout: "silex_ui/catalogue/specimen",
-          locals: { title: "Pagination",
-                    code: 'SilexUi::PaginationComponent.new(pagination: @pagination, page_url: ->(page) { path(page:) })' } do %>
-      <%= render SilexUi::PaginationComponent.new(pagination: @pagination, page_url: ->(_page) { "#" }) %>
-    <% end %>
-  <% end %>
+    <%= render SilexUi::SectionComponent.new(title: "Messages", icon: "bell", class: "mt-12") do %>
+      <%= render layout: "silex_ui/catalogue/specimen",
+            locals: { title: "Bandeaux", code: 'SilexUi::AlertComponent.new(tone: :warn, title: "…", text: "…")' } do %>
+        <div class="space-y-3">
+          <%= render SilexUi::AlertComponent.new(tone: :info, title: "Synchronisation",
+                text: "Le dernier passage remonte à trois heures.") %>
+          <%= render SilexUi::AlertComponent.new(tone: :warn, title: "Registrar muet",
+                text: "OVH n'a pas répondu au dernier passage ; les dates d'expiration datent d'hier.") %>
+          <%= render SilexUi::AlertComponent.new(tone: :alert, title: "Jeton refusé",
+                text: "La clé NETIM a expiré, plus aucune disponibilité n'est vérifiée.") %>
+          <%= render SilexUi::AlertComponent.new(tone: :ok, text: "Catalogue à jour.") %>
+        </div>
+      <% end %>
 
-  <%= render SilexUi::SectionComponent.new(title: "Messages", class: "mt-12") do %>
-    <%= render layout: "silex_ui/catalogue/specimen",
-          locals: { title: "Bandeaux", code: 'SilexUi::AlertComponent.new(tone: :warn, title: "…", text: "…")' } do %>
-      <div class="space-y-3">
-        <%= render SilexUi::AlertComponent.new(tone: :info, title: "Synchronisation",
-              text: "Le dernier passage remonte à trois heures.") %>
-        <%= render SilexUi::AlertComponent.new(tone: :warn, title: "Registrar muet",
-              text: "OVH n'a pas répondu au dernier passage ; les dates d'expiration datent d'hier.") %>
-        <%= render SilexUi::AlertComponent.new(tone: :alert, title: "Jeton refusé",
-              text: "La clé NETIM a expiré, plus aucune disponibilité n'est vérifiée.") %>
-        <%= render SilexUi::AlertComponent.new(tone: :ok, text: "Catalogue à jour.") %>
-      </div>
+      <%= render layout: "silex_ui/catalogue/specimen",
+            locals: { title: "État vide", code: 'SilexUi::EmptyStateComponent.new(message: "…", icon: "folder")' } do %>
+        <%= render SilexUi::EmptyStateComponent.new(message: "Rien à afficher pour le moment.", icon: "search") do %>
+          <%= render SilexUi::ButtonComponent.new(label: "Ajouter le premier", href: "#", variant: :secondary, icon: "plus") %>
+        <% end %>
+      <% end %>
     <% end %>
 
-    <%= render layout: "silex_ui/catalogue/specimen",
-          locals: { title: "État vide", code: 'SilexUi::EmptyStateComponent.new(message: "…")' } do %>
-      <%= render SilexUi::EmptyStateComponent.new(message: "Rien à afficher pour le moment.") do %>
-        <%= render SilexUi::ButtonComponent.new(label: "Ajouter le premier", href: "#", variant: :secondary) %>
+    <%= render SilexUi::SectionComponent.new(title: "Surfaces", icon: "folder", class: "mt-12") do %>
+      <%= render layout: "silex_ui/catalogue/specimen",
+            locals: { title: "Cartes", code: 'SilexUi::CardComponent.new(title: "…", icon: "…", href: "…")' } do %>
+        <div class="grid gap-5 md:grid-cols-3">
+          <%= render SilexUi::CardComponent.new(title: "Simple", icon: "document") do %>
+            Une surface blanche sur le fond, pour ce qui doit se détacher du flux.
+          <% end %>
+
+          <%= render SilexUi::CardComponent.new(title: "Avec pied", icon: "refresh") do |card| %>
+            <% card.with_footer do %>Dernière synchro il y a 3 h<% end %>
+            Le pied porte ce qui date ou qualifie le contenu.
+          <% end %>
+
+          <%= render SilexUi::CardComponent.new(title: "Cliquable", icon: "link", href: "#") do %>
+            Toute la carte devient la cible, pas seulement son titre.
+          <% end %>
+        </div>
       <% end %>
-    <% end %>
-  <% end %>
 
-  <%= render SilexUi::SectionComponent.new(title: "Surfaces", class: "mt-12") do %>
-    <%= render layout: "silex_ui/catalogue/specimen",
-          locals: { title: "Cartes", code: 'SilexUi::CardComponent.new(title: "…", href: "…")' } do %>
-      <div class="grid gap-4 md:grid-cols-3">
-        <%= render SilexUi::CardComponent.new(title: "Simple") do %>
-          Une surface blanche sur le sable, pour ce qui doit se détacher du flux.
-        <% end %>
+      <%= render layout: "silex_ui/catalogue/specimen",
+            locals: { title: "Modale", note: "Bâtie sur <dialog> : focus, Échap et fond inerte gérés par le navigateur" } do %>
+        <%= render SilexUi::ModalComponent.new(id: "catalogue-modal", title: "Supprimer le domaine ?") do |modal| %>
+          <% modal.with_trigger do %>
+            <%= render SilexUi::ButtonComponent.new(label: "Ouvrir la modale", variant: :secondary, icon: "trash") %>
+          <% end %>
 
-        <%= render SilexUi::CardComponent.new(title: "Avec pied") do |card| %>
-          <% card.with_footer do %>Dernière synchro il y a 3 h<% end %>
-          Le pied porte ce qui date ou qualifie le contenu.
-        <% end %>
+          <p>Cette action est définitive. Le domaine sortira du catalogue et de toutes ses répartitions.</p>
 
-        <%= render SilexUi::CardComponent.new(title: "Cliquable", href: "#") do %>
-          Toute la carte devient la cible, pas seulement son titre.
+          <% modal.with_footer do %>
+            <%= render SilexUi::ButtonComponent.new(label: "Annuler", variant: :ghost,
+                  data: { action: "silex-ui--modal#close" }) %>
+            <%= render SilexUi::ButtonComponent.new(label: "Supprimer", variant: :danger, icon: "trash") %>
+          <% end %>
         <% end %>
-      </div>
+      <% end %>
     <% end %>
 
-    <%= render layout: "silex_ui/catalogue/specimen",
-          locals: { title: "Modale", note: "Bâtie sur <dialog> : focus, Échap et fond inerte gérés par le navigateur" } do %>
-      <%= render SilexUi::ModalComponent.new(id: "catalogue-modal", title: "Supprimer le domaine ?") do |modal| %>
-        <% modal.with_trigger do %>
-          <%= render SilexUi::ButtonComponent.new(label: "Ouvrir la modale", variant: :secondary) %>
+    <%= render SilexUi::SectionComponent.new(title: "Formulaires", icon: "edit", class: "mt-12") do %>
+      <%= form_with url: "#", method: :get do |f| %>
+        <%= render layout: "silex_ui/catalogue/specimen",
+              locals: { title: "Champs", note: "Deux densités : md pour les barres de filtres, lg pour les pages",
+                        code: 'SilexUi::FieldComponent.new(form: f, attribute: :domain, label: "Domaine", size: :lg)' } do %>
+          <div class="grid max-w-2xl gap-5 md:grid-cols-2">
+            <%= render SilexUi::FieldComponent.new(form: f, attribute: :domain, label: "Domaine", size: :lg,
+                  input_html: { placeholder: "exemple.fr" }) %>
+            <%= render SilexUi::FieldComponent.new(form: f, attribute: :registrar, label: "Registrar", size: :lg,
+                  type: :select, collection: %w[OVH Netim Gandi], include_blank: "—") %>
+            <%= render SilexUi::FieldComponent.new(form: f, attribute: :expires_at, label: "Expiration",
+                  type: :date, hint: "Densité md, celle des barres de filtres") %>
+            <%= render SilexUi::FieldComponent.new(form: f, attribute: :active, label: "Rattaché à une lune",
+                  type: :boolean) %>
+            <%= render SilexUi::FieldComponent.new(form: f, attribute: :notes, label: "Notes", size: :lg,
+                  type: :textarea, input_html: { rows: 2 }, class: "md:col-span-2") %>
+          </div>
         <% end %>
+      <% end %>
+    <% end %>
+
+    <%= render SilexUi::SectionComponent.new(title: "En-têtes et panneaux", icon: "document", class: "mt-12") do %>
+      <%= render layout: "silex_ui/catalogue/specimen",
+            locals: { title: "En-tête de page", note: "`:hero` pour les listes, `:banner` pour les tableaux de bord",
+                      code: 'SilexUi::PageHeaderComponent.new(title: "Sites", icon: "globe", variant: :hero)' } do %>
+        <div class="space-y-4 overflow-hidden rounded-surface border border-surface-200">
+          <%= render SilexUi::PageHeaderComponent.new(title: "Sites", icon: "globe", document_title: false) do |header| %>
+            <% header.with_meta do %>1 309 domaines<% end %>
+            <% header.with_crumb label: "Accueil", href: "#" %>
+            <% header.with_crumb label: "Sites" %>
+            <% header.with_actions do %>
+              <%= render SilexUi::ButtonComponent.new(label: "Ajouter", icon: "plus") %>
+            <% end %>
+          <% end %>
+        </div>
+
+        <div class="mt-4">
+          <%= render SilexUi::PageHeaderComponent.new(title: "Bonjour, Théo 👋", variant: :banner,
+                subtitle: "Bienvenue sur votre espace", document_title: false) do |header| %>
+            <% header.with_aside do %>
+              <span class="block text-sm text-white/90">jeudi</span>
+              <span class="block text-lg font-bold">10 septembre 2026</span>
+            <% end %>
+          <% end %>
+        </div>
+      <% end %>
+
+      <%= render layout: "silex_ui/catalogue/specimen",
+            locals: { title: "Panneau", note: "La surface blanche dans laquelle vit tout contenu",
+                      code: 'SilexUi::PanelComponent.new(title: "Progression du mois", icon: "chart")' } do %>
+        <%= render SilexUi::PanelComponent.new(title: "Progression du mois", icon: "chart") do |panel| %>
+          <% panel.with_action label: "Voir détails", href: "#" %>
 
-        <p>Cette action est définitive. Le domaine sortira du catalogue et de toutes ses répartitions.</p>
+          <%= render SilexUi::ProgressComponent.new(label: "Objectif mensuel", value: 66_865, total: 260_420,
+                from: "66 865 € réalisés", to: "Objectif : 260 420 €") %>
+        <% end %>
+      <% end %>
 
-        <% modal.with_footer do %>
-          <%= render SilexUi::ButtonComponent.new(label: "Annuler", variant: :ghost,
-                data: { action: "silex-ui--modal#close" }) %>
-          <%= render SilexUi::ButtonComponent.new(label: "Supprimer", variant: :danger) %>
+      <%= render layout: "silex_ui/catalogue/specimen",
+            locals: { title: "Liste d'actions", note: "Une pastille, ce qu'il faut faire, et où le faire",
+                      code: 'list.with_item(title: "…", subtitle: "…", icon: "alert", tone: :alert, href: path)' } do %>
+        <%= render SilexUi::PanelComponent.new(title: "Actions requises", icon: "alert", tone: :warn) do %>
+          <%= render SilexUi::ActionListComponent.new do |list| %>
+            <% list.with_item title: "130 campagnes sans budget", subtitle: "Budget non défini pour le mois en cours",
+                 icon: "alert", tone: :alert, href: "#" %>
+            <% list.with_item title: "188 liens non publiés", subtitle: "En attente de publication",
+                 icon: "clock", tone: :warn, href: "#" %>
+            <% list.with_item title: "1 028 erreurs ancre/lien", subtitle: "Vérification requise",
+                 icon: "link", tone: :purple, href: "#", meta: "il y a 3 h" %>
+          <% end %>
         <% end %>
       <% end %>
     <% end %>
-  <% end %>
 
-  <%= render SilexUi::SectionComponent.new(title: "Formulaires", class: "mt-12") do %>
-    <%= form_with url: "#", method: :get do |f| %>
-      <%= render layout: "silex_ui/catalogue/specimen",
-            locals: { title: "Champs", note: "Deux densités : md pour les barres de filtres, lg pour les pages de formulaire",
-                      code: 'SilexUi::FieldComponent.new(form: f, attribute: :domain, label: "Domaine", size: :lg)' } do %>
-        <div class="grid max-w-2xl gap-5 md:grid-cols-2">
-          <%= render SilexUi::FieldComponent.new(form: f, attribute: :domain, label: "Domaine", size: :lg,
-                input_html: { placeholder: "exemple.fr" }) %>
-          <%= render SilexUi::FieldComponent.new(form: f, attribute: :registrar, label: "Registrar", size: :lg,
-                type: :select, collection: %w[OVH Netim Gandi], include_blank: "—") %>
-          <%= render SilexUi::FieldComponent.new(form: f, attribute: :expires_at, label: "Expiration",
-                type: :date, hint: "Densité md, celle des barres de filtres") %>
-          <%= render SilexUi::FieldComponent.new(form: f, attribute: :active, label: "Rattaché à une lune",
-                type: :boolean) %>
-          <%= render SilexUi::FieldComponent.new(form: f, attribute: :notes, label: "Notes", size: :lg,
-                type: :textarea, input_html: { rows: 2 }, class: "md:col-span-2") %>
+    <%= render SilexUi::SectionComponent.new(title: "Ossature", icon: "grid", class: "mt-12") do |section| %>
+      <% section.with_actions do %>
+        <p class="text-xs text-ink-400">Le rail du Silex : 80px, l'icône en carré violet, la barre d'accent sur la section courante</p>
+      <% end %>
+
+      <%= render layout: "silex_ui/catalogue/specimen",
+            locals: { title: "Rail et page", note: "Sous 768px, le rail cède à une barre supérieure et un panneau qui coulisse",
+                      code: 'shell.with_item(icon: "globe", href: path, label: "Sites", active: true)' } do %>
+        <%# Le rail est en position fixe : dans le catalogue on l'imite à l'échelle. %>
+        <div class="flex gap-4 overflow-hidden rounded-surface border border-surface-200 bg-surface-50 p-4">
+          <div class="flex w-20 flex-col items-center gap-3 border-r border-surface-200 pr-4">
+            <span class="flex size-icon-tile items-center justify-center rounded-surface bg-gradient-to-br from-brand-500 to-brand-700 text-lg font-bold text-white shadow-card">N</span>
+
+            <% [ [ "home", true ], [ "globe", false ], [ "search", false ], [ "settings", false ] ].each do |name, active| %>
+              <span class="relative flex justify-center">
+                <% if active %>
+                  <span class="absolute top-1/2 left-0 h-10 w-1 -translate-y-1/2 rounded-r bg-purple-500"></span>
+                <% end %>
+                <span class="flex size-icon-tile items-center justify-center rounded-surface border-2 <%= active ? "border-purple-500 bg-purple-500/10 text-purple-500 ring-3 ring-purple-500/20" : "border-purple-500/20 bg-purple-500/5 text-ink-500" %>">
+                  <%= render SilexUi::IconComponent.new(name: name, size: :lg) %>
+                </span>
+              </span>
+            <% end %>
+
+            <span class="mt-4"><%= render SilexUi::AvatarComponent.new(name: "Théo Galais", size: :lg) %></span>
+          </div>
+
+          <div class="flex-1 text-sm text-ink-500">
+            <p class="font-semibold text-ink-900">La page</p>
+            <p class="mt-1">Le rail est fixe, la page défile seule sous lui.</p>
+          </div>
         </div>
       <% end %>
-    <% end %>
-  <% end %>
 
-  <%= render SilexUi::SectionComponent.new(title: "Navigation", class: "mt-12") do %>
-    <%= render layout: "silex_ui/catalogue/specimen",
-          locals: { title: "Barre de navigation", code: 'nav.with_item(label: "Sites", href: path, active: true)' } do %>
-      <%= render SilexUi::NavComponent.new(brand: "Network", brand_href: "#") do |nav| %>
-        <% nav.with_item label: "Tableau de bord", href: "#", active: true %>
-        <% nav.with_item label: "Sites", href: "#" %>
-        <% nav.with_item label: "Réglages", href: "#" %>
-        <% nav.with_aside do %>
-          <span>theo@le-silex.com</span>
-          <%= render SilexUi::ButtonComponent.new(label: "Déconnexion", variant: :ghost, size: :sm) %>
+      <%= render layout: "silex_ui/catalogue/specimen",
+            locals: { title: "Avatars", note: "Une image quand il y en a une, les initiales sinon",
+                      code: 'SilexUi::AvatarComponent.new(name: current_user.display_name, size: :lg)' } do %>
+        <div class="flex flex-wrap items-center gap-3">
+          <%= render SilexUi::AvatarComponent.new(name: "Théo Galais", size: :sm) %>
+          <%= render SilexUi::AvatarComponent.new(name: "Théo Galais") %>
+          <%= render SilexUi::AvatarComponent.new(name: "Théo Galais", size: :lg) %>
+          <%= render SilexUi::AvatarComponent.new(name: "silex", size: :lg, square: true) %>
+        </div>
+      <% end %>
+
+      <%= render layout: "silex_ui/catalogue/specimen",
+            locals: { title: "Menu déroulant", note: "Se ferme au clic dehors, à Échap, et à la navigation",
+                      code: 'menu.with_item(label: "Déconnexion", href: path, method: :delete, tone: :alert)' } do %>
+        <%= render SilexUi::DropdownComponent.new(placement: :down) do |menu| %>
+          <% menu.with_trigger do %>
+            <%= render SilexUi::ButtonComponent.new(label: "Mon compte", variant: :secondary, icon: "chevron-down") %>
+          <% end %>
+
+          <% menu.with_header do %>
+            <div class="flex items-center gap-2.5">
+              <%= render SilexUi::AvatarComponent.new(name: "Théo Galais") %>
+              <div class="min-w-0">
+                <p class="truncate text-sm font-semibold text-ink-900">Théo Galais</p>
+                <p class="truncate text-xs text-ink-500">theo@le-silex.com</p>
+              </div>
+            </div>
+          <% end %>
+
+          <% menu.with_item label: "Réglages", href: "#", icon: "settings" %>
+          <% menu.with_item label: "Notifications", href: "#", icon: "bell" %>
+          <% menu.with_item label: "Déconnexion", href: "#", icon: "close", tone: :alert %>
         <% end %>
       <% end %>
     <% end %>
 
-    <%= render layout: "silex_ui/catalogue/specimen",
-          locals: { title: "En-tête de page", code: 'SilexUi::PageHeaderComponent.new(title: "Sites", subtitle: "…")' } do %>
-      <%= render SilexUi::PageHeaderComponent.new(title: "Sites", subtitle: "1 240 domaines",
-            document_title: false, class: "py-0") do |header| %>
-        <% header.with_actions do %>
-          <%= render SilexUi::ButtonComponent.new(label: "Ajouter un domaine", href: "#") %>
+    <%= render SilexUi::SectionComponent.new(title: "Navigation", icon: "home", class: "mt-12") do %>
+      <%= render layout: "silex_ui/catalogue/specimen",
+            locals: { title: "Barre de navigation", code: 'nav.with_item(label: "Sites", href: path, icon: "globe", active: true)' } do %>
+        <%= render SilexUi::NavComponent.new(brand: "Network", brand_href: "#") do |nav| %>
+          <% nav.with_item label: "Tableau de bord", href: "#", icon: "home", active: true %>
+          <% nav.with_item label: "Sites", href: "#", icon: "globe" %>
+          <% nav.with_item label: "Réglages", href: "#", icon: "settings" %>
+          <% nav.with_aside do %>
+            <span>theo@le-silex.com</span>
+            <%= render SilexUi::ThemeToggleComponent.new %>
+          <% end %>
         <% end %>
       <% end %>
     <% end %>
-  <% end %>
+  </div>
 </div>

data/lib/silex_ui/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module SilexUi
-  VERSION = "0.2.0"
+  VERSION = "0.8.0"
 end