avo 4.0.0.beta.40 → 4.0.0.beta.41

data/app/assets/stylesheets/application.css

@@ -97,6 +97,7 @@
 
 @import "./css/components/ui/checkbox.css";
 @import "./css/components/tooltip.css";
+@import "./css/fields/tags.css";
 
 /* variables.css uses explicit @layer theme { .dark } and @layer components
    { .neutral-theme-*, .accent-theme-* } blocks internally. Importing it OUTSIDE
@@ -125,7 +126,6 @@
   @import "./css/fields/progress.css";
   @import "./css/fields/key_value.css";
   @import "./css/fields/trix.css";
-  @import "./css/fields/tags.css";
   @import "./css/fields/tiptap.css";
   @import "./css/fields/stars.css";
 

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

@@ -1,5 +1,5 @@
 .breadcrumbs {
-  @apply sticky z-40 w-full bg-primary mb-4;
+  @apply sticky z-40 w-full bg-(--color-main-content-background) mb-4;
   /* top: calc(var(--top-navbar-height) + var(--spacing) * 4); */
   top: calc(var(--top-navbar-height) + var(--spacing) * 2);
   margin-top: --spacing(-2);
@@ -14,7 +14,7 @@
     right: 0;
     height: calc(0.5rem);
     transform: translateY(-100%);
-    background: var(--color-primary);
+    background: var(--color-main-content-background);
     pointer-events: none;
   }
 }
@@ -32,8 +32,8 @@
   height: --spacing(4);
   background: linear-gradient(
     to bottom,
-    var(--color-primary),
-    color-mix(in oklab, var(--color-primary), transparent 100%)
+    var(--color-main-content-background),
+    color-mix(in oklab, var(--color-main-content-background), transparent 100%)
   );
   pointer-events: none;
 }

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

@@ -115,9 +115,9 @@
   @apply bg-primary text-content shadow-sm;
 }
 
-/* Shortcut badge buttons - active state mirrors body.hotkeys-hide-badges. */
-body:not(.hotkeys-hide-badges) .color-scheme-switcher__scheme-button[data-key-badges="show"],
-body.hotkeys-hide-badges .color-scheme-switcher__scheme-button[data-key-badges="hide"] {
+/* Shortcut badge buttons - active state mirrors :root.hotkeys-hide-badges. */
+:root:not(.hotkeys-hide-badges) .color-scheme-switcher__scheme-button[data-key-badges="show"],
+:root.hotkeys-hide-badges .color-scheme-switcher__scheme-button[data-key-badges="hide"] {
   @apply bg-primary text-content shadow-sm;
 }
 

data/app/assets/stylesheets/css/fields/stars.css

@@ -1,10 +1,10 @@
 [data-component="avo/fields/common/stars_component"] {
     .star {
-      @apply h-5 w-5 text-gray-300 transition-colors;
+      @apply h-5 w-5 text-tertiary transition-colors;
     }
-  
+
     .star.filled {
-      @apply text-yellow-400;
+      @apply text-warning-foreground;
     }
   
     .rating-group {

data/app/assets/stylesheets/css/fields/tags.css

@@ -8,6 +8,11 @@ tags.tagify {
   --tags-focus-border-color: var(--color-primary);
   --placeholder-color: var(--color-content-secondary);
   --placeholder-color-focus: var(--color-content-secondary);
+  --tag-text-color: var(--color-content);
+  --tag-text-color--edit: var(--color-content);
+  --tag-remove-btn-color: var(--color-content);
+  --tag-bg: var(--color-secondary);
+  --tag-hover: var(--color-tertiary);
 
   padding-block: var(--input-py);
   align-items: center;

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

@@ -1,9 +1,7 @@
 @theme {
   --top-navbar-height: 3rem;
 
-  --navbar-bg: var(--color-avo-neutral-900);
-  --navbar-notch-radius: 1rem;
-  --navbar-notch-color: var(--navbar-bg);
+  --navbar-notch-color: var(--color-navbar-background);
 
   --border-color: var(--color-tertiary);
 }
@@ -66,7 +64,7 @@
 }
 
 .main-content {
-  @apply w-(--content-width) flex flex-col bg-primary py-2 lg:py-4 px-2 lg:px-4 border-s border-(--border-color) ms-1 rounded-se-(--navbar-notch-radius) rounded-ss-(--navbar-notch-radius);
+  @apply w-(--content-width) flex flex-col bg-(--color-main-content-background) py-2 lg:py-4 px-2 lg:px-4 border-s border-(--color-main-content-border) ms-1 rounded-se-(--navbar-notch-radius) rounded-ss-(--navbar-notch-radius);
 
   transition: margin 0.1s ease-in-out, width 0.1s ease-in-out;
   min-height: calc(100dvh - var(--top-navbar-height) - var(--spacing));
@@ -101,7 +99,7 @@
   gap: 0.75rem;
   padding-inline: 0.5rem;
 
-  background-color: var(--navbar-bg);
+  background-color: var(--color-navbar-background);
 
   > * {
     @apply pointer-events-auto;
@@ -127,6 +125,17 @@
     /* border: 1px solid red; */
   }
 
+  /* Hide the arches when --navbar-notch-enabled is false. A style query lets the
+     variable read like a boolean (true/false) instead of exposing raw CSS
+     display keywords. The pseudo-elements query their originating element
+     (.top-navbar), which inherits --navbar-notch-enabled from :root. */
+  @container style(--navbar-notch-enabled: false) {
+    &::before,
+    &::after {
+      display: none;
+    }
+  }
+
   &::before {
     left: 0;
     background: radial-gradient(

data/app/assets/stylesheets/css/variables.css

@@ -73,7 +73,44 @@
   --color-brand-accent: oklch(39.04% 0 89.88);
 
   /* Semantic variables */
+
+  /* Sidebar background. Dedicated knob so installs can recolor the sidebar
+     independently of the neutral palette. Defaults to the page background in
+     light mode and a subtly tinted surface in dark (see the .dark override). */
   --color-sidebar-background: var(--color-background);
+
+  /* Top navbar background. Dedicated knob so installs can recolor the navbar
+     without touching the neutral palette. Defaults to the page background so
+     the navbar blends with the canvas; resolves per-scheme automatically since
+     --color-background is itself redefined in .dark. Override it (here or in
+     `.dark`) to give the navbar its own color. */
+  --color-navbar-background: var(--color-avo-neutral-900);
+
+  /* Background of the main content panel. Dedicated knob so installs can recolor
+     the content surface independently of the primary surface token. Defaults to
+     --color-primary; resolves per-scheme since --color-primary is redefined in
+     .dark. */
+  --color-main-content-background: var(--color-primary);
+
+  /* Border between the sidebar and the main content panel. Dedicated knob so
+     installs can restyle just this seam without touching the shared
+     --border-color (which also draws the sidebar-status borders). Tracks
+     --border-color by default, so it resolves per-scheme automatically. */
+  --color-main-content-border: var(--border-color);
+}
+
+/* Navbar notch knobs live in a plain :root block, not in @theme:
+   --navbar-notch-enabled is read by a style query (Tailwind tree-shakes @theme
+   vars not referenced via var(), so it would be stripped), and we keep
+   --navbar-notch-radius alongside it so both notch knobs sit together. */
+:root {
+  /* Set to `false` to hide the navbar's inverted corner arches (e.g. when the
+     navbar and content share a background). */
+  --navbar-notch-enabled: true;
+
+  /* Radius of the content panel's rounded top corners (and the matching navbar
+     arches that fill them). Set to `0` to flatten the corners entirely. */
+  --navbar-notch-radius: 1rem;
 }
 
 /* Dark mode defaults live in @layer theme — same layer as the @theme block

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

@@ -12,7 +12,7 @@
     <% else %>
       <%= @field.name %>
     <% end %>
-    <% if on_edit? && @field.is_required? %> <span class="text-red-600 ms-1">*</span> <% end %>
+    <% if on_edit? && @field.is_required? %> <span class="text-danger-content ms-1">*</span> <% end %>
     <% if label_help.present? %>
       <div class="field-wrapper__label-help"><%== label_help %></div>
     <% end %>

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

@@ -21,8 +21,8 @@
         ) %>
 
       <% if as_toggle? %>
-        <div class="block w-10 h-6 rounded-full bg-gray-300 peer-checked:bg-green-500"></div>
-        <div class="dot absolute start-1 top-1 bg-white w-4 h-4 rounded-full transition-transform duration-200 transform peer-checked:translate-x-4"></div>
+        <div class="block w-10 h-6 rounded-full bg-tertiary peer-checked:bg-success"></div>
+        <div class="dot absolute start-1 top-1 bg-primary w-4 h-4 rounded-full transition-transform duration-200 transform peer-checked:translate-x-4"></div>
       <% end %>
     <% end %>
   </div>

data/app/components/avo/fields/common/boolean_check_component.rb

@@ -5,17 +5,17 @@ class Avo::Fields::Common::BooleanCheckComponent < Avo::BaseComponent
     true => {
       name: "checked",
       icon: "tabler/outline/circle-check",
-      color: "text-green-600"
+      color: "text-success-content"
     },
     false => {
       name: "unchecked",
       icon: "tabler/outline/circle-x",
-      color: "text-red-600"
+      color: "text-danger-content"
     },
     nil => {
       name: "indeterminate",
       icon: "tabler/outline/circle-minus",
-      color: "text-gray-400"
+      color: "text-content-secondary"
     }
   }.freeze
 

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

@@ -1,7 +1,7 @@
 <div id="<%= dom_id file %>" class="relative min-h-full max-w-full flex-1 flex flex-col justify-between space-y-2">
   <div class="flex flex-col h-full">
     <% if file.representable? && is_image? %>
-      <%= image_tag helpers.main_app.url_for(file), class: "rounded-lg max-w-full self-start #{@extra_classes}", loading: :lazy, width: file.metadata["width"], height: file.metadata["height"] %>
+      <%= image_tag helpers.main_app.url_for(file), class: "rounded-lg max-w-full h-auto self-start object-cover #{@extra_classes}", loading: :lazy, width: file.metadata["width"], height: file.metadata["height"] %>
     <% elsif is_audio? %>
       <%= audio_tag(helpers.main_app.url_for(file), controls: true, preload: false, class: 'w-full') %>
     <% elsif is_video? %>
@@ -9,12 +9,12 @@
     <% else %>
       <%= content_tag file.representable? ? :a : :div, **document_arguments do %>
         <div class="flex flex-col justify-center items-center w-full">
-          <%= helpers.svg "tabler/outline/file-text", class: 'h-10 text-gray-600 mb-2' %>
+          <%= helpers.svg "tabler/outline/file-text", class: 'h-10 text-content-secondary mb-2' %>
         </div>
       <% end %>
     <% end %>
     <% if @field.display_filename %>
-      <span class="text-gray-500 mt-1 text-sm truncate" title="<%= file.filename %>"><%= file.filename %></span>
+      <span class="text-content-secondary mt-1 text-sm truncate" title="<%= file.filename %>"><%= file.filename %></span>
     <% end %>
   </div>
   <div class="flex space-x-2 rtl:space-x-reverse">

data/app/components/avo/fields/common/files/view_type/grid_item_component.rb

@@ -51,9 +51,9 @@ class Avo::Fields::Common::Files::ViewType::GridItemComponent < Avo::BaseCompone
   def document_arguments
     args = {
       class: class_names(
-        "relative flex flex-col justify-evenly items-center px-2 rounded-lg border bg-white border-gray-500 min-h-24",
+        "relative flex flex-col justify-evenly items-center px-2 rounded-lg border bg-primary border-tertiary min-h-24",
         {
-          "hover:bg-gray-100 transition": file.representable?
+          "hover:bg-secondary transition": file.representable?
         }
       )
     }

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

@@ -1,4 +1,4 @@
-<div class=" <%= class_names("flex shrink-0 items-center", "text-red-600": @status == 'failed', "text-green-600": @status == 'success', "text-gray-600": @status == 'neutral') %>">
+<div class=" <%= class_names("flex shrink-0 items-center", "text-danger-content": @status == 'failed', "text-success-content": @status == 'success', "text-content-secondary": @status == 'neutral') %>">
   <% if @status == 'success' %>
     <%= helpers.svg 'tabler/filled/circle-check', class: 'h-4' %>
   <% elsif @status == 'failed' %>

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

@@ -31,7 +31,7 @@
         %>
       <% end %>
       <%= content_tag :button,
-          class: "self-center hidden font-semibold text-xs text-red-600 p-1 cursor-pointer mt-2",
+          class: "self-center hidden font-semibold text-xs text-danger-content p-1 cursor-pointer mt-2",
           id: :reset,
           type: :button,
           data: {

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

@@ -26,7 +26,7 @@
         %>
       <% end %>
       <%= content_tag :button,
-          class: "self-center hidden font-semibold text-xs text-red-600 p-1 cursor-pointer",
+          class: "self-center hidden font-semibold text-xs text-danger-content p-1 cursor-pointer",
           id: :reset,
           type: :button,
           data: {

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

@@ -5,7 +5,7 @@ class Avo::Fields::PreviewField::IndexComponent < Avo::Fields::IndexComponent
     link_to resource_view_path, title: t("avo.view_item", item: @resource.name).humanize do
       helpers.svg(
         "tabler/outline/zoom-scan",
-        class: "block h-6 text-gray-600",
+        class: "block h-6 text-content-secondary",
         data: {
           controller: "preview",
           preview_url_value: helpers.preview_resource_path(resource: @resource, turbo_frame: :preview_modal),

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

@@ -1,4 +1,4 @@
-<%= tag.div class: "flex px-2 py-0.5 rounded-sm bg-gray-100 text-sm text-gray-800 font-normal shrink-0",
+<%= tag.div class: "flex px-2 py-0.5 rounded-sm bg-secondary text-sm text-content font-normal shrink-0",
   data: {
     target: "tag-component",
     tippy: (@title.present? ? "tooltip" : nil),

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

@@ -32,16 +32,20 @@
     <div class="pagination__controls">
       <% if @resource.pagination_type.default? %>
         <div class="pagination__info">
-          <span class="pagination__info-number">
-            <%= "#{formatted_number(@pagy.from)}-#{formatted_number(@pagy.to)}" %>
-          </span>
-          &nbsp; of &nbsp;
-          <% if @pagy.count >= 10_000 %>
-            <span title="<%= formatted_count %>" data-tippy="tooltip">
-              <%= number_to_social(@pagy.count, start_at: 10_000) %>
-            </span>
+          <% if @pagy.pages <= 1 %>
+            <span><%= formatted_count %> <%= t("avo.record", count: @pagy.count) %></span>
           <% else %>
-            <span><%= formatted_count %></span>
+            <span class="pagination__info-number">
+              <%= formatted_number(@pagy.from) %>-<%= formatted_number(@pagy.to) %>
+            </span>
+            &nbsp; of &nbsp;
+            <% if @pagy.count >= 10_000 %>
+              <span title="<%= formatted_count %>" data-tippy="tooltip">
+                <%= number_to_social(@pagy.count, start_at: 10_000) %>
+              </span>
+            <% else %>
+              <span><%= formatted_count %></span>
+            <% end %>
           <% end %>
         </div>
       <% end %>

data/app/controllers/avo/attachments_controller.rb

@@ -7,14 +7,18 @@ module Avo
     before_action :set_record, only: [:destroy, :create]
 
     def create
-      blob = ActiveStorage::Blob.create_and_upload! io: params[:file].to_io, filename: params[:filename]
       association_name = BaseResource.valid_attachment_name(@record, params[:attachment_key])
 
-      # If association name is present attach the blob to it
       if association_name
+        return render_upload_unauthorized unless authorized_to_upload(association_name)
+
+        blob = ActiveStorage::Blob.create_and_upload! io: params[:file].to_io, filename: params[:filename]
         @record.send(association_name).attach blob
-      # If key is present use the blob from the key else raise error
-      elsif params[:key].blank?
+      elsif params[:key].present?
+        return render_upload_unauthorized unless authorized_to_trix_upload?
+
+        blob = ActiveStorage::Blob.create_and_upload! io: params[:file].to_io, filename: params[:filename]
+      else
         raise ActionController::BadRequest.new("Could not find the attachment association for #{params[:attachment_key]} (check the `attachment_key` for this Trix field)")
       end
 
@@ -63,5 +67,17 @@ module Avo
     def authorized_to(action)
       @resource.authorization.authorize_action("#{action}_#{params[:attachment_name]}?", record: @record, raise_exception: false)
     end
+
+    def authorized_to_upload(attachment_name)
+      @resource.authorization.authorize_action("upload_#{attachment_name}?", record: @record, raise_exception: false)
+    end
+
+    def authorized_to_trix_upload?
+      @resource.authorization.authorize_action("update?", record: @record, raise_exception: false)
+    end
+
+    def render_upload_unauthorized
+      render json: {error: "Not authorized"}, status: :forbidden
+    end
   end
 end

data/app/javascript/application.js

@@ -80,19 +80,8 @@ document.addEventListener('turbo:frame-render', (e) => {
 })
 
 document.addEventListener('turbo:load', () => {
-  // Restore badge visibility preference from localStorage before installing hotkeys
-  if (window.Avo?.configuration?.hotkeys?.showKeyBadges !== false) {
-    try {
-      if (localStorage.getItem('avo:hotkeys:hide_badges') === '1') {
-        document.body.classList.add('hotkeys-hide-badges')
-      } else {
-        document.body.classList.remove('hotkeys-hide-badges')
-      }
-    } catch (e) {
-      // localStorage unavailable
-    }
-  }
-
+  // Badge visibility preference is restored pre-paint on <html> in
+  // _color_theme_override.html.erb; the class persists across Turbo navigations.
   if (window.Avo?.configuration?.hotkeys?.enabled !== false) installHotkeys()
   initTippy()
 

data/app/javascript/js/controllers/appearance_controller.js

@@ -327,14 +327,14 @@ export default class extends Controller {
   }
 
   // Mirrors the Shift+K hotkey in global_hotkeys.js. CSS handles the active
-  // state via [data-key-badges] selectors against `body.hotkeys-hide-badges`.
+  // state via [data-key-badges] selectors against `:root.hotkeys-hide-badges`.
   setKeyBadges(event) {
     event.preventDefault()
     const { keyBadges } = event.currentTarget.dataset
     if (keyBadges !== 'show' && keyBadges !== 'hide') return
 
     const hide = keyBadges === 'hide'
-    document.body.classList.toggle('hotkeys-hide-badges', hide)
+    document.documentElement.classList.toggle('hotkeys-hide-badges', hide)
     try {
       if (hide) {
         localStorage.setItem('avo:hotkeys:hide_badges', '1')

data/app/javascript/js/controllers/appearance_preview_controller.js

@@ -0,0 +1,34 @@
+import { Controller } from '@hotwired/stimulus'
+
+// Powers the internal color-token reference page (private#appearance): tab
+// switching between token panels and click-to-copy on swatches, with a shared
+// "Copied!" toast. Replaces the page's former inline <script> + onclick handlers
+// so the page stays CSP-safe (no inline script execution).
+export default class extends Controller {
+  static targets = ['indicator']
+
+  switchTab(event) {
+    event.preventDefault()
+    const button = event.currentTarget
+    const group = button.closest('.tabs')
+    const container = group.parentElement
+
+    container.querySelectorAll('.tab-content').forEach((tab) => tab.classList.remove('active'))
+    group.querySelectorAll('.tab-button').forEach((btn) => btn.classList.remove('active'))
+
+    document.getElementById(button.dataset.tab)?.classList.add('active')
+    button.classList.add('active')
+  }
+
+  copy(event) {
+    const { copyText } = event.currentTarget.dataset
+    if (!copyText) return
+
+    navigator.clipboard.writeText(copyText).then(() => {
+      if (!this.hasIndicatorTarget) return
+
+      this.indicatorTarget.classList.add('show')
+      setTimeout(() => this.indicatorTarget.classList.remove('show'), 2000)
+    })
+  }
+}

data/app/javascript/js/controllers.js

@@ -11,6 +11,7 @@ import CheckboxListFieldController from './controllers/fields/checkbox_list_fiel
 import ClearInputController from './controllers/fields/clear_input_controller'
 import CodeFieldController from './controllers/fields/code_field_controller'
 import AppearanceController from './controllers/appearance_controller'
+import AppearancePreviewController from './controllers/appearance_preview_controller'
 import ConfirmDialogController from './controllers/confirm_dialog_controller'
 import CopyToClipboardController from './controllers/copy_to_clipboard_controller'
 import DashboardCardController from './controllers/dashboard_card_controller'
@@ -77,6 +78,7 @@ application.register('boolean-filter', BooleanFilterController)
 application.register('card-filters', CardFiltersController)
 application.register('clear-input', ClearInputController)
 application.register('appearance', AppearanceController)
+application.register('appearance-preview', AppearancePreviewController)
 application.register('copy-to-clipboard', CopyToClipboardController)
 application.register('dashboard-card', DashboardCardController)
 application.register('date-time-filter', DateTimeFilterController)

data/app/javascript/js/global_hotkeys.js

@@ -97,8 +97,8 @@ const DIRECT_HOTKEYS = [
     match: (e) => e.shiftKey && e.key === 'K'
       && window.Avo?.configuration?.hotkeys?.showKeyBadges !== false,
     handle: () => {
-      document.body.classList.toggle('hotkeys-hide-badges')
-      const hidden = document.body.classList.contains('hotkeys-hide-badges')
+      document.documentElement.classList.toggle('hotkeys-hide-badges')
+      const hidden = document.documentElement.classList.contains('hotkeys-hide-badges')
       try {
         if (hidden) {
           localStorage.setItem('avo:hotkeys:hide_badges', '1')

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

@@ -6,6 +6,19 @@
     var root = document.documentElement;
     var appearance = window.Avo && window.Avo.configuration && window.Avo.configuration.appearance || {};
 
+    // Restore the kbd-badge visibility preference (Shift+K) before paint so a
+    // hidden set of badges never flashes in. It's a per-client preference, so it
+    // lives in localStorage rather than a cookie; the class sits on <html> next
+    // to the theme classes, which also lets it persist across Turbo navigations.
+    var hotkeys = window.Avo && window.Avo.configuration && window.Avo.configuration.hotkeys || {};
+    if (hotkeys.showKeyBadges !== false) {
+      try {
+        if (localStorage.getItem('avo:hotkeys:hide_badges') === '1') {
+          root.classList.add('hotkeys-hide-badges');
+        }
+      } catch (e) {}
+    }
+
     if (appearance.persistence !== 'database') {
       function getCookie(name) {
         var value = '; ' + document.cookie;