avo 3.30.4 → 4.0.0.beta.2

data/app/components/avo/fields/file_field/edit_component.html.erb

@@ -6,24 +6,32 @@
   <% end %>
 
   <% if can_upload_file? %>
+    <% upload_input_id = "#{@form.object_name}_#{@field.id}" %>
     <div data-controller="clear-input">
-      <div class="mt-2 flex items-center">
+      <%= render Avo::UI::FileUploadInputComponent.new(
+        id: upload_input_id,
+        title: @field.is_audio ? "Upload audio" : "Click to upload",
+        subtitle: "or drag and drop",
+        description: @field.accept.present? ? "Accepts #{@field.accept}" : nil,
+        disabled: disabled?,
+      ) do %>
         <%= @form.file_field @field.id,
+          id: upload_input_id,
           accept: @field.accept,
           data: @field.get_html(:data, view: view, element: :input)
             .merge(
               action: "change->clear-input#showClearButton",
-              clear_input_target: "input"
+              clear_input_target: "input",
+              file_upload_input_target: "input"
             ),
           direct_upload: @field.direct_upload,
           disabled: disabled?,
           style: @field.get_html(:style, view: view, element: :input),
-          autofocus: @autofocus,
-          class: "w-full"
+          autofocus: @autofocus
         %>
-      </div>
+      <% end %>
       <%= content_tag :button,
-          class: "self-center hidden font-semibold text-xs text-red-600 p-1",
+          class: "self-center hidden font-semibold text-xs text-red-600 p-1 cursor-pointer mt-2",
           id: :reset,
           type: :button,
           data: {

data/app/components/avo/fields/files_field/edit_component.html.erb

@@ -2,14 +2,21 @@
   <%= render Avo::Fields::Common::Files::ListViewerComponent.new(field: @field, resource: @resource) if @field.value.present? %>
 
   <% if can_upload_file? %>
+    <% upload_input_id = "#{@form.object_name}_#{@field.id}" %>
     <div data-controller="clear-input">
-      <div class="mt-2 flex items-center">
+      <%= render Avo::UI::FileUploadInputComponent.new(
+        id: upload_input_id,
+        description: @field.accept.present? ? "Accepts #{@field.accept}" : "Accepts .jpg and .png",
+        disabled: disabled?,
+      ) do %>
         <%= @form.file_field @field.id,
+          id: upload_input_id,
           accept: @field.accept,
           data: @field.get_html(:data, view: view, element: :input)
             .merge(
               action: "change->clear-input#showClearButton",
-              clear_input_target: "input"
+              clear_input_target: "input",
+              file_upload_input_target: "input"
             ),
           direct_upload: @field.direct_upload,
           disabled: disabled?,
@@ -17,9 +24,9 @@
           style: @field.get_html(:style, view: view, element: :input),
           autofocus: @autofocus
         %>
-      </div>
+      <% end %>
       <%= content_tag :button,
-          class: "self-center hidden font-semibold text-xs text-red-600 p-1",
+          class: "self-center hidden font-semibold text-xs text-red-600 p-1 cursor-pointer",
           id: :reset,
           type: :button,
           data: {

data/app/components/avo/fields/has_one_field/show_component.html.erb

@@ -1,13 +1,13 @@
 <% if @field.value %>
-  <turbo-frame id="<%= @field.turbo_frame %>" src="<%= @field.frame_url %>" loading=<%= turbo_frame_loading %> target="_top" class="block">
+  <%= turbo_frame_tag @field.turbo_frame, src: @field.frame_url, loading: turbo_frame_loading, target: "_top", class: "block" do %>
     <%= render(Avo::LoadingComponent.new(title: @field.name)) %>
-  </turbo-frame>
+  <% end %>
 <% else %>
-  <%= render Avo::PanelComponent.new(name: @field.name) do |c| %>
-    <% c.with_tools do %>
+  <%= render ui.panel(title: @field.name) do |panel| %>
+    <% panel.with_controls do %>
       <% if can_attach? %>
         <%= a_link attach_path,
-          icon: 'heroicons/outline/link',
+          icon: 'tabler/outline/link',
           color: :primary,
           style: :text,
           data: {
@@ -17,20 +17,21 @@
           <%= t('avo.attach_item', item: @field.name.humanize(capitalize: false)) %>
         <% end %>
       <% end %>
+
       <% if can_see_the_create_button? %>
         <%= a_link create_path,
-          icon: 'heroicons/outline/plus',
+          icon: 'tabler/outline/plus',
           'data-target': 'create',
           'data-turbo-frame': '_top',
           style: :primary,
-          color: :primary do %>
+          color: :accent do %>
           <%= t('avo.create_new_item', item: @field.name.humanize(capitalize: false) ) %>
         <% end %>
       <% end %>
     <% end %>
 
-    <% c.with_body do %>
-      <div class="py-8 flex justify-center items-center">
+    <% panel.with_body do %>
+      <div class="flex items-center justify-center py-8">
         <%= empty_state by_association: params[:related_name].present? %>
       </div>
     <% end %>

data/app/components/avo/fields/heading_field/edit_component.html.erb

@@ -1,3 +1,3 @@
-<div <% if @index == 0 %> class="overflow-hidden rounded-t" <% end %> data-field-id="<%= @field.id %>">
+<div class="<%= class_names("w-full",{'overflow-hidden rounded-t': @index == 0}) %>" data-field-id="<%= @field.id %>">
   <%= render Avo::Fields::Common::HeadingComponent.new field: @field %>
 </div>

data/app/components/avo/fields/heading_field/show_component.html.erb

@@ -1,3 +1,3 @@
-<div <% if @index == 0 %> class="overflow-hidden rounded-t" <% end %> data-field-id="<%= @field.id %>">
+<%= tag.div class: class_names(@field.width_class, "overflow-hidden rounded-t": @index == 0), data: {field_id: @field.id} do %>
   <%= render Avo::Fields::Common::HeadingComponent.new field: @field %>
-</div>
+<% end %>

data/app/components/avo/fields/password_field/edit_component.html.erb

@@ -1,7 +1,8 @@
 <%= field_wrapper(**field_wrapper_args) do %>
-  <div class="relative" data-controller="<%= @field.revealable ? 'password-visibility' : nil %>">
+  <div class="field-wrapper__input" data-controller="<%= @field.revealable ? 'password-visibility' : nil %>">
     <%= @form.password_field @field.id,
       value: @field.value,
+      type: "password",
       class: classes("w-full"),
       data: @field.get_html(:data, view: view, element: :input).merge(password_visibility_target: "input"),
       disabled: disabled?,
@@ -12,12 +13,9 @@
     %>
 
     <% if @field.revealable %>
-      <button data-action="password-visibility#toggle" type="button" class="text-gray-500 absolute inset-y-0 right-0 pr-3 flex items-center cursor-pointer">
-        <!-- Heroicon name: outline/eye -->
-        <%= helpers.svg('heroicons/outline/eye', class: "size-6", data: { 'password-visibility-target': 'icon' }) %>
-
-        <!-- Heroicon name: outline/eye-off -->
-        <%= helpers.svg('heroicons/outline/eye-off', class: "size-6 hidden", data: { 'password-visibility-target': 'icon' }) %>
+      <button data-action="password-visibility#toggle" type="button" class="input-field__password-toggle">
+        <%= helpers.svg('tabler/outline/eye', data: { 'password-visibility-target': 'icon' }) %>
+        <%= helpers.svg('tabler/outline/eye-off', class: "hidden", data: { 'password-visibility-target': 'icon' }) %>
       </button>
     <% end %>
   </div>

data/app/components/avo/fields/progress_bar_field/edit_component.html.erb

@@ -1,7 +1,7 @@
 <%= field_wrapper(**field_wrapper_args) do %>
   <%= content_tag :div, data: {controller: "progress-bar-field"} do %>
     <% if @field.display_value %>
-      <div class="text-center text-sm font-semibold w-full leading-none mb-1">
+      <div class="text-center text-sm font-semibold w-full leading-none mb-1 mt-1">
         <span data-progress-bar-field-target="label"><%= @field.value %></span><%= @field.value_suffix if @field.value_suffix.present? %>
       </div>
     <% end %>

data/app/components/avo/fields/radio_field/edit_component.html.erb

@@ -1,7 +1,7 @@
 <%= field_wrapper(**field_wrapper_args) do %>
   <div class="flex flex-col gap-2">
     <% @field.options.each do |key, value| %>
-      <div>
+      <div class="flex items-center gap-1">
         <%= form.radio_button @field.id, key, checked: (@field.value.to_s == key.to_s) %>
         <%= form.label @field.id, value, value: key %>
       </div>

data/app/components/avo/fields/show_component.rb

@@ -3,24 +3,22 @@
 class Avo::Fields::ShowComponent < Avo::BaseComponent
   include Avo::ResourcesHelper
 
-  attr_reader :compact
   attr_reader :field
   attr_reader :index
   attr_reader :kwargs
   attr_reader :resource
   attr_reader :stacked
-  attr_reader :short
   attr_reader :view
+  attr_reader :full_width
 
-  def initialize(field: nil, resource: nil, index: 0, form: nil, compact: false, short: false, stacked: nil, **kwargs)
-    @compact = compact
+  def initialize(field: nil, resource: nil, index: 0, form: nil, stacked: nil, full_width: nil, **kwargs)
     @field = field
     @index = index
     @resource = resource
     @stacked = stacked
-    @short = short
     @kwargs = kwargs
     @view = Avo::ViewInquirer.new("show")
+    @full_width = full_width
   end
 
   def wrapper_data
@@ -48,12 +46,11 @@ class Avo::Fields::ShowComponent < Avo::BaseComponent
 
   def field_wrapper_args
     {
-      compact: compact,
       field: field,
       index: index,
       resource: resource,
-      short: short,
       stacked: stacked,
+      full_width: full_width,
       view: view
     }
   end

data/app/components/avo/fields/stars_field/edit_component.html.erb

@@ -3,15 +3,14 @@
     <%= @form.hidden_field @field.id,
       value: @field.value,
       data: { stars_field_target: "valueInput" } %>
-    
-    <div class="rating-group flex items-center gap-1 mb-3" 
+    <div class="rating-group flex items-center gap-1"
       data-component="avo/fields/common/stars_component"
       data-stars-field-target="starsContainer"
       data-max="<%= @field.max %>"
       data-current-value="<%= @field.value || 0 %>">
       <% (1..@field.max).each do |rating_value| %>
-        <%= helpers.svg('heroicons/solid/star', 
-          class: class_names("star inline-block mr-0.5", filled: rating_value <= (@value || 0)),
+        <%= helpers.svg('heroicons/solid/star',
+          class: class_names("star inline-block me-0.5", filled: rating_value <= (@value || 0)),
           data: {
             star_value: rating_value,
             stars_field_target: "star",

data/app/components/avo/fields/tags_field/edit_component.html.erb

@@ -23,7 +23,7 @@
     %>
     <%# real field %>
     <%= @form.text_field @field.id,
-      class: classes("hidden w-full !py-0 min-h-10 items-center border-primary-500 focus-within:border-primary-500"),
+      class: classes("!hidden w-full"),
       data: {
         tags_field_target: :input,
       },

data/app/components/avo/fields/tags_field/tag_component.html.erb

@@ -1,9 +1,8 @@
-<div class="flex px-2 py-1 rounded bg-gray-100 text-sm text-gray-800 font-normal flex-shrink-0"
-  <% if @title.present? %>
-    data-tippy="tooltip"
-    title="<%= @title %>"
-  <% end %>
-  data-target="tag-component"
->
+<%= tag.div class: "flex px-2 py-0.5 rounded-sm bg-gray-100 text-sm text-gray-800 font-normal shrink-0",
+  data: {
+    target: "tag-component",
+    tippy: (@title.present? ? "tooltip" : nil),
+  }.compact,
+  title: @title do %>
   <%= @label %>
-</div>
+<% end %>

data/app/components/avo/fields/time_field/edit_component.html.erb

@@ -14,7 +14,7 @@
   } do %>
     <%= @form.text_field @field.id,
       value: @field.edit_formatted_value,
-      class: classes("w-full #{"hidden" unless params[:avo_show_hidden_inputs]}"),
+      class: classes("w-full #{"!hidden" unless params[:avo_show_hidden_inputs]}"),
       data: {
         date_field_target: :input,
         placeholder: @field.placeholder,
@@ -37,7 +37,7 @@
       style: @field.get_html(:style, view: view, element: :input)
     %>
     <%= content_tag :button,
-      class: "absolute right-0 self-center mr-4 uppercase font-semibold text-xs disabled:cursor-not-allowed disabled:opacity-50",
+      class: "absolute end-0 self-center me-2 uppercase font-semibold text-xs disabled:cursor-not-allowed disabled:opacity-50 text-content-secondary cursor-pointer",
       id: :reset,
       type: :button,
       title: t("avo.reset").capitalize,
@@ -46,7 +46,7 @@
         action: "click->date-field#clear",
         tippy: :tooltip
       } do %>
-      <%= helpers.svg "avo/times", class: "h-4" %>
+      <%= helpers.svg "tabler/outline/x", class: "h-4" %>
     <% end %>
   <% end %>
 <% end %>

data/app/components/avo/fields/tiptap_field/edit_component.html.erb

@@ -1,4 +1,4 @@
-<%= field_wrapper(**field_wrapper_args) do %>
+<%= field_wrapper(**field_wrapper_args, full_width: true) do %>
   <%= content_tag :div,
     class: "tiptap__field",
     data: {
@@ -20,45 +20,45 @@
         <%= content_tag :div, class: "tiptap__toolbar-area" do %>
           <%= content_tag :div, class: "tiptap__button-group" do %>
             <%= button_tag type: "button", class: "tiptap__button tiptap__button--bold", data: { action: "click->tiptap-field#bold" } do %>
-              <%= helpers.svg("avo/editor-bold") %>
+              <%= helpers.svg("tabler/outline/bold", class: "size-5") %>
             <% end %>
 
             <%= button_tag type: "button", class: "tiptap__button tiptap__button--italic", data: { action: "click->tiptap-field#italic" } do %>
-              <%= helpers.svg("avo/editor-italic") %>
+              <%= helpers.svg("tabler/outline/italic", class: "size-5") %>
             <% end %>
 
             <%= button_tag type: "button", class: "tiptap__button tiptap__button--underline", data: { action: "click->tiptap-field#underline" } do %>
-              <%= helpers.svg("avo/editor-underline") %>
+              <%= helpers.svg("tabler/outline/underline", class: "size-5") %>
             <% end %>
 
             <%= button_tag type: "button", class: "tiptap__button tiptap__button--strike", data: { action: "click->tiptap-field#strike" } do %>
-              <%= helpers.svg("avo/editor-strike") %>
+              <%= helpers.svg("tabler/outline/strikethrough", class: "size-5") %>
             <% end %>
           <% end %>
 
           <%= content_tag :div, class: "tiptap__button-group" do %>
             <%= button_tag type: "button", class: "tiptap__button tiptap__button--ul", data: { action: "click->tiptap-field#unorderedList" } do %>
-              <%= helpers.svg("avo/editor-list") %>
+              <%= helpers.svg("tabler/outline/list", class: "size-5") %>
             <% end %>
 
             <%= button_tag type: "button", class: "tiptap__button tiptap__button--ol", data: { action: "click->tiptap-field#orderedList" } do %>
-              <%= helpers.svg("avo/editor-ordered-list") %>
+              <%= helpers.svg("tabler/outline/list-numbers", class: "size-5") %>
             <% end %>
           <% end %>
 
           <%= content_tag :div, class: "tiptap__button-group" do %>
             <%= button_tag type: "button", disabled: true, class: "tiptap__button tiptap__button--link", data: { action: "click->tiptap-field#toggleLinkArea" } do %>
-              <%= helpers.svg("avo/editor-link") %>
+              <%= helpers.svg("tabler/outline/link", class: "size-5") %>
             <% end %>
           <% end %>
 
           <%= content_tag :div, class: "tiptap__button-group tiptap__link-area hidden" do %>
             <%= text_field_tag nil, nil, class: "tiptap__link-field", placeholder: "Enter URL here ...", data: { action: "keydown->tiptap-field#preventEnter" } %>
             <%= button_tag type: "button", class: "tiptap__button", data: { action: "click->tiptap-field#setLink" } do %>
-              <%= helpers.svg("heroicons/outline/check-circle") %>
+              <%= helpers.svg("tabler/outline/circle-check", class: "size-5") %>
             <% end %>
             <%= button_tag type: "button", class: "tiptap__button tiptap__link-button--unset", data: { action: "click->tiptap-field#unsetLink" } do %>
-              <%= helpers.svg("avo/trash") %>
+              <%= helpers.svg("tabler/outline/trash", class: "size-5") %>
             <% end %>
           <% end %>
         <% end %>
@@ -67,7 +67,7 @@
 
     <%= @form.text_area @field.id,
       value: @field.value,
-      class: classes("w-full hidden"),
+      class: classes("w-full !hidden"),
       data: {
         tiptap_field_target: "input",
         **@field.get_html(:data, view: view, element: :input)

data/app/components/avo/fields/tiptap_field/show_component.html.erb

@@ -1,10 +1,10 @@
 <%= field_wrapper(**field_wrapper_args, data: { controller: 'hidden-input' }) do %>
-  <div data-controller="hidden-input" class="flex w-full">
-    <% unless @field.always_show %>
-      <%= link_to t('avo.show_content'), 'javascript:void(0);', class: 'font-bold inline-block', data: { action: 'click->hidden-input#showContent' } %>
-    <% end %>
+  <div data-controller="hidden-input" class="flex flex-col w-full">
     <div class="<%= class_names("tiptap__content py-2 max-w-4xl", "hidden": !@field.always_show) %> " data-hidden-input-target="content">
       <%= sanitize @field.value.to_s %>
     </div>
+    <% unless @field.always_show %>
+      <%= link_to t('avo.show_content'), 'javascript:void(0);', class: 'font-bold inline-block', data: { action: 'click->hidden-input#showContent' } %>
+    <% end %>
   </div>
 <% end %>

data/app/components/avo/fields/trix_field/edit_component.html.erb

@@ -1,4 +1,4 @@
-<%= field_wrapper(**field_wrapper_args) do %>
+<%= field_wrapper(**field_wrapper_args, full_width: true) do %>
   <%= content_tag :div,
     class: class_names("relative block overflow-x-auto max-w-4xl", @input_id),
     data: do %>
@@ -14,7 +14,7 @@
     <% end %>
     <%= @form.text_area @field.id,
       value: @field.value.try(:to_trix_html) || @field.value,
-      class: classes("w-full hidden"),
+      class: classes("w-full !hidden"),
       data: @field.get_html(:data, view: view, element: :input),
       disabled: disabled?,
       id: @input_id,

data/app/components/avo/filters_component.html.erb

@@ -1,8 +1,7 @@
 <div data-controller="toggle" data-toggle-exemption-containers-value='[".flatpickr-calendar"]' data-component-name="<%= self.class.to_s.underscore %>">
   <div class="relative w-full flex justify-between">
-    <%= a_button class: 'focus:outline-none',
-      color: :primary,
-      size: :sm,
+    <%= a_button class: 'focus:outline-hidden',
+      style: :primary,
       icon: "avo/filter",
       title: t('avo.click_to_reveal_filters'),
       'data-button': 'resource-filters',
@@ -10,23 +9,16 @@
       'data-tippy': 'tooltip' do %>
       <%= t 'avo.filters' %>
       <% if @applied_filters.present? %>
-        <span class="ml-1">(<%= "#{@applied_filters.count} #{t('avo.applied', count: @applied_filters.count)}" %>)</span>
+        <span class="ms-1">(<%= "#{@applied_filters.count} #{t('avo.applied', count: @applied_filters.count)}" %>)</span>
       <% end %>
     <% end %>
-    <div
-      class="absolute block inset-auto sm:right-0 top-full bg-white min-w-[300px] mt-2 z-40 shadow-modal rounded divide-y divide-gray-300 <%= 'hidden' unless params[:keep_filters_panel_open] == '1' %>"
-      data-toggle-target="panel"
-      data-transition-enter="transition ease-out duration-100"
-      data-transition-enter-start="transform opacity-0 -translate-y-1"
-      data-transition-enter-end="transform opacity-100 translate-y-0"
-      data-transition-leave="transition ease-in duration-75"
-      data-transition-leave-start="transform opacity-100 translate-y-0"
-      data-transition-leave-end="transform opacity-0 -translate-y-1"
-    >
+    <%= tag.div class: 'absolute block inset-auto sm:end-0 top-full bg-white min-w-[300px] mt-2 z-40 shadow-modal rounded-sm divide-y divide-gray-300 css-animate-slide-down',
+      data: {toggle_target: 'panel'},
+      hidden: params[:keep_filters_panel_open] != '1' do %>
       <% @filters.each do |filter| %>
         <%= render partial: filter.class.template, locals: {filter: filter} %>
       <% end %>
-      <div class="p-4 border-gray-300 border-t">
+      <div class="p-4 border-tertiary border-t">
         <% if @applied_filters.present? %>
           <%= a_link reset_path, data: {turbo_frame: params[:turbo_frame]}, color: :gray, size: :sm, class: 'w-full justify-center' do %>
             <%= t('avo.reset_filters') %>
@@ -37,6 +29,6 @@
           <% end %>
         <% end %>
       </div>
-    </div>
+    <% end %>
   </div>
 </div>

data/app/components/avo/index/field_wrapper_component.html.erb

@@ -1,11 +1,18 @@
 <%= content_tag :td,
-  class: "group/clipboard min-h-[3rem] px-3 leading-tight whitespace-nowrap h-full text-slate-800 text-base #{classes}",
+  class: class_names(
+    "group/clipboard px-2 leading-none whitespace-nowrap h-full text-content text-sm",
+    @classes,
+    @field.get_html(:classes, view: @view, element: :wrapper),
+    {
+      "py-4": !@flush
+    }
+  ),
   data: {
     field_id: @field.id,
     field_type: @field.type,
     **stimulus_attributes
   },
-  style: style do %>
+  style: @field.get_html(:style, view: @view, element: :wrapper) do %>
   <% if render_dash? %>
     —
   <% else %>

data/app/components/avo/index/field_wrapper_component.rb

@@ -13,22 +13,6 @@ class Avo::Index::FieldWrapperComponent < Avo::BaseComponent
     @classes = @args.dig(:class) || ""
   end
 
-  def classes
-    result = @classes
-
-    unless @flush
-      result += " py-3"
-    end
-
-    result += " #{@field.get_html(:classes, view: @view, element: :wrapper)}"
-
-    result
-  end
-
-  def style
-    @field.get_html(:style, view: @view, element: :wrapper)
-  end
-
   def stimulus_attributes
     attributes = {}
 

data/app/components/avo/index/grid_cover_empty_state_component.html.erb

@@ -1,3 +1,17 @@
-<div class="absolute bg-gray-50 w-full h-full">
-  <%= image_tag Avo.configuration.branding.placeholder, class: "relative transform -translate-x-1/2 -translate-y-1/2 h-20 text-gray-400 inset-auto top-1/2 left-1/2", loading: :lazy %>
+<div
+  class="absolute bg-secondary dark:bg-tertiary size-full content-center"
+  data-controller="grid-cover-empty-state"
+  data-action="mousemove->grid-cover-empty-state#mousemove mouseleave->grid-cover-empty-state#mouseleave"
+>
+  <%# Decorative icons — purely visual, hidden from screen readers %>
+  <% icon_items.each do |icon| %>
+    <span
+      aria-hidden="true"
+      class="grid-card__icon grid-card__icon--float"
+      data-grid-cover-empty-state-target="icon"
+      style="<%= icon[:v_edge] %>: <%= icon[:v_px] %>px; <%= icon[:h_edge] %>: <%= icon[:h_px] %>px; rotate: <%= icon[:rotation] %>deg; animation-duration: <%= icon[:duration] %>s; animation-delay: <%= icon[:delay] %>s; color: color-mix(in srgb, var(--color-content) <%= icon[:intensity] %>%, transparent);"
+    ><%= helpers.svg icon[:path], class: "size-4" %></span>
+  <% end %>
+
+  <span data-grid-cover-empty-state-target="icon" data-repulsion-scale="0.125" class="grid-card__avocado"><%= svg Avo.configuration.branding.placeholder, class: "mx-auto h-20 text-content-secondary" %></span>
 </div>

data/app/components/avo/index/grid_cover_empty_state_component.rb

@@ -1,4 +1,94 @@
 # frozen_string_literal: true
 
 class Avo::Index::GridCoverEmptyStateComponent < Avo::BaseComponent
+  ICONS = %w[
+    tabler/outline/star
+    tabler/outline/bolt
+    tabler/outline/clock
+    tabler/outline/heart
+    tabler/outline/leaf
+    tabler/outline/sparkles
+    tabler/outline/rocket
+    tabler/outline/diamond
+  ].freeze
+
+  # Per-icon animation timing and color intensity (stable across all layouts)
+  ICON_META = [
+    {duration: 3.8, delay: 0.0, intensity: 15},
+    {duration: 4.2, delay: 0.4, intensity: 18},
+    {duration: 3.5, delay: 0.8, intensity: 13},
+    {duration: 4.6, delay: 1.2, intensity: 20},
+    {duration: 3.2, delay: 1.6, intensity: 16},
+    {duration: 4.8, delay: 2.0, intensity: 14},
+    {duration: 3.6, delay: 2.4, intensity: 19},
+    {duration: 4.4, delay: 2.8, intensity: 17}
+  ].freeze
+
+  # 5 preset spatial layouts — each is an array of 8 position+rotation hashes.
+  # v_edge: "top"|"bottom", h_edge: CSS logical "inset-inline-start"|"inset-inline-end"
+  # v_px / h_px: distance in px from that edge. rotation: degrees.
+  LAYOUTS = [
+    # Layout 1 — scattered, original feel
+    [
+      {v_edge: "top", v_px: 28, h_edge: "inset-inline-start", h_px: 28, rotation: 12},
+      {v_edge: "top", v_px: 32, h_edge: "inset-inline-end", h_px: 32, rotation: -12},
+      {v_edge: "top", v_px: 72, h_edge: "inset-inline-start", h_px: 24, rotation: 0},
+      {v_edge: "bottom", v_px: 28, h_edge: "inset-inline-start", h_px: 44, rotation: 6},
+      {v_edge: "top", v_px: 40, h_edge: "inset-inline-start", h_px: 72, rotation: -6},
+      {v_edge: "bottom", v_px: 32, h_edge: "inset-inline-end", h_px: 32, rotation: 12},
+      {v_edge: "top", v_px: 28, h_edge: "inset-inline-end", h_px: 52, rotation: -6},
+      {v_edge: "bottom", v_px: 28, h_edge: "inset-inline-end", h_px: 60, rotation: 6}
+    ],
+    # Layout 2 — corners and mid-edges
+    [
+      {v_edge: "top", v_px: 24, h_edge: "inset-inline-start", h_px: 20, rotation: -8},
+      {v_edge: "top", v_px: 24, h_edge: "inset-inline-end", h_px: 20, rotation: 8},
+      {v_edge: "bottom", v_px: 24, h_edge: "inset-inline-start", h_px: 20, rotation: 8},
+      {v_edge: "bottom", v_px: 24, h_edge: "inset-inline-end", h_px: 20, rotation: -8},
+      {v_edge: "top", v_px: 24, h_edge: "inset-inline-start", h_px: 68, rotation: 0},
+      {v_edge: "bottom", v_px: 24, h_edge: "inset-inline-start", h_px: 68, rotation: 0},
+      {v_edge: "top", v_px: 60, h_edge: "inset-inline-start", h_px: 20, rotation: 12},
+      {v_edge: "top", v_px: 60, h_edge: "inset-inline-end", h_px: 20, rotation: -12}
+    ],
+    # Layout 3 — diagonal scatter
+    [
+      {v_edge: "top", v_px: 24, h_edge: "inset-inline-start", h_px: 36, rotation: 15},
+      {v_edge: "top", v_px: 48, h_edge: "inset-inline-end", h_px: 24, rotation: -10},
+      {v_edge: "top", v_px: 66, h_edge: "inset-inline-start", h_px: 28, rotation: 5},
+      {v_edge: "bottom", v_px: 66, h_edge: "inset-inline-end", h_px: 28, rotation: -5},
+      {v_edge: "bottom", v_px: 48, h_edge: "inset-inline-start", h_px: 24, rotation: 10},
+      {v_edge: "bottom", v_px: 24, h_edge: "inset-inline-end", h_px: 36, rotation: -15},
+      {v_edge: "top", v_px: 36, h_edge: "inset-inline-start", h_px: 72, rotation: 8},
+      {v_edge: "bottom", v_px: 36, h_edge: "inset-inline-end", h_px: 60, rotation: -8}
+    ],
+    # Layout 4 — even frame
+    [
+      {v_edge: "top", v_px: 24, h_edge: "inset-inline-start", h_px: 44, rotation: 12},
+      {v_edge: "top", v_px: 24, h_edge: "inset-inline-end", h_px: 44, rotation: -12},
+      {v_edge: "top", v_px: 60, h_edge: "inset-inline-start", h_px: 20, rotation: 0},
+      {v_edge: "top", v_px: 60, h_edge: "inset-inline-end", h_px: 20, rotation: 0},
+      {v_edge: "bottom", v_px: 60, h_edge: "inset-inline-start", h_px: 20, rotation: 6},
+      {v_edge: "bottom", v_px: 60, h_edge: "inset-inline-end", h_px: 20, rotation: -6},
+      {v_edge: "bottom", v_px: 24, h_edge: "inset-inline-start", h_px: 44, rotation: -12},
+      {v_edge: "bottom", v_px: 24, h_edge: "inset-inline-end", h_px: 44, rotation: 12}
+    ],
+    # Layout 5 — asymmetric cluster
+    [
+      {v_edge: "top", v_px: 24, h_edge: "inset-inline-start", h_px: 20, rotation: 8},
+      {v_edge: "top", v_px: 40, h_edge: "inset-inline-start", h_px: 52, rotation: -8},
+      {v_edge: "top", v_px: 24, h_edge: "inset-inline-end", h_px: 36, rotation: 12},
+      {v_edge: "top", v_px: 66, h_edge: "inset-inline-end", h_px: 20, rotation: -5},
+      {v_edge: "bottom", v_px: 24, h_edge: "inset-inline-start", h_px: 36, rotation: -12},
+      {v_edge: "bottom", v_px: 52, h_edge: "inset-inline-start", h_px: 20, rotation: 8},
+      {v_edge: "bottom", v_px: 24, h_edge: "inset-inline-end", h_px: 20, rotation: 10},
+      {v_edge: "bottom", v_px: 40, h_edge: "inset-inline-end", h_px: 52, rotation: -10}
+    ]
+  ].freeze
+
+  def icon_items
+    layout = LAYOUTS.sample
+    ICONS.each_with_index.map do |path, i|
+      ICON_META[i].merge(layout[i]).merge(path: path)
+    end
+  end
 end