view_primitives 0.1.0

data/lib/generators/view_primitives/add/templates/dropdown_menu/dropdown_menu_component.rb.tt

@@ -0,0 +1,53 @@
+# frozen_string_literal: true
+
+module UI
+  class DropdownMenuComponent < ApplicationComponent
+    renders_one :trigger
+
+    PANEL = "absolute z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 " \
+            "text-popover-foreground shadow-md"
+
+    ALIGN = {
+      start: "top-full left-0 mt-1",
+      end:   "top-full right-0 mt-1",
+    }.freeze
+
+    ITEM      = "relative flex w-full cursor-default select-none items-center gap-2 rounded-sm " \
+                "px-2 py-1.5 text-sm outline-none " \
+                "hover:bg-accent hover:text-accent-foreground " \
+                "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 " \
+                "[&_svg:not([class*='text-'])]:text-muted-foreground"
+    SEPARATOR = "-mx-1 my-1 h-px bg-border"
+    LABEL_CLS = "px-2 py-1.5 text-sm font-medium"
+
+    def initialize(align: :start, **html_attrs)
+      @align       = align.to_sym
+      @extra_class = html_attrs.delete(:class)
+      @html_attrs  = html_attrs
+    end
+
+    def call
+      content_tag(:div,
+        class: "relative inline-block",
+        data: {
+          controller: "dropdown",
+          action: "click@document->dropdown#closeOnClickOutside"
+        },
+        **@html_attrs) do
+        concat content_tag(:span, trigger, data: { action: "click->dropdown#toggle" }, class: "contents") if trigger
+        concat panel
+      end
+    end
+
+    private
+
+    def panel
+      content_tag(:div,
+        data: { dropdown_target: "panel" },
+        hidden: true,
+        class: cn(PANEL, ALIGN.fetch(@align, ALIGN[:start]), @extra_class)) do
+        concat content
+      end
+    end
+  end
+end

data/lib/generators/view_primitives/add/templates/embed/embed_component.rb.tt

@@ -0,0 +1,271 @@
+# frozen_string_literal: true
+
+module UI
+  class EmbedComponent < ApplicationComponent
+    # Embeds third-party content. Pass url: — the provider is detected
+    # automatically from the domain. For Google Maps you may also use query:.
+    #
+    # Usage:
+    #   ui :embed, url: "https://youtu.be/dQw4w9WgXcQ"
+    #   ui :embed, url: "https://www.youtube.com/watch?v=dQw4w9WgXcQ"
+    #   ui :embed, url: "https://vimeo.com/148751763"
+    #   ui :embed, url: "https://open.spotify.com/track/4iV5W9uYEdYUVa79Axb7Rh"
+    #   ui :embed, url: "https://open.spotify.com/playlist/37i9dQZF1DXcBWIGoYBM5M"
+    #   ui :embed, url: "https://www.loom.com/share/abc123def456"
+    #   ui :embed, url: "https://soundcloud.com/artist/track"
+    #   ui :embed, url: "https://x.com/jack/status/20"
+    #   ui :embed, url: "https://t.me/telegram/193"
+    #   ui :embed, url: "https://www.facebook.com/watch/?v=123456"
+    #   ui :embed, url: "https://www.google.com/maps/place/Eiffel+Tower"
+    #   ui :embed, url: "https://yandex.ru/maps/213/moscow/?ll=37.617685,55.755814&z=10"
+    #   ui :embed, query: "Eiffel Tower, Paris"   # Google Maps — search query
+
+    PROVIDERS = {
+      youtube:     { aspect: "16/9", sandbox: "allow-scripts allow-same-origin allow-presentation allow-popups" },
+      vimeo:       { aspect: "16/9", sandbox: "allow-scripts allow-same-origin allow-presentation allow-popups" },
+      spotify:     { aspect: nil,    sandbox: "allow-scripts allow-same-origin allow-popups" },
+      google_maps: { aspect: "16/9", sandbox: "allow-scripts allow-same-origin" },
+      yandex_maps: { aspect: "16/9", sandbox: "allow-scripts allow-same-origin" },
+      loom:        { aspect: "16/9", sandbox: "allow-scripts allow-same-origin allow-presentation allow-popups" },
+      soundcloud:  { aspect: nil,    sandbox: "allow-scripts allow-same-origin allow-popups" },
+      x:           { aspect: nil,    sandbox: nil },
+      telegram:    { aspect: nil,    sandbox: nil },
+      facebook:    { aspect: "16/9", sandbox: "allow-scripts allow-same-origin allow-popups allow-forms" }
+    }.freeze
+
+    WIDGET_PROVIDERS = %i[x telegram].freeze
+
+    DOMAIN_MAP = {
+      /youtube\.com|youtu\.be/i                         => :youtube,
+      /vimeo\.com/i                                     => :vimeo,
+      /open\.spotify\.com/i                             => :spotify,
+      /loom\.com/i                                      => :loom,
+      /soundcloud\.com/i                                => :soundcloud,
+      /(?:twitter|x)\.com/i                             => :x,
+      /t\.me|telegram\.org/i                            => :telegram,
+      /facebook\.com|fb\.com/i                          => :facebook,
+      /maps\.google|google\.com\/maps|maps\.app\.goo\.gl/i => :google_maps,
+      /yandex\.(ru|com)\/maps/i                         => :yandex_maps
+    }.freeze
+
+    WRAPPER_CLS      = "overflow-hidden rounded-md"
+    DARK_WRAPPER_CLS = "overflow-hidden rounded-md bg-black"
+
+    def self.detect_provider(url)
+      DOMAIN_MAP.each { |pattern, provider| return provider if url.to_s.match?(pattern) }
+      nil
+    end
+
+    def initialize(url: nil, query: nil, aspect: nil, height: nil, title: nil, **html_attrs)
+      @type   = query ? :google_maps : self.class.detect_provider(url)
+      @url    = url
+      @query  = query
+      @aspect = aspect || PROVIDERS.dig(@type, :aspect)
+      @height = height || default_height
+      @title  = title  || default_title
+      @extra_class = html_attrs.delete(:class)
+      @html_attrs  = html_attrs
+    end
+
+    def call
+      return unsupported_msg unless @type && PROVIDERS.key?(@type)
+
+      if WIDGET_PROVIDERS.include?(@type)
+        widget_markup
+      else
+        iframe_markup
+      end
+    end
+
+    private
+
+    # ── Widget-based providers (X, Telegram) ─────────────────────────────────
+
+    def widget_markup
+      case @type
+      when :x        then x_widget
+      when :telegram then telegram_widget
+      end
+    end
+
+    def x_widget
+      tweet_id = extract_tweet_id(@url.to_s)
+      return unsupported_msg unless tweet_id
+
+      content_tag(:div,
+        class: cn(WRAPPER_CLS, @extra_class),
+        data:  { controller: "embed", embed_provider_value: "x", embed_post_id_value: tweet_id },
+        **@html_attrs) do
+        content_tag(:blockquote, class: "twitter-tweet", "data-dnt": "true") do
+          tag.a(href: "https://twitter.com/i/status/#{tweet_id}")
+        end
+      end
+    end
+
+    def telegram_widget
+      return unsupported_msg unless @url
+
+      post_id = @url.sub(%r{\Ahttps://t\.me/}, "").sub(%r{\A@}, "")
+
+      content_tag(:div, "",
+        class: cn(WRAPPER_CLS, @extra_class),
+        data:  { controller: "embed", embed_provider_value: "telegram", embed_post_id_value: post_id },
+        **@html_attrs)
+    end
+
+    # ── Iframe-based providers ────────────────────────────────────────────────
+
+    def iframe_markup
+      embed_url = build_embed_url
+      return unsupported_msg unless embed_url
+
+      sandbox = PROVIDERS.dig(@type, :sandbox)
+      iframe_attrs = {
+        src:  embed_url, title: @title, loading: "lazy",
+        class: "w-full h-full border-0 block",
+        allowfullscreen: true,
+        allow: "autoplay; fullscreen; picture-in-picture"
+      }
+      iframe_attrs[:sandbox] = sandbox if sandbox
+
+      wrapper_style = @aspect ? "aspect-ratio: #{@aspect}" : "height: #{@height}px"
+      content_tag(:div,
+        class: cn(DARK_WRAPPER_CLS, @extra_class),
+        style: wrapper_style,
+        **@html_attrs) do
+        tag.iframe(**iframe_attrs)
+      end
+    end
+
+    def build_embed_url
+      case @type
+      when :youtube     then youtube_url
+      when :vimeo       then vimeo_url
+      when :spotify     then spotify_url
+      when :google_maps then google_maps_url
+      when :yandex_maps then yandex_maps_url
+      when :loom        then loom_url
+      when :soundcloud  then soundcloud_url
+      when :facebook    then facebook_url
+      end
+    end
+
+    def unsupported_msg
+      content_tag(:p, "Unsupported embed type: #{@type}", class: "text-sm text-destructive")
+    end
+
+    # ── Embed URL builders ────────────────────────────────────────────────────
+
+    def youtube_url
+      vid = extract_youtube_id(@url.to_s)
+      "https://www.youtube.com/embed/#{vid}?rel=0" if vid
+    end
+
+    def vimeo_url
+      vid = extract_vimeo_id(@url.to_s)
+      "https://player.vimeo.com/video/#{vid}?dnt=1" if vid
+    end
+
+    def spotify_url
+      path = extract_spotify_path(@url.to_s)
+      "https://open.spotify.com/embed/#{path}" if path
+    end
+
+    def google_maps_url
+      if @query
+        "https://maps.google.com/maps?q=#{CGI.escape(@query)}&output=embed"
+      elsif @url
+        return @url if @url.include?("output=embed") || @url.match?(%r{/maps/embed})
+        uri = URI.parse(@url)
+        q = CGI.parse(uri.query.to_s)["q"]&.first
+        if q
+          "https://maps.google.com/maps?q=#{CGI.escape(q)}&output=embed"
+        else
+          sep = @url.include?("?") ? "&" : "?"
+          "#{@url}#{sep}output=embed"
+        end
+      end
+    rescue URI::InvalidURIError
+      nil
+    end
+
+    def yandex_maps_url
+      return nil unless @url
+      @url.sub(%r{yandex\.(ru|com)/maps}, 'yandex.\1/map-widget/v1')
+    end
+
+    def loom_url
+      vid = extract_loom_id(@url.to_s)
+      "https://www.loom.com/embed/#{vid}" if vid
+    end
+
+    def soundcloud_url
+      return nil unless @url
+      "https://w.soundcloud.com/player/?url=#{CGI.escape(@url)}&auto_play=false&hide_related=true&show_comments=false&visual=false"
+    end
+
+    def facebook_url
+      return nil unless @url
+      "https://www.facebook.com/plugins/video.php?href=#{CGI.escape(@url)}&show_text=false"
+    end
+
+    # ── ID extractors ─────────────────────────────────────────────────────────
+
+    def extract_youtube_id(url)
+      uri = URI.parse(url)
+      if uri.host&.include?("youtu.be")
+        uri.path.delete_prefix("/")
+      elsif uri.host&.include?("youtube.com")
+        CGI.parse(uri.query.to_s)["v"]&.first
+      end
+    rescue URI::InvalidURIError
+      nil
+    end
+
+    def extract_vimeo_id(url)
+      URI.parse(url).path.split("/").last
+    rescue URI::InvalidURIError
+      nil
+    end
+
+    def extract_spotify_path(url)
+      m = url.match(%r{open\.spotify\.com/(track|album|playlist|episode|show)/([^?]+)})
+      m ? "#{m[1]}/#{m[2]}" : nil
+    end
+
+    def extract_loom_id(url)
+      URI.parse(url).path.split("/").last
+    rescue URI::InvalidURIError
+      nil
+    end
+
+    def extract_tweet_id(url)
+      URI.parse(url).path.split("/").last
+    rescue URI::InvalidURIError
+      nil
+    end
+
+    def default_height
+      case @type
+      when :spotify    then 152
+      when :soundcloud then 166
+      else 400
+      end
+    end
+
+    def default_title
+      {
+        youtube:     "YouTube video",
+        vimeo:       "Vimeo video",
+        spotify:     "Spotify player",
+        google_maps: "Google Maps",
+        yandex_maps: "Yandex Maps",
+        loom:        "Loom video",
+        soundcloud:  "SoundCloud player",
+        x:           "Post on X",
+        telegram:    "Telegram post",
+        facebook:    "Facebook video"
+      }.fetch(@type, "Embedded content")
+    end
+  end
+end

data/lib/generators/view_primitives/add/templates/embed/embed_controller.js

@@ -0,0 +1,43 @@
+// Official widget initializer for X (Twitter) and Telegram embeds.
+// Called on every Stimulus connect so widgets survive Turbo navigations.
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static values = {
+    provider: String,
+    postId:   String
+  }
+
+  connect() {
+    if (this.providerValue === "x")        this.#initX()
+    if (this.providerValue === "telegram") this.#initTelegram()
+  }
+
+  async #initX() {
+    if (!window.twttr) {
+      await this.#loadScript("https://platform.twitter.com/widgets.js")
+    }
+    window.twttr?.widgets?.load(this.element)
+  }
+
+  #initTelegram() {
+    // Remove any previously injected script (Turbo re-renders)
+    this.element.querySelectorAll("script[data-telegram-post]").forEach((s) => s.remove())
+
+    const script = document.createElement("script")
+    script.setAttribute("async", "")
+    script.src = "https://telegram.org/js/telegram-widget.js?22"
+    script.dataset.telegramPost = this.postIdValue
+    script.dataset.width = "100%"
+    this.element.appendChild(script)
+  }
+
+  #loadScript(src) {
+    return new Promise((resolve) => {
+      if (document.querySelector(`script[src="${src}"]`)) { resolve(); return }
+      const s = Object.assign(document.createElement("script"), { src, async: true })
+      s.onload = resolve
+      document.head.appendChild(s)
+    })
+  }
+}

data/lib/generators/view_primitives/add/templates/figure/figure_component.rb.tt

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+module UI
+  class FigureComponent < ApplicationComponent
+    CAPTION = "mt-2 text-sm text-muted-foreground"
+
+    # caption:       text shown in <figcaption> (optional; omit to render none)
+    # caption_class: override the figcaption classes
+    def initialize(caption: nil, caption_class: nil, **html_attrs)
+      @caption       = caption
+      @caption_class = caption_class
+      @extra_class   = html_attrs.delete(:class)
+      @html_attrs    = html_attrs
+    end
+
+    def call
+      content_tag(:figure, class: @extra_class, **@html_attrs) do
+        concat content
+        concat content_tag(:figcaption, @caption,
+          class: cn(CAPTION, @caption_class)) if @caption
+      end
+    end
+  end
+end

data/lib/generators/view_primitives/add/templates/file_input/file_input_component.rb.tt

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+module UI
+  class FileInputComponent < ApplicationComponent
+    BASE = "h-9 w-full min-w-0 cursor-pointer rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs " \
+           "transition-[color,box-shadow] outline-none " \
+           "file:mr-3 file:inline-flex file:h-7 file:cursor-pointer file:border-0 " \
+           "file:bg-transparent file:text-sm file:font-medium file:text-foreground " \
+           "placeholder:text-muted-foreground " \
+           "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 " \
+           "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 " \
+           "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 " \
+           "md:text-sm dark:bg-input/30"
+
+    # accept:   MIME types or extensions, e.g. "image/*" or ".pdf,.docx"
+    # multiple: allow selecting multiple files
+    def initialize(accept: nil, multiple: false, **html_attrs)
+      @accept   = accept
+      @multiple = multiple
+      @extra_class = html_attrs.delete(:class)
+      @html_attrs  = html_attrs
+    end
+
+    def call
+      attrs = { type: "file", class: cn(BASE, @extra_class) }
+      attrs[:accept]   = @accept if @accept
+      attrs[:multiple] = true    if @multiple
+      content_tag(:input, nil, **attrs, **@html_attrs)
+    end
+  end
+end

data/lib/generators/view_primitives/add/templates/floating_label/floating_label_component.rb.tt

@@ -0,0 +1,54 @@
+# frozen_string_literal: true
+
+module UI
+  class FloatingLabelComponent < ApplicationComponent
+    WRAPPER = "relative w-full"
+
+    # The label floats via CSS peer — it sits inside the input border initially,
+    # then rises above when the input is focused or has a value (:not(:placeholder-shown)).
+    INPUT_BASE = "peer h-12 w-full min-w-0 rounded-md border border-input bg-transparent px-3 pb-1.5 pt-4 " \
+                 "text-base shadow-xs transition-[color,box-shadow] outline-none placeholder:text-transparent " \
+                 "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 " \
+                 "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 " \
+                 "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 " \
+                 "md:text-sm dark:bg-input/30"
+
+    LABEL_BASE = "pointer-events-none absolute left-3 top-3 origin-[0_0] text-sm text-muted-foreground " \
+                 "transition-all duration-200 " \
+                 "peer-focus:-translate-y-2 peer-focus:scale-75 peer-focus:text-foreground " \
+                 "peer-[:not(:placeholder-shown)]:-translate-y-2 peer-[:not(:placeholder-shown)]:scale-75"
+
+    # label:    visible label text (required)
+    # type:     input type, default "text"
+    # id:       ties label[for] to input; auto-generated from name if omitted
+    def initialize(label:, type: "text", id: nil, **html_attrs)
+      @label = label
+      @type  = type
+      name   = html_attrs[:name]
+      @id    = id || html_attrs[:id] || (name ? name.to_s.gsub(/[\[\]]+/, "_") : nil)
+      @extra_class = html_attrs.delete(:class)
+      @html_attrs  = html_attrs
+    end
+
+    def call
+      content_tag(:div, class: WRAPPER) do
+        concat input_tag
+        concat label_tag
+      end
+    end
+
+    private
+
+    def input_tag
+      attrs = { type: @type, placeholder: @label, class: cn(INPUT_BASE, @extra_class) }
+      attrs[:id] = @id if @id
+      content_tag(:input, nil, **attrs, **@html_attrs)
+    end
+
+    def label_tag
+      attrs = { class: LABEL_BASE }
+      attrs[:for] = @id if @id
+      content_tag(:label, @label, **attrs)
+    end
+  end
+end

data/lib/generators/view_primitives/add/templates/footer/footer_component.rb.tt

@@ -0,0 +1,51 @@
+# frozen_string_literal: true
+
+module UI
+  class FooterComponent < ApplicationComponent
+    BASE = "border-t bg-background"
+    LINK = "text-sm text-muted-foreground hover:text-foreground transition-colors"
+
+    # columns: [{ title:, links: [{ label:, href: }] }]
+    def initialize(copyright: nil, columns: [], **html_attrs)
+      @copyright = copyright
+      @columns   = columns
+      @extra_class = html_attrs.delete(:class)
+      @html_attrs  = html_attrs
+    end
+
+    def call
+      content_tag(:footer, class: cn(BASE, @extra_class), **@html_attrs) do
+        content_tag(:div, class: "container mx-auto px-6 py-10") do
+          concat columns_grid if @columns.any?
+          concat content if content?
+          concat copyright_row if @copyright
+        end
+      end
+    end
+
+    private
+
+    def columns_grid
+      content_tag(:div, class: "grid gap-8 sm:grid-cols-2 md:grid-cols-#{[@columns.size, 4].min} mb-10") do
+        safe_join(@columns.map { |col| column(col) })
+      end
+    end
+
+    def column(col)
+      content_tag(:div) do
+        concat content_tag(:h3, col[:title], class: "mb-3 text-sm font-semibold text-foreground")
+        concat content_tag(:ul, class: "space-y-2") {
+          safe_join((col[:links] || []).map { |link|
+            content_tag(:li) { content_tag(:a, link[:label], href: link[:href], class: LINK) }
+          })
+        }
+      end
+    end
+
+    def copyright_row
+      content_tag(:div, class: "border-t pt-8 mt-8 text-center") do
+        content_tag(:p, @copyright, class: "text-sm text-muted-foreground")
+      end
+    end
+  end
+end

data/lib/generators/view_primitives/add/templates/form_field/form_field_component.rb.tt

@@ -0,0 +1,51 @@
+# frozen_string_literal: true
+
+module UI
+  # Wraps a label + input + optional hint and error message into a consistent field layout.
+  #
+  # Usage:
+  #   <%= ui :form_field, label: "Email", error: @user.errors[:email].first do %>
+  #     <%= ui :input, type: "email", name: "user[email]", id: "user_email" %>
+  #   <% end %>
+  class FormFieldComponent < ApplicationComponent
+    def initialize(label: nil, hint: nil, error: nil, required: false, **html_attrs)
+      @label = label
+      @hint = hint
+      @error = error
+      @required = required
+      @extra_class = html_attrs.delete(:class)
+      @html_attrs = html_attrs
+    end
+
+    def call
+      content_tag(:div, class: cn("space-y-1.5", @extra_class), **@html_attrs) do
+        concat field_label if @label
+        concat content
+        concat hint_tag if @hint && @error.blank?
+        concat error_tag if @error.present?
+      end
+    end
+
+    private
+
+    def field_label
+      content_tag(:label,
+        label_text,
+        class: "text-sm font-medium leading-none")
+    end
+
+    def label_text
+      return @label unless @required
+
+      safe_join([@label, content_tag(:span, " *", class: "text-destructive")])
+    end
+
+    def hint_tag
+      content_tag(:p, @hint, class: "text-xs text-muted-foreground")
+    end
+
+    def error_tag
+      content_tag(:p, @error, class: "text-xs text-destructive", role: "alert")
+    end
+  end
+end

data/lib/generators/view_primitives/add/templates/gallery/gallery_component.rb.tt

@@ -0,0 +1,83 @@
+# frozen_string_literal: true
+
+module UI
+  class GalleryComponent < ApplicationComponent
+    # Responsive image grid with optional lightbox on click.
+    #
+    # Usage:
+    #   ui :gallery, cols: 3 do |g|
+    #     g.with_image(src: "/img/a.jpg", alt: "Photo A")
+    #     g.with_image(src: "/img/b.jpg", alt: "Photo B", caption: "The coast")
+    #   end
+
+    GRID_BASE = "grid gap-2"
+    GRID_COLS = {
+      1 => "grid-cols-1", 2 => "grid-cols-2", 3 => "grid-cols-3",
+      4 => "grid-cols-4", 5 => "grid-cols-5", 6 => "grid-cols-6"
+    }.freeze
+
+    ITEM_CLS  = "group relative cursor-zoom-in overflow-hidden rounded-md"
+    IMG_CLS   = "h-full w-full object-cover transition-transform duration-300 group-hover:scale-105"
+    CAP_CLS   = "absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/60 px-3 py-2 " \
+                "text-sm text-white opacity-0 transition-opacity group-hover:opacity-100"
+
+    renders_many :images, "UI::GalleryComponent::ImageComponent"
+
+    # cols:      number of grid columns (1–6, default: 3)
+    # lightbox:  enable click-to-enlarge (default: true)
+    # aspect:    Tailwind aspect-ratio class applied to each cell, e.g. "aspect-square"
+    def initialize(cols: 3, lightbox: true, aspect: "aspect-square", **html_attrs)
+      @cols        = cols.to_i.clamp(1, 6)
+      @lightbox    = lightbox
+      @aspect      = aspect
+      @extra_class = html_attrs.delete(:class)
+      @html_attrs  = html_attrs
+    end
+
+    def call
+      grid_cls = cn(GRID_BASE, GRID_COLS[@cols], @extra_class)
+
+      attrs = { class: grid_cls }
+      if @lightbox
+        attrs[:data] = { controller: "gallery",
+                         action: "click@document->gallery#closeOnClickOutside keydown.escape@document->gallery#close" }
+      end
+      attrs.merge!(@html_attrs)
+
+      content_tag(:div, **attrs) do
+        safe_join(images.map { |img| wrap_image(img) })
+      end
+    end
+
+    private
+
+    def wrap_image(img)
+      cell_attrs = { class: cn(ITEM_CLS, @aspect) }
+      if @lightbox
+        cell_attrs[:data] = { action: "click->gallery#open",
+                               gallery_src_param: img.src,
+                               gallery_alt_param: img.alt }
+      end
+      content_tag(:figure, **cell_attrs) do
+        concat img
+        concat content_tag(:figcaption, img.caption, class: CAP_CLS) if img.caption
+      end
+    end
+
+    class ImageComponent < ApplicationComponent
+      attr_reader :src, :alt, :caption
+
+      def initialize(src:, alt: "", caption: nil, **html_attrs)
+        @src     = src
+        @alt     = alt
+        @caption = caption
+        @html_attrs = html_attrs
+      end
+
+      def call
+        tag.img(src: @src, alt: @alt, class: GalleryComponent::IMG_CLS,
+          loading: "lazy", **@html_attrs)
+      end
+    end
+  end
+end