baldur 0.1.7 → 0.2.3

data/app/assets/stylesheets/baldur/application/components/sidebar.css

@@ -1,4 +1,48 @@
 @layer components {
+  .sidebar-shell {
+    min-height: 100vh;
+    background: var(--color-surface-low);
+  }
+
+  .sidebar-shell__main {
+    min-width: 0;
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .sidebar-shell__desktop {
+    display: none;
+    flex-shrink: 0;
+    border-right: 1px solid var(--color-outline-variant);
+    background: var(--color-surface);
+    padding: var(--space-3);
+    flex-direction: column;
+  }
+
+  .sidebar__brand-link {
+    display: inline-flex;
+    text-decoration: none;
+  }
+
+  .sidebar__brand-link .brand-lockup {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-2);
+    color: var(--color-on-surface);
+  }
+
+  .sidebar__brand-link .brand-lockup__logo {
+    width: 2.25rem;
+    height: 2.25rem;
+    border-radius: var(--radius-xl);
+    object-fit: cover;
+  }
+
+  .sidebar__brand-link .brand-lockup__wordmark {
+    color: var(--color-on-surface);
+  }
+
   .sidebar {
     position: sticky;
     top: 0;
@@ -21,6 +65,196 @@
     font-weight: 500;
   }
 
+  .sidebar__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-2);
+  }
+
+  .sidebar__slot--header {
+    margin-top: var(--space-4);
+  }
+
+  .sidebar__nav {
+    margin-top: var(--space-6);
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    gap: var(--space-1);
+  }
+
+  .sidebar__section-divider {
+    margin-block: var(--space-6);
+    border-top: 1px solid var(--color-outline-variant);
+  }
+
+  .sidebar__section-label {
+    margin: 0 0 var(--space-2);
+    padding-inline: var(--space-3);
+    color: var(--color-on-surface-variant);
+    font-size: 0.75rem;
+    font-weight: 600;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+  }
+
+  .sidebar__footer {
+    margin-top: auto;
+    border-top: 1px solid var(--color-outline-variant);
+    padding-top: var(--space-4);
+  }
+
+  .sidebar__footer-inner {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--space-3);
+  }
+
+  .sidebar-mobile {
+    display: block;
+  }
+
+  .sidebar-mobile__topbar {
+    position: sticky;
+    top: 0;
+    z-index: 10;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-3);
+    border-bottom: 1px solid var(--color-outline-variant);
+    background: var(--color-surface-highest);
+    padding: var(--space-3) var(--space-4);
+  }
+
+  .sidebar-mobile__brand .brand-lockup__logo {
+    width: 1.75rem;
+    height: 1.75rem;
+    border-radius: var(--radius-lg);
+    object-fit: cover;
+  }
+
+  .sidebar-mobile__brand .brand-lockup__wordmark {
+    color: var(--color-on-surface);
+    font-size: 1.125rem;
+    font-weight: 700;
+  }
+
+  .sidebar-mobile__panel {
+    position: fixed;
+    inset: 0;
+    z-index: 40;
+    display: flex;
+  }
+
+  .sidebar-mobile__scrim {
+    position: fixed;
+    inset: 0;
+  }
+
+  .sidebar-mobile__surface {
+    position: relative;
+    display: flex;
+    flex: 1 1 auto;
+    width: 100%;
+    max-width: 20rem;
+    flex-direction: column;
+    background: var(--color-surface-highest);
+  }
+
+  .sidebar-mobile__close-shell {
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin-right: -3rem;
+    padding-top: var(--space-2);
+  }
+
+  .sidebar-mobile__close {
+    color: var(--color-inverse-on-surface);
+  }
+
+  .sidebar-mobile__close-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+
+  .sidebar-mobile__content {
+    flex: 1 1 auto;
+    overflow-y: auto;
+    padding: var(--space-5) var(--space-4) var(--space-4);
+  }
+
+  .sidebar-mobile__slot--header {
+    margin-bottom: var(--space-5);
+  }
+
+  .sidebar-mobile__slot--footer {
+    border-top: 1px solid var(--color-outline-variant);
+    padding: var(--space-4);
+  }
+
+  .sidebar-mobile__nav {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+  }
+
+  .sidebar-mobile__link {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+    border-radius: var(--radius-lg);
+    padding: 0.625rem 0.75rem;
+    color: var(--color-text-soft);
+    font-size: 0.875rem;
+    font-weight: 500;
+    text-decoration: none;
+  }
+
+  .sidebar-mobile__link:hover,
+  .sidebar-mobile__link--active {
+    color: var(--color-primary);
+    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
+  }
+
+  .sidebar-mobile__icon {
+    width: 1.25rem;
+    height: 1.25rem;
+    flex-shrink: 0;
+  }
+
+  .sidebar-mobile__section-divider {
+    margin-block: var(--space-5);
+    border-top: 1px solid var(--color-outline-variant);
+  }
+
+  .sidebar-mobile__section-label {
+    margin: 0 0 var(--space-2);
+    padding-inline: var(--space-3);
+    color: var(--color-on-surface-variant);
+    font-size: 0.75rem;
+    font-weight: 600;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+  }
+
+  @media (min-width: 48rem) {
+    .sidebar-shell {
+      display: flex;
+    }
+
+    .sidebar-shell__desktop {
+      display: flex;
+    }
+
+    .sidebar-mobile {
+      display: none;
+    }
+  }
+
   .sidebar__toggle {
     cursor: pointer;
     pointer-events: auto;

data/app/assets/stylesheets/baldur.css

@@ -25,4 +25,5 @@
 @import "./baldur/application/components/stepper.css";
 @import "./baldur/application/components/switch.css";
 @import "./baldur/application/components/table.css";
+@import "./baldur/application/components/confirmation.css";
 @import "./baldur/application/components/timeline.css";

data/app/assets/tailwind/baldur/engine.css

@@ -1,5 +1,5 @@
-@source "../../helpers";
-@source "../../views";
+@source "../../../helpers";
+@source "../../../views";
 
 @import "../../stylesheets/baldur.css";
 @import "../../stylesheets/baldur_panel_secondary.css";

data/app/helpers/baldur/marketing_helper.rb

@@ -3,82 +3,85 @@ module Baldur
     include Baldur::RenderHelper
 
     def ui_marketing_top_nav(links:, primary_action:, theme_toggle: nil, classes: nil, brand: {})
-      baldur_render "baldur/marketing/top_nav",
-             links: Array(links),
-             primary_action: primary_action,
-             theme_toggle: theme_toggle,
-             classes: classes,
-             brand: ui_marketing_resolve_brand(brand)
+      baldur_render 'baldur/marketing/top_nav',
+                    links: Array(links),
+                    primary_action: primary_action,
+                    theme_toggle: theme_toggle,
+                    classes: classes,
+                    brand: ui_marketing_resolve_brand(brand)
     end
 
-    def ui_marketing_hero_section(variant:, headline:, body:, primary_action:, centerpiece_image:, id: "hero", secondary_action: nil, supporting_action: nil, callouts: [], orbit_sources: [], classes: nil)
-      baldur_render "baldur/marketing/hero_section",
-             variant: variant,
-             headline: headline,
-             body: body,
-             primary_action: primary_action,
-             secondary_action: secondary_action,
-             supporting_action: supporting_action,
-             callouts: Array(callouts),
-             orbit_sources: Array(orbit_sources),
-             centerpiece_image: centerpiece_image,
-             id: id,
-             classes: classes
+    def ui_marketing_hero_section(variant:, headline:, body:, primary_action:, centerpiece_image:, id: 'hero',
+                                  secondary_action: nil, supporting_action: nil, callouts: [], orbit_sources: [], classes: nil)
+      baldur_render 'baldur/marketing/hero_section',
+                    variant: variant,
+                    headline: headline,
+                    body: body,
+                    primary_action: primary_action,
+                    secondary_action: secondary_action,
+                    supporting_action: supporting_action,
+                    callouts: Array(callouts),
+                    orbit_sources: Array(orbit_sources),
+                    centerpiece_image: centerpiece_image,
+                    id: id,
+                    classes: classes
     end
 
-    def ui_marketing_features_section(title:, tabs:, id: "use-cases", description: nil, cta: nil, question_label: "Answers to questions like:", classes: nil)
-      baldur_render "baldur/marketing/features_section",
-             title: title,
-             description: description,
-             tabs: Array(tabs),
-             cta: cta,
-             question_label: question_label,
-             id: id,
-             classes: classes
+    def ui_marketing_features_section(title:, tabs:, id: 'use-cases', description: nil, cta: nil,
+                                      question_label: 'Answers to questions like:', classes: nil)
+      baldur_render 'baldur/marketing/features_section',
+                    title: title,
+                    description: description,
+                    tabs: Array(tabs),
+                    cta: cta,
+                    question_label: question_label,
+                    id: id,
+                    classes: classes
     end
 
-    def ui_marketing_testimonials_section(variant:, title:, items:, id: "proof", classes: nil)
-      baldur_render "baldur/marketing/testimonials_section",
-             variant: variant,
-             title: title,
-             items: Array(items),
-             id: id,
-             classes: classes
+    def ui_marketing_testimonials_section(variant:, title:, items:, id: 'proof', classes: nil)
+      baldur_render 'baldur/marketing/testimonials_section',
+                    variant: variant,
+                    title: title,
+                    items: Array(items),
+                    id: id,
+                    classes: classes
     end
 
-    def ui_marketing_faq_section(title:, items:, id: "faq", description: nil, classes: nil, container_class: nil)
-      baldur_render "baldur/marketing/faq_section",
-             title: title,
-             description: description,
-             items: Array(items),
-             id: id,
-             classes: classes,
-             container_class: container_class
+    def ui_marketing_faq_section(title:, items:, id: 'faq', description: nil, classes: nil, container_class: nil)
+      baldur_render 'baldur/marketing/faq_section',
+                    title: title,
+                    description: description,
+                    items: Array(items),
+                    id: id,
+                    classes: classes,
+                    container_class: container_class
     end
 
     def ui_marketing_cta_banner(banner:, classes: nil)
-      baldur_render "baldur/marketing/cta_banner", banner: banner, classes: classes
+      baldur_render 'baldur/marketing/cta_banner', banner: banner, classes: classes
     end
 
-    def ui_marketing_pricing_tables(headline:, subheadline:, billing_options:, plans:, shared_capabilities:, eyebrow: "Pricing", fair_use_link: nil, classes: nil)
-      baldur_render "baldur/marketing/pricing_tables",
-             headline: headline,
-             subheadline: subheadline,
-             billing_options: Array(billing_options),
-             plans: Array(plans),
-             shared_capabilities: shared_capabilities,
-             eyebrow: eyebrow,
-             fair_use_link: fair_use_link,
-             classes: classes
+    def ui_marketing_pricing_tables(headline:, subheadline:, billing_options:, plans:, shared_capabilities:,
+                                    eyebrow: 'Pricing', fair_use_link: nil, classes: nil)
+      baldur_render 'baldur/marketing/pricing_tables',
+                    headline: headline,
+                    subheadline: subheadline,
+                    billing_options: Array(billing_options),
+                    plans: Array(plans),
+                    shared_capabilities: shared_capabilities,
+                    eyebrow: eyebrow,
+                    fair_use_link: fair_use_link,
+                    classes: classes
     end
 
     def ui_marketing_footer(columns:, description:, copyright: nil, classes: nil, brand: {})
-      baldur_render "baldur/marketing/footer",
-             columns: Array(columns),
-             description: description,
-             copyright: copyright,
-             classes: classes,
-             brand: ui_marketing_resolve_brand(brand)
+      baldur_render 'baldur/marketing/footer',
+                    columns: Array(columns),
+                    description: description,
+                    copyright: copyright,
+                    classes: classes,
+                    brand: ui_marketing_resolve_brand(brand)
     end
 
     def ui_marketing_render_content(content)
@@ -90,18 +93,18 @@ module Baldur
     end
 
     def ui_marketing_action_string(*actions)
-      actions.flatten.compact.map(&:to_s).map(&:strip).reject(&:blank?).uniq.join(" ")
+      actions.flatten.compact.map(&:to_s).map(&:strip).reject(&:blank?).uniq.join(' ')
     end
 
     def ui_marketing_resolve_brand(overrides = {})
       configured_brand = ui_marketing_configured_brand
       override_brand = overrides.to_h.symbolize_keys
       resolved_brand = configured_brand.merge(override_brand)
-      resolved_name = resolved_brand[:name].presence || "Brand"
+      resolved_name = resolved_brand[:name].presence || 'Brand'
 
       resolved_brand[:name] = resolved_name
       resolved_brand[:wordmark] = resolved_brand[:wordmark].presence || resolved_name
-      resolved_brand[:logo_src] = resolved_brand[:logo_src].presence || "/icon.png"
+      resolved_brand[:logo_src] = resolved_brand[:logo_src].presence || '/icon.png'
       resolved_brand[:logo_alt] = resolved_brand[:logo_alt].presence || "#{resolved_name} logo"
       resolved_brand
     end
@@ -109,13 +112,12 @@ module Baldur
     def ui_marketing_configured_brand
       config = Baldur.config
       brand = if config.respond_to?(:marketing_brand)
-        config.public_send(:marketing_brand)
-      elsif config.instance_variable_defined?(:@marketing_brand)
-        config.instance_variable_get(:@marketing_brand)
-      end
+                config.public_send(:marketing_brand)
+              elsif config.instance_variable_defined?(:@marketing_brand)
+                config.instance_variable_get(:@marketing_brand)
+              end
 
-      resolved_brand = brand.respond_to?(:to_h) ? brand.to_h.symbolize_keys : {}
-      resolved_brand
+      brand.respond_to?(:to_h) ? brand.to_h.symbolize_keys : {}
     end
   end
 end

data/app/helpers/baldur/optional/auth_page_helper.rb

@@ -3,13 +3,15 @@ module Baldur
     module AuthPageHelper
       include Baldur::RenderHelper
 
-      def ui_auth_page(title:, description:, brand_path: nil, shell_class: nil, card_class: nil, notice: nil, alert: nil, &block)
-        baldur_render "baldur/optional/auth_page",
+      def ui_auth_page(title:, description:, brand_path: nil, shell_class: nil, card_class: nil,
+                       top_rail: nil, notice: nil, alert: nil, &block)
+        baldur_render 'baldur/optional/auth_page',
                       title: title,
                       description: description,
                       brand_path: brand_path,
                       shell_class: shell_class,
                       card_class: card_class,
+                      top_rail: top_rail,
                       notice: notice,
                       alert: alert,
                       body: block_given? ? capture(&block) : nil

data/app/helpers/baldur/optional/google_auth_helper.rb

@@ -3,8 +3,8 @@ module Baldur
     module GoogleAuthHelper
       include Baldur::RenderHelper
 
-      def google_sign_in_button(label: "Sign in with Google", href: nil, block: false, **options)
-        baldur_render "baldur/optional/google_sign_in_button",
+      def google_sign_in_button(label: 'Sign in with Google', href: nil, block: false, **options)
+        baldur_render 'baldur/optional/google_sign_in_button',
                       **{
                         label: label,
                         href: href || Baldur.config.default_google_sign_in_path,

data/app/helpers/baldur/optional/panel_secondary_helper.rb

@@ -3,8 +3,9 @@ module Baldur
     module PanelSecondaryHelper
       include Baldur::RenderHelper
 
-      def ui_panel_secondary(id:, title:, trigger_label:, trigger_icon: "message-square", panel_class: nil, trigger_class: nil, shell_class: nil, shell_data: nil, panel_data: nil, trigger_data: nil, &block)
-        baldur_render "baldur/optional/panel_secondary",
+      def ui_panel_secondary(id:, title:, trigger_label:, trigger_icon: 'message-square', panel_class: nil,
+                             trigger_class: nil, shell_class: nil, shell_data: nil, panel_data: nil, trigger_data: nil, &block)
+        baldur_render 'baldur/optional/panel_secondary',
                       id: id,
                       title: title,
                       trigger_label: trigger_label,