fluxbit_view_components 0.5.3 → 0.5.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 06e4ed1b421bf498659d15d049ad70dc8bb4fe5ec1bc732a6259649e3cfe4a8e
-  data.tar.gz: d82fbbdcd495f2035ec683c65696def950c51e9ca76e4d687bc83e58f375edca
+  metadata.gz: db4a121022c04abb99806e36df03f68c0a1dc4ced2ff73c31da5ab2ea3c5b84a
+  data.tar.gz: 6b5622d2bcdff4c893aa1a0efe36164e1b48fcfd04b60659afefa4a79120f33d
 SHA512:
-  metadata.gz: 39191b6eb817d7ce9fb3cc8ebcef6ee6bcf8d06ee0adca6c956ec4f40a019755aa9401d8aff4b48dd2c122c4e8e4968c55849d34d5ca3bf5687b19ec33ba5290
-  data.tar.gz: 7f5fd219cf6bab11f202d574464d0e71897284488e8ec116a8df6036f752ba73eea071f3d03661b59d69b90cf1b6c49a002e08c1b8d9dd7dd3071fdaaea7949d
+  metadata.gz: d5c59a4eb9832c2889b512670a22b3206bc0339a2407a17f511d1b7b26fb7060cadce92e19d9f58bd926efe6fa72fa4d698f9b8220cbb354b1f381a90c721916
+  data.tar.gz: 2a97218e6bfdc7b07ddac8c2236ad1d9a96e6f3605dfdced076aa24066e59b45de8f1d1e1c1808e22585ffac20cc9170e8ba21ad63d2ce505c22f987fc0c1e53

data/app/components/fluxbit/bottom_navigation_component.rb

@@ -79,11 +79,11 @@ class Fluxbit::BottomNavigationComponent < Fluxbit::Component
           if cta?
             # Insert CTA in the middle for both variants
             half = (items.size / 2.0).floor
-            safe_join(items[0...half] + [tag.div(cta, class: styles[:cta_wrapper])] + items[half..])
+            safe_join(items[0...half] + [ tag.div(cta, class: styles[:cta_wrapper]) ] + items[half..])
           elsif pagination?
             # Insert pagination in the middle
             half = (items.size / 2.0).floor
-            safe_join(items[0...half] + [pagination] + items[half..])
+            safe_join(items[0...half] + [ pagination ] + items[half..])
           else
             safe_join(items)
           end
@@ -120,7 +120,7 @@ class Fluxbit::BottomNavigationComponent < Fluxbit::Component
     total += 2 if pagination? # Pagination spans 2 grid cells (col-span-2)
 
     # Ensure columns is within valid range (2-6)
-    [[total, 2].max, 6].min
+    [ [ total, 2 ].max, 6 ].min
   end
 
   ##
@@ -170,7 +170,7 @@ class Fluxbit::BottomNavigationComponent < Fluxbit::Component
       end
 
       if @tooltip_text
-        safe_join([button_content, render_tooltip])
+        safe_join([ button_content, render_tooltip ])
       else
         button_content
       end
@@ -250,7 +250,7 @@ class Fluxbit::BottomNavigationComponent < Fluxbit::Component
       end
 
       if @tooltip_text
-        safe_join([button_content, render_tooltip])
+        safe_join([ button_content, render_tooltip ])
       else
         button_content
       end

data/app/components/fluxbit/carousel_component.rb

@@ -128,7 +128,7 @@ class Fluxbit::CarouselComponent < Fluxbit::Component
 
     button_props = {
       type: "button",
-      class: [styles[:controls][:button], is_previous ? styles[:controls][:previous] : styles[:controls][:next]].join(" "),
+      class: [ styles[:controls][:button], is_previous ? styles[:controls][:previous] : styles[:controls][:next] ].join(" "),
       data: {}
     }
 
@@ -150,5 +150,4 @@ class Fluxbit::CarouselComponent < Fluxbit::Component
       end
     end
   end
-
 end

data/app/components/fluxbit/form/telephone_component.rb

@@ -53,8 +53,8 @@ class Fluxbit::Form::TelephoneComponent < Fluxbit::Form::TextFieldComponent
     current_classes = @props[:class].to_s
 
     # Get size class from config
-    size_index = [@sizing, 0].max
-    size_index = [size_index, @@telephone_styles[:input][:sizes].length - 1].min
+    size_index = [ @sizing, 0 ].max
+    size_index = [ size_index, @@telephone_styles[:input][:sizes].length - 1 ].min
     custom_size_class = @@telephone_styles[:input][:sizes][size_index]
 
     # Remove the old size class and add our custom one
@@ -144,8 +144,8 @@ class Fluxbit::Form::TelephoneComponent < Fluxbit::Form::TextFieldComponent
 
   def country_select_classes
     # Get size from config
-    size_index = [@sizing, 0].max
-    size_index = [size_index, @@telephone_styles[:country_select][:sizes].length - 1].min
+    size_index = [ @sizing, 0 ].max
+    size_index = [ size_index, @@telephone_styles[:country_select][:sizes].length - 1 ].min
     size_config = @@telephone_styles[:country_select][:sizes][size_index]
 
     # Get color from config

data/app/components/fluxbit/form/upload_image_component.rb

@@ -34,7 +34,8 @@ class Fluxbit::Form::UploadImageComponent < Fluxbit::Form::FieldComponent
     @initials = @props.delete(:initials)
     @image_path = @props.delete(:image_path) ||
       (if @object&.send(@attribute).respond_to?(:attached?) && @object&.send(@attribute)&.send("attached?")
-        @object&.send(@attribute)&.variant(resize_to_fit: [ 160, 160 ])
+        attachment = @object.send(@attribute)
+        attachment.variable? ? attachment.variant(resize_to_fit: [ 160, 160 ]) : attachment
        end) || @props.delete(:image_placeholder) || ""
 
     @props["class"] = "absolute inset-0 h-full w-full cursor-pointer rounded-md border-gray-300 opacity-0"

data/app/components/fluxbit/gravatar_component.rb

@@ -1,16 +1,14 @@
 # frozen_string_literal: true
 
-# From:
-# https://github.com/chrislloyd/gravtastic/blob/master/lib/gravtastic.rb
-# https://chrislloyd.github.io/gravtastic/
-
-require "digest/md5"
-
 # The `Fluxbit::GravatarComponent` is a component for rendering Gravatar avatars.
 # It extends `Fluxbit::AvatarComponent` and provides options for configuring the
 # Gravatar's appearance and behavior. You can control the Gravatar's rating, size,
-# filetype, and other attributes. The Gravatar URL is constructed based on the
-# provided email address and options.
+# filetype, and other attributes.
+#
+# The URL generation logic lives in `Fluxbit::Gravatar` and can be used standalone:
+#
+#   Fluxbit::Gravatar.url(email: "user@example.com")
+#
 class Fluxbit::GravatarComponent < Fluxbit::AvatarComponent
   include Fluxbit::Config::AvatarComponent
   include Fluxbit::Config::GravatarComponent
@@ -31,82 +29,26 @@ class Fluxbit::GravatarComponent < Fluxbit::AvatarComponent
   # @option props [Hash] **props Remaining options declared as HTML attributes, applied to the Gravatar container.
   def initialize(**props)
     @props = props
-    @gravatar_options = {
-      rating: options((@props.delete(:rating)|| "").to_sym, collection: gravatar_styles[:rating], default: @@rating),
-      secure: options(@props.delete(:secure), default: true),
-      filetype: options((@props.delete(:filetype)|| "").to_sym, collection: gravatar_styles[:filetype], default: @@filetype),
-      default: options((@props.delete(:default)|| "").to_sym, collection: gravatar_styles[:default], default: @@default),
-      size: gravatar_styles[:size][options(@props[:size], collection: gravatar_styles[:size], default: @@size)],
+    @email = @props.delete(:email)
+    @url_only = @props.delete(:url_only)
+
+    @gravatar_url_options = {
+      rating: @props.delete(:rating),
+      secure: @props.delete(:secure),
+      filetype: @props.delete(:filetype),
+      default: @props.delete(:default),
+      size: @props[:size],
       name: @props.delete(:name),
       initials: @props.delete(:initials)
-    }
+    }.compact
+
     add class: gravatar_styles[:base], to: @props
-    @email = @props.delete(:email)
-    @url_only = @props.delete(:url_only)
-    src = gravatar_url
+    src = Fluxbit::Gravatar.url(email: @email, **@gravatar_url_options)
     super(src: src, **@props)
   end
 
   def call
-    return gravatar_url.html_safe if @url_only
+    return Fluxbit::Gravatar.url(email: @email, **@gravatar_url_options).html_safe if @url_only
     super
   end
-
-  # The raw MD5 hash of the users' email. Gravatar is particularly tricky as
-  # it downcases all emails. This is really the guts of the module,
-  # everything else is just convenience.
-  def gravatar_id
-    Digest::MD5.hexdigest(@email.to_s.downcase)
-  end
-
-  # Constructs the full Gravatar url.
-  def gravatar_url
-    gravatar_hostname(@gravatar_options.delete(:secure)) +
-      gravatar_filename(@gravatar_options.delete(:filetype)) +
-      "?#{url_params_from_hash(process_options(@gravatar_options))}"
-  end
-
-  # Creates a params hash like "?foo=bar" from a hash like {'foo' => 'bar'}.
-  # The values are sorted so it produces deterministic output (and can
-  # therefore be tested easily).
-  def url_params_from_hash(hash)
-    hash.map do |key, val|
-      [ gravatar_abbreviations[key.to_sym] || key.to_s, val.to_s ].join("=")
-    end.sort.join("&")
-  end
-
-  # Returns either Gravatar's secure hostname or not.
-  def gravatar_hostname(secure)
-    "http#{secure ? 's://secure.' : '://'}gravatar.com/avatar/"
-  end
-
-  # Munges the ID and the filetype into one. Like "abc123.png"
-  def gravatar_filename(filetype)
-    "#{gravatar_id}.#{filetype}"
-  end
-
-  # Some options need to be processed before becoming URL params
-  def process_options(options_to)
-    processed_options = {}
-    options_to.each do |key, val|
-      case key
-      when :forcedefault
-        processed_options[key] = "y" if val
-      when :name, :initials
-        processed_options[key] = val if val.present?
-      else
-        processed_options[key] = val
-      end
-    end
-    processed_options
-  end
-
-  def gravatar_abbreviations
-    {
-      size:         "s",
-      default:      "d",
-      rating:       "r",
-      forcedefault: "f"
-    }
-  end
 end

data/app/components/fluxbit/pagination_component.rb

@@ -195,7 +195,7 @@ class Fluxbit::PaginationComponent < Fluxbit::Component
     params = (respond_to?(:request) ? request.GET : controller.request.GET).dup
     params.merge!(vars[:params].transform_keys(&:to_s)) if vars[:params].is_a?(Hash)
     # Set page and possibly limit
-    page_param = vars[:page_param]&.to_s.presence || 'page'
+    page_param = vars[:page_param]&.to_s.presence || "page"
     params[page_param] = page
     params[vars[:limit_param].to_s] = vars[:limit] if vars[:limit_extra] && vars[:limit_param]
     # Apply params proc if given

data/app/components/fluxbit/stepper_component.rb

@@ -120,11 +120,11 @@ class Fluxbit::StepperComponent < Fluxbit::Component
 
     connector_classes = if step.state == :completed
                           styles[:connector][:completed][@variant][@orientation]
-                        elsif step.state == :active
+    elsif step.state == :active
                           styles[:connector][:active][@color][@variant][@orientation]
-                        else
+    else
                           styles[:connector][@variant][@orientation]
-                        end
+    end
 
     tag.div(class: connector_classes)
   end

data/app/components/fluxbit/theme_button_component.rb

@@ -24,8 +24,8 @@ class Fluxbit::ThemeButtonComponent < Fluxbit::ButtonComponent
     props[:remove_dropdown_arrow] = true
 
     # Add Stimulus controller
-    props["data-controller"] = [props["data-controller"], "fx-theme-button"].compact.join(" ")
-    props["data-action"] = [props["data-action"], "click->fx-theme-button#toggle"].compact.join(" ")
+    props["data-controller"] = [ props["data-controller"], "fx-theme-button" ].compact.join(" ")
+    props["data-action"] = [ props["data-action"], "click->fx-theme-button#toggle" ].compact.join(" ")
 
     super(**props)
   end

data/app/helpers/fluxbit/view_helper.rb

@@ -2,6 +2,10 @@
 
 module Fluxbit
   module ViewHelper
+    def fx_gravatar_url(...)
+      Fluxbit::Gravatar.url(...)
+    end
+
     def fx_body_class
       "h-full bg-slate-100 dark:bg-slate-900 dark:text-white"
     end

data/lib/fluxbit/gravatar.rb

@@ -0,0 +1,110 @@
+# frozen_string_literal: true
+
+require "digest/md5"
+
+module Fluxbit
+  # Standalone Gravatar URL generator.
+  #
+  # Can be used independently of the component:
+  #
+  #   Fluxbit::Gravatar.url(email: "user@example.com")
+  #   Fluxbit::Gravatar.url(email: "user@example.com", size: :lg, rating: :g)
+  #
+  # Or via the helper in views:
+  #
+  #   fx_gravatar_url(email: "user@example.com")
+  #
+  # From:
+  # https://github.com/chrislloyd/gravtastic/blob/master/lib/gravtastic.rb
+  # https://chrislloyd.github.io/gravtastic/
+  module Gravatar
+    ABBREVIATIONS = {
+      size: "s",
+      default: "d",
+      rating: "r",
+      forcedefault: "f"
+    }.freeze
+
+    class << self
+      # Generates a Gravatar URL for the given email.
+      #
+      # @param email [String] The email address.
+      # @param rating [Symbol] Gravatar rating (:g, :pg, :r, :x).
+      # @param secure [Boolean] Use HTTPS (default: true).
+      # @param filetype [Symbol] Image format (:png, :jpg, :gif, etc.).
+      # @param default [Symbol] Default image style (:identicon, :robohash, :mp, etc.).
+      # @param size [Symbol, Integer] Size as a symbol (:xs, :sm, :md, :lg, :xl) or pixel integer.
+      # @param name [String] Optional name param appended to URL.
+      # @param initials [String] Optional initials param appended to URL.
+      # @return [String] The full Gravatar URL.
+      def url(email:, rating: nil, secure: true, filetype: nil, default: nil, size: nil, name: nil, initials: nil)
+        styles = config.gravatar_styles
+
+        rating   = resolve_option(rating,   collection: styles[:rating],   fallback: config.rating)
+        filetype = resolve_option(filetype, collection: styles[:filetype], fallback: config.filetype)
+        default  = resolve_option(default,  collection: styles[:default],  fallback: config.default)
+        size_px  = resolve_size(size, styles[:size])
+
+        params = { rating: rating, default: default, size: size_px }
+        params[:name] = name if name.present?
+        params[:initials] = initials if initials.present?
+
+        hostname(secure) + filename(email, filetype) + "?" + to_query(process_options(params))
+      end
+
+      # Returns the MD5 hash of the email, which Gravatar uses as identifier.
+      #
+      # @param email [String]
+      # @return [String]
+      def gravatar_id(email)
+        Digest::MD5.hexdigest(email.to_s.downcase)
+      end
+
+      private
+
+      def config
+        Fluxbit::Config::GravatarComponent
+      end
+
+      def resolve_option(value, collection:, fallback:)
+        return fallback if value.nil?
+
+        value = value.to_sym if value.respond_to?(:to_sym)
+        value.in?(collection) ? value : fallback
+      end
+
+      def resolve_size(value, sizes)
+        return sizes[:md] if value.nil?
+        return value if value.is_a?(Integer)
+
+        key = value.to_sym
+        sizes[key] || sizes[:md]
+      end
+
+      def hostname(secure)
+        "http#{secure ? 's://secure.' : '://'}gravatar.com/avatar/"
+      end
+
+      def filename(email, filetype)
+        "#{gravatar_id(email)}.#{filetype}"
+      end
+
+      def process_options(options)
+        options.each_with_object({}) do |(key, val), result|
+          case key
+          when :forcedefault
+            result[key] = "y" if val
+          when :name, :initials
+            result[key] = val if val.present?
+          else
+            result[key] = val
+          end
+        end
+      end
+
+      def to_query(hash)
+        hash.map { |key, val| "#{ABBREVIATIONS[key.to_sym] || key}=#{val}" }.sort.join("&")
+      end
+    end
+  end
+end

data/lib/fluxbit/view_components/version.rb

@@ -1,5 +1,5 @@
 module Fluxbit
   module ViewComponents
-    VERSION = "0.5.3"
+    VERSION = "0.5.4"
   end
 end

data/lib/fluxbit/view_components.rb

@@ -54,4 +54,6 @@ module Fluxbit
     require "fluxbit/config/theme_button_component"
     require "fluxbit/config/tooltip_component"
   end
+
+  require "fluxbit/gravatar"
 end

data/lib/install/install.rb

@@ -98,7 +98,7 @@ else
   say.call "⚠️ Couldn't find controllers/index.js, skipping Stimulus controller setup", :red
   say.call "   Add these lines to your controllers/index.js:", :red
   say.call '   import { registerFluxbitControllers } from "fluxbit-view-components"', :red
-  say.call '   registerFluxbitControllers(Stimulus)', :red
+  say.call "   registerFluxbitControllers(Stimulus)", :red
 end
 
 if layout_path.exist?

data/lib/tasks/lookbook_static.rake

@@ -0,0 +1,542 @@
+# frozen_string_literal: true
+
+module LookbookStaticGenerator
+  class Generator
+    attr_reader :output_dir, :previews_dir, :docs_dir, :assets_dir, :combination_mode, :port
+
+    def initialize(combination_mode: :cartesian)
+      @combination_mode = combination_mode
+      # Output to project root 'dist' folder (assuming running from demo app)
+      @output_dir = Rails.root.join("../dist").to_s
+      @previews_dir = File.join(@output_dir, "inspect")
+      @docs_dir = File.join(@output_dir, "pages")
+      @assets_dir = File.join(@output_dir, "assets")
+    end
+
+    def run!
+      puts ""
+      puts "🚀 Generating static Lookbook..."
+      puts "   Mode: #{combination_mode} (parameter combinations)"
+      puts "   Output: #{output_dir}"
+      puts ""
+
+      prepare_directories
+      start_server
+
+      begin
+        collect_assets
+        pages_count = generate_docs
+        previews_count, param_previews_count = generate_previews
+        generate_index(pages_count, previews_count, param_previews_count)
+        print_summary(pages_count, previews_count, param_previews_count)
+      ensure
+        stop_server
+      end
+    end
+
+    private
+
+    # ─── Directory Setup ───────────────────────────────────────────────
+
+    def prepare_directories
+      FileUtils.rm_rf(output_dir)
+      FileUtils.mkdir_p([previews_dir, docs_dir, assets_dir])
+    end
+
+    # ─── Server Management ─────────────────────────────────────────────
+
+    def start_server
+      @port = find_available_port
+      puts "📡 Starting server on port #{@port}..."
+
+      @server_pid = spawn(
+        { "RAILS_ENV" => "development", "PORT" => @port.to_s },
+        "bundle", "exec", "rails", "server", "-p", @port.to_s, "-b", "127.0.0.1",
+        chdir: Rails.root.to_s,
+        out: File::NULL,
+        err: File::NULL
+      )
+
+      wait_for_server
+    end
+
+    def wait_for_server
+      print "   Waiting for server"
+      60.times do
+        begin
+          TCPSocket.new("127.0.0.1", @port).close
+          puts " ✅"
+          sleep 2 # Give Lookbook time to initialize
+          return
+        rescue Errno::ECONNREFUSED
+          print "."
+          sleep 1
+        end
+      end
+      abort "❌ Server failed to start within 60 seconds"
+    end
+
+    def stop_server
+      return unless @server_pid
+      puts "🛑 Stopping server..."
+      Process.kill("TERM", @server_pid)
+      Process.wait(@server_pid)
+      puts "   ✅ Server stopped"
+    rescue Errno::ESRCH, Errno::ECHILD
+      # Process already gone
+    end
+
+    def find_available_port
+      server = TCPServer.new("127.0.0.1", 0)
+      port = server.addr[1]
+      server.close
+      port
+    end
+
+    # ─── HTTP Helpers ──────────────────────────────────────────────────
+
+    def fetch_page(path, retries: 3)
+      uri = URI("http://127.0.0.1:#{@port}#{path}")
+      attempt = 0
+      begin
+        attempt += 1
+        response = Net::HTTP.get_response(uri)
+        case response
+        when Net::HTTPSuccess
+          response.body
+        when Net::HTTPRedirection
+          redirect_location = response["location"]
+          redirect_uri = URI(redirect_location)
+          unless redirect_uri.host
+            redirect_uri = URI("http://127.0.0.1:#{@port}#{redirect_location}")
+          end
+          Net::HTTP.get(redirect_uri)
+        else
+          puts "    ⚠️  HTTP #{response.code} for #{path}"
+          nil
+        end
+      rescue Errno::ECONNREFUSED, Errno::ECONNRESET, Net::OpenTimeout => e
+        if attempt <= retries
+          sleep 1
+          retry
+        end
+        puts "    ⚠️  Failed to fetch #{path}: #{e.message}"
+        nil
+      end
+    end
+
+    # ─── File Helpers ──────────────────────────────────────────────────
+
+    def sanitize_filename(name)
+      name.to_s.gsub(/[^a-zA-Z0-9_\-.]/, "_").gsub(/_+/, "_").gsub(/^_|_$/, "")
+    end
+
+    def save_html(dir, filename, content)
+      return false unless content && !content.strip.empty?
+      FileUtils.mkdir_p(dir)
+      File.write(File.join(dir, "#{filename}.html"), content.force_encoding("UTF-8"))
+      true
+    end
+
+    # ─── Assets Collection ─────────────────────────────────────────────
+
+    def collect_assets
+      puts ""
+      puts "📦 Collecting assets..."
+
+      assets_to_fetch = []
+
+      # 1. Fetch Lookbook UI assets (for docs/index)
+      lookbook_html = fetch_page("/lookbook/")
+      if lookbook_html
+        assets_to_fetch += lookbook_html.scan(/href="([^"]*\.css[^"]*)"/).flatten
+        assets_to_fetch += lookbook_html.scan(/src="([^"]*\.js[^"]*)"/).flatten
+      end
+
+      # 2. Fetch Application assets from a sample preview (for component previews)
+      first_preview = Lookbook.previews.first
+      if first_preview
+        scenario = first_preview.scenarios.first
+        preview_class_path = first_preview.preview_class.name.underscore.sub(/_preview$/, "")
+        preview_url = "/rails/view_components/#{preview_class_path}/#{scenario.name}"
+
+        preview_html = fetch_page(preview_url)
+        if preview_html
+          assets_to_fetch += preview_html.scan(/href="([^"]*\.css[^"]*)"/).flatten
+          assets_to_fetch += preview_html.scan(/src="([^"]*\.js[^"]*)"/).flatten
+        end
+      end
+
+      assets_to_fetch.uniq.each do |asset_path|
+        # Handle relative paths if necessary (though usually they are absolute /assets/...)
+        asset_content = fetch_page(asset_path)
+        next unless asset_content
+
+        # Remove query strings for filename
+        clean_path = asset_path.split("?").first
+        asset_filename = File.basename(clean_path)
+        ext = File.extname(asset_filename)
+        
+        # Determine destination
+        if ext == ".css"
+          dest_dir = File.join(assets_dir, "css")
+        elsif ext == ".js"
+          dest_dir = File.join(assets_dir, "js")
+        else
+          # Fallback or other assets (images etc? user didn't ask explicitly but good to have)
+          # Put in assets root or verify extension? 
+          # For now, stick to css/js as requested.
+          next unless %w[.css .js].include?(ext)
+          dest_dir = assets_dir
+        end
+
+        FileUtils.mkdir_p(dest_dir)
+        File.binwrite(File.join(dest_dir, asset_filename), asset_content)
+        
+        # Also copy map files if they exist? (Optional, skipping for now)
+      end
+      puts "   ✅ Assets collected"
+    end
+
+    # ─── Docs Generation ──────────────────────────────────────────────
+
+    def generate_docs
+      puts ""
+      puts "📚 Generating docs..."
+
+      pages = Lookbook.pages
+      count = 0
+
+      pages.each do |page|
+        page_path = page.lookup_path
+        page_url = "/lookbook/pages/#{page_path}"
+
+        parts = page_path.to_s.split("/")
+        dir = File.join(docs_dir, *parts[0...-1])
+        filename = parts.last
+
+        html = fetch_page(page_url)
+        if save_html(dir, filename, html)
+          count += 1
+          puts "   ✅ #{page_path}"
+        end
+      end
+
+      puts "   📄 #{count} doc pages generated"
+      count
+    end
+
+    # ─── Previews Generation ──────────────────────────────────────────
+
+    def generate_previews
+      puts ""
+      puts "🎨 Generating previews..."
+
+      previews = Lookbook.previews
+      previews_count = 0
+      param_previews_count = 0
+
+      previews.each do |preview|
+        preview_path = preview.lookup_path
+        path_parts = preview_path.to_s.split("/")
+
+        # Extract category and component name
+        # e.g., fluxbit/components/accordion => components/accordion
+        if path_parts.first == "fluxbit"
+          category = path_parts[1] || "other"
+          component_name = path_parts[2..].join("/")
+        else
+          category = path_parts[0] || "other"
+          component_name = path_parts[1..].join("/")
+        end
+
+        component_dir = File.join(previews_dir, category, component_name)
+        preview_file = preview.file_path.to_s
+
+        puts "   📦 #{preview.label} (#{preview_path})"
+
+        preview.scenarios.each do |scenario|
+          scenario_name = scenario.name.to_s
+          
+          # Construct ViewComponent preview path: fluxbit/components/accordion_component/default
+          # Removes _preview suffix from class name if present
+          preview_class_path = preview.preview_class.name.underscore.sub(/_preview$/, "")
+          base_preview_path = "/rails/view_components/#{preview_class_path}/#{scenario_name}"
+          
+          display_params = "_display%5Btheme%5D=light"
+
+          # Fetch base preview with defaults
+          html = fetch_page("#{base_preview_path}?#{display_params}")
+          if save_html(component_dir, sanitize_filename(scenario_name), html)
+            previews_count += 1
+            puts "      ✅ #{scenario_name}"
+          end
+
+          # Parse parameters and generate variations
+          params = parse_params_from_source(preview_file, scenario_name)
+          resolve_select_methods(preview.preview_class, params)
+
+          combinations = generate_param_combinations(params)
+
+          if combinations.any?
+            puts "      🔀 Generating #{combinations.length} parameter variation(s)..."
+            combinations.each do |combo|
+              query = combo_to_query_params(combo) + "&" + display_params
+              variant_url = "#{base_preview_path}?#{query}"
+              variant_filename = combo_to_filename(scenario_name, combo)
+
+              html = fetch_page(variant_url)
+              if save_html(component_dir, variant_filename, html)
+                param_previews_count += 1
+              end
+            end
+            puts "      ✅ #{combinations.length} variations generated"
+          end
+        end
+
+      end
+
+      puts "   🎨 #{previews_count} base previews, #{param_previews_count} parameter variations"
+      [previews_count, param_previews_count]
+    end
+
+    # ─── Parameter Parsing ─────────────────────────────────────────────
+
+    def parse_params_from_source(file_path, method_name)
+      return [] unless File.exist?(file_path)
+
+      source = File.read(file_path)
+      params = []
+
+      # Find the comment block + method definition
+      method_pattern = /^(\s*(?:#[^\n]*\n)+)\s*def\s+#{Regexp.escape(method_name)}\b([^)]*\))?/m
+      match = source.match(method_pattern)
+      return [] unless match
+
+      comment_block = match[1]
+      method_signature = match[0]
+
+      # Extract default values from method signature
+      defaults = {}
+      if method_signature =~ /def\s+#{Regexp.escape(method_name)}\s*\(([^)]*)\)/m
+        sig_params = $1
+        sig_params.scan(/(\w+):\s*([^,)]+)/).each do |name, default_val|
+          defaults[name.strip] = default_val.strip.delete("'\":")
+        end
+      end
+
+      # Parse each @param annotation
+      comment_block.scan(/#\s*@param\s+(\w+)\s+(.+)/).each do |param_name, param_rest|
+        info = { name: param_name, type: nil, values: nil, default: defaults[param_name] }
+
+        case param_rest.strip
+        when /\[Boolean\]/i, /toggle/i
+          info[:type] = :boolean
+          info[:values] = %w[true false]
+        when /select\s*\{\s*choices:\s*\[([^\]]+)\]\s*\}/
+          info[:type] = :select
+          info[:values] = $1.split(",").map { |v| v.strip.delete("'\"") }
+        when /select\s+"[^"]*"\s+:(\w+)/
+          info[:type] = :select_method
+          info[:method_name] = $1
+        when /range\s*\{\s*min:\s*(-?\d+),\s*max:\s*(-?\d+),\s*step:\s*(\d+)\s*\}/
+          info[:type] = :range
+          min, max, step = $1.to_i, $2.to_i, $3.to_i
+          info[:values] = (min..max).step(step).map(&:to_s)
+        when /number\s*\{\s*min:\s*(-?\d+),\s*max:\s*(-?\d+)/
+          info[:type] = :number
+          min, max = $1.to_i, $2.to_i
+          step = (param_rest.match(/step:\s*(\d+)/) ? $1.to_i : 1)
+          info[:values] = (min..max).step(step).map(&:to_s)
+        else
+          # text, String, Integer without choices - skip (infinite possibilities)
+          next
+        end
+
+        params << info if info[:values] && info[:values].any?
+      end
+
+      params
+    end
+
+    def resolve_select_methods(preview_class, params)
+      params.each do |param|
+        next unless param[:type] == :select_method && param[:method_name]
+
+        begin
+          instance = preview_class.new
+          if instance.respond_to?(param[:method_name], true)
+            values = instance.send(param[:method_name])
+            param[:values] = Array(values).map(&:to_s)
+            param[:type] = :select
+          else
+            param[:values] = []
+          end
+        rescue => e
+          puts "    ⚠️  Could not resolve :#{param[:method_name]}: #{e.message}"
+          param[:values] = []
+        end
+      end
+    end
+
+    def generate_param_combinations(params)
+      enumerable = params.select { |p| p[:values] && p[:values].any? }
+      return [] if enumerable.empty?
+
+      if combination_mode == :cartesian
+        # Full cartesian product
+        value_arrays = enumerable.map { |p| p[:values].map { |v| [p[:name], v] } }
+        if value_arrays.length == 1
+          combinations = value_arrays.first.map { |pair| Hash[*pair] }
+        else
+          combinations = value_arrays.first.product(*value_arrays[1..]).map(&:to_h)
+        end
+
+        # Remove the combination that matches all defaults
+        default_combo = enumerable.each_with_object({}) do |p, h|
+          h[p[:name]] = p[:default].to_s
+        end
+        combinations.reject! { |c| c == default_combo }
+
+        combinations
+      else
+        # Individual: one file per param value
+        combinations = []
+        enumerable.each do |param|
+          param[:values].each do |value|
+            next if value == param[:default].to_s
+            combinations << { param[:name] => value }
+          end
+        end
+        combinations
+      end
+    end
+
+    def combo_to_filename(scenario_name, combo)
+      parts = combo.map { |k, v| "#{sanitize_filename(k)}_#{sanitize_filename(v)}" }
+      "#{sanitize_filename(scenario_name)}--#{parts.join("--")}"
+    end
+
+    def combo_to_query_params(combo)
+      combo.map { |k, v| "#{k}=#{URI.encode_www_form_component(v)}" }.join("&")
+    end
+
+    # ─── Index Page Generation ─────────────────────────────────────────
+
+    def generate_index(pages_count, previews_count, param_previews_count)
+      puts ""
+      puts "📋 Generating index..."
+
+      pages = Lookbook.pages
+      previews = Lookbook.previews
+
+      html = build_index_html(pages, previews, pages_count, previews_count, param_previews_count)
+      File.write(File.join(output_dir, "index.html"), html)
+      puts "   ✅ index.html generated"
+    end
+
+    def build_index_html(pages, previews, pages_count, previews_count, param_previews_count)
+      previews_by_category = previews.group_by do |p|
+        parts = p.lookup_path.to_s.split("/")
+        parts.first == "fluxbit" ? (parts[1] || "other") : (parts[0] || "other")
+      end
+
+      <<~HTML
+        <!DOCTYPE html>
+        <html lang="en">
+        <head>
+          <meta charset="UTF-8">
+          <meta name="viewport" content="width=device-width, initial-scale=1.0">
+          <title>Fluxbit ViewComponents - Static Lookbook</title>
+          <style>
+            :root { --bg: #0f172a; --surface: #1e293b; --border: #334155; --text: #e2e8f0; --text-muted: #94a3b8; --primary: #3b82f6; --primary-hover: #60a5fa; }
+            * { margin: 0; padding: 0; box-sizing: border-box; }
+            body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; padding: 2rem; }
+            .container { max-width: 960px; margin: 0 auto; }
+            h1 { font-size: 2rem; margin-bottom: 0.5rem; background: linear-gradient(135deg, var(--primary), #a855f7); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
+            .subtitle { color: var(--text-muted); margin-bottom: 2rem; }
+            h2 { font-size: 1.25rem; margin: 1.5rem 0 0.75rem; color: var(--primary); border-bottom: 1px solid var(--border); padding-bottom: 0.5rem; }
+            h3 { font-size: 1rem; margin: 1rem 0 0.5rem; color: var(--text-muted); }
+            ul { list-style: none; padding: 0; }
+            li { margin: 0.25rem 0; }
+            a { color: var(--primary); text-decoration: none; transition: color 0.2s; }
+            a:hover { color: var(--primary-hover); }
+            .section { background: var(--surface); border: 1px solid var(--border); border-radius: 0.75rem; padding: 1.5rem; margin-bottom: 1.5rem; }
+            .badge { display: inline-block; font-size: 0.75rem; padding: 0.125rem 0.5rem; background: var(--border); border-radius: 9999px; color: var(--text-muted); margin-left: 0.5rem; }
+            .stats { display: flex; gap: 1rem; margin-bottom: 2rem; }
+            .stat { background: var(--surface); border: 1px solid var(--border); border-radius: 0.75rem; padding: 1rem 1.5rem; flex: 1; text-align: center; }
+            .stat-value { font-size: 1.5rem; font-weight: 700; color: var(--primary); }
+            .stat-label { font-size: 0.875rem; color: var(--text-muted); }
+          </style>
+        </head>
+        <body>
+          <div class="container">
+            <h1>Fluxbit ViewComponents</h1>
+            <p class="subtitle">Static Lookbook — Generated #{Time.now.strftime("%Y-%m-%d %H:%M")}</p>
+
+            <div class="stats">
+              <div class="stat"><div class="stat-value">#{pages_count}</div><div class="stat-label">Doc Pages</div></div>
+              <div class="stat"><div class="stat-value">#{previews_count}</div><div class="stat-label">Previews</div></div>
+              <div class="stat"><div class="stat-value">#{param_previews_count}</div><div class="stat-label">Param Variations</div></div>
+            </div>
+
+            <div class="section">
+              <h2>📚 Documentation</h2>
+              <ul>
+                #{pages.map { |pg| "<li><a href=\"pages/#{pg.lookup_path}.html\">#{pg.label}</a></li>" }.join("\n            ")}
+              </ul>
+            </div>
+
+            #{previews_by_category.map { |category, cat_previews|
+              items = cat_previews.map { |preview|
+                path_parts = preview.lookup_path.to_s.split("/")
+                component_name = path_parts.first == "fluxbit" ? path_parts[2..].join("/") : path_parts[1..].join("/")
+                scenarios_html = preview.scenarios.map { |s|
+                  "<li><a href=\"inspect/#{category}/#{component_name}/#{sanitize_filename(s.name)}.html\">#{s.label}</a></li>"
+                }.join("\n                ")
+                "<h3>#{preview.label}<span class=\"badge\">#{preview.scenarios.count} scenarios</span></h3>\n              <ul>#{scenarios_html}</ul>"
+              }.join("\n            ")
+              "<div class=\"section\"><h2>🎨 #{category.capitalize}</h2>\n            #{items}\n            </div>"
+            }.join("\n\n          ")}
+          </div>
+        </body>
+        </html>
+      HTML
+    end
+
+    # ─── Summary ───────────────────────────────────────────────────────
+
+    def print_summary(pages_count, previews_count, param_previews_count)
+      total = pages_count + previews_count + param_previews_count
+      puts ""
+      puts "═══════════════════════════════════════════════════"
+      puts " ✅ Static Lookbook generated successfully!"
+      puts "    📄 #{pages_count} doc pages"
+      puts "    🎨 #{previews_count} base previews"
+      puts "    🔀 #{param_previews_count} parameter variations"
+      puts "    📊 #{total} total files"
+      puts "    📁 #{output_dir}"
+      puts "═══════════════════════════════════════════════════"
+      puts ""
+    end
+  end
+end
+
+namespace :lookbook do
+  desc "Generate a static version of Lookbook in public/static-lookbook. " \
+       "Usage: rake lookbook:generate_static[cartesian] (default) or rake lookbook:generate_static[individual]"
+  task :generate_static, [:combination_mode] => :environment do |_t, args|
+    require "net/http"
+    require "fileutils"
+    require "uri"
+    require "socket"
+
+    mode = (args[:combination_mode] || "cartesian").to_sym
+    unless %i[cartesian individual].include?(mode)
+      abort "❌ Invalid combination mode: #{mode}. Use 'cartesian' or 'individual'."
+    end
+
+    generator = LookbookStaticGenerator::Generator.new(combination_mode: mode)
+    generator.run!
+  end
+end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: fluxbit_view_components
 version: !ruby/object:Gem::Version
-  version: 0.5.3
+  version: 0.5.4
 platform: ruby
 authors:
 - Arthur Molina
@@ -251,6 +251,7 @@ files:
 - lib/fluxbit/config/theme_button_component.rb
 - lib/fluxbit/config/timeline_component.rb
 - lib/fluxbit/config/tooltip_component.rb
+- lib/fluxbit/gravatar.rb
 - lib/fluxbit/templates/darkmode.js.template
 - lib/fluxbit/templates/tailwind.config.js.template
 - lib/fluxbit/view_components.rb
@@ -302,6 +303,7 @@ files:
 - lib/generators/fluxbit/templates/update_all.turbo_stream.erb.tt
 - lib/install/install.rb
 - lib/tasks/fluxbit_view_components_tasks.rake
+- lib/tasks/lookbook_static.rake
 homepage: https://github.com/arthurmolina/fluxbit_view_components
 licenses:
 - MIT