studio-engine 0.133.2 → 0.135.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a0b1a25cbd9027f85de7e90d9e0b22f113d048a622979fe2a996ddac25526106
-  data.tar.gz: 5501ce9e395be5812d0eb25d2cc53ab501f1f6f02a7afd0366d1429b506edda8
+  metadata.gz: 1b8bd497e5ba5d6c113a0e6c221b03200f395b1c3d4032aa1327691b7c584c34
+  data.tar.gz: 0a64eb7f3a70bcbe03a50550d36a1d8da938498d91d5cf0a1fcb257845a76759
 SHA512:
-  metadata.gz: a0ad40b43a9674a2b7e67711bb85de70558331279efe955df165d8d96178a779e6ff12282c3d359224e1a78e605ae5f0cc874e7bc63e5d4a180f03161439202c
-  data.tar.gz: 75d96b512a1c891a23a60c983e45a951fa1e909c9894579485074ec042420a1208895135078e29b8dad0564589d7818f9df4c27381f60eb2cd5ce26ecda0d938
+  metadata.gz: c325e02d5e2f0c2a9123ab2b342281b59d27635e48cca92396f792cd39a6fc403cf6e79bfc2e920f891ef9dcc30063e0460e393db83e7148470d3895615b4aad
+  data.tar.gz: 96424698d12cf9d7d60bfee31c6f8d97f5bb464439bb421d8f47ba3ab78f1ce359e9a01bd543f3baab4c45d502c73e117ed3074d4bc306c40582b9819ab3aa53

data/CHANGELOG.md

@@ -4,6 +4,24 @@ The format is [Keep a Changelog](https://keepachangelog.com/en/1.1.0/). This pro
 
 ## Unreleased
 
+## 0.135.0 — 2026-11-07
+
+### Fixed
+
+- The not-found page's og:url is the app's home, not the address it was asked for: `link_preview` takes `url:` (a path or an absolute URL), and a 404 at a hidden route no longer names that route in its link-preview tags.
+
+### Added
+
+- **A friendly not-found page.** `config.exceptions_app = Studio::ExceptionsApp.new` in `config/application.rb` gives a lost visitor the app's name, brand mark, a short message and a button home, inside the app's own layout, for an unknown address and a missing record alike. The status stays 404. A JSON request still gets Rails' 404 JSON, and other statuses keep `public/<status>.html`. If the page cannot render, or the host answers anything but a 404, the static `public/404.html` answers instead, so it cannot loop or change the status. An app with its own wall lists `"studio/not_found" => %w[show]`. See `docs/NOT_FOUND_PAGE.md`.
+
+## 0.134.0 — 2026-11-07
+
+### Changed
+
+- **A looping carousel now wraps visually.** `studio/_carousel` with `loop: true` and more than one slide copies its last slides before the first and its first slides after the last, so a spotlight opening on its first slide shows the last one beside it (the hub's `/websites` row). Next at the last slide, Previous at the first and autoplay glide across the seam and then jump silently onto the real slide; reduced motion goes straight there. The copies are `aria-hidden` and `inert` and drop ids, names, `data-test` hooks and Stimulus wiring, so a screen reader and Tab meet each slide once and the dots count real slides. Every slide of a looping standard row is now a stop (six slides three to a view show six dots, not four). Rows without `loop:` are unchanged. Nothing to do in a host; a host spec that counts `.carousel-slide` in a looping row should count `[data-carousel-target='slide']`.
+- **A looping spotlight opens on its first slide.** With `style: :spotlight`, `loop: true`, more than one slide and no `start:`, the row now opens on slide 0, the host's first item, with the last slide showing on its left. It used to open on `:middle`. A spotlight that does not loop still opens on `:middle`, and an explicit `start:` still wins. A host that wants the old opening passes `start: :middle`.
+- **Footer social icons are lit like the buttons.** A linked `.ftr-social` disc in the site footer now wears the glass lit button's family in every app, glass surface or not: a top highlight, a bottom edge, a contact shadow and a soft glow in its own fill, with the dark-mode values in dark mode. Hover still lifts and now deepens (never brightens, so the white glyph keeps its contrast). A pending (dashed) icon stays flat. No consumer change: it arrives with the engine bump.
+
 ## 0.133.2 — 2026-11-06
 
 ### Changed

data/README.md

@@ -45,6 +45,7 @@ resolved.
 - **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).
+- **Not-found page**: `config.exceptions_app = Studio::ExceptionsApp.new` in `config/application.rb` gives a lost visitor a friendly 404 with the app's name, brand mark and a button home, inside the app's layout. The status stays 404, JSON requests keep Rails' 404 JSON, and `public/404.html` is the fallback if the page cannot render. See [`docs/NOT_FOUND_PAGE.md`](docs/NOT_FOUND_PAGE.md).
 - **Booking**: a simple scheduler on Google Calendar appointment schedules, with or without the footer. With `config.booking_url`, `studio_booking_frame` embeds Google's booking page, `studio_booking_link` opens it in a popup, and `config.draw_booking_routes = true` draws `/schedule` (or name the app's own page with `config.booking_path`). `config.booking_crop` crops the frame to the slot picker at rest, from numbers `bin/booking-crop-measure` reads off the app's own schedule. See [`docs/BOOKING.md`](docs/BOOKING.md).
 - **Voice profile**: an opt-in row on `/profile` ("Set up your voice"): the person reads three phrases with a live level meter, their device turns each take into a speaker embedding (WeSpeaker via transformers.js), and only the averaged vector is saved on their user, never audio. `Studio::VoiceMatch.identify(embedding, among: User.all, model:)` answers who is speaking. Turn it on with `config.voice_profile = true` after installing the migration. See [`docs/VOICE_PROFILE.md`](docs/VOICE_PROFILE.md).
 - **Voice capture**: the microphone chip (names the microphone a page records from, picks another, Chrome help dialog), one level meter, and a record button that refuses a silent take and hands a heard one to the page as a `studio:voice-recorder:take` event with the blob; it uploads nothing. Render `studio/voice/microphone_chip` and `studio/voice/recorder`. See [`docs/VOICE_CAPTURE.md`](docs/VOICE_CAPTURE.md).
@@ -343,15 +344,23 @@ keys move one slide. Where the browser has scroll-driven animations the look fol
 scroll; elsewhere the controller marks the centred slide (`data-current`) and CSS
 transitions it. Reduced motion only dims.
 
-`start:` is the slide the row opens on: an index from 0, or `:middle`. A spotlight opens
-on its middle slide by default, so neither half of the row is empty at load; a standard
-row opens on its first. The browser sets it before the first paint where it has
+`start:` is the slide the row opens on: an index from 0, or `:middle`. A spotlight that
+does not loop opens on its middle slide by default, so neither half of the row is empty at
+load; a standard row and a looping spotlight open on their first (a looping row's wrap
+already shows the last slide left of the first). An explicit `start:` wins. The browser sets it before the first paint where it has
 `scroll-initial-target`; elsewhere the controller jumps there when it connects, with no
 glide and nothing announced. A `#fragment` link to an element inside the row wins.
 
-`loop: true` wraps the row: Next at the last slide goes to the first, Previous at the first
-to the last, and neither arrow is ever disabled. No slide is cloned, so a screen reader reads
-each one once; the row glides back across itself.
+`loop: true` wraps the row, and a row of more than one slide is visually continuous: the
+controller copies the last slides before the first and the first slides after the last, so
+with the first slide centred the last one shows beside it. Next at the last slide glides on
+to the first and Previous at the first back to the last; once the row rests, it jumps with no
+glide onto the real slide, which looks the same. Under reduced motion it goes straight there.
+Neither arrow is ever disabled, and every slide of a looping row is a stop. A copy is
+`aria-hidden` and `inert`, and drops its ids, names, test hooks (`data-test`, `data-testid`)
+and Stimulus wiring, so a screen reader and Tab meet each slide once, a `#fragment` finds the
+real slide, and the dots and the status line count the real slides. A slide that a controller
+fills after load shows its server-rendered copy beside the seam.
 
 `autoplay:` is the seconds between moves (default `nil`, off). The row moves one slide each
 interval, in both styles. It holds still while the pointer is over the slides, while keyboard

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

@@ -1064,6 +1064,15 @@ body.modal-open .studio-app-banner {
     opacity: 0;
   }
 
+  /* A looping row's jump across the seam (data-carousel-wrapping, one frame): the
+     mark moves from a clone to the real slide it copies, in the same place, so
+     nothing may transition. A clone is a carousel-slide, so every other rule here
+     (the scroll-driven look, the mark) styles it as it styles a real slide. */
+  &[data-carousel-wrapping] .carousel-slide .carousel-spotlight-body,
+  &[data-carousel-wrapping] .carousel-slide .carousel-caption {
+    transition: none;
+  }
+
   /* A neighbour holding focus drops the neighbour look on every path, so its focus
      ring shows at full strength (WCAG 2.4.7). It outranks the animation and the mark. */
   & .carousel-slide:focus-within .carousel-spotlight-body,

data/app/controllers/studio/not_found_controller.rb

@@ -0,0 +1,54 @@
+# frozen_string_literal: true
+
+module Studio
+  # The friendly not-found page, drawn by Studio::ExceptionsApp for an HTML 404
+  # (docs/NOT_FOUND_PAGE.md). It has no route: only the exceptions app calls it.
+  #
+  # It inherits the host's ApplicationController so the page sits inside the
+  # app's own layout, navbar, footer and theme, as Studio::PublicUsersController
+  # does. A signed-out visitor must see it, so it skips the engine's sign-in gate.
+  # A host with its own wall lists it there (the hub's AdminWall names
+  # "studio/not_found" => %w[show]). If the host still answers anything but a
+  # 404 here, the exceptions app throws that answer away and serves the static
+  # public/404.html, so a wall can cost the page its layout but never its status.
+  class NotFoundController < ::ApplicationController
+    skip_before_action :require_authentication, raise: false
+    # No forgery skip: Rails' ShowExceptions calls the exceptions app as a GET
+    # (request_method = "GET"), which never needs the token, so the host's CSRF
+    # allow-lists stay as they are.
+
+    def show
+      @studio_not_found = {
+        app_name: Studio.app_name,
+        logo: not_found_logo,
+        home_path: not_found_home_path,
+        back_path: not_found_back_path
+      }
+      render "studio/not_found/show", status: :not_found, formats: [:html], content_type: "text/html"
+    end
+
+    private
+
+    def not_found_logo
+      Studio.navbar_brand&.dig(:logo) || Studio.logo_for("Navbar Logo")
+    end
+
+    def not_found_home_path
+      main_app.respond_to?(:root_path) ? main_app.root_path : "/"
+    end
+
+    # The page the visitor came from, when it is on this app: "Go back" returns
+    # there. A link from elsewhere, or none, draws no second link.
+    def not_found_back_path
+      referer = URI.parse(request.referer.to_s)
+      return nil unless referer.host == request.host && referer.path.present?
+      # "//other.host/x" is a same-host path a browser reads as another site.
+      return nil if referer.path.start_with?("//")
+      return nil if referer.path == request.env["action_dispatch.original_path"]
+
+      [referer.path, referer.query].compact.join("?")
+    rescue URI::InvalidURIError
+      nil
+    end
+  end
+end

data/app/helpers/studio/link_preview_helper.rb

@@ -10,7 +10,7 @@ module Studio
   # reason Studio::GeoHelper gives: every helper module is included into every
   # view, so an unprefixed name would collide with a host's own helper.
   module LinkPreviewHelper
-    OVERRIDE_KEYS = %i[image title description image_alt].freeze
+    OVERRIDE_KEYS = %i[image title description image_alt url].freeze
 
     # THE PAGE OVERRIDE. Call it from any view (the layout renders later, so it
     # sees the call):
@@ -71,7 +71,7 @@ module Studio
         image_height: height,
         image_alt: (overrides[:image_alt].to_s.strip.presence || preview[:title] if preview[:image]),
         site_name: Studio.app_name.to_s,
-        url: studio_link_preview_page_url
+        url: studio_link_preview_page_url(overrides[:url])
       )
     end
 
@@ -127,9 +127,22 @@ module Studio
                                    request_base_url: (request.base_url if studio_link_preview_request?))
     end
 
-    def studio_link_preview_page_url
+    # The page's og:url: the request's own URL, or the `url:` a page passed to
+    # link_preview. A path is built on the same base as the request's; an
+    # absolute URL is used as is. The not-found page passes the app's home, so a
+    # 404 never advertises the broken address it was asked for (a 404 at a
+    # hidden route would otherwise name that route in its og:url).
+    def studio_link_preview_page_url(override = nil)
       return nil unless studio_link_preview_request?
 
+      override = override.to_s.strip
+      return override if override.match?(%r{\Ahttps?://}i)
+
+      if override.start_with?("/")
+        return Studio::LinkPreview.page_url(base_url: Studio.link_preview_base_url,
+                                            request_url: "#{request.base_url}#{override}", path: override)
+      end
+
       Studio::LinkPreview.page_url(base_url: Studio.link_preview_base_url,
                                    request_url: request.original_url, path: request.path)
     end

data/app/javascript/studio/carousel.js

@@ -51,6 +51,8 @@ export function perPage(clientWidth, slideWidth, gap) {
 // A LOOPING row (loop: true) wraps instead: Next at the last stop goes to the
 // first, Previous at the first goes to the last. A page that would overshoot an
 // end still lands on that end first, so no slide is skipped on the way round.
+// The controller uses this wrap only for a looping row it has not cloned; a cloned
+// row (THE LOOP'S CLONES, below) moves by loopStop instead, round the seam.
 export function targetStop(action, current, page, count, loop = false) {
   const last = Math.max(0, count - 1)
   if (loop && last > 0) {
@@ -170,3 +172,77 @@ export function startStop(start, count) {
   const index = Math.floor(Number(start)) || 0
   return Math.min(count - 1, Math.max(0, index))
 }
+
+// THE LOOP'S CLONES. A looping row (loop: true, more than one slide) is visually
+// continuous: the controller copies the last slides before the first and the first
+// slides after the last, so the space either side of an end shows the slides round
+// the seam. A clone is aria-hidden and inert, with no id and no test hook, so a
+// screen reader and Tab meet each slide once; the dots and the status line count the
+// real slides only.
+//
+// Each place in that longer row has a VIRTUAL index: the real slides are 0 to
+// total - 1, the clones before them -count to -1, the clones after total to
+// total + count - 1. A move across the seam glides to a clone, and once the row
+// rests there the controller jumps, with no glide, to the real slide it copies.
+
+// The index of a real slide from a virtual one.
+export function wrapIndex(index, total) {
+  if (!(total > 0)) return 0
+  return ((index % total) + total) % total
+}
+
+// How many clones each side: a wide row's slides plus one, enough to fill the view
+// beside either end in both styles. None for a row of one slide.
+export function cloneCount(perView, total) {
+  if (!(total > 1)) return 0
+  const view = Number(perView)
+  return Math.ceil(Number.isFinite(view) && view > 0 ? Math.min(view, 6) : 3) + 1
+}
+
+// The real slide each clone copies, in row order: `before` sits ahead of the first
+// slide, `after` behind the last. A short row repeats round itself.
+export function cloneLayout(total, count) {
+  if (!(total > 1) || !(count > 0)) return { before: [], after: [] }
+  const before = []
+  const after = []
+  for (let k = count; k >= 1; k -= 1) before.push(wrapIndex(-k, total))
+  for (let k = 0; k < count; k += 1) after.push(wrapIndex(k, total))
+  return { before, after }
+}
+
+// The virtual index an arrow, a key or autoplay takes a cloned row to: a page on
+// either way, round the seam with no end. Home and End go to the first and last
+// real slide. Held to the clones, so a press mid-glide never runs off the row.
+export function loopStop(action, current, page, total, count) {
+  const to = { prev: current - page, next: current + page, first: 0, last: total - 1 }[action]
+  if (to === undefined) return current
+  return Math.min(total - 1 + count, Math.max(-count, to))
+}
+
+// The virtual index nearest `current` that shows real slide `index`: a dot takes
+// the short way round the seam.
+export function nearestVirtual(index, current, total, count) {
+  const options = [index - total, index, index + total].filter((v) => v >= -count && v <= total - 1 + count)
+  return options.reduce((best, v) => (Math.abs(v - current) < Math.abs(best - current) ? v : best), index)
+}
+
+// The real slide a row resting on a clone jumps to, or null when it rests on a real one.
+export function seamJump(virtual, total) {
+  if (!(total > 0)) return null
+  return virtual < 0 || virtual >= total ? wrapIndex(virtual, total) : null
+}
+
+// The attributes a clone drops: ids and names (a clone must not answer a #fragment or
+// join a form), test hooks, and Stimulus wiring (a clone runs no controller and is
+// no one's target), and the carousel's own marks.
+export const CLONE_STRIP = /^(id|name|data-(test|testid|test-id|qa|cy)|data-(studio-)?(controller|action)|data-[\w-]+-target|data-carousel-start-slide|data-current)$/
+
+// The status line of a looping row, whose view may run round the seam:
+// "Slides 5 to 6 and 1 of 6".
+export function loopPositionText(first, shown, total) {
+  const count = Math.min(shown, total)
+  if (first + count <= total) return positionText(first, count, total)
+  const over = first + count - total
+  const head = first + 1 === total ? `Slides ${total}` : `Slides ${first + 1} to ${total}`
+  return `${head} and ${over === 1 ? "1" : `1 to ${over}`} of ${total}`
+}

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

@@ -26,10 +26,21 @@
 // and nothing in the status line. A row already moved (the browser's own start, a
 // restored scroll, a #fragment inside it) is left where it is.
 //
-// A LOOPING row (loop:, data-carousel-loop) wraps: Next at the last stop goes back
-// to the first, Previous at the first to the last, and neither arrow is ever
-// aria-disabled. There are no cloned slides, so a screen reader reads each once:
-// the row glides back across itself.
+// A LOOPING row (loop:, data-carousel-loop) of more than one slide is visually
+// continuous. connect() copies the last slides before the first and the first slides
+// after the last (cloneLayout), so the space beside either end shows the slides
+// round the seam. Next at the last slide glides on to the clone of the first;
+// once the row rests there (scrollend, or a short quiet spell where the browser has
+// no scrollend) it jumps, with no glide and no transition, to the real first slide,
+// whose neighbours look the same. Previous at the first does the same backwards, and
+// a swipe that rests on a clone too. Under reduced motion the row goes straight to
+// the real slide. Neither arrow is ever aria-disabled.
+//
+// A clone is aria-hidden and inert, keeps no id, name, test hook or Stimulus wiring
+// (CLONE_STRIP), and is no slide target, so a screen reader and Tab meet each real
+// slide once, a #fragment finds the real slide, and the dots and the status line
+// count real slides. A click on a clone moves the row to it. disconnect() removes
+// the clones, and connect() clears any a page snapshot kept.
 //
 // AUTOPLAY (autoplay: seconds, data-carousel-autoplay) moves the row one stop each
 // interval. It holds still while the pointer is over the slides, while keyboard focus
@@ -40,8 +51,9 @@
 // (APG: a rotating carousel does not announce). Without loop it stops at the end.
 import { Controller } from "@hotwired/stimulus"
 import {
-  TOLERANCE, autoplayRunning, autoplaySeconds, autoplayStop, centerStops, currentStop, hiddenEnds, idleDelay,
-  initialReasons, keyAction, ownsKey, perPage, positionText, startStop, stops, targetStop, toggleLabel, withReason
+  CLONE_STRIP, TOLERANCE, autoplayRunning, autoplaySeconds, autoplayStop, centerStops, cloneCount, cloneLayout,
+  currentStop, hiddenEnds, idleDelay, initialReasons, keyAction, loopPositionText, loopStop, nearestVirtual, ownsKey,
+  perPage, positionText, seamJump, startStop, stops, targetStop, toggleLabel, withReason, wrapIndex
 } from "studio/carousel"
 
 const REDUCE = "(prefers-reduced-motion: reduce)"
@@ -51,14 +63,22 @@ export default class extends Controller {
 
   connect() {
     this.schedule = this.schedule.bind(this)
+    this.settle = this.settle.bind(this)
+    this.clickClone = this.clickClone.bind(this)
     this.loop = this.element.hasAttribute("data-carousel-loop")
+    this.cloned = 0
+    this.removeClones()
+    this.scrollEnd = "onscrollend" in window
     this.trackTarget.addEventListener("scroll", this.schedule, { passive: true })
+    if (this.scrollEnd) this.trackTarget.addEventListener("scrollend", this.settle, { passive: true })
+    this.trackTarget.addEventListener("click", this.clickClone)
     if (typeof ResizeObserver === "function") {
       this.observer = new ResizeObserver(this.schedule)
       this.observer.observe(this.trackTarget)
     }
     this.element.setAttribute("data-carousel-ready", "")
     this.openAtStart()
+    this.addClones()
     this.sync()
     this.startAutoplay()
   }
@@ -82,10 +102,91 @@ export default class extends Controller {
 
   disconnect() {
     this.trackTarget.removeEventListener("scroll", this.schedule)
+    this.trackTarget.removeEventListener("scrollend", this.settle)
+    this.trackTarget.removeEventListener("click", this.clickClone)
     this.observer?.disconnect()
     if (this.frame) cancelAnimationFrame(this.frame)
     this.frame = null
+    clearTimeout(this.settleTimer)
+    this.settleTimer = null
     this.stopAutoplay()
+    this.removeClones()
+  }
+
+  // -- the loop's clones ------------------------------------------------------
+
+  // Copies the slides round the seam either side, and holds the row where it was:
+  // the scroll moves by the width the clones added before the first slide.
+  addClones() {
+    this.cloned = 0
+    if (!this.loop) return
+    const slides = this.slideTargets
+    const perView = parseFloat(getComputedStyle(this.element).getPropertyValue("--carousel-per-view"))
+    const { before, after } = cloneLayout(slides.length, cloneCount(perView, slides.length))
+    if (before.length === 0) return
+
+    const track = this.trackTarget
+    const first = slides[0]
+    const left = track.scrollLeft
+    const was = first.offsetLeft
+    first.before(...before.map((index) => this.cloneOf(slides[index])))
+    slides[slides.length - 1].after(...after.map((index) => this.cloneOf(slides[index])))
+    this.cloned = before.length
+    track.scrollTo({ left: left + first.offsetLeft - was, behavior: "instant" })
+  }
+
+  cloneOf(slide) {
+    const clone = slide.cloneNode(true)
+    for (const node of [clone, ...clone.querySelectorAll("*")]) {
+      for (const { name } of [...node.attributes]) if (CLONE_STRIP.test(name)) node.removeAttribute(name)
+    }
+    for (const name of ["role", "aria-roledescription", "aria-label"]) clone.removeAttribute(name)
+    clone.setAttribute("aria-hidden", "true")
+    clone.setAttribute("inert", "")
+    clone.setAttribute("data-carousel-clone", "")
+    return clone
+  }
+
+  removeClones() {
+    this.trackTarget.querySelectorAll(":scope > [data-carousel-clone]").forEach((clone) => clone.remove())
+    this.cloned = 0
+  }
+
+  // Every slide in row order, the clones included.
+  rowSlides() {
+    return this.cloned ? [...this.trackTarget.querySelectorAll(":scope > .carousel-slide")] : this.slideTargets
+  }
+
+  // The row came to rest. On a clone it jumps to the real slide the clone copies,
+  // at the same place in the row, so nothing on screen changes.
+  settle() {
+    this.settleTimer = null
+    if (!this.cloned) return
+    this.sync()
+    const real = seamJump(this.virtual, this.positions.length)
+    if (real === null) return
+    const at = this.full[this.virtual + this.cloned]
+    if (Math.abs(this.trackTarget.scrollLeft - at) > TOLERANCE) return
+    this.element.setAttribute("data-carousel-wrapping", "")
+    this.trackTarget.scrollTo({ left: this.positions[real], behavior: "instant" })
+    this.sync()
+    void this.trackTarget.offsetWidth
+    requestAnimationFrame(() => this.element.removeAttribute("data-carousel-wrapping"))
+  }
+
+  // An inert clone takes no click, so the click lands on the track: a click on a
+  // clone's box moves the row to it.
+  clickClone(event) {
+    if (!this.cloned || event.target !== this.trackTarget) return
+    const index = this.rowSlides().findIndex((slide) => {
+      if (!slide.hasAttribute("data-carousel-clone")) return false
+      const box = slide.getBoundingClientRect()
+      return event.clientX >= box.left && event.clientX <= box.right && event.clientY >= box.top && event.clientY <= box.bottom
+    })
+    if (index < 0) return
+    this.interacted()
+    this.sync()
+    this.scrollToStop(index - this.cloned)
   }
 
   // -- autoplay ---------------------------------------------------------------
@@ -183,7 +284,7 @@ export default class extends Controller {
     this.timer = null
     this.sync()
     const count = this.positions.length
-    const to = autoplayStop(this.current, count, this.loop)
+    const to = this.cloned ? loopStop("next", this.virtual, 1, count, this.cloned) : autoplayStop(this.current, count, this.loop)
     if (to === null && count > 1) {
       // The end of a row that does not loop: autoplay is done until Play.
       this.pause("stopped", true)
@@ -194,6 +295,10 @@ export default class extends Controller {
   }
 
   schedule() {
+    if (this.cloned && !this.scrollEnd) {
+      clearTimeout(this.settleTimer)
+      this.settleTimer = setTimeout(this.settle, 150)
+    }
     if (this.frame) return
     this.frame = requestAnimationFrame(() => {
       this.frame = null
@@ -201,9 +306,11 @@ export default class extends Controller {
     })
   }
 
+  // The stops of every slide in the row. A cloned row measures its clones too, and
+  // every slide of it is a stop: the row never ends.
   measure() {
     const track = this.trackTarget
-    const slides = this.slideTargets
+    const slides = this.rowSlides()
     if (this.element.classList.contains("carousel-spotlight")) {
       const max = Math.max(0, track.scrollWidth - track.clientWidth)
       const boxes = slides.map((slide) => ({ left: slide.offsetLeft, width: slide.offsetWidth }))
@@ -212,6 +319,12 @@ export default class extends Controller {
     const origin = slides[0]?.offsetLeft || 0
     const max = Math.max(0, track.scrollWidth - track.clientWidth)
     const gap = parseFloat(getComputedStyle(track).columnGap) || 0
+    if (this.cloned) {
+      return {
+        positions: slides.map((slide) => Math.min(max, Math.max(0, slide.offsetLeft - origin))),
+        page: perPage(track.clientWidth, slides[0]?.offsetWidth, gap)
+      }
+    }
     return {
       positions: stops(slides.map((slide) => slide.offsetLeft - origin), max),
       page: perPage(track.clientWidth, slides[0]?.offsetWidth, gap)
@@ -223,22 +336,35 @@ export default class extends Controller {
     const { positions, page } = this.measure()
     const ends = hiddenEnds(track)
 
-    this.positions = positions
     this.page = page
-    this.current = currentStop(track.scrollLeft, positions)
+    if (this.cloned) {
+      // positions holds every slide, clones included; this.positions the real ones.
+      const total = this.slideTargets.length
+      this.full = positions
+      this.virtual = currentStop(track.scrollLeft, positions) - this.cloned
+      this.current = wrapIndex(this.virtual, total)
+      this.positions = positions.slice(this.cloned, this.cloned + total)
+    } else {
+      this.full = null
+      this.positions = positions
+      this.current = currentStop(track.scrollLeft, positions)
+      this.virtual = this.current
+    }
 
-    this.element.toggleAttribute("data-carousel-static", positions.length < 2)
+    this.element.toggleAttribute("data-carousel-static", this.positions.length < 2)
     track.toggleAttribute("data-fade-start", ends.start)
     track.toggleAttribute("data-fade-end", ends.end)
     // A looping row never disables an arrow: each end leads round to the other.
-    const wraps = this.loop && positions.length > 1
+    const wraps = this.loop && this.positions.length > 1
     if (this.hasPrevTarget) this.prevTarget.setAttribute("aria-disabled", String(!wraps && !ends.start))
     if (this.hasNextTarget) this.nextTarget.setAttribute("aria-disabled", String(!wraps && !ends.end))
     if (this.element.classList.contains("carousel-spotlight")) {
-      this.slideTargets.forEach((slide, index) => slide.toggleAttribute("data-current", index === this.current))
+      // A clone is marked as a real slide is, so the fallback scales it the same.
+      const at = this.virtual + this.cloned
+      this.rowSlides().forEach((slide, index) => slide.toggleAttribute("data-current", index === at))
     }
     this.dotTargets.forEach((dot, index) => {
-      dot.hidden = index >= positions.length
+      dot.hidden = index >= this.positions.length
       if (index === this.current) dot.setAttribute("aria-current", "true")
       else dot.removeAttribute("aria-current")
     })
@@ -251,7 +377,8 @@ export default class extends Controller {
   goTo(event) {
     this.interacted()
     this.sync()
-    this.scrollToStop(Number(event.currentTarget.dataset.carouselIndex))
+    const index = Number(event.currentTarget.dataset.carouselIndex)
+    this.scrollToStop(this.cloned ? nearestVirtual(index, this.virtual, this.positions.length, this.cloned) : index)
   }
 
   key(event) {
@@ -270,17 +397,35 @@ export default class extends Controller {
   move(action) {
     this.interacted()
     this.sync()
+    if (this.cloned) {
+      const to = loopStop(action, this.virtual, this.page, this.positions.length, this.cloned)
+      if (to === this.virtual) return
+      this.scrollToStop(to)
+      return
+    }
     const to = targetStop(action, this.current, this.page, this.positions.length, this.loop)
     if (to === this.current) return
     this.scrollToStop(to)
   }
 
-  // announce: false for autoplay, which moves the row without a word.
+  // announce: false for autoplay, which moves the row without a word. On a cloned
+  // row the index is virtual: a clone's place glides there and settle() jumps home,
+  // but under reduced motion the row goes straight to the real slide.
   scrollToStop(index, { announce = true } = {}) {
+    const reduce = window.matchMedia?.(REDUCE).matches
+    if (this.cloned) {
+      const total = this.positions.length
+      const real = wrapIndex(index, total)
+      const left = reduce ? this.positions[real] : this.full[index + this.cloned]
+      if (left === undefined) return
+      this.trackTarget.scrollTo({ left, behavior: reduce ? "auto" : "smooth" })
+      if (announce && this.hasStatusTarget) this.statusTarget.textContent = loopPositionText(real, this.page, total)
+      return
+    }
+
     const left = this.positions[index]
     if (left === undefined) return
 
-    const reduce = window.matchMedia?.(REDUCE).matches
     this.trackTarget.scrollTo({ left, behavior: reduce ? "auto" : "smooth" })
 
     if (!announce || !this.hasStatusTarget) return

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

@@ -25,15 +25,25 @@
                    standard row shows a small line under every slide; the
                    spotlight shows it under the centred slide only.
       start        the slide the row opens on: an index from 0, or :middle (the
-                   slide at items.size / 2). Defaults to :middle for the spotlight,
-                   so both halves of the row hold a slide at load, and to 0 for a
-                   standard row. The browser sets it before the first paint where
+                   slide at items.size / 2). Defaults to :middle for a spotlight
+                   that does not loop, so both halves of the row hold a slide at
+                   load, and to 0 for a standard row and for a looping spotlight
+                   (its wrap already shows the last slide left of the first, so it
+                   opens on the host's first item). An explicit start: wins. The browser sets it before the first paint where
                    it has scroll-initial-target; elsewhere the controller sets it
                    when it connects, with no glide and nothing announced. A link
                    to an id inside the row (#fragment) wins over the start.
-      loop         true wraps the row: Next at the last slide goes to the first,
-                   Previous at the first to the last, and neither arrow is ever
-                   disabled. No slide is cloned, so a screen reader reads each once.
+      loop         true wraps the row, and a row of more than one slide is
+                   visually continuous: the controller copies the last slides
+                   before the first and the first after the last, so the first
+                   slide centred shows the last beside it. Next at the last slide
+                   glides on to the first, Previous at the first back to the last,
+                   then the row jumps silently onto the real slide (no glide under
+                   reduced motion), and neither arrow is ever disabled. A copy is
+                   aria-hidden and inert, with no id, name, test hook or controller,
+                   so a screen reader and Tab meet each slide once, a #fragment
+                   finds the real slide, and the dots and "slide N of M" count the
+                   real slides. Every slide of a looping row is a stop.
       autoplay     seconds between moves (a number above 0); nil, the default, is
                    off. The row moves one slide each interval and holds still while
                    the pointer is over the slides, while keyboard focus is in it,
@@ -75,7 +85,11 @@
               when "spotlight" then true
               else raise ArgumentError, "studio/carousel style: #{style.inspect} is not :standard or :spotlight"
               end
-  start = spotlight ? :middle : 0 if start.nil?
+  loop = loop ? true : false
+  wraps = loop && total > 1
+  # A looping spotlight has a left neighbour at its first slide (the clones), so it
+  # opens there; one that does not loop opens mid-row so neither half is empty.
+  start = spotlight && !wraps ? :middle : 0 if start.nil?
   start_index = case start
                 when :middle, "middle" then total / 2
                 when Integer then start.clamp(0, [total - 1, 0].max)
@@ -86,8 +100,6 @@
     raise ArgumentError, "studio/carousel autoplay: #{autoplay.inspect} is not a number of seconds above 0 or nil"
   end
   autoplay = autoplay.to_i if autoplay && autoplay == autoplay.floor
-  loop = loop ? true : false
-  wraps = loop && total > 1
   arrow_noun = spotlight ? "slide" : "slides"
   track_id = id.presence || "carousel-#{label.to_s.parameterize.presence || 'slides'}"
 %>

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

@@ -0,0 +1,30 @@
+<%# locals: (app_name:, home_path:, logo: nil, back_path: nil, heading: :h1) %>
+<%# THE NOT-FOUND PAGE: what a lost visitor sees on an unknown address or a
+    record that is not there (docs/NOT_FOUND_PAGE.md). Studio::NotFoundController
+    renders it inside the app's own layout, from the app's Studio config:
+
+      app_name   Studio.app_name: named in the button home.
+      home_path  the app's root: the primary button.
+      logo       the app's brand mark (Studio.navbar_brand's logo, else the
+                 Navbar Logo theme image). nil draws no image.
+      back_path  a page on this app the visitor came from: a second link back.
+                 nil draws no second link.
+      heading    the title's tag: :h1 on the page, a lower level where the page
+                 is shown inside another (the style guide's card).
+
+    Theme tokens only, so it reads in light and dark. The static last resort,
+    public/404.html, carries the same words and the same data-test hooks. %>
+<section class="mx-auto w-full max-w-md px-4 py-16 sm:py-24 text-center" data-studio-not-found data-test="not-found" aria-labelledby="studio-not-found-title">
+  <% if logo.present? %>
+    <img src="<%= logo %>" alt="<%= app_name %>" width="64" height="64" class="mx-auto mb-6 h-16 w-16 object-contain" data-studio-not-found-logo>
+  <% end %>
+  <p class="type-fine font-semibold uppercase tracking-wide text-primary-ink mb-2">404 &middot; Not found</p>
+  <%= content_tag heading, "This page isn’t here", id: "studio-not-found-title", class: "type-h2 text-heading mb-3" %>
+  <p class="type-body text-secondary mb-8">The address may be mistyped, or the page may have moved. Head back home and pick up from there.</p>
+  <div class="flex flex-col sm:flex-row items-center justify-center gap-3">
+    <a href="<%= home_path %>" class="btn btn-primary w-full sm:w-auto" data-test="not-found-home">Back to <%= app_name %></a>
+    <% if back_path.present? %>
+      <a href="<%= back_path %>" class="btn btn-outline w-full sm:w-auto" data-test="not-found-back">Go back</a>
+    <% end %>
+  </div>
+</section>

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

@@ -0,0 +1,5 @@
+<%# Studio::NotFoundController#show: the not-found page in the app's layout. %>
+<% content_for(:title, "Page not found · #{Studio.app_name}") %>
+<%# A 404's og:url is the app's home, never the broken address it was asked for. %>
+<% link_preview(url: @studio_not_found[:home_path]) %>
+<%= render "studio/not_found", **@studio_not_found %>

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

@@ -81,9 +81,32 @@
   .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; }
-  a.ftr-social:hover { transform: translateY(-2px); filter: brightness(1.12); }
-  .ftr-social[data-pending] { background: transparent; color: inherit; opacity: .5; border: 1px dashed currentColor; }
+    border-radius: 9999px; background: var(--ftr-primary); color: #fff;
+    transition: transform .15s ease, filter .15s ease, box-shadow .15s ease; }
+  /* LIT, LIKE THE BUTTONS, IN EVERY APP. A linked disc wears the glass lit button's
+     family (engine.css, html[data-surface-style="glass"] .btn-primary): a top
+     highlight, a bottom edge, a contact shadow and a soft glow in its own fill.
+     Each light reads the button's --lit-* token, which only a glass page defines,
+     and falls back to the button's own value, so a flat-surface app shades the
+     same way. The gradient runs from the fill DOWN only (never lighter than
+     --ftr-primary), so the white glyph never loses contrast; a browser without
+     relative oklch keeps the flat fill and the shadows. The glow is drawn from
+     --ftr-primary-rgb, which every browser reads. */
+  .ftr { --ftr-lit-top: var(--lit-top, inset 0 1px 0 rgb(255 255 255 / .35));
+    --ftr-lit-bottom: var(--lit-bottom, inset 0 -2px 0 rgb(0 0 0 / .2));
+    --ftr-lit-contact: var(--lit-contact, 0 1px 2px rgb(0 0 0 / .4)); --ftr-lit-glow-alpha: var(--lit-glow-alpha, .6); }
+  .dark .ftr { --ftr-lit-bottom: var(--lit-bottom, inset 0 -2px 0 rgb(0 0 0 / .3));
+    --ftr-lit-contact: var(--lit-contact, 0 1px 2px rgb(0 0 0 / .65)); --ftr-lit-glow-alpha: var(--lit-glow-alpha, .8); }
+  a.ftr-social { background-image: linear-gradient(var(--ftr-primary), oklch(from var(--ftr-primary) calc(l - .08) c h));
+    box-shadow: var(--ftr-lit-top), var(--ftr-lit-bottom), var(--ftr-lit-contact),
+      0 4px 12px -4px rgb(var(--ftr-primary-rgb) / var(--ftr-lit-glow-alpha)); }
+  /* Hover lifts and deepens, as the lit button darkens (brightness .94): never
+     brighter, which would fade the white glyph. */
+  a.ftr-social:hover { transform: translateY(-2px); filter: brightness(.94);
+    box-shadow: var(--ftr-lit-top), var(--ftr-lit-bottom), var(--ftr-lit-contact),
+      0 8px 16px -6px rgb(var(--ftr-primary-rgb) / var(--ftr-lit-glow-alpha)); }
+  /* A pending handle stays a flat dashed outline: no light, no shadow. */
+  .ftr-social[data-pending] { background: transparent; color: inherit; opacity: .5; border: 1px dashed currentColor; box-shadow: none; }
   .ftr-social-letter { font-weight: 700; font-size: .95rem; line-height: 1; }
   .ftr-heading { margin: 0 0 1rem; font-size: 1rem; font-weight: 700; color: var(--ftr-ink); }
   .ftr-list { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }

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

@@ -0,0 +1,19 @@
+<%#  The Pages group of the Tricks board (admin/style): whole pages an app
+     adopts with one line. Not Found is the friendly 404 (docs/NOT_FOUND_PAGE.md),
+     drawn here with THIS app's name and brand mark; the Go back link shows as it
+     does when the visitor came from a page on this app. %>
+<section id="pages" class="section-subtarget space-y-5">
+  <div class="space-y-1">
+    <h3 class="type-h4 text-heading">Pages</h3>
+    <p class="text-muted text-sm">Whole pages an app adopts with one line in config/application.rb.</p>
+  </div>
+
+  <div class="grid gap-4 sm:grid-cols-2">
+    <%= render layout: "style/specimen", locals: { trick: "not_found" } do %>
+      <div class="card w-full">
+        <%= render "studio/not_found", app_name: Studio.app_name, logo: Studio.navbar_brand&.dig(:logo) || Studio.logo_for("Navbar Logo"),
+              home_path: "/", back_path: "#pages", heading: :h4 %>
+      </div>
+    <% end %>
+  </div>
+</section>

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

@@ -527,4 +527,7 @@
 
   <!-- Site footer and booking -->
   <%= render "style/site_footer" %>
+
+  <!-- Pages -->
+  <%= render "style/pages" %>
 </section>

data/config/studio_tricks.yml

@@ -462,6 +462,13 @@ booking_frame:
       note: "Cropped to the slot picker at rest; bin/booking-crop-measure prints yours."
       resolve: [config:booking_crop]
 
+not_found:
+  name: Not Found
+  group: Pages
+  token: "config.exceptions_app = Studio::ExceptionsApp.new"
+  note: "A lost visitor's 404 page, with the app's brand and a button home."
+  resolve: [partial:studio/not_found]
+
 board:
   name: Board
   group: Tasks

data/docs/SITE_FOOTER.md

@@ -242,8 +242,9 @@ Rows may be tuples, as above, or hashes (`{ label:, href: }`, `{ heading:, links
   from 0.5 to 4; anything else is ignored. Without one, the first column is 1.5
   and the rest are 1 (the brand, from 1024px, is 1.7). Below 768px the two tracks
   are fixed at 1.2 and 1, and with more than four columns the hints are not used.
+- **A linked social icon is lit like the buttons**, in every app, light and dark: a top highlight, an edge and a soft shadow in `--color-primary`.
 - **A social profile with a `nil` URL** renders its icon unlinked, with a dashed
-  outline. The engine draws `:linkedin`, `:instagram`, `:x`, `:facebook` and
+  outline and no shading. The engine draws `:linkedin`, `:instagram`, `:x`, `:facebook` and
   `:youtube`; any other icon falls back to the label's first letter.
 
 ### The address and the map

data/lib/studio/exceptions_app.rb

@@ -0,0 +1,124 @@
+# frozen_string_literal: true
+
+require "action_dispatch"
+
+module Studio
+  # The friendly not-found page, as an exceptions app. An app opts in with one
+  # line in config/application.rb (docs/NOT_FOUND_PAGE.md):
+  #
+  #   config.exceptions_app = Studio::ExceptionsApp.new
+  #
+  # Rails hands this app every exception ShowExceptions renders, with PATH_INFO
+  # rewritten to "/<status>" and the method set to GET. That is the path a
+  # RoutingError takes (an unknown address) and the path a RecordNotFound takes
+  # (Studio::ErrorHandling#handle_not_found re-raises on purpose so it lands here).
+  #
+  # What it answers:
+  #
+  #   404, an HTML request   Studio::NotFoundController#show: the app's name and
+  #                          brand mark, a short message and a button home,
+  #                          inside the app's own layout. Status 404.
+  #   404, a data request    ActionDispatch::PublicExceptions, unchanged: a JSON
+  #                          request gets {"status":404,"error":"Not Found"} with
+  #                          status 404, never the HTML page.
+  #   any other status       ActionDispatch::PublicExceptions, unchanged (500,
+  #                          422 and the rest keep public/<status>.html).
+  #
+  # IT CANNOT LOOP AND IT CANNOT CHANGE THE STATUS. The page renders through the
+  # app's ApplicationController, so the app's before_actions, layout and database
+  # all run. If any of them raises, or answers anything but a 404 (a sign-in
+  # redirect from a wall that does not list the page, a 406 from allow_browser),
+  # the answer is thrown away and PublicExceptions serves public/404.html, the
+  # static last resort, with status 404. PublicExceptions only reads a file, so
+  # the fallback has nothing left that can fail into this app again.
+  #
+  # Which requests are HTML is PublicExceptions' own rule, so the split never
+  # drifts from Rails': a format whose body PublicExceptions can serialize (JSON,
+  # XML) is data, and everything else, `Accept: */*` included, is the page.
+  class ExceptionsApp
+    NOT_FOUND = 404
+    PAGE_PARAMS = { controller: "studio/not_found", action: "show" }.freeze
+    # Cached by the failed request; the page's request must not read them.
+    STALE_KEYS = %w[action_dispatch.request.path_parameters
+                    action_dispatch.request.parameters
+                    action_dispatch.request.query_parameters
+                    action_dispatch.request.request_parameters
+                    action_controller.instance].freeze
+
+    # public_path: where the static pages live. Defaults to Rails.public_path,
+    # read on each call, so the line works before the app finishes booting.
+    # page: the Rack endpoint that draws the page (a seam for tests).
+    def initialize(public_path = nil, page: nil)
+      @public_path = public_path
+      @page = page
+    end
+
+    def call(env)
+      return static(env) unless page_request?(env)
+
+      response = draw_page(env)
+      return response if response
+
+      static(env)
+    end
+
+    private
+
+    def page_request?(env)
+      request = ActionDispatch::Request.new(env)
+      return false unless request.path_info.delete_prefix("/").to_i == NOT_FOUND
+
+      html?(request)
+    end
+
+    # PublicExceptions renders a body in a format the error hash serializes to
+    # (to_json, to_xml) and the HTML file for anything else.
+    def html?(request)
+      content_type = begin
+        request.formats.first
+      rescue ActionDispatch::Http::MimeNegotiation::InvalidType
+        Mime[:text]
+      end
+      return true unless content_type
+
+      !{}.respond_to?("to_#{content_type.to_sym}")
+    end
+
+    # The page's answer, or nil when it raised or came back as anything but a
+    # 404 HTML page.
+    def draw_page(env)
+      page_env = env.except(*STALE_KEYS)
+      page_env["action_dispatch.request.path_parameters"] = PAGE_PARAMS.dup
+      status, headers, body = page.call(page_env)
+      return [status, headers, body] if status.to_i == NOT_FOUND && html_body?(headers)
+
+      body.close if body.respond_to?(:close)
+      log("answered #{status}, not 404")
+      nil
+    rescue StandardError, ScriptError => e
+      log("#{e.class}: #{e.message}")
+      nil
+    end
+
+    def html_body?(headers)
+      type = headers["content-type"] || headers["Content-Type"]
+      type.to_s.start_with?("text/html")
+    end
+
+    def page
+      @page || Studio::NotFoundController.action(:show)
+    end
+
+    def static(env)
+      ActionDispatch::PublicExceptions.new(public_path).call(env)
+    end
+
+    def public_path
+      (@public_path || Rails.public_path).to_s
+    end
+
+    def log(reason)
+      Rails.logger&.warn("[studio.not_found] the page fell back to public/404.html: #{reason}")
+    end
+  end
+end

data/lib/studio/version.rb

@@ -1,3 +1,3 @@
 module Studio
-  VERSION = "0.133.2"
+  VERSION = "0.135.0"
 end

data/lib/studio.rb

@@ -80,6 +80,7 @@ require "studio/survey/breakdown"
 require "studio/survey/export"
 require "studio/crumbs"
 require "studio/page_header"
+require "studio/exceptions_app"
 
 module Studio
   mattr_accessor :app_name,            default: "Studio"

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: studio-engine
 version: !ruby/object:Gem::Version
-  version: 0.133.2
+  version: 0.135.0
 platform: ruby
 authors:
 - Alex McRitchie
@@ -470,6 +470,7 @@ files:
 - app/controllers/studio/local_reviews_controller.rb
 - app/controllers/studio/marketing_kit_controller.rb
 - app/controllers/studio/models_controller.rb
+- app/controllers/studio/not_found_controller.rb
 - app/controllers/studio/onboarding_controller.rb
 - app/controllers/studio/profiles_controller.rb
 - app/controllers/studio/public_users_controller.rb
@@ -656,6 +657,7 @@ files:
 - app/views/studio/_hold_button.html.erb
 - app/views/studio/_hold_button_guard.html.erb
 - app/views/studio/_leveling_activity_assets.html.erb
+- app/views/studio/_not_found.html.erb
 - app/views/studio/_page_header.html.erb
 - app/views/studio/_section_header.html.erb
 - app/views/studio/_session_stamp.html.erb
@@ -771,6 +773,7 @@ files:
 - app/views/studio/models/show.html.erb
 - app/views/studio/newsletter_mailer/subscribed.html.erb
 - app/views/studio/newsletter_mailer/subscribed.text.erb
+- app/views/studio/not_found/show.html.erb
 - app/views/studio/profile_mailer/email_change_notification.html.erb
 - app/views/studio/profile_mailer/email_change_notification.text.erb
 - app/views/studio/profiles/_birthday_fields.html.erb
@@ -817,6 +820,7 @@ files:
 - app/views/style/_loaders_feed_page.html.erb
 - app/views/style/_modal_specimen.html.erb
 - app/views/style/_modals.html.erb
+- app/views/style/_pages.html.erb
 - app/views/style/_scrims.html.erb
 - app/views/style/_site_footer.html.erb
 - app/views/style/_specimen.html.erb
@@ -884,6 +888,7 @@ files:
 - lib/studio/email_smoke.rb
 - lib/studio/engine.rb
 - lib/studio/environment_banner.rb
+- lib/studio/exceptions_app.rb
 - lib/studio/geo.rb
 - lib/studio/geo/countries.rb
 - lib/studio/geo/lookup.rb