avo 4.0.0.beta.2 → 4.0.0.beta.4

data/app/assets/stylesheets/application.css

@@ -135,6 +135,7 @@
   @import "./css/components/ui/description_list.css";
   @import "./css/components/ui/tabs.css";
   @import "./css/components/ui/badge.css";
+  @import "./css/components/ui/state.css";
   @import "./css/components/ui/file_upload_input.css";
   @import "./css/components/ui/file_upload_item.css";
   @import "./css/components/ui/dropdown.css";
@@ -148,6 +149,7 @@
   @import "./css/components/grid.css";
   @import "./css/components/color_scheme_switcher.css";
   @import "./css/components/discreet_information.css";
+  @import "./css/components/hotkey.css";
   @import "./css/components/tooltip.css";
   @import "./css/components/modal.css";
   @import "./css/css-animations.css";

data/app/assets/stylesheets/css/components/hotkey.css

@@ -0,0 +1,50 @@
+.hotkey__grid {
+  @apply p-6;
+
+  columns: 1;
+  column-gap: theme(spacing.8);
+
+  @media (min-width: theme(screens.sm)) {
+    columns: 2;
+  }
+}
+
+.hotkey__section {
+  @apply min-w-0 mb-10;
+
+  break-inside: avoid;
+}
+
+.hotkey__section-title {
+  @apply text-xs text-content-secondary uppercase tracking-wide mb-4 font-bold;
+}
+
+.hotkey__section-body {
+  @apply m-0 w-full list-none flex flex-col gap-2 p-0;
+}
+
+.hotkey__row {
+  @apply flex w-full items-start justify-between gap-4 border-b border-tertiary last:border-b-0 leading-6;
+}
+
+.hotkey__action {
+  /* @apply min-w-0 flex-1 text-base leading-6 text-content; */
+  /* @apply text-base leading-6 text-content font-bold; */
+  @apply text-sm;
+}
+
+.hotkey__keys {
+  @apply flex shrink-0 flex-wrap items-center justify-end gap-x-1.5 gap-y-1.5 pt-0.5;
+}
+
+.hotkey__or {
+  @apply px-1 text-base font-medium leading-6 text-content-secondary;
+}
+
+.hotkey__combo {
+  @apply inline-flex items-center gap-1.5;
+}
+
+.hotkey__key-separator {
+  @apply font-medium text-content-secondary;
+}

data/app/assets/stylesheets/css/components/input.css

@@ -290,12 +290,6 @@
     padding-inline-end: var(--input-icon-offset);
   }
 
-  .search-input__shortcut {
-    @apply text-xs font-semibold py-px px-1 border border-secondary rounded-sm bg-secondary min-w-5 flex items-center justify-center;
-
-    line-height: var(--input-leading);
-    box-shadow: var(--box-shadow-search-input-shortcut);
-  }
 
   /* ==========================================================================
     Range Input

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

@@ -0,0 +1,129 @@
+/* State Component - BEM: .state (block), .state__* (elements), .state--* (modifiers) */
+
+/* Empty State Component */
+
+.state {
+  @apply mx-auto flex w-full max-w-72 flex-col items-center justify-center gap-3 rounded-lg bg-background p-6 text-center;
+}
+
+.state__illustration {
+  @apply relative h-36 w-60 flex items-center justify-center;
+}
+
+.state__card {
+  @apply absolute flex h-11 w-44 items-center gap-1.5 rounded-lg border border-secondary p-2.5;
+
+  background: linear-gradient(194deg, var(--color-primary) 27%, var(--color-background) 65%);
+  box-shadow: var(--box-shadow-card);
+}
+
+.state__card--top {
+  @apply start-0 top-0;
+}
+
+.state__card--middle {
+  @apply start-14 top-8;
+}
+
+.state__card--bottom {
+  @apply start-5 top-20;
+}
+
+.state__badge {
+  @apply flex size-6 shrink-0 items-center justify-center rounded-full text-xs font-medium leading-none text-content;
+
+  background: color-mix(in oklab, var(--color-tertiary) 88%, var(--color-primary));
+}
+
+.state__body {
+  @apply flex min-w-0 flex-1 flex-col gap-1;
+}
+
+.state__line {
+  @apply block h-1.5 rounded-full;
+
+  background: color-mix(in oklab, var(--color-tertiary) 78%, var(--color-primary));
+}
+
+.state__line--title {
+  @apply opacity-75;
+}
+
+.state__line--large {
+  @apply w-14;
+}
+
+.state__line--medium {
+  @apply w-12;
+}
+
+.state__line--small {
+  @apply w-11;
+}
+
+.state__line--content {
+  @apply w-full;
+}
+
+.state__message {
+  @apply text-base font-normal leading-6 text-content-secondary;
+}
+
+/*  Frame Load Failed Component */
+.state--frame-load-failed {
+  @apply max-w-96 gap-1;
+}
+
+.state__document {
+  @apply absolute flex h-28 w-20 flex-col rounded-lg border border-secondary p-0.5;
+
+  background: linear-gradient(235deg, var(--color-primary) 27%, var(--color-background) 65%);
+}
+
+.state__document--start {
+  @apply start-4 rotate-[-21deg];
+}
+
+.state__document--center {
+  @apply start-16 z-10;
+}
+
+.state__document--end {
+  @apply start-24 rotate-[21deg] z-0;
+}
+
+.state__document-body {
+  @apply flex h-full w-full items-center rounded-lg p-2.5;
+
+  box-shadow: var(--box-shadow-card);
+}
+
+.state__document-lines {
+  @apply flex h-full w-full flex-col justify-between
+}
+
+.state__document-line {
+  @apply block h-1 w-full rounded-full;
+
+  background: color-mix(in oklab, var(--color-tertiary) 78%, var(--color-primary));
+}
+
+.state__document-line--short {
+  @apply w-10;
+}
+
+.state__magnifier {
+  @apply absolute start-[30%] top-[30%] z-20 bg-none;
+}
+
+.state__magnifier-icon {
+  @apply size-24 text-content-secondary opacity-20;
+}
+
+.state__note {
+  @apply text-center text-sm font-normal leading-5 text-content;
+}
+
+.state__link {
+  color: color-mix(in oklab, var(--color-info-content), var(--color-content) 10%);
+}

data/app/assets/stylesheets/css/layout.css

@@ -50,7 +50,7 @@
       @apply overflow-y-auto h-full flex-1 flex flex-col px-2;
     }
     .avo-container {
-      @apply  flex flex-1 flex-col justify-between;
+      @apply flex flex-1 flex-col justify-between;
     }
   }
 
@@ -60,7 +60,6 @@
       @media (min-width: theme(--breakpoint-lg)) {
         margin-inline-start: calc(var(--sidebar-width) + var(--spacing));
         width: var(--content-width);
-
       }
     }
   }
@@ -91,11 +90,11 @@
   @apply hidden;
 }
 
-button[data-sidebar-state='closed'] .sidebar-toggle-icon--open {
+button[data-sidebar-state="closed"] .sidebar-toggle-icon--open {
   @apply hidden;
 }
 
-button[data-sidebar-state='closed'] .sidebar-toggle-icon--closed {
+button[data-sidebar-state="closed"] .sidebar-toggle-icon--closed {
   @apply inline-flex;
 }
 

data/app/assets/stylesheets/css/pagination.css

@@ -4,14 +4,14 @@
         .pagination__controls, .pagination__info, .pagination__nav (elements) */
 
 .pagination {
-  @apply flex w-full flex-col items-stretch justify-between gap-2 sm:flex-row sm:items-end sm:gap-0;
+  @apply flex w-full flex-col items-stretch justify-between gap-2 sm:flex-row sm:flex-wrap sm:items-end sm:gap-0;
 }
 
 /* === Per-page selector (left) === */
 
 .pagination__per-page {
   --pagination-per-page-width: 10rem; /* w-48 equivalent; use 165px for exact Figma match */
-  @apply flex items-center;
+  @apply flex shrink-0 items-center;
 }
 
 .pagination__per-page-input {
@@ -49,13 +49,19 @@
 
 /* === Controls pill (right) === */
 
+.pagination__controls-wrap {
+  @apply flex w-full min-w-0 sm:flex-[1_1_28rem] sm:min-w-[22rem] sm:justify-end;
+}
+
 .pagination__controls {
-  @apply flex w-fit shrink-0 items-center gap-3 rounded-lg border border-tertiary bg-primary overflow-hidden ps-3 pe-2 overflow-visible;
+  @apply flex w-full min-w-0 max-w-full items-center gap-3 rounded-lg border border-tertiary bg-primary ps-3 pe-2 overflow-x-auto overflow-y-hidden overscroll-x-contain touch-pan-x sm:w-fit;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-gutter: stable;
 }
 
 /* Info text with right-border divider */
 .pagination__info {
-  @apply flex items-center py-1 pe-3 border-e border-tertiary whitespace-nowrap overflow-hidden text-ellipsis text-sm text-content leading-5 font-normal;
+  @apply shrink-0 flex items-center py-1 pe-3 border-e border-tertiary whitespace-nowrap text-sm text-content leading-5 font-normal;
 
   &:last-child {
     @apply border-e-0 pe-1;
@@ -68,12 +74,12 @@
 
 /* Nav buttons wrapper */
 .pagination__nav {
-  @apply flex items-center;
+  @apply shrink-0 flex items-center;
 }
 
 /* === Pagy nav === */
 .pagy.series-nav {
-  @apply flex items-center gap-0.5;
+  @apply flex min-w-max items-center gap-0.5 whitespace-nowrap;
 
   a[role="separator"] {
     @apply px-2 text-sm text-content-secondary;

data/app/assets/stylesheets/css/typography.css

@@ -18,13 +18,30 @@ h5 {
   @apply text-lg;
 }
 
+kbd {
+  @apply inline-flex min-w-5 items-center justify-center rounded-sm border border-secondary bg-secondary px-1 text-xs font-semibold text-content-secondary;
+
+  /* color: currentColor;
+  border: 1px solid currentColor;
+  background-color: color-mix(in srgb, currentColor 8%, transparent); */
+  box-shadow: var(--box-shadow-search-input-shortcut);
+}
+
+kbd.kbd--called {
+  opacity: 0.4;
+}
+
 @layer base {
   a {
     color: var(--color-info-content);
 
     &:active,
     &:hover {
-      color: color-mix(in oklab, var(--color-info-content), var(--color-content) 30%);
+      color: color-mix(
+        in oklab,
+        var(--color-info-content),
+        var(--color-content) 30%
+      );
     }
 
     &:focus-visible {

data/app/assets/svgs/avo/circle-minus.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+  <path fill-rule="evenodd" d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm3 10.5a.75.75 0 0 0 0-1.5H9a.75.75 0 0 0 0 1.5h6Z" clip-rule="evenodd" />
+</svg>

data/app/components/avo/alert_component.rb

@@ -8,10 +8,10 @@ class Avo::AlertComponent < Avo::BaseComponent
   prop :timeout
 
   def icon
-    return "heroicons/solid/exclamation-circle" if is_error?
-    return "heroicons/solid/exclamation" if is_warning?
-    return "heroicons/solid/exclamation-circle" if is_info?
-    return "heroicons/solid/check-circle" if is_success?
+    return "tabler/filled/alert-circle" if is_error?
+    return "tabler/filled/alert-triangle" if is_warning?
+    return "tabler/filled/alert-circle" if is_info?
+    return "tabler/filled/circle-check" if is_success?
 
     "check-circle"
   end

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

@@ -6,7 +6,7 @@
   <div class="px-2">
     <div class="flex h-full">
       <div class="flex items-center min-h-full">
-        <%= helpers.svg "heroicons/solid/exclamation-circle", class: "h-6" %>
+        <%= helpers.svg "tabler/filled/alert-circle", class: "h-6" %>
       </div>
       <div class="ms-3 w-0 flex-1 pt-0.5">
         <p class="text-sm leading-5 font-semibold">

data/app/components/avo/base_component.rb

@@ -15,6 +15,15 @@ class Avo::BaseComponent < ViewComponent::Base
 
   def component_name = self.class.name.to_s.underscore
 
+  # Renders a <kbd> badge for a hotkey string.
+  # Skips modifier combos like "Meta+Enter" — only renders simple keys.
+  def hotkey_badge(hotkey, **html_options)
+    first_key = hotkey.to_s.split.first
+    return if first_key.blank? || first_key.include?("+")
+
+    tag.kbd(first_key.upcase, **html_options)
+  end
+
   private
 
   # Use the @parent_resource to fetch the field using the @reflection name.

data/app/components/avo/button_component.rb

@@ -4,7 +4,7 @@
 # style: primary/outline/text
 # size: :sm, :md, :lg
 # color: nil, :primary, :accent, :gray, :red, :green, :blue, or any other tailwind color
-# icon: "heroicons/outline/paperclip" as specified in the docs (https://docs.avohq.io/3.0/icons.html)
+# icon: "tabler/outline/paperclip" as specified in the docs (https://docs.avohq.io/3.0/icons.html)
 class Avo::ButtonComponent < Avo::BaseComponent
   prop :path, kind: :positional
   prop :size, default: :md
@@ -79,5 +79,6 @@ class Avo::ButtonComponent < Avo::BaseComponent
   def render_content
     concat helpers.svg(@icon, class: class_names("button__icon", @icon_class)) if @icon.present?
     concat content if content.present?
+    concat hotkey_badge(@args.dig(:data, :hotkey)) if @args.dig(:data, :hotkey)
   end
 end

data/app/components/avo/debug/status_component.html.erb

@@ -10,7 +10,7 @@
             <div>
               <div class="text-xl font-semibold">
                 <span class="text-green-700 text-xl">
-                  <%= helpers.svg "heroicons/outline/check-badge", class: "h-5 inline -mt-1 relative" %> <span>Community</span>
+                  <%= helpers.svg "tabler/outline/rosette-discount-check", class: "h-5 inline -mt-1 relative" %> <span>Community</span>
                 </span> license
               </div>
               <div class="mt-4">
@@ -30,7 +30,7 @@
                   style: :primary,
                   color: :blue,
                   target: '_blank',
-                  icon: 'heroicons/outline/external-link' do %>
+                  icon: 'tabler/outline/external-link' do %>
                   Get started!
                 <% end %>
               </div>

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

@@ -1,5 +1,16 @@
-<div class="relative flex-1 flex flex-col items-center justify-center space-y-2 py-6 border border-dashed border-content-secondary rounded-lg">
-  <div class="text-content-secondary text-center">
-    <%= text %>
+<%= content_tag :div, class: class_names("state", @classes) do %>
+  <div class="state__illustration" aria-hidden="true">
+    <% cards.each do |card| %>
+      <div class="<%= class_names("state__card", "state__card--#{card[:position]}") %>">
+        <div class="state__badge"><%= card[:number] %></div>
+
+        <div class="state__body">
+          <div class="<%= class_names("state__line", "state__line--title", "state__line--#{card[:title]}") %>"></div>
+          <div class="state__line state__line--content"></div>
+        </div>
+      </div>
+    <% end %>
   </div>
-</div>
+
+  <p class="state__message"><%= text %></p>
+<% end %>

data/app/components/avo/empty_state_component.rb

@@ -3,11 +3,20 @@
 class Avo::EmptyStateComponent < Avo::BaseComponent
   prop :message
   prop :by_association, default: false
+  prop :classes
 
   def text
     @message || locale_message
   end
 
+  def cards
+    [
+      {number: 1, position: :top, title: :large},
+      {number: 2, position: :middle, title: :large},
+      {number: 3, position: :bottom, title: :large}
+    ]
+  end
+
   private
 
   def locale_message

data/app/components/avo/fields/common/files/view_type/grid_item_component.html.erb

@@ -9,7 +9,7 @@
     <% else %>
       <%= content_tag file.representable? ? :a : :div, **document_arguments do %>
         <div class="flex flex-col justify-center items-center w-full">
-          <%= helpers.svg "heroicons/outline/document-text", class: 'h-10 text-gray-600 mb-2' %>
+          <%= helpers.svg "tabler/outline/file-text", class: 'h-10 text-gray-600 mb-2' %>
         </div>
       <% end %>
     <% end %>

data/app/components/avo/fields/common/key_value_component.html.erb

@@ -22,7 +22,7 @@
             data-action="click->key-value#addRow"
             class="key-value__action-button <%= 'cursor-not-allowed' if @field.disable_adding_rows %>"
           >
-            <%= helpers.svg "heroicons/outline/plus-circle", class: 'key-value__action-icon' %>
+            <%= helpers.svg "tabler/outline/circle-plus", class: 'key-value__action-icon' %>
           </a>
         </div>
       <% end %>

data/app/components/avo/fields/common/stars_component.html.erb

@@ -1,7 +1,7 @@
 <div class="rating-group" data-component="<%= component_name %>"> 
   <% (1..@max).each do |rating_value| %>
     <%= helpers.svg(
-      'heroicons/solid/star',
+      'tabler/filled/star',
       class: class_names("star inline-block me-0.5", filled: rating_value <= (@value || 0))
     ) %>
   <% end %>

data/app/components/avo/fields/common/status_viewer_component.html.erb

@@ -1,10 +1,10 @@
 <div class=" <%= class_names("flex shrink-0 items-center", "text-red-600": @status == 'failed', "text-green-600": @status == 'success', "text-gray-600": @status == 'neutral') %>">
   <% if @status == 'success' %>
-    <%= helpers.svg 'heroicons/solid/check-circle', class: 'h-4' %>
+    <%= helpers.svg 'tabler/filled/circle-check', class: 'h-4' %>
   <% elsif @status == 'failed' %>
-    <%= helpers.svg 'heroicons/solid/x-circle', class: 'h-4' %>
+    <%= helpers.svg 'tabler/filled/circle-x', class: 'h-4' %>
   <% elsif @status == 'neutral' %>
-    <%= helpers.svg 'heroicons/solid/minus-circle', class: 'h-4' %>
+    <%= helpers.svg 'avo/circle-minus', class: 'h-4' %>
   <% elsif @status == 'loading' %>
     <div class="spinner">
       <div class="double-bounce1"></div>

data/app/components/avo/fields/preview_field/index_component.rb

@@ -4,7 +4,7 @@ class Avo::Fields::PreviewField::IndexComponent < Avo::Fields::IndexComponent
   def render_preview
     link_to resource_view_path, title: t("avo.view_item", item: @resource.name).humanize do
       helpers.svg(
-        "heroicons/outline/magnifying-glass-circle",
+        "tabler/outline/zoom-scan",
         class: "block h-6 text-gray-600",
         data: {
           controller: "preview",

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

@@ -9,7 +9,7 @@
       data-max="<%= @field.max %>"
       data-current-value="<%= @field.value || 0 %>">
       <% (1..@field.max).each do |rating_value| %>
-        <%= helpers.svg('heroicons/solid/star',
+        <%= helpers.svg('tabler/filled/star',
           class: class_names("star inline-block me-0.5", filled: rating_value <= (@value || 0)),
           data: {
             star_value: rating_value,

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

@@ -2,7 +2,7 @@
   <div class="relative w-full flex justify-between">
     <%= a_button class: 'focus:outline-hidden',
       style: :primary,
-      icon: "avo/filter",
+      icon: "tabler/outline/filter",
       title: t('avo.click_to_reveal_filters'),
       'data-button': 'resource-filters',
       'data-action': 'click->toggle#togglePanel',

data/app/components/avo/items/switcher_component.html.erb

@@ -27,7 +27,7 @@
     <% end %>
   <% end %>
 <% elsif item.is_collaboration? %>
-  <%= render Avo::Collaborate::TimelineComponent.new(resource: @resource) %>
+  <%= render Avo::Collaboration::TimelineComponent.new(resource: @resource) %>
 <% elsif item.is_header? %>
   <% if @resource.cover.present? && @resource.cover.visible_in_current_view? %>
     <%= render Avo::CoverComponent.new cover: @resource.cover %>

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

@@ -0,0 +1,29 @@
+<%= render Avo::ModalComponent.new(
+  class: "hotkey",
+  title: "Keyboard shortcuts",
+  width: :xl,
+  hidden: true,
+  behavior: :persistent
+) do %>
+  <div class="hotkey__grid">
+    <% sections.each do |section| %>
+      <section class="hotkey__section" aria-labelledby="<%= section[:id] %>">
+        <h3 class="hotkey__section-title" id="<%= section[:id] %>">
+          <%= section[:title] %>
+        </h3>
+
+        <ul class="hotkey__section-body">
+          <% section[:shortcuts].each do |shortcut| %>
+            <li class="hotkey__row">
+              <span class="hotkey__action"><%= shortcut[:action] %></span>
+
+              <%= tag.span class: "hotkey__keys", **(shortcut[:keys_aria_label].present? ? {aria: {label: shortcut[:keys_aria_label]}} : {}) do %>
+                <%= render_shortcut_keys(shortcut) %>
+              <% end %>
+            </li>
+          <% end %>
+        </ul>
+      </section>
+    <% end %>
+  </div>
+<% end %>