studio-engine 0.122.0 → 0.123.0

data/app/javascript/studio/agent_chat_voice.js

@@ -0,0 +1,318 @@
+// studio/agent_chat_voice: hold to talk in the shared agent chat's composer
+// (studio/agent_chat/_voice; docs/AGENT_CHAT.md, "Talking by voice").
+//
+// THE FLOW, for one take the engine recorder hands over
+// (studio:voice-recorder:take {blob, mimeType, durationMs}):
+//
+//   1. embed it ON THIS DEVICE when the page names an embedder (the person has
+//      a saved voice; data-agent-chat-voice-embedder is the /profile voice row's
+//      own config), with studio/voice_profile's embedderFor. Any failure, or a
+//      model slower than EMBED_WAIT_MS, sends the take without a vector: the
+//      server then answers "Someone new" (check no_embedding), never an error.
+//   2. POST it to /voice/takes (multipart, X-CSRF-Token), which answers
+//      {text, speaker, score, identified, check, duration_ms} and keeps nothing.
+//   3. send `text` to the chat's own form action with `voice` {check, score,
+//      duration_ms} and hand the turn to the chat (its public refresh hook,
+//      studio:agent-chat:refresh), so the turn and the typing line appear. The
+//      browser never sends a name: the server names the speaker, and the line
+//      says who it kept.
+//
+// Every refusal is a line in [data-agent-chat-voice-status] (set as text) and a
+// state on data-agent-chat-voice-state: listening, transcribing, queued, sending,
+// sent, silent, no_speech, not_configured, rate_limited, refused, failed.
+//
+// NO WORDS ARE LOST. A transcript that could not be sent goes in the chat's box,
+// after anything already typed there. A take that lands while another is still
+// being turned into words waits its turn, in order, and the line says so.
+//
+// It imports nothing at load (studio/voice_profile, and the model behind it, only
+// when a person with a saved voice talks), so test/javascript/agent_chat_voice.test.mjs
+// loads it as a data: module.
+
+export const EMBED_WAIT_MS = 8000
+
+export const MESSAGES = {
+  listening: "Listening...",
+  transcribing: "Turning that into words...",
+  queued: "Got that one too. It's next.",
+  sending: (name) => `Sending to ${name}...`,
+  sent: (speaker) => `Sent. Spoken by ${speaker}.`,
+  sentPlain: "Sent.",
+  silent: (label) => `I couldn't hear anything${label ? ` from ${label}` : ""}. Check your microphone and hold to talk again.`,
+  noSpeech: "I couldn't hear any words in that. Check your microphone and try again.",
+  notConfigured: "Voice isn't set up on this app yet, so I can't hear recordings. Type instead for now.",
+  rateLimited: "That's a lot of voice messages in a row. Wait a moment, then hold to talk again.",
+  signedOut: "Sign in again to talk.",
+  unavailable: "I couldn't transcribe that just now. Try again in a moment.",
+  failed: "That recording didn't go through. Try again.",
+  offline: "Can't reach the server right now. Try again in a moment.",
+  notSent: (name) => `Couldn't send that to ${name}. Your words are in the box; press send to try again.`
+}
+
+// "Try again in 40 seconds." from a Retry-After header or a retry_after field.
+export function retryHint(seconds) {
+  const n = Math.round(Number(seconds))
+  if (!Number.isFinite(n) || n <= 0) return ""
+  if (n < 60) return ` Try again in ${n} second${n === 1 ? "" : "s"}.`
+  const minutes = Math.ceil(n / 60)
+  return ` Try again in ${minutes} minute${minutes === 1 ? "" : "s"}.`
+}
+
+// What POST /voice/takes's refusal means on the page: {state, message}.
+// `body` is the parsed JSON (or {}); `retryAfter` the header, if any.
+export function refusalFor(status, body = {}, retryAfter = null) {
+  const said = body && typeof body.error === "string" && body.error.trim() ? body.error.trim() : null
+  if (status === 401) return { state: "refused", message: MESSAGES.signedOut }
+  if (status === 429) {
+    return { state: "rate_limited", message: MESSAGES.rateLimited + retryHint(retryAfter ?? (body && body.retry_after)) }
+  }
+  if (status === 422 && body && body.reason === "no_speech") return { state: "no_speech", message: said || MESSAGES.noSpeech }
+  if (status === 503 && body && body.reason === "not_configured") return { state: "not_configured", message: said || MESSAGES.notConfigured }
+  if (status === 503) return { state: "failed", message: said || MESSAGES.unavailable }
+  if ([403, 413, 415, 422].includes(status)) return { state: "refused", message: said || MESSAGES.failed }
+  return { state: "failed", message: MESSAGES.failed }
+}
+
+// The message's `voice`, from a 200 answer: what the take measured, never a name.
+export function voiceMetadata(answer = {}) {
+  const score = typeof answer.score === "number" && Number.isFinite(answer.score) ? answer.score : null
+  const duration = Number.isInteger(answer.duration_ms) ? answer.duration_ms : null
+  return { check: String(answer.check || "no_embedding"), score, duration_ms: duration }
+}
+
+// The multipart body POST /voice/takes reads (docs/VOICE_TRANSCRIPTION.md).
+export function takeForm(detail, { embedding = null, model = null } = {}, FormDataClass = globalThis.FormData) {
+  const form = new FormDataClass()
+  form.append("voice[audio]", detail.blob, "take")
+  if (detail.mimeType) form.append("voice[mime_type]", detail.mimeType)
+  form.append("voice[duration_ms]", String(Math.max(1, Math.round(Number(detail.durationMs) || 0))))
+  if (Array.isArray(embedding) && embedding.length && model) {
+    form.append("voice[embedding]", JSON.stringify(embedding))
+    form.append("voice[model]", model)
+  }
+  return form
+}
+
+export function parseEmbedder(text) {
+  if (!text) return null
+  try {
+    const config = JSON.parse(text)
+    return config && config.name && config.id ? config : null
+  } catch (_) {
+    return null
+  }
+}
+
+// The words in the box, after anything already there: a person's draft is theirs.
+export function wordsInBox(current, text) {
+  return current && current.trim() ? `${current.trimEnd()}\n${text}` : text
+}
+
+// The page's token (csrf_meta_tags), else the chat form's. In that order: the
+// meta tag's is good for any action, and the form's is per-form under
+// load_defaults 8.1, bound to POST /agent_chat/messages, so POST /voice/takes
+// refuses it.
+export function csrfToken(form, doc = globalThis.document) {
+  const meta = doc && doc.querySelector("meta[name='csrf-token']")
+  const content = meta && meta.getAttribute("content")
+  if (content) return content
+  const field = form && form.querySelector("input[name='authenticity_token']")
+  return field && field.value ? field.value : null
+}
+
+// Resolves to `promise`'s value, or `fallback` once `ms` have passed.
+export function within(promise, ms, fallback = null, setTimer = (fn, t) => globalThis.setTimeout(fn, t)) {
+  return Promise.race([promise, new Promise((resolve) => setTimer(() => resolve(fallback), ms))])
+}
+
+async function readJson(response) {
+  try { return await response.json() } catch (_) { return {} }
+}
+
+// Mounts one voice section, which sits inside the chat's form. Returns
+// { takeArrived, destroy } for tests.
+export function mountAgentChatVoice(root, {
+  fetch: fetcher = (...args) => globalThis.fetch(...args),
+  doc = globalThis.document,
+  loadEmbedder = async (config) => {
+    const { embedderFor } = await import("studio/voice_profile")
+    return embedderFor(config)
+  },
+  setTimer = (fn, ms) => globalThis.setTimeout(fn, ms),
+  FormDataClass = globalThis.FormData,
+  CustomEventClass = globalThis.CustomEvent
+} = {}) {
+  const status = root.querySelector("[data-agent-chat-voice-status]")
+  const form = root.closest("[data-agent-chat-form]")
+  const chat = root.closest("[data-agent-chat-soul]")
+  const name = root.dataset.agentChatVoiceName || "the agent"
+  const soul = root.dataset.agentChatVoiceSoul
+  const embedders = new Map()
+  const waiting = []
+  let working = false
+  let alive = true
+
+  function say(state, message) {
+    root.dataset.agentChatVoiceState = state
+    if (status) status.textContent = message || ""
+  }
+
+  function embedder() {
+    const config = parseEmbedder(root.getAttribute("data-agent-chat-voice-embedder"))
+    if (!config) return Promise.resolve(null)
+    if (!embedders.has(config.id)) {
+      const loading = Promise.resolve().then(() => loadEmbedder(config)).catch(() => null)
+      embedders.set(config.id, loading)
+      loading.then((loaded) => { if (!loaded) embedders.delete(config.id) })
+    }
+    return embedders.get(config.id)
+  }
+
+  async function embed(blob) {
+    try {
+      const loaded = await within(embedder(), EMBED_WAIT_MS, null, setTimer)
+      if (!loaded) return {}
+      const vector = await within(loaded.embed(blob), EMBED_WAIT_MS, null, setTimer)
+      return Array.isArray(vector) && vector.length ? { embedding: vector, model: loaded.id } : {}
+    } catch (_) {
+      return {}
+    }
+  }
+
+  function keepWords(text) {
+    const input = form && form.querySelector("[data-agent-chat-input]")
+    if (input) input.value = wordsInBox(input.value, text)
+  }
+
+  function headers(extra = {}) {
+    const token = csrfToken(form, doc)
+    return { Accept: "application/json", ...extra, ...(token ? { "X-CSRF-Token": token } : {}) }
+  }
+
+  async function send(answer) {
+    if (!form) {
+      say("failed", MESSAGES.notSent(name))
+      return
+    }
+    say("sending", MESSAGES.sending(name))
+    let response
+    try {
+      response = await fetcher(form.getAttribute("action"), {
+        method: "POST", headers: headers({ "Content-Type": "application/json" }), credentials: "same-origin",
+        body: JSON.stringify({ soul, text: answer.text, voice: voiceMetadata(answer) })
+      })
+    } catch (_) {
+      keepWords(answer.text)
+      say("failed", MESSAGES.notSent(name))
+      return
+    }
+    const data = await readJson(response)
+    if (response.status === 201 && data.turn) {
+      // The speaker the server kept, which is what the agent is told.
+      const kept = data.voice && typeof data.voice.speaker === "string" ? data.voice.speaker : null
+      say("sent", kept ? MESSAGES.sent(kept) : MESSAGES.sentPlain)
+      if (chat) chat.dispatchEvent(new CustomEventClass("studio:agent-chat:refresh", { detail: { turn: data.turn } }))
+      return
+    }
+    keepWords(answer.text)
+    const reason = typeof data.error === "string" && data.error ? `${data.error} ` : ""
+    say(response.status === 429 ? "rate_limited" : "failed", `${reason}${MESSAGES.notSent(name)}`)
+  }
+
+  async function handleTake(detail) {
+    say("transcribing", MESSAGES.transcribing)
+    const vector = await embed(detail.blob)
+    let response
+    try {
+      response = await fetcher(root.dataset.agentChatVoiceTakesUrl || "/voice/takes", {
+        method: "POST", headers: headers(), credentials: "same-origin", body: takeForm(detail, vector, FormDataClass)
+      })
+    } catch (_) {
+      say("failed", MESSAGES.offline)
+      return
+    }
+    const body = await readJson(response)
+    if (!response.ok || typeof body.text !== "string" || !body.text.trim()) {
+      const retryAfter = response.headers && response.headers.get ? response.headers.get("Retry-After") : null
+      const { state, message } = response.ok ? { state: "no_speech", message: MESSAGES.noSpeech } : refusalFor(response.status, body, retryAfter)
+      say(state, message)
+      return
+    }
+    await send(body)
+  }
+
+  // One take at a time, in the order they were spoken. Resolves when the queue
+  // has drained, so a test can await it.
+  async function takeArrived(detail) {
+    if (working) {
+      waiting.push(detail)
+      say("queued", MESSAGES.queued)
+      return
+    }
+    working = true
+    try {
+      let next = detail
+      while (next && alive) {
+        await handleTake(next)
+        next = waiting.shift()
+      }
+    } finally {
+      working = false
+    }
+  }
+
+  function onTake(event) {
+    if (event.detail && event.detail.blob) takeArrived(event.detail)
+  }
+
+  // The one line for a silent take, naming the microphone (the recorder's own
+  // line for it is hidden in the composer, studio/agent_chat/_voice).
+  function onSilent(event) {
+    say("silent", MESSAGES.silent(event.detail && event.detail.microphone && event.detail.microphone.label))
+  }
+
+  // The recorder's state, on the one line: a new hold replaces whatever the last
+  // take left there ("Sent.", a refusal). A take still in hand speaks over it
+  // when it lands. Starting the model download here gets it ready while the
+  // person is still talking.
+  function onState(event) {
+    const next = event.detail && event.detail.state
+    if (next === "starting") {
+      say("idle", "")
+    } else if (next === "recording") {
+      say("listening", MESSAGES.listening)
+      embedder().then((loaded) => loaded && loaded.warm && loaded.warm()).catch(() => {})
+    } else if (root.dataset.agentChatVoiceState === "listening") {
+      say(working ? "transcribing" : "idle", working ? MESSAGES.transcribing : "")
+    }
+  }
+
+  // "I can't hear anything yet" on the one line: the recorder's own line is hidden
+  // in the composer while it records, so a held button never moves for it.
+  function onHint(event) {
+    const text = event.detail && event.detail.text
+    if (text) say("listening", text)
+    // Heard after the quiet hint: the recorder's "heard" is blank here, so this takes
+    // "I can't hear anything yet" back. No write when the line already says it.
+    else if (root.dataset.agentChatVoiceState === "listening" && status && status.textContent !== MESSAGES.listening) say("listening", MESSAGES.listening)
+  }
+
+  // A Turbo restore brings back whatever the line last said, with no take behind it.
+  say("idle", "")
+
+  root.addEventListener("studio:voice-recorder:take", onTake)
+  root.addEventListener("studio:voice-recorder:silent", onSilent)
+  root.addEventListener("studio:voice-recorder:state", onState)
+  root.addEventListener("studio:voice-recorder:hint", onHint)
+
+  return {
+    takeArrived,
+    destroy() {
+      alive = false
+      root.removeEventListener("studio:voice-recorder:take", onTake)
+      root.removeEventListener("studio:voice-recorder:silent", onSilent)
+      root.removeEventListener("studio:voice-recorder:state", onState)
+      root.removeEventListener("studio:voice-recorder:hint", onHint)
+    }
+  }
+}

data/app/javascript/studio/alpine_shims.js

@@ -25,7 +25,7 @@ import {
 } from "studio/head_chrome"
 import { studioBoard, loadSortable, sortableShim } from "studio/board"
 import { levelingActionModal } from "studio/leveling_activity"
-import { themeEditor, dsThemeEditor } from "studio/theme_editor"
+import { dsThemeEditor } from "studio/theme_editor"
 import { emailBannerEditor, emailRecipients } from "studio/email_banner"
 
 // x-data="navCollapse()": the hub's own header. A host that defines its own
@@ -60,9 +60,7 @@ export function installAlpineShims() {
   // it. SortableJS replaces this object when it arrives; a page that loads its
   // own copy (turf-monster's slate page) replaces it the same way.
   if (!window.Sortable) window.Sortable = sortableShim(() => loadSortable())
-  // x-data="themeEditor({...})" (theme_settings/edit) and
   // x-data="dsThemeEditor({...})" (style/_theme). Alpine passes the seed alone.
-  if (!window.themeEditor) window.themeEditor = (seed) => themeEditor(seed)
   if (!window.dsThemeEditor) window.dsThemeEditor = (seed) => dsThemeEditor(seed)
   // x-data="emailBannerEditor({...})" (studio/emails/show) and
   // x-data="emailRecipients({...})" (studio/emails/index).

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

@@ -0,0 +1,17 @@
+// agent-chat-voice: hold to talk in the shared agent chat's composer
+// (studio/agent_chat/_voice), on the engine's Stimulus application (studio/stimulus
+// registers it lazily, the first time a page renders the mic). The take's journey
+// is studio/agent_chat_voice.
+import { Controller } from "@hotwired/stimulus"
+import { mountAgentChatVoice } from "studio/agent_chat_voice"
+
+export default class extends Controller {
+  connect() {
+    this.voice = mountAgentChatVoice(this.element)
+  }
+
+  disconnect() {
+    if (this.voice) this.voice.destroy()
+    this.voice = null
+  }
+}

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

@@ -0,0 +1,80 @@
+// style-section-nav: the style guide's sticky row (style/index). Its tabs follow
+// the section the reader is in, by scroll and by a tab's own jump.
+//
+//   <nav data-studio-controller="style-section-nav">
+//     <div data-style-section-nav-target="scroller">
+//       <a href="#theme" data-style-section-nav-target="link">Theme</a>
+//
+// Registered by studio/style_guide, which only the style guide loads.
+import { Controller } from "@hotwired/stimulus"
+import { activeIndex } from "studio/style_section_nav"
+
+const ACTIVE = "btn-primary"
+const REST = "btn-neutral"
+// A jump lands a section by its scroll-margin (--nav-h + 5rem), read while the
+// header may still be tall; the header then collapses, so the row rises and the
+// section does not. The full margin keeps the clicked section past the line,
+// with the collapse's height to spare, for any later scroll or resize.
+const LINE_SLACK = 80
+
+export default class extends Controller {
+  static targets = ["link", "scroller"]
+
+  connect() {
+    this.schedule = this.schedule.bind(this)
+    window.addEventListener("scroll", this.schedule, { passive: true })
+    window.addEventListener("resize", this.schedule)
+    this.sync()
+  }
+
+  disconnect() {
+    window.removeEventListener("scroll", this.schedule)
+    window.removeEventListener("resize", 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 links = this.linkTargets
+    const tops = links.map((link) => {
+      const section = document.getElementById(link.getAttribute("href").slice(1))
+      return section ? section.getBoundingClientRect().top : Infinity
+    })
+    const line = this.element.getBoundingClientRect().bottom + LINE_SLACK
+    const page = document.documentElement
+    const atPageEnd = page.scrollTop > 0 && window.innerHeight + page.scrollTop >= page.scrollHeight - 2
+    this.highlight(links[activeIndex(tops, line, atPageEnd)])
+  }
+
+  highlight(current) {
+    if (!current || current === this.current) return
+    this.current = current
+    this.linkTargets.forEach((link) => {
+      const on = link === current
+      link.classList.toggle(ACTIVE, on)
+      link.classList.toggle(REST, !on)
+      if (on) link.setAttribute("aria-current", "true")
+      else link.removeAttribute("aria-current")
+    })
+    this.reveal(current)
+  }
+
+  // Keeps the active tab in view on a narrow screen. Moves the row only:
+  // scrollIntoView would also move the page the reader is scrolling.
+  reveal(link) {
+    if (!this.hasScrollerTarget) return
+    const row = this.scrollerTarget
+    const box = row.getBoundingClientRect()
+    const tab = link.getBoundingClientRect()
+    if (tab.left < box.left) row.scrollLeft -= box.left - tab.left + 32
+    else if (tab.right > box.right) row.scrollLeft += tab.right - box.right + 32
+  }
+}

data/app/javascript/studio/microphone_chip.js

@@ -325,6 +325,7 @@ export function mountMicrophoneChip(root, { win = window } = {}) {
     if (!target.closest) return
     // A click on the backdrop lands on the dialog element itself.
     if (dialog && target === dialog) { dialog.close(); return }
+    if (dialog && target.closest("[data-microphone-help-close]")) { dialog.close(); return }
     const option = target.closest("[data-microphone-option]")
     if (option && root.contains(option)) { pick(option); return }
     if (target.closest("[data-microphone-help-link]")) {

data/app/javascript/studio/stimulus.js

@@ -63,6 +63,8 @@ export const schema = {
 // So are the voice capture pair (docs/VOICE_CAPTURE.md): a chip whose controller
 // failed still shows its prompt line, and a recorder whose controller failed
 // says recording did not load (data-studio-controller-failed="voice-recorder").
+// So is the chat's mic: a mic whose controller failed says voice did not load,
+// and the box still types (data-studio-controller-failed="agent-chat-voice").
 export const LAZY = {
   "board": () => import("studio/controllers/board_controller"),
   "geo-settings": () => import("studio/controllers/geo_settings_controller"),
@@ -73,6 +75,7 @@ export const LAZY = {
   "survey": () => import("studio/controllers/survey_controller"),
   "knowledge-transcript": () => import("studio/controllers/knowledge_transcript_controller"),
   "agent-chat": () => import("studio/controllers/agent_chat_controller"),
+  "agent-chat-voice": () => import("studio/controllers/agent_chat_voice_controller"),
   "voice-profile": () => import("studio/controllers/voice_profile_controller"),
   "microphone-chip": () => import("studio/controllers/microphone_chip_controller"),
   "voice-recorder": () => import("studio/controllers/voice_recorder_controller")

data/app/javascript/studio/style_guide.js

@@ -9,5 +9,7 @@
 // demos the moment the page is up finds them there.
 import { application } from "studio/stimulus"
 import StyleModalsController from "studio/controllers/style_modals_controller"
+import StyleSectionNavController from "studio/controllers/style_section_nav_controller"
 
 application.register("style-modals", StyleModalsController)
+application.register("style-section-nav", StyleSectionNavController)

data/app/javascript/studio/style_section_nav.js

@@ -0,0 +1,16 @@
+// studio/style_section_nav: which section of the style guide the reader is in.
+// It imports nothing; test/javascript/style_section_nav.test.mjs loads it as a
+// data: module.
+//
+// `tops` is each section's top in viewport pixels, in page order. A section is
+// current once its top reaches the bottom of the sticky row (`line`). Before
+// the first one reaches it, the first is current. At the end of the page the
+// last is current, because a short last section can never reach the line.
+export function activeIndex(tops, line, atPageEnd = false) {
+  if (tops.length === 0) return -1
+  if (atPageEnd) return tops.length - 1
+
+  let active = 0
+  tops.forEach((top, index) => { if (top <= line) active = index })
+  return active
+}

data/app/javascript/studio/theme_editor.js

@@ -1,72 +1,18 @@
-// studio/theme_editor: the two live-preview theme editors, as the Alpine
-// factories their templates bind.
+// studio/theme_editor: the live-preview theme editor, as the Alpine factory its
+// template binds.
 //
-//   themeEditor(colors)    theme_settings/edit, the standalone /admin/theme page
 //   dsThemeEditor(seed)    style/_theme, the Theme section of the style guide
 //
-// Both are seeded with the server-resolved role colours and write the themeable
+// It is seeded with the server-resolved role colours and writes the themeable
 // role variables on the document as the operator types, so every specimen on
 // the page restyles at once. The inputs still carry the real values.
 //
-// studio/alpine_shims publishes both as window globals before Alpine starts,
-// because x-data="themeEditor(...)" is evaluated the moment Alpine does.
+// studio/alpine_shims publishes it as a window global before Alpine starts,
+// because x-data="dsThemeEditor(...)" is evaluated the moment Alpine does.
 //
 // It imports nothing; test/javascript/theme_editor.test.mjs loads it as a
 // data: module.
 
-// The seven roles the standalone editor edits, in the order it lists them.
-export const ROLES = ["primary", "success", "accent", "warning", "danger", "dark", "light"]
-
-// A typed colour as #rrggbb: a missing # is added and a 3-digit hex is doubled.
-// Answers null for anything that is not a 3- or 6-digit hex.
-export function normalizeHex(value) {
-  let hex = String(value == null ? "" : value).trim()
-  if (!hex.startsWith("#")) hex = "#" + hex
-  if (/^#[0-9a-fA-F]{3}$/.test(hex)) {
-    hex = "#" + hex[1] + hex[1] + hex[2] + hex[2] + hex[3] + hex[3]
-  }
-  return /^#[0-9a-fA-F]{6}$/.test(hex) ? hex : null
-}
-
-// `hex` (#rrggbb) moved `amount` (0..1) of the way to white.
-export function lightenColor(hex, amount) {
-  hex = hex.replace("#", "")
-  const r = parseInt(hex.substring(0, 2), 16)
-  const g = parseInt(hex.substring(2, 4), 16)
-  const b = parseInt(hex.substring(4, 6), 16)
-  const nr = Math.round(r + (255 - r) * amount)
-  const ng = Math.round(g + (255 - g) * amount)
-  const nb = Math.round(b + (255 - b) * amount)
-  return "#" + [nr, ng, nb].map((c) => c.toString(16).padStart(2, "0")).join("")
-}
-
-// The standalone editor's colours: every role present, blank when the server
-// resolved none.
-export function seededColors(seed) {
-  const colors = {}
-  ROLES.forEach((role) => { colors[role] = (seed && seed[role]) || "" })
-  return colors
-}
-
-// What the standalone editor writes on the root for `colors`, as
-// [property, value] pairs; a null value removes the property.
-//
-// btn-warning and btn-danger paint --color-<role>-fill first (the resolver
-// emits it for the engine defaults), so a typed colour sets it too or the
-// specimens keep the default fill. A cleared colour drops the override.
-export function previewProperties(colors) {
-  const properties = [
-    ["--color-cta", colors.primary],
-    ["--color-success", colors.success],
-    ["--color-warning", colors.warning || "#FF7C47"],
-    ["--color-danger", colors.danger || "#EF4444"]
-  ]
-  for (const role of ["warning", "danger"]) {
-    properties.push([`--color-${role}-fill`, colors[role] ? colors[role] : null])
-  }
-  return properties
-}
-
 // What the style guide's editor writes on the root for `colors`. It sets only
 // what has a value and removes nothing.
 export function stylePreviewProperties(colors) {
@@ -87,52 +33,6 @@ function applyProperties(style, properties) {
   }
 }
 
-// x-data="themeEditor({...})": theme_settings/edit.
-export function themeEditor(seed) {
-  return {
-    colors: seededColors(seed),
-
-    resetColor(role, defaultVal) {
-      this.colors[role] = defaultVal
-      this.updatePreview()
-    },
-
-    normalizeHex(role) {
-      const hex = normalizeHex(this.colors[role])
-      if (hex) this.colors[role] = hex
-      this.updatePreview()
-    },
-
-    // Live CSS variables on the document, for immediate feedback.
-    updatePreview() {
-      applyProperties(document.documentElement.style, previewProperties(this.colors))
-    },
-
-    darkPreviewStyle() {
-      return { backgroundColor: this.colors.dark, borderRadius: "0" }
-    },
-
-    darkSurfaceStyle() {
-      return {
-        backgroundColor: this.lightenColor(this.colors.dark, 0.3),
-        border: "1px solid rgba(255,255,255,0.1)"
-      }
-    },
-
-    lightPreviewStyle() {
-      return { backgroundColor: this.colors.light, borderRadius: "0" }
-    },
-
-    lightSurfaceStyle() {
-      return { backgroundColor: "#ffffff", border: "1px solid #e2e8f0" }
-    },
-
-    lightenColor(hex, amount) {
-      return lightenColor(hex, amount)
-    }
-  }
-}
-
 // The method a form really sends, and its body without Rails' _method override.
 // The editor's form carries _method=patch, and sending the real method means
 // nothing depends on Rack::MethodOverride parsing a multipart fetch body.
@@ -170,7 +70,7 @@ export function failureReason(response) {
 //
 // SAVE IN PLACE. Save and Regenerate submit by fetch and stay on the style
 // guide: the form's @submit.prevent stops the browser navigating to
-// /admin/theme, the live preview persists, and the outcome is a toast (the
+// its save endpoint, the live preview persists, and the outcome is a toast (the
 // engine's `toast` window event). The form's own POST still works when Alpine
 // never loads.
 export function dsThemeEditor(seed) {