studio-engine 0.137.0 → 0.138.0

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

@@ -49,9 +49,22 @@
 // The pause button (WCAG 2.2.2) stops it until pressed again; under reduced motion
 // the row starts stopped. A move by autoplay writes nothing to the status line
 // (APG: a rotating carousel does not announce). Without loop it stops at the end.
+//
+// A CASCADE row (class carousel-cascade) does not scroll. Its slides share one grid
+// cell and each wears data-cascade-step, its place from the open slide (cascadeStep,
+// cascadeSlot); engine.css lays the 3D stack out from it and transitions it. The
+// open slide carries data-current. Every slide is a stop, so the arrows, dots, keys
+// and autoplay move it as they move a spotlight, through the same move() and
+// scrollToStop(). A swipe or a drag (pointer events, past DRAG_THRESHOLD) moves it
+// too; a click on a side slide brings that slide to the front and follows no link,
+// and keyboard focus landing in a side slide does the same, so Tab walks the set. A
+// looping cascade takes no clones: the steps wrap round the set, and a slide that
+// crosses the stack round the seam (cascadeJumps) takes no glide. A focused slide
+// that leaves the window hands focus to the track, so the keys keep working.
 import { Controller } from "@hotwired/stimulus"
 import {
-  CLONE_STRIP, TOLERANCE, autoplayRunning, autoplaySeconds, autoplayStop, centerStops, cloneCount, cloneLayout,
+  CLONE_STRIP, TOLERANCE, autoplayRunning, 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
 } from "studio/carousel"
@@ -66,8 +79,13 @@ export default class extends Controller {
     this.settle = this.settle.bind(this)
     this.clickClone = this.clickClone.bind(this)
     this.loop = this.element.hasAttribute("data-carousel-loop")
+    this.cascade = this.element.classList.contains("carousel-cascade")
     this.cloned = 0
     this.removeClones()
+    if (this.cascade) {
+      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 })
@@ -83,6 +101,179 @@ export default class extends Controller {
     this.startAutoplay()
   }
 
+  // -- the cascade --------------------------------------------------------------
+
+  connectCascade() {
+    const slides = this.slideTargets
+    const marked = slides.findIndex((slide) => slide.hasAttribute("data-current"))
+    this.active = marked >= 0 ? marked : 0
+    // A #fragment inside a slide opens on that slide.
+    const hash = window.location?.hash
+    if (hash && hash.length > 1) {
+      let target = null
+      try { target = document.getElementById(decodeURIComponent(hash.slice(1))) } catch { target = null }
+      const index = target ? slides.findIndex((slide) => slide.contains(target)) : -1
+      if (index >= 0) this.active = index
+    }
+    this.cascadeListeners = [
+      ["pointerdown", (event) => this.dragStart(event)],
+      ["pointermove", (event) => this.dragMove(event)],
+      ["pointerup", (event) => this.dragEnd(event)],
+      ["pointercancel", () => this.dragCancel()],
+      ["click", (event) => this.clickSide(event), true],
+      ["focusin", (event) => this.focusSide(event)],
+      ["dragstart", (event) => event.preventDefault()]
+    ]
+    this.cascadeListeners.forEach(([type, handler, capture]) => this.trackTarget.addEventListener(type, handler, { capture: !!capture }))
+    if (typeof ResizeObserver === "function") {
+      this.observer = new ResizeObserver(this.schedule)
+      this.observer.observe(this.trackTarget)
+    }
+    this.element.setAttribute("data-carousel-ready", "")
+    this.sync()
+    this.startAutoplay()
+  }
+
+  disconnectCascade() {
+    this.cascadeListeners?.forEach(([type, handler, capture]) => this.trackTarget.removeEventListener(type, handler, { capture: !!capture }))
+    this.cascadeListeners = null
+    this.dragCancel()
+  }
+
+  // The reach CSS lays out: 1 on a three-slide cascade or a narrow region, else 2.
+  reach() {
+    const css = parseFloat(getComputedStyle(this.trackTarget).getPropertyValue("--carousel-cascade-reach"))
+    return css > 0 ? css : cascadeReach(this.element.dataset.carouselVisible)
+  }
+
+  syncCascade() {
+    const total = this.slideTargets.length
+    this.page = 1
+    this.positions = Array.from({ length: Math.max(1, total) }, (_, index) => index)
+    this.full = null
+    this.active = Math.min(Math.max(0, this.active || 0), Math.max(0, total - 1))
+    this.current = this.virtual = this.active
+    this.element.toggleAttribute("data-carousel-static", total < 2)
+    const wraps = this.loop && total > 1
+    if (this.hasPrevTarget) this.prevTarget.setAttribute("aria-disabled", String(!wraps && this.active === 0))
+    if (this.hasNextTarget) this.nextTarget.setAttribute("aria-disabled", String(!wraps && this.active >= total - 1))
+    const steps = cascadeSteps(total, this.active, this.loop)
+    const jumps = this.laid ? cascadeJumps(this.laid, steps, this.active) : steps.map(() => false)
+    this.slideTargets.forEach((slide, index) => {
+      slide.setAttribute("data-cascade-step", cascadeSlot(steps[index]))
+      slide.toggleAttribute("data-cascade-jump", jumps[index])
+      slide.toggleAttribute("data-current", index === this.active)
+    })
+    this.laid = steps
+    this.dotTargets.forEach((dot, index) => {
+      dot.hidden = index >= total
+      if (index === this.active) dot.setAttribute("aria-current", "true")
+      else dot.removeAttribute("aria-current")
+    })
+  }
+
+  // Brings slide `index` to the front. A focused slide that leaves the window hands
+  // focus to the track (a hidden slide cannot hold it), so the keys keep working.
+  activate(index) {
+    const total = this.slideTargets.length
+    if (!(total > 0)) return
+    this.active = Math.min(total - 1, Math.max(0, index))
+    this.sync()
+    const focused = this.slideTargets.findIndex((slide) => slide.contains(document.activeElement))
+    if (focused >= 0 && Math.abs(cascadeStep(focused, this.active, total, this.loop)) > this.reach()) {
+      this.trackTarget.focus({ preventScroll: true })
+    }
+  }
+
+  slideAt(target) {
+    const slide = target?.closest?.(".carousel-slide")
+    return slide && this.trackTarget.contains(slide) ? this.slideTargets.indexOf(slide) : -1
+  }
+
+  // A press on a side slide: the click that follows brings it to the front and opens
+  // nothing. The slide is read at the press, so a link whose focus already moved the
+  // stack still counts as a side slide's.
+  clickSide(event) {
+    if (this.dragged) {
+      this.dragged = false
+      event.preventDefault()
+      event.stopPropagation()
+      return
+    }
+    const index = this.pressed ?? this.slideAt(event.target)
+    this.pressed = null
+    if (index < 0 || index === this.active) return
+    event.preventDefault()
+    event.stopPropagation()
+    this.interacted()
+    this.scrollToStop(index)
+  }
+
+  // Keyboard focus in a side slide brings it to the front, so Tab walks the set. A
+  // mouse press focuses without :focus-visible and leaves the move to its click.
+  focusSide(event) {
+    const index = this.slideAt(event.target)
+    if (index < 0 || index === this.active) return
+    let keyboard = true
+    try { keyboard = event.target.matches(":focus-visible") } catch { keyboard = true }
+    if (!keyboard) return
+    this.interacted()
+    this.scrollToStop(index, { announce: false })
+  }
+
+  dragStart(event) {
+    if (event.button > 0 || this.drag) return
+    const index = this.slideAt(event.target)
+    this.pressed = index >= 0 && index !== this.active ? index : null
+    this.dragged = false
+    this.drag = { id: event.pointerId, x: event.clientX, y: event.clientY, live: false }
+  }
+
+  dragMove(event) {
+    const drag = this.drag
+    if (!drag || event.pointerId !== drag.id) return
+    const dx = event.clientX - drag.x
+    if (!drag.live) {
+      if (Math.abs(dx) < 8 || Math.abs(dx) < Math.abs(event.clientY - drag.y)) return
+      drag.live = true
+      // Captured only once it is a drag, so a plain click still lands on its link.
+      try { this.trackTarget.setPointerCapture(drag.id) } catch { /* the pointer is gone */ }
+      this.element.setAttribute("data-carousel-dragging", "")
+    }
+    this.trackTarget.style.setProperty("--carousel-cascade-drag", `${Math.round(dx * 0.35)}px`)
+  }
+
+  dragEnd(event) {
+    const drag = this.drag
+    if (!drag || event.pointerId !== drag.id) return
+    const live = drag.live
+    this.dragCancel()
+    if (!live) return
+    const by = dragSteps(event.clientX - drag.x, this.stepWidth())
+    this.pressed = null
+    this.dragged = true
+    // The click a drag ends in is swallowed by clickSide; a touch drag fires none.
+    setTimeout(() => { this.dragged = false }, 0)
+    if (by === 0) return
+    this.interacted()
+    const total = this.slideTargets.length
+    const to = cascadeTarget(this.active, by, total, this.loop)
+    if (to !== this.active) this.scrollToStop(to)
+  }
+
+  dragCancel() {
+    this.drag = null
+    this.element?.removeAttribute("data-carousel-dragging")
+    this.trackTarget?.style.removeProperty("--carousel-cascade-drag")
+  }
+
+  // The width a drag crosses per step: the open slide's, or a fifth of the row.
+  stepWidth() {
+    const open = this.slideTargets[this.active]
+    const width = open ? open.getBoundingClientRect().width : 0
+    return width > 0 ? width * 0.6 : this.trackTarget.clientWidth / 5
+  }
+
   openAtStart() {
     const start = Number(this.element.dataset.carouselStart)
     if (!(start > 0)) return
@@ -101,6 +292,7 @@ export default class extends Controller {
   }
 
   disconnect() {
+    if (this.cascade) this.disconnectCascade()
     this.trackTarget.removeEventListener("scroll", this.schedule)
     this.trackTarget.removeEventListener("scrollend", this.settle)
     this.trackTarget.removeEventListener("click", this.clickClone)
@@ -332,6 +524,10 @@ export default class extends Controller {
   }
 
   sync() {
+    if (this.cascade) {
+      this.syncCascade()
+      return
+    }
     const track = this.trackTarget
     const { positions, page } = this.measure()
     const ends = hiddenEnds(track)
@@ -412,6 +608,12 @@ export default class extends Controller {
   // row the index is virtual: a clone's place glides there and settle() jumps home,
   // but under reduced motion the row goes straight to the real slide.
   scrollToStop(index, { announce = true } = {}) {
+    if (this.cascade) {
+      if (!(index >= 0 && index < this.slideTargets.length)) return
+      this.activate(index)
+      if (announce && this.hasStatusTarget) this.statusTarget.textContent = positionText(index, 1, this.slideTargets.length)
+      return
+    }
     const reduce = window.matchMedia?.(REDUCE).matches
     if (this.cloned) {
       const total = this.positions.length

data/app/models/concerns/studio/account.rb

@@ -0,0 +1,143 @@
+# frozen_string_literal: true
+
+module Studio
+  # The engine-owned account contract (database audit 2026-11-07, section 3,
+  # "Recommended primitive: Studio::Account"). One copy of the rules nine apps
+  # typed by hand:
+  #
+  #   class User < ApplicationRecord
+  #     include Studio::Account
+  #     studio_roles %w[viewer admin]   # optional: narrow, never widen
+  #
+  #     def name_slug = name.to_s.parameterize   # Sluggable's, the host's own
+  #   end
+  #
+  # It gives the host:
+  #
+  #   * `admin?` (role "admin") and a default `display_name`;
+  #   * `normalizes :email`: stripped, downcased, and a blank address stored as
+  #     NULL, so "" and " " never collide on the unique index or match a lookup;
+  #   * `validates :role, inclusion:` against Studio::Roles, or the host's
+  #     narrower list, with the default role filled on create;
+  #   * Sluggable and Studio::OmniauthUser (the engine's Google find-or-create,
+  #     with its race rescue);
+  #   * one safe email lookup, `User.account_for_email(address)` and, for code
+  #     that holds a model class rather than including this,
+  #     `Studio::Account.find_by_email(User, address)`.
+  #
+  # THE NAME. The audit named the concern Studio::User. It cannot be: inside
+  # `module Studio`, a bare `User` resolves to Studio::User before ::User, and
+  # the engine reads the host's User bare in Studio::ErrorHandling#current_user,
+  # Studio::LinkConsumption and Studio::LocalReviewsController. A Studio::User
+  # constant would hand those the concern instead of the model.
+  # test/integration/studio_account_test.rb holds that line.
+  #
+  # THE LOOKUP RULE (the account-takeover class the hub and Turf fixed on
+  # 2026-11-08). `find_by(email: nil)` matches ANY account without an email:
+  # every wallet and guest sign-up. So a blank address finds nobody, the match
+  # is case-insensitive (`LOWER(email)`), and a lookup that LINKS a Google
+  # identity to the account it finds takes Google's verification first.
+  module Account
+    extend ActiveSupport::Concern
+
+    included do
+      include Sluggable
+      include Studio::OmniauthUser
+
+      class_attribute :studio_role_list, instance_writer: false, default: Studio::Roles
+
+      normalizes :email, with: ->(address) { Studio::Account.normalize_email(address) }
+
+      before_validation :studio_fill_default_role, on: :create
+      validates :role, inclusion: { in: ->(record) { record.class.studio_role_list } },
+                       if: -> { has_attribute?(:role) }
+    end
+
+    class_methods do
+      # Narrows the roles this app accepts. Every one must be in Studio::Roles:
+      # a host cannot invent a role the engine does not know.
+      def studio_roles(list)
+        roles = Array(list).map(&:to_s).uniq
+        raise ArgumentError, "studio_roles needs at least one role" if roles.empty?
+
+        unknown = roles - Studio::Roles
+        if unknown.any?
+          raise ArgumentError, "studio_roles may only narrow Studio::Roles (#{Studio::Roles.join(', ')}); " \
+                               "unknown: #{unknown.join(', ')}. Add a role to the engine, for every app."
+        end
+
+        self.studio_role_list = roles.freeze
+      end
+
+      # The role a new account takes: viewer, or the first of a list without it.
+      def studio_default_role
+        studio_role_list.include?(Studio::DEFAULT_ROLE) ? Studio::DEFAULT_ROLE : studio_role_list.first
+      end
+
+      # The account holding this address, or nil. A blank address finds nobody.
+      def account_for_email(address)
+        Studio::Account.find_by_email(self, address)
+      end
+    end
+
+    class << self
+      # "  Mia@Example.COM " -> "mia@example.com"; blank -> nil.
+      def normalize_email(value)
+        email = value.to_s.strip.downcase
+        email.empty? ? nil : email
+      end
+
+      # The one safe lookup by address, for any model with an `email` column.
+      # Blank finds nobody; the compare is LOWER(email), so a row stored before
+      # `normalizes` still matches.
+      def find_by_email(model, address)
+        email = normalize_email(address)
+        return nil if email.nil?
+        return nil unless model.respond_to?(:attribute_names) && model.attribute_names.include?("email")
+
+        model.where(model.arel_table[:email].lower.eq(email)).first
+      end
+
+      # The account a lost race left behind: a concurrent sign-in made the row
+      # this one collided with. The Google id always identifies it; the address
+      # only when Google verified it, because an unverified address proves
+      # nothing about who holds the mailbox. Nobody found: the collision is
+      # logged with ErrorLog.capture! and the answer is nil, never a stranger.
+      def race_winner(model, provider:, uid:, email: nil, email_verified: false, error: nil)
+        found = model.find_by(provider: provider, uid: uid) if provider.present? && uid.present?
+        found ||= find_by_email(model, email) if email_verified
+        return found if found
+
+        log_unmatched_race(error)
+        nil
+      end
+
+      private
+
+      def log_unmatched_race(error)
+        return unless error
+
+        Rails.logger.warn("[studio account] sign-in collided with nobody to find: #{error.class}: #{error.message.to_s[0, 300]}")
+        ErrorLog.capture!(error) if defined?(::ErrorLog) && ::ErrorLog.respond_to?(:capture!)
+      rescue StandardError => e
+        Rails.logger.warn("[studio account] could not log the collision: #{e.class}")
+      end
+    end
+
+    def admin?
+      role.to_s == "admin"
+    end
+
+    def display_name
+      try(:name).presence || try(:email).to_s.split("@").first.presence || "User"
+    end
+
+    private
+
+    def studio_fill_default_role
+      return unless has_attribute?(:role) && role.blank?
+
+      self.role = self.class.studio_default_role
+    end
+  end
+end

data/app/models/concerns/studio/omniauth_user.rb

@@ -69,15 +69,14 @@ module Studio
         create_with_free_slug(model, attributes, email_verified: email_verified)
       end
 
+      # Kept under these names for callers that predate Studio::Account, which
+      # now owns the one safe lookup: a blank address finds nobody.
       def normalize_email(value)
-        email = value.to_s.strip.downcase
-        email.empty? ? nil : email
+        Studio::Account.normalize_email(value)
       end
 
       def find_by_email(model, email)
-        return nil unless column?(model, "email")
-
-        model.where(model.arel_table[:email].lower.eq(email)).first
+        Studio::Account.find_by_email(model, email)
       end
 
       private
@@ -99,13 +98,15 @@ module Studio
             # verified it, the same rule as step 2 above. An unverified address
             # that collides with someone else's row hands that row to nobody.
             found = model.find_by(provider: assignable[:provider], uid: assignable[:uid])
-            found ||= find_by_email(model, assignable[:email]) if email_verified && assignable[:email]
+            found ||= find_by_email(model, assignable[:email]) if email_verified
             return found if found
           end
         end
 
-        log_unmatched_collision(last_error)
-        nil
+        # Nobody to find on either attempt: Studio::Account.race_winner logs it.
+        Studio::Account.race_winner(model, provider: attributes[:provider], uid: attributes[:uid],
+                                           email: attributes[:email], email_verified: email_verified,
+                                           error: last_error)
       end
 
       def slug_needs_fallback?(model, record)
@@ -126,15 +127,6 @@ module Studio
         record.define_singleton_method(:name_slug) { id ? "user-#{id}" : "user-#{token}" }
       end
 
-      def log_unmatched_collision(error)
-        return unless error
-
-        Rails.logger.warn("[omniauth] Google sign-in collided with nobody to find: #{error.class}: #{error.message.to_s[0, 300]}")
-        ErrorLog.capture!(error) if defined?(::ErrorLog) && ::ErrorLog.respond_to?(:capture!)
-      rescue StandardError => e
-        Rails.logger.warn("[omniauth] could not log the collision: #{e.class}")
-      end
-
       def column?(model, name)
         model.respond_to?(:attribute_names) && model.attribute_names.include?(name)
       end

data/app/models/error_log.rb

@@ -1,11 +1,13 @@
 class ErrorLog < ApplicationRecord
+  # `slug` is NOT NULL and unique (RequireSlugsOnEngineTables), so every insert
+  # carries one, including a host's bare `ErrorLog.create!`. Sluggable writes a
+  # unique placeholder before the insert and settles it to `error-log-<id>` right
+  # after, inside the create, once the id exists.
+  include Sluggable
+
   belongs_to :target, polymorphic: true, optional: true
   belongs_to :parent, polymorphic: true, optional: true
 
-  def to_param
-    slug
-  end
-
   def inspect_field
     read_attribute(:inspect)
   end
@@ -25,7 +27,6 @@ class ErrorLog < ApplicationRecord
       inspect: safe_inspect,
       backtrace: cleaned.to_json
     )
-    log.update_column(:slug, "error-log-#{log.id}")
 
     # Fan out to Sentry if the host app loaded sentry-ruby. Guard with
     # respond_to? so we don't blow up on old SDK versions. The DB ErrorLog
@@ -42,4 +43,12 @@ class ErrorLog < ApplicationRecord
 
     log
   end
+
+  private
+
+  # The id does not exist before the insert, so the first call returns a unique
+  # placeholder; Sluggable calls it again after the insert.
+  def name_slug
+    id ? "error-log-#{id}" : "error-log-new-#{SecureRandom.hex(8)}"
+  end
 end

data/app/views/studio/_carousel.html.erb

@@ -1,4 +1,4 @@
-<%# locals: (label:, items:, per_view: 3, id: nil, slide_label: nil, data: {}, class_name: nil, style: :standard, caption: nil, start: nil, autoplay: nil, loop: false) %>
+<%# locals: (label:, items:, per_view: 3, id: nil, slide_label: nil, data: {}, class_name: nil, style: :standard, caption: nil, start: nil, autoplay: nil, loop: false, visible: nil) %>
 <%# THE CAROUSEL: one sideways row of slides, the apps' standard for a set too
     long to grid. Render it as a layout, so each slide is your own block:
 
@@ -18,18 +18,25 @@
                    slide is "2 of 6".
       data         data attributes for the region, such as a test hook.
       class_name   classes for the region, such as its width.
-      style        :standard (slides snap to the start) or :spotlight (the
+      style        :standard (slides snap to the start), :spotlight (the
                    centred slide is full size and colour, its neighbours smaller,
-                   faded and grey, and the arrows and keys move one slide).
+                   faded and grey, and the arrows and keys move one slide), or
+                   :cascade (a 3D stack: the open slide in front at full size,
+                   the slides either side stepping back behind it, each step
+                   smaller and dimmer; see THE CASCADE below).
+      visible      a cascade's slides in view: 5 (the default: the open slide and
+                   two each side) or 3. A region under 36rem wide shows 3 whatever
+                   it asks. Only a cascade takes it.
       caption      a callable that writes a line under a slide from its item. A
                    standard row shows a small line under every slide; the
-                   spotlight shows it under the centred slide only.
+                   spotlight and the cascade show it under the open slide only.
       start        the slide the row opens on: an index from 0, or :middle (the
                    slide at items.size / 2). Defaults to :middle for a spotlight
                    that does not loop, so both halves of the row hold a slide at
                    load, and to 0 for a standard row and for a looping spotlight
                    (its wrap already shows the last slide left of the first, so it
-                   opens on the host's first item). An explicit start: wins. The browser sets it before the first paint where
+                   opens on the host's first item). A cascade takes the spotlight's
+                   defaults. An explicit start: wins. The browser sets it before the first paint where
                    it has scroll-initial-target; elsewhere the controller sets it
                    when it connects, with no glide and nothing announced. A link
                    to an id inside the row (#fragment) wins over the start.
@@ -60,6 +67,18 @@
     transitions it. Under reduced motion nothing scales: the neighbours are only
     dimmed.
 
+    THE CASCADE (engine.css, carousel-cascade) does not scroll. Its slides share
+    one grid cell, and each wears data-cascade-step, its place from the open slide:
+    -2 to 2 in view, "before" and "after" past the window. The partial writes the
+    steps of the first paint and the controller rewrites them on a move, so CSS
+    lays the stack out (perspective, translateZ, a slight turn toward the centre)
+    and transitions it. An arrow, a dot, a key, a swipe or drag, autoplay, a click
+    on a side slide and keyboard focus in one bring that slide to the front; a
+    click on a side slide opens nothing. A looping cascade needs no clones: the
+    steps wrap round the set, so the window is never wider than the set. Under
+    reduced motion it lays flat, as a spotlight does, and swaps with no glide. If
+    its controller fails it falls back to a plain scrolling row.
+
     THE TRACK IS A NATIVE SCROLL-SNAP ROW (engine.css, carousel). A swipe, a
     trackpad, a wheel and a focused link move it with no script. The carousel
     controller (studio/controllers/carousel_controller) adds the edge fade, the
@@ -80,16 +99,25 @@
   per_view = per_view.to_i if per_view == per_view.floor
   items = items.to_a
   total = items.size
-  spotlight = case style.to_s
-              when "standard" then false
-              when "spotlight" then true
-              else raise ArgumentError, "studio/carousel style: #{style.inspect} is not :standard or :spotlight"
-              end
+  style_name = style.to_s
+  unless %w[standard spotlight cascade].include?(style_name)
+    raise ArgumentError, "studio/carousel style: #{style.inspect} is not :standard, :spotlight or :cascade"
+  end
+  spotlight = style_name == "spotlight"
+  cascade = style_name == "cascade"
+  # The spotlight and the cascade both centre one slide: they share its defaults.
+  centred = spotlight || cascade
+  if cascade
+    visible = 5 if visible.nil?
+    raise ArgumentError, "studio/carousel visible: #{visible.inspect} is not 3 or 5" unless [3, 5].include?(visible)
+  elsif !visible.nil?
+    raise ArgumentError, "studio/carousel visible: only a style: :cascade row takes it"
+  end
   loop = loop ? true : false
   wraps = loop && total > 1
   # A looping spotlight has a left neighbour at its first slide (the clones), so it
   # opens there; one that does not loop opens mid-row so neither half is empty.
-  start = spotlight && !wraps ? :middle : 0 if start.nil?
+  start = centred && !wraps ? :middle : 0 if start.nil?
   start_index = case start
                 when :middle, "middle" then total / 2
                 when Integer then start.clamp(0, [total - 1, 0].max)
@@ -100,20 +128,36 @@
     raise ArgumentError, "studio/carousel autoplay: #{autoplay.inspect} is not a number of seconds above 0 or nil"
   end
   autoplay = autoplay.to_i if autoplay && autoplay == autoplay.floor
-  arrow_noun = spotlight ? "slide" : "slides"
+  arrow_noun = centred ? "slide" : "slides"
+  # A cascade slide's place from the open slide (studio/carousel's cascadeStep and
+  # cascadeSlot): signed, the short way round a looping set, the later side on a tie.
+  cascade_slot = lambda do |index|
+    step = index - start_index
+    if wraps
+      step %= total
+      step -= total if step > total / 2.0
+    end
+    step < -2 ? "before" : step > 2 ? "after" : step.to_s
+  end
   track_id = id.presence || "carousel-#{label.to_s.parameterize.presence || 'slides'}"
 %>
-<%= tag.section(class: ["carousel", ("carousel-spotlight" if spotlight), class_name].compact.join(" "),
+<%= tag.section(class: ["carousel", ("carousel-spotlight" if spotlight), ("carousel-cascade" if cascade), class_name].compact.join(" "),
       role: "region",
       aria: { roledescription: "carousel", label: label },
       style: "--carousel-per-view: #{per_view}",
       data: { studio_controller: "carousel", studio_action: "keydown->carousel#key", carousel_start: (start_index.to_s if start_index.positive?),
-              carousel_autoplay: (autoplay.to_s if autoplay), carousel_loop: ("" if loop) }.compact.merge(data)) do %>
+              carousel_autoplay: (autoplay.to_s if autoplay), carousel_loop: ("" if loop), carousel_visible: (visible.to_s if cascade) }.compact.merge(data)) do %>
   <%# The track takes focus for the keys, so it carries a name: a group, since a
       bare div may not be named. %>
   <div id="<%= track_id %>" class="carousel-track" tabindex="0" role="group"
        aria-label="<%= label %> slides" data-carousel-target="track">
     <% items.each_with_index do |item, index| %>
+      <% if cascade %>
+      <div class="carousel-slide" role="group" aria-roledescription="slide"
+           aria-label="<%= slide_label ? slide_label.call(item) : "#{index + 1} of #{total}" %>"
+           data-carousel-target="slide" data-cascade-step="<%= cascade_slot.call(index) %>"<%= ' data-current'.html_safe if index == start_index %>><div class="carousel-cascade-body"><%= yield(item) %></div><% if caption %><div class="carousel-caption"><%= caption.call(item) %></div><% end %></div>
+      <% next %>
+      <% end %>
       <div class="carousel-slide" role="group" aria-roledescription="slide"
            aria-label="<%= slide_label ? slide_label.call(item) : "#{index + 1} of #{total}" %>"
            data-carousel-target="slide"<%= ' data-carousel-start-slide'.html_safe if start_index.positive? && index == start_index %><%= ' data-current'.html_safe if spotlight && index == start_index %>><% if spotlight %><div class="carousel-spotlight-body"><%= yield(item) %></div><% else %><%= yield(item) %><% end %><% if caption %><div class="carousel-caption"><%= caption.call(item) %></div><% end %></div>

data/app/views/studio/integrations/_card.html.erb

@@ -0,0 +1,50 @@
+<%# locals: (integration:, connections:, return_to:, linked:) %>
+<%# One integration's card: status, what keeps it off, Connect (a POST, with
+    the account field when the admin names the account at Connect), and its
+    connections with Disconnect. No token, and no part of one, is shown. %>
+<% provider = integration.provider %>
+<% status = integration.status %>
+<section class="card p-4" data-studio-integration-card="<%= integration.key %>" data-status="<%= status %>">
+  <div class="flex flex-wrap items-center justify-between gap-2">
+    <h2 class="text-heading font-semibold">
+      <% if linked %><a href="<%= integration_path_for(integration) %>" class="hover:underline"><%= integration.label %></a><% else %><%= integration.label %><% end %>
+    </h2>
+    <span class="badge" data-studio-integration-status><%= integration.status_label %></span>
+  </div>
+  <p class="text-sm text-secondary mt-1"><%= integration.summary %></p>
+
+  <% integration.missing.each do |reason| %>
+    <p class="text-sm text-muted mt-2" data-studio-integration-missing><%= reason %></p>
+  <% end %>
+
+  <% if connections.any? %>
+    <ul class="mt-3 divide-y divide-subtle" data-studio-integration-connections>
+      <% connections.each do |connection| %>
+        <li class="py-2 flex flex-wrap items-center justify-between gap-2" data-studio-integration-connection="<%= connection.id %>">
+          <div>
+            <p class="text-sm text-heading font-medium"><%= connection.label %></p>
+            <p class="text-xs text-muted">
+              Connected <%= connection.connected_at.utc.strftime("%Y-%m-%d %H:%M UTC") %><% if connection.connected_by.present? %> by <%= connection.connected_by %><% end %><% if connection.metadata.to_h["environment"].present? %> · <%= connection.metadata["environment"] %><% end %>
+            </p>
+          </div>
+          <%= button_to "Disconnect", integration_disconnect_path(integration, connection), method: :delete,
+                        params: { return_to: }, class: "btn btn-outline btn-sm",
+                        form: { data: { turbo_confirm: "Disconnect #{connection.label}?" } } %>
+        </li>
+      <% end %>
+    </ul>
+  <% end %>
+
+  <%= form_with url: integration_connect_path(integration), method: :post, local: true,
+                class: "mt-3 flex flex-wrap items-end gap-2", data: { studio_integration_connect: integration.key, turbo: false } do |form| %>
+    <%= hidden_field_tag :return_to, return_to %>
+    <% if provider.account_source == :connect %>
+      <label class="text-sm text-secondary">
+        <span class="block mb-1"><%= integration.definition.account_label %></span>
+        <%= text_field_tag provider.account_param, nil, class: "input-field py-2", required: true, autocomplete: "off",
+                           placeholder: integration.definition.account_hint %>
+      </label>
+    <% end %>
+    <%= form.submit(connections.any? ? "Connect another" : "Connect", class: "btn btn-primary btn-sm") %>
+  <% end %>
+</section>