studio-engine 0.122.0 → 0.124.0

data/app/views/layouts/_navbar.html.erb

@@ -23,8 +23,9 @@
     put — hosts no longer shadow this partial just to add the class. Non-preview
     branch ONLY: preview renders can repeat per page, and a duplicate
     view-transition-name silently disables every transition. With the flag off,
-    nothing extra renders. %>
-<% pin_header = Studio.smooth_load && !is_preview %>
+    nothing extra renders. Studio.page_transition_direction turns the same flag
+    on (layouts/studio/_smooth_load). %>
+<% pin_header = (Studio.smooth_load || @studio_page_transition_direction || Studio.page_transition_direction) && !is_preview %>
 <% balance_html = local_assigns.fetch(:balance_html, nil) %>
 <% extra_icons_html = local_assigns.fetch(:extra_icons_html, nil) %>
 <%# The user nav's slot locals, forwarded only when passed, so a navbar that
@@ -244,8 +245,9 @@
         <%= render "components/user_nav", balance_html: balance_html, extra_icons_html: extra_icons_html, **user_nav_slots %>
       <% else %>
         <div class="flex items-center justify-end gap-3">
-          <%= sidebar_trigger_desktop if sidebar_active %>
+          <%# The signed-in rail's order: the theme toggle, then the gear. %>
           <span class="hidden md:flex"><%= render "components/theme_toggle_morph" %></span>
+          <%= sidebar_trigger_desktop if sidebar_active %>
           <% if signed_out_cta %>
           <%# sign_in_link: false drops the quiet link (the CTA is the sign-in);
               sign_in_path points it elsewhere; modal: opens a modal from the
@@ -277,6 +279,8 @@
       <% if signed_out_cta && signed_out_cta[:sign_in_link] != false %>
       <%= link_to Studio.sign_in_label, signed_out_cta[:sign_in_path] || login_path, class: "text-xs font-semibold text-secondary hover:text-primary whitespace-nowrap transition", data: { nav_sign_in: "" } %>
       <% end %>
+      <%# The rail's order at this width too: the theme toggle, then the gears. %>
+      <%= render "components/theme_toggle_morph" %>
       <%= render "components/link_sidebar_trigger" if sidebar_active %>
       <%# Studio.navbar_menu_trigger takes the admin dropdown's seat here too: its
           second render (the rail is the first), so the partial carries no ids. %>
@@ -286,7 +290,6 @@
       <% else %>
       <%= render "components/admin_dropdown" unless sidebar_active && studio_sidebar_replaces_admin_menu? %>
       <% end %>
-      <%= render "components/theme_toggle_morph" %>
     </span>
   </div>
 </header>

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

@@ -208,6 +208,12 @@
     controllers, the pinned stack, and the Alpine shims. A module tag, so it
     carries the nonce. %>
 <%= javascript_import_module_tag "studio/application" %>
+<%# THE PAGE TRANSITION, BY ITS OWN DOOR, only with the setting on: an app without
+    it fetches nothing and renders these bytes as before. Not in the boot graph, so
+    it is not preloaded either. Its listeners are bound before the first visit. %>
+<% if @studio_page_transition_direction || Studio.page_transition_direction %>
+  <%= javascript_import_module_tag "studio/page_transitions" %>
+<% end %>
 <%# THE STIMULUS APPLICATION, BY ITS OWN DOOR. studio/stimulus starts the engine's
     Stimulus application and registers the hold button on it. Its only imports
     are Stimulus, studio/lazy_controllers and the hold button's controller, so

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

@@ -8,8 +8,17 @@
     Transition styling ships in engine.css ("Smooth-load convention" block);
     pin an app's sticky header with the .vt-pinned-header utility (exactly one
     element per page — a duplicate view-transition-name silently disables the
-    whole transition). %>
-<% if Studio.smooth_load %>
+    whole transition).
+
+    Studio.page_transition_direction is the one switch for the app-to-app page
+    transition (docs/PAGE_TRANSITIONS.md): set, it turns all of this on, whatever
+    Studio.smooth_load says. The ivar lets one request set it without writing the
+    process-wide setting (the e2e lab). %>
+<% page_transition_direction = @studio_page_transition_direction || Studio.page_transition_direction %>
+<% if Studio.smooth_load || page_transition_direction %>
   <meta name="view-transition" content="same-origin">
   <meta name="turbo-cache-control" content="no-preview">
 <% end %>
+<% if page_transition_direction %>
+  <meta name="page-transition-direction" content="<%= page_transition_direction %>">
+<% end %>

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

@@ -0,0 +1,65 @@
+<%# locals: (title:, meta: nil, meta_title: nil, label: nil, tabs: [], tabs_data: {}, actions_html: nil, data: {}, row_class: "-mx-4 px-4") %>
+<%# THE PAGE HEADER: the second layer of the triple stack (docs/PAGE_HEADER.md).
+    navbar, then this row, then a table's sticky header, each below the last.
+
+    AT REST it has no background and no border: a title on the left, tabs on the
+    right. ONCE STUCK under the navbar it takes the bar. Its box never changes
+    between the two, so a state change moves nothing and republishes nothing.
+
+      title         the page's one h1.
+      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.
+      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.
+      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.
+
+    NOT components/_page_header: a host's view wins over the engine's at the same
+    path, and the hub has its own with other locals.
+
+    THE ROW IS NEVER A <header>. studio/pinned_stack takes the document's first
+    <header> as the navbar, so on a page with no navbar this row would publish as
+    --nav-bottom.
+
+    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,
+    such as the sticky table header's clone, sits under the row with no edit.
+
+    THE SENTINEL stays at the row's place in the flow, and the row's distance from
+    it is what "stuck" means, on every kind of header. It is absolutely positioned,
+    so a space-y parent adds nothing for it. It carries the controller, so the row
+    keeps its data-studio-controller for the 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,
+      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 %>
+  <div class="page-header-lead">
+    <h1 class="page-header-title"><%= title %></h1>
+    <% if meta.present? %>
+      <p class="page-header-meta label-upper"<%= %( title="#{ERB::Util.h(meta_title)}").html_safe if meta_title.present? %>><%= meta %></p>
+    <% end %>
+  </div>
+  <% if tabs.any? %>
+    <%= tag.div(class: "page-header-tabs", data: tabs_data) do %>
+      <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'}",
+                aria: { current: tab[:current].presence },
+                data: tab.fetch(:data, {}) %>
+        <% end %>
+      </div>
+    <% end %>
+  <% elsif actions_html.present? %>
+    <div class="page-header-actions"><%= actions_html %></div>
+  <% end %>
+<% end %>

data/app/views/studio/admin_models/_sessions_table.html.erb

@@ -0,0 +1,28 @@
+<%# locals: (records:) %>
+<div class="overflow-x-auto">
+  <table id="models-sessions-table" class="w-full min-w-[640px] text-sm">
+    <thead class="bg-surface-alt text-muted text-xs uppercase tracking-wide">
+      <tr>
+        <th class="px-4 py-3 text-left font-semibold">User</th>
+        <th class="px-4 py-3 text-left font-semibold">Started</th>
+        <th class="px-4 py-3 text-left font-semibold">Last seen</th>
+      </tr>
+    </thead>
+    <tbody class="divide-y divide-subtle">
+      <% records.each do |row| %>
+        <tr>
+          <td class="px-4 py-3">
+            <% user = row.user %>
+            <span class="font-semibold text-heading"><%= user ? (user.email.presence || user.try(:display_name).presence || "User ##{user.id}") : "Deleted user" %></span>
+            <% if row.admin %><span class="ml-2 label-upper">admin</span><% end %>
+          </td>
+          <td class="px-4 py-3 text-muted whitespace-nowrap"><%= time_ago_in_words(row.started_at) %> ago</td>
+          <td class="px-4 py-3 text-muted whitespace-nowrap"><%= time_ago_in_words(row.last_seen_at) %> ago</td>
+        </tr>
+      <% end %>
+      <% if records.empty? %>
+        <tr><td colspan="3" class="px-4 py-6 text-muted">No sessions yet.</td></tr>
+      <% end %>
+    </tbody>
+  </table>
+</div>

data/app/views/studio/admin_models/show.html.erb

@@ -1,17 +1,20 @@
 <% content_for(:title, "#{@config.fetch(:label)} - Models - Admin") %>
 
-<div class="max-w-7xl mx-auto px-4 py-8 space-y-6">
-  <header class="flex flex-col gap-3 md:flex-row md:items-end md:justify-between">
-    <div>
-      <p class="text-xs text-muted uppercase tracking-wide font-semibold">Admin Models</p>
-      <h1 class="text-heading text-2xl font-bold mt-1"><%= @config.fetch(:label) %></h1>
-      <p class="text-muted text-sm mt-1">
-        <%= @config.fetch(:description) %>.
-        Page <%= @page %> of <%= @total_pages %>, <%= @total_count %> total.
-      </p>
-    </div>
-    <%= link_to "Back to models", admin_models_path, class: "btn btn-outline" %>
-  </header>
+<div class="max-w-7xl mx-auto px-4 pt-6 pb-8 space-y-6">
+  <%# The title and a tab per model: studio/_page_header, as on /admin/style. A
+      tab is a link, so the open one is the page's own model. The table's sticky
+      header sits under this row (docs/PAGE_HEADER.md). %>
+  <%= render "studio/page_header",
+        title: "Models",
+        label: "Models",
+        tabs: admin_model_configs.map { |key, config|
+          { label: config.fetch(:label), href: admin_model_path(key), current: (key.to_s == @key ? "page" : nil) }
+        } %>
+
+  <p class="text-muted text-sm">
+    <%= @config.fetch(:description) %>.
+    Page <%= @page %> of <%= @total_pages %>, <%= @total_count %> total.
+  </p>
 
   <section class="card overflow-hidden">
     <%= render admin_models_table_partial(@key), records: @records %>

data/app/views/studio/admin_surveys/index.html.erb

@@ -3,8 +3,8 @@
     first answer, never on a page view. %>
 <% content_for(:title, "Surveys") %>
 <div class="max-w-4xl mx-auto px-4 py-6" data-admin-surveys>
-  <h1 class="text-2xl font-extrabold text-heading mb-1">Surveys</h1>
-  <p class="text-sm text-secondary mb-6">Defined in <code>config/surveys/</code>. A response counts as started at its first answer.</p>
+  <%= render "studio/page_header", title: "Surveys" %>
+  <p class="text-sm text-secondary mt-1 mb-6">Defined in <code>config/surveys/</code>. A response counts as started at its first answer.</p>
 
   <% if @rows.empty? %>
     <div class="empty-state">

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

@@ -1,4 +1,4 @@
-<%# locals: (soul:, name:, portrait: nil, role: nil, empty: nil, cards: nil) %>
+<%# locals: (soul:, name:, portrait: nil, role: nil, empty: nil, cards: nil, voice: false, voice_copy: nil) %>
 <%#
   The shared agent chat (docs/AGENT_CHAT.md): one conversation with one agent,
   held by the hub, on any app's page.
@@ -13,15 +13,25 @@
   cards     THE CARD SLOT: ready markup shown between the header and the
             thread (/build's intake cards). A local, never a bare yield: a
             partial rendered without a block yields the LAYOUT's body.
+  voice     true puts hold to talk in the composer's mic slot, with the privacy
+            line under it. It still shows only where the app turned takes on
+            (Studio.voice_transcription) and only to a user
+            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).
 
   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
   drawn by studio/agent_chat (the "agent-chat" controller, loaded lazily) from
   the two <template>s below, which are studio/agent_chat/_turn: the look lives
   here, in ERB, and the script only fills it. ONE PAGE HOLDS ONE CHAT.
+
+  A viewer Studio.agent_chat_allowed refuses gets nothing here: the proxy would
+  answer them 403 on every poll.
 %>
 <% 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"
          data-studio-controller="agent-chat" data-test="agent-chat"
          data-agent-chat-soul="<%= soul %>" data-agent-chat-name="<%= name %>"
@@ -45,8 +55,13 @@
       <p class="text-sm text-body min-w-0">Can't reach <%= name %> right now. Your messages are safe; try again in a moment.</p>
       <button type="button" class="btn btn-secondary btn-sm shrink-0" data-agent-chat-retry data-test="agent-chat-retry">Try again</button>
     </div>
-    <%= render "studio/agent_chat/form", soul: soul, name: name %>
+    <% mic = render("studio/agent_chat/voice", soul: soul, name: name, copy: voice_copy) if voice && studio_agent_chat_voice? %>
+    <%= render "studio/agent_chat/form", soul: soul, name: name, mic: mic %>
+    <% if mic %>
+      <p class="px-3 text-center text-xs text-secondary break-words" data-test="agent-chat-voice-privacy"><%= Studio::AgentChat.voice_copy(voice_copy)["privacy"] %></p>
+    <% end %>
   </div>
   <template data-agent-chat-template="user"><%= render "studio/agent_chat/turn", turn: { "role" => "user" }, name: name %></template>
   <template data-agent-chat-template="agent"><%= render "studio/agent_chat/turn", turn: { "role" => "agent" }, name: name %></template>
 </section>
+<% end %>

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

@@ -1,9 +1,9 @@
-<%# locals: (soul:, name:) %>
-<%# The chat's composer (studio/agent_chat/_chat), as the hub's agent_chats/_form: the text over a round send button at its bottom right, sticky at the window's bottom. Enter sends; Shift+Enter is a new line (studio/agent_chat). It posts to POST /agent_chat/messages with the page's authenticity token (form_with adds it; the script sends it as X-CSRF-Token). A send that fails keeps the words in the box and says why above them. %>
+<%# locals: (soul:, name:, mic: nil) %>
+<%# The chat's composer (studio/agent_chat/_chat), as the hub's agent_chats/_form: the text over a round send button at its bottom right, sticky at the window's bottom. Enter sends; Shift+Enter is a new line (studio/agent_chat). It posts to POST /agent_chat/messages with the page's authenticity token (form_with adds it; the script sends it as X-CSRF-Token). A send that fails keeps the words in the box and says why above them. `mic` is the mic slot: ready markup under the box (studio/agent_chat/_voice), nothing without it. %>
 <%= form_with url: studio_agent_chat_messages_path, method: :post, local: true,
               html: { style: "view-transition-name: agent-composer;" },
               class: "sticky bottom-3 z-10 rounded-3xl border border-subtle bg-surface shadow-lg focus-within:border-primary transition-colors p-2 flex flex-col gap-2",
-              data: { agent_chat_form: true, turbo: false, test: "agent-chat-form" } do |f| %>
+              data: { agent_chat_form: true, turbo: false, test: "agent-chat-form", vt_morph: ("agent-composer" if @studio_page_transition_direction || Studio.page_transition_direction) } do |f| %>
   <%= hidden_field_tag :soul, soul, id: nil %>
   <p class="px-3 pt-1 text-xs text-danger-ink" role="alert" data-agent-chat-error hidden data-test="agent-chat-error"></p>
   <p class="sr-only" role="status" aria-live="polite" data-agent-chat-status data-test="agent-chat-status"></p>
@@ -20,4 +20,5 @@
       </svg>
     </button>
   </div>
+  <%= mic %>
 <% end %>

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

@@ -1,7 +1,7 @@
 <%# locals: (name:, portrait: nil, role: nil) %>
 <%# The chat's head (studio/agent_chat/_chat): the agent's portrait, a big circle centered on top, its name and role under it. `portrait` is ready markup; with none, the name's initial on a plain circle. The portrait keeps one view-transition name, as on the hub's agent pages. %>
 <div class="flex flex-col items-center gap-2 text-center min-w-0" data-test="agent-chat-header" data-agent-name="<%= name %>">
-  <div class="rounded-full shadow-md overflow-hidden" style="view-transition-name: agent-portrait;" data-test="agent-chat-portrait">
+  <div class="rounded-full shadow-md overflow-hidden" style="view-transition-name: agent-portrait;"<% if @studio_page_transition_direction || Studio.page_transition_direction %> data-vt-morph="agent-portrait"<% end %> data-test="agent-chat-portrait">
     <% if portrait.present? %>
       <%= portrait %>
     <% else %>

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

@@ -0,0 +1,54 @@
+<%# locals: (soul:, name:, copy: nil) %>
+<%# Hold to talk, in the composer's mic slot (studio/agent_chat/_form;
+    docs/AGENT_CHAT.md, "Talking by voice"). The engine's microphone chip and
+    recorder capture the take; studio/agent_chat_voice (the lazy
+    "agent-chat-voice" controller) embeds it on this device when the page names
+    an embedder, posts it to POST /voice/takes and sends the words to the chat.
+    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. %>
+<% 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;
+    color: var(--color-text-body, inherit); }
+  .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
+     talk button the whole of the second. */
+  .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-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; }
+  .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; }
+  .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. */
+  .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 .studio-recorder-failed { flex: 1 0 100%; }
+</style>
+<div class="studio-agent-voice" role="group" aria-label="Talk to <%= name %>"
+     data-studio-controller="agent-chat-voice" data-agent-chat-voice data-test="agent-chat-voice"
+     data-agent-chat-voice-state="idle"
+     data-agent-chat-voice-soul="<%= soul %>" data-agent-chat-voice-name="<%= name %>"
+     data-agent-chat-voice-takes-url="<%= studio_voice_takes_path %>"
+     <%= tag.attributes("data-agent-chat-voice-embedder": studio_agent_chat_embedder(studio_agent_chat_viewer)) %>>
+  <p class="studio-agent-voice-status" role="status" aria-live="polite"
+     data-agent-chat-voice-status data-test="agent-chat-voice-status"></p>
+  <div class="studio-agent-voice-row">
+    <%= render "studio/voice/microphone_chip", copy: words["chip"] %>
+    <%= render "studio/voice/recorder", id: "#{soul}-voice-recorder", mode: "hold", copy: words["recorder"] %>
+  </div>
+  <p class="studio-agent-voice-failed">Voice didn't load on this page. Reload to try again, or type instead.</p>
+</div>

data/app/views/studio/marketing_kit/_assets.html.erb

@@ -0,0 +1,44 @@
+<%# The kit's scoped styles, read from the theme's tokens with a fallback beside
+    each, like the footer's. Inline, so nothing joins the app's asset manifest or
+    its Tailwind build. %>
+<style>
+  .mkit { --mkit-ink: var(--color-text, #111827); --mkit-soft: var(--color-text-secondary, #4b5563);
+    --mkit-line: var(--color-border, rgb(127 127 127 / .3)); --mkit-card: var(--color-surface, transparent);
+    --mkit-primary: var(--color-primary, currentColor);
+    --mkit-link: var(--color-primary-ink, var(--mkit-primary));
+    max-width: 64rem; margin-inline: auto; padding: 4rem 1rem; display: grid; gap: 3rem; }
+  .mkit-hero { max-width: 48rem; margin-inline: auto; text-align: center; }
+  .mkit-tagline { margin: 0 0 .5rem; color: var(--mkit-link); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
+  .mkit-title { margin: 0; color: var(--mkit-ink); font-size: 2.25rem; line-height: 1.1; font-weight: 800; letter-spacing: -.025em; }
+  .mkit-lede { margin: 1rem 0 0; color: var(--mkit-soft); font-size: 1.125rem; line-height: 1.625; }
+  .mkit-heading { margin: 0 0 1rem; color: var(--mkit-ink); font-size: 1.25rem; font-weight: 700; }
+  .mkit-card { overflow: hidden; border: 1px solid var(--mkit-line); border-radius: .75rem; background: var(--mkit-card); }
+  .mkit-card-body { display: block; padding: 1rem; }
+  .mkit-name { display: block; margin: 0; color: var(--mkit-ink); font-weight: 600; }
+
+  .mkit-logos { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); }
+  .mkit-tiles { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
+  .mkit-tile { display: flex; align-items: center; justify-content: center; height: 8rem; padding: 1rem; }
+  .mkit-tile-img { max-width: 100%; max-height: 100%; object-fit: contain; }
+  .mkit-downloads { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin-top: .5rem; font-size: .875rem; }
+  .mkit-download { color: var(--mkit-link); text-decoration: underline; text-underline-offset: 2px; }
+  .mkit-download:hover { text-decoration-thickness: 2px; }
+
+  .mkit-palette { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); }
+  .mkit-swatch { position: relative; }
+  .mkit-swatch-button { display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: copy; }
+  .mkit-swatch-button:focus-visible { outline: 2px solid var(--mkit-primary); outline-offset: -2px; }
+  .mkit-swatch:hover { border-color: var(--mkit-primary); }
+  .mkit-chip { display: block; height: 5rem; border-bottom: 1px solid var(--mkit-line); }
+  .mkit-hex { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .875rem; color: var(--mkit-soft); user-select: text; }
+  /* The confirmation sits on the chip, on a ground of its own, so it reads over any colour. */
+  .mkit-status { position: absolute; top: .5rem; right: .5rem; padding: .125rem .5rem; border-radius: 9999px;
+    background: #111827; color: #fff; font-size: .75rem; font-weight: 600; pointer-events: none; }
+  /* Empty, it shows nothing but stays in the tree: a live region that was display: none can miss its announcement. */
+  .mkit-status:empty { padding: 0; background: none; }
+
+  .mkit-face { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .75rem; padding: 1rem; }
+  .mkit-face + .mkit-face { border-top: 1px solid var(--mkit-line); }
+  .mkit-specimen { margin: 0; color: var(--mkit-ink); font-size: 1.25rem; }
+  .mkit-face-label { margin: 0; color: var(--mkit-soft); font-size: .875rem; }
+</style>

data/app/views/studio/marketing_kit/_kit.html.erb

@@ -0,0 +1,84 @@
+<%# The marketing kit: logos, colours and typefaces (a resolved `kit`, from
+    Studio::MarketingKit.resolve). Each part goes when it has nothing to show. The
+    layout is scoped CSS (.mkit-*), not Tailwind utilities, for the footer's
+    reason: a utility a consumer's build has not seen compiles to nothing. %>
+<%= render "studio/marketing_kit/assets" %>
+<div class="mkit" data-marketing-kit>
+  <header class="mkit-hero">
+    <% if kit[:tagline] %>
+      <p class="mkit-tagline"><%= kit[:tagline] %></p>
+    <% end %>
+    <h1 class="mkit-title"><%= Studio::MarketingKit::LABEL %></h1>
+    <p class="mkit-lede">The <%= kit[:name] ? "#{kit[:name]} " : "" %>logos, colours and typefaces. Use them when you write about us.</p>
+  </header>
+
+  <% if kit[:logos].any? %>
+    <section aria-labelledby="mkit-logos" data-test="kit-logos">
+      <h2 id="mkit-logos" class="mkit-heading">Logos</h2>
+      <div class="mkit-logos">
+        <% kit[:logos].each do |logo| %>
+          <div class="mkit-card">
+            <div class="mkit-tiles">
+              <% logo[:tones].each do |tone| %>
+                <div class="mkit-tile" style="background-color: <%= tone[:ground] %>">
+                  <img src="<%= tone[:src] %>" alt="<%= tone[:alt] %>" class="mkit-tile-img">
+                </div>
+              <% end %>
+            </div>
+            <div class="mkit-card-body">
+              <% if logo[:title] %>
+                <p class="mkit-name"><%= logo[:title] %></p>
+              <% end %>
+              <div class="mkit-downloads">
+                <% logo[:tones].each do |tone| %>
+                  <a href="<%= tone[:href] %>" download class="mkit-download"><%= tone[:label] %></a>
+                <% end %>
+              </div>
+            </div>
+          </div>
+        <% end %>
+      </div>
+    </section>
+  <% end %>
+
+  <% if kit[:palette].any? %>
+    <section aria-labelledby="mkit-colours" data-test="kit-colours">
+      <h2 id="mkit-colours" class="mkit-heading">Colours</h2>
+      <div class="mkit-palette">
+        <% kit[:palette].each do |swatch| %>
+          <%# One button holds the chip, the name and the hex, so a click on any of
+              them copies. The confirmation sits outside it: a button's children
+              are not announced, and a status must be. %>
+          <div class="mkit-card mkit-swatch" data-studio-controller="copy-text" data-copy-text-text-value="<%= swatch[:hex] %>">
+            <button type="button" class="mkit-swatch-button" data-studio-action="click->copy-text#copy"
+                    aria-label="Copy <%= [ swatch[:name], swatch[:hex] ].compact.join(", ") %>">
+              <span class="mkit-chip" style="background-color: <%= swatch[:hex] %>"></span>
+              <span class="mkit-card-body">
+                <% if swatch[:name] %>
+                  <span class="mkit-name"><%= swatch[:name] %></span>
+                <% end %>
+                <code class="mkit-hex"><%= swatch[:hex] %></code>
+              </span>
+            </button>
+            <span class="mkit-status" role="status" data-copy-text-target="status"></span>
+          </div>
+        <% end %>
+      </div>
+    </section>
+  <% end %>
+
+  <% if kit[:typefaces].any? %>
+    <section aria-labelledby="mkit-type" data-test="kit-type">
+      <h2 id="mkit-type" class="mkit-heading">Typefaces</h2>
+      <div class="mkit-card">
+        <% kit[:typefaces].each do |face| %>
+          <div class="mkit-face">
+            <% style = [ ("font-family: #{face[:family]}, sans-serif" if face[:family]), ("font-weight: #{face[:weight]}" if face[:weight]) ].compact.join("; ") %>
+            <p class="mkit-specimen"<% if style.present? %> style="<%= style %>"<% end %>><%= kit[:name] || face[:name] %></p>
+            <p class="mkit-face-label"><%= [ face[:role], face[:name] ].compact.join(" · ") %></p>
+          </div>
+        <% end %>
+      </div>
+    </section>
+  <% end %>
+</div>

data/app/views/studio/marketing_kit/show.html.erb

@@ -0,0 +1,6 @@
+<%# /marketing-kit (Studio::MarketingKitController). The kit is a partial so a host
+    can render it in a page of its own. %>
+<% kit = studio_marketing_kit %>
+<% content_for(:title, [ Studio::MarketingKit::LABEL, kit[:name] ].compact.join(" · ")) %>
+<% content_for(:full_width, true) %>
+<%= render "studio/marketing_kit/kit", kit: kit %>

data/app/views/studio/site_footer/_assets.html.erb

@@ -78,6 +78,7 @@
   .ftr-wordmark-accent { color: var(--ftr-primary); }
   .ftr-tagline { margin: 1.5rem 0 0; line-height: 1.625; color: var(--color-text-secondary, inherit); }
   .ftr-email { margin: .75rem 0 0; }
+  .ftr-kit { margin: .75rem 0 0; }
   .ftr-socials { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin: 2rem 0 0; padding: 0; list-style: none; }
   .ftr-social { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem;
     border-radius: 9999px; background: var(--ftr-primary); color: #fff; transition: transform .15s ease, filter .15s ease; }

data/app/views/studio/site_footer/_footer.html.erb

@@ -44,6 +44,11 @@
         <% if facts[:email] %>
           <p class="ftr-email"><a href="mailto:<%= facts[:email] %>" class="ftr-link ftr-link-solid"><%= facts[:email] %></a></p>
         <% end %>
+        <%# The brand block, not a link column or the legal line: the kit belongs to the
+            brand, and an app's own columns and legal line stay exactly what it wrote. %>
+        <% if facts[:marketing_kit] %>
+          <p class="ftr-kit"><%= render "studio/site_footer/link", link: facts[:marketing_kit], booking: booking %></p>
+        <% end %>
         <% if facts[:social].any? %>
           <ul class="ftr-socials" aria-label="Social profiles">
             <% facts[:social].each do |profile| %>

data/app/views/studio/voice/_microphone_help.html.erb

@@ -58,8 +58,11 @@
 
     <p class="studio-mic-help-other" data-microphone-help-other hidden><%= help.fetch("other") %></p>
 
-    <form method="dialog" class="studio-mic-help-actions">
-      <button type="submit" class="btn btn-primary studio-mic-help-close" data-microphone-help-close><%= help.fetch("close") %></button>
-    </form>
+    <%# A button, never <form method="dialog">: this chip can sit inside a form (the
+        chat's composer), where the parser drops a nested form and Close would
+        submit the outer one. studio/microphone_chip closes the dialog. %>
+    <div class="studio-mic-help-actions">
+      <button type="button" class="btn btn-primary studio-mic-help-close" data-microphone-help-close><%= help.fetch("close") %></button>
+    </div>
   </div>
 </dialog>