silex_ui 0.2.0 → 0.8.0

data/app/components/silex_ui/nav_component.rb

@@ -1,11 +1,12 @@
 # frozen_string_literal: true
 
 module SilexUi
-  # Barre de navigation : la marque, les sections, et ce qui concerne l'utilisateur.
+  # Barre de navigation : la marque, les sections, et ce qui concerne
+  # l'utilisateur. Blanche et posée, comme la navbar du Silex.
   #
   #   <%= render SilexUi::NavComponent.new(brand: "Network", brand_href: root_path) do |nav| %>
-  #     <% nav.with_item(label: "Sites", href: websites_path, active: controller_name == "websites") %>
-  #     <% nav.with_aside do %><%= current_user.display_name %><% end %>
+  #     <% nav.with_item(label: "Sites", href: websites_path, icon: "globe", active: true) %>
+  #     <% nav.with_aside do %>…<% end %>
   #   <% end %>
   class NavComponent < BaseComponent
     renders_many :items, "ItemComponent"
@@ -20,24 +21,38 @@ module SilexUi
     attr_reader :brand, :brand_href
 
     def css_classes
-      merge_class("flex flex-wrap items-center justify-between gap-5 border-b border-sand-200 py-5")
+      merge_class("flex flex-wrap items-center justify-between gap-5 border-b border-surface-200",
+                  "bg-surface-0 px-6 py-3 shadow-card")
     end
 
     class ItemComponent < ViewComponent::Base
-      def initialize(label:, href:, active: false)
+      def initialize(label:, href:, icon: nil, active: false)
         @label = label
         @href = href
+        @icon = icon
         @active = active
       end
 
       def call
-        link_to(@label, @href, class: css_classes)
+        link_to(body, @href, class: css_classes, "aria-current": ("page" if @active))
       end
 
       private
 
+      def body
+        parts = []
+        parts << render(SilexUi::IconComponent.new(name: @icon, size: :sm)) if @icon.present?
+        parts << @label
+        safe_join(parts)
+      end
+
+      # L'onglet actif porte la couleur de marque sur un fond dilué ; les autres
+      # attendent qu'on les survole.
       def css_classes
-        class_names("transition", @active ? "text-ink-900" : "text-ink-400 hover:text-ink-900")
+        class_names(
+          "inline-flex items-center gap-2 rounded-badge px-3 py-2 text-sm font-semibold transition",
+          @active ? "bg-brand-500/10 text-brand-600" : "text-ink-500 hover:bg-surface-100 hover:text-ink-900"
+        )
       end
     end
   end

data/app/components/silex_ui/page_header_component.html.erb

@@ -1,17 +1,45 @@
 <header class="<%= css_classes %>">
-  <div class="min-w-0">
-    <h1 class="text-lg font-light tracking-[0.2em] text-ink-900 uppercase"><%= title %></h1>
+  <span aria-hidden="true" class="pointer-events-none absolute inset-0" style="<%= halo_style %>"></span>
 
-    <% if subtitle.present? %>
-      <p class="mt-2 text-sm font-light text-ink-600"><%= subtitle %></p>
-    <% end %>
+  <div class="relative flex flex-wrap items-center justify-between gap-6">
+    <div class="flex min-w-0 items-center gap-5">
+      <% if icon_name.present? %>
+        <span class="<%= icon_classes %>">
+          <%= render SilexUi::IconComponent.new(name: icon_name, size: :lg) %>
+        </span>
+      <% end %>
 
-    <% if meta? %>
-      <div class="mt-2 text-sm font-light text-ink-600"><%= meta %></div>
-    <% end %>
+      <div class="min-w-0">
+        <h1 class="<%= title_classes %>"><%= title %></h1>
+
+        <% if subtitle.present? %>
+          <p class="<%= subtitle_classes %>"><%= subtitle %></p>
+        <% end %>
+
+        <% if meta? %>
+          <div class="<%= meta_classes %>"><%= meta %></div>
+        <% end %>
+      </div>
+    </div>
+
+    <div class="flex flex-wrap items-center gap-3">
+      <%= actions %>
+
+      <% if aside? %>
+        <div class="rounded-surface bg-white/15 px-6 py-4 backdrop-blur"><%= aside %></div>
+      <% end %>
+    </div>
   </div>
 
-  <% if actions? %>
-    <div class="flex flex-wrap items-center gap-3"><%= actions %></div>
+  <% if crumbs.any? %>
+    <nav aria-label="Fil d'Ariane" class="<%= breadcrumb_classes %>">
+      <% crumbs.each_with_index do |crumb, index| %>
+        <%# Le point de séparation, plus discret que le segment qu'il précède. %>
+        <% if index.positive? %>
+          <span class="mx-2.5 font-bold text-ink-950/30" aria-hidden="true">·</span>
+        <% end %>
+        <%= crumb %>
+      <% end %>
+    </nav>
   <% end %>
 </header>

data/app/components/silex_ui/page_header_component.rb

@@ -1,35 +1,121 @@
 # frozen_string_literal: true
 
 module SilexUi
-  # En-tête de page : titre, sous-titre, actions à droite.
+  # L'en-tête de page, dans les deux formes que le Silex lui donne.
   #
-  #   <%= render SilexUi::PageHeaderComponent.new(title: "Sites", subtitle: "1 240 domaines") do |header| %>
-  #     <% header.with_actions do %>
-  #       <%= render SilexUi::ButtonComponent.new(label: "Ajouter", href: new_website_path) %>
-  #     <% end %>
-  #   <% end %>
+  # `:hero` — celle des pages de liste : une bande pâle sur toute la largeur,
+  # deux halos radiaux pour la profondeur, le titre en gras foncé et le fil
+  # d'Ariane dessous.
+  # `:banner` — celle des tableaux de bord : une carte à dégradé violet plein,
+  # le titre en blanc. C'est la première chose que la page dit.
   #
-  # Le titre alimente aussi `content_for :title`, comme le PageHeaderComponent du
-  # Silex : une page qui affiche son nom le donne aussi à l'onglet.
+  #   <%= render SilexUi::PageHeaderComponent.new(title: "PBNs", icon: "globe") do |header| %>
+  #     <% header.with_crumb(label: "Accueil", href: root_path) %>
+  #     <% header.with_crumb(label: "PBNs") %>
+  #     <% header.with_actions do %>…<% end %>
+  #   <% end %>
   class PageHeaderComponent < BaseComponent
     renders_one :actions
     renders_one :meta
+    # Le fil d'Ariane est une liste de segments : le composant pose les points
+    # de séparation et assombrit le dernier. L'appelant n'écrit pas de `·`.
+    renders_many :crumbs, "CrumbComponent"
+    # Le bloc de droite du Silex : une plaque translucide, pour une date ou un
+    # chiffre qui accompagne le titre sans le concurrencer. Réservé à `:banner`.
+    renders_one :aside
+
+    VARIANTS = %i[hero banner].freeze
 
-    def initialize(title:, subtitle: nil, document_title: nil, **options)
+    def initialize(title:, subtitle: nil, icon: nil, variant: :hero, document_title: nil, **options)
       @title = title
       @subtitle = subtitle
+      @icon = icon
+      @variant = VARIANTS.include?(variant&.to_sym) ? variant.to_sym : :hero
       @document_title = document_title
       super(**options)
     end
 
-    attr_reader :title, :subtitle
+    attr_reader :title, :subtitle, :icon_name, :variant
+
+    def icon_name = @icon
+
+    def banner? = @variant == :banner
 
     def before_render
       content_for(:title, @document_title || @title) if @document_title != false
     end
 
     def css_classes
-      merge_class("flex flex-wrap items-end justify-between gap-4 py-8")
+      if banner?
+        merge_class("relative overflow-hidden rounded-hero bg-gradient-to-br from-brand-500 to-brand-700",
+                    "px-10 py-9 text-white")
+      else
+        # Pleine largeur, sans rayon : le hero touche les bords de la page.
+        merge_class("relative overflow-hidden border-b border-surface-200 bg-gradient-to-br",
+                    "from-surface-50 via-brand-50 to-pink-50 px-10 py-9")
+      end
+    end
+
+    # La pastille : 56 px, rayon 14, dégradé indigo → violet, et son ombre
+    # portée colorée. C'est elle qui donne au titre son poids.
+    def icon_classes
+      class_names(
+        "flex size-14 shrink-0 items-center justify-center rounded-[14px]",
+        if banner?
+          "bg-white/15 backdrop-blur"
+        else
+          "bg-gradient-to-br from-brand-500 to-purple-500 text-white " \
+            "shadow-[0_8px_20px_rgba(102,126,234,0.3)]"
+        end
+      )
+    end
+
+    def title_classes
+      class_names("text-4xl leading-[1.2] font-extrabold tracking-[-0.02em]",
+                  banner? ? "text-white" : "text-ink-950")
+    end
+
+    def subtitle_classes
+      class_names("mt-1.5 text-lg", banner? ? "text-white/90" : "text-ink-500")
+    end
+
+    def meta_classes
+      class_names("mt-1.5 text-sm", banner? ? "text-white/80" : "text-ink-500")
+    end
+
+    def breadcrumb_classes
+      class_names("relative mt-3 flex flex-wrap items-center text-[11px] font-semibold",
+                  "tracking-[0.14em] uppercase", banner? ? "text-white/60" : "text-ink-950/50")
+    end
+
+    # Deux dégradés radiaux sur un calque, comme le `::before` du Silex : un
+    # cercle net ferait une tache, un halo se sent sans se voir.
+    def halo_style
+      if banner?
+        "background: radial-gradient(circle at 15% 30%, rgba(255,255,255,0.12), transparent 35%), " \
+          "radial-gradient(circle at 85% 75%, rgba(255,255,255,0.08), transparent 35%)"
+      else
+        "background: radial-gradient(circle at 15% 30%, rgba(102,126,234,0.18), transparent 35%), " \
+          "radial-gradient(circle at 85% 75%, rgba(236,72,153,0.12), transparent 35%)"
+      end
+    end
+
+    # Un segment du fil d'Ariane. Le point qui le précède est posé par le
+    # composant, pas par l'appelant.
+    class CrumbComponent < ViewComponent::Base
+      def initialize(label:, href: nil, last: false)
+        @label = label
+        @href = href
+        @last = last
+      end
+
+      attr_writer :last
+
+      def call
+        return tag.span(@label, class: "text-ink-950/70") if @href.blank?
+
+        link_to(@label, @href, class: "text-brand-500 transition hover:text-indigo-600")
+      end
     end
   end
 end

data/app/components/silex_ui/pagination_component.html.erb

@@ -3,28 +3,29 @@
 
   <div class="flex flex-wrap items-center gap-1">
     <% if pagination.previous_page %>
-      <%= link_to "Précédent", url_for_page(pagination.previous_page), rel: "prev",
-            class: "px-3 py-1 uppercase transition hover:text-ink-900" %>
-    <% else %>
-      <span class="px-3 py-1 text-ink-300 uppercase">Précédent</span>
+      <%= link_to url_for_page(pagination.previous_page), rel: "prev", "aria-label": "Page précédente",
+            class: "inline-flex size-8 items-center justify-center rounded-badge border border-surface-200 bg-surface-0 transition hover:border-brand-500 hover:text-brand-600" do %>
+        <%= render SilexUi::IconComponent.new(name: "chevron-right", size: :sm, class: "rotate-180") %>
+      <% end %>
     <% end %>
 
     <% pagination.series.each do |entry| %>
       <% if gap?(entry) %>
         <span class="px-2 text-ink-300">…</span>
       <% elsif current?(entry) %>
-        <span aria-current="page" class="rounded-sm border border-ink-900 px-3 py-1 text-ink-900"><%= entry %></span>
+        <span aria-current="page"
+              class="inline-flex size-8 items-center justify-center rounded-badge bg-gradient-to-br from-brand-500 to-brand-700 font-semibold text-white"><%= entry %></span>
       <% else %>
         <%= link_to entry, url_for_page(entry),
-              class: "rounded-sm border border-transparent px-3 py-1 transition hover:border-sand-300 hover:text-ink-900" %>
+              class: "inline-flex size-8 items-center justify-center rounded-badge border border-transparent transition hover:border-surface-200 hover:bg-surface-0 hover:text-brand-600" %>
       <% end %>
     <% end %>
 
     <% if pagination.next_page %>
-      <%= link_to "Suivant", url_for_page(pagination.next_page), rel: "next",
-            class: "px-3 py-1 uppercase transition hover:text-ink-900" %>
-    <% else %>
-      <span class="px-3 py-1 text-ink-300 uppercase">Suivant</span>
+      <%= link_to url_for_page(pagination.next_page), rel: "next", "aria-label": "Page suivante",
+            class: "inline-flex size-8 items-center justify-center rounded-badge border border-surface-200 bg-surface-0 transition hover:border-brand-500 hover:text-brand-600" do %>
+        <%= render SilexUi::IconComponent.new(name: "chevron-right", size: :sm) %>
+      <% end %>
     <% end %>
   </div>
 </nav>

data/app/components/silex_ui/pagination_component.rb

@@ -39,8 +39,7 @@ module SilexUi
 
     def css_classes
       merge_class(
-        "flex flex-wrap items-center justify-between gap-4 border-t border-sand-200 py-6",
-        "text-xs font-light tracking-widest text-ink-400"
+        "flex flex-wrap items-center justify-between gap-4 py-5 text-[13px] text-ink-500"
       )
     end
   end

data/app/components/silex_ui/panel_component.html.erb

@@ -0,0 +1,27 @@
+<section class="<%= css_classes %>">
+  <% if header? %>
+    <div class="mb-6 flex flex-wrap items-center justify-between gap-4 border-b border-surface-200 pb-4">
+      <% if title.present? %>
+        <h2 class="flex items-center gap-3 text-xl font-bold text-ink-900">
+          <% if icon_name.present? %>
+            <span class="<%= icon_classes %>">
+              <%= render SilexUi::IconComponent.new(name: icon_name, size: :md) %>
+            </span>
+          <% end %>
+          <%= title %>
+        </h2>
+      <% end %>
+
+      <div class="flex flex-wrap items-center gap-4">
+        <%= safe_join(actions) %>
+        <%= header %>
+      </div>
+    </div>
+  <% end %>
+
+  <%= content %>
+
+  <% if footer? %>
+    <div class="mt-6 border-t border-surface-200 pt-4 text-sm text-ink-500"><%= footer %></div>
+  <% end %>
+</section>

data/app/components/silex_ui/panel_component.rb

@@ -0,0 +1,60 @@
+# frozen_string_literal: true
+
+module SilexUi
+  # Le panneau blanc du Silex — sa `.content-section`. C'est lui qui structure
+  # les pages : chaque bloc de contenu vit dans une surface arrondie, pas à même
+  # le fond. Son en-tête porte une icône en pastille dégradée, un titre franc,
+  # et le lien qui mène au détail.
+  #
+  #   <%= render SilexUi::PanelComponent.new(title: "Progression du mois", icon: "chart") do |panel| %>
+  #     <% panel.with_action(label: "Voir détails", href: path) %>
+  #     …
+  #   <% end %>
+  class PanelComponent < BaseComponent
+    renders_one :header
+    renders_one :footer
+    renders_many :actions, "ActionComponent"
+
+    def initialize(title: nil, icon: nil, tone: :brand, **options)
+      @title = title
+      @icon = icon
+      @tone = tone_of(tone)
+      super(**options)
+    end
+
+    attr_reader :title, :icon_name
+
+    def icon_name = @icon
+
+    def header?
+      title.present? || actions.any? || super
+    end
+
+    # La pastille de l'en-tête : un dégradé pâle, l'icône en couleur pleine.
+    def icon_classes
+      class_names("flex size-9 shrink-0 items-center justify-center rounded-surface",
+                  SilexUi::Tones.tile(@tone))
+    end
+
+    def css_classes
+      merge_class("rounded-panel border border-surface-200 bg-surface-0 p-8 shadow-panel",
+                  "transition duration-300 hover:shadow-panel-hover")
+    end
+
+    # Le lien de l'en-tête : « Voir détails → », discret mais toujours à la
+    # même place.
+    class ActionComponent < ViewComponent::Base
+      def initialize(label:, href:)
+        @label = label
+        @href = href
+      end
+
+      def call
+        link_to(@href, class: "inline-flex items-center gap-1.5 text-sm font-semibold text-brand-600 " \
+                              "transition hover:gap-2.5 hover:text-brand-700") do
+          safe_join([ @label, render(SilexUi::IconComponent.new(name: "chevron-right", size: :sm)) ])
+        end
+      end
+    end
+  end
+end

data/app/components/silex_ui/progress_component.html.erb

@@ -0,0 +1,21 @@
+<div class="<%= css_classes %>">
+  <% if label.present? %>
+    <div class="mb-2.5 flex items-baseline justify-between gap-4">
+      <span class="text-sm font-bold text-ink-900"><%= label %></span>
+      <span class="<%= percent_classes %>"><%= percent %>%</span>
+    </div>
+  <% end %>
+
+  <div class="h-2.5 w-full overflow-hidden rounded-full bg-surface-100"
+       role="progressbar" aria-valuenow="<%= percent %>" aria-valuemin="0" aria-valuemax="100"
+       aria-label="<%= label %>">
+    <div class="<%= bar_classes %>" style="width: <%= percent %>%"></div>
+  </div>
+
+  <% if from.present? || to.present? %>
+    <div class="mt-2 flex flex-wrap items-baseline justify-between gap-4 text-[13px] text-ink-500">
+      <span><%= from %></span>
+      <span><%= to %></span>
+    </div>
+  <% end %>
+</div>

data/app/components/silex_ui/progress_component.rb

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+module SilexUi
+  # Une barre de progression : un objectif, ce qui en est fait, et les deux
+  # bornes lisibles de part et d'autre.
+  #
+  #   SilexUi::ProgressComponent.new(label: "Objectif mensuel", value: 66_865, total: 260_420,
+  #                                  from: "66 865 € réalisés", to: "Objectif : 260 420 €")
+  class ProgressComponent < BaseComponent
+    def initialize(value:, total:, label: nil, from: nil, to: nil, tone: :brand, **options)
+      @value = value.to_f
+      @total = total.to_f
+      @label = label
+      @from = from
+      @to = to
+      @tone = tone_of(tone)
+      super(**options)
+    end
+
+    attr_reader :label, :from, :to
+
+    # Un total nul ne vaut pas une division : la barre est simplement vide.
+    def percent
+      return 0 if @total <= 0
+
+      ((@value / @total) * 100).clamp(0, 100).round
+    end
+
+    def bar_classes
+      class_names("h-2.5 rounded-full transition-[width] duration-500",
+                  @tone == :brand ? "bg-gradient-to-r from-brand-500 to-brand-300" : SilexUi::Tones.accent(@tone))
+    end
+
+    def percent_classes
+      class_names("text-xl font-bold", SilexUi::Tones.text(@tone))
+    end
+
+    def css_classes
+      merge_class(nil)
+    end
+  end
+end

data/app/components/silex_ui/remote_modal_component.html.erb

@@ -0,0 +1,30 @@
+<dialog id="<%= id %>" class="<%= css_classes %>"
+        data-controller="silex-ui--modal"
+        data-silex-ui--modal-target="dialog"
+        data-action="click->silex-ui--modal#closeOnBackdrop">
+  <div class="flex items-center justify-between gap-4 border-b border-surface-200 px-6 py-4">
+    <h2 class="flex items-center gap-3 text-base font-bold text-ink-900">
+      <% if icon_name.present? %>
+        <span class="flex size-9 items-center justify-center rounded-surface bg-brand-500/10 text-brand-500">
+          <%= render SilexUi::IconComponent.new(name: icon_name, size: :md) %>
+        </span>
+      <% end %>
+      <%= title %>
+    </h2>
+
+    <button type="button" aria-label="Fermer" data-action="silex-ui--modal#close"
+            class="inline-flex size-8 cursor-pointer items-center justify-center rounded-badge text-ink-400 transition hover:bg-surface-100 hover:text-ink-900">
+      <%= render SilexUi::IconComponent.new(name: "close", size: :md) %>
+    </button>
+  </div>
+
+  <%# Le corps arrive du serveur ; en attendant, on dit qu'on attend. %>
+  <%# La balise est écrite à la main : un design system n'a pas à dépendre de %>
+  <%# turbo-rails pour poser un élément personnalisé. %>
+  <turbo-frame id="<%= frame_id %>" class="block max-h-[calc(85vh-4.5rem)] overflow-y-auto">
+    <div class="flex items-center justify-center gap-3 px-6 py-16 text-ink-400">
+      <%= render SilexUi::IconComponent.new(name: "spinner", size: :md, class: "animate-spin") %>
+      <span><%= loading_text %></span>
+    </div>
+  </turbo-frame>
+</dialog>

data/app/components/silex_ui/remote_modal_component.rb

@@ -0,0 +1,54 @@
+# frozen_string_literal: true
+
+module SilexUi
+  # Une modale dont le contenu arrive du serveur à l'ouverture.
+  #
+  # La coquille est posée une fois dans la page ; son corps est un Turbo Frame
+  # vide. N'importe quel lien peut la remplir :
+  #
+  #   <%= render SilexUi::RemoteModalComponent.new(id: "website-modal",
+  #         frame_id: "website_form", title: "Modifier le domaine", icon: "edit") %>
+  #
+  #   <%= link_to edit_website_path(site), **SilexUi::RemoteModalComponent.trigger(
+  #         modal: "website-modal", frame: "website_form") do %>…<% end %>
+  #
+  # Le formulaire chargé décide de la suite : renvoyé dans le frame il reste
+  # dans la modale, marqué `turbo_frame: "_top"` il emmène toute la page.
+  class RemoteModalComponent < BaseComponent
+    def initialize(id:, frame_id:, title:, icon: nil, loading_text: "Chargement…", **options)
+      @id = id
+      @frame_id = frame_id
+      @title = title
+      @icon = icon
+      @loading_text = loading_text
+      super(**options)
+    end
+
+    attr_reader :id, :frame_id, :title, :icon_name, :loading_text
+
+    def icon_name = @icon
+
+    # Les attributs à poser sur un déclencheur. Les écrire à la main sur chaque
+    # lien, c'est se tromper une fois sur trois d'identifiant de frame.
+    def self.trigger(modal:, frame:)
+      {
+        data: {
+          controller: "silex-ui--remote-modal",
+          action: "click->silex-ui--remote-modal#open",
+          silex_ui__remote_modal_modal_value: modal,
+          silex_ui__remote_modal_frame_value: frame
+        }
+      }
+    end
+
+    def css_classes
+      merge_class(
+        # `max-h` puis un corps qui défile : un formulaire long ne doit pas
+        # sortir de l'écran par le bas, où plus rien ne le rattrape.
+        "m-auto max-h-[85vh] w-full max-w-2xl overflow-hidden rounded-2xl border border-surface-200",
+        "bg-surface-0 p-0 text-sm text-ink-700 shadow-card-hover",
+        "backdrop:bg-slate-900/40 backdrop:backdrop-blur-sm"
+      )
+    end
+  end
+end

data/app/components/silex_ui/section_component.html.erb

@@ -1,8 +1,11 @@
 <section class="<%= css_classes %>">
   <% if title.present? || actions? %>
-    <div class="mb-4 flex items-baseline justify-between gap-4">
+    <div class="mb-4 flex flex-wrap items-center justify-between gap-4">
       <% if title.present? %>
-        <h2 class="text-xs font-light tracking-widest text-ink-400 uppercase"><%= title %></h2>
+        <h2 class="flex items-center gap-2 text-[13px] font-bold tracking-wider text-ink-700 uppercase">
+          <%= render SilexUi::IconComponent.new(name: icon_name, size: :sm, class: "text-brand-500") if icon_name.present? %>
+          <%= title %>
+        </h2>
       <% end %>
       <%= actions %>
     </div>

data/app/components/silex_ui/section_component.rb

@@ -1,21 +1,21 @@
 # frozen_string_literal: true
 
 module SilexUi
-  # Bloc de contenu précédé d'un titre en petites capitales — le rythme de base
-  # des tableaux de bord du Silex.
-  #
-  #   <%= render SilexUi::SectionComponent.new(title: "Prochaines expirations") do %>
-  #     …
-  #   <% end %>
+  # Bloc de contenu précédé d'un titre. Le rythme de base des tableaux de bord
+  # du Silex : petites capitales grasses, une icône devant quand la section a
+  # une nature.
   class SectionComponent < BaseComponent
     renders_one :actions
 
-    def initialize(title: nil, **options)
+    def initialize(title: nil, icon: nil, **options)
       @title = title
+      @icon = icon
       super(**options)
     end
 
-    attr_reader :title
+    attr_reader :title, :icon_name
+
+    def icon_name = @icon
 
     def css_classes
       merge_class(nil)

data/app/components/silex_ui/shell_component.html.erb

@@ -0,0 +1,40 @@
+<div class="<%= css_classes %>" data-controller="silex-ui--sidebar">
+  <%# Barre supérieure mobile : le rail n'a pas la place de rester à gauche. %>
+  <div class="fixed inset-x-0 top-0 z-50 flex h-15 items-center justify-between border-b border-surface-200
+              bg-surface-0 px-4 shadow-card md:hidden">
+    <%= mobile_brand || brand %>
+
+    <button type="button" aria-label="Menu" data-action="silex-ui--sidebar#toggle"
+            data-silex-ui--sidebar-target="burger"
+            class="silex-ui-burger flex h-6 w-[30px] cursor-pointer flex-col justify-between">
+      <span></span><span></span><span></span>
+    </button>
+  </div>
+
+  <%# Fond sombre : sur mobile, le panneau ouvert prend la main sur la page. %>
+  <div hidden data-silex-ui--sidebar-target="overlay" data-action="click->silex-ui--sidebar#close"
+       class="fixed inset-0 z-40 bg-ink-900/50 md:hidden"></div>
+
+  <aside data-silex-ui--sidebar-target="panel"
+         class="silex-ui-panel fixed top-15 bottom-0 left-0 z-40 flex w-70 flex-col items-center gap-3
+                border-r border-surface-200 bg-surface-50 px-4 py-4
+                md:top-0 md:w-rail md:px-2 md:py-5">
+    <% if brand? %>
+      <div class="mb-3 hidden md:block"><%= brand %></div>
+    <% end %>
+
+    <nav class="flex w-full flex-1 flex-col items-stretch gap-3 overflow-y-auto md:items-center
+                [scrollbar-width:none] [&::-webkit-scrollbar]:hidden" aria-label="Navigation principale">
+      <%= safe_join(items) %>
+    </nav>
+
+    <% if utilities? || footer? %>
+      <div class="mt-auto flex w-full shrink-0 flex-col items-center gap-3 border-t border-surface-200 pt-4">
+        <%= utilities %>
+        <%= footer %>
+      </div>
+    <% end %>
+  </aside>
+
+  <main class="min-h-screen pt-15 md:pt-0 md:pl-rail"><%= page %></main>
+</div>