studio-engine 0.127.0 → 0.129.0

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

@@ -5,6 +5,15 @@
     positions against the header, not the viewport); the engine navbar does
     this automatically when sections are declared. %>
 <% sections = studio_sidebar_sections %>
+<%# THE PANEL'S STYLE (Studio.sidebar_style). Under :glass a row draws its link's line icon
+    and the row for this page says aria-current, which is what lights it. The default style
+    reads neither, so an app that stays on it renders what it did. A caller may pass
+    sidebar_style: for one render; the engine lab does, since the setting is process-wide. %>
+<% glass = (local_assigns[:sidebar_style] || Studio.sidebar_style) == :glass %>
+<% sidebar_request = glass && respond_to?(:request) ? request : nil %>
+<%# The engine's Geo row counts too, so no section row above it claims /admin/geo as its own. %>
+<% current_rows = respond_to?(:admin_geo_path) ? sections + [{ links: [{ href: admin_geo_path }] }] : sections %>
+<% current_href = sidebar_request && Studio::SidebarSections.current_href(current_rows, sidebar_request.path, host: sidebar_request.host) %>
 <% sidebar_admin = respond_to?(:admin?) && admin? %>
 <%# THE PANEL'S TITLE. Signed in, admin included: the name the navbar shows, from the
     same call. Signed out: a greeting by the browser's local time, which the server
@@ -24,18 +33,28 @@
      elsif !sidebar_signed_in
        tag.p("Good morning", class: sidebar_title_class, data: { link_sidebar_title: "", link_sidebar_greeting: "" })
      end %>
-<%# THE GROUPS. No section shows a label word and none shows the admin chip: a divider
-    separates the groups. The words stay as each group's accessible name, so a screen
-    reader still announces them. An empty section draws no group, or its two dividers
-    would touch.
+<%# THE GROUPS. A divider separates them, and by default a group shows no label word. The
+    words stay as each group's accessible name, so a screen reader still announces them.
+    An empty section draws no group, or its two dividers would touch. No group shows the
+    admin chip.
+
+    A SECTION MAY OPT IN TO A VISIBLE HEADER with header: true: its title, in the small
+    label style, above its rows. The word on screen is hidden from assistive technology,
+    because the group's aria-label already says it. The label is not an id reference:
+    body_html renders in both panels, so an id here would be a duplicate. The header is
+    plain text, outside every row, so it takes no click and no row measures against it.
+    Its pt-3 and the group's py-1 make the 16px the old label had above it.
 
     A ROW IS ONE LINE AT REST, with or without a desc:, so the spacing never changes. A
     desc: fades in on hover or keyboard focus, and nothing moves to make room: it sits
     absolutely in the row's padding as the label lifts by a transform. engine.css, THE
     SIDEBAR ROW'S DESCRIPTION, holds the rules. A row with no desc: gains no attribute. %>
-<% sidebar_group = lambda do |title:, admin:, first:, &block|
+<% sidebar_group = lambda do |title:, admin:, first:, header: false, &block|
      name = [title.presence, ("admin" if admin && !title.to_s.match?(/\badmin\b/i))].compact.join(", ").presence
-     tag.div(role: "group", aria: { label: name }, class: ["py-1", ("border-t border-subtle" unless first)], &block)
+     header_html = tag.div(title, class: "px-4 pt-3 pb-1 label-upper font-bold truncate", aria: { hidden: true }, data: { sidebar_group_header: "" }) if header && title.present?
+     tag.div(role: "group", aria: { label: name }, class: ["py-1", ("border-t border-subtle" unless first || glass)]) do
+       safe_join([header_html, capture(&block)].compact)
+     end
    end %>
 <% close_action = "$store.sidebars.linkTreeOpen = false" %>
 
@@ -55,16 +74,20 @@
 <% body_html = capture do %>
   <nav class="flex-1 min-h-0 overflow-y-auto py-1" aria-label="Studio links">
     <% sections.select { |section| section[:links].any? }.each_with_index do |section, index| %>
-      <%= sidebar_group.call(title: section[:title], admin: section[:admin], first: index.zero?) do %>
+      <%= sidebar_group.call(title: section[:title], admin: section[:admin], first: index.zero?, header: section[:header]) do %>
       <% section[:links].each do |link| %>
         <% target = link[:target].presence %>
+        <% line_icon = (studio_icon(link[:icon]) if glass && link[:icon].present?) %>
         <%= link_to link[:href],
               class: "group flex items-center gap-3 px-4 py-3 text-sm text-body hover:text-heading hover:bg-surface-alt focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-inset transition",
               target: target,
               rel: target == "_blank" ? "noopener" : nil,
               "data-sidebar-row-described": (link[:desc].present? ? "" : nil),
+              "aria-current": (current_href.present? && link[:href] == current_href ? "page" : nil),
               "@click": close_action do %>
-          <% if link[:hover_emoji].present? %>
+          <% if line_icon %>
+            <span class="flex-shrink-0" data-sidebar-row-icon><%= line_icon %></span>
+          <% elsif link[:hover_emoji].present? %>
             <%= render "components/emoji_swap",
                   base: link[:emoji],
                   hover: link[:hover_emoji],
@@ -119,8 +142,11 @@
         rather than called: this partial renders in hosts and test rigs that
         provide studio_sidebar_sections without the rest of the helper, and a
         bare call would raise for them. The two must stay the same question —
-        if the helper's rule changes, this changes with it. %>
-    <% if sidebar_admin && sections.any? { |section| section[:admin] } %>
+        if the helper's rule changes, this changes with it.
+
+        A host that moves Geo to its own page sets Studio.sidebar_geo_signpost = false
+        and renders components/_geo_signpost there. %>
+    <% if Studio.sidebar_geo_signpost && sidebar_admin && sections.any? { |section| section[:admin] } %>
       <%= sidebar_group.call(title: "Geo", admin: true, first: false) do %>
         <%= render "components/geo_signpost", variant: :sidebar, close_action: close_action %>
       <% end %>
@@ -130,11 +156,11 @@
 
 <% footer_html = capture do %>
   <% if logged_in? %>
-    <div class="border-t border-subtle p-2">
+    <div class="border-t border-subtle p-2"<% if glass %> data-sidebar-glass-foot<% end %>>
       <%= link_to logout_path,
             class: "flex items-center gap-3 rounded-md px-4 py-3 text-sm text-body hover:text-heading hover:bg-surface-alt focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 transition",
             "@click": close_action do %>
-        <span>👋</span><span>Log out</span>
+        <% if glass %><span class="flex-shrink-0" data-sidebar-row-icon><%= studio_icon("log-out") %></span><% else %><span>👋</span><% end %><span>Log out</span>
       <% end %>
     </div>
   <% end %>
@@ -151,6 +177,7 @@
       escape_action: close_action,
       display_class: "hidden md:flex",
       edge: true,
+      glass: glass,
       role: "navigation",
       aria_label: sidebar_admin ? "Admin menu" : "Links menu" %>
 
@@ -166,5 +193,6 @@
       display_class: "flex md:hidden",
       width_class: "w-full",
       edge: true,
+      glass: glass,
       role: "navigation",
       aria_label: sidebar_admin ? "Admin menu" : "Links menu" %>

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

@@ -19,7 +19,7 @@
     would cover the expanded header. engine.css (THE PINNED EDGE ON THE SCROLL
     TIMELINE) moves it with the header on the scroll timeline instead.
 
-    Three opt-in locals (unset, the panel renders as it did in 0.113.0):
+    Four opt-in locals (unset, the panel renders as it did in 0.113.0):
       title_html  the header's LEAD SLOT: HTML in the title's place, for a panel
                   whose lead is a live status line rather than a label. It is
                   content, NOT a name: it never feeds aria-labelledby or
@@ -30,6 +30,11 @@
                   panel's inner edge, drawn by engine.css (THE SIDEBAR'S EDGE) from md
                   up. It softens the page beside the panel, so it suits a menu that
                   opens over the page, not a panel kept open beside live content.
+      glass       true floats an inset, translucent panel (engine.css, THE GLASS SIDEBAR).
+                  The aside keeps its geometry, its slide and its pinned edge, and turns
+                  into a clear frame around an inner shell, which holds the blur. A
+                  backdrop-filter makes a containing block, and this keeps it off the
+                  element Alpine and Turbo move. Glass ignores `edge`: the whole panel blurs.
       close_hook  true stamps the close button data-sidebar-panel-close="<id>"
                   too, so a host's own document handler can match the button
                   to its panel by id. Needs `id`; without one it adds nothing.
@@ -53,7 +58,9 @@
 <% aria_label     = local_assigns.fetch(:aria_label, title) %>
 <% labelledby     = id.present? && title.present? ? "#{id}-title" : nil %>
 <% close_hook     = local_assigns.fetch(:close_hook, false) && id.present? %>
-<% edge           = local_assigns.fetch(:edge, false) %>
+<% glass          = local_assigns.fetch(:glass, false) %>
+<% edge           = local_assigns.fetch(:edge, false) && !glass %>
+<% surface_class  = glass ? "" : "bg-surface border-l border-subtle shadow-2xl " %>
 
 <aside
   <% if id.present? %>id="<%= id %>"<% end %>
@@ -78,17 +85,20 @@
   x-transition:leave="transition ease-in duration-200"
   x-transition:leave-start="translate-x-0"
   x-transition:leave-end="translate-x-full"
-  class="<%= display_class %> fixed right-0 <%= width_class %> bg-surface border-l border-subtle shadow-2xl <%= z_class %> flex-col <%= panel_class %>"
+  class="<%= display_class %> fixed right-0 <%= width_class %> <%= surface_class %><%= z_class %> flex-col <%= panel_class %>"
   style="top:var(--nav-bottom, var(--nav-h, 6rem));height:calc(100% - var(--nav-bottom, var(--nav-h, 6rem)))"
   data-pin-edge
   <% if edge %>
   data-sidebar-edge
   <% end %>
+  <% if glass %>
+  data-sidebar-glass
+  <% end %>
   role="<%= role %>"
   <% if labelledby %>aria-labelledby="<%= labelledby %>"<% elsif aria_label.present? %>aria-label="<%= aria_label %>"<% end %>>
-  <div class="flex flex-col h-full">
+  <div class="flex flex-col h-full"<% if glass %> data-sidebar-glass-shell<% end %>>
     <% if title.present? || title_html.present? || actions_html.present? || close_action.present? %>
-      <div class="flex items-center justify-between p-4 border-b border-subtle">
+      <div class="flex items-center justify-between p-4 border-b border-subtle"<% if glass %> data-sidebar-glass-head<% end %>>
         <% if title.present? %>
           <h3 <% if labelledby %>id="<%= labelledby %>"<% end %> class="text-lg font-bold text-heading"><%= title %></h3>
         <% elsif title_html.present? %>

data/app/views/layouts/studio/_head.html.erb

@@ -198,6 +198,12 @@
 <% if sticky_table_headers %>
   <%= stylesheet_link_tag "studio/sticky_table_header", "data-turbo-track": "reload" %>
 <% end %>
+<%# THE PAGE-LOAD OVERLAY, FOR EVERY APP. The body is the host's, so the overlay waits
+    here, inert, and studio/loader adds it to the body when a visit starts. A host's own
+    studio_loader_overlay wins. Studio.loader_overlay = false opts out. docs/LOADER.md. %>
+<% if Studio.loader_overlay && respond_to?(:studio_loader_overlay) %>
+  <template data-studio-loader-overlay-template><%= studio_loader_overlay %></template>
+<% end %>
 <%= javascript_importmap_tags %>
 <%# EVERY ENGINE SCRIPT BELOW IS A MODULE, AND EVERY MODULE TAG COMES AFTER THE
     IMPORT MAP. A browser without dynamic import maps ignores an import map that
@@ -207,12 +213,17 @@
     carry no body and need no nonce under a policy that allows 'self'. The session
     store (studio/_session_stamp, above) and the full-load script above are the two
     classic scripts, and each says why.
-    A MODULE LOADED BY URL MUST IMPORT NO BARE SPECIFIER. javascript_include_tag
-    also sends a `Link: rel=modulepreload` response header, which the browser
-    acts on before it parses this map, so a bare import in that module can
-    resolve against no map at all and fail for good (0.115.1.rc1, task
+    A MODULE TAG BY URL SENDS NO PRELOAD HEADER. javascript_include_tag answers
+    type: "module" with a `Link: rel=modulepreload` response header unless the call
+    passes preload_links_header: false, and the browser acts on that header before it
+    parses this map. Firefox then refuses the map outright ("Import maps are not allowed
+    after a module load or preload has started"), so every bare studio/* import on the
+    page fails and no panel opens (task firefox-import-map-preload,
+    test/views/head_sends_no_module_preload_test.rb).
+    A MODULE LOADED BY URL ALSO IMPORTS NO BARE SPECIFIER. A preload that arrived some
+    other way would resolve it against no map and fail for good (0.115.1.rc1, task
     confetti-resolves-on-hub). A module with bare imports takes a
-    javascript_import_module_tag, which sends no header. %>
+    javascript_import_module_tag. %>
 <%# THE ENGINE'S BROWSER BOOT (studio/application): its every-page Stimulus
     controllers, the pinned stack, and the Alpine shims. A module tag, so it
     carries the nonce. %>
@@ -311,7 +322,7 @@
     assigns window.Alpine and starts Alpine in a microtask after it is evaluated,
     which as a module is after every module above it. window.Alpine is not
     deprecated; Alpine itself and every host read it. %>
-<%= javascript_include_tag "studio/alpine", type: "module", "data-turbo-track": "reload" %>
+<%= javascript_include_tag "studio/alpine", type: "module", preload_links_header: false, "data-turbo-track": "reload" %>
 <% if sticky_table_headers %>
-  <%= javascript_include_tag "studio/sticky_table_header", type: "module", "data-turbo-track": "reload" %>
+  <%= javascript_include_tag "studio/sticky_table_header", type: "module", preload_links_header: false, "data-turbo-track": "reload" %>
 <% end %>

data/app/views/layouts/studio/_smooth_load.html.erb

@@ -21,4 +21,5 @@
 <% end %>
 <% if page_transition_direction %>
   <meta name="page-transition-direction" content="<%= page_transition_direction %>">
+  <meta name="page-transition-style" content="<%= @studio_page_transition_style || Studio.page_transition_style %>">
 <% end %>

data/app/views/layouts/studio/component_preview.html.erb

@@ -3,7 +3,7 @@
     so a preview looks as it does in the app, and nothing else: no navbar, no
     session, no script. -%>
 <!DOCTYPE html>
-<html>
+<html<%= %( data-surface-style="glass").html_safe if Studio.surface_style == :glass %>>
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1">

data/app/views/registrations/new.html.erb

@@ -81,9 +81,10 @@
 
       <% if Studio.auth_method?(:google) %>
         <% if email_signup %>
-          <div class="relative my-6">
-            <div class="absolute inset-0 flex items-center"><div class="w-full border-t border-subtle"></div></div>
-            <div class="relative flex justify-center text-sm"><span class="bg-surface px-3 text-secondary">or</span></div>
+          <div class="flex items-center gap-3 my-6 text-sm">
+            <div class="flex-1 border-t border-subtle"></div>
+            <span class="text-secondary">or</span>
+            <div class="flex-1 border-t border-subtle"></div>
           </div>
         <% end %>
 

data/app/views/sessions/new.html.erb

@@ -81,9 +81,10 @@
 
       <% if Studio.auth_method?(:google) %>
         <% if Studio.password_login_available? || Studio.auth_method?(:magic_link) %>
-          <div class="relative my-6">
-            <div class="absolute inset-0 flex items-center"><div class="w-full border-t border-subtle"></div></div>
-            <div class="relative flex justify-center text-sm"><span class="bg-surface px-3 text-secondary">or</span></div>
+          <div class="flex items-center gap-3 my-6 text-sm">
+            <div class="flex-1 border-t border-subtle"></div>
+            <span class="text-secondary">or</span>
+            <div class="flex-1 border-t border-subtle"></div>
           </div>
         <% end %>
 

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

@@ -42,8 +42,9 @@
     <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="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 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/_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. %>
+<%# 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. %>
 <% 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" %>"
@@ -16,4 +16,6 @@
   <% end %>
   <p class="<%= agent ? "self-start" : "self-end" %> text-xs text-danger-ink" data-agent-chat-failed data-test="agent-chat-failed"
      <%= "hidden" unless status == "failed" %>><%= name %> could not answer this one. Send it again.</p>
+  <p class="<%= agent ? "self-start" : "self-end" %> text-xs text-muted" data-agent-chat-held data-test="agent-chat-held"
+     <%= "hidden" unless status == "held" %>>Your message was received, but it won't get an automatic answer.</p>
 </div>

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

@@ -7,16 +7,19 @@
     No audio is kept. Status lines are set as text.
 
     Scoped CSS for the reason studio/voice/_styles gives: it must render in an
-    app whose Tailwind build never saw this file. The status line keeps its one
-    line even when empty, so a one-line status coming or going under a held finger
-    does not move the button. Two things still can at 390px outside a stuck composer,
-    and the pointer stays captured through both: the quiet hint wrapping to two lines,
-    and the chip's prompt shortening on the first hold. %>
+    app whose Tailwind build never saw this file. A held button must not move, stuck
+    or not, so everything above and below it keeps its size through a hold: the
+    status line reserves the two lines the quiet hint wraps to at phone width (one
+    where the composer is wide enough), and holds its height through the hold
+    (holdLine, studio/agent_chat_voice); the chip is always one line, whatever name it
+    shows; the timer sits on the button, not beside it; and the recorder's own line
+    never shows here. e2e/agent_chat_voice.spec.js measures all of it at 390px. %>
 <% words = Studio::AgentChat.voice_copy(copy) %>
 <style>
-  .studio-agent-voice { display: grid; gap: .25rem; padding: 0 .25rem .25rem; min-width: 0; }
-  .studio-agent-voice-status { min-height: 1.25rem; margin: 0; padding: 0 .5rem; font-size: .875rem; line-height: 1.25rem; overflow-wrap: anywhere;
+  .studio-agent-voice { display: grid; gap: .25rem; padding: 0 .25rem .25rem; min-width: 0; container-type: inline-size; }
+  .studio-agent-voice-status { min-height: 2.5rem; margin: 0; padding: 0 .5rem; font-size: .875rem; line-height: 1.25rem; overflow-wrap: anywhere;
     color: var(--color-text-body, inherit); }
+  @container (min-width: 36rem) { .studio-agent-voice-status { min-height: 1.25rem; } }
   .studio-agent-voice-failed { display: none; margin: 0; padding: 0 .5rem; font-size: .8125rem; color: var(--color-text-secondary, inherit); }
   [data-studio-controller-failed~="agent-chat-voice"] > .studio-agent-voice-failed { display: block; }
   /* One row where both fit; on a phone the chip takes the first line and the
@@ -24,18 +27,30 @@
   .studio-agent-voice-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; min-width: 0; }
   .studio-agent-voice-row .studio-mic { display: contents; }
   .studio-agent-voice-row .studio-mic-chip { flex: 1 1 14rem; min-width: 0; }
-  .studio-agent-voice-row .studio-mic-panel { flex: 1 0 100%; max-width: none; order: 3; }
+  .studio-agent-voice-row .studio-mic-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  /* The composer sticks to the window's bottom, so what doesn't fit is cut off at the
+     top, the chip with it. The picker scrolls inside what the rest leaves it: 20rem is
+     the composer's 15rem at 390px, the privacy line under it, and a margin. */
+  .studio-agent-voice-row .studio-mic-panel { flex: 1 0 100%; max-width: none; order: 3; align-content: start; overflow-y: auto; overscroll-behavior: contain;
+    max-height: max(6rem, calc(100vh - 20rem)); max-height: max(6rem, calc(100dvh - 20rem)); }
   .studio-agent-voice-row .studio-mic-failed { flex: 1 0 100%; order: 4; }
-  .studio-agent-voice-row .studio-recorder { flex: 1 1 10rem; min-width: 0; flex-flow: row wrap; justify-content: flex-end; gap: .5rem; }
+  /* 14rem: the label and, either side of it, the timer's room. Narrower, the two overlap. */
+  .studio-agent-voice-row .studio-recorder { flex: 1 1 14rem; min-width: 0; flex-flow: row wrap; justify-content: flex-end; gap: .5rem; }
   .studio-agent-voice-row .studio-recorder-button { flex: 1 1 10rem; min-width: 0; padding: .625rem 1rem; }
   .studio-agent-voice-row .studio-recorder-timer { display: none; }
-  .studio-agent-voice-row [data-voice-recorder-state="recording"] .studio-recorder-timer { display: inline; }
+  /* On the button, not beside it: beside it, it took 40px off a held button. */
+  .studio-agent-voice-row .studio-recorder { position: relative; }
+  .studio-agent-voice-row [data-voice-recorder-state="recording"] .studio-recorder-timer { display: inline; position: absolute; top: 50%; right: 1rem; transform: translateY(-50%);
+    pointer-events: none; color: var(--btn-primary-fg, #fff); }
   .studio-agent-voice-row .studio-recorder-status { flex: 1 0 100%; min-height: 0; max-width: none; font-size: .875rem; }
-  /* The chat's status line speaks for these three; a second live line would say
-     them twice, and its coming and going would move a held button. */
+  /* The chat's status line speaks for these; a second live line would say them
+     twice, and its coming and going would move a held button. */
   .studio-agent-voice-row .studio-recorder-status:empty,
   .studio-agent-voice-row [data-voice-recorder-state="recording"] .studio-recorder-status,
-  .studio-agent-voice-row [data-voice-recorder-state="silent"] .studio-recorder-status { display: none; }
+  .studio-agent-voice-row [data-voice-recorder-state="silent"] .studio-recorder-status,
+  .studio-agent-voice-row [data-voice-recorder-state="failed"] .studio-recorder-status,
+  .studio-agent-voice-row [data-voice-recorder-state="denied"] .studio-recorder-status,
+  .studio-agent-voice-row [data-voice-recorder-state="tapped"] .studio-recorder-status { display: none; }
   .studio-agent-voice-row .studio-recorder-failed { flex: 1 0 100%; }
 </style>
 <div class="studio-agent-voice" role="group" aria-label="Talk to <%= name %>"

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

@@ -1,14 +1,14 @@
-<%# locals: (label:, delay:, max_wait:, size:, options: {}) %>
+<%# locals: (label:, delay:, min_show:, max_wait:, size:, options: {}) %>
 <%#
   The page-load overlay (Studio::LoaderHelper#studio_loader_overlay). Rendered
   hidden, once per page; studio/loader shows it when a visit the user started
-  or a form marked data-studio-loader-overlay outlasts data-delay ms, clears it
-  after data-max-wait ms at most, and window.StudioLoader.show(caption) /
+  or a form marked data-studio-loader-overlay outlasts data-delay ms, keeps it
+  data-min-show ms once shown, clears it after data-max-wait ms at most, and window.StudioLoader.show(caption) /
   hide() drive it for any other long wait. The caption line is empty until a
   caller names one. It never marks itself aria-busy: that would mute the
   "Loading" status inside it.
 %>
-<%= tag.div(class: "studio-loader-overlay", hidden: true, data: { studio_loader_overlay: "", delay: delay, max_wait: max_wait }) do %>
+<%= tag.div(class: "studio-loader-overlay", hidden: true, data: { studio_loader_overlay: "", delay: delay, min_show: min_show, max_wait: max_wait }) do %>
   <div class="studio-loader-overlay-panel">
     <%= studio_loader(size: size, label: label, **options) %>
     <p class="studio-loader-caption" data-studio-loader-caption></p>

data/app/views/style/_components.html.erb

@@ -7,10 +7,8 @@
     to a 404. -%>
 <section id="components" class="space-y-6" style="scroll-margin-top: calc(var(--nav-h, 0px) + 5rem)">
   <div class="space-y-1">
-    <h2 class="text-2xl font-bold text-heading">Components</h2>
-    <p class="text-muted text-sm max-w-2xl">
-      The engine's ViewComponent classes, one preview per state, in the component gallery.
-    </p>
+    <h2 class="type-h3 text-heading">Components</h2>
+    <p class="text-muted text-sm max-w-2xl">One preview per state, in the component gallery.</p>
   </div>
 
   <% if Studio.lookbook_mounted? %>

data/app/views/style/_glass.html.erb

@@ -0,0 +1,83 @@
+<%# The glass surfaces, the glass sidebar and the line icons (Studio.surface_style,
+    Studio.sidebar_style, studio_icon). Real classes and the real helper, so a change to any
+    of them shows here. The stage has a hard-edged backing because glass needs something
+    behind it: on a flat page it looks like a flat tint. Each specimen says whether this app
+    has turned its switch on, because the surface rules only apply when it has. %>
+<%
+  glass_backing = "rounded-xl p-4 [background-image:repeating-linear-gradient(135deg,rgb(var(--color-primary-rgb)/0.55)_0_14px,transparent_14px_28px)]"
+  surface_on = Studio.surface_style == :glass
+  sidebar_on = Studio.sidebar_style == :glass
+%>
+<section class="space-y-4" data-test="style-glass">
+  <div>
+    <h3 class="type-h4 text-heading">Glass</h3>
+    <p class="text-sm text-secondary mt-1">Each one is opt-in per app.</p>
+  </div>
+  <div class="grid gap-4 md:grid-cols-2">
+    <%= render layout: "style/specimen",
+          locals: { klass: "Studio.surface_style = :glass",
+                    usage: %(config.surface_style = :glass, and <html data-surface-style="glass">),
+                    disabled: !surface_on, disabled_label: "surface style is off on this app" } do %>
+      <div class="<%= glass_backing %> w-full space-y-2" data-test="style-glass-surfaces">
+        <div class="card p-3 text-sm text-heading">.card, the dense tier: no blur</div>
+        <div class="card surface-glass-blur p-3 text-sm text-heading">.card.surface-glass-blur</div>
+      </div>
+    <% end %>
+    <%= render layout: "style/specimen",
+          locals: { klass: "Studio.sidebar_style = :glass",
+                    usage: %(config.sidebar_style = :glass),
+                    disabled: !sidebar_on, disabled_label: "glass sidebar is off on this app" } do %>
+      <div class="<%= glass_backing %> w-full" data-test="style-glass-sidebar">
+        <div class="flex flex-col" data-sidebar-glass-shell>
+          <nav aria-label="Glass sidebar specimen">
+            <div role="group" class="pt-2.5">
+              <a href="#tricks" class="group flex items-center" aria-current="page"><span class="flex-shrink-0" data-sidebar-row-icon><%= studio_icon("chart-column") %></span><span class="min-w-0"><span class="block truncate">Current page</span></span></a>
+              <a href="#tricks" class="group flex items-center" data-sidebar-row-described><span class="flex-shrink-0" data-sidebar-row-icon><%= studio_icon("rocket") %></span><span class="relative min-w-0 flex-1"><span class="block truncate" data-sidebar-row-label>Hover this row</span><span class="block truncate text-xs text-muted" data-sidebar-row-desc>Its description moves nothing</span></span></a>
+            </div>
+          </nav>
+        </div>
+      </div>
+      <% if respond_to?(:studio_sidebar?) && studio_sidebar? %>
+        <button type="button" class="btn btn-sm btn-outline mt-3" @click="$store.sidebars.linkTreeOpen = true" data-test="style-glass-open">Open the real sidebar</button>
+      <% end %>
+    <% end %>
+    <%= render layout: "style/specimen",
+          locals: { klass: "Lit from above, under surface_style = :glass",
+                    usage: %(.btn-primary, .btn-danger, .btn-neutral, .badge, .input-field),
+                    disabled: !surface_on, disabled_label: "surface style is off on this app" } do %>
+      <div class="w-full overflow-x-auto" data-test="style-lit-states">
+        <table class="text-xs text-muted">
+          <thead><tr><th></th><% %w[rest hover pressed focus disabled].each do |state| %><th class="font-medium text-left"><%= state %></th><% end %></tr></thead>
+          <tbody>
+            <% [["btn-primary", "Primary"], ["btn-secondary", "Secondary"], ["btn-success", "Success"], ["btn-danger", "Danger"], ["btn-warning", "Warning"], ["btn-primary btn-sm", "Small"], ["btn-neutral btn-sm", "Neutral"], ["btn-outline btn-sm", "Outline"]].each do |classes, label| %>
+              <tr>
+                <th class="font-medium text-left pr-2"><%= label %></th>
+                <% [nil, "hover", "pressed", "focus"].each do |state| %>
+                  <td class="p-1.5"><button type="button" class="btn <%= classes %>" tabindex="-1" <%= %(data-lit-state="#{state}").html_safe if state %>>Go</button></td>
+                <% end %>
+                <td class="p-1.5"><button type="button" class="btn <%= classes %>" disabled>Go</button></td>
+              </tr>
+            <% end %>
+          </tbody>
+        </table>
+        <div class="flex flex-wrap items-center gap-2 mt-3">
+          <span class="badge text-heading border-subtle">Badge</span>
+          <span class="badge" style="color: var(--color-success-ink); border-color: var(--color-success)">Live</span>
+          <input class="input-field max-w-[12rem]" type="text" value="Input, pressed in" aria-label="Input specimen" readonly>
+        </div>
+      </div>
+    <% end %>
+    <%= render layout: "style/specimen",
+          locals: { klass: "studio_icon(name, size: 18)",
+                    usage: %(studio_icon("rocket", size: 22)) } do %>
+      <ul class="grid grid-cols-4 gap-3 w-full text-heading" data-test="style-glass-icons">
+        <% Studio::Icons.names.each do |name| %>
+          <li class="flex flex-col items-center gap-1 min-w-0" title="<%= name %>">
+            <%= studio_icon(name, size: 22) %>
+            <span class="text-3xs text-muted truncate max-w-full"><%= name %></span>
+          </li>
+        <% end %>
+      </ul>
+    <% end %>
+  </div>
+</section>

data/app/views/style/_host.html.erb

@@ -93,16 +93,8 @@
 <section id="host-modals" class="space-y-8" x-data="{}"
          style="scroll-margin-top: calc(var(--nav-h, 0px) + 5rem)">
   <div class="space-y-1">
-    <h2 class="text-2xl font-bold text-heading"><%= Studio.app_name %></h2>
-    <p class="text-muted text-sm max-w-2xl">
-      This app&rsquo;s own modals, contributed by
-      <code class="font-mono text-2xs bg-inset px-1.5 py-0.5 rounded">app/views/style/host/_modals.html.erb</code>.
-      Every section above belongs to the engine and is inherited; everything
-      here belongs to <%= Studio.app_name %> and ships with it. These specimens
-      drive the app&rsquo;s <strong>real</strong>
-      <code class="font-mono text-2xs bg-inset px-1.5 py-0.5 rounded">$store.modals</code>
-      host, so the card that opens here is the card that opens in production.
-    </p>
+    <h2 class="type-h3 text-heading"><%= Studio.app_name %></h2>
+    <p class="text-muted text-sm max-w-2xl">This app&rsquo;s own modals, from <code class="font-mono text-2xs">app/views/style/host/_modals.html.erb</code>.</p>
   </div>
 
   <%# The app's content. Reached only when it resolves - style/index.html.erb