studio-engine 0.141.3 → 0.142.0

data/app/components/studio/button_component.rb

@@ -0,0 +1,151 @@
+# frozen_string_literal: true
+
+module Studio
+  # The one button every app renders: a <button>, or an <a> when it has an href.
+  #
+  #   render Studio::ButtonComponent.new(label: "Save")
+  #   render Studio::ButtonComponent.new(label: "Delete", tone: :danger, size: :sm)
+  #   render Studio::ButtonComponent.new(label: "Docs", tone: :quiet, href: "/docs")
+  #   render Studio::ButtonComponent.new(label: "Save", type: "submit", loading: true, busy_label: "Saving…")
+  #   render(Studio::ButtonComponent.new(label: "New")) { |b| b.with_icon { plus_svg } }
+  #
+  # It draws the engine's shipped button language and adds none of its own: each
+  # tone is a btn-* utility in engine.css and each size is btn-sm, bare btn or
+  # btn-lg. An app that retunes --btn-secondary-* or --btn-neutral-* retunes the
+  # component with it.
+  #
+  #   tone        primary    btn-primary    the page's one main action
+  #               secondary  btn-secondary  the success role, or the app's retune
+  #               quiet      btn-neutral    a second action: Cancel, Back, Next
+  #               danger     btn-danger     a destructive action
+  #   size        sm  btn-sm · md  btn · lg  btn-lg
+  #
+  # Its public surface, which a release changes only with a Breaking line in the
+  # changelog (docs/FRONT_END_STANDARD.md, "A primitive's public surface"):
+  #   inputs   label: (or the block's content), tone:, size:, href:, type:,
+  #            disabled:, loading:, busy_label:, id:, title:, data:, aria:,
+  #            and the icon slot (with_icon)
+  #   classes  .btn plus the tone's and the size's btn-* classes
+  #   aria-*   aria-busy="true" while loading; aria-disabled="true" on a
+  #            disabled link
+  #
+  # LOADING is the engine's aria-busy contract (engine-motion.css, "Pending";
+  # Studio::LoaderHelper#studio_loader_pending), not a class of its own. A
+  # loading button is aria-busy and disabled, so it is not clickable and keeps
+  # its full colour (engine.css, the .btn[aria-busy] rule). A submit button
+  # always carries the pending loader, hidden, so a Turbo form that marks itself
+  # aria-busy shows it with no script here. The icon is the idle content and
+  # gives way to the loader; busy_label: words replace the label while busy.
+  # A link cannot be busy, so loading: with href: is refused.
+  #
+  # Every class string is written out whole: Tailwind finds utilities by scanning
+  # source text, and engine.css adds app/components to every host's scan.
+  class ButtonComponent < ViewComponent::Base
+    # studio_loader_pending, the loader the aria-busy contract shows (the plain
+    # spinner at 16px, in the label's colour). Included,
+    # not reached through helpers, so the button works in a host whose
+    # controllers never mixed the engine's helpers in.
+    include Studio::LoaderHelper
+
+    strip_trailing_whitespace
+
+    TONES = {
+      primary: "btn-primary",
+      secondary: "btn-secondary",
+      quiet: "btn-neutral",
+      danger: "btn-danger"
+    }.freeze
+
+    SIZES = {
+      sm: "btn-sm",
+      md: nil,
+      lg: "btn-lg"
+    }.freeze
+
+    TYPES = %w[button submit reset].freeze
+
+    # The gap between icon, loader and label; .btn is already inline-flex.
+    LAYOUT = "gap-2"
+
+    # A link has no disabled state of its own, so a disabled link draws it.
+    DISABLED_LINK = "opacity-50 cursor-not-allowed"
+
+    renders_one :icon
+
+    attr_reader :href, :busy_label
+
+    def initialize(label: nil, tone: :primary, size: :md, href: nil, type: "button", disabled: false,
+                   loading: false, busy_label: nil, id: nil, title: nil, data: {}, aria: {})
+      super()
+      @tone = fetch_choice(TONES, tone, "tone")
+      @size = fetch_choice(SIZES, size, "size")
+      raise ArgumentError, "unknown type #{type.inspect}; expected one of #{TYPES.join(', ')}" unless TYPES.include?(type.to_s)
+      raise ArgumentError, "Studio::ButtonComponent cannot be loading with an href: a link is never busy" if loading && href
+
+      @label = label
+      @href = href
+      @type = type.to_s
+      @disabled = disabled ? true : false
+      @loading = loading ? true : false
+      @busy_label = busy_label
+      @id = id
+      @title = title
+      @data = data
+      @aria = aria
+    end
+
+    def before_render
+      raise ArgumentError, "Studio::ButtonComponent needs a label: or a block" if text.blank?
+    end
+
+    def link? = href.present?
+
+    def loading? = @loading
+
+    def disabled? = @disabled || @loading
+
+    def text
+      content.presence || @label
+    end
+
+    def css_classes
+      parts = ["btn", TONES.fetch(@tone), SIZES.fetch(@size), LAYOUT]
+      parts << DISABLED_LINK if link? && @disabled
+      parts.compact.join(" ")
+    end
+
+    # The pending loader rides along on a loading button and on every submit
+    # button, so the aria-busy contract can show it.
+    def pending_loader?
+      !link? && (loading? || @type == "submit")
+    end
+
+    def element_attributes
+      attrs = { class: css_classes, id: @id, title: @title, data: @data.presence }
+      aria = @aria.dup
+      if link?
+        if @disabled
+          aria[:disabled] = "true"
+          attrs[:role] = "link"
+        else
+          attrs[:href] = href
+        end
+      else
+        attrs[:type] = @type
+        attrs[:disabled] = true if disabled?
+        aria[:busy] = "true" if loading?
+      end
+      attrs[:aria] = aria.presence
+      attrs.compact
+    end
+
+    private
+
+    def fetch_choice(table, value, name)
+      key = value.to_s.to_sym
+      return key if table.key?(key)
+
+      raise ArgumentError, "unknown #{name} #{value.inspect}; expected one of #{table.keys.join(', ')}"
+    end
+  end
+end

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

@@ -0,0 +1,12 @@
+<div class="<%= root_classes %>" data-empty-state>
+  <% if icon? %>
+    <div class="<%= Studio::EmptyStateComponent::ICON %>" aria-hidden="true"><%= icon %></div>
+  <% end %>
+  <p class="<%= Studio::EmptyStateComponent::MESSAGE %>"><%= message %></p>
+  <% if detail.present? %>
+    <p class="<%= Studio::EmptyStateComponent::DETAIL %>"><%= detail %></p>
+  <% end %>
+  <% if action? %>
+    <div class="<%= Studio::EmptyStateComponent::ACTION %>"><%= action %></div>
+  <% end %>
+</div>

data/app/components/studio/empty_state_component.rb

@@ -0,0 +1,64 @@
+# frozen_string_literal: true
+
+module Studio
+  # What a list, a table or a page says when it has nothing to show: an optional
+  # icon, the message, an optional line of detail, and at most one action.
+  #
+  #   render Studio::EmptyStateComponent.new(message: "No errors logged yet.")
+  #   render(Studio::EmptyStateComponent.new(detail: "Invite someone to start.")) do |empty|
+  #     empty.with_icon { inbox_svg }
+  #     empty.with_action(label: "Invite", href: new_invite_path)
+  #     "No members yet."
+  #   end
+  #
+  # The action is a Studio::ButtonComponent (with_action takes its keywords), so an
+  # empty state cannot grow a hand-made button. One action only: an empty state
+  # points at the one next step.
+  #
+  # Its public surface, which a release changes only with a Breaking line in the
+  # changelog (docs/FRONT_END_STANDARD.md, "A primitive's public surface"):
+  #   inputs   message: (or the block's content), detail:, framed:, and the
+  #            icon and action slots (with_icon, with_action)
+  #   classes  .empty-state when framed (the default)
+  #   data-*   data-empty-state on the root
+  #
+  # framed: false drops the .empty-state card for a place that already has a
+  # frame: the empty row of Studio::TableComponent.
+  #
+  # Type is the scale (README "Type scale"): the message at type-body, the detail
+  # at type-fine.
+  class EmptyStateComponent < ViewComponent::Base
+    strip_trailing_whitespace
+
+    FRAMED = "empty-state"
+    BARE = "px-4 py-10 text-center"
+    MESSAGE = "type-body text-secondary"
+    DETAIL = "type-fine text-muted mt-1"
+    ICON = "mb-3 inline-flex text-muted"
+    ACTION = "mt-4"
+
+    renders_one :icon
+    renders_one :action, Studio::ButtonComponent
+
+    attr_reader :detail
+
+    def initialize(message: nil, detail: nil, framed: true)
+      super()
+      @message = message
+      @detail = detail
+      @framed = framed ? true : false
+    end
+
+    def before_render
+      raise ArgumentError, "Studio::EmptyStateComponent needs a message: or a block" if message.blank?
+    end
+
+    def message
+      content.presence || @message
+    end
+
+    def root_classes
+      @framed ? FRAMED : BARE
+    end
+  end
+end

data/app/components/studio/table_component.html.erb

@@ -0,0 +1,32 @@
+<div class="<%= Studio::TableComponent::WRAPPER %>" data-table>
+  <%= tag.table(**table_attributes) do %>
+    <thead class="<%= Studio::TableComponent::HEAD %>">
+      <tr>
+        <% columns.each do |column| %>
+          <%= tag.th(**header_attributes(column)) do %>
+            <% if column.sortable %>
+              <a href="<%= sort_href(column) %>" class="<%= Studio::TableComponent::SORT_LINK %>"><span><%= column.label %></span><% if sorted?(column) %><span class="<%= Studio::TableComponent::SORT_ARROW %>" aria-hidden="true"><%= arrow %></span><% end %></a>
+            <% else %>
+              <%= column.label %>
+            <% end %>
+          <% end %>
+        <% end %>
+      </tr>
+    </thead>
+    <tbody class="<%= Studio::TableComponent::BODY %>">
+      <% if rows.any? %>
+        <% rows.each do |row| %>
+          <tr class="<%= Studio::TableComponent::ROW %>">
+            <% columns.each do |column| %>
+              <td class="<%= cell_classes(column) %>"><%= cell_value(column, row) %></td>
+            <% end %>
+          </tr>
+        <% end %>
+      <% else %>
+        <tr data-table-empty>
+          <td colspan="<%= columns.size %>"><%= render Studio::EmptyStateComponent.new(message: empty, framed: false) %></td>
+        </tr>
+      <% end %>
+    </tbody>
+  <% end %>
+</div>

data/app/components/studio/table_component.rb

@@ -0,0 +1,152 @@
+# frozen_string_literal: true
+
+module Studio
+  # A data table: columns, rows, a sort hook in plain links, and an empty row.
+  #
+  #   render Studio::TableComponent.new(
+  #     id: "users-table",
+  #     rows: @users,
+  #     columns: [
+  #       { key: :name, label: "User", sortable: true },
+  #       { key: :role, label: "Role", cell: ->(user) { render Studio::BadgeComponent.new(text: user.role) } },
+  #       { key: :created_at, label: "Joined", align: :right, cell: ->(user) { l(user.created_at.to_date) } }
+  #     ],
+  #     sort: params[:sort], direction: params[:direction],
+  #     empty: "No users yet."
+  #   )
+  #
+  # A column is a Hash: key: (required), label: (required), sortable: (false),
+  # align: (:left, :center or :right) and cell: (a callable that takes the row and
+  # returns its cell; without one the cell is row[key] for a Hash, or
+  # row.public_send(key)). A cell's value is escaped unless it is html_safe, so a
+  # cell may render a component.
+  #
+  # SORTING is links, no script. A sortable header is a link to the current URL
+  # with ?sort=<key>&direction=<asc|desc> (the page param dropped), the
+  # team_sort_url pattern from Studio::AdminModels; the column already sorted asc
+  # links to desc. The controller sorts. sort_url: takes a callable (key,
+  # direction) for an app with its own URL shape. The sorted header carries
+  # aria-sort and the arrow.
+  #
+  # PHONE LAYOUT is a horizontal scroll, as every engine table does today
+  # (admin_model_table, the emails index): the table keeps its columns and its
+  # wrapper scrolls. min_width: sets the width under which it scrolls.
+  #
+  # Its public surface, which a release changes only with a Breaking line in the
+  # changelog (docs/FRONT_END_STANDARD.md, "A primitive's public surface"):
+  #   inputs   rows:, columns:, id:, sort:, direction:, sort_url:, sort_param:,
+  #            direction_param:, empty:, min_width:, sticky_header:
+  #   data-*   data-table on the wrapper; data-table-sort-key on a sortable
+  #            header; data-table-empty on the empty row; data-sticky-table-header
+  #            on the table when sticky_header: (studio/sticky_table_header)
+  #   aria-*   aria-sort on the sorted header
+  #
+  # Every class string is written out whole: Tailwind finds utilities by scanning
+  # source text, and engine.css adds app/components to every host's scan.
+  class TableComponent < ViewComponent::Base
+    strip_trailing_whitespace
+
+    WRAPPER = "overflow-x-auto"
+    TABLE = "w-full type-body"
+    HEAD = "bg-surface-alt text-muted type-fine uppercase tracking-wide"
+    BODY = "divide-y divide-subtle"
+    ROW = "hover:bg-surface-alt/60 transition"
+    HEADER_CELL = "px-4 py-3 font-semibold"
+    CELL = "px-4 py-3 text-body"
+    SORT_LINK = "inline-flex items-center gap-1 rounded-sm hover:text-heading focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"
+    SORT_ARROW = "text-primary-ink"
+
+    ALIGN = {
+      left: "text-left",
+      center: "text-center",
+      right: "text-right"
+    }.freeze
+
+    DIRECTIONS = %w[asc desc].freeze
+    ARIA_SORT = { "asc" => "ascending", "desc" => "descending" }.freeze
+    ARROWS = { "asc" => "↑", "desc" => "↓" }.freeze
+
+    Column = Struct.new(:key, :label, :sortable, :align, :cell, keyword_init: true)
+
+    attr_reader :rows, :columns, :empty
+
+    def initialize(rows:, columns:, id: nil, sort: nil, direction: nil, sort_url: nil, sort_param: "sort",
+                   direction_param: "direction", empty: "Nothing here yet.", min_width: nil, sticky_header: false)
+      super()
+      raise ArgumentError, "Studio::TableComponent needs at least one column" if columns.blank?
+
+      @rows = rows.to_a
+      @columns = columns.map { |column| build_column(column) }
+      @id = id
+      @sort = sort.presence&.to_s
+      @direction = DIRECTIONS.include?(direction.to_s) ? direction.to_s : "asc"
+      @sort_url = sort_url
+      @sort_param = sort_param.to_s
+      @direction_param = direction_param.to_s
+      @empty = empty
+      @min_width = min_width
+      @sticky_header = sticky_header ? true : false
+    end
+
+    def table_attributes
+      attrs = { class: TABLE, id: @id }
+      attrs[:style] = "min-width: #{@min_width.to_i}px" if @min_width
+      attrs[:data] = { sticky_table_header: "" } if @sticky_header
+      attrs.compact
+    end
+
+    def header_attributes(column)
+      attrs = { scope: "col", class: [HEADER_CELL, ALIGN.fetch(column.align)].join(" ") }
+      if column.sortable
+        attrs[:data] = { table_sort_key: column.key }
+        attrs[:aria] = { sort: ARIA_SORT.fetch(@direction) } if sorted?(column)
+      end
+      attrs
+    end
+
+    def cell_classes(column)
+      [CELL, ALIGN.fetch(column.align)].join(" ")
+    end
+
+    def sorted?(column) = @sort == column.key
+
+    def arrow = ARROWS.fetch(@direction)
+
+    # The next direction for a header link: the sorted column flips, any other
+    # starts ascending.
+    def next_direction(column)
+      sorted?(column) && @direction == "asc" ? "desc" : "asc"
+    end
+
+    def sort_href(column)
+      direction = next_direction(column)
+      return @sort_url.call(column.key, direction) if @sort_url
+
+      query = request.query_parameters.merge(@sort_param => column.key, @direction_param => direction)
+      query.delete("page")
+      "#{request.path}?#{query.to_query}"
+    end
+
+    def cell_value(column, row)
+      return column.cell.call(row) if column.cell
+      return row[column.key.to_sym] || row[column.key] if row.is_a?(Hash)
+
+      row.public_send(column.key)
+    end
+
+    private
+
+    def build_column(column)
+      column = column.to_h.symbolize_keys
+      unknown = column.keys - Column.members
+      raise ArgumentError, "unknown column key #{unknown.first.inspect}; expected #{Column.members.join(', ')}" if unknown.any?
+      raise ArgumentError, "Studio::TableComponent: every column takes key: and label:" if column[:key].blank? || column[:label].blank?
+
+      align = (column[:align] || :left).to_sym
+      raise ArgumentError, "unknown align #{align.inspect}; expected one of #{ALIGN.keys.join(', ')}" unless ALIGN.key?(align)
+
+      Column.new(key: column[:key].to_s, label: column[:label], sortable: column[:sortable] ? true : false,
+                 align: align, cell: column[:cell])
+    end
+  end
+end

data/app/controllers/studio/modals_controller.rb

@@ -0,0 +1,48 @@
+# frozen_string_literal: true
+
+module Studio
+  # GET /_studio/modals/:id: one on-demand modal's content partial, for
+  # studio/modal_host to insert into the shared host the first time the modal
+  # opens (Studio.modals, README "Modal host", "Modals on demand").
+  #
+  # THE ALLOWLIST IS THE REGISTRY. Only an id Studio.modals names renders; any
+  # other id answers 404, so the endpoint can never be used to render an
+  # arbitrary partial by name.
+  #
+  # AUTH. The host's require_authentication is skipped so an :any modal (the
+  # sign-in card) serves a signed-out browser. A :user modal answers a bare
+  # 401 to a signed-out request rather than the engine's HTML redirect to
+  # /login: the caller is fetch(), and a followed redirect would hand it the
+  # login PAGE to insert as a modal. Host filters that still run (a revoked
+  # session token, an onboarding redirect) answer as they do for any request;
+  # the X-Studio-Modal header below is how the browser tells a real fragment
+  # from whatever such a filter sent instead.
+  #
+  # CACHING. The fragment can carry the viewer's data and a form's CSRF token,
+  # so it is private: Rails' default for a dynamic GET (max-age=0, private,
+  # must-revalidate, with an ETag) is kept, and Vary: Cookie is added so no
+  # cache answers one session with another's fragment. The browser holds the
+  # fragment for the page's lifetime anyway (studio/modal_host).
+  class ModalsController < ::ApplicationController
+    skip_before_action :require_authentication, raise: false
+
+    def show
+      entry = Studio.modals[params[:id]]
+      return head(:not_found) unless entry
+      return head(:unauthorized) if entry.user_only? && !studio_modal_viewer_signed_in?
+
+      @studio_modal = entry
+      render "studio/modals/remote", layout: false, formats: [:html]
+      # Stamped AFTER the render, so a partial that raises leaves no header on
+      # the host's error page for the browser to mistake for a fragment.
+      response.headers["X-Studio-Modal"] = entry.id
+      response.headers["Vary"] = [response.headers["Vary"], "Cookie"].compact.join(", ")
+    end
+
+    private
+
+    def studio_modal_viewer_signed_in?
+      respond_to?(:logged_in?, true) && logged_in?
+    end
+  end
+end

data/app/javascript/studio/carousel.js

@@ -232,6 +232,58 @@ export function seamJump(virtual, total) {
   return virtual < 0 || virtual >= total ? wrapIndex(virtual, total) : null
 }
 
+// -- the row's rest ----------------------------------------------------------------
+
+// No scroll for this long is the row's rest, where the browser has no scrollend event.
+export const SETTLE_MS = 150
+// Where the browser has scrollend, this long after the last scroll event is the
+// backstop: a scroll that scrollend never follows still rests. Chrome can send one
+// scroll event and no scrollend, as when the page shortens and the browser pulls the
+// scroll back; a looping row left on a clone then never jumped home and never fired
+// its change event. Three quiet spells, so a slow frame mid-glide (260ms at 8x CPU,
+// as studio/in_page_links measured) does not end the glide: settle() jumps only from
+// a clone's own stop, so a rest read early does nothing.
+export const REST_CAP_MS = SETTLE_MS * 3
+
+// Calls onRest each time the track rests: on scrollend where the browser has it, with
+// REST_CAP_MS after each scroll event as the backstop, and SETTLE_MS after the last
+// scroll event where it does not. After an aim (aimed(): the controller's scrollTo),
+// scrollend counts only once a scroll event has come since that aim: Chrome can send
+// the end of the scroll the aim replaced before the new scroll's first frame. One
+// rest per scroll: a scrollend after the backstop fired, or the backstop after
+// scrollend, finds nothing to end. stop() removes the listeners and the timer.
+export function watchRest(track, onRest, { scrollend = false, timers = globalThis } = {}) {
+  let timer = null
+  let scrolled = false
+  let pending = false
+  const rest = () => {
+    timers.clearTimeout(timer)
+    timer = null
+    if (!pending) return
+    pending = false
+    onRest()
+  }
+  const onScroll = () => {
+    scrolled = true
+    pending = true
+    timers.clearTimeout(timer)
+    timer = timers.setTimeout(rest, scrollend ? REST_CAP_MS : SETTLE_MS)
+  }
+  const onScrollend = () => { if (scrolled) rest() }
+  track.addEventListener("scroll", onScroll, { passive: true })
+  if (scrollend) track.addEventListener("scrollend", onScrollend, { passive: true })
+  return {
+    aimed() { scrolled = false },
+    stop() {
+      timers.clearTimeout(timer)
+      timer = null
+      pending = false
+      track.removeEventListener("scroll", onScroll)
+      if (scrollend) track.removeEventListener("scrollend", onScrollend)
+    }
+  }
+}
+
 // The attributes a clone drops: ids and names (a clone must not answer a #fragment or
 // join a form), test hooks, and Stimulus wiring (a clone runs no controller and is
 // no one's target), and the carousel's own marks.

data/app/javascript/studio/controllers/carousel_controller.js

@@ -30,8 +30,8 @@
 // continuous. connect() copies the last slides before the first and the first slides
 // after the last (cloneLayout), so the space beside either end shows the slides
 // round the seam. Next at the last slide glides on to the clone of the first;
-// once the row rests there (scrollend, or a short quiet spell where the browser has
-// no scrollend) it jumps, with no glide and no transition, to the real first slide,
+// once the row rests there (studio/carousel watchRest: scrollend with a backstop, or
+// a short quiet spell where the browser has no scrollend) it jumps, with no glide and no transition, to the real first slide,
 // whose neighbours look the same. Previous at the first does the same backwards, and
 // a swipe that rests on a clone too. Under reduced motion the row goes straight to
 // the real slide. Neither arrow is ever aria-disabled.
@@ -77,7 +77,7 @@ import {
   CHANGE_EVENT, CLONE_STRIP, TOLERANCE, autoplayRunning, changeDetail, clickedSlide, autoplaySeconds, autoplayStop, cascadeJumps, cascadeReach, cascadeSlot,
   cascadeStep, cascadeSteps, cascadeTarget, centerStops, cloneCount, cloneLayout, dragSteps,
   currentStop, hiddenEnds, idleDelay, initialReasons, keyAction, loopPositionText, loopStop, nearestVirtual, ownsKey,
-  perPage, positionText, seamJump, startStop, stops, targetStop, toggleLabel, withReason, wrapIndex
+  perPage, positionText, seamJump, startStop, stops, targetStop, toggleLabel, watchRest, withReason, wrapIndex
 } from "studio/carousel"
 
 const REDUCE = "(prefers-reduced-motion: reduce)"
@@ -97,9 +97,8 @@ export default class extends Controller {
       this.connectCascade()
       return
     }
-    this.scrollEnd = "onscrollend" in window
     this.trackTarget.addEventListener("scroll", this.schedule, { passive: true })
-    if (this.scrollEnd) this.trackTarget.addEventListener("scrollend", this.settle, { passive: true })
+    this.rest = watchRest(this.trackTarget, this.settle, { scrollend: "onscrollend" in window })
     this.trackTarget.addEventListener("click", this.clickClone)
     if (typeof ResizeObserver === "function") {
       this.observer = new ResizeObserver(this.schedule)
@@ -331,13 +330,12 @@ export default class extends Controller {
   disconnect() {
     if (this.cascade) this.disconnectCascade()
     this.trackTarget.removeEventListener("scroll", this.schedule)
-    this.trackTarget.removeEventListener("scrollend", this.settle)
+    this.rest?.stop()
+    this.rest = null
     this.trackTarget.removeEventListener("click", this.clickClone)
     this.observer?.disconnect()
     if (this.frame) cancelAnimationFrame(this.frame)
     this.frame = null
-    clearTimeout(this.settleTimer)
-    this.settleTimer = null
     this.stopAutoplay()
     this.removeClones()
   }
@@ -389,7 +387,6 @@ export default class extends Controller {
   // The row came to rest. On a clone it jumps to the real slide the clone copies,
   // at the same place in the row, so nothing on screen changes.
   settle() {
-    this.settleTimer = null
     if (!this.cloned) return
     this.sync()
     const real = seamJump(this.virtual, this.positions.length)
@@ -524,10 +521,6 @@ export default class extends Controller {
   }
 
   schedule() {
-    if (this.cloned && !this.scrollEnd) {
-      clearTimeout(this.settleTimer)
-      this.settleTimer = setTimeout(this.settle, 150)
-    }
     if (this.frame) return
     this.frame = requestAnimationFrame(() => {
       this.frame = null
@@ -660,6 +653,7 @@ export default class extends Controller {
       const real = wrapIndex(index, total)
       const left = reduce ? this.positions[real] : this.full[index + this.cloned]
       if (left === undefined) return
+      this.rest?.aimed()
       this.trackTarget.scrollTo({ left, behavior: reduce ? "auto" : "smooth" })
       if (announce && this.hasStatusTarget) this.statusTarget.textContent = loopPositionText(real, this.page, total)
       return