avo 4.0.22 → 4.0.24

data/app/assets/stylesheets/css/components/ui/dropdown.css

@@ -60,6 +60,61 @@
   @apply flex flex-col items-start self-stretch px-1;
 }
 
+/* ==========================================================================
+   Inline search (DropdownComponent searchable:)
+   A filter input pinned above the list; the popover-menu controller hides
+   non-matching items and reveals the empty state.
+
+   Styled as a command-palette header row (the familiar Linear/Raycast shape):
+   full-bleed input, the bottom border is the only field chrome, and the icon,
+   text, and empty state sit on the same column grid as the menu items below.
+   ========================================================================== */
+
+.dropdown-menu__search {
+  @apply self-stretch border-b border-tertiary;
+  /* Line the search row up with the items: icon starts where item icons do
+     (list px + item px), same icon size, same icon-to-text gap. The
+     search-input prefix position and input padding both derive from these. */
+  --input-icon-offset: --spacing(3);
+  --input-icon-size: --spacing(4);
+  --input-icon-gap: --spacing(1.5);
+  min-inline-size: 14rem;
+}
+
+.dropdown-menu__search .search-input__input {
+  @apply w-full h-9 rounded-none border-none bg-transparent text-sm text-content;
+}
+
+.dropdown-menu__search .search-input__input::placeholder {
+  color: var(--color-content-secondary);
+}
+
+/* The input is auto-focused on open and the caret shows position — a boxy
+   ring around a full-bleed row reads as noise, not focus. */
+.dropdown-menu__search .search-input__input:focus-visible {
+  outline: none;
+}
+
+/* Forced-colors mode still needs a visible focus indicator. */
+@media (forced-colors: active) {
+  .dropdown-menu__search .search-input__input:focus-visible {
+    outline: 2px solid Highlight;
+    outline-offset: -2px;
+  }
+}
+
+/* Empty state text sits on the item-label column, under the input text. */
+.dropdown-menu__search-empty {
+  @apply m-0 py-2 text-sm text-content-secondary;
+  padding-inline: calc(--spacing(3) + --spacing(4) + --spacing(1.5)) --spacing(3);
+}
+
+/* Filtered-out items are hidden with the `hidden` attribute; the item rules
+   below apply `display: flex`, which would otherwise win over the UA style. */
+.dropdown-menu__list :is(a, button)[hidden] {
+  display: none;
+}
+
 /* The `a`/`button` selectors style real menu items, but a dropdown can also host
    a `.dropdown-card` (see the `:has(.dropdown-card)` block above). Controls inside
    that card — e.g. a footer action button — are not menu items, so exclude them and

data/app/components/avo/u_i/dropdown_component.html.erb

@@ -9,11 +9,26 @@
         class: class_names("popover-menu__panel", @classes),
         data: {controller: "popover-menu"} do %>
         <div class="dropdown-menu">
+          <% if @searchable %>
+            <div class="dropdown-menu__search search-input">
+              <input type="search"
+                     class="search-input__input"
+                     placeholder="<%= search_placeholder %>"
+                     aria-label="<%= search_placeholder %>"
+                     autocomplete="off"
+                     data-popover-menu-target="searchInput"
+                     data-action="input->popover-menu#filter">
+              <span class="search-input__prefix" aria-hidden="true"><%= helpers.svg "tabler/outline/search" %></span>
+            </div>
+          <% end %>
           <div class="dropdown-menu__group">
             <div class="dropdown-menu__list">
               <%= items %>
             </div>
           </div>
+          <% if @searchable %>
+            <p class="dropdown-menu__search-empty" data-popover-menu-target="empty" hidden>No matching options</p>
+          <% end %>
         </div>
       <% end %>
     <% end %>

data/app/components/avo/u_i/dropdown_component.rb

@@ -7,6 +7,10 @@ class Avo::UI::DropdownComponent < Avo::BaseComponent
   prop :open, default: false
   prop :dropdown_menu_classes, default: ""
   prop :popover_mode, default: false
+  # Renders a filter input above the items that narrows them as the user types
+  # (client-side, over the rendered items). Popover mode only.
+  prop :searchable, default: false
+  prop :search_placeholder
 
   renders_one :trigger
   renders_one :items
@@ -21,6 +25,10 @@ class Avo::UI::DropdownComponent < Avo::BaseComponent
     @popover_id ||= "popover-#{SecureRandom.hex(3)}"
   end
 
+  def search_placeholder
+    @search_placeholder || I18n.t("avo.search.placeholder", default: "Search")
+  end
+
   def data
     return {} if items.blank?
 

data/app/javascript/js/controllers/popover_menu_controller.js

@@ -1,6 +1,8 @@
 import { Controller } from '@hotwired/stimulus'
 
 export default class extends Controller {
+  static targets = ['searchInput', 'empty']
+
   // Used by both onToggle (auto-focus) and handleKeydown (arrow navigation).
   get focusableItems() {
     return [...this.element.querySelectorAll('a, button')].filter(
@@ -25,9 +27,19 @@ export default class extends Controller {
   onToggle(event) {
     if (event.newState !== 'open') return
 
+    // Each open starts unfiltered — a leftover query from the last visit would
+    // silently hide items.
+    if (this.hasSearchInputTarget) this.resetFilter()
+
     // requestAnimationFrame ensures the popover is fully rendered before we focus.
     // Focusing before the browser paints causes the scroll to jump in some cases.
     requestAnimationFrame(() => {
+      // A searchable menu hands focus to its filter input so the user can just type.
+      if (this.hasSearchInputTarget) {
+        this.searchInputTarget.focus()
+        return
+      }
+
       const items = this.focusableItems
       if (items.length === 0) return
 
@@ -38,24 +50,46 @@ export default class extends Controller {
     })
   }
 
+  // Narrows the rendered items to those whose text matches the query. Items are
+  // queried at call time (not cached) so lazily loaded content — e.g. a
+  // turbo-frame inside the list — is filterable as soon as it arrives. An item
+  // carrying data-filter-text matches on that instead of its full text, so
+  // decorations (timestamps, tags) don't count as matches.
+  filter() {
+    const query = this.searchInputTarget.value.trim().toLowerCase()
+    let anyVisible = false
+
+    this.element.querySelectorAll('.dropdown-menu__list a, .dropdown-menu__list button').forEach((item) => {
+      const text = item.dataset.filterText ?? item.textContent
+      const match = query === '' || text.replace(/\s+/g, ' ').trim().toLowerCase().includes(query)
+      item.hidden = !match
+      if (match) anyVisible = true
+    })
+
+    if (this.hasEmptyTarget) this.emptyTarget.hidden = anyVisible || query === ''
+  }
+
+  resetFilter() {
+    this.searchInputTarget.value = ''
+    this.filter()
+  }
+
   handleKeydown(event) {
     // The keydown listener is always attached, so guard against firing when closed.
     if (!this.element.matches(':popover-open')) return
 
-    const items = this.focusableItems
-    if (items.length === 0) return
-
-    const idx = items.indexOf(document.activeElement)
-
     switch (event.key) {
       case 'ArrowDown':
+      case 'ArrowUp': {
+        const items = this.focusableItems
+        if (items.length === 0) return
+
         event.preventDefault()
-        items[idx < items.length - 1 ? idx + 1 : 0].focus()
-        break
-      case 'ArrowUp':
-        event.preventDefault()
-        items[idx > 0 ? idx - 1 : items.length - 1].focus()
+        const idx = items.indexOf(document.activeElement)
+        if (event.key === 'ArrowDown') items[idx < items.length - 1 ? idx + 1 : 0].focus()
+        else items[idx > 0 ? idx - 1 : items.length - 1].focus()
         break
+      }
       case 'Escape':
         // Close on Escape ourselves. Native popover light-dismiss is unreliable
         // here because other document-level keydown handlers (e.g. the index-row
@@ -63,7 +97,13 @@ export default class extends Controller {
         // also reacting; hidePopover restores focus to the trigger.
         event.preventDefault()
         event.stopPropagation()
-        this.element.hidePopover()
+        // With a non-empty search query the first Escape only clears it; the next closes.
+        if (this.hasSearchInputTarget && this.searchInputTarget.value !== '') {
+          this.resetFilter()
+          this.searchInputTarget.focus()
+        } else {
+          this.element.hidePopover()
+        }
         break
       default:
     }

data/lib/avo/engine.rb

@@ -144,6 +144,23 @@ module Avo
         if defined?(::Sprockets)
           # Tell sprockets where your assets are located
           app.config.assets.precompile += %w[avo_manifest.js]
+
+          # Listed after avo_manifest.js on purpose. When the Tailwind integration is on, the
+          # app builds its own app/assets/builds/avo/application.css to replace the stock one
+          # we ship — but our avo_manifest.js and the app's manifest.js both `link_tree
+          # ../builds`, so two different files compile under the logical path
+          # avo/application.css and Sprockets keeps whichever it wrote last. Since we append
+          # our manifest after the app's, ours used to win and production served a stylesheet
+          # with none of the app's utilities in it. Silently: the build succeeded, the file was
+          # right there, and only the precompiled manifest pointed elsewhere.
+          #
+          # Naming the logical path here compiles it once more, last, and Sprockets resolves it
+          # through the load path — which picks the app's build when it has one (its
+          # app/assets/builds precedes ours) and our stock file when it doesn't. That also
+          # covers apps whose manifest.js doesn't link ../builds at all.
+          #
+          # Propshaft resolves through the load path to begin with, so it was never affected.
+          app.config.assets.precompile += %w[avo/application.css]
         end
       end
     end

data/lib/avo/plugin_manager.rb

@@ -79,6 +79,46 @@ module Avo
       Avo::Menu::Builder.register_item(name, &block)
     end
 
+    # Register a plugin's configuration namespace on Avo::Configuration so host
+    # apps configure the plugin from config/initializers/avo.rb:
+    #
+    #   Avo.plugin_manager.register_configuration :intelligence, Avo::Intelligence::Configuration
+    #
+    #   Avo.configure do |config|
+    #     config.intelligence.thinking_effort = "medium"
+    #   end
+    #
+    # Call it from an engine initializer ordered `before: :load_config_initializers`
+    # (or at require time) — the host's avo.rb reads the accessor, so it must be
+    # defined before config/initializers run. An :avo_boot hook is too late.
+    # Instances are memoized per Configuration object, so replacing
+    # Avo.configuration resets plugin configs along with everything else.
+    def register_configuration(name, klass)
+      name = name.to_sym
+      @configuration_namespaces ||= {}
+
+      # Guard against a plugin silently shadowing a core option or another
+      # plugin's namespace. Re-registering the same namespace with the same
+      # class is fine — boot runs more than once.
+      existing = @configuration_namespaces[name]
+      if existing.nil? && Avo::Configuration.method_defined?(name)
+        raise ArgumentError, "Avo::Configuration already defines ##{name}; pick a different configuration namespace."
+      end
+      if !existing.nil? && existing != klass
+        raise ArgumentError, "Configuration namespace :#{name} is already registered with #{existing}; pick a different namespace."
+      end
+
+      @configuration_namespaces[name] = klass
+
+      Avo::Configuration.define_method(name) do
+        (@plugin_configurations ||= {})[name] ||= klass.new
+      end
+
+      Avo::Configuration.define_method(:"#{name}=") do |value|
+        (@plugin_configurations ||= {})[name] = value
+      end
+    end
+
     def register_resource_tool
     end
 

data/lib/avo/version.rb

@@ -1,3 +1,3 @@
 module Avo
-  VERSION = "4.0.22" unless const_defined?(:VERSION)
+  VERSION = "4.0.24" unless const_defined?(:VERSION)
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: avo
 version: !ruby/object:Gem::Version
-  version: 4.0.22
+  version: 4.0.24
 platform: ruby
 authors:
 - Adrian Marin