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

data/app/javascript/js/controllers/base_modal_controller.js

@@ -0,0 +1,65 @@
+import { Controller } from '@hotwired/stimulus'
+
+/**
+ * Shared behaviour for both modal strategies (destroy & toggle).
+ * Not registered with Stimulus directly — subclasses are.
+ */
+export default class extends Controller {
+  static targets = ['modal', 'backdrop']
+
+  static values = {
+    closeModalOnBackdropClick: { type: Boolean, default: true },
+  }
+
+  // -- lifecycle ------------------------------------------------------------
+
+  connectModal() {
+    this.handleKeydown = this.handleKeydown.bind(this)
+    document.addEventListener('keydown', this.handleKeydown)
+  }
+
+  disconnectModal() {
+    document.removeEventListener('keydown', this.handleKeydown)
+  }
+
+  // -- shared actions -------------------------------------------------------
+
+  handleKeydown(event) {
+    if (event.key === 'Escape' && this.isOpen() && this.closeModalOnBackdropClickValue) {
+      this.closeModal()
+    }
+  }
+
+  /** Backdrop click action — wired via data-action="click->…#close" */
+  close(event) {
+    if (event.target === this.backdropTarget) return
+
+    this.closeModal()
+  }
+
+  // -- helpers --------------------------------------------------------------
+
+  addModalOpen() {
+    document.body.classList.add('modal-open')
+  }
+
+  removeModalOpen() {
+    document.body.classList.remove('modal-open')
+  }
+
+  dispatchClose() {
+    document.dispatchEvent(new Event('modal-controller:close'))
+  }
+
+  // -- subclass contract (override in each strategy) ------------------------
+
+  /** @abstract */
+  closeModal() {
+    throw new Error('Subclass must implement closeModal()')
+  }
+
+  /** @abstract */
+  isOpen() {
+    throw new Error('Subclass must implement isOpen()')
+  }
+}

data/app/javascript/js/controllers/confirm_dialog_controller.js

@@ -0,0 +1,18 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static targets = ['option']
+
+  navigate(event) {
+    if (!['ArrowDown', 'ArrowUp'].includes(event.key)) return
+    event.preventDefault()
+
+    const options = this.optionTargets
+    const index = options.indexOf(document.activeElement)
+    const next = event.key === 'ArrowDown'
+      ? (index + 1) % options.length
+      : (index - 1 + options.length) % options.length
+
+    options[next]?.focus()
+  }
+}

data/app/javascript/js/controllers/modal_controller.js

@@ -1,39 +1,31 @@
-import { Controller } from '@hotwired/stimulus'
-
-// Connects to data-controller="modal"
-export default class extends Controller {
-  static targets = ['modal', 'backdrop']
-
-  static values = {
-    closeModalOnBackdropClick: true,
-  }
-
+import BaseModalController from './base_modal_controller'
+
+/**
+ * Inject / destroy strategy.
+ *
+ * The modal is added to the DOM (usually via Turbo) when it should appear
+ * and removed entirely when it is closed.
+ */
+export default class extends BaseModalController {
   connect() {
-    document.body.classList.add('modal-open')
-    this.handleKeydown = this.handleKeydown.bind(this)
-    document.addEventListener('keydown', this.handleKeydown)
+    this.connectModal()
+    this.addModalOpen()
+    this.modalTarget.focus()
   }
 
   disconnect() {
-    document.removeEventListener('keydown', this.handleKeydown)
+    this.disconnectModal()
   }
 
-  handleKeydown(event) {
-    if (event.key === 'Escape' && this.closeModalOnBackdropClickValue) {
-      this.closeModal()
-    }
-  }
-
-  close(event) {
-    if (event.target === this.backdropTarget && !this.closeModalOnBackdropClickValue) return
+  // -- strategy implementation ----------------------------------------------
 
-    this.closeModal()
+  isOpen() {
+    return true // if the element is in the DOM it's open
   }
 
-  // May be invoked by the other controllers
   closeModal() {
     this.modalTarget.remove()
-
-    document.dispatchEvent(new Event('modal-controller:close'))
+    this.removeModalOpen()
+    this.dispatchClose()
   }
 }

data/app/javascript/js/controllers/persistent_modal_controller.js

@@ -0,0 +1,50 @@
+import BaseModalController from './base_modal_controller'
+
+/**
+ * Persistent / show-hide strategy.
+ *
+ * The modal lives in the DOM at all times. It starts with the `hidden`
+ * attribute and is revealed / hidden by toggling that attribute.
+ */
+export default class extends BaseModalController {
+  connect() {
+    this.connectModal()
+
+    this.handleOpen = this.openModal.bind(this)
+    this.handleToggle = this.toggleModal.bind(this)
+    document.addEventListener('persistent-modal:open', this.handleOpen)
+    document.addEventListener('persistent-modal:toggle', this.handleToggle)
+  }
+
+  disconnect() {
+    this.disconnectModal()
+    document.removeEventListener('persistent-modal:open', this.handleOpen)
+    document.removeEventListener('persistent-modal:toggle', this.handleToggle)
+  }
+
+  // -- strategy implementation ----------------------------------------------
+
+  isOpen() {
+    return !this.modalTarget.hasAttribute('hidden')
+  }
+
+  closeModal() {
+    this.modalTarget.setAttribute('hidden', '')
+    this.removeModalOpen()
+    this.dispatchClose()
+  }
+
+  openModal() {
+    this.modalTarget.removeAttribute('hidden')
+    this.addModalOpen()
+    this.modalTarget.focus()
+  }
+
+  toggleModal() {
+    if (this.isOpen()) {
+      this.closeModal()
+    } else {
+      this.openModal()
+    }
+  }
+}

data/app/javascript/js/controllers/search_controller.js

@@ -117,10 +117,6 @@ export default class extends Controller {
   }
 
   disconnect() {
-    if (this.isGlobalSearch) {
-      Mousetrap.unbind(['command+k', 'ctrl+k'])
-    }
-
     // Don't leave open autocompletes around when disconnected. Otherwise it will still
     // be visible when navigating back to this page.
     if (this.destroyMethod) {

data/app/javascript/js/controllers/sidebar_controller.js

@@ -69,6 +69,20 @@ export default class extends Controller {
       ? this.mainAreaTarget.classList.contains('sidebar-mobile-open')
       : this.mainAreaTarget.classList.contains('sidebar-open')
     this.setToggleButtonsState(isOpen ? 'open' : 'closed')
+
+    this.handleToggleShortcut = (event) => {
+      if (event.repeat || event.defaultPrevented) return
+      if (event.target?.closest('input, textarea, select, [contenteditable]')) return
+      if (!(event.metaKey || event.ctrlKey) || event.altKey || event.key !== '\\') return
+
+      event.preventDefault()
+      this.toggleSidebarForViewport()
+    }
+    document.addEventListener('keydown', this.handleToggleShortcut)
+  }
+
+  disconnect() {
+    document.removeEventListener('keydown', this.handleToggleShortcut)
   }
 
   rememberScrollPosition() {
@@ -96,6 +110,14 @@ export default class extends Controller {
     })
   }
 
+  toggleSidebarForViewport() {
+    if (window.innerWidth < 1024) {
+      this.toggleSidebarOnMobile()
+    } else {
+      this.toggleSidebar()
+    }
+  }
+
   toggleSidebar() {
     if (this.sidebarTarget.classList.contains('hidden')) {
       this.sidebarTarget.classList.remove('hidden')

data/app/javascript/js/controllers.js

@@ -10,6 +10,7 @@ import CardFiltersController from './controllers/card_filters_controller'
 import ClearInputController from './controllers/fields/clear_input_controller'
 import CodeFieldController from './controllers/fields/code_field_controller'
 import ColorSchemeSwitcherController from './controllers/color_scheme_switcher_controller'
+import ConfirmDialogController from './controllers/confirm_dialog_controller'
 import CopyToClipboardController from './controllers/copy_to_clipboard_controller'
 import DashboardCardController from './controllers/dashboard_card_controller'
 import DateFieldController from './controllers/fields/date_field_controller'
@@ -35,6 +36,7 @@ import MultipleSelectFilterController from './controllers/multiple_select_filter
 import NestedFormController from './controllers/nested_form_controller'
 import PanelRefreshController from './controllers/fields/panel_refresh_controller'
 import PerPageController from './controllers/per_page_controller'
+import PersistentModalController from './controllers/persistent_modal_controller'
 import PreviewController from './controllers/preview_controller'
 import ProgressBarFieldController from './controllers/fields/progress_bar_field_controller'
 import RecordSelectorController from './controllers/record_selector_controller'
@@ -61,6 +63,7 @@ import TrixBodyController from './controllers/trix_body_controller'
 import TrixFieldController from './controllers/fields/trix_field_controller'
 
 application.register('action', ActionController)
+application.register('confirm-dialog', ConfirmDialogController)
 application.register('actions-overflow', ActionsOverflowController)
 application.register('actions-picker', ActionsPickerController)
 application.register('attachments', AttachmentsController)
@@ -85,6 +88,7 @@ application.register('media-library', MediaLibraryController)
 application.register('menu', MenuController)
 application.register('modal', ModalController)
 application.register('modal-size', ModalSizeController)
+application.register('persistent-modal', PersistentModalController)
 application.register('multiple-select-filter', MultipleSelectFilterController)
 application.register('avo-nested-form', NestedFormController)
 application.register('panel-refresh', PanelRefreshController)

data/app/javascript/js/global_hotkeys.js

@@ -0,0 +1,77 @@
+/**
+ * Global (non-element) keyboard shortcuts.
+ * Add new entries to HOTKEYS to register more.
+ *
+ * Two registries:
+ *   - ELEMENT_HOTKEYS: handled via @github/hotkey (supports sequences like "r r r")
+ *   - DIRECT_HOTKEYS: custom keydown listeners for keys needing cross-browser normalization
+ */
+
+import { install } from '@github/hotkey'
+
+// Use @github/hotkey for sequences and standard combos.
+const ELEMENT_HOTKEYS = [
+  {
+    hotkey: 'r r r',
+    handle: () => {
+      window.reloadScrollTop = document.querySelector('.scrollable-wrapper')?.scrollTop
+      window.StreamActions.turbo_reload()
+    },
+  },
+]
+
+// Use direct listeners for keys where event.key varies across browsers/layouts.
+const DIRECT_HOTKEYS = [
+  {
+    // Shift+/ → "?" on US layouts, but some browsers expose key:"Slash"+shiftKey instead.
+    match: (e) => e.key === '?' || (e.shiftKey && e.code === 'Slash'),
+    handle: () => document.dispatchEvent(new Event('persistent-modal:toggle')),
+  },
+]
+
+const TYPING_SELECTOR = 'input, textarea, select, [contenteditable]'
+
+export function installGlobalHotkeys() {
+  // When a hotkey fires on a DOM element that contains a <kbd>, mark it cold
+  // before letting the click proceed. preventDefault + requestAnimationFrame
+  // gives the browser one frame to paint the cold state before navigation starts.
+  document.addEventListener('hotkey-fire', (event) => {
+    const kbd = event.target.querySelector('kbd')
+    if (!kbd) return
+
+    event.preventDefault()
+    kbd.classList.add('kbd--called')
+    requestAnimationFrame(() => event.target.click())
+  })
+
+  document.addEventListener('turbo:load', () => {
+    document.querySelectorAll('kbd.kbd--called').forEach((kbd) => kbd.classList.remove('kbd--called'))
+
+    if (window.reloadScrollTop) {
+      setTimeout(() => {
+        document.querySelector('.scrollable-wrapper')?.scrollTo(0, window.reloadScrollTop)
+        window.reloadScrollTop = null
+      }, 50)
+    }
+  })
+
+  ELEMENT_HOTKEYS.forEach(({ hotkey, handle }) => {
+    const el = document.createElement('span')
+    el.addEventListener('hotkey-fire', (event) => {
+      event.preventDefault()
+      handle()
+    })
+    install(el, hotkey)
+  })
+
+  document.addEventListener('keydown', (event) => {
+    if (event.defaultPrevented || event.repeat) return
+    if (event.target instanceof Element && event.target.closest(TYPING_SELECTOR)) return
+
+    const entry = DIRECT_HOTKEYS.find(({ match }) => match(event))
+    if (entry) {
+      event.preventDefault()
+      entry.handle()
+    }
+  })
+}

data/app/javascript/js/helpers/toggle_hidden.js

@@ -0,0 +1,7 @@
+export function toggleHidden(element) {
+  if (element.hasAttribute('hidden')) {
+    element.removeAttribute('hidden')
+  } else {
+    element.setAttribute('hidden', '')
+  }
+}

data/app/views/avo/actions/show.html.erb

@@ -25,7 +25,7 @@
       <% c.with_heading do %>
         <%= @action.action_name %>
         <% if Rails.env.development? %>
-          <%= link_to editor_file_path(@action), target: "_blank", class: "inline-block align-middle ms-1", title: "Open action in your editor", data: { tippy: "tooltip" } do %>
+          <%= link_to editor_file_path(@action), target: "_blank", class: "inline-block align-middle ms-1", title: "Open action in your editor", data: { tippy: "tooltip" }, tabindex: "-1" do %>
             <%= svg "tabler/outline/code", class: "size-4 text-content-secondary cursor-pointer" %>
           <% end %>
         <% end %>

data/app/views/avo/base/_date_time_filter.html.erb

@@ -24,7 +24,7 @@
           action: "click->date-time-filter#clear",
           tippy: :tooltip
         } do %>
-        <%= svg "avo/times", class: "h-4" %>
+        <%= svg "tabler/outline/x", class: "h-4" %>
       <% end %>
     </div>
     <div class="flex justify-end">

data/app/views/avo/base/preview.html.erb

@@ -27,7 +27,7 @@
     <div class="shadow-lg rounded px-4 py-3 relative border text-white pointer-events-auto bg-blue-400 border-blue-600 m-2">
       <div class="flex px-2">
         <div class="shrink-0">
-          <%= svg "heroicons/solid/exclamation-circle", class: "h-6" %>
+          <%= svg "tabler/filled/alert-circle", class: "h-6" %>
         </div>
         <div class="ms-3 flex-1 pt-0.5">
           <p class="text-sm leading-5 font-semibold"><%= t "avo.not_authorized" %></p>

data/app/views/avo/debug/_valid_indicator.html.erb

@@ -1,9 +1,9 @@
 <% if valid %>
   <span class="text-green-700 text-xl">
-    <%= svg "heroicons/outline/check-badge", class: "h-5 inline -mt-1 relative" %> <span>Valid</span>
+    <%= svg "tabler/outline/rosette-discount-check", class: "h-5 inline -mt-1 relative" %> <span>Valid</span>
   </span>
 <% else %>
   <span class="text-orange-700 text-xl">
-    <%= svg "heroicons/outline/exclamation-circle", class: "h-5 inline -mt-1 relative" %> <span>Invalid</span>
+    <%= svg "tabler/outline/exclamation-circle", class: "h-5 inline -mt-1 relative" %> <span>Invalid</span>
   </span>
 <% end %>

data/app/views/avo/home/failed_to_load.html.erb

@@ -1,18 +1,45 @@
-<%= render Avo::TurboFrameWrapperComponent.new(params[:turbo_frame]) do %>
-  <%
-  classes = 'absolute inset-auto start-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2'
-  label = t 'avo.failed_to_load'
-  src_url = params[:src].present? && !params[:src].starts_with?('http://') ? CGI.escapeHTML(params[:src]) : nil
+<%
+  src_url = params[:src].present? && !params[:src].starts_with?("http://") ? CGI.escapeHTML(params[:src]) : nil
+  frame_label = if params[:turbo_frame].present?
+    params[:turbo_frame].to_s.humanize.downcase
+  else
+    "this frame"
+  end
 %>
-  <div class="relative flex-1 py-4">
-    <div class="relative block text-gray-300 h-64 w-full">
-      <%= svg "avo/failed_to_load", class: "#{classes} h-52 text-gray-400" %>
-    </div>
-    <div class="relative block text-center text-lg text-gray-400 font-semibold pb-6"><%= label %> <span class="border-b-2 border-gray-200 border-dashed"><%= params[:turbo_frame].to_s.humanize.downcase if params[:turbo_frame].present? %></span> frame</div>
-    <% if Rails.env.development? && src_url %>
-      <div class="text-center text-sm w-full pb-3">
-        This is not an issue with Avo. Use <%= link_to 'this page', src_url, target: :_blank %> to see why this frame failed to load.
+
+<%= render Avo::TurboFrameWrapperComponent.new(params[:turbo_frame]) do %>
+  <div class="state state--frame-load-failed">
+    <div class="state__illustration" aria-hidden="true">
+      <% %i[start center end].each do |position| %>
+        <div class="state__document state__document--<%= position %>">
+          <div class="state__document-body">
+            <div class="state__document-lines">
+              <span class="state__document-line"></span>
+              <span class="state__document-line"></span>
+              <span class="state__document-line"></span>
+              <span class="state__document-line"></span>
+              <span class="state__document-line state__document-line--short"></span>
+            </div>
+          </div>
+        </div>
+      <% end %>
+
+      <div class="state__magnifier">
+        <%= svg "tabler/outline/zoom", class: "state__magnifier-icon" %>
       </div>
+    </div>
+
+    <p class="state__message text-center font-normal">
+      Failed to load:
+      <span class="font-bold"><%= frame_label %></span>
+    </p>
+
+    <% if Rails.env.development? && src_url.present? %>
+      <p class="state__note text-center font-normal">
+        Follow
+        <%= link_to "this link", src_url, target: "_blank", rel: "noopener", class: "state__link font-normal" %>
+        for more details about the issue and how to fix it.
+      </p>
     <% end %>
   </div>
 <% end %>

data/app/views/avo/media_library/_form.html.erb

@@ -44,7 +44,7 @@
 
   <div class="w-full flex justify-end pe-6">
     <%= a_button type: :submit,
-      icon: "avo/save",
+      icon: "tabler/outline/device-floppy",
       size: :sm,
       style: :outline,
       data: {

data/app/views/avo/partials/_color_scheme_switcher.html.erb

@@ -37,7 +37,7 @@
             data-action="click->toggle#togglePanel"
             class="color-scheme-switcher__button color-scheme-switcher__button--accent"
             title="Accent color">
-      <%= svg "avo/color-swatch", class: "color-scheme-switcher__icon" %>
+      <%= svg "tabler/outline/color-swatch", class: "color-scheme-switcher__icon" %>
       <span class="color-scheme-switcher__accent-badge">
         <span class="color-scheme-switcher__accent-badge-preview color-scheme-switcher__accent-badge-preview--neutral"></span>
         <% accent_colors.each do |accent| %>
@@ -82,7 +82,7 @@
           data-scheme="auto"
           class="color-scheme-switcher__button"
           title="Auto (system preference)">
-    <%= svg "heroicons/outline/computer-desktop", class: "color-scheme-switcher__icon" %>
+    <%= svg "tabler/outline/device-desktop", class: "color-scheme-switcher__icon" %>
     <span class="sr-only">Auto</span>
   </button>
   <button type="button"
@@ -91,7 +91,7 @@
           data-scheme="light"
           class="color-scheme-switcher__button"
           title="Light mode">
-    <%= svg "heroicons/outline/sun", class: "color-scheme-switcher__icon" %>
+    <%= svg "tabler/outline/sun", class: "color-scheme-switcher__icon" %>
     <span class="sr-only">Light</span>
   </button>
   <button type="button"
@@ -100,7 +100,7 @@
           data-scheme="dark"
           class="color-scheme-switcher__button"
           title="Dark mode">
-    <%= svg "heroicons/outline/moon", class: "color-scheme-switcher__icon" %>
+    <%= svg "tabler/outline/moon", class: "color-scheme-switcher__icon" %>
     <span class="sr-only">Dark</span>
   </button>
 </div>

data/app/views/avo/partials/_confirm_dialog.html.erb

@@ -1,4 +1,4 @@
-<dialog id="turbo-confirm" class="mx-auto my-auto w-72">
+<dialog id="turbo-confirm" class="mx-auto my-auto w-72" data-controller="confirm-dialog" data-action="keydown->confirm-dialog#navigate">
   <form method="dialog">
     <div class="card relative">
       <button value="cancel" class="absolute top-3 inset-e-2.5 text-content-secondary bg-transparent hover:bg-tertiary hover:text-content rounded-lg text-sm size-8 ms-auto inline-flex justify-center items-center" data-modal-hide="popup-modal" tabindex="3">
@@ -16,10 +16,10 @@
             </p>
           </div>
           <div class="flex flex-col gap-2 w-full p-4 pt-0 mt-6">
-            <button value="confirm" class="text-danger border border-danger hover:bg-danger/10 focus:ring-4 focus:outline-hidden focus:ring-danger/30 font-medium rounded-lg text-sm px-4 py-2 text-center cursor-pointer" tabindex="1" autofocus>
+            <button value="confirm" class="text-danger border border-danger hover:bg-danger/10 focus:ring-4 focus:outline-hidden focus:ring-danger/30 font-medium rounded-lg text-sm px-4 py-2 text-center cursor-pointer" tabindex="1" autofocus data-confirm-dialog-target="option">
               <%= t "avo.yes_confirm" %>
             </button>
-            <button value="cancel" class="px-4 py-2 text-sm font-medium text-content focus:outline-hidden bg-primary rounded-lg border border-tertiary hover:bg-secondary hover:text-content focus:z-10 focus:ring-4 focus:ring-tertiary cursor-pointer" tabindex="2">
+            <button value="cancel" class="px-4 py-2 text-sm font-medium text-content focus:outline-hidden bg-primary rounded-lg border border-tertiary hover:bg-secondary hover:text-content focus:z-10 focus:ring-4 focus:ring-tertiary cursor-pointer" tabindex="2" data-confirm-dialog-target="option">
               <%= t "avo.no_cancel" %>
             </button>
           </div>

data/app/views/avo/partials/_custom_tools_alert.html.erb

@@ -1,7 +1,7 @@
 <% if @custom_tools_alert_visible %>
   <div class="w-full inset-auto bottom-0 z-50 mb-4 opacity-75 hover:opacity-100 transition-opacity duration-150">
     <a href="https://avohq.io/pricing" target="_blank" class="rounded-sm bg-orange-700 text-white py-2 px-4 text-sm block items-center flex leading-tight">
-      <%= svg "avo/exclamation", class: "h-6 inline me-2 text-bold shrink-0 me-1" %> Warning. <%= @custom_tools_alert_visible %> This page will not be visible in a production environment.
+      <%= svg "tabler/outline/alert-triangle", class: "h-6 inline me-2 text-bold shrink-0 me-1" %> Warning. <%= @custom_tools_alert_visible %> This page will not be visible in a production environment.
     </a>
   </div>
 <% end %>
@@ -13,7 +13,7 @@
       %>
       <div class="w-full inset-auto bottom-0 z-50 mb-4 opacity-75 hover:opacity-100 transition-opacity duration-150">
         <a href="<%= url %>" target="<%= target %>" class="rounded-sm bg-orange-700 text-white py-2 px-4 text-sm items-center flex leading-tight space-x-2 rtl:space-x-reverse">
-          <%= svg "avo/exclamation", class: "h-6 inline me-2 text-bold shrink-0 me-1" %>
+          <%= svg "tabler/outline/alert-triangle", class: "h-6 inline me-2 text-bold shrink-0 me-1" %>
           <div>
             <%= simple_format message %>
           </div>
@@ -22,7 +22,7 @@
     <% elsif error.is_a? String %>
       <div class="w-full inset-auto bottom-0 z-50 mb-4 opacity-75 hover:opacity-100 transition-opacity duration-150">
         <div class="rounded-sm bg-orange-700 text-white py-2 px-4 text-sm items-center flex leading-tight space-x-2 rtl:space-x-reverse">
-          <%= svg "avo/exclamation", class: "h-6 inline me-2 text-bold shrink-0 me-1" %>
+          <%= svg "tabler/outline/alert-triangle", class: "h-6 inline me-2 text-bold shrink-0 me-1" %>
           <div><%= simple_format error %></div>
         </div>
       </div>

data/app/views/avo/partials/_sortable_component.html.erb

@@ -1,12 +1,12 @@
 <%
-  icon = "avo/selector"
+  icon = "tabler/outline/selector"
 
   if params[:sort_by] == field.id.to_s
     case params[:sort_direction]
       when 'asc'
-        icon = "avo/sort-ascending"
+        icon = "tabler/outline/sort-ascending"
       when 'desc'
-        icon = "avo/sort-descending"
+        icon = "tabler/outline/sort-descending"
       end
   end
 %>

data/app/views/avo/partials/_table_header.html.erb

@@ -87,7 +87,7 @@
             class="cursor-pointer <%= text_classes %>"
             data-action="click->toggle#togglePanel"
           >
-            <%= svg 'heroicons/solid/chart-bar', class: 'h-3 ms-1' %>
+            <%= svg 'tabler/filled/chart-pie-4', class: 'h-3 ms-1' %>
           </div>
           <turbo-frame
             id="summary-frame-<%= field.id %>"

data/app/views/avo/private/_links_and_buttons.html.erb

@@ -28,7 +28,7 @@
                   %>
                   <%
                     a_button_or_link = "a_#{entity}"
-                    args = {icon: "heroicons/outline/arrow-left", style: style, color: color, size: size, class: extra_classes, disabled: state == :disabled}
+                    args = {icon: "tabler/outline/arrow-left", style: style, color: color, size: size, class: extra_classes, disabled: state == :disabled}
                   %>
                   <% if entity == :link %>
                     <div>
@@ -43,7 +43,7 @@
                       <% end %>
                     </div>
                     <div>
-                      <%= a_button icon: "avo/bell", style: style, color: color, size: size, class: extra_classes, disabled: state == :disabled %>
+                      <%= a_button icon: "tabler/outline/bell", style: style, color: color, size: size, class: extra_classes, disabled: state == :disabled %>
                     </div>
                   <% end %>
                 <% end %>

data/app/views/avo/private/design.html.erb

@@ -1,19 +1,19 @@
 <div class="flex flex-col">
   <%= render ui.panel(title: 'Welcome to Avo', description: 'This page is visible only in development. It will be hidden in other environments.') do |panel| %>
     <% panel.with_controls do %>
-      <%= a_link('/admin', icon: "heroicons/outline/arrow-left", color: :green, style: :primary, is_link: true) do %>
+      <%= a_link('/admin', icon: "tabler/outline/arrow-left", color: :green, style: :primary, is_link: true) do %>
         Primary
       <% end %>
 
-      <%= a_link('/admin', icon: "heroicons/outline/arrow-left", style: :outline, is_link: true) do %>
+      <%= a_link('/admin', icon: "tabler/outline/arrow-left", style: :outline, is_link: true) do %>
         Outline
       <% end %>
 
-      <%= a_link('/admin', icon: "heroicons/outline/arrow-left", style: :outline, color: :red, is_link: true) do %>
+      <%= a_link('/admin', icon: "tabler/outline/arrow-left", style: :outline, color: :red, is_link: true) do %>
         Red
       <% end %>
 
-      <%= a_link('/admin', icon: "heroicons/outline/arrow-left", style: :text, color: :orange, is_link: true) do %>
+      <%= a_link('/admin', icon: "tabler/outline/arrow-left", style: :text, color: :orange, is_link: true) do %>
         Text
       <% end %>
 

data/app/views/avo/sidebar/_license_warning.html.erb

@@ -1,8 +1,8 @@
 <div class="w-10/12 ms-1/12 inset-auto bottom-0 z-50 my-4 opacity-50 hover:opacity-100 transition-opacity duration-150 group">
   <a href="https://avohq.io/pricing" target="_blank" class="rounded-sm bg-green-700 text-white py-2 px-4 text-sm block group-hover:pt-4">
-    <%= svg "avo/exclamation", class: 'h-6 inline me-1 text-bold' %> <%= title %>
+    <%= svg "tabler/outline/alert-triangle", class: 'h-6 inline me-1 text-bold' %> <%= title %>
     <div class="group-hover:block hidden py-2">
-      <%= message %> <%= svg "avo/arrow-circle-right", class: "h-6 inline float-right" %>
+      <%= message %> <%= svg "tabler/outline/circle-arrow-right", class: "h-6 inline float-right" %>
     </div>
   </a>
 </div>