studio-engine 0.130.0 → 0.131.0

data/app/views/components/_link_sidebar_trigger.html.erb

@@ -10,7 +10,7 @@
 <% sidebar_admin = respond_to?(:admin?) && admin? %>
 <button type="button"
         @click.stop="$store.sidebars.linkTreeOpen = !$store.sidebars.linkTreeOpen"
-        class="<%= extra_classes %> h-9 w-9 items-center justify-center rounded-md text-secondary hover:text-heading hover:bg-surface-alt focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 transition"
+        class="<%= extra_classes %> h-9 w-9 items-center justify-center rounded-md text-secondary hover:text-heading hover:bg-surface-alt focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-ink transition"
         title="<%= sidebar_admin ? 'Admin Menu' : 'Links' %>"
         aria-label="<%= sidebar_admin ? 'Toggle admin menu' : 'Toggle links menu' %>"
         aria-controls="studio-link-sidebar studio-link-sidebar-mobile"

data/app/views/components/_sidebar_panel.html.erb

@@ -111,7 +111,7 @@
           <% if close_action.present? %>
             <button type="button"
                     @click="<%= close_action %>"
-                    class="flex items-center justify-center w-8 h-8 rounded-full text-secondary hover:text-heading hover:bg-surface-alt focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 transition"
+                    class="flex items-center justify-center w-8 h-8 rounded-full text-secondary hover:text-heading hover:bg-surface-alt focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-ink transition"
                     aria-label="Close sidebar"
                     data-link-sidebar-close="true"<% if close_hook %> data-sidebar-panel-close="<%= id %>"<% end %>>
               <span class="text-xl leading-none">&times;</span>

data/app/views/error_logs/index.html.erb

@@ -26,19 +26,13 @@
            class="input-field pr-10 py-2.5 text-sm placeholder:text-muted"
            :readonly="loading" />
     <div x-show="loading" x-cloak class="absolute right-3 top-1/2 -translate-y-1/2">
-      <svg class="animate-spin h-4 w-4 text-primary" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-      </svg>
+      <%= studio_loader style: :spinner, size: 16, label: "Searching" %>
     </div>
   </form>
 
   <!-- Loading state -->
   <div x-show="loading" x-cloak class="py-16 text-center">
-    <svg class="animate-spin h-8 w-8 text-primary mx-auto mb-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-      <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-      <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-    </svg>
+    <div class="mb-3 flex justify-center"><%= studio_loader style: :spinner, size: 32, label: "" %></div>
     <p class="text-muted text-sm">Searching...</p>
   </div>
 

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

@@ -0,0 +1,97 @@
+<%# locals: (label:, items:, per_view: 3, id: nil, slide_label: nil, data: {}, class_name: nil, style: :standard, caption: 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:
+
+      render layout: "studio/carousel", locals: { label: "Portfolio", items: @apps } do |app|
+        render "apps/card", app: app
+      end
+
+      label        the region's accessible name. Required: a screen reader says
+                   "Portfolio, carousel".
+      items        one slide per item; the block draws it.
+      per_view     whole slides in view on a wide row (1 to 6). A medium row shows
+                   up to two, a phone one, and every width shows a sliver of the
+                   next slide, so a visitor sees there is more.
+      id           the track's id, for the arrows' aria-controls. Defaults from
+                   the label; pass one when two carousels on a page share a label.
+      slide_label  a callable that names a slide from its item. Without one a
+                   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
+                   centred slide is full size and colour, its neighbours smaller,
+                   faded and grey, and the arrows and keys move one slide).
+      caption      a callable that writes a line under a slide from its item.
+                   The spotlight shows it under the centred slide only.
+
+    THE SPOTLIGHT (engine.css, carousel-spotlight) snaps each slide to the centre.
+    Where the browser has scroll-driven animations, each slide's own view timeline
+    scales and fades it as it nears the centre, so the effect follows the finger.
+    Elsewhere the controller marks the centred slide (data-current) and CSS
+    transitions it. Under reduced motion nothing scales: the neighbours are only
+    dimmed.
+
+    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
+    arrows, the dots and the keys, and until it connects the controls stay
+    hidden and the row keeps a thin scrollbar. The widths come from container
+    queries on the region, so a carousel in a narrow column lays out as a phone
+    does.
+
+    ACCESSIBLE BY THE APG CAROUSEL PATTERN: a labelled region with
+    aria-roledescription carousel, a focusable track named "<label> slides", each
+    slide a group with aria-roledescription slide and its own label, named arrows
+    that set aria-disabled at an end (not disabled, so focus stays on the arrow),
+    and a polite, atomic status line that speaks only after a press that moves the
+    row. A key pressed in a form field, an arrow-key widget (a slider, a tab list,
+    a listbox...) or a nested carousel stays that element's. %>
+<%
+  per_view = per_view.to_f.clamp(1, 6)
+  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
+  track_id = id.presence || "carousel-#{label.to_s.parameterize.presence || 'slides'}"
+%>
+<%= tag.section(class: ["carousel", ("carousel-spotlight" if spotlight), 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" }.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| %>
+      <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"><% 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>
+    <% end %>
+  </div>
+  <div class="carousel-controls">
+    <div class="carousel-dots" role="group" aria-label="Choose a slide">
+      <% total.times do |index| %>
+        <button type="button" class="carousel-dot" aria-label="Go to slide <%= index + 1 %>"
+                aria-controls="<%= track_id %>"<%= ' aria-current="true"'.html_safe if index.zero? %>
+                data-carousel-target="dot" data-carousel-index="<%= index %>"
+                data-studio-action="click->carousel#goTo"></button>
+      <% end %>
+    </div>
+    <div class="carousel-arrows">
+      <button type="button" class="carousel-button" aria-label="Previous slides" aria-controls="<%= track_id %>"
+              aria-disabled="true" data-carousel-target="prev" data-studio-action="click->carousel#prev">
+        <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M12.5 15 7.5 10l5-5" stroke-linecap="round" stroke-linejoin="round"/></svg>
+      </button>
+      <button type="button" class="carousel-button" aria-label="Next slides" aria-controls="<%= track_id %>"
+              data-carousel-target="next" data-studio-action="click->carousel#next">
+        <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="m7.5 5 5 5-5 5" stroke-linecap="round" stroke-linejoin="round"/></svg>
+      </button>
+    </div>
+  </div>
+  <p class="sr-only" role="status" aria-live="polite" aria-atomic="true" data-carousel-target="status"></p>
+<% end %>

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

@@ -1,4 +1,4 @@
-<%# locals: (title:, meta: nil, meta_title: nil, label: nil, tabs: [], tabs_data: {}, actions_html: nil, data: {}, row_class: "-mx-4 px-4") %>
+<%# locals: (title:, crumbs: [], crumb_label: nil, meta: nil, meta_title: nil, label: nil, tabs: [], tabs_data: {}, actions_html: nil, links: [], links_label: "More links", data: {}, row_class: "-mx-4 px-4") %>
 <%# THE PAGE HEADER: the second layer of the pinned stack (docs/PAGE_HEADER.md).
     navbar, then this row, then a section's header (studio/_section_header), then a
     table's sticky header, each below the last.
@@ -8,14 +8,26 @@
     between the two, so a state change moves nothing and republishes nothing.
 
       title         the page's one h1.
+      crumbs        the trail above the title: the page's ancestors, root first, as
+                    [{ label:, href: }]. studio_crumbs builds it from the app's one
+                    parent map (Studio::Crumbs). The trail ends with the page itself,
+                    crumb_label or else the title. Below 40rem the trail gives way to
+                    one link to the parent. Every ancestor link carries
+                    data-page-transition-back, so the page transition plays the
+                    app's move the other way (docs/PAGE_TRANSITIONS.md).
+      crumb_label   the page's own name in the trail, when the title is long.
       meta          short text beside the title, such as the version. Hidden on a
                     phone, where the tabs need the width.
       meta_title    the meta's title attribute.
-      label         the nav's accessible name. A row with tabs needs it.
+      label         the tabs' nav's accessible name. A row with tabs needs it.
       tabs          [{ label:, href:, current:, data: }]. `current` is the
                     aria-current value ("page" or "true"), and blank on the others.
       tabs_data     data attributes for the tabs' scroller.
-      actions_html  a control on the right, for a row with no tabs.
+      actions_html  a control on the right, such as the page's one primary action.
+                    After the tabs, when the row has both.
+      links         the page's other links, [{ label:, href:, current: }], on a line of
+                    their own at the foot of the row, so they stick with it.
+      links_label   that line's accessible name.
       data          data attributes for the row, such as the page's own controller.
       row_class     the bleed. The default fits a container with px-4; pass "" in a
                     container with no gutter of its own.
@@ -27,6 +39,9 @@
     <header> as the navbar, so on a page with no navbar this row would publish as
     --nav-bottom.
 
+    NOR IS IT A LANDMARK. The row is a div; the tabs, the crumbs and the links line
+    are each their own <nav>, side by side, so no landmark nests in another.
+
     IT JOINS THE STACK WITH data-pin="page" AND POSITIONS OFF --pin-page-top, the
     bottom of everything above it. --pin-stack-bottom includes the row's own edge,
     so a row positioned off it would chase itself down the page. Anything below,
@@ -40,11 +55,24 @@
     page's own. So the row carries no top margin: the space above it belongs to its
     container. %>
 <div class="page-header-sentinel" data-studio-controller="page-header" aria-hidden="true"></div>
-<%= content_tag(tabs.any? ? :nav : :div,
-      class: "page-header sticky #{row_class}".strip,
+<%= tag.div(class: "page-header sticky #{row_class}".strip,
       style: "top: var(--pin-page-top, var(--nav-bottom, var(--nav-h, 0px))); z-index: var(--z-sticky, 30)",
-      aria: { label: label.presence },
       data: data.merge(pin: "page")) do %>
+  <% if crumbs.any? %>
+    <% parent = crumbs.last %>
+    <div class="page-header-trail">
+      <nav class="page-header-crumbs" aria-label="Breadcrumb">
+        <ol>
+          <% crumbs.each do |crumb| %>
+            <li><%= link_to crumb.fetch(:label), crumb.fetch(:href), class: "page-header-crumb", data: { page_transition_back: "" } %></li>
+          <% end %>
+          <li><span class="page-header-crumb-current" aria-current="page"><%= crumb_label.presence || title %></span></li>
+        </ol>
+      </nav>
+      <%= link_to parent.fetch(:href), class: "page-header-parent", data: { page_transition_back: "" },
+            aria: { label: "Back to #{parent.fetch(:label)}" } do %><span aria-hidden="true">&lsaquo;</span> <%= parent.fetch(:label) %><% end %>
+    </div>
+  <% end %>
   <div class="page-header-lead">
     <h1 class="page-header-title"><%= title %></h1>
     <% if meta.present? %>
@@ -52,17 +80,30 @@
     <% end %>
   </div>
   <% if tabs.any? %>
-    <%= tag.div(class: "page-header-tabs", data: tabs_data) do %>
+    <%= tag.nav(class: "page-header-tabs", aria: { label: label.presence }, data: tabs_data) do %>
+      <%# The glide: one pill, drawn once, that CSS anchors to the tab with aria-current and
+          slides from tab to tab (engine.css, "The gliding pill"). Each tab keeps its own
+          fill where the browser has no anchor positioning. %>
       <div class="page-header-track">
         <% tabs.each do |tab| %>
-          <%= link_to tab.fetch(:label), tab.fetch(:href),
-                class: "btn btn-sm #{tab[:current].present? ? 'btn-primary' : 'btn-neutral'}",
+          <%= link_to tab.fetch(:href),
+                class: "page-header-tab btn btn-sm #{tab[:current].present? ? 'btn-primary' : 'btn-neutral'}",
                 aria: { current: tab[:current].presence },
-                data: tab.fetch(:data, {}) %>
+                data: tab.fetch(:data, {}) do %><span class="page-header-tab-label"><%= tab.fetch(:label) %></span><% end %>
         <% end %>
+        <span class="page-header-glide btn btn-sm btn-primary" aria-hidden="true"></span>
       </div>
     <% end %>
-  <% elsif actions_html.present? %>
+  <% end %>
+  <% if actions_html.present? %>
     <div class="page-header-actions"><%= actions_html %></div>
   <% end %>
+  <% if links.any? %>
+    <nav class="page-header-links" aria-label="<%= links_label %>">
+      <% links.each do |link| %>
+        <%= link_to link.fetch(:label), link.fetch(:href), class: "page-header-link",
+              aria: { current: link[:current].presence }, data: link.fetch(:data, {}) %>
+      <% end %>
+    </nav>
+  <% end %>
 <% end %>

data/app/views/studio/agent_chat/_chat.html.erb

@@ -1,4 +1,4 @@
-<%# locals: (soul:, name:, portrait: nil, role: nil, empty: nil, cards: nil, voice: false, voice_copy: nil) %>
+<%# locals: (soul:, name:, portrait: nil, role: nil, empty: nil, cards: nil, voice: false, voice_copy: nil, compact: false) %>
 <%#
   The shared agent chat (docs/AGENT_CHAT.md): one conversation with one agent,
   held by the hub, on any app's page.
@@ -19,6 +19,9 @@
             Studio.voice_chat_allowed lets talk; never to a signed-out visitor.
   voice_copy  the words: { privacy:, recorder:, chip: }, each optional, over the
             defaults (Studio::AgentChat.voice_copy).
+  compact   true for a chat inside a card (studio/agent_chat/_talk_modal): no
+            big portrait head (the card has its own), no page padding, and a
+            shorter thread.
 
   Top to bottom, as the hub's /build: the portrait and name, the card slot, the
   thread, the typing line, the offline notice and the composer. The thread is
@@ -32,19 +35,19 @@
 <% souls = Studio.agent_chat_soul_list %>
 <% raise ArgumentError, "studio/agent_chat/chat: soul #{soul.inspect} is not in Studio.agent_chat_souls (#{souls.inspect})" unless souls.include?(soul.to_s) %>
 <% if Studio.agent_chat_allowed?(studio_agent_chat_viewer) %>
-<section class="w-full max-w-3xl mx-auto px-4 pt-4 sm:pt-8 flex flex-col gap-6 min-w-0"
+<section class="<%= compact ? "w-full flex flex-col gap-3 min-w-0" : "w-full max-w-3xl mx-auto px-4 pt-4 sm:pt-8 flex flex-col gap-6 min-w-0" %>"
          data-studio-controller="agent-chat" data-test="agent-chat"
          data-agent-chat-soul="<%= soul %>" data-agent-chat-name="<%= name %>"
          data-agent-chat-messages-url="<%= studio_agent_chat_messages_path %>"
          data-agent-chat-turns-url="<%= studio_agent_chat_turns_path %>">
-  <%= render "studio/agent_chat/header", name: name, portrait: portrait, role: role %>
+  <%= render "studio/agent_chat/header", name: name, portrait: portrait, role: role unless compact %>
   <% if cards.present? %>
     <div class="flex flex-col gap-3 min-w-0" data-agent-chat-cards data-test="agent-chat-cards"><%= cards %></div>
   <% end %>
   <div class="flex flex-col gap-3 min-w-0">
     <%# relative: a turn's sr-only name is absolutely positioned. With no positioned ancestor it escapes this scroller, is not clipped by it, and stretches the document by the thread's whole scrolled height. %>
     <div role="log" aria-live="polite" aria-label="Conversation with <%= name %>"
-         class="relative flex flex-col gap-4 px-1 py-2 overflow-y-auto overscroll-contain max-h-[60vh] min-w-0"
+         class="relative flex flex-col gap-4 px-1 py-2 overflow-y-auto overscroll-contain <%= compact ? "min-h-24 max-h-[45vh]" : "max-h-[60vh]" %> min-w-0"
          data-agent-chat-log data-test="agent-chat-messages">
       <p class="hidden only:block text-center text-secondary text-sm py-6" data-test="agent-chat-empty"><%= empty.presence || "Say hello to #{name}." %></p>
     </div>

data/app/views/studio/agent_chat/_talk_modal.html.erb

@@ -0,0 +1,58 @@
+<%# locals: (soul:, name:, portrait: nil, role: nil, store: "studioTalkToAgent") %>
+<%#
+  The talk-to-agent modal (docs/AGENT_CHAT.md, "Talk to an agent in a modal"):
+  the shared agent chat (studio/agent_chat/_chat) in a card on the page-scoped
+  modal host (studio/modals/_scoped_host). Render it ONCE per page, then mark any
+  link with studio_talk_to_agent_link (Studio::AgentChatHelper), or by hand with
+  data-studio-talk-to-agent, data-talk-soul, data-talk-topic and an optional
+  data-talk-opener.
+
+  soul      the agent's slug; must be on Studio.agent_chat_souls.
+  name      the agent's display name.
+  portrait  ready markup for a small round portrait (40px works); nil shows the initial.
+  role      ready markup or text beside the name.
+  store     the Alpine store the host registers; unique on the page, never "modals".
+
+  A click opens the card and studio/talk_to_agent clones the chat out of the
+  <template> below into it, with the link's opener: the chat loads the thread
+  and sends the opener, so the agent is already answering as the card animates
+  in, and each new answer types itself in. The chat is the same one as anywhere
+  else (one thread per person and soul, held by the hub): this partial adds a
+  card and an opener, never a second chat. One page holds one chat, so the page
+  that renders this modal renders no other studio/agent_chat/chat.
+
+  A viewer Studio.agent_chat_allowed refuses gets nothing here, and every link
+  then opens its href. The x-data on the wrapper is load-bearing: the scoped host
+  declares no Alpine scope of its own.
+%>
+<% souls = Studio.agent_chat_soul_list %>
+<% raise ArgumentError, "studio/agent_chat/talk_modal: soul #{soul.inspect} is not in Studio.agent_chat_souls (#{souls.inspect})" unless souls.include?(soul.to_s) %>
+<% if Studio.agent_chat_allowed?(studio_agent_chat_viewer) %>
+<div x-data data-studio-controller="talk-to-agent" data-test="talk-to-agent"
+     data-talk-to-agent-soul="<%= soul %>" data-talk-to-agent-name="<%= name %>" data-talk-to-agent-store="<%= store %>">
+  <%= render "studio/modals/scoped_host", store: store,
+             card_class: "bg-surface rounded-2xl border border-subtle shadow-2xl w-full max-w-lg p-4 sm:p-5" do %>
+    <template x-if="$store.<%= store %>.current()?.id === 'talk-to-agent'">
+      <div class="flex flex-col gap-3 min-w-0" data-talk-to-agent-panel data-test="talk-to-agent-panel"
+           x-init="$nextTick(() => $dispatch('studio:talk-to-agent:panel'))">
+        <div class="flex items-center gap-3 min-w-0">
+          <span class="w-10 h-10 shrink-0 rounded-full overflow-hidden bg-inset border border-subtle flex items-center justify-center text-heading font-bold [&>img]:w-full [&>img]:h-full [&>img]:object-cover" aria-hidden="true">
+            <% if portrait.present? %><%= portrait %><% else %><%= name.to_s.first.to_s.upcase %><% end %>
+          </span>
+          <div class="min-w-0 flex-1">
+            <p class="font-semibold text-heading break-words" data-talk-to-agent-title data-test="talk-to-agent-title">Talk to <%= name %></p>
+            <% if role.present? %><p class="text-xs text-secondary break-words"><%= role %></p><% end %>
+          </div>
+          <button type="button" class="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-secondary hover:bg-inset hover:text-heading transition-colors" aria-label="Close"
+                  @click="$store.<%= store %>.close()" data-test="talk-to-agent-close">
+            <svg viewBox="0 0 20 20" class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" aria-hidden="true"><path d="M5 5l10 10M15 5L5 15"/></svg>
+          </button>
+        </div>
+        <div class="min-w-0" data-talk-to-agent-slot data-test="talk-to-agent-slot"></div>
+      </div>
+    </template>
+  <% end %>
+  <template data-talk-to-agent-chat><%= render "studio/agent_chat/chat", soul: soul, name: name, portrait: portrait, compact: true,
+                                                empty: "#{name} will answer here in a moment." %></template>
+</div>
+<% end %>

data/app/views/studio/agent_chat/_turn.html.erb

@@ -1,5 +1,5 @@
 <%# locals: (turn:, name:) %>
-<%# One turn of the chat (studio/agent_chat/_chat), from a hub turn {id, role, text, status}, identified by its id AND role (data-turn-key "<id>:<role>"): the hub answers one message row as a user turn and an agent turn sharing the row's id. The page renders it twice, blank, as the <template>s studio/agent_chat clones; a host may also render real turns with it. The visitor's words sit in a right-hand bubble; the agent's are plain text across the thread (as the hub's agent-reply), its name kept for a screen reader. Text only, never HTML: the script sets textContent. A failed turn says so. A held one (stored, no automatic answer coming) says that, and never asks for a resend. %>
+<%# One turn of the chat (studio/agent_chat/_chat), from a hub turn {id, role, text, status}, identified by its id AND role (data-turn-key "<id>:<role>"): the hub answers one message row as a user turn and an agent turn sharing the row's id. The page renders it twice, blank, as the <template>s studio/agent_chat clones; a host may also render real turns with it. The visitor's words sit in a right-hand bubble; the agent's are plain text across the thread (as the hub's agent-reply), its name kept for a screen reader. Never HTML: the script sets a visitor's words as text and builds an agent's small Markdown subset as nodes (studio/agent_chat, MARKDOWN). This partial renders a real turn's words as text. A failed turn says so. A held one (stored, no automatic answer coming) says that, and never asks for a resend. %>
 <% agent = turn["role"].to_s == "agent" %>
 <% status = turn["status"].to_s %>
 <div class="flex flex-col gap-2 min-w-0" data-agent-chat-turn data-role="<%= agent ? "agent" : "user" %>"

data/app/views/studio/loader/_infinite_scroll.html.erb

@@ -0,0 +1,42 @@
+<%# locals: (id:, page:, next_url:, more_label:, end_label:, announce:, items:, html: {}) %>
+<%#
+  Infinite scroll (Studio::LoaderHelper#studio_infinite_scroll, docs/LOADER.md).
+  Every page renders this whole wrapper, so a page opened with no script is a
+  complete page. Page 2 and later put their items in the frame the page before
+  left for them; Turbo lifts just that frame out of the response, and the frame
+  takes no box (display: contents), so the items join the list in place.
+
+  The next page's frame holds an ordinary link. A click loads the frame; with no
+  script it opens the page. studio/infinite_scroll clicks it early, as the frame
+  nears the viewport, and says on the status line how many items came.
+%>
+<%
+  extra = html.dup
+  data = (extra.delete(:data) || {}).merge(studio_controller: "infinite-scroll",
+                                           infinite_scroll_announce: announce,
+                                           infinite_scroll_end: end_label)
+  classes = [ "studio-infinite-scroll", extra.delete(:class) ].compact.join(" ")
+  body = capture do
+    concat items
+    if next_url
+      concat(content_tag("turbo-frame", id: studio_infinite_scroll_frame_id(id, page + 1),
+                         class: "studio-infinite-scroll-next", data: { infinite_scroll_next: "" }) do
+        tag.div(class: "studio-infinite-scroll-more") do
+          link_to(next_url, class: "btn btn-secondary", data: { infinite_scroll_more: "" }) do
+            safe_join([ tag.span(more_label), studio_loader_pending(style: :spinner, size: 16) ])
+          end
+        end
+      end)
+    elsif end_label.present?
+      concat tag.p(end_label, class: "studio-infinite-scroll-end", data: { infinite_scroll_done: "" })
+    end
+  end
+%>
+<%= tag.div(id: id, class: classes, data: data, **extra) do %>
+  <% if page > 1 %>
+    <%= content_tag("turbo-frame", body, id: studio_infinite_scroll_frame_id(id, page)) %>
+  <% else %>
+    <%= body %>
+  <% end %>
+  <p class="sr-only" role="status" aria-live="polite" data-infinite-scroll-status></p>
+<% end %>

data/app/views/studio/loader/_loader.html.erb

@@ -7,6 +7,12 @@
 
   A pending loader sits inside a button: hidden from assistive tech (the button
   carries aria-busy) and from sight until the button or its form is busy.
+
+  The plain styles (spinner, dots, bar) draw no icon. They wrap the engine's
+  canonical motion primitives (.spinner, .loading-dots, .progress-meter), so the
+  family and those classes are one set of rules. A bar is a progressbar: its
+  label is its name, and a percent is its value; with none it sweeps and has no
+  value, which is how an indeterminate progressbar reads.
 %>
 <%
   extra = html.dup
@@ -28,9 +34,14 @@
       tag.img(src: icon, alt: "", class: css, draggable: "false", decoding: "async")
     end
   end
-  aria = pending ? { hidden: "true" } : { live: "polite" }
+  bar = style == :bar
+  role = pending ? nil : (bar ? "progressbar" : "status")
+  aria = if pending then { hidden: "true" }
+         elsif bar then { label: label.presence || "Loading", valuemin: 0, valuemax: 100, valuenow: (percent && (percent % 1).zero? ? percent.to_i : percent) }.compact
+         else { live: "polite" }
+         end
 %>
-<%= tag.span(class: classes, role: (pending ? nil : "status"), aria: aria, data: data, style: vars.join("; "), **extra) do %>
+<%= tag.span(class: classes, role: role, aria: aria, data: data, style: vars.join("; "), **extra) do %>
   <% case style %>
   <% when :breathe %>
     <span class="studio-loader-halo" aria-hidden="true"></span>
@@ -62,6 +73,12 @@
         <% end %>
       <% end %>
     </svg>
+  <% when :spinner %>
+    <span class="spinner" aria-hidden="true"></span>
+  <% when :dots %>
+    <span class="loading-dots" aria-hidden="true"><span></span><span></span><span></span></span>
+  <% when :bar %>
+    <span class="progress-meter<%= " progress-meter--indeterminate" if percent.nil? %>" aria-hidden="true"><span class="progress-meter-fill"></span></span>
   <% when :sparkle %>
     <%= draw_icon.call %>
     <svg class="studio-loader-art" viewBox="<%= art[:view_box] %>" aria-hidden="true">
@@ -71,5 +88,5 @@
       <% end %>
     </svg>
   <% end %>
-  <% unless pending || label.blank? %><span class="sr-only"><%= label %></span><% end %>
+  <% unless pending || bar || label.blank? %><span class="sr-only"><%= label %></span><% end %>
 <% end %>

data/app/views/studio/loader/_pull_to_refresh.html.erb

@@ -0,0 +1,20 @@
+<%# locals: (frame:, label:, body:, html: {}) %>
+<%#
+  Pull to refresh (Studio::LoaderHelper#studio_pull_to_refresh, docs/LOADER.md).
+  The indicator is hidden until a finger pulls; studio/pull_to_refresh arms only
+  on a phone-width touch screen, so elsewhere this is a plain wrapper. The
+  status line says the label while a refresh runs.
+%>
+<%
+  extra = html.dup
+  data = (extra.delete(:data) || {}).merge(studio_controller: "pull-to-refresh", pull_to_refresh_label: label)
+  data[:pull_to_refresh_frame] = frame if frame.present?
+  classes = [ "studio-pull-refresh", extra.delete(:class) ].compact.join(" ")
+%>
+<%= tag.div(class: classes, data: data, **extra) do %>
+  <span class="studio-pull-refresh-indicator" aria-hidden="true" hidden>
+    <span class="spinner studio-pull-refresh-spinner" style="--spinner-size: 1.25rem; --spinner-color: currentColor; --spinner-track: color-mix(in srgb, currentColor 22%, transparent)"></span>
+  </span>
+  <p class="sr-only" role="status" data-pull-to-refresh-status></p>
+  <%= body %>
+<% end %>

data/app/views/studio/loader/_skeleton.html.erb

@@ -0,0 +1,37 @@
+<%# locals: (kind:, count:, lines:, label:, html: {}) %>
+<%#
+  A skeleton (Studio::LoaderHelper#studio_skeleton, docs/LOADER.md): grey shapes
+  of the content to come. The wrapper is aria-busy, so assistive tech knows the
+  region is not ready; each item is aria-hidden, since a shape means nothing
+  read aloud. One line of screen-reader text names the wait. The shimmer is
+  engine-motion.css ("Loader family"), and stops under reduced motion.
+%>
+<%
+  extra = html.dup
+  data = (extra.delete(:data) || {}).merge(skeleton: kind.to_s)
+  classes = [ "studio-skeleton", extra.delete(:class) ].compact.join(" ")
+  draw_lines = lambda do |total|
+    safe_join(Array.new(total) { |i| tag.span(class: "studio-skeleton-bone", data: { bone: "line" }, style: "--studio-skeleton-width: #{studio_skeleton_width(i, total)}") })
+  end
+%>
+<%= tag.div(class: classes, aria: { busy: "true" }, data: data, **extra) do %>
+  <% if label.present? %><span class="sr-only"><%= label %></span><% end %>
+  <% count.times do %>
+    <div class="studio-skeleton-item" data-skeleton-kind="<%= kind %>" aria-hidden="true">
+      <% case kind %>
+      <% when :avatar %>
+        <span class="studio-skeleton-bone" data-bone="avatar"></span>
+        <span class="studio-skeleton-lines"><%= draw_lines.call([ lines, 1 ].max) %></span>
+      <% when :card %>
+        <span class="studio-skeleton-bone" data-bone="media"></span>
+        <span class="studio-skeleton-bone" data-bone="title"></span>
+        <%= draw_lines.call(lines) %>
+      <% when :media %>
+        <span class="studio-skeleton-bone" data-bone="media"></span>
+        <%= draw_lines.call(lines) %>
+      <% else %>
+        <%= draw_lines.call([ lines, 1 ].max) %>
+      <% end %>
+    </div>
+  <% end %>
+<% end %>