studio-engine 0.123.0 → 0.124.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b205f173a74b9bb8df878abf6b1e991cdc68b4a24d149ee0dbf5ea98d5d49ead
-  data.tar.gz: 01b80bee0be70951eb51e4e151639ab65c096972374b12ef5d2941b58411d2c0
+  metadata.gz: b7f68b7fc8c9d951dfa0f8069db58d4d819a9e5c785a35c5319c00d1a7450fab
+  data.tar.gz: 3674ddc7b3c29a7f58e06ee8c928bf63223a52388a191f819a90919986355e79
 SHA512:
-  metadata.gz: 94aae578a81075f61b21504530ef3998b0b5db37b90876f7038445e3a90938645130833c7ce9c163ec247870843afc99a4e1d24d59deeeff27db1bf6bbcbb428
-  data.tar.gz: 13d649f6aa168b162fa6b18b6c098cd97e5c2b385964337f127f09de9f323773803c22d363ee7c9b159801b894e95c9e13d7385fec2ec83133ac4c0191e0af88
+  metadata.gz: 1b8755f0f24f02d33aaf1f91bac610325e988a5cf9633ec74b31227b14f9f8582293ff0bd225b38efdc62e468b433dabb66fa14590e785355073f70d339add32
+  data.tar.gz: '083f8e499dedaa8efb934df433a3cd99c196828d7625e77e0cd4cd3f5003d5ab57a26990eee8c031a803d4b80fb7777ce05133cb4fda5bd616a38b448a288dc6'

data/CHANGELOG.md

@@ -4,6 +4,70 @@ The format is [Keep a Changelog](https://keepachangelog.com/en/1.1.0/). This pro
 
 ## Unreleased
 
+## 0.124.0 — 2026-11-04
+
+### Added
+
+- **App-to-app page transitions: `Studio.page_transition_direction`** (`:left`, `:right`,
+  `:top`, `:bottom`, default nil). Each app moves its pages one way, and each page change
+  draws that direction's fade or unfold at random, at the Codrops demo's values. It is the
+  one switch: a set direction turns smooth-load on, metas and navbar pin included. The
+  navbar and banner stack hold still; eager images load before the swap, capped at 500ms;
+  a same-page visit, reduced motion and a browser without view transitions play nothing.
+  With nil, the HTML is unchanged except one more import map entry that nothing fetches.
+  New: `studio/page_transitions`, loaded by its own tag only with the setting on, and the
+  `data-vt-morph` marker for a named element (the `agent_chat` portrait and composer carry
+  it; a host marks its own when it sets a direction). No host changes here. The doc holds
+  a proposed assignment. [`docs/PAGE_TRANSITIONS.md`](docs/PAGE_TRANSITIONS.md).
+- **The marketing kit: every app has a public `/marketing-kit`, and its footer links
+  it, with no setup.** `Studio.routes` draws the page (`Studio.draw_marketing_kit_routes`,
+  default true; helper `studio_marketing_kit_path`) with no sign-in, and a host's own
+  route of that path wins from either side of `Studio.routes`. `Studio.marketing_kit`
+  (a Hash or a callable taking the view) declares `logos`, `palette`, `typefaces` and
+  `tagline`; unset, the logos derive from `Studio.navbar_wordmark`, the footer's lockup
+  and `Studio.theme_logos`, and the colours from what the app paints. Logos read "Download Light" and "Download Dark", the PNG when
+  there is one, else the SVG; a missing file shows no link and no broken image. One
+  click on a colour copies its hex and confirms (new: the lazy `copy-text` controller).
+  An app with no database can draw the page alone with `Studio.marketing_kit_routes(self)`.
+- **The footer's Marketing Kit link**, in the brand block (`.ftr-kit`), on every app
+  with the page, signed in or out. An app that links the page in a column or on the
+  legal line gets no second link, and `marketing_kit: false` in the facts shows none.
+  Its columns and legal line are unchanged. [`docs/SITE_FOOTER.md`](docs/SITE_FOOTER.md),
+  *The marketing kit*.
+- **`studio/_page_header`, and the triple stack as a standard.** A page title,
+  optional meta beside it and optional tabs on the right. At rest it has no
+  background and no border; once stuck under the navbar it takes the bar. It joins
+  the pinned stack (`data-pin="page"`), so a sticky table header sits under it:
+  navbar, page row, table header, with no overlap. `/admin/style`, `/admin/models`
+  and `/admin/surveys` use it.
+  [`docs/PAGE_HEADER.md`](docs/PAGE_HEADER.md) carries the rule and the locals. New:
+  `studio/page_header` and the lazy `page-header` controller.
+
+### Changed
+
+- **A signed-out visitor's link sidebar has no "Links" title.** Signed-in and admin titles
+  are unchanged, and the panel keeps its accessible name.
+
+### Fixed
+
+- **A tap no longer leaves the navbar's account group lit.** On a touch screen a tap
+  leaves `:hover` on what was tapped, so the gear, the name and the avatar (THE ACCOUNT
+  GROUP in `engine.css`) stayed lit after the sidebar closed. Every `:hover` of the
+  group now sits inside `@media (hover: hover)`; `:focus-visible` stays outside it, so
+  a keyboard still lights the group. A mouse sees no change.
+- **The theme toggle draws left of the gear at every width, signed in or out.** The
+  signed-in desktop rail already did. The signed-out rail (`layouts/_navbar` and the
+  signed-out branch of `components/_user_nav`) and the phone row drew the gear first.
+  The navbar baseline (`test/fixtures/files/navbar_unset_baseline`) is regenerated for
+  this order: 14 of its 19 files move, and only the order of their lines changes. A
+  host that draws its own pair keeps its own order: the hub's
+  `layouts/_navbar_phone_account` still draws gear, then toggle.
+- **A table's sticky header no longer sits on top of the page row on `/admin/models`.**
+- **The open tab on `/admin/models` is scrolled into view at phone width.**
+- **`studio/pinned_stack` places a header with no `data-pin` at its place in the
+  document.** It was appended, so it read as below every other layer, and a layer
+  under it composed a top of 0.
+
 ## 0.123.0 — 2026-11-03
 
 ### Added

data/README.md

@@ -41,6 +41,7 @@ resolved.
 - **Geo**: `Studio::GeoDetection` places every visitor (IP → country + subdivision, session-cached), `Studio::GeoSetting` stores the operator's blocked countries and regions, `require_geo_allowed` locks whichever surfaces an app chooses, and the shared badge + `/admin/geo` manager ship with it. See [`docs/GEO.md`](docs/GEO.md).
 - **Site identity and link previews**: `Studio::SiteIdentity` holds the app's title, description and image, edited at `/admin/link_preview` beside a live unfurl card and read anywhere through `Studio.site_identity`. Every page unfurls with it unless it calls `link_preview image:, title:, description:`, and `Studio::LinkPreviewBots` serves preview fetchers a slim page under iMessage's 1 MiB limit. Adopt with `bin/rails g studio:site_identity`. See [`docs/LINK_PREVIEW.md`](docs/LINK_PREVIEW.md).
 - **Branded loader**: `studio_loader`, `studio_loader_pending` and `studio_loader_overlay` draw the app's own icon in its theme colours for page loads, long waits and pending buttons, in the style `config.loader` names (Breathe by default). See [`docs/LOADER.md`](docs/LOADER.md).
+- **App-to-app page transitions**: `config.page_transition_direction` (`:left`, `:right`, `:top`, `:bottom`) moves an app's pages one way on every page change, with the navbar and banners held still. It turns smooth-load on. See [`docs/PAGE_TRANSITIONS.md`](docs/PAGE_TRANSITIONS.md).
 - **Public user page**: `/u/:username` shows a user's avatar and username (nothing else), and unfurls with their avatar, falling back to the site image. Link any username to it with `link_to_user_profile(user)` or `studio_user_profile_path(user)`. Opt in with `config.draw_public_user_routes = true`. See [`docs/PUBLIC_USER_PAGE.md`](docs/PUBLIC_USER_PAGE.md).
 - **Transactional emails**: `Studio::EmailCatalog` — every email an app sends, its type, a live preview, and its banner — plus the shared `/admin/emails` page. Every app inherits the standard emails and their artwork on day one, and can register its own workflows and upload its own banners. See [Transactional emails](#transactional-emails).
 - **Site footer**: `<%= studio_site_footer %>` in the layout renders the public site's footer. It is on by default: with nothing configured it prints the app's name, logo and the legal links the app has routes for, and no address. `config.site_footer` declares the app's own facts (brand, social profiles, link columns, an address with a live map, legal links), every part optional; `config.site_footer_address` adds a location in one setting; `config.site_footer = false` turns the footer off; `config.site_footer_chat_path` adds a standard Chat link to the Contact column. Leaflet is vendored and served by the engine. See [`docs/SITE_FOOTER.md`](docs/SITE_FOOTER.md).
@@ -169,6 +170,7 @@ Studio.configure do |config|
   # multi-second pages BEFORE opting in — no-preview holds the old page until
   # the fresh response arrives.
   config.smooth_load = true
+  # config.page_transition_direction = :left  # the app's page move; also turns smooth-load on
   # Nav spinner minimum display (default 2500). Smooth-load apps typically
   # drop to ~300; keep the high floor if multi-second ops ride the spinner.
   config.nav_spinner_min_ms = 300
@@ -285,6 +287,17 @@ actions; the engine supplies only the banner.
 
 ## UI Primitives
 
+### The page header — `studio/_page_header`
+
+An admin page's title: a plain header at rest, a bar once stuck under the navbar,
+in the pinned stack so a table's sticky header sits under it
+([`docs/PAGE_HEADER.md`](docs/PAGE_HEADER.md)).
+
+```erb
+<%= render "studio/page_header", title: "Models", meta: "v1.2.3", label: "Models",
+      tabs: [{ label: "Users", href: users_path, current: "page" }, { label: "Teams", href: teams_path }] %>
+```
+
 ### The "at" time stamp — `at_time_tag`
 
 Stamps WHEN something happened, on the reader's own clock: `at 3:53p`, gaining a
@@ -1159,7 +1172,9 @@ pointing at or focusing any of the gear, the name or the avatar lights all three
 (the primary colour, a turn of the gear, a primary glow on the avatar). The
 same holds for a host sidebar: a host that sets both `navbar_menu_trigger` and
 `navbar_account_sidebar` gets its gear and account lit as one menu. An account
-link is never grouped (`engine.css`, *THE ACCOUNT GROUP*).
+link is never grouped (`engine.css`, *THE ACCOUNT GROUP*). Pointing needs a
+pointer: the hover half sits inside `@media (hover: hover)`, so a tap on a touch
+screen lights nothing, and a keyboard still does.
 
 ## Transactional emails
 

data/app/assets/tailwind/studio_engine/engine.css

@@ -223,6 +223,93 @@ body.modal-open .studio-app-banner {
   line-height: 1.4;
 }
 
+/* -- The page header (studio/_page_header, docs/PAGE_HEADER.md) ---------
+   A normal page header at rest and a bar once stuck. The border is there in
+   both states, in transparent at rest, so the row's height never changes and
+   the pinned stack has nothing to republish. The layout is owned here: the
+   engine's views depend on no responsive utility a host may not have emitted.
+   The fade is owned too, because .fade-edge-x is in the opt-in motion layer, and
+   it marks only an end that hides a tab (studio/controllers/page_header). */
+
+@utility page-header {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding-block: 0.5rem;
+  border-block: 1px solid transparent;
+  background-color: transparent;
+  transition: background-color 150ms ease, border-color 150ms ease;
+
+  &[data-stuck],
+  [data-studio-controller-failed~="page-header"] + & {
+    @apply bg-surface border-subtle;
+  }
+}
+
+@utility page-header-sentinel {
+  position: absolute;
+  width: 0;
+  height: 0;
+}
+
+@utility page-header-lead {
+  display: flex;
+  align-items: baseline;
+  gap: 0.5rem;
+  flex-shrink: 0;
+  min-width: 0;
+}
+
+@utility page-header-title {
+  @apply text-heading;
+  font-size: calc(var(--type-base, 16px) * 1.5);
+  font-weight: var(--type-display-weight, 800);
+  line-height: 1.25;
+}
+
+@utility page-header-meta {
+  white-space: nowrap;
+
+  @media (width < 40rem) {
+    display: none;
+  }
+}
+
+@utility page-header-tabs {
+  --page-header-fade-start: 0px;
+  --page-header-fade-end: 0px;
+  flex: 1 1 0%;
+  min-width: 0;
+  overflow-x: auto;
+  scrollbar-width: none;
+  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--page-header-fade-start), #000 calc(100% - var(--page-header-fade-end)), transparent 100%);
+          mask-image: linear-gradient(to right, transparent 0, #000 var(--page-header-fade-start), #000 calc(100% - var(--page-header-fade-end)), transparent 100%);
+
+  &[data-fade-start] {
+    --page-header-fade-start: 2rem;
+  }
+
+  &[data-fade-end] {
+    --page-header-fade-end: 2rem;
+  }
+}
+
+/* width: max-content, then an auto margin: the tabs float right while they fit,
+   and start at the left, all reachable, once they do not. justify-content would
+   push the overflow past the start, where no scroll can reach it. */
+@utility page-header-track {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  width: max-content;
+  margin-left: auto;
+}
+
+@utility page-header-actions {
+  flex-shrink: 0;
+  margin-left: auto;
+}
+
 /* -- Scrims: tints and shades ----------------------------------------------
    A scrim is the wash laid over media (a photo, a video) so text reads on it.
    It comes in two TONES, and the tone is a design decision, not a colour pick:
@@ -565,6 +652,87 @@ body.modal-open .studio-app-banner {
   animation: none;
 }
 
+/* -- App-to-app page transitions --------------------------------------------
+   Studio.page_transition_direction (studio/page_transitions, docs/PAGE_TRANSITIONS.md).
+   Every rule is gated on an attribute only that script sets, so an app without
+   the setting keeps the fade above. Attribute selectors outrank the bare
+   ::view-transition-*(root) rules, here and in a host. The effects are from the
+   Codrops Page Transitions demo, at its values; the keyframes were written fresh.
+
+   Black behind the pages gives the shading: a page at opacity 0.3 darkens as it
+   moves. */
+html[data-page-transition]:not([data-page-transition="still"])::view-transition {
+  background: #000;
+}
+
+html[data-page-transition]::view-transition-old(root),
+html[data-page-transition]::view-transition-new(root) {
+  mix-blend-mode: normal;
+  animation-duration: 700ms;
+  animation-timing-function: ease;
+  animation-fill-mode: both;
+  backface-visibility: hidden;
+}
+
+/* A same-page visit (a refresh, a poll) draws nothing. */
+html[data-page-transition="still"]::view-transition-old(root),
+html[data-page-transition="still"]::view-transition-new(root) {
+  animation: none;
+}
+
+/* The banner stack holds still with the navbar. The name goes on the one element
+   the script marks, since a duplicate name silently cancels the transition. It
+   lasts for the visit alone: a name at rest makes the stack a stacking context,
+   and its tooltip then paints under the navbar. No group animation either: a page
+   left scrolled has the stack above the viewport, and it would slide down. */
+html[data-page-transition-direction][data-page-transition-visit] [data-vt-held] {
+  view-transition-name: studio-bar-stack;
+}
+
+::view-transition-group(studio-bar-stack),
+::view-transition-old(studio-bar-stack),
+::view-transition-new(studio-bar-stack) {
+  animation: none;
+}
+
+/* A named element moves with the page, unless both pages share its name. The
+   script decides that before the old page's picture, and only then is the name let
+   through, so the morph stands. data-vt-morph carries the name it marks. */
+html[data-page-transition-direction]:not([data-page-transition-morph]) [data-vt-morph] {
+  view-transition-name: none !important;
+}
+
+html[data-page-transition="fade-left"]::view-transition-old(root) { animation-name: pt-out-left; }
+html[data-page-transition="fade-left"]::view-transition-new(root) { animation-name: pt-in-from-right; }
+html[data-page-transition="fade-right"]::view-transition-old(root) { animation-name: pt-out-right; }
+html[data-page-transition="fade-right"]::view-transition-new(root) { animation-name: pt-in-from-left; }
+html[data-page-transition="fade-top"]::view-transition-old(root) { animation-name: pt-out-top; }
+html[data-page-transition="fade-top"]::view-transition-new(root) { animation-name: pt-in-from-bottom; }
+html[data-page-transition="fade-bottom"]::view-transition-old(root) { animation-name: pt-out-bottom; }
+html[data-page-transition="fade-bottom"]::view-transition-new(root) { animation-name: pt-in-from-top; }
+
+html[data-page-transition="unfold-right"]::view-transition-old(root) { animation-name: pt-out-left; }
+html[data-page-transition="unfold-right"]::view-transition-new(root) { animation-name: pt-unfold-right; transform-origin: 0% 50%; }
+html[data-page-transition="unfold-left"]::view-transition-old(root) { animation-name: pt-out-right; }
+html[data-page-transition="unfold-left"]::view-transition-new(root) { animation-name: pt-unfold-left; transform-origin: 100% 50%; }
+html[data-page-transition="unfold-bottom"]::view-transition-old(root) { animation-name: pt-out-top; }
+html[data-page-transition="unfold-bottom"]::view-transition-new(root) { animation-name: pt-unfold-bottom; transform-origin: 50% 0%; }
+html[data-page-transition="unfold-top"]::view-transition-old(root) { animation-name: pt-out-bottom; }
+html[data-page-transition="unfold-top"]::view-transition-new(root) { animation-name: pt-unfold-top; transform-origin: 50% 100%; }
+
+@keyframes pt-out-left { to { opacity: 0.3; transform: translateX(-100%); } }
+@keyframes pt-out-right { to { opacity: 0.3; transform: translateX(100%); } }
+@keyframes pt-out-top { to { opacity: 0.3; transform: translateY(-100%); } }
+@keyframes pt-out-bottom { to { opacity: 0.3; transform: translateY(100%); } }
+@keyframes pt-in-from-right { from { opacity: 0.3; transform: translateX(100%); } }
+@keyframes pt-in-from-left { from { opacity: 0.3; transform: translateX(-100%); } }
+@keyframes pt-in-from-bottom { from { opacity: 0.3; transform: translateY(100%); } }
+@keyframes pt-in-from-top { from { opacity: 0.3; transform: translateY(-100%); } }
+@keyframes pt-unfold-right { from { opacity: 0; transform: perspective(1200px) translateX(100%) rotateY(90deg); } }
+@keyframes pt-unfold-left { from { opacity: 0; transform: perspective(1200px) translateX(-100%) rotateY(-90deg); } }
+@keyframes pt-unfold-bottom { from { opacity: 0; transform: perspective(1200px) translateY(100%) rotateX(-90deg); } }
+@keyframes pt-unfold-top { from { opacity: 0; transform: perspective(1200px) translateY(-100%) rotateX(90deg); } }
+
 /* Turbo's progress bar is the slow-load feedback under no-preview (the old
    page holds until the fresh response). Theme it so every app's bar matches
    its brand instead of Turbo's default. The fallback (#0076ff, Turbo's own
@@ -784,36 +952,67 @@ body.modal-open .studio-app-banner {
            saying they are its one menu, as Turf Monster's gear sidebar is.
        With Studio.navbar_name_in_rows the name is its own control in row 1
        ([data-nav-name-trigger]), and pointing at it lights the group too.
-       An account link is never grouped. */
+       An account link is never grouped.
+
+       POINTING NEEDS A POINTER. Every :hover below sits inside
+       @media (hover: hover), and each :focus-visible rule stays outside it. On
+       a touch screen a tap leaves :hover on what was tapped until the next tap
+       lands elsewhere, so the group stayed lit after its sidebar closed. Tailwind's
+       hover: and group-hover: variants already carry this guard; these
+       hand-written selectors do not get it for free. */
     :has(> [data-nav-tools]):has(> [data-nav-account][aria-controls~="studio-link-sidebar"]) [data-link-sidebar-trigger] svg,
     :has(> [data-nav-tools]):has(> [data-nav-account][aria-controls~="studio-link-sidebar"]) [data-nav-account] > [aria-hidden] > * {
       transition: transform 200ms ease, box-shadow 200ms ease;
     }
-    :has(> [data-nav-tools]):has(> [data-nav-account][aria-controls~="studio-link-sidebar"]) [data-link-sidebar-trigger]:hover { background-color: transparent; }
-    :has(> [data-nav-tools]):has(> [data-nav-account][aria-controls~="studio-link-sidebar"]):has([data-link-sidebar-trigger]:hover, [data-nav-account]:hover, [data-nav-name-trigger]:hover, [data-link-sidebar-trigger]:focus-visible, [data-nav-account]:focus-visible, [data-nav-name-trigger]:focus-visible) [data-link-sidebar-trigger],
-    :has(> [data-nav-tools]):has(> [data-nav-account][aria-controls~="studio-link-sidebar"]):has([data-link-sidebar-trigger]:hover, [data-nav-account]:hover, [data-nav-name-trigger]:hover, [data-link-sidebar-trigger]:focus-visible, [data-nav-account]:focus-visible, [data-nav-name-trigger]:focus-visible) [data-nav-name] { color: var(--color-primary); }
-    :has(> [data-nav-tools]):has(> [data-nav-account][aria-controls~="studio-link-sidebar"]):has([data-link-sidebar-trigger]:hover, [data-nav-account]:hover, [data-nav-name-trigger]:hover, [data-link-sidebar-trigger]:focus-visible, [data-nav-account]:focus-visible, [data-nav-name-trigger]:focus-visible) [data-nav-account] > [aria-hidden] > * {
+    :has(> [data-nav-tools]):has(> [data-nav-account][aria-controls~="studio-link-sidebar"]):has([data-link-sidebar-trigger]:focus-visible, [data-nav-account]:focus-visible, [data-nav-name-trigger]:focus-visible) [data-link-sidebar-trigger],
+    :has(> [data-nav-tools]):has(> [data-nav-account][aria-controls~="studio-link-sidebar"]):has([data-link-sidebar-trigger]:focus-visible, [data-nav-account]:focus-visible, [data-nav-name-trigger]:focus-visible) [data-nav-name] { color: var(--color-primary); }
+    :has(> [data-nav-tools]):has(> [data-nav-account][aria-controls~="studio-link-sidebar"]):has([data-link-sidebar-trigger]:focus-visible, [data-nav-account]:focus-visible, [data-nav-name-trigger]:focus-visible) [data-nav-account] > [aria-hidden] > * {
       box-shadow:
         0 0 0 2px rgb(var(--color-primary-rgb) / 0.85),
         0 0 14px 2px rgb(var(--color-primary-rgb) / 0.45);
     }
     @media (prefers-reduced-motion: no-preference) {
-      :has(> [data-nav-tools]):has(> [data-nav-account][aria-controls~="studio-link-sidebar"]):has([data-link-sidebar-trigger]:hover, [data-nav-account]:hover, [data-nav-name-trigger]:hover, [data-link-sidebar-trigger]:focus-visible, [data-nav-account]:focus-visible, [data-nav-name-trigger]:focus-visible) [data-link-sidebar-trigger] svg { transform: rotate(45deg); }
+      :has(> [data-nav-tools]):has(> [data-nav-account][aria-controls~="studio-link-sidebar"]):has([data-link-sidebar-trigger]:focus-visible, [data-nav-account]:focus-visible, [data-nav-name-trigger]:focus-visible) [data-link-sidebar-trigger] svg { transform: rotate(45deg); }
+    }
+    @media (hover: hover) {
+      :has(> [data-nav-tools]):has(> [data-nav-account][aria-controls~="studio-link-sidebar"]) [data-link-sidebar-trigger]:hover { background-color: transparent; }
+      :has(> [data-nav-tools]):has(> [data-nav-account][aria-controls~="studio-link-sidebar"]):has([data-link-sidebar-trigger]:hover, [data-nav-account]:hover, [data-nav-name-trigger]:hover) [data-link-sidebar-trigger],
+      :has(> [data-nav-tools]):has(> [data-nav-account][aria-controls~="studio-link-sidebar"]):has([data-link-sidebar-trigger]:hover, [data-nav-account]:hover, [data-nav-name-trigger]:hover) [data-nav-name] { color: var(--color-primary); }
+      :has(> [data-nav-tools]):has(> [data-nav-account][aria-controls~="studio-link-sidebar"]):has([data-link-sidebar-trigger]:hover, [data-nav-account]:hover, [data-nav-name-trigger]:hover) [data-nav-account] > [aria-hidden] > * {
+        box-shadow:
+          0 0 0 2px rgb(var(--color-primary-rgb) / 0.85),
+          0 0 14px 2px rgb(var(--color-primary-rgb) / 0.45);
+      }
+      @media (prefers-reduced-motion: no-preference) {
+        :has(> [data-nav-tools]):has(> [data-nav-account][aria-controls~="studio-link-sidebar"]):has([data-link-sidebar-trigger]:hover, [data-nav-account]:hover, [data-nav-name-trigger]:hover) [data-link-sidebar-trigger] svg { transform: rotate(45deg); }
+      }
     }
     :has(> [data-nav-tools] [data-nav-menu-trigger]):has(> [data-nav-account][data-profile-image-toggle]:not([aria-controls~="studio-link-sidebar"])) [data-nav-menu-trigger] [aria-controls] svg,
     :has(> [data-nav-tools] [data-nav-menu-trigger]):has(> [data-nav-account][data-profile-image-toggle]:not([aria-controls~="studio-link-sidebar"])) [data-nav-account] > [aria-hidden] > * {
       transition: transform 200ms ease, box-shadow 200ms ease;
     }
-    :has(> [data-nav-tools] [data-nav-menu-trigger]):has(> [data-nav-account][data-profile-image-toggle]:not([aria-controls~="studio-link-sidebar"])) [data-nav-menu-trigger] [aria-controls]:hover { background-color: transparent; }
-    :has(> [data-nav-tools] [data-nav-menu-trigger]):has(> [data-nav-account][data-profile-image-toggle]:not([aria-controls~="studio-link-sidebar"])):has([data-nav-menu-trigger] [aria-controls]:hover, [data-nav-account]:hover, [data-nav-name-trigger]:hover, [data-nav-menu-trigger] [aria-controls]:focus-visible, [data-nav-account]:focus-visible, [data-nav-name-trigger]:focus-visible) [data-nav-menu-trigger] [aria-controls],
-    :has(> [data-nav-tools] [data-nav-menu-trigger]):has(> [data-nav-account][data-profile-image-toggle]:not([aria-controls~="studio-link-sidebar"])):has([data-nav-menu-trigger] [aria-controls]:hover, [data-nav-account]:hover, [data-nav-name-trigger]:hover, [data-nav-menu-trigger] [aria-controls]:focus-visible, [data-nav-account]:focus-visible, [data-nav-name-trigger]:focus-visible) [data-nav-name] { color: var(--color-primary); }
-    :has(> [data-nav-tools] [data-nav-menu-trigger]):has(> [data-nav-account][data-profile-image-toggle]:not([aria-controls~="studio-link-sidebar"])):has([data-nav-menu-trigger] [aria-controls]:hover, [data-nav-account]:hover, [data-nav-name-trigger]:hover, [data-nav-menu-trigger] [aria-controls]:focus-visible, [data-nav-account]:focus-visible, [data-nav-name-trigger]:focus-visible) [data-nav-account] > [aria-hidden] > * {
+    :has(> [data-nav-tools] [data-nav-menu-trigger]):has(> [data-nav-account][data-profile-image-toggle]:not([aria-controls~="studio-link-sidebar"])):has([data-nav-menu-trigger] [aria-controls]:focus-visible, [data-nav-account]:focus-visible, [data-nav-name-trigger]:focus-visible) [data-nav-menu-trigger] [aria-controls],
+    :has(> [data-nav-tools] [data-nav-menu-trigger]):has(> [data-nav-account][data-profile-image-toggle]:not([aria-controls~="studio-link-sidebar"])):has([data-nav-menu-trigger] [aria-controls]:focus-visible, [data-nav-account]:focus-visible, [data-nav-name-trigger]:focus-visible) [data-nav-name] { color: var(--color-primary); }
+    :has(> [data-nav-tools] [data-nav-menu-trigger]):has(> [data-nav-account][data-profile-image-toggle]:not([aria-controls~="studio-link-sidebar"])):has([data-nav-menu-trigger] [aria-controls]:focus-visible, [data-nav-account]:focus-visible, [data-nav-name-trigger]:focus-visible) [data-nav-account] > [aria-hidden] > * {
       box-shadow:
         0 0 0 2px rgb(var(--color-primary-rgb) / 0.85),
         0 0 14px 2px rgb(var(--color-primary-rgb) / 0.45);
     }
     @media (prefers-reduced-motion: no-preference) {
-      :has(> [data-nav-tools] [data-nav-menu-trigger]):has(> [data-nav-account][data-profile-image-toggle]:not([aria-controls~="studio-link-sidebar"])):has([data-nav-menu-trigger] [aria-controls]:hover, [data-nav-account]:hover, [data-nav-name-trigger]:hover, [data-nav-menu-trigger] [aria-controls]:focus-visible, [data-nav-account]:focus-visible, [data-nav-name-trigger]:focus-visible) [data-nav-menu-trigger] [aria-controls] svg { transform: rotate(45deg); }
+      :has(> [data-nav-tools] [data-nav-menu-trigger]):has(> [data-nav-account][data-profile-image-toggle]:not([aria-controls~="studio-link-sidebar"])):has([data-nav-menu-trigger] [aria-controls]:focus-visible, [data-nav-account]:focus-visible, [data-nav-name-trigger]:focus-visible) [data-nav-menu-trigger] [aria-controls] svg { transform: rotate(45deg); }
+    }
+    @media (hover: hover) {
+      :has(> [data-nav-tools] [data-nav-menu-trigger]):has(> [data-nav-account][data-profile-image-toggle]:not([aria-controls~="studio-link-sidebar"])) [data-nav-menu-trigger] [aria-controls]:hover { background-color: transparent; }
+      :has(> [data-nav-tools] [data-nav-menu-trigger]):has(> [data-nav-account][data-profile-image-toggle]:not([aria-controls~="studio-link-sidebar"])):has([data-nav-menu-trigger] [aria-controls]:hover, [data-nav-account]:hover, [data-nav-name-trigger]:hover) [data-nav-menu-trigger] [aria-controls],
+      :has(> [data-nav-tools] [data-nav-menu-trigger]):has(> [data-nav-account][data-profile-image-toggle]:not([aria-controls~="studio-link-sidebar"])):has([data-nav-menu-trigger] [aria-controls]:hover, [data-nav-account]:hover, [data-nav-name-trigger]:hover) [data-nav-name] { color: var(--color-primary); }
+      :has(> [data-nav-tools] [data-nav-menu-trigger]):has(> [data-nav-account][data-profile-image-toggle]:not([aria-controls~="studio-link-sidebar"])):has([data-nav-menu-trigger] [aria-controls]:hover, [data-nav-account]:hover, [data-nav-name-trigger]:hover) [data-nav-account] > [aria-hidden] > * {
+        box-shadow:
+          0 0 0 2px rgb(var(--color-primary-rgb) / 0.85),
+          0 0 14px 2px rgb(var(--color-primary-rgb) / 0.45);
+      }
+      @media (prefers-reduced-motion: no-preference) {
+        :has(> [data-nav-tools] [data-nav-menu-trigger]):has(> [data-nav-account][data-profile-image-toggle]:not([aria-controls~="studio-link-sidebar"])):has([data-nav-menu-trigger] [aria-controls]:hover, [data-nav-account]:hover, [data-nav-name-trigger]:hover) [data-nav-menu-trigger] [aria-controls] svg { transform: rotate(45deg); }
+      }
     }
     /* THE ACCOUNT ROW (components/_user_nav), from 768px. Every app whose
        navbar renders the engine's user nav gets this, Turf Monster included:

data/app/controllers/studio/marketing_kit_controller.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+module Studio
+  # /marketing-kit: the app's logos, colours and typefaces, for anyone to use.
+  # See Studio::MarketingKit and docs/SITE_FOOTER.md.
+  #
+  # Public by design: a journalist or a partner has no account. It inherits the
+  # host's ApplicationController so the page renders in the app's layout, navbar
+  # and theme, and it skips each gate a host is known to put there:
+  # Studio::ErrorHandling's sign-in gate (every adopter), the hub's admin wall,
+  # and turf-monster's profile-completion redirect. A host with a gate of another
+  # name skips it in a to_prepare block (docs/SITE_FOOTER.md).
+  #
+  # It needs no table and no session, so an app with neither can draw it. Where
+  # ThemeSetting exists, the colours read it (Studio.marketing_kit_colors).
+  class MarketingKitController < ::ApplicationController
+    HOST_GATES = %i[require_authentication require_admin_wall require_admin require_login
+                    authenticate_user! require_profile_completion].freeze
+
+    HOST_GATES.each { |gate| skip_before_action gate, raise: false }
+
+    def show; end
+  end
+end

data/app/helpers/studio/site_footer_helper.rb

@@ -11,8 +11,8 @@ module Studio
   #   <%= studio_footer_map %>              the map alone, e.g. on a contact page
   #
   # THE FOOTER IS ON BY DEFAULT: with Studio.site_footer unset, the layout line
-  # renders the default footer (the site name, the logo, and the legal links the
-  # host has routes for), and `config.site_footer = false` turns it off. The
+  # renders the default footer (the site name, the logo, the legal links the host
+  # has routes for, and the Marketing Kit link where the page is drawn), and `config.site_footer = false` turns it off. The
   # booking helpers render NOTHING without Studio.booking_url, and the map
   # nothing without an address, so a layout or a shared view can call any of
   # them before an app has declared anything.
@@ -70,6 +70,19 @@ module Studio
                                        zoom: options[:zoom], controls: options.fetch(:controls, true)
     end
 
+    # The kit /marketing-kit prints (Studio.marketing_kit_for). A callable that
+    # raises costs the app's own facts, not the page: in production the error is
+    # logged once and the page shows what derives from the theme. In development
+    # and test it raises.
+    def studio_marketing_kit
+      Studio.marketing_kit_for(self)
+    rescue StandardError => error
+      raise if studio_site_footer_raise?
+
+      studio_site_footer_report(error)
+      Studio.marketing_kit_for(self, declared: nil)
+    end
+
     # ---- booking ------------------------------------------------------------
 
     def studio_booking? = Studio.booking_url.present?

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

@@ -0,0 +1,63 @@
+// copy-text: one click puts a value on the clipboard, and says so. It sits on the
+// element around the control (studio/marketing_kit/_kit):
+//
+//   <div data-studio-controller="copy-text" data-copy-text-text-value="#8E82FE">
+//     <button type="button" data-studio-action="click->copy-text#copy">...</button>
+//     <span role="status" data-copy-text-target="status"></span>
+//   </div>
+//
+// The status is written only after the browser answers, so "Copied" is never
+// shown for a copy that failed. navigator.clipboard exists only in a secure
+// context and may refuse; the older selection copy then gets one try.
+import { Controller } from "@hotwired/stimulus"
+
+const SHOWN_MS = 1600
+
+// True when `text` reached the clipboard. It never rejects.
+export async function copyToClipboard(text, nav = navigator, doc = document) {
+  try {
+    await nav.clipboard.writeText(text)
+    return true
+  } catch {
+    return selectionCopy(text, doc)
+  }
+}
+
+function selectionCopy(text, doc) {
+  const field = doc.createElement("textarea")
+  field.value = text
+  field.setAttribute("readonly", "")
+  field.style.position = "fixed"
+  field.style.opacity = "0"
+  doc.body.appendChild(field)
+  try {
+    field.select()
+    return doc.execCommand("copy")
+  } catch {
+    return false
+  } finally {
+    field.remove()
+  }
+}
+
+export default class extends Controller {
+  static targets = ["status"]
+  static values = {
+    text: String,
+    copied: { type: String, default: "Copied" },
+    failed: { type: String, default: "Could not copy" }
+  }
+
+  async copy() {
+    const copied = await copyToClipboard(this.textValue)
+    if (!this.hasStatusTarget) return
+
+    this.statusTarget.textContent = copied ? this.copiedValue : this.failedValue
+    clearTimeout(this.timer)
+    this.timer = setTimeout(() => { this.statusTarget.textContent = "" }, SHOWN_MS)
+  }
+
+  disconnect() {
+    clearTimeout(this.timer)
+  }
+}

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

@@ -0,0 +1,60 @@
+// page-header: says when studio/_page_header is stuck, marks which ends of its
+// tabs hide a tab, and shows the open tab on a narrow screen. It sits on the row's
+// sentinel, so the row keeps its data-studio-controller for the page's own.
+//
+//   <div class="page-header-sentinel" data-studio-controller="page-header"></div>
+//   <nav class="page-header sticky" data-pin="page">...</nav>
+//
+// A lazy controller (studio/stimulus): only a page with the row fetches it. The
+// row's tabs are links, so they work without it. If it fails to load, the sentinel
+// carries data-studio-controller-failed and engine.css gives the row its bar at
+// all times, so a stuck row never lays a transparent title over the page.
+import { Controller } from "@hotwired/stimulus"
+import { hiddenEnds, isStuck, revealBy } from "studio/page_header"
+
+export default class extends Controller {
+  connect() {
+    this.row = this.element.nextElementSibling
+    if (!this.row) return
+    this.tabs = this.row.querySelector(".page-header-tabs")
+    this.schedule = this.schedule.bind(this)
+    window.addEventListener("scroll", this.schedule, { passive: true })
+    window.addEventListener("resize", this.schedule, { passive: true })
+    this.tabs?.addEventListener("scroll", this.schedule, { passive: true })
+    this.revealOpenTab()
+    this.sync()
+  }
+
+  disconnect() {
+    window.removeEventListener("scroll", this.schedule)
+    window.removeEventListener("resize", this.schedule)
+    this.tabs?.removeEventListener("scroll", this.schedule)
+    if (this.frame) cancelAnimationFrame(this.frame)
+    this.frame = null
+  }
+
+  schedule() {
+    if (this.frame) return
+    this.frame = requestAnimationFrame(() => {
+      this.frame = null
+      this.sync()
+    })
+  }
+
+  sync() {
+    const stuck = isStuck(this.row.getBoundingClientRect().top, this.element.getBoundingClientRect().top)
+    const ends = this.tabs ? hiddenEnds(this.tabs) : null
+
+    this.row.toggleAttribute("data-stuck", stuck)
+    if (!ends) return
+    this.tabs.toggleAttribute("data-fade-start", ends.start)
+    this.tabs.toggleAttribute("data-fade-end", ends.end)
+  }
+
+  // Moves the tabs only: scrollIntoView would also move the page.
+  revealOpenTab() {
+    const open = this.tabs?.querySelector("[aria-current]")
+    if (!open) return
+    this.tabs.scrollLeft += revealBy(this.tabs.getBoundingClientRect(), open.getBoundingClientRect())
+  }
+}

data/app/javascript/studio/page_header.js

@@ -0,0 +1,24 @@
+// studio/page_header: the page header's two measurements, as pure functions. It
+// imports nothing; test/javascript/page_header.test.mjs loads it as a data: module.
+
+// A sticky row is stuck once it has left its place in the flow. restTop is that
+// place, measured by the sentinel beside it. The half pixel is rounding: at rest
+// the two tops differ by a fraction at most, and a stuck row by at least a pixel.
+export function isStuck(rowTop, restTop) {
+  return rowTop - restTop > 0.5
+}
+
+// Which ends of the tabs hide a tab, so a fade marks only an end with more to see.
+export function hiddenEnds({ scrollLeft, clientWidth, scrollWidth }) {
+  return {
+    start: scrollLeft > 1,
+    end: scrollLeft + clientWidth < scrollWidth - 1
+  }
+}
+
+// How far the tabs must scroll to show a tab, clear of the fade. 0 if it shows.
+export function revealBy(box, tab, margin = 32) {
+  if (tab.left < box.left) return tab.left - box.left - margin
+  if (tab.right > box.right) return tab.right - box.right + margin
+  return 0
+}